diff --git a/.markdownlint.yaml b/.markdownlint.yaml
index 1255d4a..e567733 100644
--- a/.markdownlint.yaml
+++ b/.markdownlint.yaml
@@ -9,3 +9,4 @@ MD036: false  # Allow emphasis (bold/italic) without treating it as heading
 MD040: false  # Fenced code blocks don't need language specified
 MD041: false  # First line doesn't need to be h1
 MD029: false  # Allow any ordered list style (1/2/3 or continuous numbering)
+MD060: false  # Allow compact table style (no space before pipe)
diff --git a/app/(root)/ask-question/page.tsx b/app/(root)/ask-question/page.tsx
index cc92fe1..2d38897 100644
--- a/app/(root)/ask-question/page.tsx
+++ b/app/(root)/ask-question/page.tsx
@@ -1,3 +1,3 @@
 export default function AskQuestionPage() {
-  return <h1>Ask a Question</h1>;
+  return <h1 className="text-heading-2xl">Ask a Question</h1>;
 }
diff --git a/app/(root)/collections/page.tsx b/app/(root)/collections/page.tsx
index 2a084a1..5420901 100644
--- a/app/(root)/collections/page.tsx
+++ b/app/(root)/collections/page.tsx
@@ -1,3 +1,3 @@
 export default function CollectionsPage() {
-  return <h1>Collections</h1>;
+  return <h1 className="text-heading-2xl">Collections</h1>;
 }
diff --git a/app/(root)/community/page.tsx b/app/(root)/community/page.tsx
index 863d62f..7c36b69 100644
--- a/app/(root)/community/page.tsx
+++ b/app/(root)/community/page.tsx
@@ -1,3 +1,3 @@
 export default function CommunityPage() {
-  return <h1>Community</h1>;
+  return <h1 className="text-heading-2xl">Community</h1>;
 }
diff --git a/app/(root)/jobs/page.tsx b/app/(root)/jobs/page.tsx
index ec6d850..aa7cfe8 100644
--- a/app/(root)/jobs/page.tsx
+++ b/app/(root)/jobs/page.tsx
@@ -1,3 +1,3 @@
 export default function JobsPage() {
-  return <h1>Find Jobs</h1>;
+  return <h1 className="text-heading-2xl">Find Jobs</h1>;
 }
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 0069033..f8d842c 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -2,6 +2,7 @@ import { cookies } from "next/headers";
 import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
 import { LeftSidebar } from "@/components/navigation/left-sidebar";
 import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
+import { RightSidebar } from "@/components/navigation/right-sidebar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
@@ -17,7 +18,14 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
       <div className="flex min-h-screen flex-1 flex-col">
         <MobileTopBar />
         <DesktopTopBar />
