diff --git a/app/(app)/about/page.tsx b/app/(app)/about/page.tsx
index d3aad1b1..185c93e9 100644
--- a/app/(app)/about/page.tsx
+++ b/app/(app)/about/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 import {
   BookOpen,
diff --git a/app/(app)/books/bbd/[chapter]/page.tsx b/app/(app)/books/bbd/[chapter]/page.tsx
index fb8c5532..0013b31b 100644
--- a/app/(app)/books/bbd/[chapter]/page.tsx
+++ b/app/(app)/books/bbd/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/bbd/page.tsx b/app/(app)/books/bbd/page.tsx
index 68d7c31f..876083e6 100644
--- a/app/(app)/books/bbd/page.tsx
+++ b/app/(app)/books/bbd/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBbdMeta, getBbdIntroSegments } from "@/lib/bbd";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/bg/[chapter]/[verse]/page.tsx b/app/(app)/books/bg/[chapter]/[verse]/page.tsx
index c2cc0b61..2c1b1ac6 100644
--- a/app/(app)/books/bg/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/bg/[chapter]/[verse]/page.tsx
@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 export const dynamic = "force-dynamic";
diff --git a/app/(app)/books/bg/page.tsx b/app/(app)/books/bg/page.tsx
index c0c7aa93..aead3082 100644
--- a/app/(app)/books/bg/page.tsx
+++ b/app/(app)/books/bg/page.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 
diff --git a/app/(app)/books/bk/[chapter]/page.tsx b/app/(app)/books/bk/[chapter]/page.tsx
index bc062030..3534b78b 100644
--- a/app/(app)/books/bk/[chapter]/page.tsx
+++ b/app/(app)/books/bk/[chapter]/page.tsx
@@ -10,12 +10,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/(app)/books/bk/page.tsx b/app/(app)/books/bk/page.tsx
index 94b23d16..51d12754 100644
--- a/app/(app)/books/bk/page.tsx
+++ b/app/(app)/books/bk/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBkMeta } from "@/lib/bk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/bs/[chapter]/[verse]/page.tsx b/app/(app)/books/bs/[chapter]/[verse]/page.tsx
index c55f8681..69d16830 100644
--- a/app/(app)/books/bs/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/bs/[chapter]/[verse]/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -12,7 +12,7 @@ import {
   type VerseRecord,
 } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 export const dynamic = "force-dynamic";
diff --git a/app/(app)/books/bs/[chapter]/page.tsx b/app/(app)/books/bs/[chapter]/page.tsx
index 0d3b6fba..0c95d31e 100644
--- a/app/(app)/books/bs/[chapter]/page.tsx
+++ b/app/(app)/books/bs/[chapter]/page.tsx
@@ -7,7 +7,7 @@ import { getChapterVerseIndex } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
diff --git a/app/(app)/books/bs/page.tsx b/app/(app)/books/bs/page.tsx
index a59f9124..c2be5209 100644
--- a/app/(app)/books/bs/page.tsx
+++ b/app/(app)/books/bs/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 import fs from "fs";
diff --git a/app/(app)/books/cbhc/[chapter]/page.tsx b/app/(app)/books/cbhc/[chapter]/page.tsx
index 995a686c..7f7c5f01 100644
--- a/app/(app)/books/cbhc/[chapter]/page.tsx
+++ b/app/(app)/books/cbhc/[chapter]/page.tsx
@@ -10,12 +10,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/(app)/books/cbhc/page.tsx b/app/(app)/books/cbhc/page.tsx
index 858e5777..09bdfef3 100644
--- a/app/(app)/books/cbhc/page.tsx
+++ b/app/(app)/books/cbhc/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getCbhcMeta } from "@/lib/cbhc";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx b/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx
index 0c90bec6..4e333dfe 100644
--- a/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx
@@ -2,11 +2,11 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 type ChapterInfo = {
diff --git a/app/(app)/books/cc/[lila]/page.tsx b/app/(app)/books/cc/[lila]/page.tsx
index bb6211aa..83dfb1d5 100644
--- a/app/(app)/books/cc/[lila]/page.tsx
+++ b/app/(app)/books/cc/[lila]/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../../extracted-verse-count";
diff --git a/app/(app)/books/cc/page.tsx b/app/(app)/books/cc/page.tsx
index 336cb325..3aa72b66 100644
--- a/app/(app)/books/cc/page.tsx
+++ b/app/(app)/books/cc/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { ExtractedVerseCount } from "../extracted-verse-count";
diff --git a/app/(app)/books/chapter-viewer.tsx b/app/(app)/books/chapter-viewer.tsx
index 9c840b13..3fd26d06 100644
--- a/app/(app)/books/chapter-viewer.tsx
+++ b/app/(app)/books/chapter-viewer.tsx
@@ -6,7 +6,7 @@ import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Types
diff --git a/app/(app)/books/ds/[chapter]/page.tsx b/app/(app)/books/ds/[chapter]/page.tsx
index 31eec0bf..9952598a 100644
--- a/app/(app)/books/ds/[chapter]/page.tsx
+++ b/app/(app)/books/ds/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/ds/page.tsx b/app/(app)/books/ds/page.tsx
index 8130c6f0..4621b3bb 100644
--- a/app/(app)/books/ds/page.tsx
+++ b/app/(app)/books/ds/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getDsMeta, getDsIntroSegments } from "@/lib/ds";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/ej/[chapter]/page.tsx b/app/(app)/books/ej/[chapter]/page.tsx
index 4b910b97..26eac554 100644
--- a/app/(app)/books/ej/[chapter]/page.tsx
+++ b/app/(app)/books/ej/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/ej/page.tsx b/app/(app)/books/ej/page.tsx
index d93e9ead..f4b68651 100644
--- a/app/(app)/books/ej/page.tsx
+++ b/app/(app)/books/ej/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getEjMeta, getEjIntroSegments } from "@/lib/ej";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/ek/[chapter]/page.tsx b/app/(app)/books/ek/[chapter]/page.tsx
index fb6137b1..691da546 100644
--- a/app/(app)/books/ek/[chapter]/page.tsx
+++ b/app/(app)/books/ek/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/ek/page.tsx b/app/(app)/books/ek/page.tsx
index c2a92a63..7635d992 100644
--- a/app/(app)/books/ek/page.tsx
+++ b/app/(app)/books/ek/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getEkMeta, getEkIntroSegments } from "@/lib/ek";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/gg/[chapter]/page.tsx b/app/(app)/books/gg/[chapter]/page.tsx
index b9548296..b93a4e41 100644
--- a/app/(app)/books/gg/[chapter]/page.tsx
+++ b/app/(app)/books/gg/[chapter]/page.tsx
@@ -10,12 +10,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export const dynamic = "force-dynamic";
 
diff --git a/app/(app)/books/gg/page.tsx b/app/(app)/books/gg/page.tsx
index 7a0d9c1e..11987df7 100644
--- a/app/(app)/books/gg/page.tsx
+++ b/app/(app)/books/gg/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getGgMeta, getGgIntroSegments } from "@/lib/gg";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/hkh/[chapter]/page.tsx b/app/(app)/books/hkh/[chapter]/page.tsx
index a4f84255..0a69e541 100644
--- a/app/(app)/books/hkh/[chapter]/page.tsx
+++ b/app/(app)/books/hkh/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/hkh/page.tsx b/app/(app)/books/hkh/page.tsx
index 8b07286d..8dca59e8 100644
--- a/app/(app)/books/hkh/page.tsx
+++ b/app/(app)/books/hkh/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getHkhMeta, getHkhIntroSegments } from "@/lib/hkh";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/iso/[mantra]/page.tsx b/app/(app)/books/iso/[mantra]/page.tsx
index 0caa1528..5a7c0b9f 100644
--- a/app/(app)/books/iso/[mantra]/page.tsx
+++ b/app/(app)/books/iso/[mantra]/page.tsx
@@ -11,12 +11,12 @@ import {
   type IsoSidebarItem,
 } from "@/lib/iso";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Type guards
diff --git a/app/(app)/books/iso/page.tsx b/app/(app)/books/iso/page.tsx
index a9c9210c..2a019a36 100644
--- a/app/(app)/books/iso/page.tsx
+++ b/app/(app)/books/iso/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getIsoMeta, getIsoIntroSegments } from "@/lib/iso";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/kb/[volume]/[slug]/page.tsx b/app/(app)/books/kb/[volume]/[slug]/page.tsx
index c2ce774b..006c9626 100644
--- a/app/(app)/books/kb/[volume]/[slug]/page.tsx
+++ b/app/(app)/books/kb/[volume]/[slug]/page.tsx
@@ -6,12 +6,12 @@ import { notFound } from "next/navigation";
 import { getProseChapter, getProseChapters } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export async function generateMetadata({
   params,
diff --git a/app/(app)/books/kb/[volume]/page.tsx b/app/(app)/books/kb/[volume]/page.tsx
index 521ad44b..bfbee865 100644
--- a/app/(app)/books/kb/[volume]/page.tsx
+++ b/app/(app)/books/kb/[volume]/page.tsx
@@ -4,7 +4,7 @@ import { notFound } from "next/navigation";
 import { getBookMeta, getProseChapters } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export async function generateMetadata({
diff --git a/app/(app)/books/kb/page.tsx b/app/(app)/books/kb/page.tsx
index 0432ffb6..d2d4a4ef 100644
--- a/app/(app)/books/kb/page.tsx
+++ b/app/(app)/books/kb/page.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 
diff --git a/app/(app)/books/lcl/[chapter]/page.tsx b/app/(app)/books/lcl/[chapter]/page.tsx
index f9e3bcbf..d52f20b6 100644
--- a/app/(app)/books/lcl/[chapter]/page.tsx
+++ b/app/(app)/books/lcl/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/lcl/page.tsx b/app/(app)/books/lcl/page.tsx
index 3c2722ee..b380aebd 100644
--- a/app/(app)/books/lcl/page.tsx
+++ b/app/(app)/books/lcl/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLclMeta, getLclIntroSegments } from "@/lib/lcl";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/lob/[chapter]/page.tsx b/app/(app)/books/lob/[chapter]/page.tsx
index 89a7df3e..e08bf7c7 100644
--- a/app/(app)/books/lob/[chapter]/page.tsx
+++ b/app/(app)/books/lob/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export async function generateMetadata({
   params,
diff --git a/app/(app)/books/lob/page.tsx b/app/(app)/books/lob/page.tsx
index 8938fa7d..25451673 100644
--- a/app/(app)/books/lob/page.tsx
+++ b/app/(app)/books/lob/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLobMeta, getLobIntroSegments } from "@/lib/lob";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/mg/[chapter]/page.tsx b/app/(app)/books/mg/[chapter]/page.tsx
index 5b95b33c..4614b1f4 100644
--- a/app/(app)/books/mg/[chapter]/page.tsx
+++ b/app/(app)/books/mg/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export async function generateMetadata({
   params,
diff --git a/app/(app)/books/mg/page.tsx b/app/(app)/books/mg/page.tsx
index d994f145..20ada080 100644
--- a/app/(app)/books/mg/page.tsx
+++ b/app/(app)/books/mg/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getMgMeta, getMgIntroSegments } from "@/lib/mg";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/mm/[chapter]/[verse]/page.tsx b/app/(app)/books/mm/[chapter]/[verse]/page.tsx
index b12106cd..be246ec0 100644
--- a/app/(app)/books/mm/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/mm/[chapter]/[verse]/page.tsx
@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -11,7 +11,7 @@ import {
   type VerseRecord,
 } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import type { Metadata } from "next";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
diff --git a/app/(app)/books/mm/[chapter]/page.tsx b/app/(app)/books/mm/[chapter]/page.tsx
index 30f2048f..93862168 100644
--- a/app/(app)/books/mm/[chapter]/page.tsx
+++ b/app/(app)/books/mm/[chapter]/page.tsx
@@ -7,7 +7,7 @@ import { getChapterVerseIndex } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
diff --git a/app/(app)/books/mm/page.tsx b/app/(app)/books/mm/page.tsx
index 861f8767..b7ff039e 100644
--- a/app/(app)/books/mm/page.tsx
+++ b/app/(app)/books/mm/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 import fs from "fs";
diff --git a/app/(app)/books/mog/[chapter]/page.tsx b/app/(app)/books/mog/[chapter]/page.tsx
index 1141aa48..336f9434 100644
--- a/app/(app)/books/mog/[chapter]/page.tsx
+++ b/app/(app)/books/mog/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/mog/page.tsx b/app/(app)/books/mog/page.tsx
index b34388dc..182aab9e 100644
--- a/app/(app)/books/mog/page.tsx
+++ b/app/(app)/books/mog/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getMogMeta, getMogIntroSegments } from "@/lib/mog";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/nbs/[chapter]/[verse]/page.tsx b/app/(app)/books/nbs/[chapter]/[verse]/page.tsx
index 5a5f1054..61c46105 100644
--- a/app/(app)/books/nbs/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/nbs/[chapter]/[verse]/page.tsx
@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import {
   getBookMeta,
@@ -15,7 +15,7 @@ import {
 } from "@/lib/api";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 
 type NbsMeta = {
   book: string;
diff --git a/app/(app)/books/nbs/[chapter]/page.tsx b/app/(app)/books/nbs/[chapter]/page.tsx
index aac93e1f..eafac9ea 100644
--- a/app/(app)/books/nbs/[chapter]/page.tsx
+++ b/app/(app)/books/nbs/[chapter]/page.tsx
@@ -7,7 +7,7 @@ import { getChapterVerseIndex } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
 import { Card, CardContent } from "@/components/ui/card";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import Link from "next/link";
 import fs from "fs";
 import path from "path";
diff --git a/app/(app)/books/nbs/page.tsx b/app/(app)/books/nbs/page.tsx
index 794c1caa..6eee2ef3 100644
--- a/app/(app)/books/nbs/page.tsx
+++ b/app/(app)/books/nbs/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 import fs from "fs";
diff --git a/app/(app)/books/nod/[chapter]/page.tsx b/app/(app)/books/nod/[chapter]/page.tsx
index 763a089e..c878e923 100644
--- a/app/(app)/books/nod/[chapter]/page.tsx
+++ b/app/(app)/books/nod/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/nod/page.tsx b/app/(app)/books/nod/page.tsx
index de42eb30..181c926e 100644
--- a/app/(app)/books/nod/page.tsx
+++ b/app/(app)/books/nod/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getNodMeta, getNodIntroSegments } from "@/lib/nod";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/noi/[text]/page.tsx b/app/(app)/books/noi/[text]/page.tsx
index a0e2a5ca..b1cc157f 100644
--- a/app/(app)/books/noi/[text]/page.tsx
+++ b/app/(app)/books/noi/[text]/page.tsx
@@ -11,12 +11,12 @@ import {
   type NoiSidebarItem,
 } from "@/lib/noi";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Type guards
diff --git a/app/(app)/books/noi/page.tsx b/app/(app)/books/noi/page.tsx
index 6d0a0bc8..9dd8b8bd 100644
--- a/app/(app)/books/noi/page.tsx
+++ b/app/(app)/books/noi/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getNoiMeta, getNoiIntroSegments } from "@/lib/noi";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/ochkm/[chapter]/page.tsx b/app/(app)/books/ochkm/[chapter]/page.tsx
index 2c129a73..08cb78a0 100644
--- a/app/(app)/books/ochkm/[chapter]/page.tsx
+++ b/app/(app)/books/ochkm/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/ochkm/page.tsx b/app/(app)/books/ochkm/page.tsx
index 55aaf1b8..050090e7 100644
--- a/app/(app)/books/ochkm/page.tsx
+++ b/app/(app)/books/ochkm/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getOchkmMeta, getOchkmIntroSegments } from "@/lib/ochkm";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/owk/[chapter]/page.tsx b/app/(app)/books/owk/[chapter]/page.tsx
index 8bea2b20..1d555043 100644
--- a/app/(app)/books/owk/[chapter]/page.tsx
+++ b/app/(app)/books/owk/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/owk/page.tsx b/app/(app)/books/owk/page.tsx
index 9f16d5dd..7622eeb9 100644
--- a/app/(app)/books/owk/page.tsx
+++ b/app/(app)/books/owk/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getOwkMeta, getOwkIntroSegments } from "@/lib/owk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/page.tsx b/app/(app)/books/page.tsx
index ba4b44d5..92deca2c 100644
--- a/app/(app)/books/page.tsx
+++ b/app/(app)/books/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { getAllBooks, type BookMeta } from "@/lib/api";
 import { buildOgMeta } from "@/lib/og";
 import { BooksGrid, type BookInfo } from "./books-grid";
diff --git a/app/(app)/books/pk/[chapter]/page.tsx b/app/(app)/books/pk/[chapter]/page.tsx
index b81b1050..0a3ed54b 100644
--- a/app/(app)/books/pk/[chapter]/page.tsx
+++ b/app/(app)/books/pk/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/pk/page.tsx b/app/(app)/books/pk/page.tsx
index 55e5d75c..db62114f 100644
--- a/app/(app)/books/pk/page.tsx
+++ b/app/(app)/books/pk/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getPkMeta } from "@/lib/pk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/poy/[chapter]/page.tsx b/app/(app)/books/poy/[chapter]/page.tsx
index 672d9526..4849bd5e 100644
--- a/app/(app)/books/poy/[chapter]/page.tsx
+++ b/app/(app)/books/poy/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/poy/page.tsx b/app/(app)/books/poy/page.tsx
index 264bbfa0..76500f2a 100644
--- a/app/(app)/books/poy/page.tsx
+++ b/app/(app)/books/poy/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getPoyMeta, getPoyIntroSegments } from "@/lib/poy";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/pqpa/[chapter]/page.tsx b/app/(app)/books/pqpa/[chapter]/page.tsx
index 52ab51b2..28f4edcb 100644
--- a/app/(app)/books/pqpa/[chapter]/page.tsx
+++ b/app/(app)/books/pqpa/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/pqpa/page.tsx b/app/(app)/books/pqpa/page.tsx
index 64297058..77210529 100644
--- a/app/(app)/books/pqpa/page.tsx
+++ b/app/(app)/books/pqpa/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getPqpaMeta, getPqpaIntroSegments } from "@/lib/pqpa";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/rv/[chapter]/page.tsx b/app/(app)/books/rv/[chapter]/page.tsx
index 53d36ba3..6d4c6567 100644
--- a/app/(app)/books/rv/[chapter]/page.tsx
+++ b/app/(app)/books/rv/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/rv/page.tsx b/app/(app)/books/rv/page.tsx
index 6be5531c..4e33b0c6 100644
--- a/app/(app)/books/rv/page.tsx
+++ b/app/(app)/books/rv/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getRvMeta, getRvIntroSegments } from "@/lib/rv";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx b/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx
index 8b3b87ee..f027cc25 100644
--- a/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx
@@ -2,11 +2,11 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 type ChapterInfo = {
diff --git a/app/(app)/books/sb/[canto]/page.tsx b/app/(app)/books/sb/[canto]/page.tsx
index 4545affe..0d663865 100644
--- a/app/(app)/books/sb/[canto]/page.tsx
+++ b/app/(app)/books/sb/[canto]/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../../extracted-verse-count";
diff --git a/app/(app)/books/sb/page.tsx b/app/(app)/books/sb/page.tsx
index 28e8ee91..97b5da3b 100644
--- a/app/(app)/books/sb/page.tsx
+++ b/app/(app)/books/sb/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { ExtractedVerseCount } from "../extracted-verse-count";
diff --git a/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx b/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx
index c9e05fc8..ab5f8399 100644
--- a/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx
+++ b/app/(app)/books/sb1962/[chapter]/[verse]/page.tsx
@@ -1,10 +1,10 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
-import type { MobileNavGroup } from "@/components/mobile-nav";
+import type { MobileNavGroup } from "@/components/layout/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 
 export const dynamic = "force-dynamic";
diff --git a/app/(app)/books/sb1962/page.tsx b/app/(app)/books/sb1962/page.tsx
index 9f765ff3..22fc0797 100644
--- a/app/(app)/books/sb1962/page.tsx
+++ b/app/(app)/books/sb1962/page.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getBookMeta } from "@/lib/api";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { ExtractedVerseCount } from "../extracted-verse-count";
 
