frontend/src/features/dashboard/components/DashboardScreen.tsx

@@ -3,11 +3,15 @@
  */
 
 import React from 'react';
+import { Box } from '@mui/material';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import { SummaryCards, SummaryCardsSkeleton } from './SummaryCards';
 import { VehicleAttention, VehicleAttentionSkeleton } from './VehicleAttention';
 import { QuickActions, QuickActionsSkeleton } from './QuickActions';
 import { useDashboardSummary, useVehiclesNeedingAttention } from '../hooks/useDashboardData';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+import { Button } from '../../../shared-minimal/components/Button';
 
 import { MobileScreen } from '../../../core/store';
 import { Vehicle } from '../../vehicles/types/vehicles.types';
@@ -30,20 +34,22 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       <div className="space-y-4">
         <GlassCard>
           <div className="text-center py-12">
-            <div className="text-4xl mb-3">⚠️</div>
-            <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
+            <Box sx={{ color: 'warning.main', mb: 1.5 }}>
+              <WarningAmberRoundedIcon sx={{ fontSize: 48 }} />
+            </Box>
+            <h2 className="text-lg font-semibold text-slate-800 dark:text-avus mb-2">
               Unable to Load Dashboard
             </h2>
-            <p className="text-slate-500 dark:text-slate-400 mb-4">
+            <p className="text-slate-500 dark:text-titanio mb-4">
               There was an error loading your dashboard data
             </p>
-            <button
+            <Button
+              variant="primary"
+              size="md"
               onClick={() => window.location.reload()}
-              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-              style={{ minHeight: '44px' }} // Touch target size
             >
               Retry
-            </button>
+            </Button>
           </div>
         </GlassCard>
       </div>
@@ -67,20 +73,22 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
       <div className="space-y-6">
         <GlassCard>
           <div className="text-center py-12">
-            <div className="text-6xl mb-4">🚗</div>
-            <h2 className="text-xl font-semibold text-slate-800 dark:text-slate-200 mb-3">
+            <Box sx={{ color: 'primary.main', mb: 2 }}>
+              <DirectionsCarRoundedIcon sx={{ fontSize: 64 }} />
+            </Box>
+            <h2 className="text-xl font-semibold text-slate-800 dark:text-avus mb-3">
               Welcome to MotoVaultPro
             </h2>
-            <p className="text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto">
+            <p className="text-slate-500 dark:text-titanio mb-6 max-w-md mx-auto">
               Get started by adding your first vehicle to track fuel logs, maintenance, and more
             </p>
-            <button
+            <Button
+              variant="primary"
+              size="lg"
               onClick={() => onNavigate?.('Vehicles')}
-              className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
-              style={{ minHeight: '44px' }} // Touch target size
             >
               Add Your First Vehicle
-            </button>
+            </Button>
           </div>
         </GlassCard>
       </div>
@@ -116,7 +124,7 @@ export const DashboardScreen: React.FC<DashboardScreenProps> = ({
 
       {/* Footer Hint */}
       <div className="text-center py-4">
-        <p className="text-xs text-slate-400 dark:text-slate-500">
+        <p className="text-xs text-slate-400 dark:text-canna">
           Dashboard updates every 2 minutes
         </p>
       </div>

frontend/src/features/dashboard/components/QuickActions.tsx

@@ -3,15 +3,18 @@
  */
 
 import React from 'react';
+import { Box, SvgIconProps } from '@mui/material';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
+import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
+import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 
 interface QuickAction {
   id: string;
   title: string;
   description: string;
-  icon: string;
-  color: string;
-  bgColor: string;
+  icon: React.ComponentType<SvgIconProps>;
   onClick: () => void;
 }
 
@@ -33,36 +36,28 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
       id: 'add-vehicle',
       title: 'Add Vehicle',
       description: 'Register a new vehicle',
-      icon: '🚗',
-      color: 'text-blue-600',
-      bgColor: 'bg-blue-50',
+      icon: DirectionsCarRoundedIcon,
       onClick: onAddVehicle,
     },
     {
       id: 'log-fuel',
       title: 'Log Fuel',
       description: 'Record a fuel purchase',
-      icon: '⛽',
-      color: 'text-green-600',
-      bgColor: 'bg-green-50',
+      icon: LocalGasStationRoundedIcon,
       onClick: onLogFuel,
     },
     {
       id: 'view-maintenance',
       title: 'Maintenance',
       description: 'View maintenance records',
-      icon: '🔧',
-      color: 'text-orange-600',
-      bgColor: 'bg-orange-50',
+      icon: BuildRoundedIcon,
       onClick: onViewMaintenance,
     },
     {
       id: 'view-vehicles',
       title: 'My Vehicles',
       description: 'View all vehicles',
-      icon: '📋',
-      color: 'text-purple-600',
-      bgColor: 'bg-purple-50',
+      icon: FormatListBulletedRoundedIcon,
       onClick: onViewVehicles,
     },
   ];
