diff --git a/apps/marketing-astro/src/components/docs/mobileNavSidebar.astro b/apps/marketing-astro/src/components/docs/mobileNavSidebar.astro
new file mode 100644
index 00000000..0f320326
--- /dev/null
+++ b/apps/marketing-astro/src/components/docs/mobileNavSidebar.astro
@@ -0,0 +1,44 @@
+---
+import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
+---
+
+<div
+  data-state="closed"
+  id="docs-nav-menu-dialog"
+  class="fixed w-full inset-x-0 top-16 group data-[state='open']:bottom-0 z-40 bg-surface/90 backdrop-blur-sm mt-px"
+>
+  <button
+    id="docs-nav-menu-btn"
+    aria-expanded="false"
+    aria-controls="docs-nav-menu-dialog"
+    class="flex py-3.5 h-12 border-b group-data-[state='open']:border-none border-outline-variant px-6 items-center text-on-surface text-sm w-full"
+  >
+    <ChevronDownIcon
+      className="h-4 w-4 mr-2 group-data-[state=open]:rotate-180"
+    />
+    <span>Menu</span>
+  </button>
+
+  <div
+    class="max-w-full fixed hidden group-data-[state='open']:block lg:hidden w-full max-h-[calc(100vh-7rem)] overflow-y-auto overflow-x-hidden scrollbar-thin"
+  >
+    <div class="px-6 py-4">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<script>
+  const btn = document.getElementById("docs-nav-menu-btn")!;
+  const dialog = document.getElementById("docs-nav-menu-dialog")!;
+
+  btn.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    const newState =
+      dialog.getAttribute("data-state") === "open" ? "closed" : "open";
+    dialog.setAttribute("data-state", newState);
+
+    btn.setAttribute("aria-expanded", newState === "open" ? "true" : "false");
+  });
+</script>
diff --git a/apps/marketing-astro/src/components/docs/navSidebar.astro b/apps/marketing-astro/src/components/docs/navSidebar.astro
new file mode 100644
index 00000000..ec1b8d2b
--- /dev/null
+++ b/apps/marketing-astro/src/components/docs/navSidebar.astro
@@ -0,0 +1,51 @@
+---
+import { cx } from "class-variance-authority";
+
+interface Props {
+  sections: {
+    title: string;
+    links: {
+      title: string;
+      href: string;
+    }[];
+  }[];
+  path: string;
+  mobile?: boolean;
+}
+
+const { sections, path, mobile } = Astro.props;
+---
+
+<nav class="text-base md:text-sm -ml-0.5 pl-0.5">
+  <ul role="list" class={cx("space-y-9", mobile && "mb-20")}>
+    {
+      sections.map((section) => (
+        <li>
+          <h2 class="font-display capitalize font-medium text-on-surface">
+            {section.title}
+          </h2>
+          <ul
+            role="list"
+            class="mt-2 space-y-2 border-l-2 md:mt-4 md:space-y-4 border-outline-variant"
+          >
+            {section.links.map((link) => (
+              <li class="relative">
+                <a
+                  href={link.href}
+                  class={cx(
+                    "block w-full capitalize pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
+                    link.href === `/docs/${path}`
+                      ? "before:bg-tertiary font-semibold text-tertiary"
+                      : "before:hidden before:bg-on-surface-variant hover:text-on-surface hover:before:block text-on-surface-variant"
+                  )}
+                >
+                  {link.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </li>
+      ))
+    }
+  </ul>
+</nav>
diff --git a/apps/marketing-astro/src/pages/docs/[...path].astro b/apps/marketing-astro/src/pages/docs/[...path].astro
index f8eb320f..c2132852 100644
--- a/apps/marketing-astro/src/pages/docs/[...path].astro
+++ b/apps/marketing-astro/src/pages/docs/[...path].astro
@@ -13,6 +13,8 @@ import { PageNavigation } from "./nextPage";
 import { ArrowUpRightIcon } from "@heroicons/react/24/solid";
 import { cx } from "class-variance-authority";
 import "./docs.css";
+import NavSidebar from "../../components/docs/navSidebar.astro";
+import MobileNavSidebar from "../../components/docs/mobileNavSidebar.astro";
 
 export const prerender = true;
 
@@ -68,49 +70,18 @@ const sections = await getFiles();
       class="relative mx-auto flex w-full flex-auto justify-center sm:px-2 md:px-8"
     >
       <div class="md:hidden">
-        <!-- <DocsNavMobile sections={sections} /> -->
+        <!-- <DocsNavMobile sections={sections} client:load /> -->
+        <MobileNavSidebar>
+          <div id="docs-sidebar-nav">
+            <NavSidebar path={path} sections={sections} mobile />
+          </div>
+        </MobileNavSidebar>
       </div>
       <div class="hidden md:relative md:block md:flex-none">
         <div
-          class="sticky top-[4.5rem] border-r border-outline-variant md:w-56 lg:w-60"
+          class="sticky top-[4.5rem] border-r border-outline-variant md:w-56 lg:w-60 h-[calc(100vh-4.5rem)] overflow-y-auto overflow-x-hidden -ml-1 pl-1 scrollbar-thin py-16"
         >
-          <!-- DESKTOP NAVIGATION -->
-          <nav
-            class="text-base md:text-sm h-[calc(100vh-4.5rem)] overflow-x-hidden -ml-0.5 py-16 pl-0.5 scrollbar-thin"
-            id="docs-sidebar-nav"
-          >
-            <ul role="list" class="space-y-9">
-              {
-                sections.map((section) => (
-                  <li>
-                    <h2 class="font-display capitalize font-medium text-on-surface">
-                      {section.title}
-                    </h2>
-                    <ul
-                      role="list"
-                      class="mt-2 space-y-2 border-l-2 md:mt-4 md:space-y-4 border-outline-variant"
-                    >
-                      {section.links.map((link) => (
-                        <li class="relative">
-                          <a
-                            href={link.href}
-                            class={cx(
-                              "block w-full capitalize pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
-                              link.href === `/docs/${path}`
-                                ? "before:bg-tertiary font-semibold text-tertiary"
-                                : "before:hidden before:bg-on-surface-variant hover:text-on-surface hover:before:block text-on-surface-variant"
-                            )}
-                          >
-                            {link.title}
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </li>
-                ))
-              }
-            </ul>
-          </nav>
+          <NavSidebar path={path} sections={sections} />
         </div>
       </div>
 
diff --git a/apps/marketing-astro/src/pages/docs/docsNav.tsx b/apps/marketing-astro/src/pages/docs/docsNav.tsx
new file mode 100644
index 00000000..4d86447f
--- /dev/null
+++ b/apps/marketing-astro/src/pages/docs/docsNav.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import NextLink from "next/link";
+import { cx } from "class-variance-authority";
+import { usePathname } from "next/navigation";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+
+export interface Section {
+  title: string;
+  links: {
+    title: string;
+    href: string;
+  }[];
+}
+
+interface DocsNavProps {
+  sections: Section[];
+  mobile?: boolean;
+  onNav?: () => void;
+}
+
+export function DocsNavDesktop({ sections, mobile, onNav }: DocsNavProps) {
+  const pathname = usePathname();
+  return (
+    <nav className="text-base md:text-sm">
+      <ul role="list" className={cx("space-y-9", mobile && "mb-20")}>
+        {sections.map((section) => (
+          <li key={section.title}>
+            <h2 className="font-display capitalize font-medium text-on-surface">
+              {section.title}
+            </h2>
+            <ul
+              role="list"
+              className="mt-2 space-y-2 border-l-2 md:mt-4 md:space-y-4 border-outline-variant"
+            >
+              {section.links.map((link) => (
+                <li key={link.href} className="relative">
+                  <NextLink
+                    onClick={() => onNav?.()}
+                    href={link.href}
+                    className={cx(
+                      "block w-full capitalize pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
+                      link.href === pathname
+                        ? "before:bg-tertiary font-semibold text-tertiary"
+                        : "before:hidden before:bg-on-surface-variant hover:text-on-surface hover:before:block text-on-surface-variant"
+                    )}
+                  >
+                    {link.title}
+                  </NextLink>
+                </li>
+              ))}
+            </ul>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
+
+export function DocsNavMobile({ sections }: DocsNavProps) {
+
+
+
+  const [open, setOpen] = useState(false);
+
+
+  return (
+    <Collapsible.Root open={open} onOpenChange={setOpen} className="bg-surface/90 backdrop-blur-sm fixed w-full inset-x-0 top-16 data-[state=open]:bottom-0">
+      <Collapsible.Trigger className="flex group py-3.5 border-b data-[state=open]:border-none border-outline-variant px-6 items-center text-on-surface text-sm w-full">
+        <ChevronDownIcon className="h-4 w-4 group-data-[state=open]:rotate-180 mr-2" />{" "}
+        Menu
+      </Collapsible.Trigger>
+      <Collapsible.Content className="fixed lg:hidden w-full max-h-[calc(100vh-8rem)] overflow-y-auto px-6 py-4 z-10 ">
+        <DocsNavDesktop onNav={() => setOpen(false)} mobile sections={sections} />
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}