diff --git a/app/docs/[section]/[[...slug]]/page.tsx b/app/docs/[section]/[[...slug]]/page.tsx
index 3e56997..6dc263e 100644
--- a/app/docs/[section]/[[...slug]]/page.tsx
+++ b/app/docs/[section]/[[...slug]]/page.tsx
@@ -80,6 +80,34 @@ export default async function ArticlePage({ params }: PageProps) {
     // Use title from frontmatter if available, otherwise fall back to navigation title or section name
     const pageTitle = frontmatter.title || selectedNavItem?.title || section;
     const showInstallPrimer = section === "getting-started" && file === "index";
+    const sectionTitle = capitalCase(section)
+        .replace(/documentdb/i, 'DocumentDB')
+        .replace(/api/i, 'API');
+
+    // Rendered once, shown in the desktop sidebar and the mobile disclosure
+    const navigationLinks = navigation.map((item) => {
+        // Better matching logic for active state
+        // For index files, match both /section and /section/index
+        // For other files, match the specific file name
+        const itemPath = item.link.replace('/docs/', '');
+        const currentPath = file === 'index' ? section : `${section}/${file}`;
+        const isActive = itemPath === currentPath ||
+            (file === 'index' && itemPath === `${section}/index`) ||
+            (item.link.includes(file) && file !== 'index');
+
+        return (
+            <Link
+                key={item.link}
+                href={item.link}
+                className={`block w-full text-left px-4 py-3 rounded-lg text-sm transition-all duration-200 ${isActive
+                    ? "bg-blue-500/20 text-blue-300 border border-blue-500/30"
+                    : "text-gray-300 hover:text-white hover:bg-neutral-700/50"
+                    }`}
+            >
+                {item.title}
+            </Link>
+        );
+    });
 
     return (
         <div className="min-h-screen bg-neutral-900 relative overflow-hidden">
@@ -94,8 +122,8 @@ export default async function ArticlePage({ params }: PageProps) {
             </div>
 
             <div className="relative flex min-h-screen">
-                {/* Left Sidebar */}
-                <div className="w-80 bg-neutral-800/50 backdrop-blur-sm border-r border-neutral-700/50 flex flex-col">
+                {/* Left Sidebar (desktop only; mobile gets the disclosure below) */}
+                <div className="hidden w-80 bg-neutral-800/50 backdrop-blur-sm border-r border-neutral-700/50 md:flex flex-col">
                     {/* Header */}
                     <div className="p-6 border-b border-neutral-700/50">
                         <Link
@@ -117,48 +145,41 @@ export default async function ArticlePage({ params }: PageProps) {
                             </svg>
                             Back to Documentation
                         </Link>
-                        <h1 className="text-2xl font-bold text-white">
-                            {
-                                capitalCase(section)
-                                    .replace(/documentdb/i, 'DocumentDB')
-                                    .replace(/api/i, 'API')
-                            }
-                        </h1>
+                        {/* Not a heading: the article's h1 comes from the markdown content */}
+                        <p className="text-2xl font-bold text-white">
+                            {sectionTitle}
+                        </p>
                     </div>
 
                     {/* Menu Items */}
                     <div className="flex-1 p-4 overflow-y-auto">
                         <nav className="space-y-1">
-                            {navigation.map((item) => {
-                                // Better matching logic for active state
-                                // For index files, match both /section and /section/index
-                                // For other files, match the specific file name
-                                const itemPath = item.link.replace('/docs/', '');
-                                const currentPath = file === 'index' ? section : `${section}/${file}`;
-                                const isActive = itemPath === currentPath ||
-                                    (file === 'index' && itemPath === `${section}/index`) ||
-                                    (item.link.includes(file) && file !== 'index');
-
-                                return (
-                                    <Link
-                                        key={item.link}
-                                        href={item.link}
-                                        className={`block w-full text-left px-4 py-3 rounded-lg text-sm transition-all duration-200 ${isActive
-                                            ? "bg-blue-500/20 text-blue-300 border border-blue-500/30"
-                                            : "text-gray-300 hover:text-white hover:bg-neutral-700/50"
-                                            }`}
-                                    >
-                                        {item.title}
-                                    </Link>
-                                );
-                            })}
+                            {navigationLinks}
                         </nav>
                     </div>
                 </div>
 
                 {/* Main Content */}
-                <div className="flex-1 p-8 overflow-y-auto">
+                <div className="flex-1 p-4 sm:p-8 overflow-y-auto">
                     <div className="max-w-4xl">
+                        {/* Mobile section navigation */}
+                        <details className="mb-6 rounded-lg border border-neutral-700/50 bg-neutral-800/50 md:hidden">
+                            <summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-gray-200">
+                                {sectionTitle} navigation
+                            </summary>
+                            <div className="border-t border-neutral-700/50 p-3">
+                                <Link
+                                    href="/docs"
+                                    className="block px-4 py-2 text-sm text-blue-400 hover:text-blue-300 transition-colors"
+                                >
+                                    ← Back to Documentation
+                                </Link>
+                                <nav className="space-y-1">
+                                    {navigationLinks}
+                                </nav>
+                            </div>
+                        </details>
+
                         {/* Coming Soon Component for coming-soon layout */}
                         {frontmatter.layout === 'coming-soon' && <ComingSoon />}
 
diff --git a/app/docs/reference/layout.tsx b/app/docs/reference/layout.tsx
index 679440f..fd2abce 100644
--- a/app/docs/reference/layout.tsx
+++ b/app/docs/reference/layout.tsx
@@ -29,7 +29,8 @@ export default function ReferenceLayout({
         ></div>
       </div>
       <div className="relative flex h-screen">
-        <div className="w-80 bg-neutral-800/50 backdrop-blur-sm border-r border-neutral-700/50 flex flex-col h-full">
+        {/* Sidebar (desktop only; mobile gets the disclosure below) */}
+        <div className="hidden w-80 bg-neutral-800/50 backdrop-blur-sm border-r border-neutral-700/50 md:flex flex-col h-full">
           <div className="p-6 border-b border-neutral-700/50 flex-shrink-0">
             <Link href="/docs" className="text-blue-400 hover:text-blue-300 text-sm mb-4 flex items-center transition-colors">
               <svg
@@ -51,8 +52,17 @@ export default function ReferenceLayout({
           </div>
           <Index groupedReferences={groupedReferences} />
         </div>
-        <article className="flex-1 p-8 overflow-y-auto h-full">
+        <article className="flex-1 p-4 sm:p-8 overflow-y-auto h-full">
           <div className="max-w-4xl">
+            {/* Mobile reference navigation */}
+            <details className="mb-6 rounded-lg border border-neutral-700/50 bg-neutral-800/50 md:hidden">
+              <summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-gray-200">
+                MQL reference navigation
+              </summary>
+              <div className="max-h-[60vh] overflow-y-auto border-t border-neutral-700/50">
+                <Index groupedReferences={groupedReferences} />
+              </div>
+            </details>
             {children}
           </div>
         </article>