diff --git a/bun.lock b/bun.lock
index 3a2661a..e9d0483 100644
--- a/bun.lock
+++ b/bun.lock
@@ -8,9 +8,6 @@
     "packages/design-system": {
       "name": "@happyview/design-system",
       "version": "0.0.0",
-      "dependencies": {
-        "geist": "^1.4.1",
-      },
     },
     "packages/docs": {
       "name": "@happyview/docs",
@@ -22,6 +19,7 @@
         "fumadocs-core": "^16.8.10",
         "fumadocs-mdx": "^15.0.4",
         "fumadocs-ui": "^16.8.10",
+        "lucide-react": "^1.14.0",
         "mermaid": "^11.6.0",
         "next": "^16.1.6",
         "next-themes": "^0.4.6",
@@ -1030,8 +1028,6 @@
 
     "function-timeout": ["function-timeout@1.0.2", "", {}, "sha512-939eZS4gJ3htTHAldmyyuzlrD58P03fHG49v2JfFXbV6OhvZKRC9j2yAtdHw/zrp2zXHuv05zMIy40F0ge7spA=="],
 
-    "geist": ["geist@1.7.0", "", { "peerDependencies": { "next": ">=13.2.0" } }, "sha512-ZaoiZwkSf0DwwB1ncdLKp+ggAldqxl5L1+SXaNIBGkPAqcu+xjVJLxlf3/S8vLt9UHx1xu5fz3lbzKCj5iOVdQ=="],
-
     "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
 
     "get-east-asian-width": ["get-east-asian-width@1.5.0", "", {}, "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA=="],
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 5a9da50..a5f0540 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -10,16 +10,17 @@
   },
   "dependencies": {
     "@happyview/design-system": "workspace:*",
+    "@tailwindcss/postcss": "^4.2.0",
     "@types/mdx": "^2.0.13",
     "fumadocs-core": "^16.8.10",
     "fumadocs-mdx": "^15.0.4",
     "fumadocs-ui": "^16.8.10",
+    "lucide-react": "^1.14.0",
     "mermaid": "^11.6.0",
-    "next-themes": "^0.4.6",
     "next": "^16.1.6",
+    "next-themes": "^0.4.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "@tailwindcss/postcss": "^4.2.0",
     "tailwindcss": "^4.2.0"
   },
   "devDependencies": {
diff --git a/packages/docs/src/app/global.css b/packages/docs/src/app/global.css
index 016986e..9b06a50 100644
--- a/packages/docs/src/app/global.css
+++ b/packages/docs/src/app/global.css
@@ -11,6 +11,16 @@
   }
 }
 
+#nd-docs-layout {
+  --fd-layout-width: 100vw;
+}
+
 #nd-sidebar a {
   white-space: nowrap;
 }
+
+@media (min-width: 768px) {
+  #nd-sidebar > :first-child button[aria-label="Collapse Sidebar"] {
+    display: none;
+  }
+}
diff --git a/packages/docs/src/app/layout.tsx b/packages/docs/src/app/layout.tsx
index b2c27e3..55eaf19 100644
--- a/packages/docs/src/app/layout.tsx
+++ b/packages/docs/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { RootProvider } from 'fumadocs-ui/provider/next';
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 import { source } from '@/lib/source';
 import { fontVariables } from '@/lib/fonts';
+import { SidebarFooter } from '@/components/sidebar-footer';
 import type { ReactNode } from 'react';
 
 export const metadata = {
@@ -30,10 +31,14 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             nav={{
               title: (
                 <span className="flex items-center gap-2 text-sm tracking-tight">
-                  <img src="/img/logo.dark.png" alt="" className="h-5" />
+                  <img src="/img/logo.dark.png" alt="HappyView" className="h-14" />
                 </span>
               ),
             }}
+            sidebar={{
+              footer: <SidebarFooter key="sidebar-footer" />,
+            }}
+            themeSwitch={{ enabled: false }}
             links={[
               {
                 text: 'Docs',
diff --git a/packages/docs/src/components/sidebar-footer.tsx b/packages/docs/src/components/sidebar-footer.tsx
new file mode 100644
index 0000000..39fd2ce
--- /dev/null
+++ b/packages/docs/src/components/sidebar-footer.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { SidebarCollapseTrigger } from 'fumadocs-ui/components/sidebar/base';
+import { ThemeSwitch } from 'fumadocs-ui/layouts/shared/slots/theme-switch';
+import { SidebarIcon } from 'lucide-react';
+
+export function SidebarFooter() {
+  return (
+    <div className="flex items-center">
+      <ThemeSwitch className="p-0" />
+      <div className="flex-1" />
+      <SidebarCollapseTrigger className="inline-flex items-center justify-center rounded-md p-1.5 text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground transition-colors max-md:hidden">
+        <SidebarIcon className="size-4" />
+      </SidebarCollapseTrigger>
+    </div>
+  );
+}