diff --git a/frontend/src/features/ownership-costs/api/ownership-costs.api.ts b/frontend/src/features/ownership-costs/api/ownership-costs.api.ts
index 57c300b..248d754 100644
--- a/frontend/src/features/ownership-costs/api/ownership-costs.api.ts
+++ b/frontend/src/features/ownership-costs/api/ownership-costs.api.ts
@@ -1,60 +1,28 @@
 /**
- * @ai-summary API calls for ownership-costs feature
+ * @ai-summary API client for ownership-costs feature
  */
 
 import { apiClient } from '../../../core/api/client';
-import {
-  OwnershipCost,
-  CreateOwnershipCostRequest,
-  UpdateOwnershipCostRequest,
-  OwnershipCostStats
-} from '../types/ownership-costs.types';
+import type { CreateOwnershipCostRequest, OwnershipCost, UpdateOwnershipCostRequest } from '../types/ownership-costs.types';
 
 export const ownershipCostsApi = {
-  /**
-   * Get all ownership costs for a vehicle
-   */
-  getByVehicle: async (vehicleId: string): Promise<OwnershipCost[]> => {
-    const response = await apiClient.get(`/ownership-costs/vehicle/${vehicleId}`);
-    return response.data;
+  async list(filters?: { vehicleId?: string }) {
+    const res = await apiClient.get<OwnershipCost[]>('/ownership-costs', { params: filters });
+    return res.data;
   },
-
-  /**
-   * Get a single ownership cost by ID
-   */
-  getById: async (id: string): Promise<OwnershipCost> => {
-    const response = await apiClient.get(`/ownership-costs/${id}`);
-    return response.data;
+  async get(id: string) {
+    const res = await apiClient.get<OwnershipCost>(`/ownership-costs/${id}`);
+    return res.data;
   },
-
-  /**
-   * Create a new ownership cost
-   */
-  create: async (data: CreateOwnershipCostRequest): Promise<OwnershipCost> => {
-    const response = await apiClient.post('/ownership-costs', data);
-    return response.data;
+  async create(payload: CreateOwnershipCostRequest) {
+    const res = await apiClient.post<OwnershipCost>('/ownership-costs', payload);
+    return res.data;
   },
-
-  /**
-   * Update an existing ownership cost
-   */
-  update: async (id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost> => {
-    const response = await apiClient.put(`/ownership-costs/${id}`, data);
-    return response.data;
+  async update(id: string, payload: UpdateOwnershipCostRequest) {
+    const res = await apiClient.put<OwnershipCost>(`/ownership-costs/${id}`, payload);
+    return res.data;
   },
-
-  /**
-   * Delete an ownership cost
-   */
-  delete: async (id: string): Promise<void> => {
+  async remove(id: string) {
     await apiClient.delete(`/ownership-costs/${id}`);
   },
-
-  /**
-   * Get aggregated cost stats for a vehicle
-   */
-  getVehicleStats: async (vehicleId: string): Promise<OwnershipCostStats> => {
-    const response = await apiClient.get(`/ownership-costs/vehicle/${vehicleId}/stats`);
-    return response.data;
-  },
 };
diff --git a/frontend/src/features/ownership-costs/components/OwnershipCostForm.tsx b/frontend/src/features/ownership-costs/components/OwnershipCostForm.tsx
index 8030b9f..e7c59c0 100644
--- a/frontend/src/features/ownership-costs/components/OwnershipCostForm.tsx
+++ b/frontend/src/features/ownership-costs/components/OwnershipCostForm.tsx
@@ -1,214 +1,235 @@
 /**
- * @ai-summary Form component for adding/editing ownership costs
+ * @ai-summary Form component for creating/editing ownership costs
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Button } from '../../../shared-minimal/components/Button';
-import {
-  OwnershipCost,
-  OwnershipCostType,
-  CostInterval,
-  COST_TYPE_LABELS,
-  INTERVAL_LABELS
-} from '../types/ownership-costs.types';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs from 'dayjs';
+import { useCreateOwnershipCost } from '../hooks/useOwnershipCosts';
+import type { OwnershipCostType } from '../types/ownership-costs.types';
+import { useVehicles } from '../../vehicles/hooks/useVehicles';
+import type { Vehicle } from '../../vehicles/types/vehicles.types';
+import { useDocumentsList } from '../../documents/hooks/useDocuments';
+import type { DocumentRecord } from '../../documents/types/documents.types';
 
 interface OwnershipCostFormProps {
-  vehicleId: string;
-  initialData?: OwnershipCost;
-  onSubmit: (data: {
-    costType: OwnershipCostType;
-    description?: string;
-    amount: number;
-    interval: CostInterval;
-    startDate: string;
-    endDate?: string;
-  }) => Promise<void>;
-  onCancel: () => void;
-  loading?: boolean;
+  onSuccess?: () => void;
+  onCancel?: () => void;
 }
 
-export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({
-  initialData,
-  onSubmit,
-  onCancel,
-  loading,
-}) => {
-  const [costType, setCostType] = useState<OwnershipCostType>(initialData?.costType || 'insurance');
-  const [description, setDescription] = useState(initialData?.description || '');
-  const [amount, setAmount] = useState(initialData?.amount?.toString() || '');
-  const [interval, setInterval] = useState<CostInterval>(initialData?.interval || 'monthly');
-  const [startDate, setStartDate] = useState(initialData?.startDate || new Date().toISOString().split('T')[0]);
-  const [endDate, setEndDate] = useState(initialData?.endDate || '');
-  const [error, setError] = useState<string | null>(null);
+export const OwnershipCostForm: React.FC<OwnershipCostFormProps> = ({ onSuccess, onCancel }) => {
+  const [vehicleID, setVehicleID] = React.useState<string>('');
+  const [costType, setCostType] = React.useState<OwnershipCostType>('insurance');
+  const [amount, setAmount] = React.useState<string>('');
+  const [description, setDescription] = React.useState<string>('');
+  const [periodStart, setPeriodStart] = React.useState<string>('');
+  const [periodEnd, setPeriodEnd] = React.useState<string>('');
+  const [notes, setNotes] = React.useState<string>('');
+  const [documentID, setDocumentID] = React.useState<string>('');
+  const [error, setError] = React.useState<string | null>(null);
 
-  useEffect(() => {
-    if (initialData) {
-      setCostType(initialData.costType);
-      setDescription(initialData.description || '');
-      setAmount(initialData.amount.toString());
-      setInterval(initialData.interval);
-      setStartDate(initialData.startDate);
-      setEndDate(initialData.endDate || '');
-    }
-  }, [initialData]);
+  const { data: vehicles } = useVehicles();
+  const { data: documents } = useDocumentsList({ vehicleId: vehicleID });
+  const create = useCreateOwnershipCost();
+
+  const resetForm = () => {
+    setVehicleID('');
+    setCostType('insurance');
+    setAmount('');
+    setDescription('');
+    setPeriodStart('');
+    setPeriodEnd('');
+    setNotes('');
+    setDocumentID('');
+    setError(null);
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
 
-    // Validate amount
+    if (!vehicleID) {
+      setError('Please select a vehicle.');
+      return;
+    }
+
     const parsedAmount = parseFloat(amount);
-    if (isNaN(parsedAmount) || parsedAmount < 0) {
-      setError('Please enter a valid amount');
-      return;
-    }
-
-    // Validate dates
-    if (!startDate) {
-      setError('Start date is required');
-      return;
-    }
-
-    if (endDate && new Date(endDate) < new Date(startDate)) {
-      setError('End date must be after start date');
+    if (isNaN(parsedAmount) || parsedAmount <= 0) {
+      setError('Please enter a valid positive amount.');
       return;
     }
 
     try {
-      await onSubmit({
-        costType,
-        description: description.trim() || undefined,
+      await create.mutateAsync({
+        vehicleId: vehicleID,
+        documentId: documentID || undefined,
+        costType: costType,
         amount: parsedAmount,
-        interval,
-        startDate,
-        endDate: endDate || undefined,
+        description: description.trim() || undefined,
+        periodStart: periodStart || undefined,
+        periodEnd: periodEnd || undefined,
+        notes: notes.trim() || undefined,
       });
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to save cost';
-      setError(message);
+
+      resetForm();
+      onSuccess?.();
+    } catch (err: any) {
+      setError(err?.message || 'Failed to create ownership cost');
     }
   };
 
-  const isEditMode = !!initialData;
+  const vehicleLabel = (v: Vehicle) => {
+    if (v.nickname && v.nickname.trim().length > 0) return v.nickname.trim();
+    const parts = [v.year, v.make, v.model, v.trimLevel].filter(Boolean);
+    const primary = parts.join(' ').trim();
+    if (primary.length > 0) return primary;
+    if (v.vin && v.vin.length > 0) return v.vin;
+    return v.id.slice(0, 8) + '...';
+  };
+
+  const documentLabel = (doc: DocumentRecord) => {
+    return doc.title || `Document ${doc.id.slice(0, 8)}`;
+  };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      {error && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-md text-sm">
-          {error}
-        </div>
-      )}
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <form onSubmit={handleSubmit} className="w-full">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pb-4">
+          <div className="flex flex-col">
+            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Vehicle</label>
+            <select
+              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
+              value={vehicleID}
+              onChange={(e) => setVehicleID(e.target.value)}
+              required
+            >
+              <option value="">Select vehicle...</option>
+              {(vehicles || []).map((v: Vehicle) => (
+                <option key={v.id} value={v.id}>{vehicleLabel(v)}</option>
+              ))}
+            </select>
+          </div>
 
-      <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
-          Cost Type
-        </label>
-        <select
-          value={costType}
-          onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
-          className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi"
-          style={{ fontSize: '16px' }}
-        >
-          {(Object.entries(COST_TYPE_LABELS) as [OwnershipCostType, string][]).map(([value, label]) => (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          ))}
-        </select>
-      </div>
+          <div className="flex flex-col">
+            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Cost Type</label>
+            <select
+              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
+              value={costType}
+              onChange={(e) => setCostType(e.target.value as OwnershipCostType)}
+            >
+              <option value="insurance">Insurance</option>
+              <option value="registration">Registration</option>
+              <option value="tax">Tax</option>
+              <option value="inspection">Inspection</option>
+              <option value="parking">Parking</option>
+              <option value="other">Other</option>
+            </select>
+          </div>
 
-      <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
-          Description (optional)
-        </label>
-        <input
-          type="text"
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder="e.g., Geico Full Coverage"
-          className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna"
-          style={{ fontSize: '16px' }}
-        />
-      </div>
+          <div className="flex flex-col md:col-span-2">
+            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Amount</label>
+            <div className="relative">
+              <span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-titanio">$</span>
+              <input
+                className="h-11 min-h-[44px] w-full rounded-lg border pl-7 pr-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
+                type="number"
+                step="0.01"
+                min="0.01"
+                value={amount}
+                placeholder="0.00"
+                onChange={(e) => setAmount(e.target.value)}
+                required
+              />
+            </div>
+          </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
-            Amount
-          </label>
-          <input
-            type="number"
-            value={amount}
-            onChange={(e) => setAmount(e.target.value)}
-            placeholder="0.00"
-            inputMode="decimal"
-            step="0.01"
-            min="0"
-            required
-            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna"
-            style={{ fontSize: '16px' }}
-          />
+          <div className="flex flex-col md:col-span-2">
+            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Description (optional)</label>
+            <input
+              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:placeholder-canna dark:focus:ring-abudhabi dark:focus:border-abudhabi"
+              type="text"
+              value={description}
+              placeholder="e.g., State Farm Full Coverage"
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-col">
+            <DatePicker
+              label="Period Start (optional)"
+              value={periodStart ? dayjs(periodStart) : null}
+              onChange={(newValue) => setPeriodStart(newValue?.format('YYYY-MM-DD') || '')}
+              format="MM/DD/YYYY"
+              slotProps={{
+                textField: {
+                  fullWidth: true,
+                  sx: {
+                    '& .MuiOutlinedInput-root': {
+                      minHeight: 44,
+                    },
+                  },
+                },
+              }}
+            />
+          </div>
+          <div className="flex flex-col">
+            <DatePicker
+              label="Period End (optional)"
+              value={periodEnd ? dayjs(periodEnd) : null}
+              onChange={(newValue) => setPeriodEnd(newValue?.format('YYYY-MM-DD') || '')}
+              format="MM/DD/YYYY"
+              slotProps={{
+                textField: {
+                  fullWidth: true,
+                  sx: {
+                    '& .MuiOutlinedInput-root': {
+                      minHeight: 44,
+                    },
+                  },
+                },
+              }}
+            />
+          </div>
+
+          <div className="flex flex-col md:col-span-2">
+            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Notes (optional)</label>
+            <textarea
+              className="min-h-[88px] rounded-lg border px-3 py-2 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-col md:col-span-2">
+            <label className="text-sm font-medium text-slate-700 dark:text-avus mb-1">Link to Document (optional)</label>
+            <select
+              className="h-11 min-h-[44px] rounded-lg border px-3 bg-white text-gray-900 border-slate-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi dark:focus:border-abudhabi"
+              value={documentID}
+              onChange={(e) => setDocumentID(e.target.value)}
+              disabled={!vehicleID}
+            >
+              <option value="">No document</option>
+              {(documents || []).map((doc: DocumentRecord) => (
+                <option key={doc.id} value={doc.id}>{documentLabel(doc)}</option>
+              ))}
+            </select>
+          </div>
         </div>
 
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
-            Payment Interval
-          </label>
-          <select
-            value={interval}
-            onChange={(e) => setInterval(e.target.value as CostInterval)}
-            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone dark:focus:ring-abudhabi"
-            style={{ fontSize: '16px' }}
-          >
-            {(Object.entries(INTERVAL_LABELS) as [CostInterval, string][]).map(([value, label]) => (
-              <option key={value} value={value}>
-                {label}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
+        {error && (
+          <div className="text-red-600 dark:text-red-400 text-sm mt-3">{error}</div>
+        )}
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
-            Start Date
-          </label>
-          <input
-            type="date"
-            value={startDate}
-            onChange={(e) => setStartDate(e.target.value)}
-            required
-            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone"
-            style={{ fontSize: '16px' }}
-          />
+        <div className="flex flex-col sm:flex-row gap-2 mt-4">
+          <Button type="submit" className="min-h-[44px]">Create Ownership Cost</Button>
+          <Button type="button" variant="secondary" onClick={onCancel} className="min-h-[44px]">Cancel</Button>
         </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-avus mb-1">
-            End Date (optional)
-          </label>
-          <input
-            type="date"
-            value={endDate}
-            onChange={(e) => setEndDate(e.target.value)}
-            className="w-full px-3 py-2 border rounded-md min-h-[44px] bg-white text-gray-900 border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-scuro dark:text-avus dark:border-silverstone"
-            style={{ fontSize: '16px' }}
-          />
-          <p className="text-xs text-gray-500 dark:text-titanio mt-1">
-            Leave blank for ongoing costs
-          </p>
-        </div>
-      </div>
-
-      <div className="flex gap-3 justify-end pt-4">
-        <Button variant="secondary" onClick={onCancel} type="button">
-          Cancel
-        </Button>
-        <Button type="submit" loading={loading}>
-          {isEditMode ? 'Update Cost' : 'Add Cost'}
-        </Button>
-      </div>
-    </form>
+      </form>
+    </LocalizationProvider>
   );
 };
+
+export default OwnershipCostForm;
diff --git a/frontend/src/features/ownership-costs/components/OwnershipCostsList.tsx b/frontend/src/features/ownership-costs/components/OwnershipCostsList.tsx
index 3b69dfb..f22b40c 100644
--- a/frontend/src/features/ownership-costs/components/OwnershipCostsList.tsx
+++ b/frontend/src/features/ownership-costs/components/OwnershipCostsList.tsx
@@ -2,65 +2,38 @@
  * @ai-summary List component for displaying ownership costs
  */
 
-import React, { useState } from 'react';
-import {
-  OwnershipCost,
-  CreateOwnershipCostRequest,
-  COST_TYPE_LABELS,
-  INTERVAL_LABELS
-} from '../types/ownership-costs.types';
-import { OwnershipCostForm } from './OwnershipCostForm';
-import { useOwnershipCosts } from '../hooks/useOwnershipCosts';
-import { Button } from '../../../shared-minimal/components/Button';
+import React from 'react';
+import type { OwnershipCost, OwnershipCostType } from '../types/ownership-costs.types';
+import { useOwnershipCostsList, useDeleteOwnershipCost } from '../hooks/useOwnershipCosts';
 
 interface OwnershipCostsListProps {
-  vehicleId: string;
+  vehicleId?: string;
+  onEdit?: (cost: OwnershipCost) => void;
 }
 
-export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
-  vehicleId,
-}) => {
-  const { costs, isLoading, error, createCost, updateCost, deleteCost } = useOwnershipCosts(vehicleId);
-  const [showForm, setShowForm] = useState(false);
-  const [editingCost, setEditingCost] = useState<OwnershipCost | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+const COST_TYPE_LABELS: Record<OwnershipCostType, string> = {
+  insurance: 'Insurance',
+  registration: 'Registration',
+  tax: 'Tax',
+  inspection: 'Inspection',
+  parking: 'Parking',
+  other: 'Other',
+};
 
-  const handleSubmit = async (data: Omit<CreateOwnershipCostRequest, 'vehicleId'>) => {
-    setIsSubmitting(true);
-    try {
-      if (editingCost) {
-        await updateCost(editingCost.id, data);
-      } else {
-        await createCost({ ...data, vehicleId });
-      }
-      setShowForm(false);
-      setEditingCost(null);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleEdit = (cost: OwnershipCost) => {
-    setEditingCost(cost);
-    setShowForm(true);
-  };
+export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({ vehicleId, onEdit }) => {
+  const { data: costs, isLoading, error } = useOwnershipCostsList(vehicleId ? { vehicleId } : undefined);
+  const deleteMutation = useDeleteOwnershipCost();
+  const [deleteConfirm, setDeleteConfirm] = React.useState<string | null>(null);
 
   const handleDelete = async (id: string) => {
     try {
-      await deleteCost(id);
+      await deleteMutation.mutateAsync(id);
       setDeleteConfirm(null);
     } catch (err) {
       console.error('Failed to delete cost:', err);
     }
   };
 
-  const handleCancel = () => {
-    setShowForm(false);
-    setEditingCost(null);
-  };
-
-  // Format currency
   const formatCurrency = (value: number): string => {
     return value.toLocaleString(undefined, {
       minimumFractionDigits: 2,
@@ -68,7 +41,6 @@ export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
     });
   };
 
-  // Format date
   const formatDate = (dateString: string): string => {
     return new Date(dateString).toLocaleDateString();
   };
@@ -84,127 +56,95 @@ export const OwnershipCostsList: React.FC<OwnershipCostsListProps> = ({
   }
 
   if (error) {
-    // Show a subtle message if the feature isn't set up yet, don't block the page
     return (
-      <div className="space-y-4">
-        <div className="flex justify-between items-center">
-          <h3 className="text-lg font-medium text-gray-900 dark:text-avus">
-            Recurring Costs
-          </h3>
-        </div>
-        <div className="text-sm text-gray-500 dark:text-titanio p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
-          <p>Recurring costs tracking is being set up.</p>
-          <p className="text-xs mt-1 text-gray-400 dark:text-canna">Run migrations to enable this feature.</p>
-        </div>
+      <div className="text-sm text-gray-500 dark:text-titanio p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
+        <p>Unable to load ownership costs.</p>
+      </div>
+    );
+  }
+
+  if (!costs || costs.length === 0) {
+    return (
+      <div className="text-center py-8 text-gray-500 dark:text-titanio">
+        <p>No ownership costs recorded yet.</p>
+        <p className="text-sm mt-1">Track insurance, registration, taxes, and other recurring vehicle costs.</p>
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
-      <div className="flex justify-between items-center">
-        <h3 className="text-lg font-medium text-gray-900 dark:text-avus">
-          Recurring Costs
-        </h3>
-        {!showForm && (
-          <Button
-            variant="secondary"
-            onClick={() => setShowForm(true)}
-            className="text-sm"
-          >
-            Add Cost
-          </Button>
-        )}
-      </div>
-
-      {showForm && (
-        <div className="p-4 bg-gray-50 dark:bg-scuro rounded-lg border border-gray-200 dark:border-silverstone">
-          <h4 className="text-md font-medium text-gray-900 dark:text-avus mb-4">
-            {editingCost ? 'Edit Cost' : 'Add New Cost'}
-          </h4>
-          <OwnershipCostForm
-            vehicleId={vehicleId}
-            initialData={editingCost || undefined}
-            onSubmit={handleSubmit}
-            onCancel={handleCancel}
-            loading={isSubmitting}
-          />
-        </div>
-      )}
-
-      {costs.length === 0 && !showForm ? (
-        <div className="text-center py-8 text-gray-500 dark:text-titanio">
-          <p>No recurring costs added yet.</p>
-          <p className="text-sm mt-1">Track insurance, registration, and other recurring vehicle costs.</p>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {costs.map((cost) => (
-            <div
-              key={cost.id}
-              className="p-4 bg-white dark:bg-jet rounded-lg border border-gray-200 dark:border-silverstone"
-            >
-              <div className="flex justify-between items-start">
-                <div>
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium text-gray-900 dark:text-avus">
-                      {COST_TYPE_LABELS[cost.costType]}
-                    </span>
-                    <span className="text-xs px-2 py-0.5 bg-gray-100 dark:bg-silverstone text-gray-600 dark:text-titanio rounded">
-                      {INTERVAL_LABELS[cost.interval]}
-                    </span>
-                  </div>
-                  {cost.description && (
-                    <p className="text-sm text-gray-500 dark:text-titanio mt-1">
-                      {cost.description}
-                    </p>
-                  )}
-                  <p className="text-xs text-gray-400 dark:text-canna mt-2">
-                    {formatDate(cost.startDate)}
-                    {cost.endDate ? ` - ${formatDate(cost.endDate)}` : ' - Ongoing'}
-                  </p>
-                </div>
-                <div className="text-right">
-                  <div className="text-lg font-semibold text-gray-900 dark:text-avus">
-                    ${formatCurrency(cost.amount)}
-                  </div>
-                  <div className="flex gap-2 mt-2">
+    <div className="space-y-3">
+      {costs.map((cost) => (
+        <div
+          key={cost.id}
+          className="p-4 bg-white dark:bg-jet rounded-lg border border-gray-200 dark:border-silverstone"
+        >
+          <div className="flex justify-between items-start">
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <span className="font-medium text-gray-900 dark:text-avus">
+                  {COST_TYPE_LABELS[cost.costType]}
+                </span>
+              </div>
+              {cost.description && (
+                <p className="text-sm text-gray-500 dark:text-titanio mt-1">
+                  {cost.description}
+                </p>
+              )}
+              {(cost.periodStart || cost.periodEnd) && (
+                <p className="text-xs text-gray-400 dark:text-canna mt-2">
+                  {cost.periodStart && formatDate(cost.periodStart)}
+                  {cost.periodStart && cost.periodEnd && ' - '}
+                  {cost.periodEnd && formatDate(cost.periodEnd)}
+                </p>
+              )}
+              {cost.notes && (
+                <p className="text-xs text-gray-500 dark:text-titanio mt-2">
+                  {cost.notes}
+                </p>
+              )}
+            </div>
+            <div className="text-right ml-4">
+              <div className="text-lg font-semibold text-gray-900 dark:text-avus">
+                ${formatCurrency(cost.amount)}
+              </div>
+              <div className="flex gap-2 mt-2">
+                {onEdit && (
+                  <button
+                    onClick={() => onEdit(cost)}
+                    className="text-sm text-primary-600 dark:text-abudhabi hover:underline min-h-[44px] px-2"
+                  >
+                    Edit
+                  </button>
+                )}
+                {deleteConfirm === cost.id ? (
+                  <div className="flex gap-1">
                     <button
-                      onClick={() => handleEdit(cost)}
-                      className="text-sm text-primary-600 dark:text-abudhabi hover:underline"
+                      onClick={() => handleDelete(cost.id)}
+                      className="text-sm text-red-600 hover:underline min-h-[44px] px-2"
                     >
-                      Edit
+                      Confirm
+                    </button>
+                    <button
+                      onClick={() => setDeleteConfirm(null)}
+                      className="text-sm text-gray-500 hover:underline min-h-[44px] px-2"
+                    >
+                      Cancel
                     </button>
-                    {deleteConfirm === cost.id ? (
-                      <div className="flex gap-1">
-                        <button
-                          onClick={() => handleDelete(cost.id)}
-                          className="text-sm text-red-600 hover:underline"
-                        >
-                          Confirm
-                        </button>
-                        <button
-                          onClick={() => setDeleteConfirm(null)}
-                          className="text-sm text-gray-500 hover:underline"
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    ) : (
-                      <button
-                        onClick={() => setDeleteConfirm(cost.id)}
-                        className="text-sm text-red-600 hover:underline"
-                      >
-                        Delete
-                      </button>
-                    )}
                   </div>
-                </div>
+                ) : (
+                  <button
+                    onClick={() => setDeleteConfirm(cost.id)}
+                    className="text-sm text-red-600 hover:underline min-h-[44px] px-2"
+                  >
+                    Delete
+                  </button>
+                )}
               </div>
             </div>
-          ))}
+          </div>
         </div>
-      )}
+      ))}
     </div>
   );
 };
diff --git a/frontend/src/features/ownership-costs/hooks/useOwnershipCosts.ts b/frontend/src/features/ownership-costs/hooks/useOwnershipCosts.ts
index c7c568e..a1ae474 100644
--- a/frontend/src/features/ownership-costs/hooks/useOwnershipCosts.ts
+++ b/frontend/src/features/ownership-costs/hooks/useOwnershipCosts.ts
@@ -1,75 +1,150 @@
 /**
- * @ai-summary React hook for ownership costs management
+ * @ai-summary React Query hooks for ownership-costs feature
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { ownershipCostsApi } from '../api/ownership-costs.api';
-import {
-  OwnershipCost,
-  CreateOwnershipCostRequest,
-  UpdateOwnershipCostRequest
-} from '../types/ownership-costs.types';
+import type { CreateOwnershipCostRequest, UpdateOwnershipCostRequest, OwnershipCost } from '../types/ownership-costs.types';
 
-interface UseOwnershipCostsResult {
-  costs: OwnershipCost[];
-  isLoading: boolean;
-  error: string | null;
-  refresh: () => Promise<void>;
-  createCost: (data: CreateOwnershipCostRequest) => Promise<OwnershipCost>;
-  updateCost: (id: string, data: UpdateOwnershipCostRequest) => Promise<OwnershipCost>;
-  deleteCost: (id: string) => Promise<void>;
+export function useOwnershipCostsList(filters?: { vehicleId?: string }) {
+  const queryKey = ['ownership-costs', filters];
+  const query = useQuery({
+    queryKey,
+    queryFn: () => ownershipCostsApi.list(filters),
+    networkMode: 'offlineFirst',
+  });
+  return query;
 }
 
-export function useOwnershipCosts(vehicleId: string): UseOwnershipCostsResult {
-  const [costs, setCosts] = useState<OwnershipCost[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchCosts = useCallback(async () => {
-    if (!vehicleId) return;
-
-    setIsLoading(true);
-    setError(null);
-    try {
-      const data = await ownershipCostsApi.getByVehicle(vehicleId);
-      setCosts(data);
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to load ownership costs';
-      setError(message);
-      console.error('Failed to fetch ownership costs:', err);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [vehicleId]);
-
-  useEffect(() => {
-    fetchCosts();
-  }, [fetchCosts]);
-
-  const createCost = useCallback(async (data: CreateOwnershipCostRequest): Promise<OwnershipCost> => {
-    const newCost = await ownershipCostsApi.create(data);
-    setCosts(prev => [newCost, ...prev]);
-    return newCost;
-  }, []);
-
-  const updateCost = useCallback(async (id: string, data: UpdateOwnershipCostRequest): Promise<OwnershipCost> => {
-    const updated = await ownershipCostsApi.update(id, data);
-    setCosts(prev => prev.map(cost => cost.id === id ? updated : cost));
-    return updated;
-  }, []);
-
-  const deleteCost = useCallback(async (id: string): Promise<void> => {
-    await ownershipCostsApi.delete(id);
-    setCosts(prev => prev.filter(cost => cost.id !== id));
-  }, []);
-
-  return {
-    costs,
-    isLoading,
-    error,
-    refresh: fetchCosts,
-    createCost,
-    updateCost,
-    deleteCost,
-  };
+export function useOwnershipCost(id?: string) {
+  const query = useQuery({
+    queryKey: ['ownership-cost', id],
+    queryFn: () => ownershipCostsApi.get(id!),
+    enabled: !!id,
+    networkMode: 'offlineFirst',
+  });
+  return query;
+}
+
+export function useCreateOwnershipCost() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: CreateOwnershipCostRequest) => ownershipCostsApi.create(payload),
+    onMutate: async (newCost) => {
+      await qc.cancelQueries({ queryKey: ['ownership-costs'] });
+
+      const previousCosts = qc.getQueryData(['ownership-costs']);
+
+      const optimisticCost: OwnershipCost = {
+        id: `temp-${Date.now()}`,
+        vehicleId: newCost.vehicleId,
+        documentId: newCost.documentId || null,
+        costType: newCost.costType,
+        amount: newCost.amount,
+        description: newCost.description || null,
+        periodStart: newCost.periodStart || null,
+        periodEnd: newCost.periodEnd || null,
+        notes: newCost.notes || null,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      };
+
+      qc.setQueryData(['ownership-costs'], (old: OwnershipCost[] | undefined) => {
+        return old ? [optimisticCost, ...old] : [optimisticCost];
+      });
+
+      return { previousCosts };
+    },
+    onError: (_err, _newCost, context) => {
+      if (context?.previousCosts) {
+        qc.setQueryData(['ownership-costs'], context.previousCosts);
+      }
+    },
+    onSettled: () => {
+      qc.invalidateQueries({ queryKey: ['ownership-costs'] });
+    },
+    networkMode: 'offlineFirst',
+  });
+}
+
+export function useUpdateOwnershipCost(id: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: UpdateOwnershipCostRequest) => ownershipCostsApi.update(id, payload),
+    onMutate: async (updateData) => {
+      await qc.cancelQueries({ queryKey: ['ownership-cost', id] });
+      await qc.cancelQueries({ queryKey: ['ownership-costs'] });
+
+      const previousCost = qc.getQueryData(['ownership-cost', id]);
+      const previousCosts = qc.getQueryData(['ownership-costs']);
+
+      qc.setQueryData(['ownership-cost', id], (old: OwnershipCost | undefined) => {
+        if (!old) return old;
+        return {
+          ...old,
+          ...updateData,
+          updatedAt: new Date().toISOString(),
+        };
+      });
+
+      qc.setQueryData(['ownership-costs'], (old: OwnershipCost[] | undefined) => {
+        if (!old) return old;
+        return old.map(cost =>
+          cost.id === id
+            ? { ...cost, ...updateData, updatedAt: new Date().toISOString() }
+            : cost
+        );
+      });
+
+      return { previousCost, previousCosts };
+    },
+    onError: (_err, _updateData, context) => {
+      if (context?.previousCost) {
+        qc.setQueryData(['ownership-cost', id], context.previousCost);
+      }
+      if (context?.previousCosts) {
+        qc.setQueryData(['ownership-costs'], context.previousCosts);
+      }
+    },
+    onSettled: () => {
+      qc.invalidateQueries({ queryKey: ['ownership-cost', id] });
+      qc.invalidateQueries({ queryKey: ['ownership-costs'] });
+    },
+    networkMode: 'offlineFirst',
+  });
+}
+
+export function useDeleteOwnershipCost() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => ownershipCostsApi.remove(id),
+    onMutate: async (id) => {
+      await qc.cancelQueries({ queryKey: ['ownership-costs'] });
+      await qc.cancelQueries({ queryKey: ['ownership-cost', id] });
+
+      const previousCosts = qc.getQueryData(['ownership-costs']);
+      const previousCost = qc.getQueryData(['ownership-cost', id]);
+
+      qc.setQueryData(['ownership-costs'], (old: OwnershipCost[] | undefined) => {
+        if (!old) return old;
+        return old.filter(cost => cost.id !== id);
+      });
+
+      qc.removeQueries({ queryKey: ['ownership-cost', id] });
+
+      return { previousCosts, previousCost, deletedId: id };
+    },
+    onError: (_err, _id, context) => {
+      if (context?.previousCosts) {
+        qc.setQueryData(['ownership-costs'], context.previousCosts);
+      }
+      if (context?.previousCost && context.deletedId) {
+        qc.setQueryData(['ownership-cost', context.deletedId], context.previousCost);
+      }
+    },
+    onSettled: () => {
+      qc.invalidateQueries({ queryKey: ['ownership-costs'] });
+    },
+    networkMode: 'offlineFirst',
+  });
 }
diff --git a/frontend/src/features/ownership-costs/index.ts b/frontend/src/features/ownership-costs/index.ts
index 45a863e..2f14880 100644
--- a/frontend/src/features/ownership-costs/index.ts
+++ b/frontend/src/features/ownership-costs/index.ts
@@ -1,5 +1,5 @@
 /**
- * @ai-summary Public API for ownership-costs frontend feature
+ * @ai-summary Public API for ownership-costs feature
  */
 
 // Export components
@@ -7,7 +7,13 @@ export { OwnershipCostForm } from './components/OwnershipCostForm';
 export { OwnershipCostsList } from './components/OwnershipCostsList';
 
 // Export hooks
-export { useOwnershipCosts } from './hooks/useOwnershipCosts';
+export {
+  useOwnershipCostsList,
+  useOwnershipCost,
+  useCreateOwnershipCost,
+  useUpdateOwnershipCost,
+  useDeleteOwnershipCost,
+} from './hooks/useOwnershipCosts';
 
 // Export API
 export { ownershipCostsApi } from './api/ownership-costs.api';
@@ -17,9 +23,5 @@ export type {
   OwnershipCost,
   CreateOwnershipCostRequest,
   UpdateOwnershipCostRequest,
-  OwnershipCostStats,
   OwnershipCostType,
-  CostInterval
 } from './types/ownership-costs.types';
-
-export { COST_TYPE_LABELS, INTERVAL_LABELS } from './types/ownership-costs.types';
diff --git a/frontend/src/features/ownership-costs/types/ownership-costs.types.ts b/frontend/src/features/ownership-costs/types/ownership-costs.types.ts
index 6bd6338..28d0b28 100644
--- a/frontend/src/features/ownership-costs/types/ownership-costs.types.ts
+++ b/frontend/src/features/ownership-costs/types/ownership-costs.types.ts
@@ -2,23 +2,18 @@
  * @ai-summary Type definitions for ownership-costs feature
  */
 
-// Cost types supported by ownership-costs feature
-export type OwnershipCostType = 'insurance' | 'registration' | 'tax' | 'other';
-
-// Cost interval types
-export type CostInterval = 'monthly' | 'semi_annual' | 'annual' | 'one_time';
+export type OwnershipCostType = 'insurance' | 'registration' | 'tax' | 'inspection' | 'parking' | 'other';
 
 export interface OwnershipCost {
   id: string;
-  userId: string;
   vehicleId: string;
-  documentId?: string;
+  documentId?: string | null;
   costType: OwnershipCostType;
-  description?: string;
   amount: number;
-  interval: CostInterval;
-  startDate: string;
-  endDate?: string;
+  description?: string | null;
+  periodStart?: string | null;
+  periodEnd?: string | null;
+  notes?: string | null;
   createdAt: string;
   updatedAt: string;
 }
@@ -27,44 +22,19 @@ export interface CreateOwnershipCostRequest {
   vehicleId: string;
   documentId?: string;
   costType: OwnershipCostType;
-  description?: string;
   amount: number;
-  interval: CostInterval;
-  startDate: string;
-  endDate?: string;
+  description?: string;
+  periodStart?: string;
+  periodEnd?: string;
+  notes?: string;
 }
 
 export interface UpdateOwnershipCostRequest {
   documentId?: string | null;
   costType?: OwnershipCostType;
-  description?: string | null;
   amount?: number;
-  interval?: CostInterval;
-  startDate?: string;
-  endDate?: string | null;
+  description?: string | null;
+  periodStart?: string | null;
+  periodEnd?: string | null;
+  notes?: string | null;
 }
-
-// Aggregated cost statistics
-export interface OwnershipCostStats {
-  insuranceCosts: number;
-  registrationCosts: number;
-  taxCosts: number;
-  otherCosts: number;
-  totalCosts: number;
-}
-
-// Display labels for cost types
-export const COST_TYPE_LABELS: Record<OwnershipCostType, string> = {
-  insurance: 'Insurance',
-  registration: 'Registration',
-  tax: 'Tax',
-  other: 'Other',
-};
-
-// Display labels for intervals
-export const INTERVAL_LABELS: Record<CostInterval, string> = {
-  monthly: 'Monthly',
-  semi_annual: 'Semi-Annual (6 months)',
-  annual: 'Annual',
-  one_time: 'One-Time',
-};