frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx

@@ -11,6 +11,7 @@ import { FuelLogResponse, UpdateFuelLogRequest } from '../../fuel-logs/types/fue
 import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog';
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
 import { VehicleImage } from '../components/VehicleImage';
+import { OwnershipCostsList } from '../../ownership-costs';
 
 interface VehicleDetailMobileProps {
   vehicle: Vehicle;
@@ -224,7 +225,15 @@ export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
           </CardContent>
         </Card>
       </Section>
-      
+
+      <Section title="Recurring Costs">
+        <Card>
+          <CardContent>
+            <OwnershipCostsList vehicleId={vehicle.id} />
+          </CardContent>
+        </Card>
+      </Section>
+
       <Section title="Vehicle Records">
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
           <Typography variant="body2" color="text.secondary">

frontend/src/features/vehicles/pages/VehicleDetailPage.tsx

@@ -22,6 +22,7 @@ import { FuelLogEditDialog } from '../../fuel-logs/components/FuelLogEditDialog'
 import { FuelLogForm } from '../../fuel-logs/components/FuelLogForm';
 // Unit conversions now handled by backend
 import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
+import { OwnershipCostsList } from '../../ownership-costs';
 
 const DetailField: React.FC<{
   label: string;
@@ -356,14 +357,19 @@ export const VehicleDetailPage: React.FC = () => {
             <DetailField label="License Plate" value={vehicle.licensePlate} />
           </div>
 
-          <DetailField 
+          <DetailField
-            label="Current Odometer Reading" 
+            label="Current Odometer Reading"
-            value={vehicle.odometerReading ? `${vehicle.odometerReading.toLocaleString()} mi` : undefined} 
+            value={vehicle.odometerReading ? `${vehicle.odometerReading.toLocaleString()} mi` : undefined}
           />
         </form>
 
         <Divider sx={{ my: 4 }} />
 
+        {/* Recurring Ownership Costs */}
+        <OwnershipCostsList vehicleId={vehicle.id} />
+
+        <Divider sx={{ my: 4 }} />
+
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
           <Typography variant="h6" sx={{ fontWeight: 600 }}>
             Vehicle Records