feat: navigation and UX improvements complete

frontend/src/components/Layout.tsx

@@ -17,6 +17,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import { useAppStore } from '../core/store';
 import { Button } from '../shared-minimal/components/Button';
 import { NotificationBell } from '../features/notifications';
+import { useThemeSync } from '../shared-minimal/theme/useThemeSync';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -28,6 +29,9 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   const { sidebarOpen, toggleSidebar, setSidebarOpen } = useAppStore();
   const location = useLocation();
 
+  // Sync theme preference with backend
+  useThemeSync();
+
   // Ensure desktop has a visible navigation by default (only on mount)
   React.useEffect(() => {
     if (!mobileMode && !sidebarOpen) {
@@ -72,7 +76,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
                 />
               <div className="flex items-center gap-2">
                 <NotificationBell />
-                <div className="text-xs text-slate-500">v1.0</div>
+                <div className="text-xs text-slate-500 dark:text-titanio">v1.0</div>
               </div>
             </div>
           </div>
@@ -157,7 +161,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
                       ? 'primary.main'
                       : 'transparent',
                     color: isActive
-                      ? '#FFFFFF'
+                      ? 'primary.contrastText'
                       : 'text.primary',
                     '&:hover': {
                       backgroundColor: isActive