Index: pages/+Layout.tsx
===================================================================
--- pages/+Layout.tsx	(revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629)
+++ pages/+Layout.tsx	(revision 8ee45534cd667e6cced2ed96968c95d8de3b1029)
@@ -1,37 +1,74 @@
-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 "./Layout.css";
 
-const theme = createTheme({
-    palette: {
-        mode: 'dark',
-        primary: { main: '#ff8201' },
-        background: { default: '#121212', paper: '#1e1e1e' },
-    },
-});
+import logoUrl from "../assets/logo.svg";
+import { Link } from "../components/Link";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-    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>
-    );
+  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>
+  );
 }
+
+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>
+  );
+}