diff --git a/.claude/settings.json b/.claude/settings.json
index 3e603bb..4e595ab 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,23 +1,9 @@
 {
-  "extraKnownMarketplaces": {
-    "playwright-skill": {
-      "source": {
-        "source": "github",
-        "repo": "lackeyjb/playwright-skill"
-      }
-    }
-  },
-
   "permissions": {
-    "deny": ["Read(**/.env)", "Read(**/.envrc)"],
-    "ask": [],
-
     "allow": [
       "mcp__ide__getDiagnostics",
-
       "Bash(claude mcp get:*)",
       "Bash(claude mcp list)",
-
       "mcp__playwright__browser_click",
       "mcp__playwright__browser_close",
       "mcp__playwright__browser_console_messages",
@@ -31,7 +17,6 @@
       "mcp__playwright__browser_tabs",
       "mcp__playwright__browser_take_screenshot",
       "mcp__playwright__browser_wait_for",
-
       "Bash(cat:*)",
       "Bash(echo:*)",
       "Bash(find:*)",
@@ -41,13 +26,11 @@
       "Bash(tree:*)",
       "Bash(wc:*)",
       "Bash(xargs:*)",
-
       "Bash(git log:*)",
       "Bash(gh pr checks:*)",
       "Bash(gh pr list:*)",
       "Bash(gh run list:*)",
       "Bash(gh run view:*)",
-
       "Bash(npm run build)",
       "Bash(npm run dev)",
       "Bash(npm run start)",
@@ -61,7 +44,6 @@
       "Bash(npx @biomejs/biome:*)",
       "Bash(npx lefthook:*)",
       "Bash(npx playwright:*)",
-
       "Bash(vercel --help)",
       "Bash(vercel env --help)",
       "Bash(vercel env ls:*)",
@@ -71,7 +53,6 @@
       "Bash(vercel open)",
       "Bash(vercel project ls:*)",
       "Bash(vercel whoami)",
-
       "WebFetch(domain:biomejs.dev)",
       "WebFetch(domain:docs.github.com)",
       "WebFetch(domain:github.com)",
@@ -82,6 +63,36 @@
       "WebFetch(domain:ui.shadcn.com)",
       "WebFetch(domain:vercel.com)",
       "WebFetch(domain:vitest.dev)"
-    ]
+    ],
+    "deny": ["Read(**/.env)", "Read(**/.envrc)"],
+    "ask": []
+  },
+  "enabledPlugins": {
+    "playwright-skill@playwright-skill": false,
+    "skill-creator@my-claude-plugins": false,
+    "frontend-design@my-claude-plugins": false,
+    "tailwindcss@my-claude-plugins": false,
+    "shadcn-ui@my-claude-plugins": true,
+    "feature-dev@claude-plugins-official": true
+  },
+  "extraKnownMarketplaces": {
+    "playwright-skill": {
+      "source": {
+        "source": "github",
+        "repo": "lackeyjb/playwright-skill"
+      }
+    },
+    "my-claude-plugins": {
+      "source": {
+        "source": "github",
+        "repo": "michellepace/my-claude-plugins"
+      }
+    },
+    "claude-plugins-official": {
+      "source": {
+        "source": "github",
+        "repo": "anthropics/claude-plugins-official"
+      }
+    }
   }
 }
diff --git a/CLAUDE.md b/CLAUDE.md
index b035d8c..e41422b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,5 +1,7 @@
 # CLAUDE.md
 
+**DevFlow** — A community-driven platform for asking and answering programming questions. Get help, share knowledge, and collaborate with developers from around the world. (Similar to Stack Overflow)
+
 The project uses British English - strictly.
 
 ## Tech Stack
