MVP with new UX

2025-08-09 17:45:54 -05:00
parent 8f5117a4e2
commit d60c3ec00e
18 changed files with 1572 additions and 573 deletions
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,50 +1,238 @@
 /**
- * @ai-summary Main app component with routing
+ * @ai-summary Main app component with routing and mobile navigation
 */

+import { useState, useEffect } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
+import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import { md3Theme } from './shared-minimal/theme/md3Theme';
 import { Layout } from './components/Layout';
 import { VehiclesPage } from './features/vehicles/pages/VehiclesPage';
+import { VehiclesMobileScreen } from './features/vehicles/mobile/VehiclesMobileScreen';
+import { VehicleDetailMobile } from './features/vehicles/mobile/VehicleDetailMobile';
+import { BottomNavigation, NavigationItem } from './shared-minimal/components/mobile/BottomNavigation';
+import { GlassCard } from './shared-minimal/components/mobile/GlassCard';
 import { Button } from './shared-minimal/components/Button';
+import { Vehicle } from './features/vehicles/types/vehicles.types';
+

 function App() {
  const { isLoading, isAuthenticated, loginWithRedirect } = useAuth0();
+  
+  // Mobile navigation state - detect mobile screen size with responsive updates
+  const [mobileMode, setMobileMode] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth <= 768;
+    }
+    return false;
+  });
+  const [activeScreen, setActiveScreen] = useState("Vehicles");
+  const [selectedVehicle, setSelectedVehicle] = useState<Vehicle | null>(null);
+
+  // Update mobile mode on window resize
+  useEffect(() => {
+    const checkMobileMode = () => {
+      const isMobile = window.innerWidth <= 768 || 
+                      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      console.log('Window width:', window.innerWidth, 'User agent mobile:', /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), 'Mobile mode:', isMobile);
+      setMobileMode(isMobile);
+    };
+
+    // Check on mount
+    checkMobileMode();
+    
+    window.addEventListener('resize', checkMobileMode);
+    return () => window.removeEventListener('resize', checkMobileMode);
+  }, []);
+
+  // Mobile navigation items
+  const mobileNavItems: NavigationItem[] = [
+    { key: "Dashboard", label: "Dashboard", icon: <HomeRoundedIcon /> },
+    { key: "Vehicles", label: "Vehicles", icon: <DirectionsCarRoundedIcon /> },
+    { key: "Log Fuel", label: "Log Fuel", icon: <LocalGasStationRoundedIcon /> },
+    { key: "Settings", label: "Settings", icon: <SettingsRoundedIcon /> },
+  ];
+
+  console.log('MotoVaultPro status:', { isLoading, isAuthenticated, mobileMode, userAgent: navigator.userAgent });
+
+  // Debug component for testing
+  const DebugInfo = () => (
+    <div className="fixed bottom-0 right-0 bg-black/80 text-white p-2 text-xs z-50 rounded-tl-lg">
+      Mode: {mobileMode ? 'Mobile' : 'Desktop'} | Auth: {isAuthenticated ? 'Yes' : 'No'} | Screen: {typeof window !== 'undefined' ? window.innerWidth : 'N/A'}px
+    </div>
+  );
+
+  // Placeholder screens for mobile
+  const DashboardScreen = () => (
+    <div className="space-y-4">
+      <GlassCard>
+        <div className="text-center py-12">
+          <h2 className="text-lg font-semibold text-slate-800 mb-2">Dashboard</h2>
+          <p className="text-slate-500">Coming soon - Vehicle insights and analytics</p>
+        </div>
+      </GlassCard>
+    </div>
+  );
+
+  const LogFuelScreen = () => (
+    <div className="space-y-4">
+      <GlassCard>
+        <div className="text-center py-12">
+          <h2 className="text-lg font-semibold text-slate-800 mb-2">Log Fuel</h2>
+          <p className="text-slate-500">Coming soon - Fuel logging functionality</p>
+        </div>
+      </GlassCard>
+    </div>
+  );
+
+  const SettingsScreen = () => (
+    <div className="space-y-4">
+      <GlassCard>
+        <div className="text-center py-12">
+          <h2 className="text-lg font-semibold text-slate-800 mb-2">Settings</h2>
+          <p className="text-slate-500">Coming soon - App settings and preferences</p>
+        </div>
+      </GlassCard>
+    </div>
+  );

  if (isLoading) {
+    if (mobileMode) {
+      return (
+        <ThemeProvider theme={md3Theme}>
+          <CssBaseline />
+          <Layout mobileMode={true}>
+            <div className="flex items-center justify-center h-64">
+              <div className="text-slate-500">Loading...</div>
+            </div>
+          </Layout>
+        </ThemeProvider>
+      );
+    }
    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="text-lg">Loading...</div>
-      </div>
+      <ThemeProvider theme={md3Theme}>
+        <CssBaseline />
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-lg">Loading...</div>
+        </div>
+      </ThemeProvider>
    );
  }

  if (!isAuthenticated) {
+    if (mobileMode) {
+      return (
+        <ThemeProvider theme={md3Theme}>
+          <CssBaseline />
+          <Layout mobileMode={true}>
+            <div className="space-y-6 flex flex-col items-center justify-center min-h-[400px]">
+              <div className="text-center">
+                <h1 className="text-2xl font-bold text-slate-800 mb-3">Welcome to MotoVaultPro</h1>
+                <p className="text-slate-600 mb-6 text-sm">Your personal vehicle management platform</p>
+                <button
+                  onClick={() => loginWithRedirect()}
+                  className="h-12 px-8 rounded-2xl text-white font-medium shadow-lg active:scale-[0.99] transition bg-gradient-moto"
+                >
+                  Login to Continue
+                </button>
+              </div>
+            </div>
+            <DebugInfo />
+          </Layout>
+        </ThemeProvider>
+      );
+    }
    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-50">
-        <div className="text-center">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">MotoVaultPro</h1>
-          <p className="text-gray-600 mb-8">Your personal vehicle management platform</p>
-          <Button onClick={() => loginWithRedirect()}>
-            Login to Continue
-          </Button>
+      <ThemeProvider theme={md3Theme}>
+        <CssBaseline />
+        <div className="flex items-center justify-center min-h-screen bg-gray-50">
+          <div className="text-center max-w-md mx-auto px-6">
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">MotoVaultPro</h1>
+            <p className="text-gray-600 mb-8">Your personal vehicle management platform</p>
+            <Button onClick={() => loginWithRedirect()}>
+              Login to Continue
+            </Button>
+          </div>
+          <DebugInfo />
        </div>
-      </div>
+      </ThemeProvider>
    );
  }