@@ -70,33 +65,79 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
   return (
     <GlassCard padding="md">
       <div className="mb-4">
-        <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
+        <h3 className="text-lg font-semibold text-slate-800 dark:text-avus">
           Quick Actions
         </h3>
-        <p className="text-sm text-slate-500 dark:text-slate-400">
+        <p className="text-sm text-slate-500 dark:text-titanio">
           Common tasks and navigation
         </p>
       </div>
 
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-        {actions.map((action) => (
-          <button
-            key={action.id}
-            onClick={action.onClick}
-            className={`p-4 rounded-2xl ${action.bgColor} dark:bg-opacity-10 border border-transparent hover:border-slate-200 dark:hover:border-slate-700 hover:shadow-md transition-all duration-200 text-left min-h-[100px] sm:min-h-[120px] flex flex-col`}
-            style={{ minHeight: '44px' }} // Ensure touch target size
-          >
-            <div className="text-3xl mb-2">{action.icon}</div>
-            <div className="flex-1">
-              <h4 className={`font-semibold ${action.color} dark:opacity-90 text-sm mb-1`}>
-                {action.title}
-              </h4>
-              <p className="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">
-                {action.description}
-              </p>
-            </div>
-          </button>
-        ))}
+        {actions.map((action) => {
+          const IconComponent = action.icon;
+          return (
+            <Box
+              key={action.id}
+              component="button"
+              onClick={action.onClick}
+              sx={{
+                p: 2,
+                borderRadius: 3,
+                bgcolor: 'action.hover',
+                border: '1px solid transparent',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                textAlign: 'left',
+                minHeight: { xs: 100, sm: 120 },
+                transition: 'all 0.2s',
+                cursor: 'pointer',
+                '&:hover': {
+                  bgcolor: 'action.selected',
+                  borderColor: 'divider',
+                },
+                '&:focus': {
+                  outline: 'none',
+                  borderColor: 'primary.main',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  color: 'primary.main',
+                  mb: 1.5,
+                }}
+              >
+                <IconComponent sx={{ fontSize: 28 }} />
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <Box
+                  component="span"
+                  sx={{
+                    display: 'block',
+                    fontWeight: 600,
+                    fontSize: '0.875rem',
+                    color: 'text.primary',
+                    mb: 0.5,
+                  }}
+                >
+                  {action.title}
+                </Box>
+                <Box
+                  component="span"
+                  sx={{
+                    display: { xs: 'none', sm: 'block' },
+                    fontSize: '0.75rem',
+                    color: 'text.secondary',
+                  }}
+                >
+                  {action.description}
+                </Box>
+              </Box>
+            </Box>
+          );
+        })}
       </div>
     </GlassCard>
   );
@@ -113,9 +154,9 @@ export const QuickActionsSkeleton: React.FC = () => {
         {[1, 2, 3, 4].map((i) => (
           <div
             key={i}
-            className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
+            className="p-4 rounded-xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
           >
-            <div className="w-8 h-8 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-2" />
+            <div className="w-7 h-7 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-3" />
             <div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-20 mb-2" />
             <div className="h-3 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-full hidden sm:block" />
           </div>

frontend/src/features/dashboard/components/SummaryCards.tsx

@@ -3,6 +3,10 @@
  */
 
 import React from 'react';
+import { Box } from '@mui/material';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
+import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
+import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 import { DashboardSummary } from '../types';
 
@@ -15,52 +19,71 @@ export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
     {
       title: 'Total Vehicles',
       value: summary.totalVehicles,
-      icon: '🚗',
-      color: 'text-blue-600',
-      bgColor: 'bg-blue-50',
+      icon: DirectionsCarRoundedIcon,
+      color: 'primary.main',
     },
     {
       title: 'Upcoming Maintenance',
       value: summary.upcomingMaintenanceCount,
       subtitle: 'Next 30 days',
-      icon: '🔧',
-      color: 'text-orange-600',
-      bgColor: 'bg-orange-50',
+      icon: BuildRoundedIcon,
+      color: 'warning.main',
     },
     {
       title: 'Recent Fuel Logs',
       value: summary.recentFuelLogsCount,
       subtitle: 'Last 7 days',
-      icon: '⛽',
-      color: 'text-green-600',
-      bgColor: 'bg-green-50',
+      icon: LocalGasStationRoundedIcon,
+      color: 'success.main',
     },
   ];
 
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-      {cards.map((card) => (
-        <GlassCard key={card.title} padding="md">
-          <div className="flex items-start gap-3">
-            <div className={`flex-shrink-0 w-12 h-12 rounded-2xl ${card.bgColor} flex items-center justify-center text-2xl`}>
-              {card.icon}
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm text-slate-500 dark:text-slate-400 font-medium mb-1">
-                {card.title}
-              </p>
-              <p className={`text-3xl font-bold ${card.color} dark:opacity-90`}>
-                {card.value}
-              </p>
-              {card.subtitle && (
-                <p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
-                  {card.subtitle}
+      {cards.map((card) => {
+        const IconComponent = card.icon;
+        return (
+          <GlassCard key={card.title} padding="md">
+            <div className="flex items-start gap-3">
+              <Box
+                sx={{
+                  flexShrink: 0,
+                  width: 48,
+                  height: 48,
+                  borderRadius: 3,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  bgcolor: 'action.hover',
+                }}
+              >
+                <IconComponent sx={{ fontSize: 24, color: card.color }} />
+              </Box>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm text-slate-500 dark:text-titanio font-medium mb-1">
+                  {card.title}
                 </p>
-              )}
+                <Box
+                  component="p"
+                  sx={{
+                    fontSize: '1.875rem',
+                    fontWeight: 700,
+                    color: 'text.primary',
+                    lineHeight: 1.2,
+                  }}
+                >
+                  {card.value}
+                </Box>
+                {card.subtitle && (
+                  <p className="text-xs text-slate-400 dark:text-canna mt-1">
+                    {card.subtitle}
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
-        </GlassCard>
-      ))}
+          </GlassCard>
+        );
+      })}
     </div>
   );
 };
@@ -71,7 +94,7 @@ export const SummaryCardsSkeleton: React.FC = () => {
       {[1, 2, 3].map((i) => (
         <GlassCard key={i} padding="md">
           <div className="flex items-start gap-3">
-            <div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
+            <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
             <div className="flex-1 min-w-0 space-y-2">
               <div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-24" />
               <div className="h-8 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-16" />

frontend/src/features/dashboard/components/VehicleAttention.tsx

@@ -3,6 +3,11 @@
  */
 
 import React from 'react';
+import { Box, SvgIconProps } from '@mui/material';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import ScheduleRoundedIcon from '@mui/icons-material/ScheduleRounded';
 import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
 import { VehicleNeedingAttention } from '../types';
 
@@ -16,11 +21,13 @@ export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, on
     return (
       <GlassCard padding="md">
         <div className="text-center py-8">
-          <div className="text-4xl mb-3">✅</div>
-          <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
+          <Box sx={{ color: 'success.main', mb: 1.5 }}>
+            <CheckCircleRoundedIcon sx={{ fontSize: 48 }} />
+          </Box>
+          <h3 className="text-lg font-semibold text-slate-800 dark:text-avus mb-2">
             All Caught Up!
           </h3>
-          <p className="text-sm text-slate-500 dark:text-slate-400">
+          <p className="text-sm text-slate-500 dark:text-titanio">
             No vehicles need immediate attention
           </p>
         </div>
@@ -28,34 +35,28 @@ export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, on
     );
   }
 
-  const priorityConfig = {
+  const priorityConfig: Record<string, { color: string; icon: React.ComponentType<SvgIconProps> }> = {
     high: {
-      color: 'text-red-600',
-      bgColor: 'bg-red-50',
-      borderColor: 'border-red-200',
-      icon: '🚨',
+      color: 'error.main',
+      icon: ErrorRoundedIcon,
     },
     medium: {
-      color: 'text-orange-600',
-      bgColor: 'bg-orange-50',
-      borderColor: 'border-orange-200',
-      icon: '⚠️',
+      color: 'warning.main',
+      icon: WarningAmberRoundedIcon,
     },
     low: {
-      color: 'text-yellow-600',
-      bgColor: 'bg-yellow-50',
-      borderColor: 'border-yellow-200',
-      icon: '⏰',
+      color: 'info.main',
+      icon: ScheduleRoundedIcon,
     },
   };
 
   return (
     <GlassCard padding="md">
       <div className="mb-4">
-        <h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
+        <h3 className="text-lg font-semibold text-slate-800 dark:text-avus">
           Needs Attention
         </h3>
-        <p className="text-sm text-slate-500 dark:text-slate-400">
+        <p className="text-sm text-slate-500 dark:text-titanio">
           Vehicles with overdue maintenance
         </p>
       </div>
@@ -63,41 +64,70 @@ export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, on
       <div className="space-y-3">
         {vehicles.map((vehicle) => {
           const config = priorityConfig[vehicle.priority];
+          const IconComponent = config.icon;
           return (
-            <div
+            <Box
               key={vehicle.id}
-              className={`p-4 rounded-2xl border ${config.borderColor} ${config.bgColor} dark:bg-opacity-10 ${
-                onVehicleClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''
-              }`}
               onClick={() => onVehicleClick?.(vehicle.id)}
               role={onVehicleClick ? 'button' : undefined}
               tabIndex={onVehicleClick ? 0 : undefined}
-              onKeyDown={(e) => {
+              onKeyDown={(e: React.KeyboardEvent) => {
                 if (onVehicleClick && (e.key === 'Enter' || e.key === ' ')) {
                   e.preventDefault();
                   onVehicleClick(vehicle.id);
                 }
               }}
+              sx={{
+                p: 2,
+                borderRadius: 3,
+                bgcolor: 'action.hover',
+                border: '1px solid',
+                borderColor: 'divider',
+                cursor: onVehicleClick ? 'pointer' : 'default',
+                transition: 'all 0.2s',
+                '&:hover': onVehicleClick ? {
+                  bgcolor: 'action.selected',
+                } : {},
+              }}
             >
               <div className="flex items-start gap-3">
-                <div className="flex-shrink-0 text-2xl">
-                  {config.icon}
-                </div>
+                <Box sx={{ flexShrink: 0, color: config.color }}>
+                  <IconComponent sx={{ fontSize: 24 }} />
+                </Box>
                 <div className="flex-1 min-w-0">
-                  <h4 className={`font-semibold ${config.color} dark:opacity-90 text-base mb-1`}>
+                  <Box
+                    component="h4"
+                    sx={{
+                      fontWeight: 600,
+                      color: 'text.primary',
+                      fontSize: '1rem',
+                      mb: 0.5,
+                    }}
+                  >
                     {vehicle.nickname || `${vehicle.year} ${vehicle.make} ${vehicle.model}`}
-                  </h4>
-                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                  </Box>
+                  <p className="text-sm text-slate-600 dark:text-titanio">
                     {vehicle.reason}
                   </p>
-                  <div className="flex items-center gap-2 mt-2">
-                    <span className={`text-xs font-medium px-2 py-1 rounded-full ${config.bgColor} ${config.color} dark:bg-opacity-20`}>
-                      {vehicle.priority.toUpperCase()} PRIORITY
-                    </span>
-                  </div>
+                  <Box
+                    component="span"
+                    sx={{
+                      display: 'inline-block',
+                      mt: 1,
+                      px: 1.5,
+                      py: 0.5,
+                      borderRadius: 2,
+                      fontSize: '0.75rem',
+                      fontWeight: 500,
+                      bgcolor: 'action.selected',
+                      color: config.color,
+                    }}
+                  >
+                    {vehicle.priority.toUpperCase()} PRIORITY
+                  </Box>
                 </div>
               </div>
-            </div>
+            </Box>
           );
         })}
       </div>
@@ -114,7 +144,7 @@ export const VehicleAttentionSkeleton: React.FC = () => {
       </div>
       <div className="space-y-3">
         {[1, 2].map((i) => (
-          <div key={i} className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800">
+          <div key={i} className="p-4 rounded-xl bg-slate-50 dark:bg-slate-800">
             <div className="flex items-start gap-3">
               <div className="flex-shrink-0 w-6 h-6 bg-slate-100 dark:bg-slate-700 rounded animate-pulse" />
               <div className="flex-1 space-y-2">