diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb
index cefc25c08..6e69b23c1 100644
--- a/app/controllers/docs_controller.rb
+++ b/app/controllers/docs_controller.rb
@@ -1,6 +1,8 @@
 class DocsController < InertiaController
   layout "inertia"
 
+  inertia_share docs_nav: -> { docs_nav_props }
+
   POPULAR_EDITORS = [
     [ "VS Code", "vs-code" ], [ "PyCharm", "pycharm" ], [ "IntelliJ IDEA", "intellij-idea" ],
     [ "Sublime Text", "sublime-text" ], [ "Vim", "vim" ], [ "Neovim", "neovim" ],
@@ -104,6 +106,36 @@ def show
 
   private
 
+  def docs_nav_props
+    current_path = request.path
+    {
+      current_path: current_path,
+      home_url: docs_path,
+      api_docs_url: "/api-docs",
+      github_url: "https://github.com/hackclub/hackatime",
+      slack_url: "https://hackclub.slack.com/archives/C07MQ845X1F",
+      sections: [
+        {
+          title: "Getting Started",
+          links: [
+            { label: "Quick Start",   href: doc_path("getting-started/quick-start") },
+            { label: "Installation",  href: doc_path("getting-started/installation") },
+            { label: "Configuration", href: doc_path("getting-started/configuration") }
+          ]
+        },
+        {
+          title: "Developers",
+          links: [
+            { label: "API Docs", href: "/api-docs/" },
+            { label: "OAuth Apps", href: doc_path("oauth/oauth-apps") }
+          ]
+        }
+      ],
+      popular_editors: POPULAR_EDITORS,
+      all_editors: ALL_EDITORS
+    }
+  end
+
   def sanitize_path(path)
     # Remove any directory traversal attempts and normalize path
     return "index" if path.blank?
diff --git a/app/controllers/extensions_controller.rb b/app/controllers/extensions_controller.rb
deleted file mode 100644
index a17528106..000000000
--- a/app/controllers/extensions_controller.rb
+++ /dev/null
@@ -1,7 +0,0 @@
-class ExtensionsController < InertiaController
-  layout "inertia"
-
-  def index
-    render inertia: "Extensions/Index"
-  end
-end
diff --git a/app/controllers/inertia_controller.rb b/app/controllers/inertia_controller.rb
index 1a5f2a6fd..aa889a779 100644
--- a/app/controllers/inertia_controller.rb
+++ b/app/controllers/inertia_controller.rb
@@ -71,13 +71,13 @@ def inertia_primary_links
     if current_user
       links << inertia_link("Projects", my_projects_path, active: request.path.start_with?("/my/projects"), inertia: true)
       links << inertia_link("Docs", docs_path, active: helpers.current_page?(docs_path) || request.path.start_with?("/docs"), inertia: true)
-      links << inertia_link("Extensions", extensions_path, active: helpers.current_page?(extensions_path), inertia: true)
+      links << inertia_link("Setup", my_wakatime_setup_path, active: helpers.current_page?(my_wakatime_setup_path), inertia: true)
       links << inertia_link("Settings", my_settings_path, active: request.path.start_with?("/my/settings"), inertia: true)
       links << inertia_link("My OAuth Apps", oauth_applications_path, active: helpers.current_page?(oauth_applications_path) || request.path.start_with?("/oauth/applications"), inertia: true)
       links << { label: "Logout", action: "logout" }
     else
       links << inertia_link("Docs", docs_path, active: helpers.current_page?(docs_path) || request.path.start_with?("/docs"), inertia: true)
-      links << inertia_link("Extensions", extensions_path, active: helpers.current_page?(extensions_path), inertia: true)
+      links << inertia_link("Setup", my_wakatime_setup_path, active: helpers.current_page?(my_wakatime_setup_path), inertia: true)
     end
 
     links
diff --git a/app/helpers/extensions_helper.rb b/app/helpers/extensions_helper.rb
deleted file mode 100644
index 383b12c96..000000000
--- a/app/helpers/extensions_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module ExtensionsHelper
-end
diff --git a/app/javascript/layouts/AppLayout.svelte b/app/javascript/layouts/AppLayout.svelte
index 4a8dc081e..e1b1d7bcb 100644
--- a/app/javascript/layouts/AppLayout.svelte
+++ b/app/javascript/layouts/AppLayout.svelte
@@ -153,8 +153,7 @@
   const navLinkWithToolClass = (link: NavLink, toolClass = "") =>
     `${navLinkClass(link.active)}${toolClass ? ` ${toolClass}` : ""}`;
 
-  const isLongCachedLink = (link: NavLink) =>
-    link.label === "Docs" || link.label === "Extensions";
+  const isLongCachedLink = (link: NavLink) => link.label === "Docs";
 
   const linkCacheFor = (link: NavLink): string | [string, string] =>
     isLongCachedLink(link) ? "10m" : ["0s", "30s"];
diff --git a/app/javascript/layouts/DocsLayout.svelte b/app/javascript/layouts/DocsLayout.svelte
new file mode 100644
index 000000000..f393ae939
--- /dev/null
+++ b/app/javascript/layouts/DocsLayout.svelte
@@ -0,0 +1,311 @@
+<script lang="ts">
+  import { Link } from "@inertiajs/svelte";
+  import Button from "../components/Button.svelte";
+  import type { Snippet } from "svelte";
+  import { onMount, onDestroy } from "svelte";
+
+  type DocsNavLink = { label: string; href: string };
+  type DocsNavSection = { title: string; links: DocsNavLink[] };
+  type DocsNav = {
+    current_path: string;
+    home_url: string;
+    api_docs_url: string;
+    github_url: string;
+    slack_url: string;
+    sections: DocsNavSection[];
+    popular_editors: [string, string][];
+    all_editors: [string, string][];
+  };
+
+  let { docs_nav, children }: { docs_nav: DocsNav; children?: Snippet } =
+    $props();
+
+  const isBrowser =
+    typeof window !== "undefined" && typeof document !== "undefined";
+
+  let navOpen = $state(false);
+
+  const toggleNav = () => (navOpen = !navOpen);
+  const closeNav = () => (navOpen = false);
+
+  const isActive = (href: string) => {
+    if (!href) return false;
+    const currentPath = docs_nav.current_path || "/docs";
+    if (href === docs_nav.home_url) {
+      return currentPath === docs_nav.home_url || currentPath === "/docs";
+    }
+    return currentPath === href || currentPath.startsWith(`${href}/`);
+  };
+
+  const handleNavLinkClick = () => {
+    if (isBrowser && window.innerWidth <= 1024) closeNav();
+  };
+
+  const handleResize = () => {
+    if (isBrowser && window.innerWidth > 1024) closeNav();
+  };
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") closeNav();
+  };
+
+  $effect(() => {
+    if (isBrowser) document.body.classList.toggle("overflow-hidden", navOpen);
+  });
+
+  onMount(() => {
+    if (!isBrowser) return;
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    document.addEventListener("keydown", handleKeydown);
+  });
+
+  onDestroy(() => {
+    if (isBrowser) {
+      window.removeEventListener("resize", handleResize);
+      document.removeEventListener("keydown", handleKeydown);
+    }
+  });
+
+  const inactiveNavClass =
+    "text-surface-content hover:bg-darkless hover:text-primary";
+  const activeNavClass = "bg-darkless text-primary";
+  const navItemClass = "rounded-md px-3 py-2 text-sm transition-colors";
+  const inlineNavItemClass = `flex items-center gap-2 ${navItemClass}`;
+  const splitNavItemClass = `flex items-center justify-between ${navItemClass}`;
+
+  const navLinkClass = (active?: boolean) =>
+    `block ${navItemClass} ${active ? activeNavClass : inactiveNavClass}`;
+
+  const inlineNavLinkClass = (active?: boolean) =>
+    `${inlineNavItemClass} ${active ? activeNavClass : inactiveNavClass}`;
+
+  const sectionTitleClass =
+    "px-3 pt-3 pb-1 text-[0.6875rem] font-semibold uppercase tracking-wider text-secondary/80";
+
+  const resourceLinkClass = `${splitNavItemClass} ${inactiveNavClass}`;
+
+  const secondaryNavLinkClass = `block ${navItemClass} text-secondary hover:bg-darkless hover:text-primary`;
+
+  const externalIconClass = "size-3 text-muted";
+</script>
+
+<Button
+  type="button"
+  unstyled
+  class="mobile-nav-button"
+  aria-label="Toggle docs navigation"
+  aria-expanded={navOpen}
+  onclick={toggleNav}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M4 6h16M4 12h16M4 18h16"
+    />
+  </svg>
+</Button>
+
+<Button
+  type="button"
+  unstyled
+  class={`nav-overlay ${navOpen ? "open" : ""}`}
+  onclick={closeNav}
+  aria-label="Close docs navigation"
+></Button>
+
+<aside
+  class={`fixed inset-y-0 left-0 z-1000 flex min-h-dvh w-60 flex-col overflow-y-auto border-r border-r-darkless bg-dark px-3 py-4 text-surface-content transition-transform duration-300 ease-in-out [scrollbar-width:none] [-ms-overflow-style:none] lg:block ${
+    navOpen
+      ? "translate-x-0 shadow-[2px_0_20px_rgba(0,0,0,0.3)]"
+      : "max-lg:-translate-x-full"
+  }`}
+>
+  <!-- Branding / header -->
+  <div class="px-3 pb-3 mb-2 border-b border-darkless">
+    <Link
+      href={docs_nav.home_url}
+      onclick={handleNavLinkClick}
+      class="group flex items-center gap-2"
+    >
+      <div class="flex flex-col">
+        <div class="text-sm font-bold text-surface-content">Hackatime</div>
+        <div class="text-[0.6875rem] uppercase tracking-wider text-secondary">
+          Documentation
+        </div>
+      </div>
+    </Link>
+  </div>
+
+  <nav class="space-y-1">
+    <!-- Overview -->
+    <Link
+      href={docs_nav.home_url}
+      prefetch
+      cacheFor="10m"
+      onclick={handleNavLinkClick}
+      class={navLinkClass(isActive(docs_nav.home_url))}
+    >
+      Overview
+    </Link>
+
+    <!-- Sections -->
+    {#each docs_nav.sections as section}
+      <div class={sectionTitleClass}>{section.title}</div>
+      {#each section.links as link}
+        <Link
+          href={link.href}
+          prefetch
+          cacheFor="10m"
+          onclick={handleNavLinkClick}
+          class={navLinkClass(isActive(link.href))}
+        >
+          {link.label}
+        </Link>
+      {/each}
+    {/each}
+
+    <!-- Editors -->
+    <div class={sectionTitleClass}>Editors</div>
+    {#each docs_nav.popular_editors.slice(0, 8) as [name, slug]}
+      {@const active = isActive(`/docs/editors/${slug}`)}
+      <Link
+        href={`/docs/editors/${slug}`}
+        prefetch
+        cacheFor="10m"
+        onclick={handleNavLinkClick}
+        class={inlineNavLinkClass(active)}
+      >
+        <img
+          src={`/images/editor-icons/${slug}-128.png`}
+          alt=""
+          class="size-4 shrink-0"
+          loading="lazy"
+        />
+        <span class="truncate">{name}</span>
+      </Link>
+    {/each}
+    <Link
+      href={docs_nav.home_url}
+      onclick={handleNavLinkClick}
+      class={secondaryNavLinkClass}
+    >
+      All {docs_nav.all_editors.length} editors →
+    </Link>
+
+    <!-- Resources -->
+    <div class={sectionTitleClass}>Resources</div>
+    <a
+      href={docs_nav.api_docs_url}
+      onclick={handleNavLinkClick}
+      class={resourceLinkClass}
+    >
+      API Reference
+      <svg
+        class={externalIconClass}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M14 5l7 7m0 0l-7 7m7-7H3"
+        />
+      </svg>
+    </a>
+    <a
+      href={docs_nav.github_url}
+      target="_blank"
+      rel="noopener"
+      onclick={handleNavLinkClick}
+      class={resourceLinkClass}
+    >
+      GitHub
+      <svg
+        class={externalIconClass}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        />
+      </svg>
+    </a>
+    <a
+      href={docs_nav.slack_url}
+      target="_blank"
+      rel="noopener"
+      onclick={handleNavLinkClick}
+      class={resourceLinkClass}
+    >
+      #hackatime-help
+      <svg
+        class={externalIconClass}
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        />
+      </svg>
+    </a>
+
+    <!-- Back to app -->
+    <div class="pt-3 mt-3 border-t border-darkless">
+      <a
+        href="/"
+        onclick={handleNavLinkClick}
+        class={`${inlineNavItemClass} text-secondary hover:bg-darkless hover:text-primary`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="size-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 19l-7-7m0 0l7-7m-7 7h18"
+          />
+        </svg>
+        Back to Hackatime
+      </a>
+    </div>
+  </nav>
+</aside>
+
+<main class="min-h-dvh flex-1 transition-all duration-300 ease-in-out lg:ml-72">
+  <div class="mx-auto w-full max-w-5xl p-4 pt-16 md:p-8 lg:pt-8">
+    {@render children?.()}
+  </div>
+</main>
+
+<style>
+  :global(#app) {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 100vh;
+    width: 100%;
+  }
+</style>
diff --git a/app/javascript/pages/Docs/Index.svelte b/app/javascript/pages/Docs/Index.svelte
index 98ea3b0d8..3dc6b625b 100644
--- a/app/javascript/pages/Docs/Index.svelte
+++ b/app/javascript/pages/Docs/Index.svelte
@@ -1,3 +1,8 @@
+<script module lang="ts">
+  import DocsLayout from "../../layouts/DocsLayout.svelte";
+  export const layout = DocsLayout;
+</script>
+
 <script lang="ts">
   import { Link } from "@inertiajs/svelte";
 
@@ -8,6 +13,13 @@
     popular_editors: [string, string][];
     all_editors: [string, string][];
   } = $props();
+
+  const quickLinkClass =
+    "group flex items-start gap-3 rounded-lg border border-surface-200 bg-surface p-4 transition-colors hover:border-primary";
+  const editorCardClass =
+    "flex flex-col items-center rounded-lg border border-surface-200 bg-surface p-3 transition-colors hover:border-primary";
+  const compactEditorCardClass =
+    "flex flex-col items-center rounded p-2 transition-colors hover:bg-surface-200";
 </script>
 
 <svelte:head>
@@ -18,170 +30,133 @@
   />
 </svelte:head>
 
-<div class="max-w-4xl mx-auto">
-  <div class="mb-8">
-    <h1 class="text-3xl font-bold text-surface-content mb-2">Documentation</h1>
-    <p class="text-muted">
-      Free, open-source time tracking for Hack Club. Like WakaTime, but free.
-    </p>
-  </div>
+<!-- Hero -->
+<header class="mb-10">
+  <h1 class="text-3xl font-bold text-surface-content mb-3">Docs</h1>
+  <p class="text-lg text-muted max-w-2xl">
+    Learn how to use Hackatime, the open-source time tracking tool from Hack
+    Club.
+  </p>
+</header>
 
-  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-    <Link
-      href="/my/wakatime_setup"
-      class="flex flex-col items-center justify-center p-6 bg-surface border border-surface-200 rounded-lg hover:border-primary transition-colors"
-    >
-      <svg
-        class="w-6 h-6 mb-2 text-primary"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
-          clip-rule="evenodd"
-        />
-      </svg>
+<!-- Quick path cards -->
+<section class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-12">
+  <Link href="/my/wakatime_setup" class={quickLinkClass}>
+    <div>
       <h3 class="font-semibold text-surface-content">Quick Start</h3>
-      <p class="text-sm text-muted text-center mt-1">
-        Set up in under a minute
+      <p class="text-sm text-muted mt-0.5">
+        Personalised setup for your editor in under a minute.
       </p>
-    </Link>
+    </div>
+  </Link>
 
-    <Link
-      href="/docs/getting-started/installation"
-      class="flex flex-col items-center justify-center p-6 bg-surface border border-surface-200 rounded-lg hover:border-primary transition-colors"
-    >
-      <svg
-        class="w-6 h-6 mb-2 text-primary"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M2.25 5.25a3 3 0 013-3h13.5a3 3 0 013 3V15a3 3 0 01-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622H7.071l.621-.622A2.25 2.25 0 008.25 18.257V18h-3a3 3 0 01-3-3V5.25zm1.5 0v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5z"
-          clip-rule="evenodd"
-        />
-      </svg>
+  <Link href="/docs/getting-started/installation" class={quickLinkClass}>
+    <div>
       <h3 class="font-semibold text-surface-content">Installation</h3>
-      <p class="text-sm text-muted text-center mt-1">Add to your editor</p>
-    </Link>
+      <p class="text-sm text-muted mt-0.5">
+        Step-by-step instructions for every supported editor.
+      </p>
+    </div>
+  </Link>
 
-    <a
-      href="/api-docs"
-      class="flex flex-col items-center justify-center p-6 bg-surface border border-surface-200 rounded-lg hover:border-primary transition-colors"
-    >
-      <svg
-        class="w-6 h-6 mb-2 text-primary"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M14.447 3.027a.75.75 0 01.527.92l-4.5 16.5a.75.75 0 01-1.448-.394l4.5-16.5a.75.75 0 01.921-.526zM16.72 6.22a.75.75 0 011.06 0l5.25 5.25a.75.75 0 010 1.06l-5.25 5.25a.75.75 0 11-1.06-1.06L21.44 12l-4.72-4.72a.75.75 0 010-1.06zm-9.44 0a.75.75 0 010 1.06L2.56 12l4.72 4.72a.75.75 0 11-1.06 1.06L.97 12.53a.75.75 0 010-1.06l5.25-5.25a.75.75 0 011.06 0z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <h3 class="font-semibold text-surface-content">API Docs</h3>
-      <p class="text-sm text-muted text-center mt-1">Interactive reference</p>
-    </a>
+  <a href="/api-docs" class={quickLinkClass}>
+    <div>
+      <h3 class="font-semibold text-surface-content">API Reference</h3>
+      <p class="text-sm text-muted mt-0.5">
+        Interactive Swagger reference for the public API.
+      </p>
+    </div>
+  </a>
 
-    <Link
-      href="/docs/oauth/oauth-apps"
-      class="flex flex-col items-center justify-center p-6 bg-surface border border-surface-200 rounded-lg hover:border-primary transition-colors"
-    >
-      <svg
-        class="w-6 h-6 mb-2 text-primary"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M15.75 1.5a6.75 6.75 0 00-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 00-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 00.75-.75v-1.5h1.5A.75.75 0 009 19.5V18h1.5a.75.75 0 00.53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1015.75 1.5zm0 3a.75.75 0 000 1.5A2.25 2.25 0 0118 8.25a.75.75 0 001.5 0 3.75 3.75 0 00-3.75-3.75z"
-          clip-rule="evenodd"
-        />
-      </svg>
+  <Link href="/docs/oauth/oauth-apps" class={quickLinkClass}>
+    <div>
       <h3 class="font-semibold text-surface-content">OAuth Apps</h3>
-      <p class="text-sm text-muted text-center mt-1">Build integrations</p>
-    </Link>
-  </div>
+      <p class="text-sm text-muted mt-0.5">
+        Build integrations on top of Hackatime's OAuth provider.
+      </p>
+    </div>
+  </Link>
+</section>
 
-  <h2 class="text-xl font-semibold text-surface-content mb-4">
-    Popular Editors
-  </h2>
-  <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3 mb-8">
+<!-- Popular editors -->
+<section class="mb-10">
+  <div class="flex items-baseline justify-between mb-4">
+    <h2 class="text-xl font-semibold text-surface-content">Popular editors</h2>
+    <div class="text-sm text-muted tabular-nums">
+      {popular_editors.length} of {all_editors.length}
+    </div>
+  </div>
+  <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
     {#each popular_editors as [name, slug]}
-      <Link
-        href={`/docs/editors/${slug}`}
-        class="flex flex-col items-center p-3 bg-surface border border-surface-200 rounded-lg hover:border-primary transition-colors"
-      >
+      <Link href={`/docs/editors/${slug}`} class={editorCardClass}>
         <img
           src={`/images/editor-icons/${slug}-128.png`}
           alt={name}
-          class="w-10 h-10 mb-2"
+          class="mb-2 size-10"
+          loading="lazy"
         />
-        <span class="text-sm text-surface-content">{name}</span>
+        <div class="text-center text-sm text-surface-content">{name}</div>
       </Link>
     {/each}
   </div>
+</section>
 
-  <details class="group">
-    <summary
-      class="flex items-center justify-between p-4 bg-surface border border-surface-200 rounded-lg cursor-pointer hover:border-surface-300 transition-colors select-none"
+<!-- All editors -->
+<details class="group mb-10">
+  <summary
+    class="flex items-center justify-between p-4 bg-surface border border-surface-200 rounded-lg cursor-pointer hover:border-surface-300 transition-colors select-none"
+  >
+    <div class="font-medium text-surface-content tabular-nums">
+      Browse all {all_editors.length} supported editors
+    </div>
+    <svg
+      class="size-5 text-muted transition-transform group-open:rotate-180"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
     >
-      <span class="font-medium text-surface-content"
-        >All {all_editors.length} supported editors</span
-      >
-      <svg
-        class="w-5 h-5 text-muted group-open:rotate-180 transition-transform"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M19 9l-7 7-7-7"
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M19 9l-7 7-7-7"
+      />
+    </svg>
+  </summary>
+  <div
+    class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2 mt-3 p-4 bg-surface border border-surface-200 rounded-lg select-none"
+  >
+    {#each all_editors as [name, slug]}
+      <Link href={`/docs/editors/${slug}`} class={compactEditorCardClass}>
+        <img
+          src={`/images/editor-icons/${slug}-128.png`}
+          alt={name}
+          class="mb-1 size-8"
+          loading="lazy"
         />
-      </svg>
-    </summary>
-    <div
-      class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2 mt-3 p-4 bg-surface border border-surface-200 rounded-lg select-none"
-    >
-      {#each all_editors as [name, slug]}
-        <Link
-          href={`/docs/editors/${slug}`}
-          class="flex flex-col items-center p-2 rounded hover:bg-surface-200 transition-colors"
-        >
-          <img
-            src={`/images/editor-icons/${slug}-128.png`}
-            alt={name}
-            class="w-8 h-8 mb-1"
-          />
-          <span class="text-xs text-surface-content text-center leading-tight"
-            >{name}</span
-          >
-        </Link>
-      {/each}
-    </div>
-  </details>
+        <div class="text-center text-xs text-surface-content">{name}</div>
+      </Link>
+    {/each}
+  </div>
+</details>
 
-  <div class="mt-8 p-4 bg-surface border border-surface-200 rounded-lg">
-    <p class="text-sm text-muted">
-      Need help? Ask in
-      <a
-        href="https://hackclub.slack.com/archives/C07MQ845X1F"
-        target="_blank"
-        class="text-primary hover:underline">#hackatime-help</a
-      >
-      on Slack or
-      <a
-        href="https://github.com/hackclub/hackatime/issues"
-        target="_blank"
-        class="text-primary hover:underline">open an issue</a
-      >
-      on GitHub.
-    </p>
+<!-- Help footer -->
+<aside
+  class="flex flex-col gap-2 rounded-lg border border-surface-200 bg-surface p-4 sm:flex-row sm:items-center sm:justify-between"
+>
+  <p class="text-sm text-muted">Stuck? We're around to help.</p>
+  <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
+    <a
+      href="https://hackclub.slack.com/archives/C07MQ845X1F"
+      target="_blank"
+      rel="noopener"
+      class="text-primary hover:underline">#hackatime-help on Slack</a
+    >
+    <a
+      href="https://github.com/hackclub/hackatime/issues"
+      target="_blank"
+      rel="noopener"
+      class="text-primary hover:underline">Open a GitHub issue</a
+    >
   </div>
-</div>
+</aside>
diff --git a/app/javascript/pages/Docs/Show.svelte b/app/javascript/pages/Docs/Show.svelte
index 8db2e959e..76f8d4b1b 100644
--- a/app/javascript/pages/Docs/Show.svelte
+++ b/app/javascript/pages/Docs/Show.svelte
@@ -1,21 +1,57 @@
+<script module lang="ts">
+  import DocsLayout from "../../layouts/DocsLayout.svelte";
+  export const layout = DocsLayout;
+</script>
+
 <script lang="ts">
   import { Link } from "@inertiajs/svelte";
 
   let {
-    doc_path,
     title,
     rendered_content,
     breadcrumbs,
     edit_url,
     meta,
   }: {
-    doc_path: string;
     title: string;
     rendered_content: string;
     breadcrumbs: { name: string; href: string | null; is_link: boolean }[];
     edit_url: string;
     meta: { description: string; keywords: string };
   } = $props();
+
+  const articleClass = `prose prose-invert prose-base sm:prose-lg max-w-none
+    prose-headings:text-surface-content prose-headings:font-bold prose-headings:leading-tight
+    prose-h1:text-4xl prose-h1:mb-6 prose-h1:mt-0
+    prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:border-b prose-h2:border-b-darkless prose-h2:pb-2
+    prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3
+    prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-h4:font-semibold
+    prose-p:text-surface-content prose-p:leading-7 prose-p:mb-5
+    prose-a:text-primary prose-a:hover:text-red prose-a:underline prose-a:font-medium
+    prose-strong:text-surface-content prose-strong:font-semibold
+    prose-em:text-secondary prose-em:italic
+    prose-code:bg-darkless prose-code:text-primary prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-mono prose-code:break-words prose-code:before:content-none prose-code:after:content-none
+    prose-pre:bg-darkless prose-pre:border prose-pre:border-darkless prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
+    prose-pre:text-surface-content prose-pre:text-sm
+    prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-darkless prose-blockquote:pl-6 prose-blockquote:py-4 prose-blockquote:rounded-r-lg
+    prose-blockquote:text-secondary prose-blockquote:italic prose-blockquote:font-normal prose-blockquote:my-6
+    prose-ul:text-surface-content prose-ul:mb-4 prose-ul:pl-6
+    prose-ol:text-surface-content prose-ol:mb-4 prose-ol:pl-6
+    prose-li:text-surface-content prose-li:mb-2 prose-li:leading-7 prose-li:pl-2
+    prose-table:border-collapse prose-table:border prose-table:border-darkless prose-table:rounded-lg prose-table:overflow-hidden prose-table:my-6
+    prose-th:bg-darkless prose-th:text-primary prose-th:font-semibold prose-th:p-3 prose-th:border prose-th:border-darkless
+    prose-td:text-surface-content prose-td:p-3 prose-td:border prose-td:border-darkless
+    prose-img:rounded-lg prose-img:shadow-lg prose-img:mx-auto prose-img:block prose-img:max-w-24 prose-img:h-auto prose-img:my-4
+    prose-hr:border-darkless prose-hr:my-8
+    [&_ol>li::marker]:text-primary [&_ol>li::marker]:font-semibold
+    [&_ul>li::marker]:text-primary
+    [&_h2:not(:first-child)]:mt-10
+    [&_h3:not(:first-child)]:mt-8
+    [&_p]:break-words [&_li]:break-words
+    [&_img[src*='/images/editor-icons/']]:size-16 [&_img[src*='/images/editor-icons/']]:mx-auto [&_img[src*='/images/editor-icons/']]:block [&_img[src*='/images/editor-icons/']]:my-4
+    [&_.editor-steps]:bg-darkless [&_.editor-steps]:p-6 [&_.editor-steps]:rounded-lg [&_.editor-steps]:my-4
+    [&_.editor-steps_ol]:m-0
+    [&_.editor-steps_li]:mb-2`;
 </script>
 
 <svelte:head>
@@ -27,92 +63,52 @@
   <meta property="og:type" content="article" />
 </svelte:head>
 
-<div class="min-h-screen text-surface-content">
-  <div class="w-full max-w-5xl mx-auto px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
-    <!-- Breadcrumbs -->
-    <nav class="mb-8">
-      {#each breadcrumbs as crumb, index}
-        {#if index === breadcrumbs.length - 1}
-          <span class="text-primary">{crumb.name}</span>
-        {:else}
-          {#if crumb.is_link && crumb.href}
-            <Link href={crumb.href} class="text-secondary hover:text-primary"
-              >{crumb.name}</Link
-            >
-          {:else}
-            <span class="text-secondary">{crumb.name}</span>
-          {/if}
-          <span class="text-secondary mx-2">/</span>
-        {/if}
-      {/each}
-    </nav>
+<!-- Breadcrumbs -->
+<nav class="mb-6 text-sm">
+  {#each breadcrumbs as crumb, index}
+    {#if index === breadcrumbs.length - 1}
+      <span class="font-medium text-primary">{crumb.name}</span>
+    {:else}
+      {#if crumb.is_link && crumb.href}
+        <Link
+          href={crumb.href}
+          class="text-secondary hover:text-primary transition-colors"
+          >{crumb.name}</Link
+        >
+      {:else}
+        <span class="text-secondary">{crumb.name}</span>
+      {/if}
+      <span class="mx-2 text-secondary/60">/</span>
+    {/if}
+  {/each}
+</nav>
 
-    <!-- Content -->
-    <div
-      class="bg-dark rounded-lg p-4 sm:p-6 lg:p-8 mb-8 prose prose-invert prose-base sm:prose-lg max-w-none
-             prose-headings:text-primary prose-headings:font-bold prose-headings:leading-tight
-             prose-h1:text-4xl prose-h1:mb-6 prose-h1:text-primary prose-h1:mt-0
-             prose-h2:text-2xl prose-h2:mt-10 prose-h2:mb-4 prose-h2:text-primary prose-h2:border-b prose-h2:border-b-[#6e6468] prose-h2:pb-2
-             prose-h3:text-xl prose-h3:mt-8 prose-h3:mb-3 prose-h3:text-primary
-             prose-h4:text-lg prose-h4:mt-4 prose-h4:mb-2 prose-h4:text-surface-content prose-h4:font-semibold
-             prose-p:text-surface-content prose-p:leading-7 prose-p:mb-5
-             prose-a:text-primary prose-a:hover:text-red prose-a:underline prose-a:font-medium
-             prose-strong:text-surface-content prose-strong:font-semibold
-             prose-em:text-secondary prose-em:italic
-             prose-code:bg-darkless prose-code:text-primary prose-code:px-2 prose-code:py-1 prose-code:rounded prose-code:text-sm prose-code:font-mono prose-code:break-words
-             prose-pre:bg-darkless prose-pre:border prose-pre:border-primary/20 prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto
-             prose-pre:text-surface-content prose-pre:text-sm
-             prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:bg-darkless prose-blockquote:pl-6 prose-blockquote:py-4 prose-blockquote:rounded-r-lg
-             prose-blockquote:text-secondary prose-blockquote:italic prose-blockquote:font-normal prose-blockquote:my-6
-             prose-ul:text-surface-content prose-ul:mb-4 prose-ul:pl-6
-             prose-ol:text-surface-content prose-ol:mb-4 prose-ol:pl-6
-             prose-li:text-surface-content prose-li:mb-3 prose-li:leading-7 prose-li:pl-2
-             prose-table:border-collapse prose-table:border prose-table:border-primary/20 prose-table:rounded-lg prose-table:overflow-hidden prose-table:my-6
-             prose-th:bg-darkless prose-th:text-primary prose-th:font-semibold prose-th:p-3 prose-th:border prose-th:border-primary/20
-             prose-td:text-surface-content prose-td:p-3 prose-td:border prose-td:border-primary/20
-             prose-img:rounded-lg prose-img:shadow-lg prose-img:mx-auto prose-img:block prose-img:max-w-24 prose-img:h-auto prose-img:my-4
-             prose-hr:border-primary/30 prose-hr:my-8
-             [&_ol>li::marker]:text-primary [&_ol>li::marker]:font-semibold
-             [&_ul>li::marker]:text-primary
-             [&_ol>li]:mb-3 [&_ol>li]:pl-2
-             [&_h2:not(:first-child)]:mt-10
-             [&_h3:not(:first-child)]:mt-8
-             [&_p_strong:first-child]:text-primary
-             [&_p]:break-words [&_li]:break-words
-             [&_pre[class*='language-json']]:bg-darkless [&_pre[class*='language-json']]:border [&_pre[class*='language-json']]:border-primary/10
-             [&_pre[class*='language-bash']]:bg-darkless [&_pre[class*='language-bash']]:border [&_pre[class*='language-bash']]:border-primary/10
-             [&_img[alt*='PyCharm']]:w-16 [&_img[alt*='PyCharm']]:h-16 [&_img[alt*='PyCharm']]:mx-auto [&_img[alt*='PyCharm']]:block [&_img[alt*='PyCharm']]:my-4
-             [&_img[alt*='VS_Code']]:w-16 [&_img[alt*='VS_Code']]:h-16 [&_img[alt*='VS_Code']]:mx-auto [&_img[alt*='VS_Code']]:block [&_img[alt*='VS_Code']]:my-4
-             [&_img[alt*='IntelliJ']]:w-16 [&_img[alt*='IntelliJ']]:h-16 [&_img[alt*='IntelliJ']]:mx-auto [&_img[alt*='IntelliJ']]:block [&_img[alt*='IntelliJ']]:my-4
-             [&_img[src*='/images/editor-icons/']]:w-16 [&_img[src*='/images/editor-icons/']]:h-16 [&_img[src*='/images/editor-icons/']]:mx-auto [&_img[src*='/images/editor-icons/']]:block [&_img[src*='/images/editor-icons/']]:my-4
-             [&_.editor-steps]:bg-darkless [&_.editor-steps]:p-6 [&_.editor-steps]:rounded-lg [&_.editor-steps]:my-4
-             [&_.editor-steps_ol]:m-0
-             [&_.editor-steps_li]:mb-2"
-    >
-      {@html rendered_content}
-    </div>
+<!-- Article content -->
+<article class={articleClass}>
+  {@html rendered_content}
+</article>
 
-    <!-- Edit on GitHub -->
-    <div
-      class="flex items-center justify-center gap-2 py-6 text-sm text-secondary/70"
+<!-- Footer: edit on GitHub -->
+<footer
+  class="mt-12 pt-6 border-t border-darkless flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 text-sm"
+>
+  <div class="text-muted">Found a typo or want to improve this page?</div>
+  <a
+    href={edit_url}
+    target="_blank"
+    rel="noopener"
+    class="inline-flex items-center gap-2 text-primary hover:text-red transition-colors font-medium"
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="size-4"
+      viewBox="0 0 16 16"
+      fill="currentColor"
     >
-      <span>Found an issue with this page?</span>
-      <a
-        href={edit_url}
-        target="_blank"
-        class="inline-flex items-center gap-1 text-primary hover:text-red transition-colors font-medium"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="w-4 h-4"
-          viewBox="0 0 16 16"
-          fill="currentColor"
-          ><path
-            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
-          /></svg
-        >
-        Edit on GitHub
-      </a>
-    </div>
-  </div>
-</div>
+      <path
+        d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+      />
+    </svg>
+    Edit on GitHub
+  </a>
+</footer>
diff --git a/app/javascript/pages/Extensions/Index.svelte b/app/javascript/pages/Extensions/Index.svelte
deleted file mode 100644
index 2350af619..000000000
--- a/app/javascript/pages/Extensions/Index.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts">
-  const EXTENSIONS = [
-    {
-      name: "Hackatime Desktop",
-      source: "https://github.com/hackclub/hackatime-desktop",
-      description:
-        "Desktop app for Hackatime. Runs on Mac, Windows, and Linux.",
-      install: "https://github.com/hackclub/hackatime-desktop/releases",
-    },
-    {
-      name: "Cattatime",
-      source: "https://github.com/joysudo/catatime/tree/master",
-      description:
-        "A Tamagotchi system. Code, fill your cup, and get your pet rewards.",
-      install: "https://github.com/joysudo/catatime/releases/",
-    },
-    {
-      name: "HackaStreak",
-      source: "https://github.com/hippogriff101/HackaStreak",
-      description: "Check a user's Hackatime streak in Slack.",
-      install: "https://hackclub.enterprise.slack.com/archives/C0AJLGZ73NE",
-      buttonLabel: "Try it out!",
-    },
-  ];
-</script>
-
-<svelte:head>
-  <title>Extensions - Hackatime</title>
-</svelte:head>
-
-<div class="max-w-4xl mx-auto">
-  <div class="mb-8">
-    <h1 class="text-3xl font-bold text-surface-content mb-2">Extensions</h1>
-    <p class="text-muted">
-      Third-party tools created by the community.
-      <span class="text-primary opacity-80 italic text-sm ml-1">
-        * Not guaranteed to work.
-      </span>
-    </p>
-  </div>
-
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-    {#each EXTENSIONS as extension}
-      <div
-        class="flex flex-col bg-surface border border-surface-200 rounded-lg p-5 hover:border-surface-300 transition-colors"
-      >
-        <div class="flex justify-between items-start mb-1">
-          <h2 class="text-xl font-bold text-surface-content">
-            {extension.name}
-          </h2>
-        </div>
-
-        <p class="text-muted text-sm leading-relaxed mb-6 flex-1">
-          {extension.description}
-        </p>
-
-        <div class="grid grid-cols-2 gap-3 mt-auto">
-          <a
-            href={extension.install}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center justify-center gap-2 px-4 py-2 rounded bg-primary text-on-primary font-medium text-sm hover:opacity-90 transition-opacity"
-          >
-            <span>{extension.buttonLabel ?? "Install"}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              ><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline
-                points="7 10 12 15 17 10"
-              /><line x1="12" x2="12" y1="15" y2="3" /></svg
-            >
-          </a>
-
-          <a
-            href={extension.source}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="flex items-center justify-center gap-2 px-4 py-2 rounded bg-surface-200 text-surface-content font-medium text-sm hover:bg-surface-300 transition-colors"
-          >
-            Source
-          </a>
-        </div>
-      </div>
-    {/each}
-  </div>
-</div>