diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 6d8b52bfe8..bbd7d4ea98 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -65,6 +65,12 @@ const config: Config = {
       defaultMode: 'dark',
       respectPrefersColorScheme: true,
     },
+    docs: {
+      sidebar: {
+        hideable: true,
+        autoCollapseCategories: true,
+      },
+    },
     navbar: {
       title: 'Hermes Agent',
       logo: {
diff --git a/website/sidebars.ts b/website/sidebars.ts
index 082b9ce8fd..4c7bfc2e2f 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -5,7 +5,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Getting Started',
-      collapsed: false,
+      collapsed: true,
       items: [
         'getting-started/quickstart',
         'getting-started/installation',
@@ -17,7 +17,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'Guides & Tutorials',
-      collapsed: false,
+      collapsed: true,
       items: [
         'guides/tips',
         'guides/daily-briefing-bot',
@@ -32,7 +32,7 @@ const sidebars: SidebarsConfig = {
     {
       type: 'category',
       label: 'User Guide',
-      collapsed: false,
+      collapsed: true,
       items: [
         'user-guide/cli',
         'user-guide/configuration',
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 1df449986d..7c70003917 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -199,6 +199,46 @@ pre.prism-code.language-ascii code {
   border: 1px solid rgba(255, 215, 0, 0.08);
 }
 
+/* ─── Mobile sidebar improvements ─────────────────────────────────────────── */
+
+/* Larger touch targets on mobile */
+@media (max-width: 996px) {
+  .menu__link {
+    padding: 0.6rem 0.75rem;
+    font-size: 0.95rem;
+  }
+
+  .menu__list-item-collapsible > .menu__link {
+    font-weight: 600;
+    font-size: 1rem;
+    padding: 0.75rem 0.75rem;
+    border-bottom: 1px solid rgba(255, 215, 0, 0.06);
+  }
+
+  /* Category caret — more visible */
+  .menu__caret::before {
+    background-size: 1.5rem 1.5rem;
+  }
+
+  /* Indent subcategories clearly */
+  .menu__list .menu__list {
+    padding-left: 0.75rem;
+    border-left: 1px solid rgba(255, 215, 0, 0.06);
+    margin-left: 0.5rem;
+  }
+
+  /* Sidebar overlay — slightly more opaque for readability */
+  .navbar-sidebar__backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  /* Sidebar width on mobile — use more of the screen */
+  .navbar-sidebar {
+    width: 85vw;
+    max-width: 360px;
+  }
+}
+
 /* Hero banner for docs landing if needed */
 .hero--hermes {
   background: linear-gradient(135deg, #07070d 0%, #0f0f18 100%);