-        <main className="flex-1 pb-10 pt-10 layout-padding-x">{children}</main>
+
+        {/* Content + Right Sidebar row */}
+        <div className="flex flex-1">
+          <main className="flex-1 pb-10 pt-10 layout-padding-x">
+            {children}
+          </main>
+          <RightSidebar />
+        </div>
       </div>
     </SidebarProvider>
   );
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index dd2a9c0..23eb7bc 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,6 +1,6 @@
 const HomePage = () => (
   <>
-    <h1>Hello Root page with heading H1</h1>
+    <h1 className="text-heading-2xl">Hello Root page with heading H1</h1>
 
     {/* Demo: top overflow test */}
     <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
@@ -42,7 +42,7 @@ const HomePage = () => (
             </span>
           </div>
 
-          <h2 className="mb-2 text-xl font-semibold">
+          <h2 className="text-heading-sm mb-2">
             How to implement a sticky sidebar in Next.js with Tailwind CSS?
           </h2>
 
diff --git a/app/(root)/profile/page.tsx b/app/(root)/profile/page.tsx
index e84a25b..0144d0c 100644
--- a/app/(root)/profile/page.tsx
+++ b/app/(root)/profile/page.tsx
@@ -1,3 +1,3 @@
 export default function ProfilePage() {
-  return <h1>Profile</h1>;
+  return <h1 className="text-heading-2xl">Profile</h1>;
 }
diff --git a/app/(root)/tags/page.tsx b/app/(root)/tags/page.tsx
index 4f47ff8..65e6017 100644
--- a/app/(root)/tags/page.tsx
+++ b/app/(root)/tags/page.tsx
@@ -1,3 +1,3 @@
 export default function TagsPage() {
-  return <h1>Tags</h1>;
+  return <h1 className="text-heading-2xl">Tags</h1>;
 }
diff --git a/app/globals.css b/app/globals.css
index 9707fab..6180cf6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,4 +1,8 @@
-@layer theme, base, clerk, components, utilities; /* Must be at top */
+@layer theme,
+  base,
+  clerk,
+  components,
+  utilities; /* Declare layer order before imports (adds "clerk" layer) */
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@clerk/themes/shadcn.css";
@@ -6,61 +10,72 @@
 /* Applies dark: styles when element is .dark or inside .dark */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Registers theme tokens → generates utilities (bg-*, text-*, border-*, etc.).
+   "inline" embeds values directly, required when referencing other vars to avoid CSS scope issues. */
 @theme inline {
-  /* Register theme tokens with Tailwind so it generates utilities (bg-*, text-*, etc.) */
-  /* E.g. --color-background → bg-background, text-background, border-background, etc. */
-  /* "inline" (v4) means values are embedded here, not in a separate CSS layer */
+  /* Fonts (no mode variants) */
   --font-display: var(--font-space-grotesk), Arial, sans-serif;
   --font-sans-serif: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
   --font-mono: var(--font-jetbrains-mono), ui-monospace, Menlo, monospace;
 
+  /* Radius (derived from --radius) */
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
 
+  /* shadcn/ui: Core */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* shadcn/ui: Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
 
-  /* NOT SHADCN VARIABLES */
+  /* shadcn/ui: Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Custom */
   --color-mobile-nav: var(--mobile-nav);
   --color-overlay: var(--overlay);
 }
 
+/* Raw CSS variables (no Tailwind utilities generated). Access via var(--background), etc. */
 :root {
-  /* Creates CSS variables available to all elements (no utility generation) */
+  /* Layout */
+  --top-bar-height: 4rem; /* 64px — desktop & mobile top navigation */
+
+  /* Base */
   --radius: 0.625rem;
 
-  --background: oklch(0.994 0 0); /* #FDFDFD */
+  /* shadcn/ui: Core */
+  --background: oklch(0.99 0 0); /* #FDFDFD */
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
   --card-foreground: oklch(0.129 0.042 264.695);
@@ -78,35 +93,47 @@
   --border: oklch(0.929 0.013 255.508);
   --input: oklch(0.929 0.013 255.508);
   --ring: oklch(0.704 0.04 256.788);
+
+  /* shadcn/ui: Charts */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --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);
+
+  /* shadcn/ui: Sidebar */
   --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);
   --sidebar-accent: oklch(0.968 0.007 247.896);
   --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-border: oklch(0.9722 0.0034 247.86); /* #F4F6F8 */
   --sidebar-ring: oklch(0.704 0.04 256.788);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom: Gradients */
   --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%
   );
+
+  /* Custom: Navigation */
   --mobile-nav: oklch(1 0 0); /* #FFFFFF */
   --overlay: oklch(0 0 0); /* black, both modes */
+
+  /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-light.svg");
   --auth-bg: url("/images/auth-bg-light.webp");
 }
 
