Index: pages/+Layout.tsx
===================================================================
--- pages/+Layout.tsx	(revision 8ee45534cd667e6cced2ed96968c95d8de3b1029)
+++ pages/+Layout.tsx	(revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -1,74 +1,37 @@
-import "./Layout.css";
+import React from 'react';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+import Box from '@mui/material/Box';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 
-import logoUrl from "../assets/logo.svg";
-import { Link } from "../components/Link";
+const theme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: { main: '#ff8201' },
+        background: { default: '#121212', paper: '#1e1e1e' },
+    },
+});
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        display: "flex",
-        maxWidth: 900,
-        margin: "auto",
-      }}
-    >
-      <Sidebar>
-        <Logo />
-        <Link href="/">Welcome</Link>
-        <Link href="/todo">Todo</Link>
-        <Link href="/star-wars">Data Fetching</Link>
-      </Sidebar>
-      <Content>{children}</Content>
-    </div>
-  );
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    minHeight: '100vh',
+                    bgcolor: 'background.default',
+                    color: 'text.primary',
+                }}
+            >
+                <Navbar />
+                <Box component="main" sx={{ flexGrow: 1, py: 3 }}>
+                    {children}
+                </Box>
+                <Footer />
+            </Box>
+        </ThemeProvider>
+    );
 }
-
-function Sidebar({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      id="sidebar"
-      style={{
-        padding: 20,
-        flexShrink: 0,
-        display: "flex",
-        flexDirection: "column",
-        lineHeight: "1.8em",
-        borderRight: "2px solid #eee",
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-function Content({ children }: { children: React.ReactNode }) {
-  return (
-    <div id="page-container">
-      <div
-        id="page-content"
-        style={{
-          padding: 20,
-          paddingBottom: 50,
-          minHeight: "100vh",
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function Logo() {
-  return (
-    <div
-      style={{
-        marginTop: 20,
-        marginBottom: 10,
-      }}
-    >
-      <a href="/">
-        <img src={logoUrl} height={64} width={64} alt="logo" />
-      </a>
-    </div>
-  );
-}