diff --git a/app/(app)/books/ssr/[chapter]/page.tsx b/app/(app)/books/ssr/[chapter]/page.tsx
index b09b856b..15f353a8 100644
--- a/app/(app)/books/ssr/[chapter]/page.tsx
+++ b/app/(app)/books/ssr/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/ssr/page.tsx b/app/(app)/books/ssr/page.tsx
index c86c6ebb..4caa588b 100644
--- a/app/(app)/books/ssr/page.tsx
+++ b/app/(app)/books/ssr/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getSsrMeta, getSsrIntroSegments } from "@/lib/ssr";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/sva/[chapter]/page.tsx b/app/(app)/books/sva/[chapter]/page.tsx
index 799f7228..a40d9657 100644
--- a/app/(app)/books/sva/[chapter]/page.tsx
+++ b/app/(app)/books/sva/[chapter]/page.tsx
@@ -13,12 +13,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/sva/page.tsx b/app/(app)/books/sva/page.tsx
index 3a559dbb..e6fece54 100644
--- a/app/(app)/books/sva/page.tsx
+++ b/app/(app)/books/sva/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getSvaMeta, getSvaIntroSegments } from "@/lib/sva";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/tlc/[chapter]/page.tsx b/app/(app)/books/tlc/[chapter]/page.tsx
index 86de2741..cbd45d6d 100644
--- a/app/(app)/books/tlc/[chapter]/page.tsx
+++ b/app/(app)/books/tlc/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/tlc/page.tsx b/app/(app)/books/tlc/page.tsx
index 9d098615..a262ce5c 100644
--- a/app/(app)/books/tlc/page.tsx
+++ b/app/(app)/books/tlc/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTlcMeta, getTlcIntroSegments } from "@/lib/tlc";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/tlk/[chapter]/page.tsx b/app/(app)/books/tlk/[chapter]/page.tsx
index 749aeafc..dbc62140 100644
--- a/app/(app)/books/tlk/[chapter]/page.tsx
+++ b/app/(app)/books/tlk/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/tlk/page.tsx b/app/(app)/books/tlk/page.tsx
index b0a62189..2af3ade4 100644
--- a/app/(app)/books/tlk/page.tsx
+++ b/app/(app)/books/tlk/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTlkMeta, getTlkIntroSegments } from "@/lib/tlk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/tqk/[chapter]/page.tsx b/app/(app)/books/tqk/[chapter]/page.tsx
index bd48f9cf..8e6d8e32 100644
--- a/app/(app)/books/tqk/[chapter]/page.tsx
+++ b/app/(app)/books/tqk/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/tqk/page.tsx b/app/(app)/books/tqk/page.tsx
index 2a4f7a47..ba4769f1 100644
--- a/app/(app)/books/tqk/page.tsx
+++ b/app/(app)/books/tqk/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTqkMeta, getTqkIntroSegments } from "@/lib/tqk";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/ttp/[chapter]/page.tsx b/app/(app)/books/ttp/[chapter]/page.tsx
index 799822dc..82b76c26 100644
--- a/app/(app)/books/ttp/[chapter]/page.tsx
+++ b/app/(app)/books/ttp/[chapter]/page.tsx
@@ -12,12 +12,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/ttp/page.tsx b/app/(app)/books/ttp/page.tsx
index beafbd51..1a2d5149 100644
--- a/app/(app)/books/ttp/page.tsx
+++ b/app/(app)/books/ttp/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTtpMeta } from "@/lib/ttp";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/books/va/[chapter]/page.tsx b/app/(app)/books/va/[chapter]/page.tsx
index 51de0be2..bb198271 100644
--- a/app/(app)/books/va/[chapter]/page.tsx
+++ b/app/(app)/books/va/[chapter]/page.tsx
@@ -11,12 +11,12 @@ import {
 import { getProseChapter } from "@/lib/api";
 import { ogForChapter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 import { BOOK_NAMES } from "@/lib/constants";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/books/va/page.tsx b/app/(app)/books/va/page.tsx
index 3b60a08a..827f2b1c 100644
--- a/app/(app)/books/va/page.tsx
+++ b/app/(app)/books/va/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getVaMeta } from "@/lib/va";
 import { ogForBook } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export function generateMetadata(): Metadata {
diff --git a/app/(app)/c/[id]/page.tsx b/app/(app)/c/[id]/page.tsx
index aca0f963..813db063 100644
--- a/app/(app)/c/[id]/page.tsx
+++ b/app/(app)/c/[id]/page.tsx
@@ -15,7 +15,7 @@ import {
   type Collection,
   type Post,
 } from "@/lib/social";
-import { PostViews } from "@/components/social/post-views";
+import { PostViews } from "@/components/social/post/post-views";
 
 export default function PublicCollectionPage(props: {
   params: Promise<{ id: string }>;
diff --git a/app/(app)/disciples/page.tsx b/app/(app)/disciples/page.tsx
index ce9d6e45..8a476af2 100644
--- a/app/(app)/disciples/page.tsx
+++ b/app/(app)/disciples/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { ogForDisciples } from "@/lib/og";
 import {
   getTotalDiscipleCount,
diff --git a/app/(app)/essays/[slug]/page.tsx b/app/(app)/essays/[slug]/page.tsx
index 167662e4..4d298441 100644
--- a/app/(app)/essays/[slug]/page.tsx
+++ b/app/(app)/essays/[slug]/page.tsx
@@ -4,12 +4,12 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { ogForEssay, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 import { bff, bffList } from "@/lib/bff";
 
 // ---------------------------------------------------------------------------
diff --git a/app/(app)/essays/page.tsx b/app/(app)/essays/page.tsx
index 18e155ce..5d431cc3 100644
--- a/app/(app)/essays/page.tsx
+++ b/app/(app)/essays/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 import { bffList } from "@/lib/bff";
 import { EssaysGrid } from "./essays-grid";
diff --git a/app/(app)/journals/[slug]/[chapter]/page.tsx b/app/(app)/journals/[slug]/[chapter]/page.tsx
index a9f39903..a7b484fb 100644
--- a/app/(app)/journals/[slug]/[chapter]/page.tsx
+++ b/app/(app)/journals/[slug]/[chapter]/page.tsx
@@ -11,12 +11,12 @@ import {
   type JournalSidebarItem,
 } from "@/lib/journals";
 import { ogForJournal, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export async function generateMetadata({
   params,
diff --git a/app/(app)/journals/[slug]/page.tsx b/app/(app)/journals/[slug]/page.tsx
index 26d79630..ec9dc2eb 100644
--- a/app/(app)/journals/[slug]/page.tsx
+++ b/app/(app)/journals/[slug]/page.tsx
@@ -9,7 +9,7 @@ import {
   type JournalChapterEntry,
 } from "@/lib/journals";
 import { ogForJournal } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export async function generateMetadata({
diff --git a/app/(app)/journals/page.tsx b/app/(app)/journals/page.tsx
index 00b49b55..073b8ded 100644
--- a/app/(app)/journals/page.tsx
+++ b/app/(app)/journals/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 import {
   Card,
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index 263cbe4c..d00777fa 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -1,8 +1,8 @@
 import { Suspense } from "react";
-import { SiteHeader } from "@/components/site-header";
-import { SiteSidebar } from "@/components/site-sidebar";
-import { SiteBottomNav } from "@/components/site-bottom-nav";
-import { SiteFooter } from "@/components/site-footer";
+import { SiteHeader } from "@/components/layout/site-header";
+import { SiteSidebar } from "@/components/layout/site-sidebar";
+import { SiteBottomNav } from "@/components/layout/site-bottom-nav";
+import { SiteFooter } from "@/components/layout/site-footer";
 import { VerifyEmailBanner } from "@/components/auth/verify-email-banner";
 import { TextSelectionToolbar } from "@/components/text-selection-toolbar";
 import { TextHighlighter } from "@/components/text-highlighter";
diff --git a/app/(app)/letters/[slug]/page.tsx b/app/(app)/letters/[slug]/page.tsx
index 24b98902..7c7e603e 100644
--- a/app/(app)/letters/[slug]/page.tsx
+++ b/app/(app)/letters/[slug]/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLetter, getAdjacentLetters } from "@/lib/letters";
 import { ogForLetter, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
diff --git a/app/(app)/letters/page.tsx b/app/(app)/letters/page.tsx
index 811279b1..902e65d6 100644
--- a/app/(app)/letters/page.tsx
+++ b/app/(app)/letters/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 import {
   getLetterYears,
diff --git a/app/(app)/magazines/[slug]/[issue]/page.tsx b/app/(app)/magazines/[slug]/[issue]/page.tsx
index d94888f7..effa2f42 100644
--- a/app/(app)/magazines/[slug]/[issue]/page.tsx
+++ b/app/(app)/magazines/[slug]/[issue]/page.tsx
@@ -11,12 +11,12 @@ import {
   type MagazineSidebarItem,
 } from "@/lib/magazines";
 import { ogForMagazine, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 export async function generateMetadata({
   params,
diff --git a/app/(app)/magazines/[slug]/page.tsx b/app/(app)/magazines/[slug]/page.tsx
index 67e686a0..8d29f373 100644
--- a/app/(app)/magazines/[slug]/page.tsx
+++ b/app/(app)/magazines/[slug]/page.tsx
@@ -9,7 +9,7 @@ import {
   type MagazineChapterEntry,
 } from "@/lib/magazines";
 import { ogForMagazine } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export async function generateMetadata({
diff --git a/app/(app)/magazines/page.tsx b/app/(app)/magazines/page.tsx
index f7a2d257..700f4c1f 100644
--- a/app/(app)/magazines/page.tsx
+++ b/app/(app)/magazines/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import {
   Card,
   CardHeader,
diff --git a/app/(app)/notifications/page.tsx b/app/(app)/notifications/page.tsx
index f2ce18da..f890f278 100644
--- a/app/(app)/notifications/page.tsx
+++ b/app/(app)/notifications/page.tsx
@@ -14,13 +14,14 @@
 
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import Link from "next/link";
 import { Bell } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useNotifications } from "@/components/notifications/notifications-provider";
 import { notifications, type AppNotification } from "@/lib/social";
+import { UserAvatar } from "@/components/ui/user-avatar";
+import { timeAgo } from "@/lib/time";
 
 export default function NotificationsPage() {
   const { user, loading } = useAuth();
@@ -122,7 +123,7 @@ function NotificationRow({
     <div
       className={cnRow(unread)}
     >
-      <Avatar src={n.actor_avatar_url ?? null} name={display} />
+      <UserAvatar src={n.actor_avatar_url} name={display} />
       <div className="min-w-0 flex-1">
         <p className="text-sm text-foreground leading-snug">
           <span className="font-semibold">{display}</span> {message}
@@ -194,34 +195,6 @@ function messageFor(n: AppNotification): string {
   }
 }
 
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={40}
-        height={40}
-        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .replace(/^@/, "")
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-10 shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
 function Empty() {
   return (
     <div className="flex flex-col items-center text-center gap-3 py-16 text-muted-foreground">
@@ -231,18 +204,3 @@ function Empty() {
   );
 }
 
-/** Compact relative time ("just now", "5m", "3h", "2d"), falling back to
- *  a date for anything older than a week. */
-function timeAgo(iso: string): string {
-  const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) return "";
-  const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
-  if (secs < 45) return "just now";
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(iso).toLocaleDateString();
-}
diff --git a/app/(app)/other-documents/[slug]/[chapter]/page.tsx b/app/(app)/other-documents/[slug]/[chapter]/page.tsx
index 54ad90f5..949b1458 100644
--- a/app/(app)/other-documents/[slug]/[chapter]/page.tsx
+++ b/app/(app)/other-documents/[slug]/[chapter]/page.tsx
@@ -11,12 +11,12 @@ import {
   type OtherDocumentSidebarItem,
 } from "@/lib/other-documents";
 import { ogForOtherDocument, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { MobileNav, type MobileNavGroup } from "@/components/mobile-nav";
+import { MobileNav, type MobileNavGroup } from "@/components/layout/mobile-nav";
 
 // ---------------------------------------------------------------------------
 // Metadata
diff --git a/app/(app)/other-documents/[slug]/page.tsx b/app/(app)/other-documents/[slug]/page.tsx
index 2eb417d8..3122604d 100644
--- a/app/(app)/other-documents/[slug]/page.tsx
+++ b/app/(app)/other-documents/[slug]/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getOtherDocumentMeta, slugToBookCode } from "@/lib/other-documents";
 import { ogForOtherDocument } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 
 export async function generateMetadata({
diff --git a/app/(app)/other-documents/page.tsx b/app/(app)/other-documents/page.tsx
index 331ab69c..4c38fd28 100644
--- a/app/(app)/other-documents/page.tsx
+++ b/app/(app)/other-documents/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { getAllOtherDocuments, bookCodeToSlug } from "@/lib/other-documents";
 import { OtherDocumentsGrid } from "./other-documents-grid";
 import { buildOgMeta } from "@/lib/og";
diff --git a/app/(app)/search/search-content.tsx b/app/(app)/search/search-content.tsx
index 03f9b5d9..3c9e4c0d 100644
--- a/app/(app)/search/search-content.tsx
+++ b/app/(app)/search/search-content.tsx
@@ -2,8 +2,8 @@
 
 import { useState, useEffect, useCallback, useRef, Suspense } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import Image from "next/image";
 import Link from "next/link";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -858,7 +858,6 @@ function ResultMeta({ result }: { result: SearchResult }) {
 // ---------------------------------------------------------------------------
 
 function UserResultCard({ user }: { user: UserResult }) {
-  const initial = user.name?.charAt(0)?.toUpperCase() || "?";
   return (
     <Link
       href={`/u/${user.handle}`}
@@ -867,20 +866,12 @@ function UserResultCard({ user }: { user: UserResult }) {
         "hover:ring-foreground/25 hover:shadow-sm transition-all",
       )}
     >
-      {user.avatar_url ? (
-        <Image
-          src={user.avatar_url}
-          alt={user.name}
-          width={56}
-          height={56}
-          className="size-14 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-          unoptimized
-        />
-      ) : (
-        <div className="size-14 rounded-full bg-primary/15 text-primary flex items-center justify-center text-xl font-semibold ring-1 ring-foreground/10 shrink-0">
-          {initial}
-        </div>
-      )}
+      <UserAvatar
+        src={user.avatar_url}
+        name={user.name}
+        className="size-14"
+        textClassName="text-xl"
+      />
       <div className="min-w-0 flex-1">
         <p className="text-sm font-semibold text-foreground truncate">
           {user.name}
diff --git a/app/(app)/transcriptions/[slug]/page.tsx b/app/(app)/transcriptions/[slug]/page.tsx
index 3d837b91..f0b07eb1 100644
--- a/app/(app)/transcriptions/[slug]/page.tsx
+++ b/app/(app)/transcriptions/[slug]/page.tsx
@@ -8,14 +8,14 @@ import {
   getAdjacentTranscriptions,
 } from "@/lib/transcriptions";
 import { buildOgMeta, ogForTranscription, extractQuoteFromHl } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ChevronLeft, ChevronRight, Clock, MapPin, Users } from "lucide-react";
 import { PlayAudioButton } from "./play-audio-button";
-import { FindInPage } from "@/components/find-in-page";
+import { FindInPage } from "@/components/layout/find-in-page";
 
 export async function generateMetadata({
   params,
diff --git a/app/(app)/transcriptions/page.tsx b/app/(app)/transcriptions/page.tsx
index 05740832..ad164dbb 100644
--- a/app/(app)/transcriptions/page.tsx
+++ b/app/(app)/transcriptions/page.tsx
@@ -2,7 +2,7 @@ export const dynamic = "force-dynamic";
 
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { ogForTranscriptions } from "@/lib/og";
 import {
   getTranscriptionYears,
diff --git a/app/(app)/transcriptions/place/[place]/page.tsx b/app/(app)/transcriptions/place/[place]/page.tsx
index 58d742c8..5aba8f7d 100644
--- a/app/(app)/transcriptions/place/[place]/page.tsx
+++ b/app/(app)/transcriptions/place/[place]/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranscriptionsByPlace } from "@/lib/transcriptions";
 import { buildOgMeta } from "@/lib/og";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Clock } from "lucide-react";
diff --git a/app/(app)/transcriptions/year/[year]/year-browser.tsx b/app/(app)/transcriptions/year/[year]/year-browser.tsx
index 8962e60a..a8af4a90 100644
--- a/app/(app)/transcriptions/year/[year]/year-browser.tsx
+++ b/app/(app)/transcriptions/year/[year]/year-browser.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo } from "react";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
diff --git a/app/(app)/u/[handle]/collections/page.tsx b/app/(app)/u/[handle]/collections/page.tsx
index 9b451126..e6a1c34d 100644
--- a/app/(app)/u/[handle]/collections/page.tsx
+++ b/app/(app)/u/[handle]/collections/page.tsx
@@ -8,7 +8,7 @@
  * Layout owns the ProfileHeader + tabs + container.
  */
 
-import { CollectionViews } from "@/components/social/collection-views";
+import { CollectionViews } from "@/components/social/collection/collection-views";
 import { usePublicProfile } from "../profile-context";
 
 export default function PublicProfileCollectionsPage() {
diff --git a/app/(app)/u/[handle]/mentions/page.tsx b/app/(app)/u/[handle]/mentions/page.tsx
index 8b4efd6c..f98944b1 100644
--- a/app/(app)/u/[handle]/mentions/page.tsx
+++ b/app/(app)/u/[handle]/mentions/page.tsx
@@ -10,7 +10,7 @@
 
 import { useEffect, useState } from "react";
 import { profile, type Post } from "@/lib/social";
-import { PostViews } from "@/components/social/post-views";
+import { PostViews } from "@/components/social/post/post-views";
 import { usePublicProfile } from "../profile-context";
 
 export default function PublicProfileMentionsPage() {
diff --git a/app/(app)/u/[handle]/posts-grid.tsx b/app/(app)/u/[handle]/posts-grid.tsx
index fd6255f5..95150836 100644
--- a/app/(app)/u/[handle]/posts-grid.tsx
+++ b/app/(app)/u/[handle]/posts-grid.tsx
@@ -14,7 +14,7 @@
 
 import { use, useEffect, useState } from "react";
 import { profile, type Post } from "@/lib/social";
-import { PostViews } from "@/components/social/post-views";
+import { PostViews } from "@/components/social/post/post-views";
 import { usePublicProfile } from "./profile-context";
 
 export function PostsGrid({
diff --git a/app/(app)/u/[handle]/posts/scroll-feed.tsx b/app/(app)/u/[handle]/posts/scroll-feed.tsx
index 42b507c9..80fd17b0 100644
--- a/app/(app)/u/[handle]/posts/scroll-feed.tsx
+++ b/app/(app)/u/[handle]/posts/scroll-feed.tsx
@@ -17,7 +17,7 @@
 import { use, useEffect, useRef, useState } from "react";
 import { notFound } from "next/navigation";
 import { profile, SocialError, type Post } from "@/lib/social";
-import { PostScrollCard } from "@/components/social/post-scroll-card";
+import { PostScrollCard } from "@/components/social/post/post-scroll-card";
 
 export function ScrollFeed({
   params,
diff --git a/app/(app)/u/me/collections/[id]/page.tsx b/app/(app)/u/me/collections/[id]/page.tsx
index 5d1c96e2..9a013353 100644
--- a/app/(app)/u/me/collections/[id]/page.tsx
+++ b/app/(app)/u/me/collections/[id]/page.tsx
@@ -18,8 +18,8 @@ import {
   type Collection,
   type Post,
 } from "@/lib/social";
-import { CollectionScrollCard } from "@/components/social/collection-scroll-card";
-import { EditCollectionDrawer } from "@/components/social/edit-collection-drawer";
+import { CollectionScrollCard } from "@/components/social/collection/collection-scroll-card";
+import { EditCollectionDrawer } from "@/components/social/collection/edit-collection-drawer";
 
 export default function CollectionDetailPage(props: {
   params: Promise<{ id: string }>;
diff --git a/app/(app)/u/me/collections/page.tsx b/app/(app)/u/me/collections/page.tsx
index 1e0272a6..066b4643 100644
--- a/app/(app)/u/me/collections/page.tsx
+++ b/app/(app)/u/me/collections/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { Plus } from "lucide-react";
 import { collections, SocialError, type Collection } from "@/lib/social";
 import { useAuth } from "@/components/auth/auth-provider";
-import { CollectionViews } from "@/components/social/collection-views";
+import { CollectionViews } from "@/components/social/collection/collection-views";
 
 export default function MyCollectionsPage() {
   const { user } = useAuth();
diff --git a/app/(app)/u/me/mentions/page.tsx b/app/(app)/u/me/mentions/page.tsx
index 4a82082a..32798fe1 100644
--- a/app/(app)/u/me/mentions/page.tsx
+++ b/app/(app)/u/me/mentions/page.tsx
@@ -10,7 +10,7 @@
 import { useEffect, useState } from "react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { profile, type Post } from "@/lib/social";
-import { PostViews } from "@/components/social/post-views";
+import { PostViews } from "@/components/social/post/post-views";
 
 export default function MentionsPage() {
   const { user } = useAuth();
diff --git a/app/(app)/u/me/page.tsx b/app/(app)/u/me/page.tsx
index 92904eb1..7b34b446 100644
--- a/app/(app)/u/me/page.tsx
+++ b/app/(app)/u/me/page.tsx
@@ -17,7 +17,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { LayoutGrid } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { ProfileEditForm } from "@/components/profile/profile-edit-form";
-import { PostGridCard } from "@/components/social/post-grid-card";
+import { PostGridCard } from "@/components/social/post/post-grid-card";
 import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { posts, SocialError, type Post } from "@/lib/social";
 
diff --git a/app/(app)/u/me/posts/page.tsx b/app/(app)/u/me/posts/page.tsx
index fe5b6ef3..0ab3d7c1 100644
--- a/app/(app)/u/me/posts/page.tsx
+++ b/app/(app)/u/me/posts/page.tsx
@@ -12,7 +12,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useAuth } from "@/components/auth/auth-provider";
-import { PostScrollCard } from "@/components/social/post-scroll-card";
+import { PostScrollCard } from "@/components/social/post/post-scroll-card";
 import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { posts, SocialError, type Post } from "@/lib/social";
 
diff --git a/app/(legal)/data-deletion/page.tsx b/app/(legal)/data-deletion/page.tsx
index 72c148ff..727bd8e2 100644
--- a/app/(legal)/data-deletion/page.tsx
+++ b/app/(legal)/data-deletion/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 
 const EFFECTIVE_DATE = "June 1, 2026";
diff --git a/app/(legal)/layout.tsx b/app/(legal)/layout.tsx
index ef545588..0c2e6f97 100644
--- a/app/(legal)/layout.tsx
+++ b/app/(legal)/layout.tsx
@@ -1,5 +1,5 @@
-import { SiteHeader } from "@/components/site-header";
-import { SiteFooter } from "@/components/site-footer";
+import { SiteHeader } from "@/components/layout/site-header";
+import { SiteFooter } from "@/components/layout/site-footer";
 
 /**
  * Minimal layout for legal / informational pages (Privacy Policy, Terms of
diff --git a/app/(legal)/privacy/page.tsx b/app/(legal)/privacy/page.tsx
index 76290a77..9c47a387 100644
--- a/app/(legal)/privacy/page.tsx
+++ b/app/(legal)/privacy/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 
 const EFFECTIVE_DATE = "June 1, 2026";
diff --git a/app/(legal)/terms/page.tsx b/app/(legal)/terms/page.tsx
index b8dc39ed..5c90543c 100644
--- a/app/(legal)/terms/page.tsx
+++ b/app/(legal)/terms/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { PageHeader } from "@/components/page-header";
+import { PageHeader } from "@/components/layout/page-header";
 import { buildOgMeta } from "@/lib/og";
 
 const EFFECTIVE_DATE = "June 1, 2026";
diff --git a/components/find-in-page.tsx b/components/layout/find-in-page.tsx
similarity index 100%
rename from components/find-in-page.tsx
rename to components/layout/find-in-page.tsx
diff --git a/components/header-search.tsx b/components/layout/header-search.tsx
similarity index 100%
rename from components/header-search.tsx
rename to components/layout/header-search.tsx
diff --git a/components/logo.tsx b/components/layout/logo.tsx
similarity index 100%
rename from components/logo.tsx
rename to components/layout/logo.tsx
diff --git a/components/mobile-nav.tsx b/components/layout/mobile-nav.tsx
similarity index 100%
rename from components/mobile-nav.tsx
rename to components/layout/mobile-nav.tsx
diff --git a/components/notification-bell.tsx b/components/layout/notification-bell.tsx
similarity index 100%
rename from components/notification-bell.tsx
rename to components/layout/notification-bell.tsx
diff --git a/components/page-header.tsx b/components/layout/page-header.tsx
similarity index 100%
rename from components/page-header.tsx
rename to components/layout/page-header.tsx
diff --git a/components/site-bottom-nav.tsx b/components/layout/site-bottom-nav.tsx
similarity index 100%
rename from components/site-bottom-nav.tsx
rename to components/layout/site-bottom-nav.tsx
diff --git a/components/site-footer.tsx b/components/layout/site-footer.tsx
similarity index 100%
rename from components/site-footer.tsx
rename to components/layout/site-footer.tsx
diff --git a/components/site-header.tsx b/components/layout/site-header.tsx
similarity index 97%
rename from components/site-header.tsx
rename to components/layout/site-header.tsx
index 1951c71b..1d86920c 100644
--- a/components/site-header.tsx
+++ b/components/layout/site-header.tsx
@@ -24,7 +24,7 @@
 
 import Link from "next/link";
 import { ReadingSettings } from "@/components/reading-settings";
-import { NotificationBell } from "@/components/notification-bell";
+import { NotificationBell } from "@/components/layout/notification-bell";
 import { useAuth } from "@/components/auth/auth-provider";
 
 export function SiteHeader() {
diff --git a/components/site-mobile-nav.tsx b/components/layout/site-mobile-nav.tsx
similarity index 100%
rename from components/site-mobile-nav.tsx
rename to components/layout/site-mobile-nav.tsx
diff --git a/components/site-sidebar.tsx b/components/layout/site-sidebar.tsx
similarity index 100%
rename from components/site-sidebar.tsx
rename to components/layout/site-sidebar.tsx
diff --git a/components/profile/profile-header.tsx b/components/profile/profile-header.tsx
index 57e89de2..989c006f 100644
--- a/components/profile/profile-header.tsx
+++ b/components/profile/profile-header.tsx
@@ -34,6 +34,7 @@ import { Settings, X } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { RelationshipResult, RelationshipState } from "@/lib/social";
 import { ProfileActions } from "@/components/profile/profile-actions";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import {
   FollowListDrawer,
   type FollowMode,
@@ -110,10 +111,14 @@ export function ProfileHeader({
   return (
     <>
       <header className="flex flex-col items-center text-center gap-4 pt-4 pb-6 sm:pt-6 sm:pb-8">
-        <Avatar
+        <UserAvatar
           src={avatarURL}
           name={name}
-          onZoom={avatarURL ? () => setZoomOpen(true) : undefined}
+          className="size-24 sm:size-28"
+          textClassName="text-3xl"
+          interactive
+          onClick={avatarURL ? () => setZoomOpen(true) : undefined}
+          ariaLabel={`View ${name}'s profile picture`}
         />
         <div className="space-y-2">
           <div className="space-y-1">
@@ -242,51 +247,6 @@ function Stat({
   );
 }
 
-function Avatar({
-  src,
-  name,
-  onZoom,
-}: {
-  src: string | null;
-  name: string;
-  /** Provided when the avatar should be interactive — the parent shows
-   *  the zoom modal on click. Omit (or pass undefined) to render the
-   *  initials placeholder as a plain non-clickable element. */
-  onZoom?: () => void;
-}) {
-  if (src) {
-    return (
-      <button
-        type="button"
-        onClick={onZoom}
-        aria-label={`View ${name}'s profile picture`}
-        className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-      >
-        <Image
-          src={src}
-          alt={name}
-          width={112}
-          height={112}
-          className="size-24 sm:size-28 rounded-full object-cover ring-1 ring-foreground/10 hover:ring-foreground/30 transition"
-          unoptimized
-        />
-      </button>
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-24 sm:size-28 rounded-full bg-primary/15 text-primary flex items-center justify-center text-3xl font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
 /**
  * AvatarZoomModal — portaled full-screen overlay with the avatar shown
  * inside a large circular crop. Click the backdrop or press Escape to
diff --git a/components/profile/profile-sidebar.tsx b/components/profile/profile-sidebar.tsx
index 83080b10..3d1cb476 100644
--- a/components/profile/profile-sidebar.tsx
+++ b/components/profile/profile-sidebar.tsx
@@ -14,9 +14,9 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
 import { User as UserIcon, FolderOpen, Bookmark, LogOut, Menu } from "lucide-react";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import {
   Drawer,
   DrawerContent,
@@ -98,7 +98,7 @@ function MobileSidebar({ user }: { user: User }) {
 function SidebarHeader({ user }: { user: User }) {
   return (
     <div className="flex items-center gap-3 px-3 py-3 rounded-lg bg-card ring-1 ring-foreground/10">
-      <Avatar src={user.avatar_url} name={user.name} />
+      <UserAvatar src={user.avatar_url} name={user.name} />
       <div className="min-w-0">
         <p className="text-sm font-semibold text-foreground truncate">
           {user.name}
@@ -161,29 +161,3 @@ function SidebarFooter() {
   );
 }
 
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={40}
-        height={40}
-        className="size-10 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-10 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
-      {initials}
-    </div>
-  );
-}
diff --git a/components/profile/profile-view-header.tsx b/components/profile/profile-view-header.tsx
index a0ceb358..17a8de7e 100644
--- a/components/profile/profile-view-header.tsx
+++ b/components/profile/profile-view-header.tsx
@@ -6,8 +6,8 @@
  * thing visitors do, plus an action slot for an "Edit profile" button.
  */
 
-import Image from "next/image";
 import type { User } from "@/lib/auth";
+import { UserAvatar } from "@/components/ui/user-avatar";
 
 export function ProfileViewHeader({
   user,
@@ -20,7 +20,12 @@ export function ProfileViewHeader({
 }) {
   return (
     <header className="flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-6">
-      <Avatar src={user.avatar_url} name={user.name} />
+      <UserAvatar
+        src={user.avatar_url}
+        name={user.name}
+        className="size-20 sm:size-22"
+        textClassName="text-2xl"
+      />
       <div className="flex-1 min-w-0">
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
@@ -43,29 +48,3 @@ export function ProfileViewHeader({
   );
 }
 
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={88}
-        height={88}
-        className="size-20 sm:size-22 rounded-full object-cover ring-1 ring-foreground/10"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-20 sm:size-22 rounded-full bg-primary/15 text-primary flex items-center justify-center text-2xl font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
diff --git a/components/social/collection-grid-card.tsx b/components/social/collection/collection-grid-card.tsx
similarity index 97%
rename from components/social/collection-grid-card.tsx
rename to components/social/collection/collection-grid-card.tsx
index 01898c08..20ba39d5 100644
--- a/components/social/collection-grid-card.tsx
+++ b/components/social/collection/collection-grid-card.tsx
@@ -19,7 +19,7 @@ import Link from "next/link";
 import { Lock } from "lucide-react";
 import { cn } from "@/lib/utils";
 import type { Collection } from "@/lib/social";
-import { quoteCardBgStyle } from "./post-card-shared";
+import { quoteCardBgStyle } from "../post/post-card-shared";
 
 export function CollectionGridCard({
   collection: c,
diff --git a/components/social/collection-scroll-card.tsx b/components/social/collection/collection-scroll-card.tsx
similarity index 98%
rename from components/social/collection-scroll-card.tsx
rename to components/social/collection/collection-scroll-card.tsx
index de298d50..66fd5fdc 100644
--- a/components/social/collection-scroll-card.tsx
+++ b/components/social/collection/collection-scroll-card.tsx
@@ -30,8 +30,8 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { collections, type Collection, type Post } from "@/lib/social";
-import { PostGridCard } from "./post-grid-card";
-import { quoteCardBgStyle } from "./post-card-shared";
+import { PostGridCard } from "../post/post-grid-card";
+import { quoteCardBgStyle } from "../post/post-card-shared";
 
 type FetchState = "idle" | "loading" | "loaded" | "error";
 
diff --git a/components/social/collection-views.tsx b/components/social/collection/collection-views.tsx
similarity index 100%
rename from components/social/collection-views.tsx
rename to components/social/collection/collection-views.tsx
diff --git a/components/social/edit-collection-drawer.tsx b/components/social/collection/edit-collection-drawer.tsx
similarity index 100%
rename from components/social/edit-collection-drawer.tsx
rename to components/social/collection/edit-collection-drawer.tsx
diff --git a/components/social/comment/comment-menu.tsx b/components/social/comment/comment-menu.tsx
new file mode 100644
index 00000000..0436a4c5
--- /dev/null
+++ b/components/social/comment/comment-menu.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * CommentMenu — the kebab (⋮) overflow menu on a comment: Pin / Report /
+ * Delete (each shown only when permitted). Rendered in a portal with a
+ * transparent full-screen backdrop that swallows the dismiss click, so it
+ * can't reach (and accidentally close) the surrounding vaul comments drawer.
+ */
+
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Flag, MoreVertical, Pin, PinOff, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function CommentMenu({
+  canPin,
+  isPinned,
+  canDelete,
+  canReport,
+  onPin,
+  onDelete,
+  onReport,
+}: {
+  canPin: boolean;
+  isPinned: boolean;
+  canDelete: boolean;
+  canReport: boolean;
+  onPin: () => void;
+  onDelete: () => void;
+  onReport: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<{ top: number; right: number } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  // Nothing actionable → no kebab at all.
+  if (!canPin && !canDelete && !canReport) return null;
+
+  function openMenu() {
+    const r = btnRef.current?.getBoundingClientRect();
+    if (r) setPos({ top: r.bottom + 4, right: window.innerWidth - r.right });
+    setOpen(true);
+  }
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={openMenu}
+        aria-label="Comment options"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="-mr-1 -mt-0.5 size-7 shrink-0 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+      >
+        <MoreVertical className="size-4" />
+      </button>
+      {open && pos && typeof document !== "undefined"
+        ? createPortal(
+            <>
+              <div
+                className="fixed inset-0 z-[100]"
+                aria-hidden
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpen(false);
+                }}
+              />
+              <div
+                role="menu"
+                style={{ position: "fixed", top: pos.top, right: pos.right }}
+                className="z-[101] min-w-40 rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95"
+              >
+                {canPin ? (
+                  <MenuItem
+                    icon={isPinned ? <PinOff className="size-4" /> : <Pin className="size-4" />}
+                    onClick={() => {
+                      setOpen(false);
+                      onPin();
+                    }}
+                  >
+                    {isPinned ? "Unpin" : "Pin"}
+                  </MenuItem>
+                ) : null}
+                {canReport ? (
+                  <MenuItem
+                    icon={<Flag className="size-4" />}
+                    onClick={() => {
+                      setOpen(false);
+                      onReport();
+                    }}
+                  >
+                    Report
+                  </MenuItem>
+                ) : null}
+                {canDelete ? (
+                  <MenuItem
+                    icon={<Trash2 className="size-4" />}
+                    danger
+                    onClick={() => {
+                      setOpen(false);
+                      onDelete();
+                    }}
+                  >
+                    Delete
+                  </MenuItem>
+                ) : null}
+              </div>
+            </>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}
+
+function MenuItem({
+  icon,
+  children,
+  onClick,
+  danger = false,
+}: {
+  icon: React.ReactNode;
+  children: React.ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors",
+        danger
+          ? "text-destructive hover:bg-destructive/10"
+          : "text-foreground hover:bg-muted",
+      )}
+    >
+      <span className="shrink-0">{icon}</span>
+      {children}
+    </button>
+  );
+}
diff --git a/components/social/comment/comment-report-modal.tsx b/components/social/comment/comment-report-modal.tsx
new file mode 100644
index 00000000..64b05a3c
--- /dev/null
+++ b/components/social/comment/comment-report-modal.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+/**
+ * ReportCommentModal — compact category + reason form for reporting a comment.
+ * Controlled by the parent via `comment` (null = closed). Submits through the
+ * comments API and toasts the outcome.
+ */
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import {
+  comments as commentsApi,
+  SocialError,
+  type Comment,
+  type PostReportCategory,
+} from "@/lib/social";
+
+const REPORT_CATEGORIES: { value: PostReportCategory; label: string }[] = [
+  { value: "spam", label: "Spam or misleading" },
+  { value: "harassment", label: "Harassment or bullying" },
+  { value: "misinformation", label: "Misinformation" },
+  { value: "inappropriate", label: "Inappropriate content" },
+  { value: "other", label: "Something else" },
+];
+
+export function ReportCommentModal({
+  comment,
+  onClose,
+}: {
+  comment: Comment | null;
+  onClose: () => void;
+}) {
+  const [category, setCategory] = useState<PostReportCategory>("spam");
+  const [reason, setReason] = useState("");
+  const [working, setWorking] = useState(false);
+
+  useEffect(() => {
+    if (comment) {
+      setCategory("spam");
+      setReason("");
+      setWorking(false);
+    }
+  }, [comment]);
+
+  if (!comment) return null;
+
+  async function submit() {
+    if (!comment) return;
+    setWorking(true);
+    try {
+      await commentsApi.report(comment.id, category, reason.trim());
+      toast("Thanks — your report was submitted", { duration: 2500 });
+      onClose();
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not submit report",
+        { duration: 3000 },
+      );
+    } finally {
+      setWorking(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center px-4">
+      <div
+        className="absolute inset-0 bg-foreground/40 backdrop-blur-sm"
+        onClick={() => !working && onClose()}
+        aria-hidden
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-xl p-5"
+      >
+        <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
+          Report comment
+        </h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Reports are private and reviewed by our team.
+        </p>
+        <div className="mt-4 space-y-1.5">
+          {REPORT_CATEGORIES.map((c) => (
+            <label
+              key={c.value}
+              className={cn(
+                "flex items-center gap-3 rounded-md border px-3 py-2 cursor-pointer transition-colors",
+                category === c.value
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:bg-muted",
+              )}
+            >
+              <input
+                type="radio"
+                name="comment-report-category"
+                value={c.value}
+                checked={category === c.value}
+                onChange={() => setCategory(c.value)}
+                className="accent-primary"
+              />
+              <span className="text-sm text-foreground">{c.label}</span>
+            </label>
+          ))}
+        </div>
+        <textarea
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          rows={2}
+          maxLength={2000}
+          placeholder="Add details (optional)"
+          className="mt-3 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
+        />
+        <div className="mt-4 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={working}
+            className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={working}
+            className="h-10 px-4 rounded-md text-sm font-medium bg-destructive text-white hover:bg-destructive/90 transition-colors disabled:opacity-60"
+          >
+            {working ? "Submitting…" : "Submit report"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/social/comment/comment-row.tsx b/components/social/comment/comment-row.tsx
new file mode 100644
index 00000000..689910a6
--- /dev/null
+++ b/components/social/comment/comment-row.tsx
@@ -0,0 +1,227 @@
+"use client";
+
+/**
+ * CommentRow — one comment (top-level or reply) in the comments drawer.
+ *
+ * Top-level rows own a lazily-loaded, flat reply thread (one level deep) and
+ * register a splice hook so the drawer can drop a freshly-posted reply in;
+ * replies render the "Replying to @handle" prefix. Like is optimistic; the
+ * kebab (Pin / Delete / Report) lives in CommentMenu; deletes/reports bubble
+ * up to the drawer's modals via onRequest* callbacks.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { HiHeart, HiOutlineHeart } from "react-icons/hi2";
+import { Pin } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { comments as commentsApi, SocialError, type Comment } from "@/lib/social";
+import { UserAvatar } from "@/components/ui/user-avatar";
+import { timeAgo } from "@/lib/time";
+import { CommentMenu } from "./comment-menu";
+
+export function CommentRow({
+  comment,
+  viewerId,
+  isPostAuthor,
+  onReply,
+  onLikeChange,
+  onPinToggle,
+  onRequestDelete,
+  onRequestReport,
+  requireAuth,
+  registerThread,
+  isReply = false,
+}: {
+  comment: Comment;
+  viewerId?: string;
+  isPostAuthor: boolean;
+  onReply: (c: Comment) => void;
+  onLikeChange: (likes: number, liked: boolean) => void;
+  onPinToggle: () => void;
+  onRequestDelete: (c: Comment) => void;
+  onRequestReport: (c: Comment) => void;
+  requireAuth: () => Promise<boolean>;
+  /** Top-level rows register a callback so a newly-posted reply can be spliced
+   *  into their open thread. Replies pass nothing. */
+  registerThread?: (fn: ((c: Comment) => void) | null) => void;
+  isReply?: boolean;
+}) {
+  const [replies, setReplies] = useState<Comment[]>([]);
+  const [showReplies, setShowReplies] = useState(false);
+  const [repliesLoaded, setRepliesLoaded] = useState(false);
+  const likeBusy = useRef(false);
+
+  const canDelete = viewerId === comment.user_id || isPostAuthor;
+  const canReport = !!viewerId && viewerId !== comment.user_id;
+  const pinnable = isPostAuthor && !isReply;
+
+  // Expose a splice hook so the drawer can append a reply created from the
+  // composer. Replies created while collapsed still get the count bump; they
+  // show once expanded (re-fetched) or appended if already open.
+  useEffect(() => {
+    if (isReply || !registerThread) return;
+    registerThread((c: Comment) => {
+      if (c.body === "__deleted__") {
+        setReplies((prev) => prev.filter((x) => x.id !== c.id));
+        return;
+      }
+      setRepliesLoaded(true);
+      setShowReplies(true);
+      setReplies((prev) =>
+        prev.some((x) => x.id === c.id) ? prev : [...prev, c],
+      );
+    });
+    return () => registerThread(null);
+  }, [isReply, registerThread]);
+
+  async function toggleReplies() {
+    if (!showReplies && !repliesLoaded) {
+      try {
+        const rows = await commentsApi.replies(comment.id, { limit: 50 });
+        setReplies(rows ?? []);
+        setRepliesLoaded(true);
+      } catch {
+        /* ignore */
+      }
+    }
+    setShowReplies((v) => !v);
+  }
+
+  async function likeToggle() {
+    if (likeBusy.current) return;
+    if (!(await requireAuth())) return;
+    likeBusy.current = true;
+    const next = !comment.viewer_has_liked;
+    // optimistic
+    onLikeChange(Math.max(0, comment.likes_count + (next ? 1 : -1)), next);
+    try {
+      const res = next
+        ? await commentsApi.like(comment.id)
+        : await commentsApi.unlike(comment.id);
+      onLikeChange(res.likes_count, next);
+    } catch (err) {
+      onLikeChange(comment.likes_count, comment.viewer_has_liked);
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not update like",
+        { duration: 3000 },
+      );
+    } finally {
+      likeBusy.current = false;
+    }
+  }
+
+  return (
+    <li className={cn(isReply && "mt-3")}>
+      <div className="flex gap-3">
+        <UserAvatar
+          src={comment.author_avatar_url}
+          name={comment.author_name}
+          className="size-9"
+          textClassName="text-xs"
+        />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5">
+              <span className="text-sm font-semibold text-foreground truncate">
+                {comment.author_name}
+              </span>
+              {!isReply && comment.pinned_at ? (
+                <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
+                  <Pin className="size-3" /> Pinned
+                </span>
+              ) : null}
+              <span className="text-xs text-muted-foreground">
+                {timeAgo(comment.created_at)}
+              </span>
+            </div>
+            <CommentMenu
+              canPin={pinnable}
+              isPinned={!!comment.pinned_at}
+              canDelete={canDelete}
+              canReport={canReport}
+              onPin={onPinToggle}
+              onDelete={() => onRequestDelete(comment)}
+              onReport={() => onRequestReport(comment)}
+            />
+          </div>
+          <p className="mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground">
+            {comment.reply_to_handle ? (
+              <span className="font-medium text-primary">
+                @{comment.reply_to_handle}{" "}
+              </span>
+            ) : null}
+            {comment.body}
+          </p>
+
+          {/* Inline action row */}
+          <div className="mt-1.5 flex items-center gap-4 text-xs text-muted-foreground">
+            <button
+              type="button"
+              onClick={likeToggle}
+              className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
+              aria-label={comment.viewer_has_liked ? "Unlike" : "Like"}
+            >
+              {comment.viewer_has_liked ? (
+                <HiHeart className="size-4 text-red-500" />
+              ) : (
+                <HiOutlineHeart className="size-4" />
+              )}
+              {comment.likes_count > 0 ? (
+                <span className="tabular-nums">{comment.likes_count}</span>
+              ) : null}
+            </button>
+            <button
+              type="button"
+              onClick={() => onReply(comment)}
+              className="font-medium hover:text-foreground transition-colors"
+            >
+              Reply
+            </button>
+          </div>
+
+          {/* Replies */}
+          {!isReply && comment.reply_count > 0 ? (
+            <button
+              type="button"
+              onClick={toggleReplies}
+              className="mt-2 text-xs font-medium text-primary hover:underline"
+            >
+              {showReplies
+                ? "Hide replies"
+                : `View ${comment.reply_count} ${comment.reply_count === 1 ? "reply" : "replies"}`}
+            </button>
+          ) : null}
+
+          {!isReply && showReplies ? (
+            <ul className="mt-1 border-l border-border pl-3">
+              {replies.map((r) => (
+                <CommentRow
+                  key={r.id}
+                  comment={r}
+                  viewerId={viewerId}
+                  isPostAuthor={isPostAuthor}
+                  onReply={onReply}
+                  onLikeChange={(likes, liked) =>
+                    setReplies((prev) =>
+                      prev.map((x) =>
+                        x.id === r.id
+                          ? { ...x, likes_count: likes, viewer_has_liked: liked }
+                          : x,
+                      ),
+                    )
+                  }
+                  onPinToggle={() => {}}
+                  onRequestDelete={onRequestDelete}
+                  onRequestReport={onRequestReport}
+                  requireAuth={requireAuth}
+                  isReply
+                />
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      </div>
+    </li>
+  );
+}
diff --git a/components/social/comment/post-comments-drawer.tsx b/components/social/comment/post-comments-drawer.tsx
new file mode 100644
index 00000000..7ae8b1a7
--- /dev/null
+++ b/components/social/comment/post-comments-drawer.tsx
@@ -0,0 +1,376 @@
+"use client";
+
+/**
+ * PostCommentsDrawer — the comments sheet for a post.
+ *
+ * Right-side on desktop, bottom on mobile (vaul `direction`), with a FULLY
+ * TRANSPARENT overlay so the post stays visible behind it while reading the
+ * thread. Anyone signed in can comment; the composer gates anonymous users
+ * through the auth modal.
+ *
+ * Threading is one level deep: top-level comments each own a single flat
+ * thread of replies. Replying to a reply still lands in that one thread,
+ * addressed (visually) to whoever was answered. The post author can pin one
+ * comment (shown first here and in the card footer) and delete any comment;
+ * a comment's author can delete their own (a thread root takes its replies
+ * with it — behind a confirm). Likes show a count only.
+ *
+ * This file owns the drawer shell, the comment list + pagination, the
+ * composer (with emoji picker), and the optimistic mutation wiring. The row
+ * (CommentRow), its kebab menu (CommentMenu), and the report dialog
+ * (ReportCommentModal) live in sibling files.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Loader2, Send, X } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import {
+  comments as commentsApi,
+  SocialError,
+  type Comment,
+  type Post,
+} from "@/lib/social";
+import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import { Drawer, DrawerContent } from "@/components/ui/drawer";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
+import { EmojiPicker } from "@/components/ui/emoji-picker";
+import { CommentRow } from "./comment-row";
+import { ReportCommentModal } from "./comment-report-modal";
+
+const PAGE = 20;
+
+export function PostCommentsDrawer({
+  open,
+  post,
+  onClose,
+  onPinnedChange,
+  onCountChange,
+}: {
+  open: boolean;
+  post: Post;
+  onClose: () => void;
+  /** Notifies the parent (the card footer) when the pinned comment changes,
+   *  so the footer's pinned line stays in sync without a refetch. */
+  onPinnedChange?: (pinned: Comment | null) => void;
+  /** Notifies the parent of a net change to the post's comment count (+1 on a
+   *  new comment/reply, −N when a comment/thread is deleted) so the footer
+   *  count stays live. */
+  onCountChange?: (delta: number) => void;
+}) {
+  const { user } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const direction = isMobile ? "bottom" : "right";
+  const isPostAuthor = !!user && user.id === post.user_id;
+
+  const [items, setItems] = useState<Comment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [hasMore, setHasMore] = useState(false);
+  const [posting, setPosting] = useState(false);
+  const [draft, setDraft] = useState("");
+  // The comment being replied to (null = a new top-level comment).
+  const [replyTo, setReplyTo] = useState<{ id: string; handle: string } | null>(
+    null,
+  );
+  const [toDelete, setToDelete] = useState<Comment | null>(null);
+  const [toReport, setToReport] = useState<Comment | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  // Load the first page whenever the drawer opens for a post.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setLoading(true);
+    setItems([]);
+    setReplyTo(null);
+    commentsApi
+      .list(post.id, { limit: PAGE, offset: 0 })
+      .then((rows) => {
+        if (cancelled) return;
+        setItems(rows ?? []);
+        setHasMore((rows?.length ?? 0) === PAGE);
+      })
+      .catch(() => {})
+      .finally(() => !cancelled && setLoading(false));
+    return () => {
+      cancelled = true;
+    };
+  }, [open, post.id]);
+
+  const loadMore = useCallback(async () => {
+    try {
+      const rows = await commentsApi.list(post.id, {
+        limit: PAGE,
+        offset: items.length,
+      });
+      setItems((prev) => [...prev, ...(rows ?? [])]);
+      setHasMore((rows?.length ?? 0) === PAGE);
+    } catch {
+      /* leave the list as-is on error */
+    }
+  }, [post.id, items.length]);
+
+  // Replace a comment in place (after a like toggle / reply-count bump).
+  const patch = useCallback((id: string, fn: (c: Comment) => Comment) => {
+    setItems((prev) => prev.map((c) => (c.id === id ? fn(c) : c)));
+  }, []);
+
+  async function submit() {
+    const body = draft.trim();
+    if (!body || posting) return;
+    if (!(await requireAuth())) return;
+    setPosting(true);
+    try {
+      const created = await commentsApi.create(post.id, body, replyTo?.id);
+      setDraft("");
+      onCountChange?.(1);
+      if (created.parent_id) {
+        // A reply — bump the root's count and append into its open thread.
+        bumpReply(created.parent_id, created);
+        setReplyTo(null);
+      } else {
+        // Top-level — drop it in just below any pinned comment.
+        setItems((prev) => {
+          const pinnedFirst = prev[0]?.pinned_at ? 1 : 0;
+          return [
+            ...prev.slice(0, pinnedFirst),
+            created,
+            ...prev.slice(pinnedFirst),
+          ];
+        });
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not post comment",
+        { duration: 3000 },
+      );
+    } finally {
+      setPosting(false);
+    }
+  }
+
+  // Append a freshly-created reply into its root thread's open reply list (if
+  // loaded) and bump the visible reply count.
+  const repliesRef = useRef<Record<string, (c: Comment) => void>>({});
+  function bumpReply(rootId: string, reply: Comment) {
+    patch(rootId, (c) => ({ ...c, reply_count: c.reply_count + 1 }));
+    repliesRef.current[rootId]?.(reply);
+  }
+
+  function startReply(target: Comment) {
+    // Reply chip addresses whoever was tapped; the thread is the root.
+    setReplyTo({ id: target.id, handle: target.author_handle });
+    inputRef.current?.focus();
+  }
+
+  // Insert an emoji at the caret (or append if the textarea isn't focused),
+  // then restore the caret just after it so typing can continue.
+  function insertEmoji(emoji: string) {
+    const el = inputRef.current;
+    const start = el?.selectionStart ?? draft.length;
+    const end = el?.selectionEnd ?? draft.length;
+    const next = draft.slice(0, start) + emoji + draft.slice(end);
+    setDraft(next);
+    requestAnimationFrame(() => {
+      const node = inputRef.current;
+      if (!node) return;
+      node.focus();
+      const caret = start + emoji.length;
+      node.setSelectionRange(caret, caret);
+    });
+  }
+
+  async function pinToggle(c: Comment) {
+    const pinning = !c.pinned_at;
+    try {
+      if (pinning) await commentsApi.pin(c.id);
+      else await commentsApi.unpin(c.id);
+      // Reload the first page so pinned-first ordering is authoritative.
+      const rows = await commentsApi.list(post.id, { limit: PAGE, offset: 0 });
+      setItems(rows ?? []);
+      setHasMore((rows?.length ?? 0) === PAGE);
+      onPinnedChange?.(
+        pinning ? { ...c, pinned_at: new Date().toISOString() } : null,
+      );
+      toast(pinning ? "Comment pinned" : "Comment unpinned", { duration: 1800 });
+    } catch (err) {
+      toast.error(
+        err instanceof SocialError ? err.message : "Could not update pin",
+        { duration: 3000 },
+      );
+    }
+  }
+
+  async function confirmDelete() {
+    if (!toDelete) return;
+    const c = toDelete;
+    await commentsApi.delete(c.id);
+    // A thread root takes its replies with it; a reply removes just itself.
+    onCountChange?.(-(c.parent_id ? 1 : 1 + c.reply_count));
+    if (c.parent_id) {
+      // A reply — drop the root's count; the thread list prunes itself.
+      patch(c.parent_id, (p) => ({
+        ...p,
+        reply_count: Math.max(0, p.reply_count - 1),
+      }));
+      repliesRef.current[c.parent_id]?.({ ...c, body: "__deleted__" });
+    } else {
+      setItems((prev) => prev.filter((x) => x.id !== c.id));
+      if (c.pinned_at) onPinnedChange?.(null);
+    }
+  }
+
+  return (
+    <>
+      <Drawer
+        open={open}
+        direction={direction}
+        repositionInputs={false}
+        onOpenChange={(o) => {
+          if (!o) onClose();
+        }}
+      >
+        <DrawerContent
+          direction={direction}
+          // Transparent scrim: keep the post visible behind the sheet.
+          overlayClassName="bg-transparent"
+          className={cn(
+            "bg-card flex flex-col shadow-2xl",
+            isMobile ? "h-[80vh]" : "h-full w-[420px] max-w-[92vw]",
+          )}
+        >
+          <div className="flex items-center justify-between border-b border-border px-4 py-3 shrink-0">
+            <h2 className="text-base font-semibold text-foreground">Comments</h2>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Close comments"
+              className="size-8 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            >
+              <X className="size-4" />
+            </button>
+          </div>
+
+          <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-3">
+            {loading ? (
+              <div className="flex justify-center py-10">
+                <Loader2 className="size-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : items.length === 0 ? (
+              <p className="py-10 text-center text-sm text-muted-foreground">
+                No comments yet. Be the first to comment.
+              </p>
+            ) : (
+              <ul className="space-y-4">
+                {items.map((c) => (
+                  <CommentRow
+                    key={c.id}
+                    comment={c}
+                    viewerId={user?.id}
+                    isPostAuthor={isPostAuthor}
+                    onReply={startReply}
+                    onLikeChange={(likes, liked) =>
+                      patch(c.id, (x) => ({
+                        ...x,
+                        likes_count: likes,
+                        viewer_has_liked: liked,
+                      }))
+                    }
+                    onPinToggle={() => pinToggle(c)}
+                    onRequestDelete={setToDelete}
+                    onRequestReport={setToReport}
+                    requireAuth={requireAuth}
+                    registerThread={(fn) => {
+                      if (fn) repliesRef.current[c.id] = fn;
+                      else delete repliesRef.current[c.id];
+                    }}
+                  />
+                ))}
+                {hasMore ? (
+                  <li>
+                    <button
+                      type="button"
+                      onClick={loadMore}
+                      className="text-sm font-medium text-primary hover:underline"
+                    >
+                      Load more comments
+                    </button>
+                  </li>
+                ) : null}
+              </ul>
+            )}
+          </div>
+
+          {/* Composer */}
+          <div className="border-t border-border p-3 shrink-0">
+            {replyTo ? (
+              <div className="mb-2 flex items-center justify-between rounded-md bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
+                <span>
+                  Replying to{" "}
+                  <span className="font-medium">@{replyTo.handle}</span>
+                </span>
+                <button
+                  type="button"
+                  onClick={() => setReplyTo(null)}
+                  aria-label="Cancel reply"
+                  className="rounded p-0.5 hover:text-foreground"
+                >
+                  <X className="size-3.5" />
+                </button>
+              </div>
+            ) : null}
+            <div className="flex items-end gap-2">
+              <EmojiPicker onSelect={insertEmoji} />
+              <textarea
+                ref={inputRef}
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    submit();
+                  }
+                }}
+                rows={1}
+                maxLength={2000}
+                placeholder={replyTo ? "Write a reply…" : "Add a comment…"}
+                className="flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40 max-h-32"
+              />
+              <button
+                type="button"
+                onClick={submit}
+                disabled={posting || draft.trim() === ""}
+                aria-label="Post comment"
+                className="size-10 shrink-0 inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
+              >
+                {posting ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Send className="size-4" />
+                )}
+              </button>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+
+      <ConfirmModal
+        open={toDelete !== null}
+        onClose={() => setToDelete(null)}
+        title="Delete this comment?"
+        message={
+          toDelete && !toDelete.parent_id && toDelete.reply_count > 0
+            ? "Its replies will be deleted too. This can't be undone."
+            : "This can't be undone."
+        }
+        confirmLabel="Delete"
+        onConfirm={confirmDelete}
+      />
+
+      <ReportCommentModal comment={toReport} onClose={() => setToReport(null)} />
+    </>
+  );
+}
diff --git a/components/social/post-comments-drawer.tsx b/components/social/post-comments-drawer.tsx
deleted file mode 100644
index 33209e15..00000000
--- a/components/social/post-comments-drawer.tsx
+++ /dev/null
@@ -1,749 +0,0 @@
-"use client";
-
-/**
- * PostCommentsDrawer — the comments sheet for a post.
- *
- * Right-side on desktop, bottom on mobile (vaul `direction`), with a FULLY
- * TRANSPARENT overlay so the post stays visible behind it while reading the
- * thread. Anyone signed in can comment; the composer gates anonymous users
- * through the auth modal.
- *
- * Threading is one level deep: top-level comments each own a single flat
- * thread of replies. Replying to a reply still lands in that one thread,
- * addressed (visually) to whoever was answered. The post author can pin one
- * comment (shown first here and in the card footer) and delete any comment;
- * a comment's author can delete their own (a thread root takes its replies
- * with it — behind a confirm). Likes show a count only.
- */
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import Image from "next/image";
-import { HiHeart, HiOutlineHeart } from "react-icons/hi2";
-import { Loader2, Pin, PinOff, Send, Trash2, X } from "lucide-react";
-import { toast } from "sonner";
-import { cn } from "@/lib/utils";
-import {
-  comments as commentsApi,
-  SocialError,
-  type Comment,
-  type Post,
-  type PostReportCategory,
-} from "@/lib/social";
-import { useAuth } from "@/components/auth/auth-provider";
-import { useAuthGate } from "@/components/auth/auth-gate";
-import { useMediaQuery } from "@/components/selection-toolbar/shared";
-import { Drawer, DrawerContent } from "@/components/ui/drawer";
-import { ConfirmModal } from "@/components/ui/confirm-modal";
-
-const PAGE = 20;
-
-export function PostCommentsDrawer({
-  open,
-  post,
-  onClose,
-  onPinnedChange,
-}: {
-  open: boolean;
-  post: Post;
-  onClose: () => void;
-  /** Notifies the parent (the card footer) when the pinned comment changes,
-   *  so the footer's pinned line stays in sync without a refetch. */
-  onPinnedChange?: (pinned: Comment | null) => void;
-}) {
-  const { user } = useAuth();
-  const { requireAuth } = useAuthGate();
-  const isMobile = useMediaQuery("(max-width: 767px)");
-  const direction = isMobile ? "bottom" : "right";
-  const isPostAuthor = !!user && user.id === post.user_id;
-
-  const [items, setItems] = useState<Comment[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [hasMore, setHasMore] = useState(false);
-  const [posting, setPosting] = useState(false);
-  const [draft, setDraft] = useState("");
-  // The comment being replied to (null = a new top-level comment).
-  const [replyTo, setReplyTo] = useState<{ id: string; handle: string } | null>(
-    null,
-  );
-  const [toDelete, setToDelete] = useState<Comment | null>(null);
-  const [toReport, setToReport] = useState<Comment | null>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // Load the first page whenever the drawer opens for a post.
-  useEffect(() => {
-    if (!open) return;
-    let cancelled = false;
-    setLoading(true);
-    setItems([]);
-    setReplyTo(null);
-    commentsApi
-      .list(post.id, { limit: PAGE, offset: 0 })
-      .then((rows) => {
-        if (cancelled) return;
-        setItems(rows ?? []);
-        setHasMore((rows?.length ?? 0) === PAGE);
-      })
-      .catch(() => {})
-      .finally(() => !cancelled && setLoading(false));
-    return () => {
-      cancelled = true;
-    };
-  }, [open, post.id]);
-
-  const loadMore = useCallback(async () => {
-    try {
-      const rows = await commentsApi.list(post.id, {
-        limit: PAGE,
-        offset: items.length,
-      });
-      setItems((prev) => [...prev, ...(rows ?? [])]);
-      setHasMore((rows?.length ?? 0) === PAGE);
-    } catch {
-      /* leave the list as-is on error */
-    }
-  }, [post.id, items.length]);
-
-  // Replace a comment in place (after a like toggle / reply-count bump).
-  const patch = useCallback((id: string, fn: (c: Comment) => Comment) => {
-    setItems((prev) => prev.map((c) => (c.id === id ? fn(c) : c)));
-  }, []);
-
-  async function submit() {
-    const body = draft.trim();
-    if (!body || posting) return;
-    if (!(await requireAuth())) return;
-    setPosting(true);
-    try {
-      const created = await commentsApi.create(
-        post.id,
-        body,
-        replyTo?.id,
-      );
-      setDraft("");
-      if (created.parent_id) {
-        // A reply — bump the root's count and append into its open thread.
-        bumpReply(created.parent_id, created);
-        setReplyTo(null);
-      } else {
-        // Top-level — drop it in just below any pinned comment.
-        setItems((prev) => {
-          const pinnedFirst = prev[0]?.pinned_at ? 1 : 0;
-          return [
-            ...prev.slice(0, pinnedFirst),
-            created,
-            ...prev.slice(pinnedFirst),
-          ];
-        });
-      }
-    } catch (err) {
-      toast.error(
-        err instanceof SocialError ? err.message : "Could not post comment",
-        { duration: 3000 },
-      );
-    } finally {
-      setPosting(false);
-    }
-  }
-
-  // Append a freshly-created reply into its root thread's open reply list (if
-  // loaded) and bump the visible reply count.
-  const repliesRef = useRef<Record<string, (c: Comment) => void>>({});
-  function bumpReply(rootId: string, reply: Comment) {
-    patch(rootId, (c) => ({ ...c, reply_count: c.reply_count + 1 }));
-    repliesRef.current[rootId]?.(reply);
-  }
-
-  function startReply(target: Comment) {
-    // Reply chip addresses whoever was tapped; the thread is the root.
-    setReplyTo({ id: target.id, handle: target.author_handle });
-    inputRef.current?.focus();
-  }
-
-  async function pinToggle(c: Comment) {
-    const pinning = !c.pinned_at;
-    try {
-      if (pinning) await commentsApi.pin(c.id);
-      else await commentsApi.unpin(c.id);
-      // Reload the first page so pinned-first ordering is authoritative.
-      const rows = await commentsApi.list(post.id, { limit: PAGE, offset: 0 });
-      setItems(rows ?? []);
-      setHasMore((rows?.length ?? 0) === PAGE);
-      onPinnedChange?.(pinning ? { ...c, pinned_at: new Date().toISOString() } : null);
-      toast(pinning ? "Comment pinned" : "Comment unpinned", { duration: 1800 });
-    } catch (err) {
-      toast.error(
-        err instanceof SocialError ? err.message : "Could not update pin",
-        { duration: 3000 },
-      );
-    }
-  }
-
-  async function confirmDelete() {
-    if (!toDelete) return;
-    const c = toDelete;
-    await commentsApi.delete(c.id);
-    if (c.parent_id) {
-      // A reply — drop the root's count; the thread list prunes itself.
-      patch(c.parent_id, (p) => ({
-        ...p,
-        reply_count: Math.max(0, p.reply_count - 1),
-      }));
-      repliesRef.current[c.parent_id]?.({ ...c, body: "__deleted__" });
-    } else {
-      setItems((prev) => prev.filter((x) => x.id !== c.id));
-      if (c.pinned_at) onPinnedChange?.(null);
-    }
-  }
-
-  return (
-    <>
-      <Drawer
-        open={open}
-        direction={direction}
-        repositionInputs={false}
-        onOpenChange={(o) => {
-          if (!o) onClose();
-        }}
-      >
-        <DrawerContent
-          direction={direction}
-          // Transparent scrim: keep the post visible behind the sheet.
-          overlayClassName="bg-transparent"
-          className={cn(
-            "bg-card flex flex-col shadow-2xl",
-            isMobile ? "h-[80vh]" : "h-full w-[420px] max-w-[92vw]",
-          )}
-        >
-          <div className="flex items-center justify-between border-b border-border px-4 py-3 shrink-0">
-            <h2 className="text-base font-semibold text-foreground">Comments</h2>
-            <button
-              type="button"
-              onClick={onClose}
-              aria-label="Close comments"
-              className="size-8 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-            >
-              <X className="size-4" />
-            </button>
-          </div>
-
-          <div className="flex-1 overflow-y-auto overscroll-contain px-4 py-3">
-            {loading ? (
-              <div className="flex justify-center py-10">
-                <Loader2 className="size-5 animate-spin text-muted-foreground" />
-              </div>
-            ) : items.length === 0 ? (
-              <p className="py-10 text-center text-sm text-muted-foreground">
-                No comments yet. Be the first to comment.
-              </p>
-            ) : (
-              <ul className="space-y-4">
-                {items.map((c) => (
-                  <CommentRow
-                    key={c.id}
-                    comment={c}
-                    viewerId={user?.id}
-                    isPostAuthor={isPostAuthor}
-                    onReply={startReply}
-                    onLikeChange={(likes, liked) =>
-                      patch(c.id, (x) => ({
-                        ...x,
-                        likes_count: likes,
-                        viewer_has_liked: liked,
-                      }))
-                    }
-                    onPinToggle={() => pinToggle(c)}
-                    onRequestDelete={setToDelete}
-                    onRequestReport={setToReport}
-                    requireAuth={requireAuth}
-                    registerThread={(fn) => {
-                      if (fn) repliesRef.current[c.id] = fn;
-                      else delete repliesRef.current[c.id];
-                    }}
-                  />
-                ))}
-                {hasMore ? (
-                  <li>
-                    <button
-                      type="button"
-                      onClick={loadMore}
-                      className="text-sm font-medium text-primary hover:underline"
-                    >
-                      Load more comments
-                    </button>
-                  </li>
-                ) : null}
-              </ul>
-            )}
-          </div>
-
-          {/* Composer */}
-          <div className="border-t border-border p-3 shrink-0">
-            {replyTo ? (
-              <div className="mb-2 flex items-center justify-between rounded-md bg-muted/60 px-3 py-1.5 text-xs text-muted-foreground">
-                <span>
-                  Replying to <span className="font-medium">@{replyTo.handle}</span>
-                </span>
-                <button
-                  type="button"
-                  onClick={() => setReplyTo(null)}
-                  aria-label="Cancel reply"
-                  className="rounded p-0.5 hover:text-foreground"
-                >
-                  <X className="size-3.5" />
-                </button>
-              </div>
-            ) : null}
-            <div className="flex items-end gap-2">
-              <textarea
-                ref={inputRef}
-                value={draft}
-                onChange={(e) => setDraft(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    submit();
-                  }
-                }}
-                rows={1}
-                maxLength={2000}
-                placeholder={replyTo ? "Write a reply…" : "Add a comment…"}
-                className="flex-1 resize-none rounded-lg border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40 max-h-32"
-              />
-              <button
-                type="button"
-                onClick={submit}
-                disabled={posting || draft.trim() === ""}
-                aria-label="Post comment"
-                className="size-10 shrink-0 inline-flex items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50"
-              >
-                {posting ? (
-                  <Loader2 className="size-4 animate-spin" />
-                ) : (
-                  <Send className="size-4" />
-                )}
-              </button>
-            </div>
-          </div>
-        </DrawerContent>
-      </Drawer>
-
-      <ConfirmModal
-        open={toDelete !== null}
-        onClose={() => setToDelete(null)}
-        title="Delete this comment?"
-        message={
-          toDelete && !toDelete.parent_id && toDelete.reply_count > 0
-            ? "Its replies will be deleted too. This can't be undone."
-            : "This can't be undone."
-        }
-        confirmLabel="Delete"
-        onConfirm={confirmDelete}
-      />
-
-      <ReportCommentModal
-        comment={toReport}
-        onClose={() => setToReport(null)}
-      />
-    </>
-  );
-}
-
-// ───────────────────────────────────────────────────────────────────────────
-// One comment (top-level or reply). Top-level rows own a lazily-loaded reply
-// thread; replies render the "Replying to @handle" prefix.
-// ───────────────────────────────────────────────────────────────────────────
-
-function CommentRow({
-  comment,
-  viewerId,
-  isPostAuthor,
-  onReply,
-  onLikeChange,
-  onPinToggle,
-  onRequestDelete,
-  onRequestReport,
-  requireAuth,
-  registerThread,
-  isReply = false,
-}: {
-  comment: Comment;
-  viewerId?: string;
-  isPostAuthor: boolean;
-  onReply: (c: Comment) => void;
-  onLikeChange: (likes: number, liked: boolean) => void;
-  onPinToggle: () => void;
-  onRequestDelete: (c: Comment) => void;
-  onRequestReport: (c: Comment) => void;
-  requireAuth: () => Promise<boolean>;
-  /** Top-level rows register a callback so a newly-posted reply can be spliced
-   *  into their open thread. Replies pass nothing. */
-  registerThread?: (fn: ((c: Comment) => void) | null) => void;
-  isReply?: boolean;
-}) {
-  const [replies, setReplies] = useState<Comment[]>([]);
-  const [showReplies, setShowReplies] = useState(false);
-  const [repliesLoaded, setRepliesLoaded] = useState(false);
-  const likeBusy = useRef(false);
-
-  const canDelete = viewerId === comment.user_id || isPostAuthor;
-  const canReport = !!viewerId && viewerId !== comment.user_id;
-  const pinnable = isPostAuthor && !isReply;
-
-  // Expose a splice hook so the drawer can append a reply created from the
-  // composer. Replies created while collapsed still get the count bump; they
-  // show once expanded (re-fetched) or appended if already open.
-  useEffect(() => {
-    if (isReply || !registerThread) return;
-    registerThread((c: Comment) => {
-      if (c.body === "__deleted__") {
-        setReplies((prev) => prev.filter((x) => x.id !== c.id));
-        return;
-      }
-      setRepliesLoaded(true);
-      setShowReplies(true);
-      setReplies((prev) =>
-        prev.some((x) => x.id === c.id) ? prev : [...prev, c],
-      );
-    });
-    return () => registerThread(null);
-  }, [isReply, registerThread]);
-
-  async function toggleReplies() {
-    if (!showReplies && !repliesLoaded) {
-      try {
-        const rows = await commentsApi.replies(comment.id, { limit: 50 });
-        setReplies(rows ?? []);
-        setRepliesLoaded(true);
-      } catch {
-        /* ignore */
-      }
-    }
-    setShowReplies((v) => !v);
-  }
-
-  async function likeToggle() {
-    if (likeBusy.current) return;
-    if (!(await requireAuth())) return;
-    likeBusy.current = true;
-    const next = !comment.viewer_has_liked;
-    // optimistic
-    onLikeChange(
-      Math.max(0, comment.likes_count + (next ? 1 : -1)),
-      next,
-    );
-    try {
-      const res = next
-        ? await commentsApi.like(comment.id)
-        : await commentsApi.unlike(comment.id);
-      onLikeChange(res.likes_count, next);
-    } catch (err) {
-      onLikeChange(comment.likes_count, comment.viewer_has_liked);
-      toast.error(
-        err instanceof SocialError ? err.message : "Could not update like",
-        { duration: 3000 },
-      );
-    } finally {
-      likeBusy.current = false;
-    }
-  }
-
-  return (
-    <li className={cn(isReply && "mt-3")}>
-      <div className="flex gap-3">
-        <Avatar src={comment.author_avatar_url ?? null} name={comment.author_name} />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-foreground truncate">
-              {comment.author_name}
-            </span>
-            {!isReply && comment.pinned_at ? (
-              <span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary">
-                <Pin className="size-3" /> Pinned
-              </span>
-            ) : null}
-            <span className="text-xs text-muted-foreground">
-              {timeAgo(comment.created_at)}
-            </span>
-          </div>
-          <p className="mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground">
-            {comment.reply_to_handle ? (
-              <span className="font-medium text-primary">
-                @{comment.reply_to_handle}{" "}
-              </span>
-            ) : null}
-            {comment.body}
-          </p>
-
-          {/* Inline action row */}
-          <div className="mt-1.5 flex items-center gap-4 text-xs text-muted-foreground">
-            <button
-              type="button"
-              onClick={likeToggle}
-              className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
-              aria-label={comment.viewer_has_liked ? "Unlike" : "Like"}
-            >
-              {comment.viewer_has_liked ? (
-                <HiHeart className="size-4 text-red-500" />
-              ) : (
-                <HiOutlineHeart className="size-4" />
-              )}
-              {comment.likes_count > 0 ? (
-                <span className="tabular-nums">{comment.likes_count}</span>
-              ) : null}
-            </button>
-            <button
-              type="button"
-              onClick={() => onReply(comment)}
-              className="font-medium hover:text-foreground transition-colors"
-            >
-              Reply
-            </button>
-            {pinnable ? (
-              <button
-                type="button"
-                onClick={onPinToggle}
-                className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
-              >
-                {comment.pinned_at ? (
-                  <>
-                    <PinOff className="size-3.5" /> Unpin
-                  </>
-                ) : (
-                  <>
-                    <Pin className="size-3.5" /> Pin
-                  </>
-                )}
-              </button>
-            ) : null}
-            {canDelete ? (
-              <button
-                type="button"
-                onClick={() => onRequestDelete(comment)}
-                className="inline-flex items-center gap-1 hover:text-destructive transition-colors"
-              >
-                <Trash2 className="size-3.5" /> Delete
-              </button>
-            ) : null}
-            {canReport ? (
-              <button
-                type="button"
-                onClick={() => onRequestReport(comment)}
-                className="hover:text-foreground transition-colors"
-              >
-                Report
-              </button>
-            ) : null}
-          </div>
-
-          {/* Replies */}
-          {!isReply && comment.reply_count > 0 ? (
-            <button
-              type="button"
-              onClick={toggleReplies}
-              className="mt-2 text-xs font-medium text-primary hover:underline"
-            >
-              {showReplies
-                ? "Hide replies"
-                : `View ${comment.reply_count} ${comment.reply_count === 1 ? "reply" : "replies"}`}
-            </button>
-          ) : null}
-
-          {!isReply && showReplies ? (
-            <ul className="mt-1 border-l border-border pl-3">
-              {replies.map((r) => (
-                <CommentRow
-                  key={r.id}
-                  comment={r}
-                  viewerId={viewerId}
-                  isPostAuthor={isPostAuthor}
-                  onReply={onReply}
-                  onLikeChange={(likes, liked) =>
-                    setReplies((prev) =>
-                      prev.map((x) =>
-                        x.id === r.id
-                          ? { ...x, likes_count: likes, viewer_has_liked: liked }
-                          : x,
-                      ),
-                    )
-                  }
-                  onPinToggle={() => {}}
-                  onRequestDelete={onRequestDelete}
-                  onRequestReport={onRequestReport}
-                  requireAuth={requireAuth}
-                  isReply
-                />
-              ))}
-            </ul>
-          ) : null}
-        </div>
-      </div>
-    </li>
-  );
-}
-
-// ───────────────────────────────────────────────────────────────────────────
-// Report modal (compact)
-// ───────────────────────────────────────────────────────────────────────────
-
-const REPORT_CATEGORIES: { value: PostReportCategory; label: string }[] = [
-  { value: "spam", label: "Spam or misleading" },
-  { value: "harassment", label: "Harassment or bullying" },
-  { value: "misinformation", label: "Misinformation" },
-  { value: "inappropriate", label: "Inappropriate content" },
-  { value: "other", label: "Something else" },
-];
-
-function ReportCommentModal({
-  comment,
-  onClose,
-}: {
-  comment: Comment | null;
-  onClose: () => void;
-}) {
-  const [category, setCategory] = useState<PostReportCategory>("spam");
-  const [reason, setReason] = useState("");
-  const [working, setWorking] = useState(false);
-
-  useEffect(() => {
-    if (comment) {
-      setCategory("spam");
-      setReason("");
-      setWorking(false);
-    }
-  }, [comment]);
-
-  if (!comment) return null;
-
-  async function submit() {
-    if (!comment) return;
-    setWorking(true);
-    try {
-      await commentsApi.report(comment.id, category, reason.trim());
-      toast("Thanks — your report was submitted", { duration: 2500 });
-      onClose();
-    } catch (err) {
-      toast.error(
-        err instanceof SocialError ? err.message : "Could not submit report",
-        { duration: 3000 },
-      );
-    } finally {
-      setWorking(false);
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 z-[110] flex items-center justify-center px-4">
-      <div
-        className="absolute inset-0 bg-foreground/40 backdrop-blur-sm"
-        onClick={() => !working && onClose()}
-        aria-hidden
-      />
-      <div
-        role="dialog"
-        aria-modal="true"
-        className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-xl p-5"
-      >
-        <h2 className="font-[family-name:var(--font-title)] font-semibold text-lg text-foreground">
-          Report comment
-        </h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Reports are private and reviewed by our team.
-        </p>
-        <div className="mt-4 space-y-1.5">
-          {REPORT_CATEGORIES.map((c) => (
-            <label
-              key={c.value}
-              className={cn(
-                "flex items-center gap-3 rounded-md border px-3 py-2 cursor-pointer transition-colors",
-                category === c.value
-                  ? "border-primary bg-primary/5"
-                  : "border-border hover:bg-muted",
-              )}
-            >
-              <input
-                type="radio"
-                name="comment-report-category"
-                value={c.value}
-                checked={category === c.value}
-                onChange={() => setCategory(c.value)}
-                className="accent-primary"
-              />
-              <span className="text-sm text-foreground">{c.label}</span>
-            </label>
-          ))}
-        </div>
-        <textarea
-          value={reason}
-          onChange={(e) => setReason(e.target.value)}
-          rows={2}
-          maxLength={2000}
-          placeholder="Add details (optional)"
-          className="mt-3 w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-base sm:text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-primary/40"
-        />
-        <div className="mt-4 flex items-center justify-end gap-2">
-          <button
-            type="button"
-            onClick={onClose}
-            disabled={working}
-            className="h-10 px-4 rounded-md text-sm font-medium text-foreground hover:bg-muted transition-colors disabled:opacity-50"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={submit}
-            disabled={working}
-            className="h-10 px-4 rounded-md text-sm font-medium bg-destructive text-white hover:bg-destructive/90 transition-colors disabled:opacity-60"
-          >
-            {working ? "Submitting…" : "Submit report"}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ───────────────────────────────────────────────────────────────────────────
-
-function Avatar({ src, name }: { src: string | null; name: string }) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={36}
-        height={36}
-        className="size-9 shrink-0 rounded-full object-cover ring-1 ring-foreground/10"
-        unoptimized
-      />
-    );
-  }
-  const initials =
-    name
-      .replace(/^@/, "")
-      .split(/\s+/)
-      .map((p) => p[0])
-      .slice(0, 2)
-      .join("")
-      .toUpperCase() || "?";
-  return (
-    <div className="size-9 shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center text-xs font-semibold ring-1 ring-foreground/10">
-      {initials}
-    </div>
-  );
-}
-
-/** Compact relative time ("just now", "5m ago", "3h ago", "2d ago"). */
-function timeAgo(iso: string): string {
-  const then = new Date(iso).getTime();
-  if (Number.isNaN(then)) return "";
-  const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
-  if (secs < 45) return "just now";
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return `${mins}m ago`;
-  const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d ago`;
-  return new Date(iso).toLocaleDateString();
-}
diff --git a/components/social/post-actions-footer.tsx b/components/social/post/post-actions-footer.tsx
similarity index 92%
rename from components/social/post-actions-footer.tsx
rename to components/social/post/post-actions-footer.tsx
index f68cdc2a..cc55e6ed 100644
--- a/components/social/post-actions-footer.tsx
+++ b/components/social/post/post-actions-footer.tsx
@@ -43,9 +43,9 @@ import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { CollectionsDrawer } from "@/components/selection-toolbar/collections-drawer";
-import { PostLikesDrawer } from "@/components/social/post-likes-drawer";
-import { PostCommentsDrawer } from "@/components/social/post-comments-drawer";
-import { useSharePost } from "./share-post-provider";
+import { PostLikesDrawer } from "./post-likes-drawer";
+import { PostCommentsDrawer } from "@/components/social/comment/post-comments-drawer";
+import { useSharePost } from "../share-post-provider";
 
 // All icons come from the Heroicons v2 outline family (react-icons
 // `hi2` namespace), so they share one design language — uniform stroke
@@ -81,6 +81,9 @@ export function PostActionsFooter({ post }: { post: Post }) {
   const [pinned, setPinned] = useState<Comment | null>(
     post.pinned_comment ?? null,
   );
+  const [commentCount, setCommentCount] = useState<number>(
+    post.comments_count ?? 0,
+  );
 
   const isOwner = !!user && user.id === post.user_id;
   // Owners and resharers both see Send — the post is "on their account"
@@ -177,6 +180,16 @@ export function PostActionsFooter({ post }: { post: Post }) {
             onClick={() => setCommentsOpen(true)}
             icon={<HiOutlineChatBubbleOvalLeft className={ICON_CLASS} />}
           />
+          {commentCount > 0 ? (
+            <button
+              type="button"
+              onClick={() => setCommentsOpen(true)}
+              aria-label={`${commentCount} ${commentCount === 1 ? "comment" : "comments"}`}
+              className="-ml-2 mr-1 rounded px-1 text-sm font-medium tabular-nums text-muted-foreground transition-colors hover:text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {commentCount}
+            </button>
+          ) : null}
           {/* Reshare for posts not yet on your account, Send for posts
               that are — authored OR previously reshared. Mutually
               exclusive: the row stays three icons regardless of viewer
@@ -250,6 +263,9 @@ export function PostActionsFooter({ post }: { post: Post }) {
         post={post}
         onClose={() => setCommentsOpen(false)}
         onPinnedChange={setPinned}
+        onCountChange={(delta) =>
+          setCommentCount((c) => Math.max(0, c + delta))
+        }
       />
       {/* SharePostSheet is mounted globally by SharePostProvider, so
           no per-card instance lives here. The provider's
diff --git a/components/social/post-card-menu.tsx b/components/social/post/post-card-menu.tsx
similarity index 100%
rename from components/social/post-card-menu.tsx
rename to components/social/post/post-card-menu.tsx
diff --git a/components/social/post-card-shared.tsx b/components/social/post/post-card-shared.tsx
similarity index 100%
rename from components/social/post-card-shared.tsx
rename to components/social/post/post-card-shared.tsx
diff --git a/components/social/post-card.tsx b/components/social/post/post-card.tsx
similarity index 89%
rename from components/social/post-card.tsx
rename to components/social/post/post-card.tsx
index 0682ebef..ba6a08d0 100644
--- a/components/social/post-card.tsx
+++ b/components/social/post/post-card.tsx
@@ -26,6 +26,7 @@ import { ExternalLink, Repeat2 } from "lucide-react";
 import type { Post } from "@/lib/social";
 import { displaySourceLabel } from "@/lib/source-reference";
 import { appendHighlight, hasHighlight } from "@/lib/text-highlight";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import { PostActionsFooter } from "./post-actions-footer";
 import { PostCardMenu } from "./post-card-menu";
 
@@ -69,7 +70,11 @@ export function PostCard({
           show (delete for owners, block/report for everyone else), so
           a view with nothing to expose simply hides the dot. */}
       <header className="flex items-center gap-3 mb-4">
-        <AuthorAvatar src={post.author_avatar_url ?? null} name={authorName} />
+        <UserAvatar
+          src={post.author_avatar_url}
+          name={authorName}
+          className="size-9"
+        />
         <div className="min-w-0 flex-1">
           {authorHandle ? (
             <Link
@@ -144,29 +149,3 @@ export function PostCard({
   );
 }
 
-function AuthorAvatar({
-  src,
-  name,
-}: {
-  src: string | null;
-  name: string;
-}) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={36}
-        height={36}
-        className="size-9 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
-        unoptimized
-      />
-    );
-  }
-  const initial = name.charAt(0).toUpperCase() || "?";
-  return (
-    <div className="size-9 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
-      {initial}
-    </div>
-  );
-}
diff --git a/components/social/post-grid-card.tsx b/components/social/post/post-grid-card.tsx
similarity index 98%
rename from components/social/post-grid-card.tsx
rename to components/social/post/post-grid-card.tsx
index 28e0cd15..7ba648ef 100644
--- a/components/social/post-grid-card.tsx
+++ b/components/social/post/post-grid-card.tsx
@@ -23,7 +23,7 @@ import type { Post } from "@/lib/social";
 import { displaySourceLabel } from "@/lib/source-reference";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
 import { postSourceHref, quoteCardBgStyle, quoteSize } from "./post-card-shared";
-import { UpdateBackgroundModal } from "./update-background-modal";
+import { UpdateBackgroundModal } from "../update-background-modal";
 
 export function PostGridCard({
   post,
diff --git a/components/social/post-likes-drawer.tsx b/components/social/post/post-likes-drawer.tsx
similarity index 100%
rename from components/social/post-likes-drawer.tsx
rename to components/social/post/post-likes-drawer.tsx
diff --git a/components/social/post-scroll-card.tsx b/components/social/post/post-scroll-card.tsx
similarity index 94%
rename from components/social/post-scroll-card.tsx
rename to components/social/post/post-scroll-card.tsx
index 2682fbc3..c312285e 100644
--- a/components/social/post-scroll-card.tsx
+++ b/components/social/post/post-scroll-card.tsx
@@ -34,12 +34,13 @@ import { cn } from "@/lib/utils";
 import type { Post, PostImage } from "@/lib/social";
 import { displaySourceLabel } from "@/lib/source-reference";
 import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import { UserAvatar } from "@/components/ui/user-avatar";
 import { useAuth } from "@/components/auth/auth-provider";
 import { postSourceHref, quoteCardBgStyle } from "./post-card-shared";
 import { PostActionsFooter } from "./post-actions-footer";
 import { PostCardMenu } from "./post-card-menu";
-import { UpdateBackgroundModal } from "./update-background-modal";
-import { MentionsDrawer } from "./mentions-drawer";
+import { UpdateBackgroundModal } from "../update-background-modal";
+import { MentionsDrawer } from "../mentions-drawer";
 
 export function PostScrollCard({
   post,
@@ -115,9 +116,10 @@ export function PostScrollCard({
           on the right (Delete for author, Block/Report for everyone
           else; PostCardMenu hides itself when there are no items). */}
       <header className="flex items-center gap-3 px-4 py-3">
-        <AuthorAvatar
-          src={post.author_avatar_url ?? null}
+        <UserAvatar
+          src={post.author_avatar_url}
           name={post.author_name ?? "Unknown"}
+          className="size-9"
         />
         <div className="min-w-0 flex-1">
           <Link
@@ -343,32 +345,6 @@ function Caption({
   );
 }
 
-function AuthorAvatar({
-  src,
-  name,
-}: {
-  src: string | null;
-  name: string;
-}) {
-  if (src) {
-    return (
-      <Image
-        src={src}
-        alt={name}
-        width={36}
-        height={36}
-        className="size-9 rounded-full object-cover ring-1 ring-foreground/10"
-        unoptimized
-      />
-    );
-  }
-  const initial = name.charAt(0).toUpperCase() || "?";
-  return (
-    <div className="size-9 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10">
-      {initial}
-    </div>
-  );
-}
 
 function OwnerButton({
   label,
diff --git a/components/social/post-views.tsx b/components/social/post/post-views.tsx
similarity index 100%
rename from components/social/post-views.tsx
rename to components/social/post/post-views.tsx
diff --git a/components/ui/emoji-picker.tsx b/components/ui/emoji-picker.tsx
new file mode 100644
index 00000000..45fe4533
--- /dev/null
+++ b/components/ui/emoji-picker.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+/**
+ * EmojiPicker — a tiny, dependency-free emoji popover for text inputs.
+ *
+ * Renders just a trigger button; the panel is portaled to <body> with fixed
+ * positioning and a transparent full-screen backdrop that swallows the
+ * dismiss click. That keeps it OUTSIDE any surrounding drawer/sheet DOM, so
+ * opening it can't resize or reposition the host (e.g. the vaul comments
+ * drawer), and the dismiss click can't leak through and close that drawer.
+ *
+ * It stays open after a pick so several emojis can be added in a row; the
+ * caller decides what to do with each via `onSelect`.
+ */
+
+import { useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Smile } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// A curated, broadly-useful set — enough to feel like a picker without
+// shipping a full emoji database. Grouped for easy scanning.
+const EMOJI_GROUPS: { label: string; emojis: string[] }[] = [
+  {
+    label: "Smileys",
+    emojis: [
+      "😀", "😃", "😄", "😁", "😅", "😂", "🙂", "😊",
+      "😇", "😍", "🥰", "😘", "😉", "😌", "😎", "🤗",
+      "🤔", "😴", "😢", "😭", "😮", "😲", "🥲", "😬",
+    ],
+  },
+  {
+    label: "Gestures & people",
+    emojis: [
+      "🙏", "👍", "👎", "👏", "🙌", "🤝", "✌️", "🤞",
+      "💪", "🫶", "👋", "🙇", "🧘", "🕉️", "☮️", "🤲",
+    ],
+  },
+  {
+    label: "Hearts",
+    emojis: [
+      "❤️", "🧡", "💛", "💚", "💙", "💜", "🤍", "🤎",
+      "🖤", "💖", "💕", "💗", "💓", "💞", "💔", "❣️",
+    ],
+  },
+  {
+    label: "Nature & spirit",
+    emojis: [
+      "🌸", "🌺", "🌹", "🪷", "🌻", "🌼", "🍃", "🌿",
+      "🪔", "🕯️", "🔥", "✨", "🌟", "⭐", "☀️", "🌈",
+    ],
+  },
+  {
+    label: "Symbols",
+    emojis: [
+      "🎉", "🎊", "🥳", "💯", "✅", "❗", "❓", "💬",
+      "📿", "🛕", "🐮", "🦚", "🪈", "🎶", "📖", "🙏🏽",
+    ],
+  },
+];
+
+const PANEL_WIDTH = 300;
+
+export function EmojiPicker({
+  onSelect,
+  className,
+}: {
+  onSelect: (emoji: string) => void;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<{ bottom: number; left: number } | null>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  function toggle() {
+    if (open) {
+      setOpen(false);
+      return;
+    }
+    const r = btnRef.current?.getBoundingClientRect();
+    if (r) {
+      // Open ABOVE the trigger (the composer sits at the bottom of the sheet),
+      // clamped so the 300px panel stays on-screen horizontally.
+      const left = Math.max(
+        8,
+        Math.min(r.left, window.innerWidth - PANEL_WIDTH - 8),
+      );
+      setPos({ bottom: window.innerHeight - r.top + 6, left });
+    }
+    setOpen(true);
+  }
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        onClick={toggle}
+        aria-label="Add emoji"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        className={cn(
+          "size-10 shrink-0 inline-flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
+          className,
+        )}
+      >
+        <Smile className="size-5" />
+      </button>
+      {open && pos && typeof document !== "undefined"
+        ? createPortal(
+            <>
+              <div
+                className="fixed inset-0 z-[100]"
+                aria-hidden
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpen(false);
+                }}
+              />
+              <div
+                role="dialog"
+                aria-label="Emoji picker"
+                style={{
+                  position: "fixed",
+                  bottom: pos.bottom,
+                  left: pos.left,
+                  width: PANEL_WIDTH,
+                  maxWidth: "calc(100vw - 1rem)",
+                }}
+                className="z-[101] rounded-xl border border-border bg-card shadow-xl p-2 animate-in fade-in-0 zoom-in-95"
+              >
+                <div className="max-h-60 overflow-y-auto overscroll-contain">
+                  {EMOJI_GROUPS.map((g) => (
+                    <div key={g.label} className="mb-1.5">
+                      <p className="px-1 pb-0.5 pt-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                        {g.label}
+                      </p>
+                      <div className="grid grid-cols-8 gap-0.5">
+                        {g.emojis.map((e, i) => (
+                          <button
+                            key={`${e}-${i}`}
+                            type="button"
+                            onClick={() => onSelect(e)}
+                            aria-label={`Emoji ${e}`}
+                            className="flex size-8 items-center justify-center rounded-md text-xl leading-none hover:bg-muted"
+                          >
+                            {e}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </>,
+            document.body,
+          )
+        : null}
+    </>
+  );
+}
diff --git a/components/ui/user-avatar.tsx b/components/ui/user-avatar.tsx
new file mode 100644
index 00000000..4997da51
--- /dev/null
+++ b/components/ui/user-avatar.tsx
@@ -0,0 +1,101 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+/**
+ * UserAvatar — the one avatar component: shows the user's image, or their
+ * initials on a tinted disc when there's no image. Used everywhere a user
+ * thumbnail appears (notification feed, comments, follower lists, and the
+ * profile header's large zoomable hero).
+ *
+ * Sizing is class-driven (`className`) rather than a fixed px, so callers get
+ * Tailwind's responsive sizes — e.g. `size-10` for a list row or
+ * `size-24 sm:size-28` for the profile header. `textClassName` scales the
+ * initials to match. When `onClick` is set, an image avatar becomes a
+ * focusable button (used by the profile header to open its zoom preview);
+ * `interactive` adds a hover-ring affordance.
+ */
+export function UserAvatar({
+  src,
+  name,
+  className,
+  textClassName = "text-sm",
+  onClick,
+  ariaLabel,
+  interactive = false,
+}: {
+  src?: string | null;
+  name: string;
+  /** Box size + extras. Defaults to a 40px (size-10) circle. */
+  className?: string;
+  /** Initials font size — match it to the box. Defaults to text-sm. */
+  textClassName?: string;
+  /** When set, an image avatar renders as a focusable button (e.g. to open a
+   *  zoom preview or navigate). Initials stay non-interactive. */
+  onClick?: () => void;
+  ariaLabel?: string;
+  /** Add a hover-ring affordance to an image avatar. */
+  interactive?: boolean;
+}) {
+  const size = className ?? "size-10";
+
+  if (src) {
+    const imgRing = cn(
+      "rounded-full object-cover ring-1 ring-foreground/10",
+      interactive && "hover:ring-foreground/30 transition",
+    );
+    // width/height satisfy next/image; the rendered size comes from the CSS
+    // size class (which overrides the intrinsic attributes).
+    if (onClick) {
+      return (
+        <button
+          type="button"
+          onClick={onClick}
+          aria-label={ariaLabel ?? `View ${name}'s picture`}
+          className={cn(
+            "shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            size,
+          )}
+        >
+          <Image
+            src={src}
+            alt={name}
+            width={112}
+            height={112}
+            className={cn("size-full", imgRing)}
+            unoptimized
+          />
+        </button>
+      );
+    }
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={112}
+        height={112}
+        className={cn("shrink-0", size, imgRing)}
+        unoptimized
+      />
+    );
+  }
+
+  const initials =
+    name
+      .replace(/^@/, "")
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div
+      className={cn(
+        "shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center font-semibold ring-1 ring-foreground/10",
+        size,
+        textClassName,
+      )}
+    >
+      {initials}
+    </div>
+  );
+}
diff --git a/lib/social.ts b/lib/social.ts
index b01c008e..3be3eac4 100644
--- a/lib/social.ts
+++ b/lib/social.ts
@@ -88,6 +88,8 @@ export type Post = {
   /** The post's pinned comment, if any — hydrated so the card footer can show
    *  it without a separate fetch. Null/absent when nothing is pinned. */
   pinned_comment?: Comment | null;
+  /** Total comments + replies on the post (drives the footer comment count). */
+  comments_count?: number;
 };
 
 /** A comment or reply on a post. Threading is one level deep: `parent_id` is
diff --git a/lib/time.ts b/lib/time.ts
new file mode 100644
index 00000000..84ba02c7
--- /dev/null
+++ b/lib/time.ts
@@ -0,0 +1,19 @@
+/**
+ * Compact relative time ("just now", "5m ago", "3h ago", "2d ago"), falling
+ * back to a locale date for anything older than a week. Shared across the
+ * notification feed, the comments drawer, and anywhere else that shows a
+ * timestamp tail.
+ */
+export function timeAgo(iso: string): string {
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const secs = Math.max(0, Math.floor((Date.now() - then) / 1000));
+  if (secs < 45) return "just now";
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(iso).toLocaleDateString();
+}