+/* Dark mode overrides — these values take precedence over :root when .dark is active */
 .dark {
-  /* Overrides CSS variables when .dark class is present */
+  /* Base */
+  --radius: 0.625rem; /* same as root */
+
+  /* shadcn/ui: Core */
   --background: oklch(0 0 0); /* #000000 */
   --foreground: oklch(0.984 0.003 247.858);
   --card: oklch(0.1783 0.0128 270.6); /* #0F1117 */
@@ -125,23 +152,37 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.551 0.027 264.364);
+
+  /* shadcn/ui: Charts */
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --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);
+
+  /* shadcn/ui: Sidebar */
   --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);
   --sidebar-accent: oklch(0.279 0.041 260.031);
   --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-border: transparent;
   --sidebar-ring: oklch(0.551 0.027 264.364);
 
-  /* NOT SHADCN VARIABLES */
+  /* Custom: Gradients */
+  --primary-gradient-to: oklch(0.7434 0.115 58.23); /* same as root */
+  --gradient-primary: linear-gradient(
+    93.22deg,
+    var(--primary) -13.95%,
+    var(--primary-gradient-to) 99.54%
+  ); /* same as root */
+
+  /* Custom: Navigation */
   --mobile-nav: oklch(0.1288 0.0406 264.7); /* #07080b */
-  --overlay: oklch(0 0 0); /* black, both modes */
+  --overlay: oklch(0 0 0); /* same as root */
+
+  /* Custom: Assets (theme-aware URLs) */
   --logo-full-themed: url("/images/logo-dark.svg");
   --auth-bg: url("/images/auth-bg-dark.webp");
 }
@@ -163,24 +204,6 @@
   html {
     font-family: var(--font-sans-serif);
   }
-  h1 {
-    @apply text-5xl font-bold font-display;
-  }
-  h2 {
-    @apply text-4xl font-semibold font-display;
-  }
-  h3 {
-    @apply text-3xl font-semibold font-display;
-  }
-  h4 {
-    @apply text-2xl font-medium font-display;
-  }
-  h5 {
-    @apply text-xl font-medium font-display;
-  }
-  h6 {
-    @apply text-lg font-medium font-display;
-  }
 
   :is(code, kbd, samp, pre) {
     /* Code font family */
@@ -198,6 +221,29 @@
   }
 }
 
+@layer components {
+  /* Heading utilities — apply visual heading styles independent of h1-h6 level.
+     Usage: <h2 class="text-heading-sm"> renders an h2 with small heading styling. */
+  .text-heading-2xl {
+    @apply text-5xl font-bold font-display; /* 48px */
+  }
+  .text-heading-xl {
+    @apply text-4xl font-semibold font-display; /* 36px */
+  }
+  .text-heading-lg {
+    @apply text-3xl font-semibold font-display; /* 30px */
+  }
+  .text-heading-md {
+    @apply text-2xl font-medium font-display; /* 24px */
+  }
+  .text-heading-sm {
+    @apply text-xl font-medium font-display; /* 20px */
+  }
+  .text-heading-xs {
+    @apply text-lg font-medium font-display; /* 18px */
+  }
+}
+
 @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. */
@@ -209,4 +255,12 @@
   .layout-padding-x {
     @apply px-6 md:px-8 lg:px-12;
   }
+
+  /* Subtle directional shadow for navigation edges (light mode only) */
+  .shadow-light {
+    box-shadow: -10px 10px 20px 0px oklch(0.877 0.006 17.26 / 10%);
+  }
+  .dark .shadow-light {
+    box-shadow: none;
+  }
 }