+  // Mobile app rendering
+  if (mobileMode) {
+    return (
+      <ThemeProvider theme={md3Theme}>
+        <CssBaseline />
+        <Layout mobileMode={true}>
+          <AnimatePresence mode="wait">
+            {activeScreen === "Dashboard" && (
+              <motion.div key="dashboard" initial={{opacity:0, y:8}} animate={{opacity:1, y:0}} exit={{opacity:0, y:-8}}>
+                <DashboardScreen />
+              </motion.div>
+            )}
+            {activeScreen === "Vehicles" && (
+              <motion.div key="vehicles" initial={{opacity:0, y:8}} animate={{opacity:1, y:0}} exit={{opacity:0, y:-8}} className="space-y-6">
+                {selectedVehicle ? (
+                  <VehicleDetailMobile 
+                    vehicle={selectedVehicle} 
+                    onBack={() => setSelectedVehicle(null)} 
+                    onLogFuel={() => setActiveScreen("Log Fuel")} 
+                  />
+                ) : (
+                  <VehiclesMobileScreen 
+                    onVehicleSelect={(vehicle) => setSelectedVehicle(vehicle)}
+                  />
+                )}
+              </motion.div>
+            )}
+            {activeScreen === "Log Fuel" && (
+              <motion.div key="logfuel" initial={{opacity:0, y:8}} animate={{opacity:1, y:0}} exit={{opacity:0, y:-8}}>
+                <LogFuelScreen />
+              </motion.div>
+            )}
+            {activeScreen === "Settings" && (
+              <motion.div key="settings" initial={{opacity:0, y:8}} animate={{opacity:1, y:0}} exit={{opacity:0, y:-8}}>
+                <SettingsScreen />
+              </motion.div>
+            )}
+          </AnimatePresence>
+          <DebugInfo />
+        </Layout>
+        
+        <BottomNavigation 
+          items={mobileNavItems}
+          activeItem={activeScreen}
+          onItemSelect={setActiveScreen}
+        />
+      </ThemeProvider>
+    );
+  }
+
+  // Desktop app rendering (fallback)
  return (
-    <Layout>
-      <Routes>
-        <Route path="/" element={<Navigate to="/vehicles" replace />} />
-        <Route path="/vehicles" element={<VehiclesPage />} />
-        <Route path="/vehicles/:id" element={<div>Vehicle Details (TODO)</div>} />
-        <Route path="/fuel-logs" element={<div>Fuel Logs (TODO)</div>} />
-        <Route path="/maintenance" element={<div>Maintenance (TODO)</div>} />
-        <Route path="/stations" element={<div>Stations (TODO)</div>} />
-        <Route path="*" element={<Navigate to="/vehicles" replace />} />
-      </Routes>
-    </Layout>
+    <ThemeProvider theme={md3Theme}>
+      <CssBaseline />
+      <Layout mobileMode={false}>
+        <Routes>
+          <Route path="/" element={<Navigate to="/vehicles" replace />} />
+          <Route path="/vehicles" element={<VehiclesPage />} />
+          <Route path="/vehicles/:id" element={<div>Vehicle Details (TODO)</div>} />
+          <Route path="/fuel-logs" element={<div>Fuel Logs (TODO)</div>} />
+          <Route path="/maintenance" element={<div>Maintenance (TODO)</div>} />
+          <Route path="/stations" element={<div>Stations (TODO)</div>} />
+          <Route path="*" element={<Navigate to="/vehicles" replace />} />
+        </Routes>
+        <DebugInfo />
+      </Layout>
+    </ThemeProvider>
  );
 }

--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,130 +1,244 @@
 /**
- * @ai-summary Main layout component with navigation
+ * @ai-summary Main layout component with navigation (desktop/mobile adaptive)
 */

 import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { Link, useLocation } from 'react-router-dom';
+import { Container, Paper, Typography, Box, IconButton, Avatar } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
+import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
+import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
+import PlaceRoundedIcon from '@mui/icons-material/PlaceRounded';
+import MenuIcon from '@mui/icons-material/Menu';
+import CloseIcon from '@mui/icons-material/Close';
 import { useAppStore } from '../core/store';
 import { Button } from '../shared-minimal/components/Button';
