diff --git a/_components/LandingPage.tsx b/_components/LandingPage.tsx
index a0545053..f71c39e2 100644
--- a/_components/LandingPage.tsx
+++ b/_components/LandingPage.tsx
@@ -22,7 +22,7 @@ export default function LandingPage() {
         id="content"
         className="flex flex-col px-8 xl:px-0 pt-6 md:pt-12 mt-4 md:items-center md:justify-center max-w-[1200px] mx-auto mb-12"
       >
-        <div className="flex flex-col md:flex-row w-full mb-8 max-w-screen-xl justify-between hub-header">
+        <div className="flex flex-col md:flex-row w-full mb-8 max-w-screen-xl justify-between">
           <div className="max-w-prose mb-8">
             <h1 className="text-2xl font-semibold sm:text-3xl md:text-4xl mb-3">
               Examples
@@ -33,61 +33,63 @@ export default function LandingPage() {
               favorite tools.
             </p>
           </div>
-          <div className="flex flex-col gap-1 md:ml-4 mb-8">
-            <h2 className="text-xs font-semibold mb-1">
-              Filter by type
-            </h2>
-            <label for="example" className="flex gap-2 items-center">
-              <span className="switch">
-                <input
-                  type="checkbox"
-                  id="example"
-                  value="Examples"
-                  className="filter mr-2"
-                  checked
-                />
-                <span className="slider"></span>
-              </span>
-              <ExampleIcon />
-              <span>Examples</span>
-            </label>
+          <img
+            className="w-full max-w-32 mx-auto h-auto mb-4 hidden md:block"
+            alt="Deno Examples"
+            src="/examples.png"
+          />
+        </div>
+        <div className="flex flex-col gap-4 w-full mb-4 p-4 border border-blue-100 dark:border-background-tertiary bg-blue-50 dark:bg-background-secondary rounded md:flex-wrap md:justify-start md:items-center md:flex-row">
+          <h2 className="font-semibold">
+            Filter by type:
+          </h2>
+          <label for="example" className="flex gap-2 items-center mr-4">
+            <ExampleIcon />
+            <span>Examples:</span>
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="example"
+                value="Examples"
+                className="filter mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
 
-            <label for="tutorial" className="flex gap-2 items-center">
-              <span className="switch">
-                <input
-                  type="checkbox"
-                  id="tutorial"
-                  value="Tutorials"
-                  className="filter mr-2"
-                  checked
-                />
-                <span className="slider"></span>
-              </span>
-              <TutorialIcon />
-              <span>
-                Tutorials
-              </span>
-            </label>
+          <label for="tutorial" className="flex gap-2 items-center mr-4">
+            <TutorialIcon />
+            <span>Tutorials:</span>
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="tutorial"
+                value="Tutorials"
+                className="filter mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
 
-            <label for="video" className="flex gap-2 items-center">
-              <span className="switch">
-                <input
-                  type="checkbox"
-                  id="video"
-                  value="Videos"
-                  className="filter mr-2"
-                  checked
-                />
-                <span className="slider"></span>
-              </span>
-              <VideoIcon />
-              <span>
-                Videos
-              </span>
-            </label>
-          </div>
+          <label for="video" className="flex gap-2 items-center mr-4">
+            <VideoIcon />
+            <span>Videos:</span>
+            <span className="switch">
+              <input
+                type="checkbox"
+                id="video"
+                value="Videos"
+                className="filter mr-2"
+                checked
+              />
+              <span className="slider"></span>
+            </span>
+          </label>
         </div>
-        <div className="unfiltered columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8">
+
+        <div className="unfiltered columns-1 sm:columns-2 lg:columns-3 gap-8 mb-8 w-[100%]">
           {componentsPerSidebarItem}
         </div>
         <div className="fully-filtered">
diff --git a/_components/Sidebar.tsx b/_components/Sidebar.tsx
index 959cb1eb..500aa0cf 100644
--- a/_components/Sidebar.tsx
+++ b/_components/Sidebar.tsx
@@ -17,15 +17,43 @@ export default function Sidebar(
 ) {
   return (
     <nav
-      class="p-2 pt-0 pr-0 overflow-y-auto overflow-x-hidden"
+      class="overflow-y-auto overflow-x-hidden"
       style={{ scrollbarGutter: "stable", scrollbarWidth: "thin" }}
     >
+      <ul className="xl:hidden border-bg-tertiary relative bg-background-secondary m-2 mt-0 mb-4 py-2 rounded-md border border-background-tertiary">
+        <SidebarTopNav
+          name="Runtime"
+          url="/runtime/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="API reference"
+          url="/api/deno/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="Examples"
+          url="/examples/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="Deploy"
+          url="/deploy/"
+          currentPath={props.url}
+        />
+        <SidebarTopNav
+          name="Subhosting"
+          url="/subhosting/"
+          currentPath={props.url}
+        />
+      </ul>
       <ul>
         {props.sidebar.map((section) => (
           <SidebarSection
             section={section}
             search={props.search}
             url={props.url}
+            headerPath={props.headerPath}
           />
         ))}
       </ul>
@@ -45,8 +73,8 @@ function SidebarSection(
     str.replaceAll(/[\s_]/g, "-")
       .replaceAll(/[^a-zA-Z0-9-]/g, "")
       .toLowerCase();
-  const slug = slugify(props.section.title ?? "");
-  const categoryTitle = `sidebar-category-${slug}`;
+  const slug = "-" + slugify(props.section.title ?? "");
+  const categoryTitle = `sidebar-category${slug}`;
   const headingLink = props.section.href;
 
   return (
@@ -57,7 +85,7 @@ function SidebarSection(
             <a href={headingLink}>
               <h2
                 id={categoryTitle}
-                class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize"
+                class="border-b border-foreground-tertiary pt-2 pb-1.5 -mx-5 px-8 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize"
                 aria-current={props.url === headingLink ? "page" : undefined}
               >
                 {props.section.title}
@@ -67,13 +95,13 @@ function SidebarSection(
           : (
             <h2
               id={categoryTitle}
-              class="border-b border-foreground-tertiary pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-foreground-primary capitalize"
+              class="border-b border-foreground-tertiary pt-2 pb-0.5 -mx-5 px-8 mb-3 text-sm font-semibold text-foreground-primary capitalize"
             >
               {props.section.title}
             </h2>
           )
       )}{" "}
-      <ul aria-labelledby={categoryTitle}>
+      <ul aria-labelledby={categoryTitle} class="mb-4">
         {props.section.items.map((item) => (
           <li class="mx-2">
             {typeof item === "object" && "items" in item
@@ -145,7 +173,7 @@ function SidebarCategory(props: {
     if (typeof item === "string") {
       return item === props.url;
     }
-    return item.id === props.url;
+    return typeof item === "object" && "id" in item && item.id === props.url;
   });
 
   return (
@@ -176,9 +204,42 @@ function SidebarCategory(props: {
         data-accordion-content
       >
         {props.item.items.map((item) => (
-          <SidebarItem item={item} search={props.search} url={props.url} />
+          typeof item === "object" && "items" in item
+            ? (
+              <SidebarCategory
+                item={item}
+                url={props.url}
+                search={props.search}
+              />
+            )
+            : (
+              <SidebarItem
+                item={item}
+                search={props.search}
+                url={props.url}
+              />
+            )
         ))}
       </ul>
     </>
   );
 }
+
+function SidebarTopNav(
+  props: { name: string; url: string; currentPath: string },
+) {
+  const isCurrentlyActivePath = props.currentPath.startsWith(props.url);
+  return (
+    <li class="mx-2">
+      <a
+        class={`relative block py-1.5 px-1.5 text-base text-foreground-primary leading-snug rounded ring-1 ring-transparent hover:ring-background-tertiary hover:bg-background-secondary transition-colors duration-200 ease-in-out select-none current:bg-background-tertiary ${
+          isCurrentlyActivePath ? "font-semibold" : "font-normal"
+        }`}
+        href={props.url}
+        aria-current={isCurrentlyActivePath ? "page" : undefined}
+      >
+        {props.name}
+      </a>
+    </li>
+  );
+}
diff --git a/_components/ToTop.tsx b/_components/ToTop.tsx
new file mode 100644
index 00000000..f1d2fe8b
--- /dev/null
+++ b/_components/ToTop.tsx
@@ -0,0 +1,9 @@
+export default function ToTop() {
+  return (
+    <a href="#" className="totop">
+      <span className="sr-only">
+        Back to top
+      </span>
+    </a>
+  );
+}
diff --git a/_includes/doc.tsx b/_includes/doc.tsx
index 2028783f..52344ab0 100644
--- a/_includes/doc.tsx
+++ b/_includes/doc.tsx
@@ -1,13 +1,13 @@
+import { Breadcrumbs } from "../_components/Breadcrumbs.tsx";
 import Logo from "../_components/Logo.tsx";
+import { NavigationButton } from "../_components/NavigationButton.tsx";
+import { TableOfContentsItem } from "../_components/TableOfContentsItem.tsx";
+import { TableOfContentsItemMobile } from "../_components/TableOfContentsItemMobile.tsx";
 import {
   Sidebar as Sidebar_,
   SidebarItem,
   TableOfContentsItem as TableOfContentsItem_,
 } from "../types.ts";
-import { Breadcrumbs } from "../_components/Breadcrumbs.tsx";
-import { NavigationButton } from "../_components/NavigationButton.tsx";
-import { TableOfContentsItem } from "../_components/TableOfContentsItem.tsx";
-import { TableOfContentsItemMobile } from "../_components/TableOfContentsItemMobile.tsx";
 import renderCommand from "./renderCommand.tsx";
 
 export const layout = "layout.tsx";
@@ -73,7 +73,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
         id="sidebar"
         data-open="false"
       >
-        <div class="xl:hidden p-4 shadow-sm flex justify-between h-16">
+        <div class="xl:hidden p-4 flex justify-between h-16">
           <a class="flex items-center gap-3 mr-6" href="/">
             <Logo />
           </a>
@@ -108,7 +108,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
       >
       </div>
       <div
-        class="absolute top-16 bottom-0 left-0 right-0 xl:left-74 overflow-y-auto xl:grid xl:grid-cols-7 xl:gap-8 max-w-screen-2xl mx-auto"
+        class="absolute top-16 bottom-0 left-0 right-0 xl:left-74 overflow-y-auto xl:grid xl:grid-cols-7 xl:gap-8 mx-auto"
         style={{ scrollbarGutter: "stable" }}
       >
         <main
diff --git a/_includes/layout.tsx b/_includes/layout.tsx
index 9c6d5ec4..9ef5a17e 100644
--- a/_includes/layout.tsx
+++ b/_includes/layout.tsx
@@ -8,7 +8,7 @@ export default function Layout(props: Lume.Data) {
   return (
     <html
       lang="en"
-      class={`light ${reference ? "" : "h-dvh overflow-hidden"}`}
+      class={`light ${reference ? "" : "h-dvh"}`}
     >
       <head>
         <meta charset="utf-8" />
@@ -91,7 +91,7 @@ export default function Layout(props: Lume.Data) {
       </head>
       <body
         class={`bg-background-primary text-foreground-primary ${
-          reference ? "" : "h-dvh overflow-hidden"
+          reference ? "" : "h-dvh"
         }`}
       >
         <a
diff --git a/_includes/raw.tsx b/_includes/raw.tsx
index 77b709df..deb2d588 100644
--- a/_includes/raw.tsx
+++ b/_includes/raw.tsx
@@ -3,14 +3,6 @@ export const layout = "layout.tsx";
 export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
   const reference = props.url.startsWith("/api");
 
-  if (reference) {
-    return (
-      <div>
-        {props.children}
-      </div>
-    );
-  }
-
   return (
     <>
       {props.sidebar && (
@@ -20,7 +12,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
             id="sidebar"
             data-open="false"
           >
-            <div class="p-4 shadow-sm flex justify-between h-16">
+            <div class="p-4 flex justify-between h-16">
               <a class="flex items-center gap-3 mr-6" href="/">
                 <img
                   src="/img/logo.svg"
@@ -55,20 +47,12 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
               url={props.url}
             />
           </aside>
-          <div
-            class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
-            id="sidebar-cover"
-            data-open="false"
-          >
-          </div>
         </>
       )}
-      <div
-        class="absolute top-16 bottom-0 left-0 right-0 overflow-y-auto"
-        style={{ scrollbarGutter: "stable" }}
-      >
+      <div style={{ scrollbarGutter: "stable" }}>
         {props.children}
-        <props.comp.Footer />
+        {reference && <props.comp.ToTop />}
+        {!reference && <props.comp.Footer />}
       </div>
     </>
   );
diff --git a/deno.json b/deno.json
index 92da6713..dd1f5d4d 100644
--- a/deno.json
+++ b/deno.json
@@ -13,8 +13,10 @@
     "tailwindcss": "npm:tailwindcss@^3.4.9"
   },
   "tasks": {
-    "build": "deno run -A lume.ts",
     "serve": "deno run -A lume.ts -s",
+    "start": "deno task serve",
+    "dev": "deno task serve",
+    "build": "deno run -A lume.ts",
     "debug": "deno task build && deno task prod",
     "prod": "cd _site && deno run --allow-read --allow-env --allow-net server.ts",
     "reference": "cd reference_gen && deno task types && deno task doc",
diff --git a/examples/index.tsx b/examples/index.tsx
index 3522a95d..8ce3e811 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,30 +1,5 @@
 export const layout = "raw.tsx";
-export const sidebar = [
-  {
-    items: [
-      {
-        label: "Runtime",
-        id: "/runtime/",
-      },
-      {
-        label: "API Reference",
-        id: "/api/deno/",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/",
-      },
-    ],
-  },
-];
+export const sidebar = [];
 
 export const toc = [];
 
diff --git a/index.page.tsx b/index.page.tsx
index a9f7f965..2cc442df 100644
--- a/index.page.tsx
+++ b/index.page.tsx
@@ -4,26 +4,6 @@ export const url = "/";
 export const sidebar = [
   {
     items: [
-      {
-        label: "Runtime Manual",
-        id: "/runtime/",
-      },
-      {
-        label: "API reference",
-        id: "/api/deno",
-      },
-      {
-        label: "Examples",
-        id: "/examples/",
-      },
-      {
-        label: "Deploy",
-        id: "/deploy/manual/",
-      },
-      {
-        label: "Subhosting",
-        id: "/subhosting/manual/",
-      },
       {
         label: "deno.com",
         id: "https://deno.com",
diff --git a/overrides.css b/overrides.css
index 3b3d539f..9ffb99cf 100644
--- a/overrides.css
+++ b/overrides.css
@@ -1,4 +1,4 @@
-/* This file exists to provide CSS overrides to styles that exist on the pages 
+/* This file exists to provide CSS overrides to styles that exist on the pages
 that are generated by deno_doc, the tool that powers the API reference documentation */
 
 #content > main > section + div {
@@ -63,8 +63,8 @@ that are generated by deno_doc, the tool that powers the API reference documenta
   @apply ml-1 !important;
 }
 
-.doc .toc :not(.documentNavigation) > a {
-  @apply text-xl !important;
+.ddoc .z-50 {
+  z-index: 49 !important;
 }
 
 .ddoc .usageContent {
@@ -115,3 +115,33 @@ that are generated by deno_doc, the tool that powers the API reference documenta
 .ddoc .space-y-7 > .section .markdown-body {
   @apply mb-6 !important;
 }
+
+.totop {
+  @apply block fixed p-3 bg-background-secondary rounded-md border
+    border-background-tertiary bottom-4 right-4 text-transparent;
+  animation-name: showToTop;
+  animation-duration: 1ms;
+  animation-timeline: --showScrollTop;
+}
+
+.totop::after {
+  @apply block w-4 h-4 border-2 border-primary border-l-0 border-t-0;
+  content: "";
+  transform: translate(0, 25%) rotate(225deg);
+}
+
+html {
+  scroll-timeline: --showScrollTop y;
+  scroll-timeline: --showScrollTop vertical;
+}
+
+@keyframes showToTop {
+  0% {
+    opacity: 0;
+    transform: translateY(300%);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
diff --git a/reference.page.jsx b/reference.page.jsx
index af39ee10..f707ecf6 100644
--- a/reference.page.jsx
+++ b/reference.page.jsx
@@ -4,6 +4,25 @@ import entityList from "@std/html/named-entity-list.json" with { type: "json" };
 
 export const layout = "raw.tsx";
 
+export const sidebar = [
+  {
+    items: [
+      {
+        label: "Deno APIs",
+        id: "/api/deno/",
+      },
+      {
+        label: "Web APIs",
+        id: "/api/web/",
+      },
+      {
+        label: "Node APIs",
+        id: "/api/node/",
+      },
+    ],
+  },
+];
+
 const resetRegexp =
   /<link id="ddocResetStylesheet" rel="stylesheet" href=".*?reset\.css">\s*/;
 const titleRegexp = /<title>(.+?)<\/title>\s*/s;
diff --git a/sidebar.client.ts b/sidebar.client.ts
index 1eb4984e..2f142322 100644
--- a/sidebar.client.ts
+++ b/sidebar.client.ts
@@ -18,6 +18,8 @@ for (const el of document.querySelectorAll("[data-accordion-trigger]")) {
 }
 
 const sidebar = document.getElementById("sidebar");
+console.log(sidebar);
+
 if (sidebar) {
   const sidebarNav = sidebar.querySelector("nav")!;
   const sidebarOpen = document.getElementById("sidebar-open");
diff --git a/styles.css b/styles.css
index 47d07620..d9894718 100644
--- a/styles.css
+++ b/styles.css
@@ -4,10 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --max-text-width: 65ch;
-}
-
 /* Light and dark theme variables */
 .light {
   --background-primary: 215deg, 81%, 100%;
@@ -53,6 +49,10 @@
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Scrollbar colors that look good on light and dark theme */
 * {
   scrollbar-color: hsla(0deg, 0%, 50%, 0.5) hsla(0deg, 0%, 50%, 0.1) !important;