diff --git a/frontend/src/basic/NavBar/AppBar/index.tsx b/frontend/src/basic/NavBar/AppBar/index.tsx
index 7f4993d2..1e7bf442 100644
--- a/frontend/src/basic/NavBar/AppBar/index.tsx
+++ b/frontend/src/basic/NavBar/AppBar/index.tsx
@@ -71,7 +71,11 @@ const AppBar = ({ changePage }: AppBarProps): React.JSX.Element => {
 
   return (
     <Box sx={{ flexGrow: 1 }}>
-      <Bar position='fixed' sx={{ top: 'auto', bottom: 0 }} color='white'>
+      <Bar
+        position='fixed'
+        sx={{ top: 'auto', bottom: 0 }}
+        color={theme.palette.mode === 'dark' ? 'default' : 'white'}
+      >
         <Toolbar style={{ display: 'flex', justifyContent: 'space-between', flexGrow: 1 }}>
           <Button
             size='large'