-import { clsx } from 'clsx';

 interface LayoutProps {
  children: React.ReactNode;
+  mobileMode?: boolean;
 }

-export const Layout: React.FC<LayoutProps> = ({ children }) => {
+export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false }) => {
  const { user, logout } = useAuth0();
  const { sidebarOpen, toggleSidebar } = useAppStore();
  const location = useLocation();
+  const theme = useTheme();

  const navigation = [
-    { name: 'Vehicles', href: '/vehicles', icon: '🚗' },
-    { name: 'Fuel Logs', href: '/fuel-logs', icon: '⛽' },
-    { name: 'Maintenance', href: '/maintenance', icon: '🔧' },
-    { name: 'Gas Stations', href: '/stations', icon: '🏪' },
+    { name: 'Vehicles', href: '/vehicles', icon: <DirectionsCarRoundedIcon sx={{ fontSize: 20 }} /> },
+    { name: 'Fuel Logs', href: '/fuel-logs', icon: <LocalGasStationRoundedIcon sx={{ fontSize: 20 }} /> },
+    { name: 'Maintenance', href: '/maintenance', icon: <BuildRoundedIcon sx={{ fontSize: 20 }} /> },
+    { name: 'Gas Stations', href: '/stations', icon: <PlaceRoundedIcon sx={{ fontSize: 20 }} /> },
  ];

-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Sidebar */}
-      <div className={clsx(
-        'fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-200 ease-in-out',
-        sidebarOpen ? 'translate-x-0' : '-translate-x-full'
-      )}>
-        <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
-          <h1 className="text-xl font-bold text-gray-900">MotoVaultPro</h1>
-          <button
-            onClick={toggleSidebar}
-            className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
-          >
-            <span className="sr-only">Close sidebar</span>
-            ✕
-          </button>
-        </div>
+  // Mobile layout
+  if (mobileMode) {
+    return (
+      <div className="w-full min-h-screen bg-background-default">
+        <Container
+          maxWidth={false}
+          sx={{ 
+            bgcolor: 'background.paper', 
+            borderRadius: 0, 
+            p: 0, 
+            boxShadow: 0,
+            minHeight: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            maxWidth: '100% !important'
+          }}
+        >
+          {/* App header */}
+          <div className="px-5 pt-5 pb-3">
+            <div className="flex items-center justify-between">
+              <div className="text-lg font-semibold tracking-tight">MotoVaultPro</div>
+              <div className="text-xs text-slate-500">v0.1</div>
+            </div>
+          </div>
+          {/* Content area */}
+          <div className="flex-1 px-5 pb-20 space-y-5 overflow-y-auto">
+            <div className="min-h-[560px]">
+              {children}
+            </div>
+          </div>
+        </Container>
+      </div>
+    );
+  }

-        <nav className="mt-6">
-          <div className="px-3">
-            {navigation.map((item) => (
+  // Desktop layout
+  return (
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default' }}>
+      {/* Sidebar */}
+      <Paper
+        elevation={2}
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          height: '100vh',
+          width: 256,
+          zIndex: 1000,
+          transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)',
+          transition: 'transform 0.2s ease-in-out',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        <Box sx={{ 
+          display: 'flex', 
+          alignItems: 'center', 
+          justifyContent: 'space-between', 
+          height: 64, 
+          px: 3, 
+          borderBottom: 1, 
+          borderColor: 'divider' 
+        }}>
+          <Typography variant="h6" sx={{ fontWeight: 700, color: 'primary.main' }}>
+            MotoVaultPro
+          </Typography>
+          <IconButton
+            onClick={toggleSidebar}
+            size="small"
+            sx={{ color: 'text.secondary' }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+
+        <Box sx={{ mt: 3, px: 2, flex: 1 }}>
+          {navigation.map((item) => {
+            const isActive = location.pathname.startsWith(item.href);
+            return (
              <Link
                key={item.name}
                to={item.href}
-                className={clsx(
-                  'group flex items-center px-3 py-2 text-sm font-medium rounded-md mb-1 transition-colors',
-                  location.pathname.startsWith(item.href)
-                    ? 'bg-primary-50 text-primary-700'
-                    : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
-                )}
+                style={{ textDecoration: 'none' }}
              >
-                <span className="mr-3 text-lg">{item.icon}</span>
-                {item.name}
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    px: 2,
+                    py: 1.5,
+                    mb: 0.5,
+                    borderRadius: 2,
+                    transition: 'all 0.2s',
+                    backgroundColor: isActive 
+                      ? theme.palette.primary.main + '12' 
+                      : 'transparent',
+                    color: isActive 
+                      ? 'primary.main' 
+                      : 'text.primary',
+                    '&:hover': {
+                      backgroundColor: isActive 
+                        ? theme.palette.primary.main + '18'
+                        : 'action.hover',
+                    }
+                  }}
+                >
+                  <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
+                    {item.icon}
+                  </Box>
+                  <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                    {item.name}
+                  </Typography>
+                </Box>
              </Link>
-            ))}
-          </div>
-        </nav>
+            );
+          })}
+        </Box>

