diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 9bf32f4..c517b5b 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
 
   return (
     <html lang="en">
-      <body>
+      <body style={{ backgroundColor: theme.palette.background.default }}>
         <AppRouterCacheProvider options={{ enableCssLayer: true }}>
           <ThemeProvider theme={theme}>
             <CssBaseline />
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index 9293300..de9ef0a 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -1,18 +1,108 @@
 "use client";
 
 import React from "react";
-import { Typography, Box } from "@mui/material";
+import {
+  Box,
+  Typography,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Divider,
+} from "@mui/material";
+import AccountCircleIcon from "@mui/icons-material/Person";
+import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
+import PrivacyTipIcon from "@mui/icons-material/PrivacyTipOutlined";
+import GavelIcon from "@mui/icons-material/ClassOutlined";
+import SupportIcon from "@mui/icons-material/ContactSupportOutlined";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
+import FeedbackIcon from "@mui/icons-material/CommentOutlined";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { useRouter } from "next/navigation";
 
 export default function Settings() {
+  const router = useRouter();
+
+  const settingsItems = [
+    {
+      icon: <AccountCircleIcon />,
+      text: "Account",
+      route: "/settings/account",
+    },
+    {
+      icon: <NotificationsIcon />,
+      text: "Notifications",
+      route: "/settings/notifications",
+    },
+    {
+      icon: <PrivacyTipIcon />,
+      text: "Data and Privacy",
+      route: "/settings/data-privacy",
+    },
+    { icon: <GavelIcon />, text: "Legal", route: "/settings/legal" },
+    { icon: <SupportIcon />, text: "Support", route: "/settings/support" },
+    { icon: <InfoIcon />, text: "About", route: "/settings/about" },
+    {
+      icon: <FeedbackIcon />,
+      text: "Send Feedback",
+      secondaryText: "Version 1.0",
+      route: "/settings/feedback",
+    },
+  ];
+
   return (
     <Box
       sx={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh",
+        padding: "16px",
+        maxWidth: "600px",
+        margin: "0 auto",
       }}>
-      <Typography variant="h4">Settings Page</Typography>
+      <Typography variant="h5" gutterBottom>
+        Settings
+      </Typography>
+      <List>
+        {settingsItems.map(item => (
+          <React.Fragment key={item.route}>
+            <ListItem disablePadding sx={{ backgroundColor: "white" }}>
+              <ListItemButton onClick={() => router.push(item.route)}>
+                <ListItemIcon>{item.icon}</ListItemIcon>
+                <ListItemText
+                  primary={item.text}
+                  secondary={item.secondaryText || null}
+                  primaryTypographyProps={{
+                    sx: {
+                      fontWeight: item.secondaryText ? "normal" : "inherit",
+                    },
+                  }}
+                  secondaryTypographyProps={{
+                    sx: { fontSize: "0.8em", color: "gray" },
+                  }}
+                />
+                <ChevronRightIcon />
+              </ListItemButton>
+            </ListItem>
+            <Divider />
+          </React.Fragment>
+        ))}
+      </List>
+
+      <List>
+        <ListItem disablePadding>
+          <ListItemButton onClick={() => router.push("/logout")}>
+            <ListItemText
+              primary="log out"
+              primaryTypographyProps={{
+                sx: {
+                  textTransform: "uppercase",
+                  fontWeight: "bold",
+                  textAlign: "center",
+                },
+              }}
+            />
+          </ListItemButton>
+        </ListItem>
+      </List>
     </Box>
   );
 }
diff --git a/apps/web/src/theme.ts b/apps/web/src/theme.ts
index a66c7a4..fb05b70 100644
--- a/apps/web/src/theme.ts
+++ b/apps/web/src/theme.ts
@@ -41,6 +41,9 @@ const theme = createTheme({
     header: {
       main: "#86c232", // Define a custom green color for the header
     },
+    background: {
+      default: "#f5f5f5",
+    },
   },
   typography: {
     fontFamily: roboto.style.fontFamily,
