diff --git a/src/components/Header.astro b/src/components/Header.astro
deleted file mode 100644
index 39230b0..0000000
--- a/src/components/Header.astro
+++ /dev/null
@@ -1,68 +0,0 @@
----
-const { pathname } = Astro.url;
-const currentPath =
-  pathname.endsWith("/") && pathname.length > 1
-    ? pathname.slice(0, -1)
-    : pathname;
-const navItems = [
-  { href: "/", label: "About" },
-  { href: "/now", label: "Now" },
-  { href: "/writing", label: "Writing" },
-];
----
-
-<header>
-  <h1>dnsc</h1>
-  <ul>
-    {
-      navItems.map(({ href, label }) => (
-        <li>
-          <a href={href} class={currentPath === href ? "active" : ""}>
-            {label}
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-</header>
-
-<style>
-  header {
-    display: flex;
-    justify-content: center;
-    padding: 0.5rem;
-    flex-wrap: wrap;
-    max-width: var(--container-lg);
-  }
-
-  h1 {
-    font-family: var(--font-fancy);
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
-    width: 100%;
-    text-align: center;
-  }
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    list-style-type: none;
-    justify-content: center;
-    padding-left: 0;
-    margin-bottom: 0.6rem;
-  }
-
-  ul > li {
-    margin-left: 0.6rem;
-    margin-right: 0.6rem;
-  }
-
-  a,
-  a:visited {
-    color: var(--foreground);
-  }
-
-  a.active {
-    font-weight: bold;
-  }
-</style>
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
new file mode 100644
index 0000000..6f17ad3
--- /dev/null
+++ b/src/components/Sidebar.astro
@@ -0,0 +1,53 @@
+---
+const { pathname } = Astro.url;
+
+const year = new Date().getFullYear();
+const currentPath =
+  pathname.endsWith("/") && pathname.length > 1
+    ? pathname.slice(0, -1)
+    : pathname;
+const navItems = [
+  { href: "/", label: "About" },
+  { href: "/now", label: "Now" },
+  { href: "/writing", label: "Writing" },
+];
+---
+
+<aside data-sidebar>
+  <header>
+    <h1>dnsc</h1>
+  </header>
+  <nav>
+    <ul>
+      {
+        navItems.map(({ href, label }) => (
+          <li>
+            <a href={href} class={currentPath === href ? "active" : ""}>
+              {label}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
+  <footer>© {year} • <a href="/legal">Legal</a></footer>
+</aside>
+
+<style>
+  h1 {
+    font-family: var(--font-fancy);
+    font-size: 1.5rem;
+    width: 100%;
+    text-align: center;
+    margin-bottom: 0;
+  }
+
+  footer {
+    font-size: 0.8rem;
+    color: var(--muted-foreground);
+  }
+
+  footer > a {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4fcd45e..d342ff5 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,4 +1,6 @@
 ---
+import Sidebar from "../components/Sidebar.astro";
+
 const { title } = Astro.props;
 ---
 
@@ -15,8 +17,11 @@ const { title } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body>
-    <slot />
+  <body data-sidebar-layout>
+    <Sidebar />
+    <main data-main-layout>
+      <slot />
+    </main>
   </body>
 </html>
 
@@ -50,4 +55,11 @@ const { title } = Astro.props;
     --container-md: 600px;
     --container-sm: 480px;
   }
+
+  [data-main-layout] {
+    margin-top: 3rem;
+    padding: 0.5rem;
+    padding-left: 0;
+    padding-right: 1rem;
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ef71118..749072c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,10 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Header from "../components/Header.astro";
 ---
 
 <Layout title="Home">
-  <Header />
+  <h1>Welcome!</h1>
   <img src="https://placehold.co/1200x300" />
 </Layout>
 
