Set colorscheme.

frontend/app/components/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState } from 'react'
 import {
   AppBar,
   Box,
@@ -21,8 +21,6 @@ import {
   Dashboard as DashboardIcon,
   Add as AddIcon,
   Settings as SettingsIcon,
-  DarkMode as DarkModeIcon,
-  LightMode as LightModeIcon,
 } from '@mui/icons-material'
 
 const drawerWidth = 240
@@ -35,28 +33,11 @@ interface LayoutProps {
 export default function Layout({ children, loading = false }: LayoutProps) {
   const theme = useTheme()
   const [mobileOpen, setMobileOpen] = useState(false)
-  const [darkMode, setDarkMode] = useState(false)
-
-  // Check system preference and localStorage on mount
-  useEffect(() => {
-    const savedTheme = localStorage.getItem('theme')
-    const prefersDark = window.matchMedia(
-      '(prefers-color-scheme: dark)'
-    ).matches
-    setDarkMode(savedTheme === 'dark' || (!savedTheme && prefersDark))
-  }, [])
 
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen)
   }
 
-  const handleThemeToggle = () => {
-    const newTheme = !darkMode
-    setDarkMode(newTheme)
-    localStorage.setItem('theme', newTheme ? 'dark' : 'light')
-    document.documentElement.classList.toggle('dark', newTheme)
-  }
-
   const menuItems = [
     {
       text: 'Tasks',
@@ -72,17 +53,7 @@ export default function Layout({ children, loading = false }: LayoutProps) {
 
   const drawer = (
     <div>
-      <Toolbar>
-        <Typography
-          variant="h6"
-          noWrap
-          component="div"
-          sx={{ fontWeight: 700 }}
-        >
-          Captain's Log
-        </Typography>
-      </Toolbar>
-      <List>
+      <List sx={{ pt: 2 }}>
         {menuItems.map(item => (
           <ListItem key={item.text} disablePadding>
             <ListItemButton
@@ -134,8 +105,10 @@ export default function Layout({ children, loading = false }: LayoutProps) {
       <AppBar
         position="fixed"
         sx={{
-          width: { md: `calc(100% - ${drawerWidth}px)` },
-          ml: { md: `${drawerWidth}px` },
+          width: '100%',
+          backgroundColor: theme.palette.primary.main,
+          color: theme.palette.primary.contrastText,
+          zIndex: theme.zIndex.drawer + 1,
         }}
       >
         <Toolbar>
@@ -149,17 +122,21 @@ export default function Layout({ children, loading = false }: LayoutProps) {
             <MenuIcon />
           </IconButton>
 
-          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
-            Captain's Log
-          </Typography>
-
-          <IconButton
-            color="inherit"
-            onClick={handleThemeToggle}
-            aria-label="toggle dark mode"
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{
+              flexGrow: 1,
+              color: '#ffffff',
+              fontWeight: 700,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 1,
+            }}
           >
-            {darkMode ? <LightModeIcon /> : <DarkModeIcon />}
-          </IconButton>
+            ⚓ Captain's Log
+          </Typography>
         </Toolbar>
       </AppBar>
 
@@ -196,6 +173,8 @@ export default function Layout({ children, loading = false }: LayoutProps) {
             '& .MuiDrawer-paper': {
               boxSizing: 'border-box',
               width: drawerWidth,
+              top: '64px', // Position below AppBar
+              height: 'calc(100% - 64px)', // Adjust height to account for AppBar
             },
           }}
           open