fix: post Dark mode fixes

frontend/src/components/Layout.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
 import { Link, useLocation } from 'react-router-dom';
-import { Container, Paper, Typography, Box, IconButton, Avatar, useTheme } from '@mui/material';
+import { Container, Paper, Typography, Box, IconButton, Avatar } from '@mui/material';
 import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
 import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
 import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
@@ -28,7 +28,6 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   const { user, logout } = useAuth0();
   const { sidebarOpen, toggleSidebar, setSidebarOpen } = useAppStore();
   const location = useLocation();
-  const theme = useTheme();
 
   // Sync theme preference with backend
   useThemeSync();
@@ -128,14 +127,17 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
           }}
         >
           <Box
-            sx={{
-              backgroundColor: theme.palette.mode === 'light' ? 'primary.main' : 'transparent',
+            sx={(theme) => ({
+              backgroundColor: 'primary.main',
+              ...theme.applyStyles('dark', {
+                backgroundColor: 'transparent',
+              }),
               borderRadius: 1,
               px: 1,
               py: 0.5,
               display: 'inline-flex',
               alignItems: 'center'
-            }}
+            })}
           >
             <img
               src="/images/logos/motovaultpro-title-slogan.png"