Initial Commit

frontend/src/features/vehicles/components/VehicleCard.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent, CardActionArea, Box, Typography, IconButton } from '
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { Vehicle } from '../types/vehicles.types';
+import { useUnits } from '../../../core/units/UnitsContext';
 
 interface VehicleCardProps {
   vehicle: Vehicle;
@@ -35,8 +36,9 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
   onDelete,
   onSelect,
 }) => {
+  const { formatDistance } = useUnits();
   const displayName = vehicle.nickname || 
-    `${vehicle.year} ${vehicle.make} ${vehicle.model}`;
+    [vehicle.year, vehicle.make, vehicle.model, vehicle.trimLevel].filter(Boolean).join(' ');
 
   return (
     <Card 
@@ -72,7 +74,7 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
           )}
           
           <Typography variant="body2" color="text.primary" sx={{ mt: 1, fontWeight: 500 }}>
-            Odometer: {vehicle.odometerReading.toLocaleString()} miles
+            Odometer: {formatDistance(vehicle.odometerReading)}
           </Typography>
         </CardContent>
       </CardActionArea>