-        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
-          <div className="flex items-center">
-            <div className="flex-shrink-0">
-              <div className="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
-                <span className="text-primary-600 font-medium text-sm">
-                  {user?.name?.charAt(0) || user?.email?.charAt(0)}
-                </span>
-              </div>
-            </div>
-            <div className="ml-3 flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-900 truncate">
+        <Box sx={{ p: 2, borderTop: 1, borderColor: 'divider', mt: 'auto' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+            <Avatar
+              sx={{ 
+                width: 32, 
+                height: 32, 
+                bgcolor: 'primary.main',
+                fontSize: '0.875rem',
+                fontWeight: 600
+              }}
+            >
+              {user?.name?.charAt(0) || user?.email?.charAt(0)}
+            </Avatar>
+            <Box sx={{ ml: 1.5, flex: 1, minWidth: 0 }}>
+              <Typography variant="body2" sx={{ fontWeight: 500 }} noWrap>
                {user?.name || user?.email}
-              </p>
-            </div>
-          </div>
+              </Typography>
+            </Box>
+          </Box>
          <Button
            variant="secondary"
            size="sm"
-            className="w-full mt-3"
+            className="w-full"
            onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}
          >
            Sign Out
          </Button>
-        </div>
-      </div>
+        </Box>
+      </Paper>

      {/* Main content */}
-      <div className={clsx(
-        'transition-all duration-200 ease-in-out',
-        sidebarOpen ? 'ml-64' : 'ml-0'
-      )}>
+      <Box
+        sx={{
+          ml: sidebarOpen ? '256px' : '0',
+          transition: 'margin-left 0.2s ease-in-out',
+        }}
+      >
        {/* Top bar */}
-        <header className="bg-white shadow-sm border-b border-gray-200">
-          <div className="flex items-center justify-between h-16 px-6">
-            <button
+        <Paper 
+          elevation={1} 
+          sx={{ 
+            borderRadius: 0,
+            borderBottom: 1,
+            borderColor: 'divider'
+          }}
+        >
+          <Box sx={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            justifyContent: 'space-between', 
+            height: 64, 
+            px: 3 
+          }}>
+            <IconButton
              onClick={toggleSidebar}
-              className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
+              sx={{ color: 'text.secondary' }}
            >
-              <span className="sr-only">Open sidebar</span>
-              ☰
-            </button>
-            <div className="text-sm text-gray-500">
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="body2" color="text.secondary">
              Welcome back, {user?.name || user?.email}
-            </div>
-          </div>
-        </header>
+            </Typography>
+          </Box>
+        </Paper>

        {/* Page content */}
-        <main className="p-6">
-          <div className="max-w-7xl mx-auto">
+        <Box component="main" sx={{ p: 3 }}>
+          <Container maxWidth="xl">
            {children}
-          </div>
-        </main>
-      </div>
+          </Container>
+        </Box>
+      </Box>

      {/* Backdrop */}
      {sidebarOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-gray-600 bg-opacity-75 lg:hidden"
+        <Box
+          sx={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 999,
+            bgcolor: 'rgba(0,0,0,0.5)',
+            display: { lg: 'none' }
+          }}
          onClick={toggleSidebar}
        />
      )}
-    </div>
+    </Box>
  );
 };
--- a/frontend/src/features/vehicles/components/VehicleCard.tsx
+++ b/frontend/src/features/vehicles/components/VehicleCard.tsx
@@ -1,11 +1,12 @@
 /**
- * @ai-summary Vehicle card component
+ * @ai-summary Vehicle card component with Material Design 3
 */

 import React from 'react';
+import { Card, CardContent, CardActionArea, Box, Typography, IconButton } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { Vehicle } from '../types/vehicles.types';
-import { Card } from '../../../shared-minimal/components/Card';
-import { Button } from '../../../shared-minimal/components/Button';

 interface VehicleCardProps {
  vehicle: Vehicle;
@@ -14,51 +15,96 @@ interface VehicleCardProps {
  onSelect: (id: string) => void;
 }

+const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
+  <Box 
+    sx={{ 
+      height: 96, 
+      bgcolor: color, 
+      borderRadius: 2, 
+      mb: 2,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  />
+);
+
 export const VehicleCard: React.FC<VehicleCardProps> = ({
  vehicle,
  onEdit,
  onDelete,
  onSelect,
 }) => {
+  const displayName = vehicle.nickname || 
+    `${vehicle.year} ${vehicle.make} ${vehicle.model}`;
+
  return (
-    <Card className="hover:shadow-md transition-shadow cursor-pointer" onClick={() => onSelect(vehicle.id)}>
-      <div className="flex justify-between items-start">
-        <div className="flex-1">
-          <h3 className="text-lg font-semibold text-gray-900">
-            {vehicle.nickname || `${vehicle.year} ${vehicle.make} ${vehicle.model}`}
-          </h3>
-          <p className="text-sm text-gray-500 mt-1">VIN: {vehicle.vin}</p>
+    <Card 
+      sx={{ 
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        '&:hover': {
+          boxShadow: 3,
+        },
+        transition: 'box-shadow 0.2s ease-in-out'
+      }}
+    >
+      <CardActionArea 
+        onClick={() => onSelect(vehicle.id)}
+        sx={{ flexGrow: 1 }}
+      >
+        <CardContent>
+          <CarThumb color={vehicle.color || "#F2EAEA"} />
+          
+          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
+            {displayName}
+          </Typography>
+          
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+            VIN: {vehicle.vin}
+          </Typography>
+          
          {vehicle.licensePlate && (
-            <p className="text-sm text-gray-500">License: {vehicle.licensePlate}</p>
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+              License: {vehicle.licensePlate}
+            </Typography>
          )}
-          <p className="text-sm text-gray-600 mt-2">
+          
+          <Typography variant="body2" color="text.primary" sx={{ mt: 1, fontWeight: 500 }}>
            Odometer: {vehicle.odometerReading.toLocaleString()} miles
-          </p>
-        </div>
-        
-        <div className="flex gap-2">
-          <Button
-            size="sm"
-            variant="secondary"
-            onClick={(e) => {
-              e.stopPropagation();
-              onEdit(vehicle);
-            }}
-          >
-            Edit
-          </Button>
-          <Button
-            size="sm"
-            variant="danger"
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete(vehicle.id);
-            }}
-          >
-            Delete
-          </Button>
-        </div>
-      </div>
+          </Typography>
+        </CardContent>
+      </CardActionArea>
+      
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'flex-end', 
+        gap: 1, 
+        p: 2, 
+        pt: 0 
+      }}>
+        <IconButton
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onEdit(vehicle);
+          }}
+          sx={{ color: 'text.secondary' }}
+        >
+          <EditIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(vehicle.id);
+          }}
+          sx={{ color: 'error.main' }}
+        >
+          <DeleteIcon fontSize="small" />
+        </IconButton>
+      </Box>
    </Card>
  );
 };
