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

@@ -9,7 +9,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { Vehicle } from '../types/vehicles.types';
 import { useUnits } from '../../../core/units/UnitsContext';
 import { VehicleImage } from './VehicleImage';
-import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
+import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
 
 interface VehicleCardProps {
   vehicle: Vehicle;
@@ -26,6 +26,7 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
 }) => {
   const { formatDistance } = useUnits();
   const displayName = getVehicleLabel(vehicle);
+  const subtitle = getVehicleSubtitle(vehicle);
 
   return (
     <Card 
@@ -46,13 +47,21 @@ export const VehicleCard: React.FC<VehicleCardProps> = ({
         <CardContent>
           <VehicleImage vehicle={vehicle} height={96} />
           
-          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
+          <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
             {displayName}
           </Typography>
-          
+
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+          {subtitle && (
-            VIN: {vehicle.vin}
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
-          </Typography>
+              {subtitle}
+            </Typography>
+          )}
+
+          {vehicle.vin && (
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+              VIN: {vehicle.vin}
+            </Typography>
+          )}
           
           {vehicle.licensePlate && (
             <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>

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

@@ -6,7 +6,7 @@ import React from 'react';
 import { Card, CardActionArea, Box, Typography } from '@mui/material';
 import { Vehicle } from '../types/vehicles.types';
 import { VehicleImage } from '../components/VehicleImage';
-import { getVehicleLabel } from '@/core/utils/vehicleDisplay';
+import { getVehicleLabel, getVehicleSubtitle } from '@/core/utils/vehicleDisplay';
 
 interface VehicleMobileCardProps {
   vehicle: Vehicle;
@@ -20,7 +20,7 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
   compact = false
 }) => {
   const displayName = getVehicleLabel(vehicle);
-  const displayModel = vehicle.model || 'Unknown Model';
+  const subtitle = getVehicleSubtitle(vehicle);
   
   return (
     <Card 
@@ -37,9 +37,11 @@ export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
           <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
             {displayName}
           </Typography>
-          <Typography variant="body2" color="text.secondary">
+          {subtitle && (
-            {displayModel}
+            <Typography variant="body2" color="text.secondary">
-          </Typography>
+              {subtitle}
+            </Typography>
+          )}
           {vehicle.licensePlate && (
             <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
               {vehicle.licensePlate}