@@ -29,6 +31,17 @@ vercel env ls       # Check env vars are configured
 vercel whoami       # Verify CLI is authenticated
 ```
 
+## shadcn/ui CLI
+
+```bash
+npx shadcn@latest list @shadcn            # List all available components
+npx shadcn@latest search @shadcn -q "nav" # Search components by query
+npx shadcn@latest view button card        # Preview code before installing
+npx shadcn@latest add <component>         # Add component to project
+npx shadcn@latest add button --overwrite  # Overwrite existing component
+npx shadcn@latest add @v0/<block>         # Add from v0.dev registry
+```
+
 ## Coding Practices
 
 - Only add `"use client"` when interactivity is needed
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index 10b6e03..6b5a4ed 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,6 +1,6 @@
 const AuthLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <main className="min-h-screen bg-cover bg-center bg-no-repeat bg-[url('/images/auth-bg-light.webp')] dark:bg-[url('/images/auth-bg-dark.webp')]">
+    <main className="flex min-h-screen items-center justify-center bg-cover bg-center bg-no-repeat bg-(image:--auth-bg) px-6 py-10 md:px-8 lg:px-12">
       {children}
     </main>
   );
diff --git a/app/(auth)/sign-in/[[...sign-in]]/page.tsx b/app/(auth)/sign-in/[[...sign-in]]/page.tsx
index 703415d..1d879b5 100644
--- a/app/(auth)/sign-in/[[...sign-in]]/page.tsx
+++ b/app/(auth)/sign-in/[[...sign-in]]/page.tsx
@@ -4,9 +4,5 @@ import { ClerkSignIn } from "@/components/auth/clerk-signin";
 export default async function SignInPage() {
   await connection();
 
-  return (
-    <div className="flex min-h-screen items-center justify-center p-6">
-      <ClerkSignIn />
-    </div>
-  );
+  return <ClerkSignIn />;
 }
diff --git a/app/(auth)/sign-up/[[...sign-up]]/page.tsx b/app/(auth)/sign-up/[[...sign-up]]/page.tsx
index feee066..bdd9d31 100644
--- a/app/(auth)/sign-up/[[...sign-up]]/page.tsx
+++ b/app/(auth)/sign-up/[[...sign-up]]/page.tsx
@@ -4,9 +4,5 @@ import { ClerkSignUp } from "@/components/auth/clerk-signup";
 export default async function SignUpPage() {
   await connection();
 
-  return (
-    <div className="flex min-h-screen items-center justify-center p-6">
-      <ClerkSignUp />
-    </div>
-  );
+  return <ClerkSignUp />;
 }
diff --git a/app/(root)/(no-right-sidebar)/community/page.tsx b/app/(root)/(no-right-sidebar)/community/page.tsx
new file mode 100644
index 0000000..863d62f
--- /dev/null
+++ b/app/(root)/(no-right-sidebar)/community/page.tsx
@@ -0,0 +1,3 @@
+export default function CommunityPage() {
+  return <h1>Community</h1>;
+}
diff --git a/app/(root)/(no-right-sidebar)/jobs/page.tsx b/app/(root)/(no-right-sidebar)/jobs/page.tsx
new file mode 100644
index 0000000..ec6d850
--- /dev/null
+++ b/app/(root)/(no-right-sidebar)/jobs/page.tsx
@@ -0,0 +1,3 @@
+export default function JobsPage() {
+  return <h1>Find Jobs</h1>;
+}
diff --git a/app/(root)/(no-right-sidebar)/layout.tsx b/app/(root)/(no-right-sidebar)/layout.tsx
new file mode 100644
index 0000000..34cae74
--- /dev/null
+++ b/app/(root)/(no-right-sidebar)/layout.tsx
@@ -0,0 +1,7 @@
+// Full-width layout without right sidebar
+// Layout: [LeftSidebar (sticky)] [Main Content]
+const NoRightSidebarLayout = ({ children }: { children: React.ReactNode }) => {
+  return <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>;
+};
+
+export default NoRightSidebarLayout;
diff --git a/app/(root)/(no-right-sidebar)/profile/page.tsx b/app/(root)/(no-right-sidebar)/profile/page.tsx
new file mode 100644
index 0000000..e84a25b
--- /dev/null
+++ b/app/(root)/(no-right-sidebar)/profile/page.tsx
@@ -0,0 +1,3 @@
+export default function ProfilePage() {
+  return <h1>Profile</h1>;
+}
diff --git a/app/(root)/(no-right-sidebar)/tags/page.tsx b/app/(root)/(no-right-sidebar)/tags/page.tsx
new file mode 100644
index 0000000..4f47ff8
--- /dev/null
+++ b/app/(root)/(no-right-sidebar)/tags/page.tsx
@@ -0,0 +1,3 @@
+export default function TagsPage() {
+  return <h1>Tags</h1>;
+}
diff --git a/app/(root)/(with-right-sidebar)/ask-question/page.tsx b/app/(root)/(with-right-sidebar)/ask-question/page.tsx
new file mode 100644
index 0000000..cc92fe1
--- /dev/null
+++ b/app/(root)/(with-right-sidebar)/ask-question/page.tsx
@@ -0,0 +1,3 @@
+export default function AskQuestionPage() {
+  return <h1>Ask a Question</h1>;
+}
diff --git a/app/(root)/(with-right-sidebar)/collections/page.tsx b/app/(root)/(with-right-sidebar)/collections/page.tsx
new file mode 100644
index 0000000..2a084a1
--- /dev/null
+++ b/app/(root)/(with-right-sidebar)/collections/page.tsx
@@ -0,0 +1,3 @@
+export default function CollectionsPage() {
+  return <h1>Collections</h1>;
+}
diff --git a/app/(root)/(with-right-sidebar)/layout.tsx b/app/(root)/(with-right-sidebar)/layout.tsx
new file mode 100644
index 0000000..ad0517f
--- /dev/null
+++ b/app/(root)/(with-right-sidebar)/layout.tsx
@@ -0,0 +1,11 @@
+// TODO: Add <RightSidebar> for tag widgets, hot questions, etc.
+// Layout: [LeftSidebar (sticky)] [Main Content] [RightSidebar]
+const WithRightSidebarLayout = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <main className="flex-1 px-6 py-10 md:px-8 lg:px-12">{children}</main>;
+};
+
+export default WithRightSidebarLayout;
diff --git a/app/(root)/(with-right-sidebar)/page.tsx b/app/(root)/(with-right-sidebar)/page.tsx
new file mode 100644
index 0000000..4aa7c66
--- /dev/null
+++ b/app/(root)/(with-right-sidebar)/page.tsx
@@ -0,0 +1,31 @@
+const Home = () => (
+  <>
+    <h1>Hello Root page with heading H1</h1>
+
+    {/* Header boundary marker */}
+    <div className="mt-8 bg-primary/30 p-4">HEADER: {"words ".repeat(50)}</div>
+
+    {/* Flexbox demo: grow vs flex-none */}
+    <div className="my-8 flex gap-4 border-2 border-dashed border-primary p-4">
+      {/* Fixed width - won't grow */}
+      <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
+        flex-none
+      </div>
+
+      {/* Grows to fill available space */}
+      <div className="flex h-24 grow items-center justify-center rounded-lg border-2 border-dashed border-primary bg-indigo-500/30 text-sm font-medium">
+        grow
+      </div>
+
+      {/* Fixed width - won't grow */}
+      <div className="flex h-24 w-24 flex-none items-center justify-center rounded-lg border-2 border-dashed border-primary bg-sky-500/20 text-sm font-medium">
+        flex-none
+      </div>
+    </div>
+
+    {/* Footer boundary marker */}
+    <div className="bg-primary/30 p-4">FOOTER: {"words ".repeat(50)}</div>
+  </>
+);
+
+export default Home;
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
deleted file mode 100644
index c30eff3..0000000
--- a/app/(root)/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-const Home = () => (
-  <>
-    <h1>Welcome to the world of Next.js</h1>
-  </>
-);
-
-export default Home;
diff --git a/app/globals.css b/app/globals.css
index ccf5d7f..80cc9ff 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -29,6 +29,7 @@
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar: var(--sidebar);
+  --color-mobile-nav: var(--mobile-nav);
   --color-chart-5: var(--chart-5);
   --color-chart-4: var(--chart-4);
   --color-chart-3: var(--chart-3);
@@ -54,7 +55,14 @@
 
 :root {
   /* Creates CSS variables available to all elements (no utility generation) */
+  /* Only defined in root, not .dark */
   --radius: 0.625rem;
+  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* #E2995F */
+  --gradient-primary: linear-gradient(
+    93.22deg,
+    var(--primary) -13.95%,
+    var(--primary-gradient-to) 99.54%
+  );
 
   --background: oklch(0.994 0 0); /* #FDFDFD */
   --foreground: oklch(0.129 0.042 264.695);
@@ -64,7 +72,7 @@
   --popover-foreground: oklch(0.129 0.042 264.695);
   --primary: oklch(0.7089 0.1967 46.81);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.968 0.007 247.896);
+  --secondary: oklch(0.9147 0.0205 264.47); /* #DCE3F1 - Figma */
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
@@ -79,7 +87,7 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(1 0 0); /* #FFFFFF */
+  --sidebar: oklch(1 0 0); /* Figma #ffffff */
   --sidebar-foreground: oklch(0.2102 0.0185 270.39); /* #151821 */
   --sidebar-primary: oklch(0.208 0.042 265.755);
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
@@ -87,15 +95,11 @@
   --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
   --sidebar-border: oklch(0.929 0.013 255.508);
   --sidebar-ring: oklch(0.704 0.04 256.788);
-  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* #E2995F */
-  --gradient-primary: linear-gradient(
-    93.22deg,
-    var(--primary) -13.95%,
-    var(--primary-gradient-to) 99.54%
-  );
+  --mobile-nav: oklch(1 0 0); /* #FFFFFF */
 
   /* Centralised logo theming */
   --logo-full-themed: url("/images/logo-light.svg");
+  --auth-bg: url("/images/auth-bg-light.webp");
 }
 
 .dark {
@@ -108,7 +112,7 @@
   --popover-foreground: oklch(0.984 0.003 247.858);
   --primary: oklch(0.7089 0.1967 46.81);
   --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.279 0.041 260.031);
+  --secondary: oklch(0.2728 0.0257 265.4); /* #212734 - Figma */
   --secondary-foreground: oklch(0.984 0.003 247.858);
   --muted: oklch(0.279 0.041 260.031);
   --muted-foreground: oklch(0.704 0.04 256.788);
@@ -123,7 +127,7 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.178 0.013 270.6); /* #0F1117 */
+  --sidebar: oklch(0.1783 0.0128 270.6); /* Figma #0F1117 */
   --sidebar-foreground: oklch(1 0 0); /* #FFFFFF */
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
@@ -131,9 +135,11 @@
   --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.551 0.027 264.364);
+  --mobile-nav: oklch(0.1288 0.0406 264.7); /* #07080b */
 
   /* Centralised logo theming (dark) */
   --logo-full-themed: url("/images/logo-dark.svg");
+  --auth-bg: url("/images/auth-bg-dark.webp");
 }
 
 @layer base {
@@ -187,3 +193,11 @@
     @apply overflow-x-auto rounded-lg bg-muted p-4 text-sm;
   }
 }
+
+@layer utilities {
+  /* Custom SVG icons use hardcoded white fill. Since <Image> loads them as external
+     files, CSS currentColor won't work. Invert to black in light mode instead. */
+  .invert-colors {
+    @apply invert dark:invert-0;
+  }
+}
diff --git a/app/old.globals.css b/app/old.globals.css
deleted file mode 100644
index 1aff2bd..0000000
--- a/app/old.globals.css
+++ /dev/null
@@ -1,397 +0,0 @@
-@import "tailwindcss";
-
-body {
-  font-family: "Inter", sans-serif;
-}
-
-:root {
-  --radius: 8px;
-}
-
-@layer utilities {
-  .background-light850_dark100 {
-    @apply bg-light-850 dark:bg-dark-100;
-  }
-
-  .background-light900_dark200 {
-    @apply bg-light-900 dark:bg-dark-200;
-  }
-
-  .background-light900_dark300 {
-    @apply bg-light-900 dark:bg-dark-300;
-  }
-
-  .background-light800_darkgradient {
-    @apply bg-light-800 dark:dark-gradient;
-  }
-
-  .background-light800_dark400 {
-    @apply bg-light-800 dark:bg-dark-400 !important;
-  }
-
-  .background-light700_dark400 {
-    @apply bg-light-700 dark:bg-dark-400;
-  }
-
-  .background-light700_dark300 {
-    @apply bg-light-700 dark:bg-dark-300;
-  }
-
-  .background-light800_dark400 {
-    @apply bg-light-800 dark:bg-dark-400;
-  }
-
-  .background-light800_dark300 {
-    @apply bg-light-800 dark:bg-dark-300 !important;
-  }
-
-  .background-light800_dark200 {
-    @apply bg-light-800 dark:bg-dark-200;
-  }
-
-  .background-dark400_light900 {
-    @apply dark:bg-dark-400 bg-light-900 !important;
-  }
-
-  .text-dark100_light900 {
-    @apply text-dark-100 dark:text-light-900 !important;
-  }
-
-  .text-dark200_light900 {
-    @apply text-dark-200 dark:text-light-900;
-  }
-
-  .text-dark200_light800 {
-    @apply text-dark-200 dark:text-light-800 !important;
-  }
-
-  .text-dark300_light700 {
-    @apply text-dark-300 dark:text-light-700;
-  }
-
-  .text-dark400_light700 {
-    @apply text-dark-400 dark:text-light-700;
-  }
-
-  .text-dark500_light700 {
-    @apply text-dark-500 dark:text-light-700 !important;
-  }
-
-  .text-dark500_light500 {
-    @apply text-dark-500 dark:text-light-500;
-  }
-
-  .text-dark500_light400 {
-    @apply text-dark-500 dark:text-light-400;
-  }
-
-  .text-dark300_light900 {
-    @apply text-dark-300 dark:text-light-900 !important;
-  }
-
-  .text-dark400_light800 {
-    @apply text-dark-400 dark:text-light-800;
-  }
-
-  .text-light400_light500 {
-    @apply text-light-400 dark:text-light-500 !important;
-  }
-
-  .text-dark400_light500 {
-    @apply text-dark-400 dark:text-light-500;
-  }
-
-  .text-dark400_light900 {
-    @apply text-dark-400 dark:text-light-900 !important;
-  }
-
-  .text-light400_light500 {
-    @apply text-light-400 dark:text-light-500 !important;
-  }
-
-  .light-border {
-    @apply border-light-800 dark:border-dark-300;
-  }
-
-  .light-border-2 {
-    @apply border-light-700 dark:border-dark-400 !important;
-  }
-
-  .h1-bold {
-    @apply text-[30px] font-bold leading-[42px] tracking-tighter;
-  }
-
-  .h2-bold {
-    @apply text-[24px] font-bold leading-[31.2px];
-  }
-
-  .h2-semibold {
-    @apply text-[24px] font-semibold leading-[31.2px];
-  }
-
-  .h3-bold {
-    @apply text-[20px] font-bold leading-[26px];
-  }
-
-  .h3-semibold {
-    @apply text-[20px] font-semibold leading-[24.8px];
-  }
-
-  .base-medium {
-    @apply text-[18px] font-medium leading-[25.2px];
-  }
-
-  .base-semibold {
-    @apply text-[18px] font-semibold leading-[25.2px];
-  }
-
-  .base-bold {
-    @apply text-[18px] font-bold leading-[140%];
-  }
-
-  .paragraph-regular {
-    @apply text-[16px] font-normal leading-[22.4px];
-  }
-
-  .paragraph-medium {
-    @apply text-[16px] font-medium leading-[22.4px];
-  }
-
-  .paragraph-semibold {
-    @apply text-[16px] font-semibold leading-[20.8px];
-  }
-
-  .body-regular {
-    @apply text-[14px] font-normal leading-[19.6px];
-  }
-
-  .body-medium {
-    @apply text-[14px] font-medium leading-[18.2px];
-  }
-
-  .body-semibold {
-    @apply text-[14px] font-semibold leading-[18.2px];
-  }
-
-  .body-bold {
-    @apply text-[14px] font-bold leading-[18.2px];
-  }
-
-  .small-regular {
-    @apply text-[12px] font-normal leading-[15.6px];
-  }
-
-  .small-medium {
-    @apply text-[12px] font-medium leading-[15.6px];
-  }
-
-  .small-semibold {
-    @apply text-[12px] font-semibold leading-[15.6px];
-  }
-
-  .subtle-medium {
-    @apply text-[10px] font-medium leading-[13px] !important;
-  }
-
-  .subtle-regular {
-    @apply text-[10px] font-normal leading-[13px];
-  }
-
-  .placeholder {
-    @apply placeholder:text-light-400 dark:placeholder:text-light-500;
-  }
-
-  .invert-colors {
-    @apply invert dark:invert-0;
-  }
-
-  .shadow-light100_dark100 {
-    @apply shadow-light-100 dark:shadow-dark-100;
-  }
-
-  .shadow-light100_darknone {
-    @apply shadow-light-100 dark:shadow-none;
-  }
-
-  .primary-gradient {
-    background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
-  }
-
-  .dark-gradient {
-    background: linear-gradient(
-      232deg,
-      rgba(23, 28, 35, 0.41) 0%,
-      rgba(19, 22, 28, 0.7) 100%
-    );
-  }
-
-  .light-gradient {
-    background: linear-gradient(
-      132deg,
-      rgba(247, 249, 255, 0.5) 0%,
-      rgba(229, 237, 255, 0.25) 100%
-    );
-  }
-
-  .primary-text-gradient {
-    background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .flex-center {
-    @apply flex justify-center items-center;
-  }
-
-  .flex-between {
-    @apply flex justify-between items-center;
-  }
-
-  .flex-start {
-    @apply flex justify-start items-center;
-  }
-
-  .card-wrapper {
-    @apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100;
-  }
-
-  .btn {
-    @apply bg-light-800 dark:bg-dark-300 !important;
-  }
-
-  .btn-secondary {
-    @apply bg-light-800 dark:bg-dark-400 !important;
-  }
-
-  .btn-tertiary {
-    @apply bg-light-700 dark:bg-dark-300 !important;
-  }
-
-  .no-focus {
-    @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
-  }
-
-  .markdown {
-    @apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
-  }
-
-  .markdown-editor {
-    @apply prose max-w-full prose-p:m-0 dark:prose-headings:text-white prose-headings:text-dark-400 prose-p:text-dark-500 dark:prose-p:text-light-700 prose-ul:text-dark-500 dark:prose-ul:text-light-700 prose-ol:text-dark-500 dark:prose-ol:text-light-700 dark:prose-strong:text-white prose-blockquote:text-dark-500 dark:prose-blockquote:text-light-700;
-  }
-
-  .tab {
-    @apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important;
-  }
-
-  .dark-gradient {
-    background: linear-gradient(
-      232deg,
-      rgba(23, 28, 35, 0.41) 0%,
-      rgba(19, 22, 28, 0.7) 100%
-    );
-  }
-}
-
-.custom-scrollbar::-webkit-scrollbar {
-  width: 3px;
-  height: 3px;
-  border-radius: 2px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: #ffffff;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 50px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-.active-theme {
-  filter: invert(53%) sepia(98%) saturate(3332%) hue-rotate(0deg)
-    brightness(104%) contrast(106%);
-}
-
-.hash-span {
-  margin-top: -140px;
-  padding-bottom: 140px;
-  display: block;
-}
-
-.mdxeditor-toolbar {
-  background: #ffffff;
-}
-
-.dark .mdxeditor-toolbar {
-  background: #151821;
-}
-
-.dark .mdxeditor-toolbar button svg {
-  color: #858ead;
-}
-
-.dark .mdxeditor-toolbar button:hover svg {
-  color: #000;
-}
-
-.dark .mdxeditor-toolbar [role="separator"] {
-  border-color: #555;
-}
-
-.markdown a {
-  color: #1da1f2;
-}
-
-.markdown a,
-code {
-  /* These are technically the same, but use both */
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-
-  -ms-word-break: break-all;
-  /* Use break-word for better compatibility (non-standard but safer than break-all) */
-  word-break: break-word;
-
-  /* Adds a hyphen where the word breaks, if supported (No Blink) */
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-
-  padding: 2px;
-  color: #ff7000;
-}
-
-.markdown pre {
-  display: grid;
-  width: 100%;
-}
-
-.markdown pre code {
-  width: 100%;
-  display: block;
-  overflow-x: auto;
-
-  color: inherit;
-}
-
-[data-lexical-editor="true"] {
-  height: 350px;
-  overflow-y: auto;
-}
diff --git a/components/navigation/constants.ts b/components/navigation/constants.ts
new file mode 100644
index 0000000..1a66ff9
--- /dev/null
+++ b/components/navigation/constants.ts
@@ -0,0 +1,19 @@
+export type NavLink = {
+  imgURL: string;
+  route: string;
+  label: string;
+};
+
+export const NAV_LINKS = [
+  { imgURL: "/icons/home.svg", route: "/", label: "Home" },
+  { imgURL: "/icons/users.svg", route: "/community", label: "Community" },
+  { imgURL: "/icons/star.svg", route: "/collections", label: "Collections" },
+  { imgURL: "/icons/suitcase.svg", route: "/jobs", label: "Find Jobs" },
+  { imgURL: "/icons/tag.svg", route: "/tags", label: "Tags" },
+  {
+    imgURL: "/icons/question.svg",
+    route: "/ask-question",
+    label: "Ask a question",
+  },
+  { imgURL: "/icons/user.svg", route: "/profile", label: "Profile" },
+] as const satisfies readonly NavLink[];
diff --git a/components/navigation/full-logo.tsx b/components/navigation/full-logo.tsx
new file mode 100644
index 0000000..0c663a0
--- /dev/null
+++ b/components/navigation/full-logo.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+// Logo SVG dimensions - centralised to avoid magic numbers
+const LOGO_WIDTH = 137;
+const LOGO_HEIGHT = 23;
+
+interface ThemeLogoProps {
+  className?: string;
+}
+
+/**
+ * Theme-aware logo that switches between light/dark variants via CSS variable.
+ * Uses --logo-full-themed defined in globals.css.
+ */
+export function ThemeLogo({ className }: ThemeLogoProps) {
+  return (
+    <span
+      style={{ aspectRatio: `${LOGO_WIDTH}/${LOGO_HEIGHT}` }}
+      className={cn(
+        "h-7 bg-(image:--logo-full-themed) bg-contain bg-no-repeat",
+        className,
+      )}
+      role="img"
+      aria-label="DevFlow logo"
+    />
+  );
+}
diff --git a/components/navigation/mobile-nav.tsx b/components/navigation/mobile-nav.tsx
new file mode 100644
index 0000000..947fd6e
--- /dev/null
+++ b/components/navigation/mobile-nav.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import {
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  SignOutButton,
+  SignUpButton,
+} from "@clerk/nextjs";
+import { LogOut, Menu, X } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { NAV_LINKS } from "@/components/navigation/constants";
+import { ThemeLogo } from "@/components/navigation/full-logo";
+import { NavLink } from "@/components/navigation/nav-link";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+export function MobileNav() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-lg"
+          className="text-sidebar-foreground sm:hidden"
+          aria-label={open ? "Close navigation menu" : "Open navigation menu"}
+        >
+          {open ? <X className="size-5" /> : <Menu className="size-5" />}
+        </Button>
+      </SheetTrigger>
+      <SheetContent
+        side="left"
+        className="flex flex-col gap-6 border-none bg-mobile-nav p-6"
+      >
+        {/* Visually hidden title and description for accessibility */}
+        <SheetTitle className="sr-only">Navigation menu</SheetTitle>
+        <SheetDescription className="sr-only">
+          Browse site pages and manage your account
+        </SheetDescription>
+
+        {/* Logo */}
+        <SheetClose asChild>
+          <Link href="/" className="flex items-center">
+            <ThemeLogo />
+          </Link>
+        </SheetClose>
+
+        {/* Navigation Links */}
+        <nav className="flex flex-col gap-3 pt-9">
+          {NAV_LINKS.map((link) => (
+            <SheetClose key={link.route} asChild>
+              <NavLink
+                imgURL={link.imgURL}
+                route={link.route}
+                label={link.label}
+              />
+            </SheetClose>
+          ))}
+        </nav>
+
+        {/* Sign out - Only when signed in */}
+        <SignedIn>
+          <div className="mt-auto">
+            <SheetClose asChild>
+              <SignOutButton>
+                <button
+                  type="button"
+                  className="flex w-full items-center gap-4 rounded-lg px-4 py-3 text-lg font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
+                >
+                  <LogOut className="size-5" />
+                  <span>Sign out</span>
+                </button>
+              </SignOutButton>
+            </SheetClose>
+          </div>
+        </SignedIn>
+
+        {/* Auth Buttons - Only when signed out */}
+        <SignedOut>
+          <div className="mt-auto flex flex-col gap-3">
+            <SheetClose asChild>
+              <SignInButton>
+                <Button variant="soft" size="lg" className="w-full">
+                  <span className="bg-(image:--gradient-primary) bg-clip-text text-transparent">
+                    Sign in
+                  </span>
+                </Button>
+              </SignInButton>
+            </SheetClose>
+            <SheetClose asChild>
+              <SignUpButton>
+                <Button variant="muted" size="lg" className="w-full">
+                  Sign up
+                </Button>
+              </SignUpButton>
+            </SheetClose>
+          </div>
+        </SignedOut>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/components/navigation/nav-link.tsx b/components/navigation/nav-link.tsx
new file mode 100644
index 0000000..6cc5698
--- /dev/null
+++ b/components/navigation/nav-link.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import type { Route } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import type { NavLink as NavLinkType } from "@/components/navigation/constants";
+import { cn } from "@/lib/utils";
+
+type NavLinkProps = NavLinkType & {
+  // Passed by SheetClose asChild to close the sheet on click
+  onClick?: () => void;
+};
+
+export function NavLink({ imgURL, route, label, onClick }: NavLinkProps) {
+  const pathname = usePathname();
+  const isActive =
+    (pathname.startsWith(route) && route.length > 1) || pathname === route;
+
+  return (
+    <Link
+      href={route as Route}
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-4 rounded-lg px-4 py-3 text-lg transition-colors",
+        isActive
+          ? "bg-(image:--gradient-primary) font-bold text-primary-foreground"
+          : "font-medium text-sidebar-foreground hover:bg-sidebar-accent",
+      )}
+    >
+      <Image
+        src={imgURL}
+        alt={label}
+        width={20}
+        height={20}
+        className={cn(!isActive && "invert-colors")}
+      />
+      <span>{label}</span>
+    </Link>
+  );
+}
diff --git a/components/navigation/navbar/index.tsx b/components/navigation/navbar.tsx
similarity index 51%
rename from components/navigation/navbar/index.tsx
rename to components/navigation/navbar.tsx
index eeedaf7..1bc00a3 100644
--- a/components/navigation/navbar/index.tsx
+++ b/components/navigation/navbar.tsx
@@ -7,13 +7,15 @@ import {
 } from "@clerk/nextjs";
 import Image from "next/image";
 import Link from "next/link";
+import { ThemeLogo } from "@/components/navigation/full-logo";
+import { MobileNav } from "@/components/navigation/mobile-nav";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
 
 export const Navbar = () => (
   <nav
     aria-label="Primary navigation"
-    className="sticky top-0 z-50 flex w-full items-center justify-between bg-sidebar px-6 py-4 shadow-sm"
+    className="sticky top-0 z-50 flex w-full items-center justify-between bg-sidebar px-6 py-4 md:px-8 lg:px-12 shadow-sm"
   >
     {/* Left: Logo (responsive) */}
     <Link href="/" className="flex items-center">
@@ -25,12 +27,8 @@ export const Navbar = () => (
         height={25}
         className="sm:hidden"
       />
-      {/* Desktop: full themed logo via --logo-full-themed in globals.css */}
-      <span
-        className="hidden h-6 aspect-137/23 bg-(image:--logo-full-themed) bg-contain bg-no-repeat sm:block"
-        role="img"
-        aria-label="DevFlow logo"
-      />
+      {/* Desktop: full themed logo */}
+      <ThemeLogo className="hidden sm:block" />
     </Link>
 
     {/* Centre: Global Search placeholder (md+ only) */}
@@ -38,20 +36,25 @@ export const Navbar = () => (
       Global Search
     </p>
 
-    {/* Right: Theme toggle + Auth */}
-    <div className="flex items-center gap-4">
+    {/* Right: Theme toggle + Auth + Mobile nav */}
+    <div className="flex items-center gap-2">
       <ThemeToggle />
-      <SignedOut>
-        <SignInButton>
-          <Button variant="ghost">Sign in</Button>
-        </SignInButton>
-        <SignUpButton>
-          <Button>Sign up</Button>
-        </SignUpButton>
-      </SignedOut>
-      <SignedIn>
-        <UserButton />
-      </SignedIn>
+      {/* Desktop auth - removed from flex flow on mobile */}
+      <div className="hidden items-center gap-4 sm:flex">
+        <SignedOut>
+          <SignInButton>
+            <Button variant="ghost">Sign in</Button>
+          </SignInButton>
+          <SignUpButton>
+            <Button>Sign up</Button>
+          </SignUpButton>
+        </SignedOut>
+        <SignedIn>
+          <UserButton />
+        </SignedIn>
+      </div>
+      {/* Mobile hamburger - visible only on mobile */}
+      <MobileNav />
     </div>
   </nav>
 );
diff --git a/components/navigation/theme-toggle.tsx b/components/navigation/theme-toggle.tsx
index b922db9..3901ec6 100644
--- a/components/navigation/theme-toggle.tsx
+++ b/components/navigation/theme-toggle.tsx
@@ -12,13 +12,13 @@ export function ThemeToggle() {
   useEffect(() => setMounted(true), []);
 
   if (!mounted) {
-    return <div className="size-9" aria-hidden="true" />;
+    return <div className="size-10" aria-hidden="true" />;
   }
 
   return (
     <Button
       variant="ghost"
-      size="icon"
+      size="icon-lg"
       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
       className="text-sidebar-foreground"
       aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 72c4ced..6fc50bd 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -21,6 +21,9 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
         gradient:
           "bg-[image:var(--gradient-primary)] text-white hover:opacity-90",
+        soft: "bg-card dark:bg-secondary hover:opacity-90",
+        muted:
+          "bg-secondary dark:bg-card text-secondary-foreground dark:text-card-foreground border border-secondary hover:opacity-90",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..5f97497
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-foreground/5 backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
diff --git a/e2e/mobile-nav-user-flow.spec.ts b/e2e/mobile-nav-user-flow.spec.ts
new file mode 100644
index 0000000..1f19256
--- /dev/null
+++ b/e2e/mobile-nav-user-flow.spec.ts
@@ -0,0 +1,44 @@
+import { expect, test } from "@playwright/test";
+import { NAV_LINKS } from "@/components/navigation/constants";
+
+test.describe("Mobile navigation user flow", () => {
+  test.use({ viewport: { width: 375, height: 667 } }); // iPhone SE
+
+  test("user can open mobile menu and navigate to each page", async ({
+    page,
+  }) => {
+    await page.goto("/");
+
+    for (const link of NAV_LINKS) {
+      // Open mobile menu
+      await page.getByRole("button", { name: /open navigation/i }).click();
+
+      // Verify link is visible in menu
+      const navLink = page.getByRole("link", { name: link.label });
+      await expect(navLink).toBeVisible();
+
+      // Click link and verify navigation
+      await navLink.click();
+      await expect(page).toHaveURL(link.route);
+
+      // Menu should close after navigation
+      await expect(navLink).not.toBeVisible();
+    }
+  });
+
+  test("mobile menu closes when user clicks outside", async ({ page }) => {
+    await page.goto("/");
+
+    // Open menu
+    await page.getByRole("button", { name: /open navigation/i }).click();
+    await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
+
+    // Close by clicking the overlay (far right, outside the sheet)
+    const viewport = page.viewportSize();
+    if (!viewport) throw new Error("Viewport size not available");
+    await page
+      .locator('[data-slot="sheet-overlay"]')
+      .click({ position: { x: viewport.width - 10, y: 300 } });
+    await expect(page.getByRole("link", { name: "Home" })).not.toBeVisible();
+  });
+});
diff --git a/package-lock.json b/package-lock.json
index aba430e..68720f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@clerk/nextjs": "^6.36.1",
         "@clerk/themes": "^2.4.43",
+        "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-slot": "^1.2.4",
         "@vercel/analytics": "^1.6.1",
         "@vercel/speed-insights": "^1.3.1",
@@ -2015,6 +2016,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -2030,6 +2037,249 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
@@ -2048,6 +2298,91 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.53",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@@ -2885,7 +3220,7 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^19.2.0"
@@ -3151,6 +3486,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -3478,6 +3825,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -3709,6 +4062,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -5567,6 +5929,75 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -6196,6 +6627,49 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
diff --git a/package.json b/package.json
index d300b77..79202c3 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
   "dependencies": {
     "@clerk/nextjs": "^6.36.1",
     "@clerk/themes": "^2.4.43",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
diff --git a/x_docs/figma/nav-over-breakpoints.jpg b/x_docs/figma/nav-over-breakpoints.jpg
new file mode 100755
index 0000000..9ea5582
Binary files /dev/null and b/x_docs/figma/nav-over-breakpoints.jpg differ
diff --git a/x_docs/figma/nav-over-breakpoints.md b/x_docs/figma/nav-over-breakpoints.md
new file mode 100644
index 0000000..656922f
--- /dev/null
+++ b/x_docs/figma/nav-over-breakpoints.md
@@ -0,0 +1,140 @@
+# Target: Ho Nav (and layout) Should Work At Different Breakpoints
+
+The image [nav-over-breakpoints.jpg](x_docs/figma/nav-over-breakpoints.jpg) contains 5 screenshots of the target UI for navigation. The content of this document describes what the image shows visually. This content is concerned with layout more than UI details like text, link names etc. The five screenshots in the image are taken on the ask-questions page of the implemented course project follow along. It is my goal to pragmatically align to this following elegant and best practices.
+
+---
+
+## Breakpoint Analysis
+
+| # | Breakpoint | Range | Layout |
+|:--|:-----------|:------|:-------|
+| 1 | `< sm` | 0–639px | Mobile, nav closed |
+| 2 | `< sm` | 0–639px | Mobile, nav open (sheet) |
+| 3 | `sm` to `lg` | 640–1023px | Icon-only sidebar |
+| 4 | `lg` to `xl` | 1024–1279px | Full sidebar |
+| 5 | `≥ xl` | 1280px+ | Full sidebar + right sidebar |
+
+---
+
+## Navigation Description (Design Terminology)
+
+### Screenshot 1: Mobile Closed (< 640px)
+
+- **Top bar** with logo, CTA button ("Ask a Question"), and **hamburger icon**
+- **Off-canvas navigation** is hidden
+- Single-column content layout
+
+### Schreenshot 2: Mobile Open (< 640px)
+
+- **Sheet/drawer** slides in from left (overlay pattern)
+- **Vertical navigation list** with icons + labels
+- **Primary nav items**: Home, Community, Collections, Find Jobs, Tags, Ask a question
+- **Auth actions** pinned to bottom: Log in, Sign up
+- Dark scrim behind sheet
+
+### Screenshot 3: Icon-Only Sidebar (640–1023px)
+
+- **Persistent rail navigation** (narrow vertical bar)
+- Icons only, no labels visible
+- **Interaction**: When user clicks an icon in the rail (screenshot 3), it navigates directly, no tooltip/popover
+- **Top bar** now shows full logo ("DevOverflow") + search field
+- Two-column layout: rail + main content
+
+### Screenshot 4: Full Sidebar (1024–1279px)
+
+- **Persistent sidebar** with icons + labels
+- Fixed width (appears ~220px / `w-56`)
+- Same nav items as mobile sheet
+- Two-column layout: sidebar + main content
+
+### Screenshot 5: Three-Column (≥ 1280px)
+
+- Full left sidebar (unchanged)
+- Main content (centre)
+- **Right sidebar** with contextual widgets e.g. "Top Questions" in screenshot (5)
+- Three-column layout
+- Pages requiring right sidebar: root, ask-question, collections.
+
+## Right Sidebar: how to structure now for later
+
+Three pages require a right sidebar (root, ask-question, collections). I am wondering if perhaps it is I know best practice to organise routes to support this three-column layout.
+
+The current route structure is:
+
+```bash
+~/projects/nextjs/devflow/app/(root) git:(mobile-nav) ✗ 
+$ tree .
+.
+├── ask-question
+│   └── page.tsx
+├── collections
+│   └── page.tsx
+├── community
+│   └── page.tsx
+├── jobs
+│   └── page.tsx
+├── layout.tsx
+├── page.tsx
+├── profile
+│   └── page.tsx
+└── tags
+    └── page.tsx
+
+7 directories, 8 files
+```
+
+This is **an idea only from a beginner who is unfamiliar with best practice:**
+
+<idea>
+
+## Structure
+
+```text
+app/(root)
+├── (with-right-sidebar)
+│   ├── layout.tsx        ← includes RightSidebar
+│   ├── page.tsx          ← home
+│   ├── ask-question
+│   │   └── page.tsx
+│   └── collections
+│       └── page.tsx
+├── (without-right-sidebar)
+│   ├── community
+│   │   └── page.tsx
+│   ├── jobs
+│   │   └── page.tsx
+│   ├── profile
+│   │   └── page.tsx
+│   └── tags
+│       └── page.tsx
+└── layout.tsx            ← shared: Navbar + LeftSidebar
+```
+
+---
+
+## How It Works
+
+**Root layout** (all pages):
+
+```tsx
+// app/(root)/layout.tsx
+<Navbar />
+<div className="flex">
+  <LeftSidebar />
+  <main className="flex-1">{children}</main>
+</div>
+```
+
+**With-right-sidebar layout** (3 pages):
+
+```tsx
+// app/(root)/(with-right-sidebar)/layout.tsx
+<div className="flex">
+  {children}
+  <RightSidebar className="hidden xl:block" />
+</div>
+```
+
+The nested layout wraps only those three routes.
+
+</idea>
diff --git a/x_docs/images/app_screenshot.jpg b/x_docs/images/app_screenshot.jpg
deleted file mode 100755
index 21d4a2a..0000000
Binary files a/x_docs/images/app_screenshot.jpg and /dev/null differ
diff --git a/x_docs/images/github-social-thin.jpg b/x_docs/images/github-social-thin.jpg
deleted file mode 100755
index 80b2e81..0000000
Binary files a/x_docs/images/github-social-thin.jpg and /dev/null differ
diff --git a/x_docs/own/2024-12-14-eval-auth-ui-customise.md b/x_docs/mine/2025-12-14-eval-auth-ui-customise.md
similarity index 100%
rename from x_docs/own/2024-12-14-eval-auth-ui-customise.md
rename to x_docs/mine/2025-12-14-eval-auth-ui-customise.md
diff --git a/x_docs/mine/2025-12-17-make-mobile-nav.md b/x_docs/mine/2025-12-17-make-mobile-nav.md
new file mode 100644
index 0000000..28613d5
--- /dev/null
+++ b/x_docs/mine/2025-12-17-make-mobile-nav.md
@@ -0,0 +1,257 @@
+# Mobile Navigation Implementation Guidance
+
+## Overview
+
+Build a mobile navigation menu for the DevFlow app using shadcn/ui Sheet component. The app uses a mobile-first Tailwind approach.
+
+## Figma Reference
+
+Review these designs before implementation:
+
+- **Mobile nav closed:** `x_docs/figma/mobile/dark-nav_close.png`
+- **Mobile nav open:** `x_docs/figma/mobile/dark-nav_open.png`
+
+> **Figma Note:** Implementation diverges minimally from Figma designs
+>
+> 1. Figma shows "Login/Signup" but use "Sign in" and "Sign up" to match the existing navbar.
+> 2. NAV_LINKS differ slightly in implementation - NAV_LINKS is the source of truth
+
+## Responsive Behaviour
+
+Using mobile-first Tailwind: the hamburger menu is the default, hidden at `sm:` and above.
+
+| Screen Width | Navigation Style |
+|--------------|------------------|
+| Below `sm` (< 640px) | Hamburger icon → opens Sheet |
+| `sm` and above (≥ 640px) | Desktop nav (no changes needed) |
+
+---
+
+## Implementation Requirements
+
+### 1. Navigation Constants
+
+**Create:** `components/navigation/constants.ts`
+
+Centralised nav links used by both mobile nav (now) and desktop sidebar (future).
+
+> **Figma Note:** This list diverges slightly from the Figma designs (e.g., includes Profile). This is the source of truth.
+
+```ts
+export const NAV_LINKS = [
+  { imgURL: "/icons/home.svg", route: "/", label: "Home" },
+  { imgURL: "/icons/users.svg", route: "/community", label: "Community" },
+  { imgURL: "/icons/star.svg", route: "/collections", label: "Collections" },
+  { imgURL: "/icons/suitcase.svg", route: "/jobs", label: "Find Jobs" },
+  { imgURL: "/icons/tag.svg", route: "/tags", label: "Tags" },
+  { imgURL: "/icons/question.svg", route: "/ask-question", label: "Ask a question" },
+  { imgURL: "/icons/user.svg", route: "/profile", label: "Profile" }, // See Appendix
+] as const;
+```
+
+Icons exist in `public/icons/`.
+
+---
+
+### 2. Navbar Modifications
+
+**File:** `components/navigation/navbar.tsx`
+
+**Below `sm` breakpoint:**
+
+- Keep logo as-is (compact icon)
+- Keep theme toggle as-is
+- Add hamburger icon (`public/icons/hamburger.svg`) — visible only below `sm`
+- Hide "Sign in" and "Sign up" buttons (they move into the Sheet)
+
+**At `sm` and above:**
+
+- No changes to current behaviour
+
+---
+
+### 3. New Mobile Nav Component
+
+**Create:** `components/navigation/mobile-nav.tsx`
+
+#### Sheet Configuration
+
+- Use shadcn/ui Sheet, sliding from the left
+- Width: default (no override)
+- Height: `calc(100vh - 80px)` — intentional gap at bottom (design choice IF POSSIBLE_
+- Reference docs:
+  - `/home/mp/projects/python/docs-for-ai/shadcn/sheet-shadcnui.md`
+  - `/home/mp/projects/python/docs-for-ai/shadcn/shadcn-sheet.md`
+
+#### Sheet Behaviour
+
+- Hamburger icon (`public/icons/hamburger.svg`) in navbar opens the Sheet
+- When open, hamburger transforms to X icon (`public/icons/close.svg`) in the same position
+- Clicking X closes the Sheet
+- Clicking overlay closes the Sheet
+- Clicking a nav link routes the user and auto-closes the Sheet
+
+#### Sheet Content (top to bottom)
+
+1. **Header:** Full logo (use `--logo-full-themed` CSS variable pattern from `globals.css`)
+2. **Navigation links:**
+   - Import from `constants.ts`
+   - Use `<Link>` elements (not buttons)
+   - Base styling: `text-lg text-foreground` with transparent background
+   - Active route: `font-bold bg-[image:var(--gradient-primary)] text-white rounded-lg`
+   - Non-active: `font-medium`
+   - Determine active state by matching `pathname` to route
+3. **Auth buttons (bottom):** See Section 4
+
+---
+
+### 4. Auth Buttons (Bottom of Sheet)
+
+Only visible when user is **signed out**. Use Clerk's `SignedOut` wrapper.
+
+| Button | Text | Styling |
+|--------|------|---------|
+| Sign in | "Sign in" | `variant="outline"` with `className="border-primary text-primary"` |
+| Sign up | "Sign up" | `variant="gradient"` |
+
+When **signed in**, hide this section entirely — users access account management via the `<UserButton />` in the header.
+
+> **Note:** This differs from the main navbar styling intentionally to match Figma.
+
+---
+
+### 5. Placeholder Pages
+
+Create placeholder pages in the `(app)` route group using the new shadcn/ui Empty component.
+
+**Install:**
+
+```bash
+npx shadcn@latest add empty
+```
+
+**Routes to create:**
+
+- `/community`
+- `/collections`
+- `/jobs`
+- `/tags`
+- `/ask-question`
+- `/profile`
+
+**Example usage:**
+
+```tsx
+import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from "@/components/ui/empty"
+
+export default function CommunityPage() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>Community</EmptyTitle>
+        <EmptyDescription>Coming soon</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  )
+}
+```
+
+---
+
+## Existing Code Reference
+
+| File | What to reference |
+|------|-------------------|
+| `components/navigation/navbar.tsx` | Current navbar structure, Clerk auth buttons |
+| `components/navigation/constants.ts` | Nav links (create this first) |
+| `components/navigation/theme-toggle.tsx` | Theme toggle pattern |
+| `components/ui/button.tsx` | `variant="outline"` and `variant="gradient"` for auth buttons |
+| `app/globals.css` | `--logo-full-themed`, `--gradient-primary` (also used in active link className) |
+| `components/clerk-provider.tsx` | Clerk theming setup |
+
+## Clerk Documentation
+
+For additional guidance on styling Clerk components:
+
+- Search Index for local official docs: `/home/mp/projects/python/docs-for-ai/clerk/INDEX.xml`
+
+---
+
+## Out of Scope
+
+- Desktop left sidebar (future task)
+
+## Appendix - Working with `clerk` UI
+
+I installed clerk via `npx shadcn@latest add @clerk/nextjs-quickstart` which means I have pre-built UI components from Clerk. These are conversations I had with the clerk AI documentation assistant that will be useful:
+
+### Styling Clerk Components
+
+Here are some pointers from the Clerk Docs AI Assistant inbetween tags `<clerk_docs_conversation1>`
+
+<clerk_docs_conversation1>
+
+<my_question>can I use tailwind and variables that are in globals.css to style these pre-built components?</my_question>
+
+<ai_assistant_answer> Yes, you can style Clerk's pre-built components using both Tailwind classes and CSS variables from your `globals.css`.
+
+**For Tailwind CSS v4 specifically**, you need to set the `cssLayerName` property on your `<ClerkProvider>` to ensure Tailwind's utility styles are applied after Clerk's styles [(1)](~/projects/python/docs-for-ai/clerk/appearance-prop.md) :
+
+```tsx
+<ClerkProvider
+  appearance={{
+    cssLayerName: 'clerk',
+  }}
+>
+  {/* ... */}
+</ClerkProvider>
+```
+
+Then add this to your `globals.css` [(2)](~/projects/python/docs-for-ai/clerk/themes.md) :
+
+```css
+@import 'tailwindcss';
+@import '@clerk/themes/shadcn.css';
+```
+
+**To use Tailwind classes**, pass them through the `elements` property [(1)](~/projects/python/docs-for-ai/clerk/appearance-prop.md) :
+
+```tsx
+<SignIn
+  appearance={{
+    elements: {
+      formButtonPrimary: 'bg-slate-500 hover:bg-slate-400 text-sm',
+    },
+  }}
+/>
+```
+
+**To use CSS variables from your `globals.css`**, pass them to the `variables` property [(3)](~/projects/python/docs-for-ai/clerk/variables-prop.md) :
+
+```tsx
+<ClerkProvider
+  appearance={{
+    variables: {
+      colorPrimary: 'var(--your-primary-color)',
+      colorForeground: 'var(--your-text-color)',
+    },
+  }}
+>
+```
+
+Since you're using shadcn/ui, you can also use the `shadcn` theme which automatically adapts to both light and dark mode [(2)](~/projects/python/docs-for-ai/clerk/themes.md) .
+
+ [(1)](~/projects/python/docs-for-ai/clerk/appearance-prop.md)
+
+ [(2)](~/projects/python/docs-for-ai/clerk/themes.md)
+
+ [(3)](~/projects/python/docs-for-ai/clerk/variables-prop.md)
+
+For any further guidance, make use of the index to find relevant local documentation files `~/projects/python/docs-for-ai/clerk/INDEX.xml`
+</ai_assistant_answer>
+
+</clerk_docs_conversation1>
+
+### "Account" link in Mobile Nav
+
+> **Note:** This was considered but not implemented. Signed-in users access account management via the `<UserButton />` in the header. Keeping this conversation for future reference only.
diff --git a/x_docs/mine/2025-12-17-page-spacing.md b/x_docs/mine/2025-12-17-page-spacing.md
new file mode 100644
index 0000000..7928dd2
--- /dev/null
+++ b/x_docs/mine/2025-12-17-page-spacing.md
@@ -0,0 +1,273 @@
+# Page Spacing: Complete Reference Guide
+
+This document explains the spacing approach used in this project, the difference between padding and margin, and how to implement consistent page spacing across all routes.
+
+---
+
+## The Problem
+
+Your navbar uses `px-6` (24px horizontal padding), but your page content has zero padding. This causes misalignment:
+
+```text
+Navbar:     |  [Logo]              [Buttons]  |   <- px-6 insets content
+Page:       |Welcome to the world...          |   <- content at edge
+            ^                                  ^
+            Edge                               Edge
+```
+
+**Goal**: Define spacing in "one place" so all pages align with the navbar and have consistent gutters.
+
+---
+
+## Padding vs Margin Explained
+
+Both create space, but they work differently:
+
+```text
+PADDING vs MARGIN - ASCII Diagram
+=================================
+
+┌─────────────────────────────────────────────────────────────┐
+│                         MARGIN                              │
+│   (space OUTSIDE the element, pushes other elements away)   │
+│                                                             │
+│   ┌─────────────────────────────────────────────────────┐   │
+│   │                      BORDER                         │   │
+│   │   ┌─────────────────────────────────────────────┐   │   │
+│   │   │                 PADDING                     │   │   │
+│   │   │   (space INSIDE the element,                │   │   │
+│   │   │    between border and content)              │   │   │
+│   │   │                                             │   │   │
+│   │   │   ┌────────────────────────────────────┐    │   │   │
+│   │   │   │           CONTENT                  │    │   │   │
+│   │   │   │     (your text, images, etc.)      │    │   │   │
+│   │   │   └────────────────────────────────────┘    │   │   │
+│   │   │                                             │   │   │
+│   │   └─────────────────────────────────────────────┘   │   │
+│   │                                                     │   │
+│   └─────────────────────────────────────────────────────┘   │
+│                                                             │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Key Difference
+
+- **PADDING**: Creates space INSIDE an element (background colour fills this space)
+- **MARGIN**: Creates space OUTSIDE an element (transparent, pushes siblings away)
+
+### When to Use Each
+
+| Use **Padding** when... | Use **Margin** when... |
+|------------------------|------------------------|
+| You want background colour to extend | You want space between sibling elements |
+| Creating consistent page gutters | Separating cards or sections vertically |
+| The container "owns" the space | Collapsing space between elements is OK |
+
+**For page gutters (your case): Use PADDING.**
+
+Why? If you later add a background colour to your main content area, you want it to extend to the edges while keeping content inset. Padding also has more predictable behaviour with flexbox/grid and is easier to maintain consistently.
+
+---
+
+## The Solution: Layout-Level Padding
+
+### The Problem (Before)
+
+```text
+┌──────────────────────────────────────────────────────────────┐
+│ Navbar              │ px-6 │            │ px-6 │    Navbar   │
+├──────────────────────────────────────────────────────────────┤
+│Content touches edge │      │            │      │ Content     │
+│<h1>Welcome</h1>     │      │            │      │ touches edge│
+└──────────────────────────────────────────────────────────────┘
+  ↑                                                          ↑
+  No padding - content misaligned with navbar
+```
+
+### The Solution (After)
+
+```text
+┌──────────────────────────────────────────────────────────────┐
+│ Navbar              │ px-6 │            │ px-6 │    Navbar   │
+├──────────────────────────────────────────────────────────────┤
+│ │ px-6 │ Content now│      │            │      │ px-6 │      │
+│ │      │ aligned    │      │            │      │      │      │
+│ │      │<h1>Welcome │      │            │      │      │      │
+└──────────────────────────────────────────────────────────────┘
+    ↑                                                ↑
+    Padding from <main> wrapper aligns with navbar
+```
+
+### With Max-Width Container (Recommended)
+
+```text
+┌──────────────────────────────────────────────────────────────────────────┐
+│ │ px-6 │ Navbar content          max-w-7xl (1280px)           │ px-6 │   │
+├──────────────────────────────────────────────────────────────────────────┤
+│ │      │   ┌─────────────────────────────────────────────┐    │      │   │
+│ │ auto │   │  Page content centred within max-width      │    │ auto │   │
+│ │margin│   │  Readable line lengths on large screens     │    │margin│   │
+│ │      │   └─────────────────────────────────────────────┘    │      │   │
+└──────────────────────────────────────────────────────────────────────────┘
+              ↑                                          ↑
+              mx-auto centres the container on wide screens
+```
+
+### Visual Proof (Mobile)
+
+```text
+400px Mobile - Before:
++---------------------------+
+| [Logo]    [icons] [menu]  |  <- navbar px-6
+|TOP OF PAGE: words words...|  <- NO padding, text at edge
++---------------------------+
+
+400px Mobile - After:
++---------------------------+
+| [Logo]    [icons] [menu]  |  <- navbar px-6
+|  TOP OF PAGE: words...    |  <- px-6 matches navbar
++---------------------------+
+     ^-- Content now aligns with logo
+```
+
+---
+
+## Tailwind Classes Reference
+
+| Class | CSS Equivalent | Purpose |
+|-------|----------------|---------|
+| `px-6` | `padding-left: 1.5rem; padding-right: 1.5rem` | 24px horizontal padding |
+| `py-6` | `padding-top: 1.5rem; padding-bottom: 1.5rem` | 24px vertical padding |
+| `max-w-7xl` | `max-width: 80rem` | Caps width at 1280px for readability |
+| `mx-auto` | `margin-left: auto; margin-right: auto` | Centres element horizontally |
+| `flex-1` | `flex-grow: 1` | Takes available space in flex container |
+| `w-full` | `width: 100%` | Spans full width of parent |
+
+---
+
+## Implementation
+
+### Recommended: The Layout File
+
+The consistent page spacing is defined in **one place**:
+
+**File**: `app/(root)/layout.tsx`
+
+```tsx
+// BEFORE (current)
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+    </>
+  );
+};
+
+// AFTER (with consistent spacing)
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <Navbar />
+      <main className="mx-auto w-full max-w-7xl flex-1 px-6 py-6">
+        {children}
+      </main>
+    </>
+  );
+};
+```
+
+**Why this works**:
+
+- `mx-auto` — centres the container horizontally on wide screens
+- `w-full` — takes full available width up to max-width
+- `max-w-7xl` — caps width at 1280px for readability
+- `flex-1` — expands to fill available vertical space (works with body's `flex min-h-full flex-col`)
+- `px-6` — matches navbar's horizontal padding (24px)
+- `py-6` — adds vertical breathing room below navbar (24px)
+
+### Why layout.tsx?
+
+1. **Single source of truth** — change once, applies everywhere
+2. **Semantic HTML** — `<main>` wraps page content properly
+3. **Matches navbar** — both use `px-6`, content aligns perfectly
+
+### Alternative: A Custom Wrapper Component
+
+If you need more flexibility (some pages full-width, others not):
+
+```tsx
+// components/page-container.tsx
+export function PageContainer({ children, className }) {
+  return (
+    <main className={cn("px-6", className)}>
+      {children}
+    </main>
+  );
+}
+```
+
+But for most apps, layout.tsx is simpler and sufficient.
+
+---
+
+## Refactoring Plan
+
+### Files to Modify
+
+| File | Action | Purpose |
+|------|--------|---------|
+| `app/(root)/layout.tsx` | Modify | Add `<main>` wrapper with spacing classes |
+| `components/ui/empty.tsx` | Replace | Use original shadcn/ui version via CLI |
+| `app/(root)/jobs/page.tsx` | Clean up | Remove debug content added for visualisation |
+| `spacing-explained.md` | Create | Documentation (this file) |
+
+### Step 1: Update the Layout
+
+Edit `app/(root)/layout.tsx` to add the `<main>` wrapper as shown above.
+
+### Step 2: Reset Empty Component
+
+Run shadcn/ui CLI to get the original component:
+
+```bash
+npx shadcn@latest add empty --overwrite
+```
+
+This ensures the Empty component matches the official shadcn/ui version.
+
+### Step 3: Clean Up Jobs Page Debug Content
+
+Remove the debug `<div>` elements and `{"words ".repeat(100)}` content that were added for visualisation testing. Keep only the `<Empty>` component with appropriate content.
+
+### Step 4: Verify Alignment
+
+Take new screenshots at 400px and 1000px to confirm content aligns with navbar.
+
+### Step 5: Consider Responsive Adjustments (Optional)
+
+When ready for larger screens, you can increase padding:
+
+```tsx
+<main className="px-6 md:px-8 lg:px-12">
+```
+
+But start with mobile-first `px-6` to match your navbar.
+
+---
+
+## Expected Results
+
+After implementation:
+
+- All page content has consistent 24px horizontal padding (matching navbar)
+- Content is centred with max-width 1280px on large screens
+- 24px vertical gap between navbar and page content
+- Pages using Empty will have additional internal padding (Empty's own `p-6`), which is appropriate for empty states
+- All pages automatically inherit this spacing without needing individual configuration
+
+---
+
+## Summary
+
+Add `px-6` to a `<main>` wrapper in your `layout.tsx`. Done.
diff --git a/x_docs/own/WORDS.md b/x_docs/mine/WORDS.md
similarity index 100%
rename from x_docs/own/WORDS.md
rename to x_docs/mine/WORDS.md
diff --git a/x_docs/mine/caching-explained-1.md b/x_docs/mine/caching-explained-1.md
new file mode 100644
index 0000000..aa59ef7
--- /dev/null
+++ b/x_docs/mine/caching-explained-1.md
@@ -0,0 +1,395 @@
+# Next.js 16 Rendering & Caching Explained
+
+> For DevOverflow: A Q&A platform for developers
+
+## The Big Picture
+
+Next.js 16 introduces **Cache Components**, a new model that changes how rendering works:
+
+- **Old model**: Caching was implicit and confusing
+- **New model**: All code is dynamic by default; caching is opt-in and explicit
+
+This means you choose what to cache, rather than figuring out what Next.js cached automatically.
+
+---
+
+## Build Output Symbols
+
+When you run `npm run build`, you'll see these symbols:
+
+| Symbol | Name | What It Means |
+|--------|------|---------------|
+| ○ | Static | Built once at build time, served instantly from CDN |
+| ◐ | Partial Prerender | Static shell loads instantly, dynamic parts stream in |
+| ƒ | Dynamic | Rendered fresh on every request |
+
+**Your current build:**
+
+```
+○  /_not-found        <- Good: static error page
+◐  /sign-in, /sign-up <- Good: Clerk uses PPR automatically
+ƒ  Everything else    <- Could be optimised with caching
+```
+
+---
+
+## The Three Types of Content
+
+### 1. Static Content (Automatic)
+
+Content that doesn't fetch data or use request APIs is automatically included in the static shell:
+
+```tsx
+// This is automatically static - no special handling needed
+export default function Layout({ children }) {
+  return (
+    <div>
+      <h1>DevOverflow</h1>  {/* Static */}
+      <nav>...</nav>         {/* Static */}
+      {children}
+    </div>
+  )
+}
+```
+
+### 2. Cached Content (`'use cache'`)
+
+Data that can be shared across users and doesn't change frequently:
+
+```tsx
+import { cacheLife } from 'next/cache'
+
+async function QuestionsList() {
+  'use cache'
+  cacheLife('minutes')  // Revalidate every 5 minutes
+
+  const questions = await db.query('SELECT * FROM questions')
+  return <ul>...</ul>
+}
+```
+
+### 3. Dynamic Content (`<Suspense>`)
+
+Content that needs request data (cookies, headers) or must be fresh per-request:
+
+```tsx
+import { Suspense } from 'react'
+import { cookies } from 'next/headers'
+
+export default function Page() {
+  return (
+    <>
+      <QuestionsList />  {/* Cached - in static shell */}
+
+      <Suspense fallback={<p>Loading...</p>}>
+        <UserPreferences />  {/* Dynamic - streams at request time */}
+      </Suspense>
+    </>
+  )
+}
+
+async function UserPreferences() {
+  const session = (await cookies()).get('session')
+  // ... user-specific content
+}
+```
+
+---
+
+## Enabling Cache Components
+
+Add to your `next.config.ts`:
+
+```ts
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  cacheComponents: true,
+}
+
+export default nextConfig
+```
+
+This enables:
+
+- Partial Prerendering (PPR)
+- The `'use cache'` directive
+- `cacheLife()` and `cacheTag()` functions
+
+---
+
+## Cache Profiles
+
+Built-in `cacheLife` profiles:
+
+| Profile | Use Case | Rough Duration |
+|---------|----------|----------------|
+| `'seconds'` | Real-time data | ~1 second |
+| `'minutes'` | Frequently updated | ~5 minutes |
+| `'hours'` | Semi-static content | ~1 hour |
+| `'days'` | Rarely changing | ~1 day |
+| `'weeks'` | Very stable content | ~1 week |
+| `'max'` | Effectively permanent | Very long |
+
+Or use custom values:
+
+```tsx
+cacheLife({
+  stale: 300,      // Serve stale for 5 mins
+  revalidate: 600, // Revalidate after 10 mins
+  expire: 3600,    // Expire after 1 hour
+})
+```
+
+---
+
+## DevOverflow Route Recommendations
+
+| Route | Strategy | Why |
+|-------|----------|-----|
+| `/` | `'use cache'` + `cacheLife('minutes')` | Questions list updates but not per-user |
+| `/tags` | `'use cache'` + `cacheLife('hours')` | Tags rarely change |
+| `/jobs` | `'use cache'` + `cacheLife('hours')` | Job listings update periodically |
+| `/community` | `'use cache'` + `cacheLife('hours')` | Community list is fairly stable |
+| `/questions/[id]` | `'use cache'` + `cacheTag()` | Cache individual questions, invalidate on answer |
+| `/profile` | Dynamic with `<Suspense>` | User-specific, needs auth |
+| `/collections` | Dynamic with `<Suspense>` | User's saved items |
+| `/ask-question` | Static shell | Just a form, no server data needed |
+
+---
+
+## Practical Examples for DevOverflow
+
+### Home Page with Mixed Content
+
+```tsx
+// app/(root)/page.tsx
+import { Suspense } from 'react'
+import { cacheLife, cacheTag } from 'next/cache'
+import { cookies } from 'next/headers'
+
+export default function HomePage() {
+  return (
+    <>
+      {/* Static - automatic */}
+      <h1>All Questions</h1>
+
+      {/* Cached - shared by all users */}
+      <RecentQuestions />
+      <PopularTags />
+
+      {/* Dynamic - user-specific */}
+      <Suspense fallback={<div>Loading recommendations...</div>}>
+        <PersonalisedContent />
+      </Suspense>
+    </>
+  )
+}
+
+async function RecentQuestions() {
+  'use cache'
+  cacheLife('minutes')
+  cacheTag('questions')
+
+  const questions = await db.query(`
+    SELECT * FROM questions
+    ORDER BY created_at DESC
+    LIMIT 20
+  `)
+  return <QuestionList questions={questions} />
+}
+
+async function PopularTags() {
+  'use cache'
+  cacheLife('hours')
+  cacheTag('tags')
+
+  const tags = await db.query('SELECT * FROM tags ORDER BY count DESC LIMIT 10')
+  return <TagList tags={tags} />
+}
+
+async function PersonalisedContent() {
+  const session = (await cookies()).get('session')?.value
+  if (!session) return null
+
+  // Fetch user-specific recommendations
+  const recommendations = await getUserRecommendations(session)
+  return <RecommendedQuestions items={recommendations} />
+}
+```
+
+### Question Detail Page with On-Demand Revalidation
+
+```tsx
+// app/(root)/questions/[id]/page.tsx
+import { cacheLife, cacheTag } from 'next/cache'
+
+export default async function QuestionPage({
+  params
+}: {
+  params: Promise<{ id: string }>
+}) {
+  const { id } = await params
+
+  return (
+    <>
+      <QuestionContent id={id} />
+      <Answers id={id} />
+    </>
+  )
+}
+
+async function QuestionContent({ id }: { id: string }) {
+  'use cache'
+  cacheLife('hours')
+  cacheTag(`question-${id}`)
+
+  const question = await db.query('SELECT * FROM questions WHERE id = ?', [id])
+  return <QuestionCard question={question} />
+}
+
+async function Answers({ id }: { id: string }) {
+  'use cache'
+  cacheLife('minutes')
+  cacheTag(`answers-${id}`)
+
+  const answers = await db.query('SELECT * FROM answers WHERE question_id = ?', [id])
+  return <AnswerList answers={answers} />
+}
+```
+
+### Server Action to Post Answer and Invalidate Cache
+
+```tsx
+// app/lib/actions.ts
+'use server'
+
+import { updateTag } from 'next/cache'
+import { redirect } from 'next/navigation'
+
+export async function postAnswer(questionId: string, formData: FormData) {
+  const content = formData.get('content')
+
+  // Save to database
+  await db.query('INSERT INTO answers (question_id, content) VALUES (?, ?)', [
+    questionId,
+    content,
+  ])
+
+  // Immediately invalidate cache - user sees their answer right away
+  updateTag(`answers-${questionId}`)
+
+  redirect(`/questions/${questionId}`)
+}
+```
+
+---
+
+## Revalidation Cheat Sheet
+
+| API | When to Use | Where |
+|-----|-------------|-------|
+| `cacheLife('hours')` | Set how long to cache | Inside `'use cache'` |
+| `cacheTag('posts')` | Tag data for targeted invalidation | Inside `'use cache'` |
+| `updateTag('posts')` | User action - show changes immediately | Server Actions only |
+| `revalidateTag('posts', 'max')` | Background event - eventual consistency | Server Actions or Route Handlers |
+| `revalidatePath('/posts')` | Invalidate entire route | Server Actions or Route Handlers |
+
+**Rule of thumb:**
+
+- User submits form -> `updateTag()` (immediate feedback)
+- Webhook/external event -> `revalidateTag()` (background update)
+
+---
+
+## What Triggers Dynamic Rendering?
+
+These APIs make a route (or component) dynamic:
+
+- `cookies()` - Reading user cookies
+- `headers()` - Reading request headers
+- `searchParams` - URL query parameters
+- `connection()` - Explicitly defer to request time
+
+If you use these outside a `<Suspense>` boundary with Cache Components enabled, you'll get an error:
+
+```
+Error: Uncached data was accessed outside of <Suspense>
+```
+
+**Fix:** Wrap the dynamic part in `<Suspense>`:
+
+```tsx
+<Suspense fallback={<Loading />}>
+  <ComponentThatUsesCookies />
+</Suspense>
+```
+
+---
+
+## Migration from Old Patterns
+
+### ISR (Incremental Static Regeneration)
+
+```tsx
+// OLD (deprecated)
+export const revalidate = 3600
+
+export default async function Page() {
+  const data = await fetch('...')
+  return <div>{data}</div>
+}
+
+// NEW
+import { cacheLife } from 'next/cache'
+
+export default async function Page() {
+  'use cache'
+  cacheLife('hours')
+
+  const data = await fetch('...')
+  return <div>{data}</div>
+}
+```
+
+### Force Dynamic
+
+```tsx
+// OLD (no longer needed)
+export const dynamic = 'force-dynamic'
+
+// NEW - just don't add 'use cache'
+// Routes are dynamic by default
+```
+
+### Force Static
+
+```tsx
+// OLD
+export const dynamic = 'force-static'
+
+// NEW
+import { cacheLife } from 'next/cache'
+
+export default async function Page() {
+  'use cache'
+  cacheLife('max')
+  // ...
+}
+```
+
+---
+
+## Summary
+
+1. **Enable Cache Components** in `next.config.ts`
+2. **Static content** is automatic - no work needed
+3. **Use** `'use cache'` + `cacheLife()` for cached content
+4. **Dynamic content** wraps in `<Suspense>`
+5. **Invalidate** with `updateTag()` (immediate) or `revalidateTag()` (background)
+
+For DevOverflow specifically:
+
+- Cache public listings (questions, tags, jobs, community)
+- Keep auth-dependent pages dynamic (profile, collections)
+- Use `cacheTag()` for granular invalidation when users post/edit
diff --git a/x_docs/mine/caching-explained-2.md b/x_docs/mine/caching-explained-2.md
new file mode 100644
index 0000000..d099aba
--- /dev/null
+++ b/x_docs/mine/caching-explained-2.md
@@ -0,0 +1,248 @@
+# Next.js 16 Rendering & Caching: A Conceptual Guide
+
+> Understanding *what* to ask for and *when*
+
+---
+
+## The Mental Model
+
+In Next.js 16, think of every page as having three layers:
+
+1. **The Shell** - Layout, navigation, headings. Built once, served instantly.
+2. **Shared Content** - Data everyone sees the same (questions list, tags). This data can be cached.
+3. **Personal Content** - Data specific to the viewer (their profile, saved items). Must be fresh.
+
+The key insight: **you decide what goes in each layer**. Next.js 16 doesn't guess any more - you explicitly mark what should be cached.
+
+---
+
+## The Three Questions
+
+When building any page or component, ask yourself:
+
+### 1. "Is this the same for everyone?"
+
+- **Yes** → Cache it. All users see the same content.
+- **No** → It's personal/dynamic.
+
+### 2. "How fresh does it need to be?"
+
+- **This data can be minutes or hours old** → Cache with a time limit.
+- **Must be real-time** → Don't cache, fetch every request.
+- **Fresh until something changes** → Cache with tags, invalidate on events.
+
+### 3. "Does it need cookies, headers, or the URL query?"
+
+- **Yes** → It's dynamic. Wrap in Suspense.
+- **No** → It can be cached or static.
+
+---
+
+## Decision Tree
+
+```
+START: What kind of content is this?
+│
+├─► Static text, images, layout
+│   └─► Do nothing. Automatically in the static shell.
+│
+├─► Data from database/API
+│   │
+│   ├─► Same for all users?
+│   │   │
+│   │   ├─► YES: How often does it change?
+│   │   │   ├─► Rarely (tags, categories) ──► Cache for hours/days
+│   │   │   ├─► Sometimes (posts, jobs) ───► Cache for minutes
+│   │   │   └─► Constantly (live feed) ────► Don't cache
+│   │   │
+│   │   └─► NO: User-specific data
+│   │       └─► Make it dynamic with Suspense
+│   │
+│   └─► Needs cookies/auth to fetch?
+│       └─► YES ──► Dynamic with Suspense
+│
+└─► Form or interactive UI
+    └─► Static shell is fine. Client handles interaction.
+```
+
+---
+
+## What Each Strategy Gives You
+
+### Static (automatic)
+
+**What it is**: Content built once at deploy time.
+
+**Good for**: Layouts, navigation, marketing copy, error pages.
+
+**Trade-off**: Fastest possible, but never changes until you redeploy.
+
+**You get**: Instant load from CDN edge, globally.
+
+---
+
+### Cached (opt-in with time limit)
+
+**What it is**: Data fetched once, then reused for a period.
+
+**Good for**: Lists that update but don't need real-time freshness - questions, tags, job listings.
+
+**Trade-off**: Fast, but users might see slightly stale data.
+
+**You get**: Near-instant loads, reduced database/API calls.
+
+**Freshness options**:
+
+- "Revalidate every 5 minutes" - time-based
+- "Revalidate when I tell you" - on-demand via tags
+
+---
+
+### Cached with Tags (surgical invalidation)
+
+**What it is**: Cached data you can invalidate precisely when something changes.
+
+**Good for**: Individual items (a specific question, a user profile) where you know when it changes.
+
+**Trade-off**: Slightly more setup, but gives you cache speed with on-demand freshness.
+
+**You get**: Fast reads, instant updates when needed.
+
+---
+
+### Dynamic (per-request)
+
+**What it is**: Fresh data fetched on every single request.
+
+**Good for**: Personalised content, auth-dependent data, real-time information.
+
+**Trade-off**: Slower (server must work each time), but always fresh and personal.
+
+**You get**: The right data for each user, every time.
+
+---
+
+### Partial Prerender (the hybrid)
+
+**What it is**: Static shell loads instantly, dynamic parts stream in after.
+
+**Good for**: Pages that are mostly cacheable but have one personal section.
+
+**Trade-off**: Best of both worlds, but requires you to structure components properly.
+
+**You get**: Fast initial paint, then personalised content appears.
+
+---
+
+## DevOverflow Routes Applied
+
+| Route | Content Type | Strategy | Why |
+|-------|--------------|----------|-----|
+| `/` | Questions list | Cached (minutes) | Same for everyone, updates regularly |
+| `/tags` | Tag list | Cached (hours) | Rarely changes |
+| `/jobs` | Job listings | Cached (hours) | Updates periodically |
+| `/community` | User list | Cached (hours) | Fairly stable |
+| `/questions/[id]` | Single question | Cached with tag | Same for everyone, invalidate on new answer |
+| `/profile` | User's own data | Dynamic | Needs auth, personal |
+| `/collections` | User's saved items | Dynamic | Needs auth, personal |
+| `/ask-question` | Empty form | Static shell | No server data needed |
+| `/sign-in`, `/sign-up` | Auth forms | PPR (automatic) | Clerk handles this |
+
+---
+
+## What to Ask Claude Code For
+
+Use these phrases when you want specific behaviours:
+
+### For cached public content
+>
+> "Cache this component/page with hourly revalidation"
+>
+> "Cache the questions list and revalidate every 5 minutes"
+>
+> "Add cache tags so I can invalidate when a new question is posted"
+
+### For dynamic personal content
+>
+> "Make this component dynamic - it needs to read cookies"
+>
+> "Wrap this in Suspense with a loading skeleton"
+>
+> "This needs to fetch fresh data on every request"
+
+### For cache invalidation
+>
+> "When a user posts an answer, invalidate the question's cache immediately"
+>
+> "Add a server action that clears the questions cache"
+>
+> "Use updateTag for immediate feedback after form submission"
+
+### For loading states
+>
+> "Add a loading.tsx for this route"
+>
+> "Show a skeleton while this streams in"
+>
+> "Add Suspense boundaries around the dynamic parts"
+
+### For understanding your build
+>
+> "Why is this route showing as dynamic in the build output?"
+>
+> "What's making this page render on every request?"
+>
+> "How can I make this route static/cached?"
+
+---
+
+## Glossary
+
+**Static Shell**
+The HTML that's built at deploy time. Includes layouts, navigation, and any content that doesn't need data fetching.
+
+**Streaming**
+Sending parts of a page as they become ready, rather than waiting for everything. Users see content progressively.
+
+**Suspense**
+React's way of saying "show this fallback while waiting for that content". Essential for streaming dynamic content.
+
+**PPR (Partial Prerendering)**
+A page that's partly static (loads instantly) and partly dynamic (streams in). The static parts are the "shell".
+
+**Cache Components**
+Next.js 16's new opt-in system. Enable it to use `'use cache'` directive and related APIs.
+
+**Revalidation**
+Refreshing cached content. This can be time-based ("every hour") or on-demand ("when this tag is invalidated").
+
+**Cache Tag**
+A label you attach to cached data. Later, you can invalidate all data with that tag at once.
+
+**Server Action**
+A function that runs on the server, typically after a form submission. Where you'd call invalidation APIs.
+
+---
+
+## The Simple Summary
+
+| I want... | Ask for... |
+|-----------|------------|
+| Fastest possible load, never changes | Static (default for layouts) |
+| Fast load, same for everyone, OK if slightly stale | Cached with time limit |
+| Fast load, but must update when data changes | Cached with tags + invalidation |
+| Fresh data every time, or user-specific | Dynamic with Suspense |
+| Mix of fast shell + personal content | PPR (cached shell + dynamic Suspense) |
+
+---
+
+## Enabling This in Your Project
+
+One config change unlocks Cache Components:
+
+```ts
+// next.config.ts
+cacheComponents: true
+```
+
+After that, you can ask Claude Code to implement any of the strategies above.
diff --git a/x_docs/own/colours.md b/x_docs/mine/colours.md
similarity index 100%
rename from x_docs/own/colours.md
rename to x_docs/mine/colours.md
diff --git a/x_docs/own/flex_grid_layout.md b/x_docs/mine/flex_grid_layout.md
similarity index 100%
rename from x_docs/own/flex_grid_layout.md
rename to x_docs/mine/flex_grid_layout.md
diff --git a/x_docs/own/globals-compare.md b/x_docs/mine/globals-compare.md
similarity index 100%
rename from x_docs/own/globals-compare.md
rename to x_docs/mine/globals-compare.md
diff --git a/x_docs/mine/nav_mobile_sidebar-and-rail.md b/x_docs/mine/nav_mobile_sidebar-and-rail.md
new file mode 100644
index 0000000..464d752
--- /dev/null
+++ b/x_docs/mine/nav_mobile_sidebar-and-rail.md
@@ -0,0 +1,426 @@
+# Navigation Architecture: Mobile, Sidebar & Rail
+
+This document explains how the navigation system works across breakpoints, and how components are structured for reusability.
+
+---
+
+## Overview
+
+The app has **three navigation contexts** that share the same nav items but render differently:
+
+| Context | Breakpoint | Container | NavLink Variant |
+|---------|------------|-----------|-----------------|
+| Mobile Nav | `<sm` (<640px) | Sheet overlay | `full` (default) |
+| Left Rail | `sm` to `lg` (640-1023px) | Persistent `<aside>` | `icon-only` |
+| Left Sidebar | `≥lg` (1024px+) | Persistent `<aside>` | `full` (default) |
+
+---
+
+## Visual Breakdown
+
+```text
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                                         │
+│  MOBILE (<640px)                                                        │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │ Navbar: [Logo]                    [Theme] [Hamburger]           │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│  │                                                                 │    │
+│  │  When hamburger tapped → Sheet slides in from left              │    │
+│  │                                                                 │    │
+│  │  ┌──────────────────┐                                           │    │
+│  │  │ Sheet (overlay)  │                                           │    │
+│  │  │ ┌──────────────┐ │                                           │    │
+│  │  │ │ 🏠 Home      │ │  ← NavLink (full)                        │    │
+│  │  │ │ 👥 Community │ │  ← NavLink (full)                        │    │
+│  │  │ │ ⭐ Collections│ │  ← NavLink (full)                        │    │
+│  │  │ │ 💼 Find Jobs │ │  ← NavLink (full)                         │    │
+│  │  │ │ 🏷️ Tags      │ │  ← NavLink (full)                         │    │
+│  │  │ │ ❓ Ask       │ │  ← NavLink (full)                         │    │
+│  │  │ └──────────────┘ │                                           │    │
+│  │  │ [Sign in]        │                                           │    │
+│  │  │ [Sign up]        │                                           │    │
+│  │  └──────────────────┘                                           │    │
+│  │                                                                 │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                                         │
+│  TABLET (640px - 1023px) - Icon-only Rail                               │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │ Navbar: [Logo]         [Search]           [Theme] [Auth]        │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│  ┌────────┬────────────────────────────────────────────────────────┐    │
+│  │ Rail   │                                                        │    │
+│  │ ~64px  │              Main Content                              │    │
+│  │        │                                                        │    │
+│  │  🏠    │  ← NavLink (icon-only)                                 │    │
+│  │  👥    │  ← NavLink (icon-only)                                 │    │
+│  │  ⭐    │  ← NavLink (icon-only)                                 │    │
+│  │  💼    │  ← NavLink (icon-only)                                 │    │
+│  │  🏷️    │  ← NavLink (icon-only)                                 │    │
+│  │  ❓    │  ← NavLink (icon-only)                                 │    │
+│  │        │                                                        │    │
+│  └────────┴────────────────────────────────────────────────────────┘    │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                                         │
+│  DESKTOP (1024px - 1279px) - Full Sidebar                               │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │ Navbar: [Logo]         [Search]           [Theme] [Auth]        │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│  ┌────────────────┬────────────────────────────────────────────────┐    │
+│  │ Sidebar ~220px │                                                │    │
+│  │                │              Main Content                      │    │
+│  │ 🏠 Home        │                                                │    │
+│  │ 👥 Community   │  ← NavLink (full) - SAME as mobile sheet       │    │
+│  │ ⭐ Collections │                                                │    │
+│  │ 💼 Find Jobs   │                                                │    │
+│  │ 🏷️ Tags        │                                                │    │
+│  │ ❓ Ask         │                                                │    │
+│  │                │                                                │    │
+│  └────────────────┴────────────────────────────────────────────────┘    │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                                         │
+│  WIDE DESKTOP (≥1280px) - Full Sidebar + Right Sidebar                  │
+│  ┌─────────────────────────────────────────────────────────────────┐    │
+│  │ Navbar: [Logo]         [Search]           [Theme] [Auth]        │    │
+│  └─────────────────────────────────────────────────────────────────┘    │
+│  ┌────────────────┬──────────────────────────────┬─────────────────┐    │
+│  │ Sidebar ~220px │                              │ Right ~300px    │    │
+│  │                │        Main Content          │                 │    │
+│  │ 🏠 Home        │                              │ Top Questions   │    │
+│  │ 👥 Community   │                              │ Popular Tags    │    │
+│  │ ⭐ Collections │                              │                 │    │
+│  │ 💼 Find Jobs   │                              │                 │    │
+│  │ 🏷️ Tags        │                              │                 │    │
+│  │ ❓ Ask         │                              │                 │    │
+│  │                │                              │                 │    │
+│  └────────────────┴──────────────────────────────┴─────────────────┘    │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+## Key Insights — CRITICAL: this section must be evaluated for consistency against rest of doc
+
+### Containers & Components
+
+NavLink doesn't know what container it's in. It just renders itself.
+
+```text
+  ┌─────────────────────────────────────────────────────────────────┐
+  │                                                                 │
+  │  THREE different CONTAINERS, using NavLink inside:              │
+  │                                                                 │
+  │  1. MobileNav (Sheet)         ← Container is <Sheet>            │
+  │     └── <NavLink />           ← Same NavLink component          │
+  │                                                                 │
+  │  2. LeftSidebar (icon rail)   ← Container is persistent <aside> │
+  │     └── <NavLink variant="icon-only" />                         │
+  │                                                                 │
+  │  3. LeftSidebar (full)        ← Container is persistent <aside> │
+  │     └── <NavLink />           ← Same NavLink component          │
+  │                                                                 │
+  └─────────────────────────────────────────────────────────────────┘
+```
+
+ The components:
+
+| Component   | Container Type     | When Visible      | NavLink Variant                 |
+|-------------|--------------------|-------------------|---------------------------------|
+| MobileNav   | Sheet (overlay)    | <sm (mobile only) | full (default)                  |
+| LeftSidebar | Persistent <aside> | ≥sm (tablet+)     | icon-only at sm-lg, full at lg+ |
+
+So you'll have TWO sibling components:
+
+```tsx
+  // In your (root)/layout.tsx eventually:
+  <Navbar />
+  <div className="flex">
+    <LeftSidebar />   {/* Persistent, hidden on mobile, visible sm+ */}
+    <main>{children}</main>
+  </div>
+```
+
+And MobileNav stays inside Navbar as it is now - it's the Sheet that appears when you tap the hamburger on mobile.
+
+### Variants
+
+Your mobile sheet and full sidebar look identical (both show icon + label). They use the same variant.
+
+```text
+  ┌────────────────────────────────────────────────────────────────┐
+  │                                                                │
+  │  SAME NavLink variant="full" (default), DIFFERENT container:   │
+  │                                                                │
+  │  Mobile (<sm)              Desktop (≥lg)                       │
+  │  ┌─────────────────┐       ┌─────────────────┐                 │
+  │  │ Sheet overlay   │       │ Persistent      │                 │
+  │  │ ┌──────────────┐│       │ LeftSidebar     │                 │
+  │  │ │ 🏠 Home     │ │       │ ┌─────────────┐ │                │
+  │  │ │ 👥 Community│ │       │ │ 🏠 Home     │ │                │
+  │  │ │ ⭐ Collect. │ │       │ │ 👥 Community│ │                │
+  │  │ └──────────────┘│       │ │ ⭐ Collect. │ │                │
+  │  └─────────────────┘       │ └─────────────┘ │                 │
+  │                            └─────────────────┘                 │
+  │                                                                │
+  │  Icon-only rail (sm to lg)                                     │
+  │  ┌──────┐                                                      │
+  │  │ 🏠   │  ← NavLink variant="icon-only"                       │
+  │  │ 👥   │                                                      │
+  │  │ ⭐   │                                                      │
+  │  └──────┘                                                      │
+  │                                                                │
+  └────────────────────────────────────────────────────────────────┘
+```
+
+So TWO variants total, not three.
+
+```text
+  NavLink variants:
+  ├── "full" (default)  ← icon + label
+  └── "icon-only"       ← icon only
+```
+
+```text
+  ┌──────────────────────────────────────────────────────────────────┐
+  │                                                                  │
+  │   NavLink variants:                                              │
+  │                                                                  │
+  │   1. "full" (default)     2. "icon-only"                         │
+  │   ┌──────────────────┐    ┌─────────┐                            │
+  │   │ 🏠  Home         │    │   🏠    │  ← maybe tooltip on hover │
+  │   └──────────────────┘    └─────────┘                            │
+  │                                                                  │
+  │   Used in:                Used in:                               │
+  │   • Mobile sheet          • Left rail (sm to lg)                 │
+  │   • Full sidebar (lg+)                                           │
+  │                                                                  │
+  └──────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Component Architecture
+
+### The Key Insight
+
+**NavLink doesn't know what container it's in.** It just renders itself with either:
+
+- `full` variant: icon + label
+- `icon-only` variant: icon only
+
+The **parent component** determines the context (Sheet vs persistent sidebar).
+
+```text
+┌─────────────────────────────────────────────────────────────────┐
+│                                                                 │
+│  SAME NavLink component, DIFFERENT containers:                  │
+│                                                                 │
+│  MobileNav (Sheet)         LeftSidebar (persistent)             │
+│  ┌─────────────────┐       ┌─────────────────┐                  │
+│  │ <Sheet>         │       │ <aside>         │                  │
+│  │   <NavLink />   │       │   <NavLink />   │  ← Same!         │
+│  │   <NavLink />   │       │   <NavLink />   │                  │
+│  │   <NavLink />   │       │   <NavLink />   │                  │
+│  │ </Sheet>        │       │ </aside>        │                  │
+│  └─────────────────┘       └─────────────────┘                  │
+│                                                                 │
+│  Icon Rail (persistent)                                         │
+│  ┌─────────────────┐                                            │
+│  │ <aside>         │                                            │
+│  │   <NavLink variant="icon-only" />  ← Different variant       │
+│  │   <NavLink variant="icon-only" />                            │
+│  │   <NavLink variant="icon-only" />                            │
+│  │ </aside>        │                                            │
+│  └─────────────────┘                                            │
+│                                                                 │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+### NavLink Variants
+
+Only **TWO variants** needed:
+
+```tsx
+// components/navigation/nav-link.tsx
+
+type NavLinkProps = NavLinkType & {
+  onClick?: () => void;
+  variant?: "full" | "icon-only";  // Add this
+};
+
+export function NavLink({
+  imgURL,
+  route,
+  label,
+  onClick,
+  variant = "full"  // Default to full (icon + label)
+}: NavLinkProps) {
+  // ... active state logic stays the same ...
+
+  return (
+    <Link href={route} onClick={onClick} className={...}>
+      <Image src={imgURL} alt={label} ... />
+      {variant === "full" && <span>{label}</span>}  {/* Conditionally show label */}
+    </Link>
+  );
+}
+```
+
+### Usage in Different Contexts
+
+```tsx
+// MobileNav - uses default "full" variant
+<NavLink imgURL="..." route="/" label="Home" />
+
+// LeftSidebar at lg+ - uses default "full" variant
+<NavLink imgURL="..." route="/" label="Home" />
+
+// LeftSidebar at sm-lg - uses "icon-only" variant
+<NavLink variant="icon-only" imgURL="..." route="/" label="Home" />
+```
+
+---
+
+## File Structure
+
+### Current Structure
+
+```text
+components/navigation/
+├── constants.ts        ← NAV_LINKS array (shared data)
+├── navbar.tsx          ← Top bar with logo, search, auth
+├── mobile-nav.tsx      ← Sheet drawer for mobile
+├── nav-link.tsx        ← Reusable nav link component
+├── full-logo.tsx       ← Theme-aware logo
+└── theme-toggle.tsx    ← Dark/light mode toggle
+```
+
+### After Adding LeftSidebar
+
+```text
+components/navigation/
+├── constants.ts        ← NAV_LINKS array (shared data)
+├── navbar.tsx          ← Top bar
+├── mobile-nav.tsx      ← Sheet drawer for mobile (<sm)
+├── left-sidebar.tsx    ← NEW: Persistent sidebar (≥sm)
+├── nav-link.tsx        ← Reusable (with variant prop)
+├── full-logo.tsx       ← Theme-aware logo
+└── theme-toggle.tsx    ← Dark/light mode toggle
+```
+
+---
+
+## Why constants.ts is Separate
+
+The `NAV_LINKS` array is in its own file because:
+
+1. **Single source of truth** - Update nav items once, all components update
+2. **Multiple consumers** - Used by MobileNav, will be used by LeftSidebar
+3. **No "use client"** - Pure data, can be imported by server components
+4. **No circular imports** - Avoids issues if LeftSidebar imports from NavLink
+
+```tsx
+// constants.ts - Pure data, no React
+export const NAV_LINKS = [
+  { imgURL: "/icons/home.svg", route: "/", label: "Home" },
+  { imgURL: "/icons/users.svg", route: "/community", label: "Community" },
+  // ...
+] as const satisfies readonly NavLink[];
+
+// mobile-nav.tsx - Consumes the data
+import { NAV_LINKS } from "@/components/navigation/constants";
+
+// left-sidebar.tsx - Also consumes the same data
+import { NAV_LINKS } from "@/components/navigation/constants";
+```
+
+---
+
+## Layout Integration
+
+### Current Layout
+
+```tsx
+// app/(root)/layout.tsx
+<>
+  <Navbar />      {/* Contains MobileNav hamburger */}
+  {children}
+</>
+```
+
+### Future Layout (with LeftSidebar)
+
+```tsx
+// app/(root)/layout.tsx
+<>
+  <Navbar />
+  <div className="flex flex-1">
+    <LeftSidebar className="hidden sm:flex" />  {/* Hidden on mobile */}
+    {children}
+  </div>
+</>
+```
+
+The LeftSidebar handles its own responsive behaviour internally:
+
+- `sm` to `lg`: Shows icon-only rail
+- `≥lg`: Shows full sidebar with labels
+
+```tsx
+// Simplified LeftSidebar concept
+export function LeftSidebar() {
+  return (
+    <aside className="hidden sm:flex flex-col ...">
+      {NAV_LINKS.map((link) => (
+        <NavLink
+          key={link.route}
+          {...link}
+          variant="icon-only"           // Default for rail
+          className="lg:variant-full"   // Override at lg+ (conceptual)
+        />
+      ))}
+    </aside>
+  );
+}
+```
+
+> **Note**: The exact responsive variant switching can be done via:
+>
+> - CSS classes that show/hide label
+> - A hook that detects breakpoint
+> - Render both and use CSS to toggle visibility
+
+---
+
+## Implementation Order
+
+Recommended sequence:
+
+1. ✅ **MobileNav** - Already working
+2. 🔲 **Polish MobileNav styling** - Perfect the look
+3. 🔲 **Add `variant` prop to NavLink** - Small change (~15 lines)
+4. 🔲 **Create LeftSidebar** - Uses same NavLink, same constants
+5. 🔲 **Wire up in layout** - Add to `(root)/layout.tsx`
+
+**Why this order?** The styling you perfect in MobileNav transfers directly to LeftSidebar (full mode) since they use the same NavLink component.
+
+---
+
+## Summary
+
+| Concept | Explanation |
+|---------|-------------|
+| **NavLink** | Reusable component with `full` and `icon-only` variants |
+| **constants.ts** | Single source of truth for nav items |
+| **MobileNav** | Sheet overlay, uses NavLink (full) |
+| **LeftSidebar** | Persistent aside, uses NavLink (icon-only at sm-lg, full at lg+) |
+| **Container agnostic** | NavLink doesn't know if it's in a Sheet or sidebar |
diff --git a/x_docs/own/secrets-reference.md b/x_docs/mine/secrets-reference.md
similarity index 100%
rename from x_docs/own/secrets-reference.md
rename to x_docs/mine/secrets-reference.md
diff --git a/x_docs/own/theme_resources.md b/x_docs/mine/theme_resources.md
similarity index 100%
rename from x_docs/own/theme_resources.md
rename to x_docs/mine/theme_resources.md
diff --git a/x_docs/own/zustand.md b/x_docs/mine/zustand.md
similarity index 100%
rename from x_docs/own/zustand.md
rename to x_docs/mine/zustand.md