--- a/frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx
+++ b/frontend/src/features/vehicles/mobile/VehicleDetailMobile.tsx
@@ -0,0 +1,138 @@
+/**
+ * @ai-summary Mobile vehicle detail screen with Material Design 3
+ */
+
+import React from 'react';
+import { Box, Typography, Button, Card, CardContent, Divider } from '@mui/material';
+import { Vehicle } from '../types/vehicles.types';
+
+// Theme colors now defined in Tailwind config
+
+interface VehicleDetailMobileProps {
+  vehicle: Vehicle;
+  onBack: () => void;
+  onLogFuel?: () => void;
+}
+
+const Section: React.FC<{ title: string; children: React.ReactNode }> = ({
+  title,
+  children
+}) => (
+  <Box sx={{ mb: 3 }}>
+    <Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 1 }}>
+      {title}
+    </Typography>
+    {children}
+  </Box>
+);
+
+const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
+  <Box 
+    sx={{ 
+      height: 96, 
+      bgcolor: color, 
+      borderRadius: 3,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  />
+);
+
+export const VehicleDetailMobile: React.FC<VehicleDetailMobileProps> = ({
+  vehicle,
+  onBack,
+  onLogFuel
+}) => {
+  const displayName = vehicle.nickname || 
+    (vehicle.year && vehicle.make ? `${vehicle.year} ${vehicle.make}` : 'Vehicle');
+  const displayModel = vehicle.model || 'Unknown Model';
+
+  return (
+    <Box sx={{ pb: 10 }}>
+      <Button variant="text" onClick={onBack}>
+        ← Back
+      </Button>
+      <Typography variant="h4" sx={{ mt: 1, mb: 2 }}>
+        {displayName}
+      </Typography>
+      <Divider sx={{ my: 2 }} />
+      
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 3 }}>
+        <Box sx={{ width: 112 }}>
+          <CarThumb color={vehicle.color || "#F2EAEA"} />
+        </Box>
+        <Box>
+          <Typography variant="h5" sx={{ fontWeight: 600 }}>
+            {displayName}
+          </Typography>
+          <Typography color="text.secondary">{displayModel}</Typography>
+          {vehicle.licensePlate && (
+            <Typography variant="body2" color="text.secondary">
+              {vehicle.licensePlate}
+            </Typography>
+          )}
+        </Box>
+      </Box>
+      
+      <Box sx={{ display: 'flex', gap: 1.5, mb: 3 }}>
+        <Button 
+          variant="contained"
+          onClick={onLogFuel}
+        >
+          Add Fuel
+        </Button>
+        <Button variant="outlined">
+          Maintenance
+        </Button>
+      </Box>
+      
+      <Section title="Vehicle Details">
+        <Card>
+          <CardContent>
+            {vehicle.vin && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">VIN</Typography>
+                <Typography sx={{ fontFamily: 'monospace', fontSize: 'small' }}>
+                  {vehicle.vin}
+                </Typography>
+              </Box>
+            )}
+            {vehicle.year && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">Year</Typography>
+                <Typography>{vehicle.year}</Typography>
+              </Box>
+            )}
+            {vehicle.make && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">Make</Typography>
+                <Typography>{vehicle.make}</Typography>
+              </Box>
+            )}
+            {vehicle.model && (
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
+                <Typography color="text.secondary">Model</Typography>
+                <Typography>{vehicle.model}</Typography>
+              </Box>
+            )}
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              <Typography color="text.secondary">Odometer</Typography>
+              <Typography>{vehicle.odometerReading.toLocaleString()} mi</Typography>
+            </Box>
+          </CardContent>
+        </Card>
+      </Section>
+      
+      <Section title="Recent Activity">
+        <Card>
+          <CardContent sx={{ textAlign: 'center', py: 8 }}>
+            <Typography color="text.secondary" variant="body2">
+              No recent activity
+            </Typography>
+          </CardContent>
+        </Card>
+      </Section>
+    </Box>
+  );
+};
--- a/frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
+++ b/frontend/src/features/vehicles/mobile/VehicleMobileCard.tsx
@@ -0,0 +1,65 @@
+/**
+ * @ai-summary Mobile-optimized vehicle card component with Material Design 3
+ */
+
+import React from 'react';
+import { Card, CardActionArea, Box, Typography } from '@mui/material';
+import { Vehicle } from '../types/vehicles.types';
+
+interface VehicleMobileCardProps {
+  vehicle: Vehicle;
+  onClick?: (vehicle: Vehicle) => void;
+  compact?: boolean;
+}
+
+const CarThumb: React.FC<{ color?: string }> = ({ color = "#F2EAEA" }) => (
+  <Box 
+    sx={{ 
+      height: 120, 
+      bgcolor: color, 
+      borderRadius: 3, 
+      mb: 2,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}
+  />
+);
+
+export const VehicleMobileCard: React.FC<VehicleMobileCardProps> = ({
+  vehicle,
+  onClick,
+  compact = false
+}) => {
+  const displayName = vehicle.nickname || 
+    (vehicle.year && vehicle.make ? `${vehicle.year} ${vehicle.make}` : 'Vehicle');
+  const displayModel = vehicle.model || 'Unknown Model';
+  
+  return (
+    <Card 
+      sx={{ 
+        borderRadius: 18, 
+        overflow: 'hidden', 
+        minWidth: compact ? 260 : 'auto',
+        width: compact ? 260 : '100%'
+      }}
+    >
+      <CardActionArea onClick={() => onClick?.(vehicle)}>
+        <Box sx={{ p: 2 }}>
+          <CarThumb color={vehicle.color || "#F2EAEA"} />
+          <Typography variant="h6" sx={{ fontWeight: 700, mb: 0.5 }}>
+            {displayName}
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            {displayModel}
+          </Typography>
+          {vehicle.licensePlate && (
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+              {vehicle.licensePlate}
+            </Typography>
+          )}
+        </Box>
+      </CardActionArea>
+    </Card>
+  );
+};
--- a/frontend/src/features/vehicles/mobile/VehiclesMobileScreen.tsx
+++ b/frontend/src/features/vehicles/mobile/VehiclesMobileScreen.tsx
@@ -0,0 +1,79 @@
+/**
+ * @ai-summary Mobile-optimized vehicles screen with Material Design 3
+ */
+
+import React from 'react';
+import { Box, Typography, Grid } from '@mui/material';
+import { useVehicles } from '../hooks/useVehicles';
+import { VehicleMobileCard } from './VehicleMobileCard';
+import { Vehicle } from '../types/vehicles.types';
+
+interface VehiclesMobileScreenProps {
+  onVehicleSelect?: (vehicle: Vehicle) => void;
+}
+
+const Section: React.FC<{ title: string; children: React.ReactNode; right?: React.ReactNode }> = ({
+  title,
+  children,
+  right
+}) => (
+  <Box sx={{ mb: 3 }}>
+    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+      <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+        {title}
+      </Typography>
+      {right}
+    </Box>
+    {children}
+  </Box>
+);
+
+export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
+  onVehicleSelect
+}) => {
+  const { data: vehicles, isLoading } = useVehicles();
+
+  if (isLoading) {
+    return (
+      <Box sx={{ pb: 10 }}>
+        <Box sx={{ textAlign: 'center', py: 12 }}>
+          <Typography color="text.secondary">Loading vehicles...</Typography>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (!vehicles?.length) {
+    return (
+      <Box sx={{ pb: 10 }}>
+        <Section title="Vehicles">
+          <Box sx={{ textAlign: 'center', py: 12 }}>
+            <Typography color="text.secondary" sx={{ mb: 2 }}>
+              No vehicles added yet
+            </Typography>
+            <Typography variant="caption" color="text.secondary">
+              Add your first vehicle to get started
+            </Typography>
+          </Box>
+        </Section>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ pb: 10 }}>
+      <Section title="Vehicles">
+        <Grid container spacing={2}>
+          {vehicles.map((vehicle) => (
+            <Grid item xs={12} key={vehicle.id}>
+              <VehicleMobileCard
+                vehicle={vehicle}
+                onClick={() => onVehicleSelect?.(vehicle)}
+              />
+            </Grid>
+          ))}
+        </Grid>
+      </Section>
+    </Box>
+  );
+};
--- a/frontend/src/features/vehicles/pages/VehiclesPage.tsx
+++ b/frontend/src/features/vehicles/pages/VehiclesPage.tsx
@@ -1,12 +1,13 @@
 /**
- * @ai-summary Main vehicles page
+ * @ai-summary Main vehicles page with Material Design 3
 */

 import React, { useState } from 'react';
+import { Box, Typography, Grid, Button as MuiButton } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import { useVehicles, useCreateVehicle, useDeleteVehicle } from '../hooks/useVehicles';
 import { VehicleCard } from '../components/VehicleCard';
 import { VehicleForm } from '../components/VehicleForm';
-import { Button } from '../../../shared-minimal/components/Button';
 import { Card } from '../../../shared-minimal/components/Card';
 import { useAppStore } from '../../../core/store';
 import { useNavigate } from 'react-router-dom';
@@ -33,24 +34,45 @@ export const VehiclesPage: React.FC = () => {

  if (isLoading) {
    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-gray-500">Loading vehicles...</div>
-      </div>
+      <Box sx={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        height: '50vh' 
+      }}>
+        <Typography color="text.secondary">Loading vehicles...</Typography>
+      </Box>
    );
  }

  return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-gray-900">My Vehicles</h1>
