diff --git a/packages/stacks-docs/src/components/Contents.svelte b/packages/stacks-docs/src/components/Contents.svelte
index 1356a52a35..df538e4372 100644
--- a/packages/stacks-docs/src/components/Contents.svelte
+++ b/packages/stacks-docs/src/components/Contents.svelte
@@ -1,174 +1,132 @@
 <script lang="ts">
-  import { SvelteMap } from 'svelte/reactivity';
-
-  let { toc = [] }: { toc: DocsTocItem[] } = $props();
-
-  let activeId = $state<string | null>(null);
-  let indicatorTop = $state(0);
-  let indicatorHeight = $state(0);
-  let navElement: HTMLElement | null = null;
-  let linkElements: Map<string, HTMLElement> = new SvelteMap();
-  // Flatten toc to get all items including children
-  function flattenToc(items: DocsTocItem[]): DocsTocItem[] {
-    const result: DocsTocItem[] = [];
-    for (const item of items) {
-      result.push(item);
-      if (item.children) {
-        result.push(...item.children);
-      }
-    }
-    return result;
-  }
-
-  const allItems = $derived(flattenToc(toc));
-
-  function updateIndicatorPosition(id: string) {
-    const linkElement = linkElements.get(id);
-    if (linkElement && navElement) {
-      const navRect = navElement.getBoundingClientRect();
-      const linkRect = linkElement.getBoundingClientRect();
-      indicatorTop = linkRect.top - navRect.top;
-      indicatorHeight = linkRect.height;
-
-      // Auto-scroll the sidebar to keep active item visible (desktop only)
-      const scrollableContainer = navElement.closest('.overflow-auto') as HTMLElement;
-      const isMobile = window.innerWidth < 768;
-
-      if (scrollableContainer && !isMobile) {
-        const containerRect = scrollableContainer.getBoundingClientRect();
-        const linkRelativeTop = linkRect.top - containerRect.top;
-        const linkRelativeBottom = linkRect.bottom - containerRect.top;
-
-        // Scroll if the link is outside the viewport
-        if (linkRelativeTop < 0) {
-          linkElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-            inline: 'nearest'
-          });
-        } else if (linkRelativeBottom > containerRect.height) {
-          linkElement.scrollIntoView({
-            behavior: 'smooth',
-            block: 'end',
-            inline: 'nearest'
-          });
-        }
-      }
+    import { Button, Icon } from "@stackoverflow/stacks-svelte";
+    import { IconList } from "@stackoverflow/stacks-icons";
+
+    import ContentsList from "./ContentsList.svelte";
+
+    let { toc = [] }: { toc: DocsTocItem[] } = $props();
+
+    let isMobileTocOpen = $state(false);
+    let activeId = $state<string | null>(null);
+
+    const activeOffset = 120;
+    const contentsNavId = "docs-contents";
+    const contentsHeadingId = `${contentsNavId}-heading`;
+    const mobileContentsNavId = "docs-contents-mobile";
+
+    function flattenToc(items: DocsTocItem[]): DocsTocItem[] {
+        return items.flatMap((item) => [
+            item,
+            ...flattenToc(item.children ?? []),
+        ]);
     }
