diff --git a/CLAUDE.md b/CLAUDE.md
index c65eca3..d294808 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -44,6 +44,8 @@ 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
+npx shadcn@latest diff                    # Check for upstream registry updates
+npx shadcn@latest --help                  # CLI help
 ```
 
 ## Coding Practices
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index f812917..64758b4 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -1,35 +1,36 @@
 import { cookies } from "next/headers";
-import { AppSidebar } from "@/components/app-sidebar";
-import { ContentTopBar } from "@/components/navigation/content-top-bar";
-import { MobileHeader } from "@/components/navigation/mobile-header";
+import { DesktopTopBar } from "@/components/navigation/desktop-top-bar";
+import { LeftSidebar } from "@/components/navigation/left-sidebar";
+import { MobileTopBar } from "@/components/navigation/mobile-top-bar";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import {
-  CONTENT_HORIZONTAL_PADDING,
   cn,
-  MOBILE_HEADER_TOP_OFFSET,
+  LAYOUT_HORIZONTAL_PADDING,
+  MOBILE_TOP_BAR_OFFSET,
 } from "@/lib/utils";
 
 const RootLayout = async ({ children }: { children: React.ReactNode }) => {
   const cookieStore = await cookies();
-  const defaultOpen = cookieStore.get("sidebar_state")?.value !== "false";
+  const sidebarOpenFromCookie =
+    cookieStore.get("sidebar_state")?.value !== "false";
 
   return (
-    <SidebarProvider defaultOpen={defaultOpen}>
-      {/* Mobile-only fixed header */}
-      <MobileHeader />
+    <SidebarProvider defaultOpen={sidebarOpenFromCookie}>
+      {/* Mobile-only top bar */}
+      <MobileTopBar />
 
       {/* Full-height sidebar */}
-      <AppSidebar />
+      <LeftSidebar />
 
-      {/* Content area */}
+      {/* Main content area */}
       <div className="flex min-h-screen flex-1 flex-col">
         {/* Desktop-only top bar */}
-        <ContentTopBar />
+        <DesktopTopBar />
         <main
           className={cn(
             "flex-1 pb-10 sm:pt-10",
-            MOBILE_HEADER_TOP_OFFSET,
-            CONTENT_HORIZONTAL_PADDING,
+            MOBILE_TOP_BAR_OFFSET,
+            LAYOUT_HORIZONTAL_PADDING,
           )}
         >
           {children}
diff --git a/app/(root)/page.tsx b/app/(root)/page.tsx
index 6bd8036..dd2a9c0 100644
--- a/app/(root)/page.tsx
+++ b/app/(root)/page.tsx
@@ -1,8 +1,8 @@
-const Home = () => (
+const HomePage = () => (
   <>
     <h1>Hello Root page with heading H1</h1>
 
-    {/* Header boundary marker */}
+    {/* Demo: top overflow test */}
     <div className="mt-8 bg-primary/30 p-4">{"words ".repeat(50)}</div>
 
     {/* Flexbox demo: grow vs flex-none */}
@@ -23,22 +23,22 @@ const Home = () => (
       </div>
     </div>
 
-    {/* Footer boundary marker */}
+    {/* Demo: bottom overflow test */}
     <div className="bg-primary/30 p-4">{"words ".repeat(50)}</div>
 
     {/* Question boxes for testing sticky sidebar scroll */}
     <div className="mt-8 space-y-6">
-      {[1, 2, 3, 4].map((num) => (
+      {[1, 2, 3, 4].map((questionIndex) => (
         <article
-          key={`question-${num}`}
+          key={`question-${questionIndex}`}
           className="rounded-lg border border-border bg-card p-6 shadow-sm"
         >
           <div className="mb-3 flex items-center gap-2">
             <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
-              Question #{num}
+              Question #{questionIndex}
             </span>
             <span className="text-xs text-muted-foreground">
-              Asked {num} hours ago
+              Asked {questionIndex} hours ago
             </span>
           </div>
 
@@ -69,15 +69,21 @@ const Home = () => (
           {/* Stats */}
           <div className="flex items-center gap-6 text-sm text-muted-foreground">
             <span className="flex items-center gap-1">
-              <span className="font-semibold text-foreground">{num * 7}</span>{" "}
+              <span className="font-semibold text-foreground">
+                {questionIndex * 7}
+              </span>{" "}
               votes
             </span>
             <span className="flex items-center gap-1">
-              <span className="font-semibold text-foreground">{num * 3}</span>{" "}
+              <span className="font-semibold text-foreground">
+                {questionIndex * 3}
+              </span>{" "}
               answers
             </span>
             <span className="flex items-center gap-1">
-              <span className="font-semibold text-foreground">{num * 47}</span>{" "}
+              <span className="font-semibold text-foreground">
+                {questionIndex * 47}
+              </span>{" "}
               views
             </span>
           </div>
@@ -92,4 +98,4 @@ const Home = () => (
   </>
 );
 
-export default Home;
+export default HomePage;
diff --git a/app/layout.tsx b/app/layout.tsx
index 53b9a4c..7d33c76 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,8 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
 import { inter, jetbrainsMono, spaceGrotesk } from "@/app/fonts";
-import { ClerkProvider } from "@/components/clerk-provider";
-import { ThemeProvider } from "@/components/theme-provider";
+import { ClerkProvider } from "@/components/providers/clerk-provider";
+import { ThemeProvider } from "@/components/providers/theme-provider";
 import "@/app/globals.css";
 
 export const metadata: Metadata = {
diff --git a/components/navigation/content-top-bar.tsx b/components/navigation/desktop-top-bar.tsx
similarity index 76%
rename from components/navigation/content-top-bar.tsx
rename to components/navigation/desktop-top-bar.tsx
index e05e16c..7ec9d2e 100644
--- a/components/navigation/content-top-bar.tsx
+++ b/components/navigation/desktop-top-bar.tsx
@@ -1,23 +1,21 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
 import { Button } from "@/components/ui/button";
-import { CONTENT_HORIZONTAL_PADDING, cn, HEADER_HEIGHT } from "@/lib/utils";
+import { cn, LAYOUT_HORIZONTAL_PADDING, TOP_BAR_HEIGHT } from "@/lib/utils";
 
-export function ContentTopBar() {
+export function DesktopTopBar() {
   return (
     <header
       className={cn(
         "sticky top-0 z-40 hidden items-center gap-4 border-b bg-background sm:flex",
-        HEADER_HEIGHT,
-        CONTENT_HORIZONTAL_PADDING,
+        TOP_BAR_HEIGHT,
+        LAYOUT_HORIZONTAL_PADDING,
       )}
     >
-      {/* Left: Search - grows and centres */}
       <div className="flex flex-1 justify-center">
         <p className="text-muted-foreground">Global Search</p>
       </div>
 
-      {/* Right: Theme + Auth - fixed width */}
       <div className="flex flex-none items-center gap-2">
         <ThemeToggle />
         <SignedOut>
diff --git a/components/navigation/sidebar-toggle-button.tsx b/components/navigation/left-sidebar-toggle.tsx
similarity index 82%
rename from components/navigation/sidebar-toggle-button.tsx
rename to components/navigation/left-sidebar-toggle.tsx
index 9221c6d..bb88b07 100644
--- a/components/navigation/sidebar-toggle-button.tsx
+++ b/components/navigation/left-sidebar-toggle.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { useSidebar } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
 
-export function SidebarToggleButton() {
+export function LeftSidebarToggle() {
   const { state, toggleSidebar } = useSidebar();
   const isCollapsed = state === "collapsed";
 
@@ -18,9 +18,9 @@ export function SidebarToggleButton() {
         "shrink-0 rounded-full text-sidebar-foreground",
         !isCollapsed && "bg-muted",
       )}
-      aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+      aria-label={isCollapsed ? "Expand left sidebar" : "Collapse left sidebar"}
       aria-expanded={!isCollapsed}
-      aria-controls="app-sidebar"
+      aria-controls="left-sidebar"
     >
       {isCollapsed ? (
         <ChevronsRight className="size-5" />
diff --git a/components/app-sidebar.tsx b/components/navigation/left-sidebar.tsx
similarity index 85%
rename from components/app-sidebar.tsx
rename to components/navigation/left-sidebar.tsx
index c952b51..9ce87bf 100644
--- a/components/app-sidebar.tsx
+++ b/components/navigation/left-sidebar.tsx
@@ -4,9 +4,9 @@ import { SignedIn, UserButton } from "@clerk/nextjs";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { ThemeLogo } from "@/components/navigation/full-logo";
+import { LeftSidebarToggle } from "@/components/navigation/left-sidebar-toggle";
 import { NAV_LINKS } from "@/components/navigation/nav-links.constants";
-import { SidebarToggleButton } from "@/components/navigation/sidebar-toggle-button";
+import { ThemedFullLogo } from "@/components/navigation/themed-full-logo";
 import {
   Sidebar,
   SidebarContent,
@@ -21,18 +21,18 @@ import {
 } from "@/components/ui/sidebar";
 import {
   cn,
-  getNavIconClasses,
+  getNavIconInvertClasses,
   isRouteActive,
   NAV_LINK_ACTIVE_CLASSES,
   NAV_LINK_INACTIVE_CLASSES,
 } from "@/lib/utils";
 
-export function AppSidebar() {
+export function LeftSidebar() {
   const pathname = usePathname();
 
   return (
-    <Sidebar id="app-sidebar" collapsible="icon">
-      {/* Header: Logo - h-14 matches ContentTopBar height */}
+    <Sidebar id="left-sidebar" collapsible="icon">
+      {/* Logo section - h-14 matches top bar height */}
       <SidebarHeader className="h-14 flex-row items-center px-3">
         <Link
           href="/"
@@ -47,7 +47,7 @@ export function AppSidebar() {
             className="size-6 group-data-[collapsible=icon]:block hidden"
           />
           {/* Full logo when expanded */}
-          <ThemeLogo className="group-data-[collapsible=icon]:hidden" />
+          <ThemedFullLogo className="group-data-[collapsible=icon]:hidden" />
         </Link>
       </SidebarHeader>
 
@@ -74,11 +74,11 @@ export function AppSidebar() {
                     >
                       <Link href={link.route}>
                         <Image
-                          src={link.imgURL}
+                          src={link.iconUrl}
                           alt=""
                           width={20}
                           height={20}
-                          className={getNavIconClasses(isActive)}
+                          className={getNavIconInvertClasses(isActive)}
                         />
                         <span>{link.label}</span>
                       </Link>
@@ -106,7 +106,7 @@ export function AppSidebar() {
           <SignedIn>
             <UserButton />
           </SignedIn>
-          <SidebarToggleButton />
+          <LeftSidebarToggle />
         </div>
       </SidebarFooter>
 
diff --git a/components/navigation/nav-link.tsx b/components/navigation/mobile-nav-link.tsx
similarity index 79%
rename from components/navigation/nav-link.tsx
rename to components/navigation/mobile-nav-link.tsx
index dccf292..48238a4 100644
--- a/components/navigation/nav-link.tsx
+++ b/components/navigation/mobile-nav-link.tsx
@@ -6,19 +6,24 @@ import { usePathname } from "next/navigation";
 import type { NavLink as NavLinkType } from "@/components/navigation/nav-links.constants";
 import {
   cn,
-  getNavIconClasses,
+  getNavIconInvertClasses,
   isRouteActive,
   NAV_LINK_ACTIVE_CLASSES,
   NAV_LINK_INACTIVE_CLASSES,
 } from "@/lib/utils";
 
-type NavLinkProps = NavLinkType & {
+type MobileNavLinkProps = NavLinkType & {
   /** Passed by SheetClose asChild to close the sheet on click */
   onClick?: () => void;
 };
 
 /** Navigation link for mobile Sheet menu. */
-export function NavLink({ imgURL, route, label, onClick }: NavLinkProps) {
+export function MobileNavLink({
+  iconUrl,
+  route,
+  label,
+  onClick,
+}: MobileNavLinkProps) {
   const pathname = usePathname();
   const isActive = isRouteActive(pathname, route);
 
@@ -34,11 +39,11 @@ export function NavLink({ imgURL, route, label, onClick }: NavLinkProps) {
       )}
     >
       <Image
-        src={imgURL}
+        src={iconUrl}
         alt=""
         width={20}
         height={20}
-        className={getNavIconClasses(isActive)}
+        className={getNavIconInvertClasses(isActive)}
       />
       <span>{label}</span>
     </Link>
diff --git a/components/navigation/mobile-nav.tsx b/components/navigation/mobile-nav.tsx
index 3cf6348..52db38e 100644
--- a/components/navigation/mobile-nav.tsx
+++ b/components/navigation/mobile-nav.tsx
@@ -10,9 +10,9 @@ import {
 import { Menu, X } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
-import { ThemeLogo } from "@/components/navigation/full-logo";
-import { NavLink } from "@/components/navigation/nav-link";
+import { MobileNavLink } from "@/components/navigation/mobile-nav-link";
 import { NAV_LINKS } from "@/components/navigation/nav-links.constants";
+import { ThemedFullLogo } from "@/components/navigation/themed-full-logo";
 import { Button } from "@/components/ui/button";
 import {
   Sheet,
@@ -66,7 +66,7 @@ export function MobileNav() {
             <SheetTitle className="sr-only">Mobile navigation menu</SheetTitle>
             <SheetClose asChild>
               <Link href="/" className="flex items-center">
-                <ThemeLogo />
+                <ThemedFullLogo />
               </Link>
             </SheetClose>
           </SheetHeader>
@@ -74,8 +74,8 @@ export function MobileNav() {
           <nav className="flex flex-1 flex-col gap-3 pt-5">
             {NAV_LINKS.map((link) => (
               <SheetClose key={link.route} asChild>
-                <NavLink
-                  imgURL={link.imgURL}
+                <MobileNavLink
+                  iconUrl={link.iconUrl}
                   route={link.route}
                   label={link.label}
                 />
diff --git a/components/navigation/mobile-header.tsx b/components/navigation/mobile-top-bar.tsx
similarity index 81%
rename from components/navigation/mobile-header.tsx
rename to components/navigation/mobile-top-bar.tsx
index 52df6f8..7319405 100644
--- a/components/navigation/mobile-header.tsx
+++ b/components/navigation/mobile-top-bar.tsx
@@ -1,24 +1,22 @@
 import Link from "next/link";
 import { MobileNav } from "@/components/navigation/mobile-nav";
 import { ThemeToggle } from "@/components/navigation/theme-toggle";
-import { cn, HEADER_HEIGHT } from "@/lib/utils";
+import { cn, TOP_BAR_HEIGHT } from "@/lib/utils";
 
-export function MobileHeader() {
+export function MobileTopBar() {
   return (
     <header
       className={cn(
         "fixed top-0 z-50 flex w-full items-center justify-between bg-sidebar px-4 shadow-sm sm:hidden",
-        HEADER_HEIGHT,
+        TOP_BAR_HEIGHT,
       )}
     >
-      {/* Left: Logo icon */}
       <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 */}
         <img src="/images/site-logo.svg" className="size-7" />
       </Link>
 
-      {/* Right: Theme toggle + hamburger */}
       <div className="flex items-center gap-2">
         <ThemeToggle />
         <MobileNav />
diff --git a/components/navigation/nav-links.constants.ts b/components/navigation/nav-links.constants.ts
index 026a389..182cc09 100644
--- a/components/navigation/nav-links.constants.ts
+++ b/components/navigation/nav-links.constants.ts
@@ -1,19 +1,19 @@
 import type { Route } from "next";
 
 export type NavLink = {
-  imgURL: string;
+  iconUrl: string;
   route: Route;
   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" },
+  { iconUrl: "/icons/home.svg", route: "/", label: "Home" },
+  { iconUrl: "/icons/users.svg", route: "/community", label: "Community" },
+  { iconUrl: "/icons/star.svg", route: "/collections", label: "Collections" },
+  { iconUrl: "/icons/suitcase.svg", route: "/jobs", label: "Find Jobs" },
+  { iconUrl: "/icons/tag.svg", route: "/tags", label: "Tags" },
   {
-    imgURL: "/icons/question.svg",
+    iconUrl: "/icons/question.svg",
     route: "/ask-question",
     label: "Ask a question",
   },
diff --git a/components/navigation/full-logo.tsx b/components/navigation/themed-full-logo.tsx
similarity index 85%
rename from components/navigation/full-logo.tsx
rename to components/navigation/themed-full-logo.tsx
index 0a91628..574f32f 100644
--- a/components/navigation/full-logo.tsx
+++ b/components/navigation/themed-full-logo.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 const LOGO_WIDTH = 137;
 const LOGO_HEIGHT = 23;
 
-type ThemeLogoProps = {
+type ThemedFullLogoProps = {
   className?: string;
 };
 
@@ -12,7 +12,7 @@ type ThemeLogoProps = {
  * 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) {
+export function ThemedFullLogo({ className }: ThemedFullLogoProps) {
   return (
     <span
       style={{ aspectRatio: `${LOGO_WIDTH}/${LOGO_HEIGHT}` }}
diff --git a/components/clerk-provider.tsx b/components/providers/clerk-provider.tsx
similarity index 95%
rename from components/clerk-provider.tsx
rename to components/providers/clerk-provider.tsx
index 8efbe20..79f5bfe 100644
--- a/components/clerk-provider.tsx
+++ b/components/providers/clerk-provider.tsx
@@ -15,7 +15,7 @@ export function ClerkProvider({
         theme: shadcn,
         cssLayerName: "clerk",
         variables: {
-          fontFamily: "var(--font-sans-serif)",
+          fontFamily: "var(--font-inter)",
         },
         elements: {
           formButtonPrimary:
diff --git a/components/theme-provider.tsx b/components/providers/theme-provider.tsx
similarity index 100%
rename from components/theme-provider.tsx
rename to components/providers/theme-provider.tsx
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 73edebb..7989101 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -21,7 +21,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useIsMobile } from "@/hooks/use-mobile";
+import { useMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state";
@@ -65,7 +65,7 @@ function SidebarProvider({
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile();
+  const isMobile = useMobile();
   const [openMobile, setOpenMobile] = React.useState(false);
 
   // This is the internal state of the sidebar.
diff --git a/e2e/viewports.ts b/e2e/viewports.ts
index 3aedff6..9decd46 100644
--- a/e2e/viewports.ts
+++ b/e2e/viewports.ts
@@ -5,6 +5,7 @@
  * Tailwind breakpoints: sm=640, md=768, lg=1024, xl=1280, 2xl=1536
  */
 
+// Heights reused across all breakpoint presets
 const MOBILE_HEIGHT = 700;
 const DESKTOP_HEIGHT = 900;
 
diff --git a/hooks/use-mobile.ts b/hooks/use-mobile.ts
index 7365b7d..f052b8b 100644
--- a/hooks/use-mobile.ts
+++ b/hooks/use-mobile.ts
@@ -2,7 +2,7 @@ import * as React from "react";
 
 const MOBILE_BREAKPOINT = 640; // tailwind sm breakpoint
 
-export function useIsMobile() {
+export function useMobile() {
   // Start with false to match server-rendered HTML and prevent hydration mismatch
   const [isMobile, setIsMobile] = React.useState(false);
 
diff --git a/lib/utils.ts b/lib/utils.ts
index f9ef532..200b56d 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -13,19 +13,19 @@ export function isRouteActive(pathname: string, route: string): boolean {
   return pathname === route || pathname.startsWith(`${route}/`);
 }
 
-// Navigation styling constants - shared between desktop sidebar and mobile nav
+// Navigation link styling constants - shared between left sidebar and mobile nav
 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 headers and main content
-export const CONTENT_HORIZONTAL_PADDING = "px-6 md:px-8 lg:px-12";
-export const HEADER_HEIGHT = "h-14";
-export const MOBILE_HEADER_TOP_OFFSET = "pt-14"; // Compensates for fixed mobile header
+// Layout constants - shared between top bars and main content
+export const LAYOUT_HORIZONTAL_PADDING = "px-6 md:px-8 lg:px-12";
+export const TOP_BAR_HEIGHT = "h-14";
+export const MOBILE_TOP_BAR_OFFSET = "pt-14"; // Compensates for fixed mobile top bar
 
 /**
  * Get icon classes for navigation items (handles inversion for inactive state).
  */
-export function getNavIconClasses(isActive: boolean): string {
+export function getNavIconInvertClasses(isActive: boolean): string {
   return cn(!isActive && "invert-colors", "shrink-0");
 }
diff --git a/next.config.ts b/next.config.ts
index 5c3d0a8..6170b35 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -3,7 +3,7 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   reactCompiler: true,
 
-  // Position dev indicator (route type, cache status) away from left sidebar
+  // Position Next.js dev indicator (route type, cache status) away from left sidebar
   devIndicators: {
     position: "bottom-right",
   },