diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro
new file mode 100644
index 000000000..bfe117e9a
--- /dev/null
+++ b/docs/src/pages/404.astro
@@ -0,0 +1,240 @@
+---
+import SiteSidebar from '../components/SiteSidebar.astro';
+import AstroLogo from '../components/AstroLogo.astro';
+import ThemeToggle from '../components/ThemeToggle.tsx';
+import MenuToggle from '../components/MenuToggle.tsx';
+---
+
+<html lang="en-us">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Astro Documentation</title>
+    <link rel="stylesheet" href="/theme.css" />
+    <link rel="stylesheet" href="/code.css" />
+    <link rel="stylesheet" href="/index.css" />
+    <script src="/theme.js" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+    <style>
+      body {
+        width: 100%;
+        display: grid;
+        grid-template-rows: 3.5rem 1fr;
+        --gutter: 0.5rem;
+        --doc-padding: 2rem;
+      }
+
+      header {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        height: 56px;
+        width: 100%;
+        background-color: var(--theme-bg-offset);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .layout {
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: 
+          minmax(var(--gutter), 1fr) 
+          minmax(0, var(--max-width)) 
+          minmax(var(--gutter), 1fr);
+        gap: 1em;
+      }
+
+      .menu-and-logo {
+        gap: 1em;
+      }
+
+      #site-title {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+        font-size: 1.5rem;
+        font-weight: 700;
+        margin: 0;
+        line-height: 1;
+        color: var(--theme-text);
+        text-decoration: none;
+      }
+
+      #site-title:hover,
+      #site-title:focus {
+        color: var(--theme-text-light);
+      }
+
+      #site-title h1 {
+        font: inherit;
+        color: inherit;
+        margin: 0;
+      }
+
+      .nav-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        max-width: 82em;
+        padding: 0 1rem;
+      }
+
+      .layout :global(> *) {
+        width: 100%;
+        height: 100%;
+      }
+
+      .sidebar {
+        min-height: calc(100vh - 3.5rem);
+        height: calc(100vh - 3.5rem);
+        max-height: 100vh;
+        position: sticky;
+        top: 3.5rem;
+        padding: 0;
+      }
+
+      #sidebar-site {
+        position: fixed;
+        background-color: var(--theme-bg);
+        z-index: 1000;
+      }
+
+
+      #article {
+        padding: var(--doc-padding) var(--gutter);
+        grid-column: 2;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(data:font/woff;base64,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) format('woff');
+}
+
+      .content {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .content > main {
+        margin-bottom: 4rem;
+      }
+
+      #sidebar-content {
+        display: none;
+      }
+      .theme-toggle-wrapper {
+        display: none;
+      }
+
+      #sidebar-site {
+        display: none;
+      }
+      :global(.mobile-sidebar-toggle) {
+        overflow: hidden;
+      }
+      :global(.mobile-sidebar-toggle) #sidebar-site {
+        display: block;
+      }
+      @media (min-width: 60em) {
+        #sidebar-site {
+          display: flex;
+        }
+        :global(.mobile-sidebar-toggle) {
+          overflow: initial;
+        }
+        :global(.mobile-sidebar-toggle) #sidebar-site {
+          display: flex;
+        }
+        .menu-toggle {
+          display: none;
+        }
+        .layout {
+          grid-template-columns: 
+            20rem 
+            minmax(0, 1fr);
+        }
+        #article {
+          grid-column: 2;
+        }
+        #sidebar-site {
+          position: sticky;
+        }
+        #sidebar-nav {
+          display: flex;
+        }
+        .theme-toggle-wrapper {
+          display: flex;
+        }
+      }
+
+      @media (min-width: 82em) {
+        .layout {
+          grid-template-columns: 
+            20rem 
+            minmax(0, var(--max-width)) 
+            18rem;
+          padding-left: 0;
+          padding-right: 0;
+          margin: 0 auto;
+        }
+
+        #sidebar-nav {
+          grid-column: 1;
+        }
+        #article {
+          grid-column: 2/4;
+        }
+      }
+
+
+    </style>
+  </head>
+
+  <body class="mobile-sidebar-hidden">
+    <header>
+      <nav class="nav-wrapper">
+        <div class="menu-and-logo flex">
+          <div class="menu-toggle">
+              <MenuToggle client:idle/>
+          </div>
+          <a id="site-title" href="/">
+            <h1>Astro Documentation</h1>
+          </a>
+        </div>
+
+        <div />
+
+        <div class="theme-toggle-wrapper">
+          <ThemeToggle client:idle />
+        </div>
+      </nav>
+    </header>
+
+    <main class="layout">
+      <aside class="sidebar" id="sidebar-site">
+        <SiteSidebar currentPage="" />
+      </aside>
+      <div id="article">
+        <article class="content">
+          <h1>404</h1>
+          <p>This page isn't in our solar system.</p>
+          <a href="/">Take me home.</a>
+        </article>
+      </div>
+    </main>
+  </body>
+</html>