-  }
-
-  // Single effect to handle everything
-  $effect(() => {
-    if (typeof window === 'undefined' || allItems.length === 0) return;
-
-    // The active item is the last heading that has scrolled past the
-    // top threshold — this is more accurate than IntersectionObserver
-    // which can fire too early when a heading enters the viewport.
-    const OFFSET = 120; // px from the top of the viewport
-
-    function updateActive() {
-      let found: string | null = null;
-
-      for (const item of allItems) {
-        const el = document.getElementById(item.id);
-        if (!el) continue;
-        if (el.getBoundingClientRect().top <= OFFSET) {
-          found = item.id;
-        } else {
-          break; // headings are in DOM order — stop once we pass the threshold
-        }
-      }
 
-      const next = found ?? (allItems.length > 0 ? allItems[0].id : null);
-      if (next && next !== activeId) {
-        activeId = next;
-        updateIndicatorPosition(next);
-      }
+    const allItems = $derived(flattenToc(toc));
+
+    function handleLinkClick(id: string) {
+        activeId = id;
     }
 
-    // Wait for DOM to be ready then attach scroll listener
-    const timeoutId = setTimeout(() => {
-      updateActive();
-      window.addEventListener('scroll', updateActive, { passive: true });
-    }, 50);
+    $effect(() => {
+        const items = allItems;
 
-    return () => {
-      clearTimeout(timeoutId);
-      window.removeEventListener('scroll', updateActive);
-    };
-  });
+        if (typeof window === "undefined" || items.length === 0) return;
 
-  function registerLink(element: HTMLElement, id: string) {
-    linkElements.set(id, element);
+        // The active item is the last heading that has scrolled past the
+        // top threshold — this is more accurate than IntersectionObserver
+        // which can fire too early when a heading enters the viewport.
+        let frameId: number | null = null;
 
-    function handleClick() {
-      activeId = id;
-      updateIndicatorPosition(id);
-    }
+        function updateActive() {
+            frameId = null;
+
+            let found: string | null = items[0]?.id ?? null;
+
+            for (const item of items) {
+                const el = document.getElementById(item.id);
+                if (!el) continue;
+                if (el.getBoundingClientRect().top <= activeOffset) {
+                    found = item.id;
+                } else {
+                    break; // headings are in DOM order — stop once we pass the threshold
+                }
+            }
 
-    element.addEventListener('click', handleClick);
+            if (found && found !== activeId) {
+                activeId = found;
+            }
+        }
+
+        function queueUpdate() {
+            if (frameId !== null) return;
+            frameId = window.requestAnimationFrame(updateActive);
+        }
 
-    return {
-      destroy() {
-        element.removeEventListener('click', handleClick);
-        linkElements.delete(id);
-      }
-    };
-  }
+        queueUpdate();
+        window.addEventListener("scroll", queueUpdate, { passive: true });
+        window.addEventListener("resize", queueUpdate);
+
+        return () => {
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            window.removeEventListener("scroll", queueUpdate);
+            window.removeEventListener("resize", queueUpdate);
+        };
+    });
 </script>
 
 {#if toc.length > 0}
-<aside class="layout-toc fl-shrink0 w30 wmn2 wmx3 md:d-none ff-stack-sans-headline">
-    <div class="ps-sticky t0 py24 mt6 px32 md:pb0 overflow-auto hmx-screen md:hmx-initial">
-      <nav bind:this={navElement} class="ps-relative">
-        <h2 class="fs-body2 fw-bold mb12 px6 fc-black-400">Contents</h2>
-
-        <div
-          class="contents-indicator ps-absolute l0 r0 z-base pe-none"
-          style="top: {indicatorTop}px; height: {indicatorHeight}px; opacity: {indicatorHeight > 0 ? 1 : 0};"
-        ></div>
-
-        <ul class="s-navigation s-navigation__vertical">
-          {#each toc as item, index (item.id)}
-            <li>
-              <a
-                href="#{item.id}"
-                use:registerLink={item.id}
-                class="s-navigation--item fs-caption bar0 ps-relative fw-bold fc-black ai-start"
-                class:is-active={activeId === item.id}
-              >
-                <span class="fl-shrink0 w24 d-flex ai-center fc-theme-primary">{(index + 1).toString().padStart(2, "0")}</span>
-                <span>{item.value}</span>
-              </a>
-              {#if item.children && item.children.length > 0}
-                <ul class="s-navigation s-navigation__vertical">
-                  {#each item.children as child (child.id)}
-                    <li>
-                      <a
-                        href="#{child.id}"
-                        use:registerLink={child.id}
-                        class="s-navigation--item fs-caption bar0 ps-relative"
-                        class:is-active={activeId === child.id}
-                      >
-                        {child.value}
-                      </a>
-                    </li>
-                  {/each}
-                </ul>
-              {/if}
-            </li>
-          {/each}
-        </ul>
-      </nav>
+    <aside
+        class="layout-toc fl-shrink0 w30 wmn2 wmx3 ff-stack-sans-headline md:d-none"
+    >
+        <div class="ps-sticky t0 mt6 py24 px32 overflow-auto hmx-screen">
+            <div id={contentsNavId} class="bg-white">
+                <ContentsList
+                    {toc}
+                    {activeId}
+                    headingId={contentsHeadingId}
+                    label="Contents"
+                    onSelect={handleLinkClick}
+                />
+            </div>
+        </div>
+    </aside>
+
+    <div
+        class="d-none md:d-flex fd-column-reverse g8 ps-fixed b16 r16 w100 wmn2 wmx3 ff-stack-sans-headline"
+    >
+        <Button
+            class="d-block ml-auto bar-md p8"
+            selected={isMobileTocOpen}
+            onclick={() => (isMobileTocOpen = !isMobileTocOpen)}
+            aria-controls={mobileContentsNavId}
+            aria-expanded={isMobileTocOpen}
+            aria-label="Table of contents"
+            title="Table of contents"
+        >
+            <Icon src={IconList} />
+        </Button>
+
+        {#if isMobileTocOpen}
+            <div
+                id={mobileContentsNavId}
+                class="contents-mobile-popover bg-white bar-md bs-md overflow-auto p12 w100"
+            >
+                <ContentsList
+                    {toc}
+                    {activeId}
+                    label="Contents"
+                    onSelect={handleLinkClick}
+                    showHeading={false}
+                />
+            </div>
+        {/if}
     </div>
-</aside>
 {/if}
 
 <style>
-  .contents-indicator {
-    background-color: var(--black-100);
-    /* background-color: rgba(255, 255, 255, 0.1); */
-    backdrop-filter: invert(1);
-    -webkit-backdrop-filter: invert(1);
-  }
+    .contents-mobile-popover {
+        max-height: calc(100vh - var(--su256));
+    }
 </style>
diff --git a/packages/stacks-docs/src/components/ContentsList.svelte b/packages/stacks-docs/src/components/ContentsList.svelte
new file mode 100644
index 0000000000..f78eb32d49
--- /dev/null
+++ b/packages/stacks-docs/src/components/ContentsList.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { Navigation, NavigationItem } from "@stackoverflow/stacks-svelte";
+
+    type Props = {
+        toc: DocsTocItem[];
+        activeId: string | null;
+        headingId?: string;
+        label?: string;
+        onSelect: (id: string) => void;
+        showHeading?: boolean;
+    };
+
+    let {
+        toc,
+        activeId,
+        headingId,
+        label = "Contents",
+        onSelect,
+        showHeading = true,
+    }: Props = $props();
+
+</script>
+
+{#if showHeading && headingId}
+    <h2 id={headingId} class="fs-body2 fw-bold mb12 px6 fc-black-400">
+        Contents
+    </h2>
+{/if}
+
+<Navigation {label} orientation="vertical" listClass="contents-list">
+    {#each toc as item (item.id)}
+        <NavigationItem
+            href="#{item.id}"
+            text={item.value}
+            selected={activeId === item.id}
+            onclick={() => onSelect(item.id)}
+            class={`contents-primary-item fs-caption bar0 fw-bold fc-black ai-start ${activeId === item.id ? "bg-black-100" : ""}`}
+        />
+
+        {#if item.children && item.children.length > 0}
+            <li>
+                <Navigation
+                    label={`${item.value} sections`}
+                    orientation="vertical"
+                >
+                    {#each item.children as child (child.id)}
+                        <NavigationItem
+                            href="#{child.id}"
+                            text={child.value}
+                            selected={activeId === child.id}
+                            onclick={() => onSelect(child.id)}
+                            class={`fs-caption bar0 ${activeId === child.id ? "bg-black-100" : ""}`}
+                        />
+                    {/each}
+                </Navigation>
+            </li>
+        {/if}
+    {/each}
+</Navigation>
+
+<style>
+    :global(.contents-list) {
+        counter-reset: contents-section;
+    }
+
+    :global(.contents-primary-item .s-navigation--item-text) {
+        flex-direction: row;
+    }
+
+    :global(.contents-primary-item .s-navigation--item-text::before) {
+        color: var(--theme-primary);
+        content: counter(contents-section, decimal-leading-zero);
+        counter-increment: contents-section;
+        flex-shrink: 0;
+        font-weight: var(--fw-bold);
+        height: auto;
+        margin-right: var(--su8);
+        visibility: visible;
+        width: var(--su24);
+    }
+</style>
diff --git a/packages/stacks-docs/src/routes/+layout.svelte b/packages/stacks-docs/src/routes/+layout.svelte
index b858168e72..a1a40c2c8a 100644
--- a/packages/stacks-docs/src/routes/+layout.svelte
+++ b/packages/stacks-docs/src/routes/+layout.svelte
@@ -67,7 +67,7 @@
 
 <div class="d-flex fd-column fl-grow1 wmn0">
 	{#if page.data.active?.image}
-		<div class="layout-hero mt24 w100 hmx6 bg-cover bg-bottom bg-no-repeat" style="background-image: url({page.data.active.image})"></div>
+		<div class="layout-hero mt24 sm:mt0 w100 hmx6 bg-cover bg-bottom bg-no-repeat" style="background-image: url({page.data.active.image})"></div>
 	{/if}
 
 	<div class="d-flex fl-grow1 bg-white sm:mt0" class:mt24={!page.data.active?.image}>