diff --git a/react-openapi/Admin.tsx b/react-openapi/Admin.tsx
index 91ee8fe..5fd9bc6 100644
--- a/react-openapi/Admin.tsx
+++ b/react-openapi/Admin.tsx
@@ -8,7 +8,6 @@ import { getAppConfig } from "./config";
 import { initializeApiClients } from "./api/client";
 import { AppConfig } from "./types/config";
 import { Box, Typography, Paper, CircularProgress } from "@mui/material";
-import AppTheme from "./shared-theme/AppTheme";
 import {
   Routes,
   Route,
@@ -126,30 +125,26 @@ export default function Admin({ basePath = "/admin" }: { basePath?: string }) {
 
   if (!config) {
     return (
-      <AppTheme>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100vh",
-          }}
-        >
-          <CircularProgress />
-        </Box>
-      </AppTheme>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress />
+      </Box>
     );
   }
 
   return (
-    <AppTheme>
-      <QueryClientProvider client={queryClient}>
-        <ConfigContext.Provider value={config}>
-          <UploadProvider>
-            <AdminApp basePath={basePath} />
-          </UploadProvider>
-        </ConfigContext.Provider>
-      </QueryClientProvider>
-    </AppTheme>
+    <QueryClientProvider client={queryClient}>
+      <ConfigContext.Provider value={config}>
+        <UploadProvider>
+          <AdminApp basePath={basePath} />
+        </UploadProvider>
+      </ConfigContext.Provider>
+    </QueryClientProvider>
   );
 }
diff --git a/src/AppTheme.tsx b/src/AppTheme.tsx
index cdb2f7a..288cd45 100644
--- a/src/AppTheme.tsx
+++ b/src/AppTheme.tsx
@@ -1,13 +1,48 @@
 import * as React from "react";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { getDesignTokens } from "./shared-theme/themePrimitives";
+import { inputsCustomizations } from "./shared-theme/customizations/inputs";
+import { dataDisplayCustomizations } from "./shared-theme/customizations/dataDisplay";
+import { feedbackCustomizations } from "./shared-theme/customizations/feedback";
+import { navigationCustomizations } from "./shared-theme/customizations/navigation";
+import { surfacesCustomizations } from "./shared-theme/customizations/surfaces";
 
-const theme = createTheme({
-  palette: {
-    // mode: "light", // or "dark"
-    mode: "dark", // or "dark"
-  },
+export const ColorModeContext = React.createContext({
+  toggleColorMode: () => {},
+  mode: "light" as "light" | "dark",
 });
 
 export default function AppTheme({ children }: { children: React.ReactNode }) {
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  const [mode, setMode] = React.useState<"light" | "dark">("light");
+
+  const colorMode = React.useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+      },
+      mode,
+    }),
+    [mode]
+  );
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        ...getDesignTokens(mode),
+        components: {
+          ...inputsCustomizations,
+          ...dataDisplayCustomizations,
+          ...feedbackCustomizations,
+          ...navigationCustomizations,
+          ...surfacesCustomizations,
+        },
+      }),
+    [mode]
+  );
+
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ColorModeContext.Provider>
+  );
 }
diff --git a/src/Footer.tsx b/src/Footer.tsx
index 85298ef..e8ad23f 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -40,7 +40,6 @@ export default function Footer() {
               flexDirection: 'column',
               alignItems: 'center',
               gap: { xs: 2, sm: 4 },
-              py: { xs: 2, sm: 4 },
               textAlign: { sm: 'center', md: 'left' },
             }}
           >
diff --git a/src/Header.tsx b/src/Header.tsx
index 51d6824..c7c8875 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -16,8 +16,11 @@ import {
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import LogoutIcon from "@mui/icons-material/Logout";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../react-auth";
+import { ColorModeContext } from "./AppTheme";
 
 interface HeaderProps {
   routerMapping: {
@@ -39,6 +42,7 @@ export default function Header({
 
   const navigate = useNavigate();
   const { currentUser, logout } = useAuth();
+  const { mode, toggleColorMode } = React.useContext(ColorModeContext);
 
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -70,6 +74,11 @@ export default function Header({
           </IconButton>
         )}
 
+        {/* THEME TOGGLE */}
+        <IconButton onClick={toggleColorMode} color="inherit" sx={{ mr: 2 }}>
+          {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+        </IconButton>
+
         {/* TITLE */}
         <Typography
           variant="h6"
diff --git a/src/Home.tsx b/src/Home.tsx
index ea6eabc..8d908ff 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,12 +1,108 @@
 import * as React from "react";
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, Button, Container, Stack } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 
 export default function Home() {
+  const navigate = useNavigate();
+
   return (
-    <Box sx={{ p: 4 }}>
-      <Typography variant="h1" gutterBottom>
-        Welcome to Khata
-      </Typography>
+    <Box
+      sx={{
+        width: "100%",
+        minHeight: "calc(100vh - 64px)", // accounting for header
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: "-20%",
+          left: "-10%",
+          width: "50%",
+          height: "60%",
+          background: "radial-gradient(circle, rgba(99,102,241,0.15) 0%, rgba(0,0,0,0) 70%)",
+          zIndex: 0,
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          bottom: "-20%",
+          right: "-10%",
+          width: "50%",
+          height: "60%",
+          background: "radial-gradient(circle, rgba(236,72,153,0.15) 0%, rgba(0,0,0,0) 70%)",
+          zIndex: 0,
+        },
+      }}
+    >
+      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1 }}>
+        <Stack
+          spacing={4}
+          alignItems="center"
+          textAlign="center"
+          sx={{
+            p: { xs: 4, md: 8 },
+            backdropFilter: "blur(20px)",
+            backgroundColor: (theme) => 
+               theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.03)" : "rgba(255, 255, 255, 0.6)",
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 4,
+            boxShadow: (theme) =>
+              theme.palette.mode === "dark"
+                ? "0 8px 32px 0 rgba(0, 0, 0, 0.37)"
+                : "0 8px 32px 0 rgba(31, 38, 135, 0.07)",
+          }}
+        >
+          <Typography
+            variant="h1"
+            sx={{
+              fontWeight: 800,
+              fontSize: { xs: "3rem", md: "5rem" },
+              background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              mb: 2,
+            }}
+          >
+            Welcome to Khata
+          </Typography>
+
+          <Typography
+            variant="h5"
+            color="text.secondary"
+            sx={{ maxWidth: "600px", lineHeight: 1.6 }}
+          >
+            Your intelligent, extensible financial ledger. Control accounts, manage transactions, and track your data dynamically with our OpenAPI-driven architecture.
+          </Typography>
+
+          <Box mt={4}>
+            <Button
+              variant="contained"
+              size="large"
+              endIcon={<ArrowForwardIcon />}
+              onClick={() => navigate("/admin")}
+              sx={{
+                px: 4,
+                py: 1.5,
+                borderRadius: "50px",
+                fontWeight: "bold",
+                background: "linear-gradient(45deg, #6366f1 30%, #ec4899 90%)",
+                transition: "transform 0.2s ease-in-out, box-shadow 0.2s",
+                "&:hover": {
+                  transform: "translateY(-3px)",
+                  boxShadow: "0 8px 20px rgba(236,72,153,0.4)",
+                },
+              }}
+            >
+              Enter Dashboard
+            </Button>
+          </Box>
+        </Stack>
+      </Container>
     </Box>
   );
 }