+    <Box sx={{ py: 2 }}>
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'space-between', 
+        alignItems: 'center', 
+        mb: 4 
+      }}>
+        <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
+          My Vehicles
+        </Typography>
        {!showForm && (
-          <Button onClick={() => setShowForm(true)}>Add Vehicle</Button>
+          <MuiButton 
+            variant="contained" 
+            startIcon={<AddIcon />}
+            onClick={() => setShowForm(true)}
+            sx={{ borderRadius: '999px' }}
+          >
+            Add Vehicle
+          </MuiButton>
        )}
-      </div>
+      </Box>

      {showForm && (
-        <Card>
-          <h2 className="text-lg font-semibold mb-4">Add New Vehicle</h2>
+        <Card className="mb-6">
+          <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
+            Add New Vehicle
+          </Typography>
          <VehicleForm
            onSubmit={async (data) => {
              await createVehicle.mutateAsync(data);
@@ -64,26 +86,36 @@ export const VehiclesPage: React.FC = () => {

      {vehicles?.length === 0 ? (
        <Card>
-          <div className="text-center py-12">
-            <p className="text-gray-500 mb-4">No vehicles added yet</p>
+          <Box sx={{ textAlign: 'center', py: 8 }}>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>
+              No vehicles added yet
+            </Typography>
            {!showForm && (
-              <Button onClick={() => setShowForm(true)}>Add Your First Vehicle</Button>
+              <MuiButton 
+                variant="contained" 
+                startIcon={<AddIcon />}
+                onClick={() => setShowForm(true)}
+                sx={{ borderRadius: '999px' }}
+              >
+                Add Your First Vehicle
+              </MuiButton>
            )}
-          </div>
+          </Box>
        </Card>
      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Grid container spacing={3}>
          {vehicles?.map((vehicle) => (
-            <VehicleCard
-              key={vehicle.id}
-              vehicle={vehicle}
-              onEdit={(v) => console.log('Edit', v)}
-              onDelete={handleDelete}
-              onSelect={handleSelectVehicle}
-            />
+            <Grid item xs={12} md={6} lg={4} key={vehicle.id}>
+              <VehicleCard
+                vehicle={vehicle}
+                onEdit={(v) => console.log('Edit', v)}
+                onDelete={handleDelete}
+                onSelect={handleSelectVehicle}
+              />
+            </Grid>
          ))}
-        </div>
+        </Grid>
      )}
-    </div>
+    </Box>
  );
 };
--- a/frontend/src/shared-minimal/components/Card.tsx
+++ b/frontend/src/shared-minimal/components/Card.tsx
@@ -1,9 +1,9 @@
 /**
- * @ai-summary Reusable card component
+ * @ai-summary Reusable card component with Material Design 3
 */

 import React from 'react';
-import { clsx } from 'clsx';
+import { Card as MuiCard, CardContent } from '@mui/material';

 interface CardProps {
  children: React.ReactNode;
@@ -18,24 +18,27 @@ export const Card: React.FC<CardProps> = ({
  padding = 'md',
  onClick,
 }) => {
-  const paddings = {
-    none: '',
-    sm: 'p-3',
-    md: 'p-4',
-    lg: 'p-6',
+  const paddingStyles = {
+    none: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
  };
  
  return (
-    <div 
-      className={clsx(
-        'bg-white rounded-lg shadow-sm border border-gray-200',
-        paddings[padding],
-        onClick && 'cursor-pointer',
-        className
-      )}
+    <MuiCard 
      onClick={onClick}
+      sx={{ 
+        cursor: onClick ? 'pointer' : 'default',
+        '&:hover': onClick ? {
+          boxShadow: 2
+        } : {}
+      }}
+      className={className}
    >
-      {children}
-    </div>
+      <CardContent sx={{ p: paddingStyles[padding] }}>
+        {children}
+      </CardContent>
+    </MuiCard>
  );
 };
--- a/frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx
+++ b/frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx
@@ -0,0 +1,50 @@
+/**
+ * @ai-summary Bottom navigation component with Material Design 3
+ */
+
+import React from 'react';
+import { BottomNavigation as MuiBottomNavigation, BottomNavigationAction } from '@mui/material';
+
+export interface NavigationItem {
+  key: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+interface BottomNavigationProps {
+  items: NavigationItem[];
+  activeItem: string;
+  onItemSelect: (key: string) => void;
+}
+
+export const BottomNavigation: React.FC<BottomNavigationProps> = ({ 
+  items, 
+  activeItem, 
+  onItemSelect 
+}) => {
+  const activeIndex = items.findIndex(item => item.key === activeItem);
+  
+  return (
+    <MuiBottomNavigation
+      showLabels
+      value={activeIndex}
+      onChange={(_, newValue) => onItemSelect(items[newValue].key)}
+      sx={{ 
+        position: 'fixed', 
+        bottom: 0, 
+        left: 0, 
+        right: 0, 
+        zIndex: 1000,
+        width: '100%'
+      }}
+    >
+      {items.map(({ key, label, icon }) => (
+        <BottomNavigationAction 
+          key={key}
+          label={label} 
+          icon={icon} 
+        />
+      ))}
+    </MuiBottomNavigation>
+  );
+};
--- a/frontend/src/shared-minimal/components/mobile/GlassCard.tsx
+++ b/frontend/src/shared-minimal/components/mobile/GlassCard.tsx
@@ -0,0 +1,41 @@
+/**
+ * @ai-summary Glass morphism card component for mobile UI
+ */
+
+import React from 'react';
+import { clsx } from 'clsx';
+
+interface GlassCardProps {
+  children: React.ReactNode;
+  className?: string;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  onClick?: () => void;
+}
+
+export const GlassCard: React.FC<GlassCardProps> = ({
+  children,
+  className,
+  padding = 'md',
+  onClick,
+}) => {
+  const paddings = {
+    none: '',
+    sm: 'p-3',
+    md: 'p-4',
+    lg: 'p-6',
+  };
+  
+  return (
+    <div 
+      className={clsx(
+        'rounded-3xl border border-slate-200/70 bg-white/80 shadow-sm backdrop-blur',
+        paddings[padding],
+        onClick && 'cursor-pointer hover:shadow-xl hover:-translate-y-0.5 transition',
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+};
--- a/frontend/src/shared-minimal/components/mobile/MobileContainer.tsx
+++ b/frontend/src/shared-minimal/components/mobile/MobileContainer.tsx
@@ -0,0 +1,23 @@
+/**
+ * @ai-summary Mobile app container with glass morphism styling
+ */
+
+import React from 'react';
+
+interface MobileContainerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const MobileContainer: React.FC<MobileContainerProps> = ({ 
+  children, 
+  className = '' 
+}) => {
+  return (
+    <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-start justify-center p-4 md:py-6">
+      <div className={`w-full max-w-[380px] min-h-screen md:min-h-[600px] md:rounded-[32px] shadow-2xl flex flex-col border-0 md:border border-slate-200/70 bg-white/90 md:bg-white/70 backdrop-blur-xl ${className}`}>
+        {children}
+      </div>
+    </div>
+  );
+};
--- a/frontend/src/shared-minimal/components/mobile/MobilePill.tsx
+++ b/frontend/src/shared-minimal/components/mobile/MobilePill.tsx
@@ -0,0 +1,40 @@
+/**
+ * @ai-summary Mobile pill button component with gradient styling
+ */
+
+import React from 'react';
+import { clsx } from 'clsx';
+
+// Theme colors now defined in Tailwind config
+
+interface MobilePillProps {
+  active?: boolean;
+  label: string;
+  onClick?: () => void;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export const MobilePill: React.FC<MobilePillProps> = ({ 
+  active = false, 
+  label, 
+  onClick, 
+  icon, 
+  className 
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        "group h-11 rounded-2xl text-sm font-medium border transition flex items-center justify-center gap-2 backdrop-blur",
+        active
+          ? "text-white border-transparent shadow-lg bg-gradient-moto"
+          : "bg-white/80 text-slate-800 border-slate-200 hover:bg-slate-50",
+        className
+      )}
+    >
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+};
--- a/frontend/src/shared-minimal/theme/md3Theme.ts
+++ b/frontend/src/shared-minimal/theme/md3Theme.ts
@@ -0,0 +1,96 @@
+/**
+ * @ai-summary Material Design 3 theme configuration for MotoVaultPro
+ */
+
+import { createTheme, alpha } from '@mui/material/styles';
+
+// Brand color from mockup
+const primaryHex = '#7A212A';
+
+export const md3Theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: { 
+      main: primaryHex 
+    },
+    secondary: { 
+      main: alpha(primaryHex, 0.8) 
+    },
+    background: { 
+      default: '#F8F5F3', 
+      paper: '#FFFFFF' 
+    },
+  },
+  shape: { 
+    borderRadius: 16 
+  },
+  typography: {
+    fontFamily:
+      'Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif',
+    h3: { 
+      fontWeight: 700, 
+      letterSpacing: -0.5 
+    },
+  },
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 20,
+          boxShadow:
+            '0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06)',
+        },
+      },
+    },
+    MuiButton: {
+      variants: [
+        // Custom MD3-like "tonal" button
+        {
+          props: { variant: 'tonal' as any },
+          style: ({ theme }) => ({
+            backgroundColor: alpha(theme.palette.primary.main, 0.12),
+            color: theme.palette.primary.main,
+            borderRadius: 999,
+            textTransform: 'none',
+            fontWeight: 600,
+            paddingInline: 18,
+            '&:hover': { 
+              backgroundColor: alpha(theme.palette.primary.main, 0.18) 
+            },
+          }),
+        },
+        {
+          props: { variant: 'contained' },
+          style: ({ theme }) => ({
+            borderRadius: 999,
+            textTransform: 'none',
+            fontWeight: 700,
+            paddingInline: 20,
+            boxShadow: '0 8px 24px ' + alpha(theme.palette.primary.main, 0.25),
+          }),
+        },
+      ],
+    },
+    MuiBottomNavigation: {
+      styleOverrides: {
+        root: {
+          borderTop: '1px solid rgba(16,24,40,.08)',
+          background: alpha('#FFFFFF', 0.8),
+          backdropFilter: 'blur(8px)',
+        },
+      },
+    },
+    MuiBottomNavigationAction: {
+      styleOverrides: {
+        root: {
+          minWidth: 0,
+          paddingTop: 8,
+          paddingBottom: 8,
+          '&.Mui-selected': { 
+            color: primaryHex 
+          },
+        },
+      },
+    },
+  },
+});