diff --git a/components/navigation/desktop-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
index 65ddf30..96c44fd 100644
--- a/components/navigation/desktop-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -1,16 +1,10 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
 
 export function DesktopTopBar() {
   return (
-    <header
-      className={cn(
-        "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex layout-padding-x",
-        TOP_BAR_HEIGHT,
-      )}
-    >
+    <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center gap-4 shadow-light bg-sidebar sm:flex layout-padding-x">
       <div className="flex flex-1 justify-center">
         <p className="text-muted-foreground">Global Search</p>
       </div>
diff --git a/components/navigation/left-sidebar.tsx b/components/navigation/left-sidebar.tsx
index 9358955..c89428f 100644
--- a/components/navigation/left-sidebar.tsx
+++ b/components/navigation/left-sidebar.tsx
@@ -25,17 +25,19 @@ import {
   isRouteActive,
   NAV_LINK_ACTIVE_CLASSES,
   NAV_LINK_INACTIVE_CLASSES,
-  TOP_BAR_HEIGHT,
 } from "@/lib/utils";
 
 export function LeftSidebar() {
   const pathname = usePathname();
 
   return (
-    <Sidebar id="left-sidebar" collapsible="icon">
-      <SidebarHeader
-        className={cn(TOP_BAR_HEIGHT, "flex-row items-center px-3")}
-      >
+    <Sidebar
+      id="left-sidebar"
+      collapsible="icon"
+      width="13rem"
+      className="shadow-light"
+    >
+      <SidebarHeader className="h-(--top-bar-height) flex-row items-center px-3">
         <Link
           href="/"
           aria-label="DevFlow sidebar logo"
diff --git a/components/navigation/mobile-nav.tsx b/components/navigation/mobile-nav.tsx
index 52db38e..a527616 100644
--- a/components/navigation/mobile-nav.tsx
+++ b/components/navigation/mobile-nav.tsx
@@ -66,7 +66,7 @@ export function MobileNav() {
             <SheetTitle className="sr-only">Mobile navigation menu</SheetTitle>
             <SheetClose asChild>
               <Link href="/" className="flex items-center">
-                <ThemedFullLogo />
+                <ThemedFullLogo className="h-7" />
               </Link>
             </SheetClose>
           </SheetHeader>
diff --git a/components/navigation/mobile-top-bar.tsx b/components/navigation/mobile-top-bar.tsx
index 52d82bf..37cb033 100644
--- a/components/navigation/mobile-top-bar.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -1,16 +1,10 @@
 import Link from "next/link";
 import { MobileNav } from "@/components/navigation/mobile-nav";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
-import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
 
 export function MobileTopBar() {
   return (
-    <header
-      className={cn(
-        "sticky top-0 z-40 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
-        TOP_BAR_HEIGHT,
-      )}
-    >
+    <header className="sticky top-0 z-40 flex h-(--top-bar-height) w-full items-center justify-between bg-sidebar px-4 shadow-light sm:hidden">
       <Link href="/" aria-label="DevFlow mobile logo">
         {/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */}
         {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}
diff --git a/components/navigation/right-sidebar.tsx b/components/navigation/right-sidebar.tsx
new file mode 100644
index 0000000..50f8aed
--- /dev/null
+++ b/components/navigation/right-sidebar.tsx
@@ -0,0 +1,63 @@
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+} from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/** Asymmetric padding: more on left, less on right (scrollbar side), reduced bottom */
+const GROUP_PADDING = "pt-6 pb-2 pl-6 pr-3";
+
+export function RightSidebar() {
+  return (
+    <aside
+      aria-label="Top questions and popular tags"
+      className="sticky top-(--top-bar-height) hidden h-[calc(100svh-var(--top-bar-height))] self-start xl:block"
+    >
+      <Sidebar
+        id="right-sidebar"
+        side="right"
+        collapsible="none"
+        width="22rem"
+        className="border-l shadow-light"
+      >
+        <SidebarContent className="mr-4 pb-6">
+          <SidebarGroup className={GROUP_PADDING}>
+            <h2 className="text-heading-sm mb-4 text-foreground">
+              Top Questions
+            </h2>
+            <SidebarGroupContent>
+              <div className="space-y-6">
+                {Array.from({ length: 6 }, (_, i) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: static skeleton placeholders
+                  <div key={i} className="space-y-3">
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-3/4" />
+                    <Skeleton className="h-4 w-5/6" />
+                  </div>
+                ))}
+              </div>
+            </SidebarGroupContent>
+          </SidebarGroup>
+
+          <SidebarGroup className={GROUP_PADDING}>
+            <h2 className="text-heading-sm mb-4 text-foreground">
+              Popular Tags
+            </h2>
+            <SidebarGroupContent>
+              <div className="space-y-3">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-5/6" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-5/6" />
+              </div>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </aside>
+  );
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 7989101..e02a249 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -26,7 +26,7 @@ import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
-const SIDEBAR_WIDTH = "14rem";
+const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
@@ -157,6 +157,7 @@ function Sidebar({
   side = "left",
   variant = "sidebar",
   collapsible = "offcanvas",
+  width,
   className,
   children,
   ...props
@@ -164,6 +165,7 @@ function Sidebar({
   side?: "left" | "right";
   variant?: "sidebar" | "floating" | "inset";
   collapsible?: "offcanvas" | "icon" | "none";
+  width?: string;
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
@@ -175,6 +177,11 @@ function Sidebar({
           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className,
         )}
+        style={
+          width
+            ? ({ "--sidebar-width": width } as React.CSSProperties)
+            : undefined
+        }
         {...props}
       >
         {children}
@@ -215,6 +222,11 @@ function Sidebar({
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
+      style={
+        width
+          ? ({ "--sidebar-width": width } as React.CSSProperties)
+          : undefined
+      }
     >
       {/* This is what handles the sidebar gap on desktop */}
       <div
@@ -377,6 +389,15 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
       data-sidebar="content"
       className={cn(
         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        // Ultra-thin scrollbar: Chrome, Safari, Edge (WebKit/Blink)
+        "[&::-webkit-scrollbar]:w-1",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        "[&::-webkit-scrollbar-thumb]:rounded-full",
+        "[&::-webkit-scrollbar-thumb]:bg-foreground/20",
+        "hover:[&::-webkit-scrollbar-thumb]:bg-foreground/40",
+        // Firefox fallback (standard CSS, only when WebKit unsupported)
+        "[@supports(not_selector(::-webkit-scrollbar))]:[scrollbar-width:thin]",
+        "[@supports(not_selector(::-webkit-scrollbar))]:[scrollbar-color:hsl(var(--foreground)/0.2)_transparent]",
         className,
       )}
       {...props}
diff --git a/e2e/authenticated.desktop.spec.ts b/e2e/authenticated.desktop.spec.ts
index dac6c84..7af350a 100644
--- a/e2e/authenticated.desktop.spec.ts
+++ b/e2e/authenticated.desktop.spec.ts
@@ -37,16 +37,18 @@ test.describe("Authenticated User Flow - Desktop", () => {
     const twoFactorHeading = page.getByRole("heading", {
       name: /verification|two-step/i,
     });
+    // UserButton only appears when authenticated (not visible on sign-in pages)
     const userMenu = page.getByRole("button", { name: "Open user menu" });
     await expect(
       emailOtpHeading.or(twoFactorHeading).or(userMenu),
     ).toBeVisible();
 
-    // Handle email OTP or 2FA - both use the same OTP input pattern
-    if (
+    // Check URL for "factor-two" as backup (Clerk heading text may vary)
+    const needsOtp =
       (await emailOtpHeading.isVisible()) ||
-      (await twoFactorHeading.isVisible())
-    ) {
+      (await twoFactorHeading.isVisible()) ||
+      page.url().includes("factor-two");
+    if (needsOtp) {
       await page.getByRole("textbox").first().click();
       await page.keyboard.type(TEST_OTP);
     }
diff --git a/e2e/authenticated.mobile.spec.ts b/e2e/authenticated.mobile.spec.ts
index 2fd5c3a..9c346da 100644
--- a/e2e/authenticated.mobile.spec.ts
+++ b/e2e/authenticated.mobile.spec.ts
@@ -25,14 +25,17 @@ test.describe("Authenticated User Flow - Mobile", () => {
     // Open hamburger menu
     await page.getByRole("button", { name: /open navigation/i }).click();
 
-    // Click Sign in button in mobile menu
+    // Sign in button is inside the mobile menu drawer
     await page.getByRole("button", { name: "Sign in" }).click();
 
-    // Complete sign in flow
+    // Fill Clerk's sign-in form (redirected to Clerk's sign-in page)
     await page.getByRole("textbox", { name: "Email address" }).fill(TEST_EMAIL);
     await page.getByRole("textbox", { name: "Password" }).fill(TEST_PASSWORD);
     await page.getByRole("button", { name: "Continue", exact: true }).click();
 
+    // UserButton only appears when authenticated (not visible on sign-in pages)
+    const userMenu = page.getByRole("button", { name: "Open user menu" });
+
     // Handle OTP/2FA if required
     // - "Check your email" = new device verification (email OTP)
     // - "Two-step verification" or URL contains "factor-two" = 2FA/TOTP
@@ -42,34 +45,26 @@ test.describe("Authenticated User Flow - Mobile", () => {
     const twoFactorHeading = page.getByRole("heading", {
       name: /verification|two-step/i,
     });
-    const hamburgerButton = page.getByRole("button", {
-      name: /open navigation/i,
-    });
     await expect(
-      emailOtpHeading.or(twoFactorHeading).or(hamburgerButton),
+      emailOtpHeading.or(twoFactorHeading).or(userMenu),
     ).toBeVisible();
 
-    // Handle email OTP or 2FA - both use the same OTP input pattern
-    if (
+    // Check URL for "factor-two" as backup (Clerk heading text may vary)
+    const needsOtp =
       (await emailOtpHeading.isVisible()) ||
-      (await twoFactorHeading.isVisible())
-    ) {
+      (await twoFactorHeading.isVisible()) ||
+      page.url().includes("factor-two");
+    if (needsOtp) {
       await page.getByRole("textbox").first().click();
       await page.keyboard.type(TEST_OTP);
     }
 
-    // Wait for redirect to home after auth
-    await expect(page).toHaveURL("/");
-
     // === MANAGE ACCOUNT VIA MOBILE MENU ===
-    // Open hamburger menu
+    // Open hamburger menu and verify authenticated (userMenu only shows when signed in)
     await page.getByRole("button", { name: /open navigation/i }).click();
-
-    // UserButton should be visible at bottom of mobile menu
-    const userMenu = page.getByRole("button", { name: "Open user menu" });
     await expect(userMenu).toBeVisible();
 
-    // Click UserButton and select "Manage account"
+    // UserButton opens Clerk's user menu dropdown
     await userMenu.click();
     await page.getByRole("menuitem", { name: "Manage account" }).click();
 
@@ -88,10 +83,10 @@ test.describe("Authenticated User Flow - Mobile", () => {
     await expect(profileHeading).not.toBeVisible();
 
     // === SIGN OUT VIA MOBILE MENU ===
-    // Reopen hamburger menu
+    // Menu closed after modal interaction, reopen it
     await page.getByRole("button", { name: /open navigation/i }).click();
 
-    // Click UserButton and sign out
+    // UserButton is visible again in the reopened menu
     await userMenu.click();
     await page.getByRole("menuitem", { name: "Sign out" }).click();
 
diff --git a/lib/utils.ts b/lib/utils.ts
index b6a6868..8b03cf3 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -18,9 +18,6 @@ export const NAV_LINK_ACTIVE_CLASSES =
   "bg-(image:--gradient-primary) font-bold text-primary-foreground";
 export const NAV_LINK_INACTIVE_CLASSES = "font-medium";
 
-// Layout constants - shared between top bars and main content
-export const TOP_BAR_HEIGHT = "h-14";
-
 /**
  * Get icon classes for navigation items (handles inversion for inactive state).
  */