From 3e10a8116233d98babccf84984abbfdd201df23b Mon Sep 17 00:00:00 2001
From: Guido X Jansen <x@gui.do>
Date: Sun, 22 Feb 2026 22:26:13 +0100
Subject: [PATCH] refactor(web): split 16 oversized components into focused
 modules (#74)

* fix(test): stabilize auth mocks to prevent infinite re-render loops

The useAuth mock created new function references on every call, causing
components with getAccessToken in useCallback/useEffect deps to enter
infinite re-render loops. Extract mock object to a stable reference.

Also add maxWorkers (cpuCount/2) and testTimeout (10s) to vitest config
to reduce CPU contention and give axe-core tests adequate time.

* refactor(web): split 16 oversized components into ~38 focused modules

Enforce ~150-line limit for non-page TSX files by extracting cohesive
sub-components. All 606 tests pass, typecheck clean, zero regressions.

Priority 1 (400+ lines): admin/moderation, admin/sybil-detection,
admin/settings, settings, community-profile-settings, admin/plugins.

Priority 2 (250-400 lines): admin/onboarding, admin/trust-seeds,
admin/categories, onboarding-modal, topic-form, settings/reports.

Priority 3 (150-250 lines): report-dialog, markdown-editor,
community-profile-settings, search-input.

Also adds formatDateShort to shared format utilities and extracts
useCommunityProfile hook.
---
 src/app/admin/categories/page.tsx             | 181 +------
 src/app/admin/moderation/page.tsx             | 470 +-----------------
 src/app/admin/onboarding/page.tsx             | 213 +-------
 src/app/admin/plugins/page.tsx                | 268 +---------
 src/app/admin/settings/page.tsx               | 460 +----------------
 src/app/admin/sybil-detection/page.tsx        | 390 +--------------
 src/app/admin/trust-seeds/page.tsx            | 239 +--------
 src/app/settings/page.tsx                     | 292 ++---------
 src/app/settings/reports/page.tsx             | 164 +-----
 .../admin/categories/category-form.tsx        | 103 ++++
 .../admin/categories/category-row.tsx         |  85 ++++
 .../admin/moderation/action-log-tab.tsx       |  54 ++
 .../admin/moderation/first-post-tab.tsx       | 153 ++++++
 .../admin/moderation/reported-users-tab.tsx   |  40 ++
 .../admin/moderation/reports-tab.tsx          |  88 ++++
 .../admin/moderation/thresholds-tab.tsx       | 159 ++++++
 .../onboarding/onboarding-field-form.tsx      | 142 ++++++
 .../onboarding/onboarding-field-item.tsx      |  99 ++++
 src/components/admin/plugins/plugin-card.tsx  | 115 +++++
 .../admin/plugins/plugin-settings-modal.tsx   |  84 ++++
 .../admin/plugins/settings-field.tsx          |  89 ++++
 .../settings/community-settings-form.tsx      | 143 ++++++
 .../admin/settings/pds-override-dialog.tsx    | 124 +++++
 .../admin/settings/pds-trust-section.tsx      | 138 +++++
 .../admin/sybil/behavioral-flags-section.tsx  |  51 ++
 .../admin/sybil/cluster-detail-view.tsx       | 115 +++++
 .../admin/sybil/cluster-list-view.tsx         |  52 ++
 src/components/admin/sybil/status-badge.tsx   |  32 ++
 src/components/admin/sybil/suspicion-bar.tsx  |  28 ++
 .../admin/sybil/trust-graph-status-card.tsx   |  58 +++
 .../admin/trust-seeds/add-seed-dialog.tsx     | 104 ++++
 .../admin/trust-seeds/trust-seed-card.tsx     |  62 +++
 .../community-profile-form-fields.tsx         |  77 +++
 src/components/community-profile-settings.tsx | 381 ++------------
 src/components/markdown-editor.tsx            |  88 +---
 src/components/markdown-toolbar-actions.ts    |  88 ++++
 src/components/onboarding-field-input.tsx     | 175 +++++++
 src/components/onboarding-modal.tsx           | 169 +------
 src/components/report-dialog.tsx              | 117 +----
 src/components/report-form-content.tsx        | 121 +++++
 src/components/search-input.tsx               |  55 +-
 src/components/search-suggestion-list.tsx     |  55 ++
 .../settings/community-overrides-section.tsx  | 121 +++++
 .../settings/content-safety-section.tsx       |  71 +++
 .../settings/cross-posting-section.tsx        |  76 +++
 .../settings/notifications-section.tsx        |  59 +++
 .../settings/report-appeal-form.tsx           |  82 +++
 src/components/settings/report-card.tsx       | 121 +++++
 src/components/source-profile-preview.tsx     |  38 ++
 src/components/topic-content-editor.tsx       |  84 ++++
 src/components/topic-cross-post-section.tsx   |  70 +++
 src/components/topic-form-validation.ts       |  39 ++
 src/components/topic-form.tsx                 | 257 +---------
 src/components/topic-meta-fields.tsx          | 104 ++++
 src/hooks/use-community-profile.ts            | 245 +++++++++
 src/lib/format.ts                             |  30 ++
 56 files changed, 4025 insertions(+), 3493 deletions(-)
 create mode 100644 src/components/admin/categories/category-form.tsx
 create mode 100644 src/components/admin/categories/category-row.tsx
 create mode 100644 src/components/admin/moderation/action-log-tab.tsx
 create mode 100644 src/components/admin/moderation/first-post-tab.tsx
 create mode 100644 src/components/admin/moderation/reported-users-tab.tsx
 create mode 100644 src/components/admin/moderation/reports-tab.tsx
 create mode 100644 src/components/admin/moderation/thresholds-tab.tsx
 create mode 100644 src/components/admin/onboarding/onboarding-field-form.tsx
 create mode 100644 src/components/admin/onboarding/onboarding-field-item.tsx
 create mode 100644 src/components/admin/plugins/plugin-card.tsx
 create mode 100644 src/components/admin/plugins/plugin-settings-modal.tsx
 create mode 100644 src/components/admin/plugins/settings-field.tsx
 create mode 100644 src/components/admin/settings/community-settings-form.tsx
 create mode 100644 src/components/admin/settings/pds-override-dialog.tsx
 create mode 100644 src/components/admin/settings/pds-trust-section.tsx
 create mode 100644 src/components/admin/sybil/behavioral-flags-section.tsx
 create mode 100644 src/components/admin/sybil/cluster-detail-view.tsx
 create mode 100644 src/components/admin/sybil/cluster-list-view.tsx
 create mode 100644 src/components/admin/sybil/status-badge.tsx
 create mode 100644 src/components/admin/sybil/suspicion-bar.tsx
 create mode 100644 src/components/admin/sybil/trust-graph-status-card.tsx
 create mode 100644 src/components/admin/trust-seeds/add-seed-dialog.tsx
 create mode 100644 src/components/admin/trust-seeds/trust-seed-card.tsx
 create mode 100644 src/components/community-profile-form-fields.tsx
 create mode 100644 src/components/markdown-toolbar-actions.ts
 create mode 100644 src/components/onboarding-field-input.tsx
 create mode 100644 src/components/report-form-content.tsx
 create mode 100644 src/components/search-suggestion-list.tsx
 create mode 100644 src/components/settings/community-overrides-section.tsx
 create mode 100644 src/components/settings/content-safety-section.tsx
 create mode 100644 src/components/settings/cross-posting-section.tsx
 create mode 100644 src/components/settings/notifications-section.tsx
 create mode 100644 src/components/settings/report-appeal-form.tsx
 create mode 100644 src/components/settings/report-card.tsx
 create mode 100644 src/components/source-profile-preview.tsx
 create mode 100644 src/components/topic-content-editor.tsx
 create mode 100644 src/components/topic-cross-post-section.tsx
 create mode 100644 src/components/topic-form-validation.ts
 create mode 100644 src/components/topic-meta-fields.tsx
 create mode 100644 src/hooks/use-community-profile.ts

diff --git a/src/app/admin/categories/page.tsx b/src/app/admin/categories/page.tsx
index 7850144..1ca4ff4 100644
--- a/src/app/admin/categories/page.tsx
+++ b/src/app/admin/categories/page.tsx
@@ -8,103 +8,16 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
-import { PencilSimple, Plus, TrashSimple } from '@phosphor-icons/react'
+import { Plus } from '@phosphor-icons/react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import { CategoryRow } from '@/components/admin/categories/category-row'
+import { CategoryForm } from '@/components/admin/categories/category-form'
+import type { EditingCategory } from '@/components/admin/categories/category-form'
 import { getCategories, createCategory, updateCategory, deleteCategory } from '@/lib/api/client'
-import { cn } from '@/lib/utils'
-import type { CategoryTreeNode, MaturityRating } from '@/lib/api/types'
+import type { CategoryTreeNode } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
-const MATURITY_LABELS: Record<MaturityRating, string> = {
-  safe: 'Safe',
-  mature: 'Mature',
-  adult: 'Adult',
-}
-
-const MATURITY_COLORS: Record<MaturityRating, string> = {
-  safe: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
-  mature: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
-  adult: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
-}
-
-interface EditingCategory {
-  id: string | null
-  name: string
-  slug: string
-  description: string
-  parentId: string | null
-  maturityRating: MaturityRating
-}
-
-function CategoryRow({
-  category,
-  depth,
-  onEdit,
-  onDelete,
-}: {
-  category: CategoryTreeNode
-  depth: number
-  onEdit: (cat: CategoryTreeNode) => void
-  onDelete: (id: string) => void
-}) {
-  return (
-    <>
-      <div
-        data-depth={depth}
-        className={cn(
-          'flex items-center justify-between rounded-md border border-border bg-card p-3',
-          depth > 0 && 'ml-6'
-        )}
-      >
-        <div className="flex items-center gap-3">
-          <div>
-            <p className="text-sm font-medium text-foreground">{category.name}</p>
-            {category.description && (
-              <p className="text-xs text-muted-foreground">{category.description}</p>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <span
-            className={cn(
-              'rounded-full px-2 py-0.5 text-xs font-medium',
-              MATURITY_COLORS[category.maturityRating]
-            )}
-          >
-            {MATURITY_LABELS[category.maturityRating]}
-          </span>
-          <button
-            type="button"
-            onClick={() => onEdit(category)}
-            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            aria-label={`Edit ${category.name}`}
-          >
-            <PencilSimple size={16} aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            onClick={() => onDelete(category.id)}
-            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
-            aria-label={`Delete ${category.name}`}
-          >
-            <TrashSimple size={16} aria-hidden="true" />
-          </button>
-        </div>
-      </div>
-      {category.children.map((child) => (
-        <CategoryRow
-          key={child.id}
-          category={child}
-          depth={depth + 1}
-          onEdit={onEdit}
-          onDelete={onDelete}
-        />
-      ))}
-    </>
-  )
-}
-
 export default function AdminCategoriesPage() {
   const { getAccessToken } = useAuth()
   const [categories, setCategories] = useState<CategoryTreeNode[]>([])
@@ -214,87 +127,15 @@ export default function AdminCategoriesPage() {
 
         {actionError && <ErrorAlert message={actionError} onDismiss={() => setActionError(null)} />}
 
-        {/* Edit form */}
         {editing && (
-          <div className="rounded-lg border border-border bg-card p-4">
-            <h2 className="mb-4 text-lg font-semibold text-foreground">
-              {editing.id ? 'Edit Category' : 'New Category'}
-            </h2>
-            <div className="space-y-4">
-              <div>
-                <label htmlFor="cat-name" className="block text-sm font-medium text-foreground">
-                  Category Name
-                </label>
-                <input
-                  id="cat-name"
-                  type="text"
-                  value={editing.name}
-                  onChange={(e) => setEditing({ ...editing, name: e.target.value })}
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                />
-              </div>
-              <div>
-                <label htmlFor="cat-slug" className="block text-sm font-medium text-foreground">
-                  Slug
-                </label>
-                <input
-                  id="cat-slug"
-                  type="text"
-                  value={editing.slug}
-                  onChange={(e) => setEditing({ ...editing, slug: e.target.value })}
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                />
-              </div>
-              <div>
-                <label htmlFor="cat-desc" className="block text-sm font-medium text-foreground">
-                  Description
-                </label>
-                <textarea
-                  id="cat-desc"
-                  value={editing.description}
-                  onChange={(e) => setEditing({ ...editing, description: e.target.value })}
-                  rows={2}
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                />
-              </div>
-              <div>
-                <label htmlFor="cat-maturity" className="block text-sm font-medium text-foreground">
-                  Maturity Rating
-                </label>
-                <select
-                  id="cat-maturity"
-                  value={editing.maturityRating}
-                  onChange={(e) =>
-                    setEditing({ ...editing, maturityRating: e.target.value as MaturityRating })
-                  }
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                >
-                  <option value="safe">Safe</option>
-                  <option value="mature">Mature</option>
-                  <option value="adult">Adult</option>
-                </select>
-              </div>
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={() => void handleSave()}
-                  className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-                >
-                  Save
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setEditing(null)}
-                  className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
+          <CategoryForm
+            editing={editing}
+            onChange={setEditing}
+            onSave={() => void handleSave()}
+            onCancel={() => setEditing(null)}
+          />
         )}
 
-        {/* Category list */}
         {loadError && (
           <ErrorAlert message={loadError} variant="page" onRetry={() => void fetchCategories()} />
         )}
diff --git a/src/app/admin/moderation/page.tsx b/src/app/admin/moderation/page.tsx
index f06c4d4..3cdf82e 100644
--- a/src/app/admin/moderation/page.tsx
+++ b/src/app/admin/moderation/page.tsx
@@ -8,9 +8,13 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
-import { WarningCircle, ShieldCheck, Clock, Prohibit } from '@phosphor-icons/react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import { ModerationReportsTab } from '@/components/admin/moderation/reports-tab'
+import { ModerationFirstPostTab } from '@/components/admin/moderation/first-post-tab'
+import { ModerationActionLogTab } from '@/components/admin/moderation/action-log-tab'
+import { ModerationReportedUsersTab } from '@/components/admin/moderation/reported-users-tab'
+import { ModerationThresholdsTab } from '@/components/admin/moderation/thresholds-tab'
 import {
   getModerationReports,
   resolveReport,
@@ -42,458 +46,6 @@ const TABS: { id: TabId; label: string }[] = [
   { id: 'thresholds', label: 'Thresholds' },
 ]
 
-const RESOLUTION_ACTIONS: { value: ReportResolution; label: string }[] = [
-  { value: 'dismissed', label: 'Dismiss' },
-  { value: 'warned', label: 'Warn' },
-  { value: 'labeled', label: 'Label' },
-  { value: 'removed', label: 'Remove' },
-  { value: 'banned', label: 'Ban' },
-]
-
-const ACTION_TYPE_LABELS: Record<string, string> = {
-  lock: 'Locked',
-  unlock: 'Unlocked',
-  pin: 'Pinned',
-  unpin: 'Unpinned',
-  delete: 'Deleted',
-  ban: 'Banned',
-  unban: 'Unbanned',
-  warn: 'Warned',
-  label: 'Labeled',
-  approve: 'Approved',
-  reject: 'Rejected',
-}
-
-function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-  })
-}
-
-// --- Report Queue Tab ---
-function ReportsTab({
-  reports,
-  onResolve,
-}: {
-  reports: ModerationReport[]
-  onResolve: (id: string, resolution: ReportResolution) => void
-}) {
-  // Sort: potentially illegal first, then by date (newest first)
-  const sorted = [...reports].sort((a, b) => {
-    if (a.potentiallyIllegal !== b.potentiallyIllegal) {
-      return a.potentiallyIllegal ? -1 : 1
-    }
-    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-  })
-
-  return (
-    <div className="space-y-3">
-      {sorted.map((report) => (
-        <article
-          key={report.id}
-          className={cn(
-            'rounded-lg border border-border bg-card p-4',
-            report.potentiallyIllegal && 'border-l-4 border-l-destructive'
-          )}
-        >
-          <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0 flex-1">
-              {report.potentiallyIllegal && (
-                <span className="mb-1 inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive">
-                  <WarningCircle size={12} aria-hidden="true" />
-                  Potentially illegal
-                </span>
-              )}
-              <p className="text-sm font-medium text-foreground">
-                <span className="capitalize">{report.reasonType}</span>
-                {' -- reported by '}
-                <span className="text-muted-foreground">{report.reporterHandle}</span>
-              </p>
-              <p className="mt-1 text-sm text-muted-foreground">{report.targetContent}</p>
-              {report.reason && (
-                <p className="mt-1 text-xs text-muted-foreground italic">
-                  &ldquo;{report.reason}&rdquo;
-                </p>
-              )}
-              <p className="mt-1 text-xs text-muted-foreground">
-                Target: {report.targetAuthorHandle} &middot; {formatDate(report.createdAt)}
-              </p>
-            </div>
-            <div className="flex shrink-0 gap-1">
-              {RESOLUTION_ACTIONS.map((action) => (
-                <button
-                  key={action.value}
-                  type="button"
-                  onClick={() => onResolve(report.id, action.value)}
-                  className="rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                >
-                  {action.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </article>
-      ))}
-      {sorted.length === 0 && (
-        <p className="py-8 text-center text-muted-foreground">No pending reports.</p>
-      )}
-    </div>
-  )
-}
-
-// --- First Post Queue Tab ---
-function FirstPostTab({
-  items,
-  onResolve,
-  onBatchResolve,
-}: {
-  items: FirstPostQueueItem[]
-  onResolve: (id: string, action: 'approved' | 'rejected') => void
-  onBatchResolve: (ids: string[], action: 'approved' | 'rejected') => void
-}) {
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-
-  const allSelected = items.length > 0 && selectedIds.size === items.length
-
-  const toggleSelectAll = () => {
-    if (allSelected) {
-      setSelectedIds(new Set())
-    } else {
-      setSelectedIds(new Set(items.map((item) => item.id)))
-    }
-  }
-
-  const toggleItem = (id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-      return next
-    })
-  }
-
-  const handleBatchAction = (action: 'approved' | 'rejected') => {
-    const ids = Array.from(selectedIds)
-    onBatchResolve(ids, action)
-    setSelectedIds(new Set())
-  }
-
-  return (
-    <div className="space-y-3">
-      {items.length > 0 && (
-        <div className="flex items-center justify-between">
-          <label className="flex items-center gap-2 text-sm text-muted-foreground">
-            <input
-              type="checkbox"
-              checked={allSelected}
-              onChange={toggleSelectAll}
-              className="rounded border-border"
-              aria-label="Select all"
-            />
-            Select all ({items.length})
-          </label>
-          {selectedIds.size > 0 && (
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => handleBatchAction('approved')}
-                className="rounded-md bg-green-600 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-green-700"
-              >
-                Approve selected ({selectedIds.size})
-              </button>
-              <button
-                type="button"
-                onClick={() => handleBatchAction('rejected')}
-                className="rounded-md bg-destructive px-3 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
-              >
-                Reject selected ({selectedIds.size})
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-      {items.map((item) => (
-        <article key={item.id} className="rounded-lg border border-border bg-card p-4">
-          <div className="flex items-start gap-3">
-            <input
-              type="checkbox"
-              checked={selectedIds.has(item.id)}
-              onChange={() => toggleItem(item.id)}
-              className="mt-1 rounded border-border"
-              aria-label={`Select post by ${item.authorHandle}`}
-            />
-            <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium text-foreground">{item.authorHandle}</p>
-              <div className="mt-1 flex flex-wrap gap-2 text-xs text-muted-foreground">
-                <span className="inline-flex items-center gap-1">
-                  <Clock size={12} aria-hidden="true" />
-                  New account, {item.accountAge} old
-                </span>
-                {item.crossCommunityCount > 0 && (
-                  <span className="inline-flex items-center gap-1">
-                    <ShieldCheck size={12} aria-hidden="true" />
-                    Active in {item.crossCommunityCount} other communities
-                  </span>
-                )}
-                {item.bannedFromOtherCommunities > 0 && (
-                  <span className="inline-flex items-center gap-1 font-medium text-destructive">
-                    <Prohibit size={12} aria-hidden="true" />
-                    Banned from {item.bannedFromOtherCommunities} other{' '}
-                    {item.bannedFromOtherCommunities === 1 ? 'community' : 'communities'}
-                  </span>
-                )}
-              </div>
-              {item.title && (
-                <p className="mt-2 text-sm font-medium text-foreground">{item.title}</p>
-              )}
-              <p className="mt-1 text-sm text-muted-foreground">{item.content}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {item.contentType === 'topic' ? 'Topic' : 'Reply'} &middot;{' '}
-                {formatDate(item.createdAt)}
-              </p>
-            </div>
-            <div className="flex shrink-0 gap-2">
-              <button
-                type="button"
-                onClick={() => onResolve(item.id, 'approved')}
-                className="rounded-md bg-green-600 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-green-700"
-              >
-                Approve
-              </button>
-              <button
-                type="button"
-                onClick={() => onResolve(item.id, 'rejected')}
-                className="rounded-md bg-destructive px-3 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
-              >
-                Reject
-              </button>
-            </div>
-          </div>
-        </article>
-      ))}
-      {items.length === 0 && (
-        <p className="py-8 text-center text-muted-foreground">No posts awaiting approval.</p>
-      )}
-    </div>
-  )
-}
-
-// --- Action Log Tab ---
-function ActionLogTab({ entries }: { entries: ModerationLogEntry[] }) {
-  return (
-    <div className="space-y-2">
-      {entries.map((entry) => (
-        <div key={entry.id} className="rounded-md border border-border bg-card p-3">
-          <div className="flex items-center justify-between">
-            <p className="text-sm text-foreground">
-              <span className="font-medium">{entry.moderatorHandle}</span>{' '}
-              <span className="text-muted-foreground">
-                {ACTION_TYPE_LABELS[entry.actionType] ?? entry.actionType}
-              </span>
-              {entry.targetHandle && (
-                <span className="text-muted-foreground"> {entry.targetHandle}</span>
-              )}
-            </p>
-            <span className="text-xs text-muted-foreground">{formatDate(entry.createdAt)}</span>
-          </div>
-          {entry.reason && (
-            <p className="mt-1 text-xs text-muted-foreground italic">{entry.reason}</p>
-          )}
-        </div>
-      ))}
-      {entries.length === 0 && (
-        <p className="py-8 text-center text-muted-foreground">No moderation actions recorded.</p>
-      )}
-    </div>
-  )
-}
-
-// --- Reported Users Tab ---
-function ReportedUsersTab({ users }: { users: ReportedUser[] }) {
-  return (
-    <div className="space-y-2">
-      {users.map((user) => (
-        <div key={user.did} className="rounded-md border border-border bg-card p-3">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-foreground">{user.handle}</p>
-              <p className="text-xs text-muted-foreground">
-                {user.reportCount} reports &middot; Latest: {formatDate(user.latestReportAt)}
-              </p>
-              {user.bannedFromOtherCommunities > 0 && (
-                <p className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-destructive">
-                  <Prohibit size={12} aria-hidden="true" />
-                  Banned from {user.bannedFromOtherCommunities} other communities
-                </p>
-              )}
-            </div>
-          </div>
-        </div>
-      ))}
-      {users.length === 0 && (
-        <p className="py-8 text-center text-muted-foreground">No reported users.</p>
-      )}
-    </div>
-  )
-}
-
-// --- Thresholds Tab ---
-function ThresholdsTab({
-  thresholds,
-  onSave,
-}: {
-  thresholds: ModerationThresholds
-  onSave: (updated: Partial<ModerationThresholds>) => void
-}) {
-  const [values, setValues] = useState(thresholds)
-
-  return (
-    <div className="max-w-lg space-y-4">
-      <div>
-        <label htmlFor="threshold-autoblock" className="block text-sm font-medium text-foreground">
-          Auto-block report count
-        </label>
-        <input
-          id="threshold-autoblock"
-          type="number"
-          min={1}
-          value={values.autoBlockReportCount}
-          onChange={(e) =>
-            setValues({ ...values, autoBlockReportCount: parseInt(e.target.value, 10) || 1 })
-          }
-          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-        />
-      </div>
-      <div>
-        <label htmlFor="threshold-warn" className="block text-sm font-medium text-foreground">
-          Warn threshold
-        </label>
-        <input
-          id="threshold-warn"
-          type="number"
-          min={1}
-          value={values.warnThreshold}
-          onChange={(e) =>
-            setValues({ ...values, warnThreshold: parseInt(e.target.value, 10) || 1 })
-          }
-          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-        />
-      </div>
-      <div>
-        <label htmlFor="threshold-fpq" className="block text-sm font-medium text-foreground">
-          First-post queue count (0 to disable)
-        </label>
-        <input
-          id="threshold-fpq"
-          type="number"
-          min={0}
-          value={values.firstPostQueueCount}
-          onChange={(e) =>
-            setValues({ ...values, firstPostQueueCount: parseInt(e.target.value, 10) || 0 })
-          }
-          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-        />
-      </div>
-      <div>
-        <label htmlFor="threshold-ratelimit" className="block text-sm font-medium text-foreground">
-          New account rate limit (writes/min)
-        </label>
-        <input
-          id="threshold-ratelimit"
-          type="number"
-          min={1}
-          value={values.newAccountRateLimit}
-          onChange={(e) =>
-            setValues({ ...values, newAccountRateLimit: parseInt(e.target.value, 10) || 1 })
-          }
-          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-        />
-      </div>
-      <fieldset className="space-y-3">
-        <legend className="text-sm font-medium text-foreground">Anti-spam settings</legend>
-        <div className="flex items-center gap-2">
-          <input
-            id="threshold-linkhold"
-            type="checkbox"
-            checked={values.linkPostingHold}
-            onChange={(e) => setValues({ ...values, linkPostingHold: e.target.checked })}
-            className="rounded border-border"
-          />
-          <label htmlFor="threshold-linkhold" className="text-sm text-foreground">
-            Hold posts with links from new accounts for review
-          </label>
-        </div>
-        <div className="flex items-center gap-2">
-          <input
-            id="threshold-topicdelay"
-            type="checkbox"
-            checked={values.topicCreationDelay}
-            onChange={(e) => setValues({ ...values, topicCreationDelay: e.target.checked })}
-            className="rounded border-border"
-          />
-          <label htmlFor="threshold-topicdelay" className="text-sm text-foreground">
-            Delay topic creation for new accounts
-          </label>
-        </div>
-      </fieldset>
-      <div className="flex gap-4">
-        <div>
-          <label
-            htmlFor="threshold-burstcount"
-            className="block text-sm font-medium text-foreground"
-          >
-            Burst detection: posts
-          </label>
-          <input
-            id="threshold-burstcount"
-            type="number"
-            min={1}
-            value={values.burstDetectionPostCount}
-            onChange={(e) =>
-              setValues({
-                ...values,
-                burstDetectionPostCount: parseInt(e.target.value, 10) || 1,
-              })
-            }
-            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-          />
-        </div>
-        <div>
-          <label htmlFor="threshold-burstmin" className="block text-sm font-medium text-foreground">
-            in minutes
-          </label>
-          <input
-            id="threshold-burstmin"
-            type="number"
-            min={1}
-            value={values.burstDetectionMinutes}
-            onChange={(e) =>
-              setValues({
-                ...values,
-                burstDetectionMinutes: parseInt(e.target.value, 10) || 1,
-              })
-            }
-            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-          />
-        </div>
-      </div>
-      <button
-        type="button"
-        onClick={() => onSave(values)}
-        className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-      >
-        Save Thresholds
-      </button>
-    </div>
-  )
-}
-
 export default function AdminModerationPage() {
   const { getAccessToken } = useAuth()
   const [activeTab, setActiveTab] = useState<TabId>('reports')
@@ -624,7 +176,7 @@ export default function AdminModerationPage() {
               hidden={activeTab !== 'reports'}
             >
               {activeTab === 'reports' && (
-                <ReportsTab
+                <ModerationReportsTab
                   reports={reports}
                   onResolve={(id, res) => void handleResolveReport(id, res)}
                 />
@@ -637,7 +189,7 @@ export default function AdminModerationPage() {
               hidden={activeTab !== 'first-post'}
             >
               {activeTab === 'first-post' && (
-                <FirstPostTab
+                <ModerationFirstPostTab
                   items={firstPostQueue}
                   onResolve={(id, action) => void handleResolveFirstPost(id, action)}
                   onBatchResolve={(ids, action) => void handleBatchResolveFirstPost(ids, action)}
@@ -650,7 +202,7 @@ export default function AdminModerationPage() {
               aria-labelledby="tab-action-log"
               hidden={activeTab !== 'action-log'}
             >
-              {activeTab === 'action-log' && <ActionLogTab entries={moderationLog} />}
+              {activeTab === 'action-log' && <ModerationActionLogTab entries={moderationLog} />}
             </div>
             <div
               role="tabpanel"
@@ -658,7 +210,9 @@ export default function AdminModerationPage() {
               aria-labelledby="tab-reported-users"
               hidden={activeTab !== 'reported-users'}
             >
-              {activeTab === 'reported-users' && <ReportedUsersTab users={reportedUsers} />}
+              {activeTab === 'reported-users' && (
+                <ModerationReportedUsersTab users={reportedUsers} />
+              )}
             </div>
             <div
               role="tabpanel"
@@ -667,7 +221,7 @@ export default function AdminModerationPage() {
               hidden={activeTab !== 'thresholds'}
             >
               {activeTab === 'thresholds' && thresholds && (
-                <ThresholdsTab
+                <ModerationThresholdsTab
                   thresholds={thresholds}
                   onSave={(updated) => void handleSaveThresholds(updated)}
                 />
diff --git a/src/app/admin/onboarding/page.tsx b/src/app/admin/onboarding/page.tsx
index 4bfa01b..b75c9b8 100644
--- a/src/app/admin/onboarding/page.tsx
+++ b/src/app/admin/onboarding/page.tsx
@@ -7,9 +7,14 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
-import { Plus, PencilSimple, TrashSimple, ArrowUp, ArrowDown } from '@phosphor-icons/react'
+import { Plus } from '@phosphor-icons/react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import {
+  OnboardingFieldForm,
+  EMPTY_FIELD,
+} from '@/components/admin/onboarding/onboarding-field-form'
+import { OnboardingFieldItem } from '@/components/admin/onboarding/onboarding-field-item'
 import {
   getOnboardingFields,
   createOnboardingField,
@@ -17,41 +22,10 @@ import {
   deleteOnboardingField,
   reorderOnboardingFields,
 } from '@/lib/api/client'
-import { cn } from '@/lib/utils'
-import type {
-  OnboardingField,
-  OnboardingFieldType,
-  CreateOnboardingFieldInput,
-} from '@/lib/api/types'
+import type { OnboardingField, CreateOnboardingFieldInput } from '@/lib/api/types'
+import type { EditingField } from '@/components/admin/onboarding/onboarding-field-form'
 import { useAuth } from '@/hooks/use-auth'
 
-const FIELD_TYPE_LABELS: Record<OnboardingFieldType, string> = {
-  age_confirmation: 'Age Confirmation',
-  tos_acceptance: 'ToS Acceptance',
-  newsletter_email: 'Newsletter Email',
-  custom_text: 'Text Input',
-  custom_select: 'Dropdown Select',
-  custom_checkbox: 'Checkbox',
-}
-
-interface EditingField {
-  id: string | null
-  fieldType: OnboardingFieldType
-  label: string
-  description: string
-  isMandatory: boolean
-  config: Record<string, unknown> | null
-}
-
-const EMPTY_FIELD: EditingField = {
-  id: null,
-  fieldType: 'custom_text',
-  label: '',
-  description: '',
-  isMandatory: true,
-  config: null,
-}
-
 export default function AdminOnboardingPage() {
   const { getAccessToken } = useAuth()
   const [fields, setFields] = useState<OnboardingField[]>([])
@@ -194,102 +168,17 @@ export default function AdminOnboardingPage() {
 
         {actionError && <ErrorAlert message={actionError} onDismiss={() => setActionError(null)} />}
 
-        {/* Edit/Create form */}
         {editing && (
-          <div className="rounded-lg border border-border bg-card p-4">
-            <h2 className="mb-4 text-lg font-semibold text-foreground">
-              {editing.id ? 'Edit Field' : 'New Onboarding Field'}
-            </h2>
-            <div className="space-y-4">
-              {!editing.id && (
-                <div>
-                  <label htmlFor="field-type" className="block text-sm font-medium text-foreground">
-                    Field Type
-                  </label>
-                  <select
-                    id="field-type"
-                    value={editing.fieldType}
-                    onChange={(e) =>
-                      setEditing({ ...editing, fieldType: e.target.value as OnboardingFieldType })
-                    }
-                    className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                  >
-                    {Object.entries(FIELD_TYPE_LABELS).map(([value, label]) => (
-                      <option key={value} value={value}>
-                        {label}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-              )}
-              <div>
-                <label htmlFor="field-label" className="block text-sm font-medium text-foreground">
-                  Label
-                </label>
-                <input
-                  id="field-label"
-                  type="text"
-                  value={editing.label}
-                  onChange={(e) => setEditing({ ...editing, label: e.target.value })}
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                  placeholder="e.g., Accept our community rules"
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="field-description"
-                  className="block text-sm font-medium text-foreground"
-                >
-                  Description (optional)
-                </label>
-                <textarea
-                  id="field-description"
-                  value={editing.description}
-                  onChange={(e) => setEditing({ ...editing, description: e.target.value })}
-                  rows={2}
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                  placeholder="Additional context or instructions for users"
-                />
-              </div>
-              <div className="flex items-center gap-2">
-                <input
-                  id="field-mandatory"
-                  type="checkbox"
-                  checked={editing.isMandatory}
-                  onChange={(e) => setEditing({ ...editing, isMandatory: e.target.checked })}
-                  className="h-4 w-4 rounded border-border"
-                />
-                <label htmlFor="field-mandatory" className="text-sm text-foreground">
-                  Required (users must complete this field before posting)
-                </label>
-              </div>
-              {error && (
-                <p role="alert" className="text-sm text-destructive">
-                  {error}
-                </p>
-              )}
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={() => void handleSave()}
-                  disabled={saving}
-                  className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-                >
-                  {saving ? 'Saving...' : 'Save'}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setEditing(null)}
-                  className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          </div>
+          <OnboardingFieldForm
+            editing={editing}
+            saving={saving}
+            error={error}
+            onChange={setEditing}
+            onSave={() => void handleSave()}
+            onCancel={() => setEditing(null)}
+          />
         )}
 
-        {/* Field list */}
         {loadError && (
           <ErrorAlert message={loadError} variant="page" onRetry={() => void fetchFields()} />
         )}
@@ -306,68 +195,16 @@ export default function AdminOnboardingPage() {
         {!loading && fields.length > 0 && (
           <div className="space-y-2">
             {fields.map((field, index) => (
-              <div
+              <OnboardingFieldItem
                 key={field.id}
-                className="flex items-center justify-between rounded-md border border-border bg-card p-3"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2">
-                    <p className="text-sm font-medium text-foreground">{field.label}</p>
-                    <span
-                      className={cn(
-                        'rounded-full px-2 py-0.5 text-xs font-medium',
-                        'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
-                      )}
-                    >
-                      {FIELD_TYPE_LABELS[field.fieldType]}
-                    </span>
-                    {field.isMandatory && (
-                      <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400">
-                        Required
-                      </span>
-                    )}
-                  </div>
-                  {field.description && (
-                    <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-                  )}
-                </div>
-                <div className="flex items-center gap-1">
-                  <button
-                    type="button"
-                    onClick={() => void handleMoveUp(index)}
-                    disabled={index === 0}
-                    className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-30"
-                    aria-label={`Move ${field.label} up`}
-                  >
-                    <ArrowUp size={16} aria-hidden="true" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => void handleMoveDown(index)}
-                    disabled={index === fields.length - 1}
-                    className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-30"
-                    aria-label={`Move ${field.label} down`}
-                  >
-                    <ArrowDown size={16} aria-hidden="true" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => handleEdit(field)}
-                    className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                    aria-label={`Edit ${field.label}`}
-                  >
-                    <PencilSimple size={16} aria-hidden="true" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => void handleDelete(field.id)}
-                    className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
-                    aria-label={`Delete ${field.label}`}
-                  >
-                    <TrashSimple size={16} aria-hidden="true" />
-                  </button>
-                </div>
-              </div>
+                field={field}
+                index={index}
+                totalCount={fields.length}
+                onMoveUp={(i) => void handleMoveUp(i)}
+                onMoveDown={(i) => void handleMoveDown(i)}
+                onEdit={handleEdit}
+                onDelete={(id) => void handleDelete(id)}
+              />
             ))}
           </div>
         )}
diff --git a/src/app/admin/plugins/page.tsx b/src/app/admin/plugins/page.tsx
index 8583647..6f1ad0d 100644
--- a/src/app/admin/plugins/page.tsx
+++ b/src/app/admin/plugins/page.tsx
@@ -9,188 +9,15 @@
 'use client'
 
 import { useState, useEffect, useCallback } from 'react'
-import { Gear, Trash, WarningCircle, X } from '@phosphor-icons/react'
+import { WarningCircle } from '@phosphor-icons/react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import { PluginCard } from '@/components/admin/plugins/plugin-card'
+import { PluginSettingsModal } from '@/components/admin/plugins/plugin-settings-modal'
 import { getPlugins, togglePlugin, updatePluginSettings, uninstallPlugin } from '@/lib/api/client'
-import { cn } from '@/lib/utils'
-import type { Plugin, PluginSettingsSchema } from '@/lib/api/types'
+import type { Plugin } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
-const SOURCE_STYLES: Record<string, string> = {
-  core: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',
-  official: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
-  community: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
-  experimental: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
-}
-
-const SOURCE_LABELS: Record<string, string> = {
-  core: 'Core',
-  official: 'Official',
-  community: 'Community',
-  experimental: 'Experimental',
-}
-
-function PluginSettingsModal({
-  plugin,
-  onClose,
-  onSave,
-}: {
-  plugin: Plugin
-  onClose: () => void
-  onSave: (settings: Record<string, boolean | string | number>) => void
-}) {
-  const [values, setValues] = useState<Record<string, boolean | string | number>>(() => ({
-    ...plugin.settings,
-  }))
-
-  const handleChange = (key: string, value: boolean | string | number) => {
-    setValues((prev) => ({ ...prev, [key]: value }))
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    onSave(values)
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-label={`${plugin.displayName} settings`}
-    >
-      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground">{plugin.displayName} Settings</h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
-            aria-label="Close settings"
-          >
-            <X size={18} aria-hidden="true" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {Object.entries(plugin.settingsSchema).map(([key, schema]) => (
-            <SettingsField
-              key={key}
-              fieldKey={key}
-              schema={schema}
-              value={values[key] ?? schema.default}
-              onChange={(val) => handleChange(key, val)}
-            />
-          ))}
-
-          <div className="flex justify-end gap-2 pt-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-            >
-              Save
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
-
-function SettingsField({
-  fieldKey,
-  schema,
-  value,
-  onChange,
-}: {
-  fieldKey: string
-  schema: PluginSettingsSchema[string]
-  value: boolean | string | number
-  onChange: (value: boolean | string | number) => void
-}) {
-  if (schema.type === 'boolean') {
-    return (
-      <label className="flex items-center justify-between gap-3">
-        <div>
-          <span className="text-sm font-medium text-foreground">{schema.label}</span>
-          {schema.description && (
-            <p className="text-xs text-muted-foreground">{schema.description}</p>
-          )}
-        </div>
-        <input
-          type="checkbox"
-          checked={value as boolean}
-          onChange={(e) => onChange(e.target.checked)}
-          className="h-4 w-4 rounded border-border"
-        />
-      </label>
-    )
-  }
-
-  if (schema.type === 'select') {
-    return (
-      <label className="block">
-        <span className="text-sm font-medium text-foreground">{schema.label}</span>
-        {schema.description && (
-          <p className="text-xs text-muted-foreground">{schema.description}</p>
-        )}
-        <select
-          value={value as string}
-          onChange={(e) => onChange(e.target.value)}
-          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground"
-        >
-          {schema.options?.map((opt) => (
-            <option key={opt} value={opt}>
-              {opt || '(none)'}
-            </option>
-          ))}
-        </select>
-      </label>
-    )
-  }
-
-  if (schema.type === 'number') {
-    return (
-      <label className="block">
-        <span className="text-sm font-medium text-foreground">{schema.label}</span>
-        {schema.description && (
-          <p className="text-xs text-muted-foreground">{schema.description}</p>
-        )}
-        <input
-          type="number"
-          value={value as number}
-          onChange={(e) => onChange(Number(e.target.value))}
-          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground"
-          name={fieldKey}
-        />
-      </label>
-    )
-  }
-
-  // string
-  return (
-    <label className="block">
-      <span className="text-sm font-medium text-foreground">{schema.label}</span>
-      {schema.description && <p className="text-xs text-muted-foreground">{schema.description}</p>}
-      <input
-        type="text"
-        value={value as string}
-        onChange={(e) => onChange(e.target.value)}
-        className="mt-1 w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground"
-        name={fieldKey}
-      />
-    </label>
-  )
-}
-
 export default function AdminPluginsPage() {
   const { getAccessToken } = useAuth()
   const [plugins, setPlugins] = useState<Plugin[]>([])
@@ -305,86 +132,14 @@ export default function AdminPluginsPage() {
         {!loading && plugins.length > 0 && (
           <div className="space-y-3">
             {plugins.map((plugin) => (
-              <article
+              <PluginCard
                 key={plugin.id}
-                className={cn(
-                  'rounded-lg border border-border bg-card p-4',
-                  !plugin.enabled && 'opacity-60'
-                )}
-              >
-                <div className="flex items-start justify-between gap-4">
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <h2 className="text-sm font-semibold text-foreground">
-                        {plugin.displayName}
-                      </h2>
-                      <span className="text-xs text-muted-foreground">v{plugin.version}</span>
-                      <span
-                        className={cn(
-                          'rounded-full px-2 py-0.5 text-xs font-medium',
-                          SOURCE_STYLES[plugin.source] ?? SOURCE_STYLES.community
-                        )}
-                      >
-                        {SOURCE_LABELS[plugin.source] ?? plugin.source}
-                      </span>
-                    </div>
-                    <p className="mt-1 text-xs text-muted-foreground">{plugin.description}</p>
-                    {plugin.dependencies.length > 0 && (
-                      <p className="mt-1 text-xs text-muted-foreground">
-                        Depends on:{' '}
-                        {plugin.dependencies
-                          .map((depId) => {
-                            const dep = plugins.find((p) => p.id === depId)
-                            return dep?.displayName ?? depId
-                          })
-                          .join(', ')}
-                      </p>
-                    )}
-                  </div>
-
-                  <div className="flex shrink-0 items-center gap-2">
-                    {Object.keys(plugin.settingsSchema).length > 0 && (
-                      <button
-                        type="button"
-                        onClick={() => setSettingsPlugin(plugin)}
-                        className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:text-foreground"
-                        aria-label={`${plugin.displayName} settings`}
-                      >
-                        <Gear size={16} aria-hidden="true" />
-                      </button>
-                    )}
-                    {plugin.source !== 'core' && (
-                      <button
-                        type="button"
-                        onClick={() => void handleUninstall(plugin)}
-                        className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:text-destructive"
-                        aria-label={`Uninstall ${plugin.displayName}`}
-                      >
-                        <Trash size={16} aria-hidden="true" />
-                      </button>
-                    )}
-                    <button
-                      type="button"
-                      role="switch"
-                      aria-checked={plugin.enabled}
-                      aria-label={`${plugin.enabled ? 'Disable' : 'Enable'} ${plugin.displayName}`}
-                      onClick={() => void handleToggle(plugin)}
-                      className={cn(
-                        'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
-                        plugin.enabled ? 'bg-primary' : 'bg-muted'
-                      )}
-                    >
-                      <span
-                        aria-hidden="true"
-                        className={cn(
-                          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition-transform',
-                          plugin.enabled ? 'translate-x-5' : 'translate-x-0'
-                        )}
-                      />
-                    </button>
-                  </div>
-                </div>
-              </article>
+                plugin={plugin}
+                allPlugins={plugins}
+                onOpenSettings={setSettingsPlugin}
+                onToggle={(p) => void handleToggle(p)}
+                onUninstall={(p) => void handleUninstall(p)}
+              />
             ))}
           </div>
         )}
@@ -427,7 +182,6 @@ export default function AdminPluginsPage() {
           </div>
         )}
 
-        {/* Settings Modal */}
         {settingsPlugin && (
           <PluginSettingsModal
             plugin={settingsPlugin}
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index bac1972..f2391ae 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -7,331 +7,20 @@
 
 'use client'
 
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import { CommunitySettingsForm } from '@/components/admin/settings/community-settings-form'
+import { PdsTrustSection } from '@/components/admin/settings/pds-trust-section'
 import {
   getCommunitySettings,
   updateCommunitySettings,
   getPdsTrustFactors,
   updatePdsTrustFactor,
 } from '@/lib/api/client'
-import { cn } from '@/lib/utils'
-import type { CommunitySettings, MaturityRating, PdsTrustFactor } from '@/lib/api/types'
+import type { CommunitySettings, PdsTrustFactor } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
-// --- Confirm Dialog ---
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-}: {
-  open: boolean
-  title: string
-  message: string
-  onConfirm: () => void
-  onCancel: () => void
-}) {
-  const confirmRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (open) {
-      confirmRef.current?.focus()
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onCancel()
-    }
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onCancel])
-
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="confirm-dialog-title"
-      aria-describedby="confirm-dialog-message"
-    >
-      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
-        <h3 id="confirm-dialog-title" className="text-lg font-semibold text-foreground">
-          {title}
-        </h3>
-        <p id="confirm-dialog-message" className="mt-2 text-sm text-muted-foreground">
-          {message}
-        </p>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-          >
-            Cancel
-          </button>
-          <button
-            ref={confirmRef}
-            type="button"
-            onClick={onConfirm}
-            className="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
-          >
-            Confirm
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// --- Add/Edit PDS Override Dialog ---
-function PdsOverrideDialog({
-  open,
-  mode,
-  initialHostname,
-  initialTrustFactor,
-  onClose,
-  onSubmit,
-}: {
-  open: boolean
-  mode: 'add' | 'edit'
-  initialHostname: string
-  initialTrustFactor: number
-  onClose: () => void
-  onSubmit: (hostname: string, trustFactor: number) => void
-}) {
-  const [hostname, setHostname] = useState(initialHostname)
-  const [trustFactor, setTrustFactor] = useState(initialTrustFactor)
-  const hostnameRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (open && mode === 'add') {
-      hostnameRef.current?.focus()
-    }
-  }, [open, mode])
-
-  useEffect(() => {
-    if (!open) return
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onClose])
-
-  if (!open) return null
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (mode === 'add' && !hostname.trim()) return
-    onSubmit(hostname.trim(), trustFactor)
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-label={mode === 'add' ? 'Add PDS trust override' : 'Edit PDS trust factor'}
-    >
-      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
-        <h3 className="text-lg font-semibold text-foreground">
-          {mode === 'add' ? 'Add PDS Override' : 'Edit Trust Factor'}
-        </h3>
-        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
-          <div>
-            <label htmlFor="pds-hostname" className="block text-sm font-medium text-foreground">
-              PDS Hostname
-            </label>
-            <input
-              ref={hostnameRef}
-              id="pds-hostname"
-              type="text"
-              value={hostname}
-              onChange={(e) => setHostname(e.target.value)}
-              disabled={mode === 'edit'}
-              placeholder="my-pds.example.org"
-              className={cn(
-                'mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-                mode === 'edit' && 'cursor-not-allowed opacity-60'
-              )}
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="pds-trust-factor" className="block text-sm font-medium text-foreground">
-              Trust Factor: {trustFactor.toFixed(1)}
-            </label>
-            <input
-              id="pds-trust-factor"
-              type="range"
-              min="0"
-              max="1"
-              step="0.1"
-              value={trustFactor}
-              onChange={(e) => setTrustFactor(parseFloat(e.target.value))}
-              className="mt-1 w-full"
-            />
-            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
-              <span>0.0 (untrusted)</span>
-              <span>1.0 (fully trusted)</span>
-            </div>
-          </div>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-            >
-              {mode === 'add' ? 'Add' : 'Save'}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
-
-// --- PDS Provider Trust Section ---
-function PdsTrustSection({
-  providers,
-  onUpdate,
-  onRemove,
-}: {
-  providers: PdsTrustFactor[]
-  onUpdate: (pdsHost: string, trustFactor: number) => void
-  onRemove: (pdsHost: string) => void
-}) {
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [dialogKey, setDialogKey] = useState(0)
-  const [dialogMode, setDialogMode] = useState<'add' | 'edit'>('add')
-  const [editHostname, setEditHostname] = useState('')
-  const [editTrustFactor, setEditTrustFactor] = useState(1.0)
-  const [confirmRemove, setConfirmRemove] = useState<string | null>(null)
-
-  const handleAdd = () => {
-    setDialogMode('add')
-    setEditHostname('')
-    setEditTrustFactor(1.0)
-    setDialogKey((k) => k + 1)
-    setDialogOpen(true)
-  }
-
-  const handleEdit = (provider: PdsTrustFactor) => {
-    setDialogMode('edit')
-    setEditHostname(provider.pdsHost)
-    setEditTrustFactor(provider.trustFactor)
-    setDialogKey((k) => k + 1)
-    setDialogOpen(true)
-  }
-
-  const handleDialogSubmit = (hostname: string, trustFactor: number) => {
-    onUpdate(hostname, trustFactor)
-    setDialogOpen(false)
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-lg font-semibold text-foreground">PDS Provider Trust</h2>
-          <p className="mt-0.5 text-sm text-muted-foreground">
-            Accounts from providers with higher trust factors earn reputation faster. Override the
-            default if you trust a specific self-hosted PDS provider.
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={handleAdd}
-          aria-label="Add override"
-          className="shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-        >
-          Add Override
-        </button>
-      </div>
-
-      <div className="space-y-2">
-        {providers.map((provider) => (
-          <div
-            key={provider.pdsHost}
-            className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-3"
-          >
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-foreground">{provider.pdsHost}</span>
-                {provider.isDefault && (
-                  <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
-                    Default
-                  </span>
-                )}
-              </div>
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                Trust factor: {provider.trustFactor.toFixed(1)}
-              </p>
-            </div>
-            {!provider.isDefault && (
-              <div className="flex shrink-0 gap-2">
-                <button
-                  type="button"
-                  onClick={() => handleEdit(provider)}
-                  aria-label="Edit"
-                  className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-                >
-                  Edit
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setConfirmRemove(provider.pdsHost)}
-                  aria-label="Remove"
-                  className="rounded-md border border-border px-3 py-1.5 text-sm text-destructive transition-colors hover:bg-destructive/10"
-                >
-                  Remove
-                </button>
-              </div>
-            )}
-          </div>
-        ))}
-        {providers.length === 0 && (
-          <p className="py-4 text-center text-muted-foreground">No PDS providers configured.</p>
-        )}
-      </div>
-
-      <PdsOverrideDialog
-        key={dialogKey}
-        open={dialogOpen}
-        mode={dialogMode}
-        initialHostname={editHostname}
-        initialTrustFactor={editTrustFactor}
-        onClose={() => setDialogOpen(false)}
-        onSubmit={handleDialogSubmit}
-      />
-
-      <ConfirmDialog
-        open={confirmRemove !== null}
-        title="Remove PDS override"
-        message={`Are you sure you want to remove the trust override for ${confirmRemove ?? ''}? The default trust factor will apply.`}
-        onConfirm={() => {
-          if (confirmRemove) onRemove(confirmRemove)
-          setConfirmRemove(null)
-        }}
-        onCancel={() => setConfirmRemove(null)}
-      />
-    </div>
-  )
-}
-
 export default function AdminSettingsPage() {
   const { getAccessToken } = useAuth()
   const [settings, setSettings] = useState<CommunitySettings | null>(null)
@@ -404,7 +93,6 @@ export default function AdminSettingsPage() {
 
   const handlePdsRemove = async (pdsHost: string) => {
     setPdsError(null)
-    // Removing an override reverts to default -- for the UI we just remove it from the list
     setPdsProviders((prev) => prev.filter((p) => p.pdsHost !== pdsHost))
   }
 
@@ -420,140 +108,16 @@ export default function AdminSettingsPage() {
         )}
 
         {settings && (
-          <div className="max-w-lg space-y-6">
-            <div>
-              <label htmlFor="settings-name" className="block text-sm font-medium text-foreground">
-                Community Name
-              </label>
-              <input
-                id="settings-name"
-                type="text"
-                value={settings.communityName}
-                onChange={(e) => setSettings({ ...settings, communityName: e.target.value })}
-                className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-              />
-            </div>
-
-            <div>
-              <label htmlFor="settings-desc" className="block text-sm font-medium text-foreground">
-                Description
-              </label>
-              <textarea
-                id="settings-desc"
-                value={settings.communityDescription ?? ''}
-                onChange={(e) =>
-                  setSettings({ ...settings, communityDescription: e.target.value || null })
-                }
-                rows={3}
-                className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="settings-maturity"
-                className="block text-sm font-medium text-foreground"
-              >
-                Community Maturity Rating
-              </label>
-              <select
-                id="settings-maturity"
-                value={settings.maturityRating}
-                onChange={(e) =>
-                  setSettings({ ...settings, maturityRating: e.target.value as MaturityRating })
-                }
-                className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-              >
-                <option value="safe">Safe (default)</option>
-                <option value="mature">Mature</option>
-                <option value="adult">Adult</option>
-              </select>
-              <p className="mt-1 text-xs text-muted-foreground">
-                Changing to Mature or Adult affects global aggregator visibility.
-              </p>
-            </div>
-
-            <div>
-              <label
-                htmlFor="settings-reactions"
-                className="block text-sm font-medium text-foreground"
-              >
-                Reaction Set
-              </label>
-              <input
-                id="settings-reactions"
-                type="text"
-                value={settings.reactionSet.join(', ')}
-                onChange={(e) =>
-                  setSettings({
-                    ...settings,
-                    reactionSet: e.target.value
-                      .split(',')
-                      .map((s) => s.trim())
-                      .filter(Boolean),
-                  })
-                }
-                className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-              />
-              <p className="mt-1 text-xs text-muted-foreground">
-                Comma-separated list of reaction types available in your community.
-              </p>
-            </div>
-
-            <fieldset className="space-y-4">
-              <legend className="text-sm font-medium text-foreground">Branding</legend>
-              <div>
-                <label
-                  htmlFor="settings-primary-color"
-                  className="block text-sm text-muted-foreground"
-                >
-                  Primary Color
-                </label>
-                <input
-                  id="settings-primary-color"
-                  type="text"
-                  value={settings.primaryColor ?? ''}
-                  onChange={(e) =>
-                    setSettings({ ...settings, primaryColor: e.target.value || null })
-                  }
-                  placeholder="#31748f"
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="settings-accent-color"
-                  className="block text-sm text-muted-foreground"
-                >
-                  Accent Color
-                </label>
-                <input
-                  id="settings-accent-color"
-                  type="text"
-                  value={settings.accentColor ?? ''}
-                  onChange={(e) =>
-                    setSettings({ ...settings, accentColor: e.target.value || null })
-                  }
-                  placeholder="#c4a7e7"
-                  className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-                />
-              </div>
-            </fieldset>
-
-            {saveError && <ErrorAlert message={saveError} onDismiss={() => setSaveError(null)} />}
-
-            <button
-              type="button"
-              onClick={() => void handleSave()}
-              disabled={saving}
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
-            >
-              {saving ? 'Saving...' : 'Save Settings'}
-            </button>
-          </div>
+          <CommunitySettingsForm
+            settings={settings}
+            onChange={setSettings}
+            onSave={() => void handleSave()}
+            saving={saving}
+            saveError={saveError}
+            onDismissError={() => setSaveError(null)}
+          />
         )}
 
-        {/* PDS Provider Trust section */}
         {!loading && !loadError && (
           <>
             <hr className="border-border" />
diff --git a/src/app/admin/sybil-detection/page.tsx b/src/app/admin/sybil-detection/page.tsx
index 935364f..ed534d9 100644
--- a/src/app/admin/sybil-detection/page.tsx
+++ b/src/app/admin/sybil-detection/page.tsx
@@ -7,10 +7,14 @@
 
 'use client'
 
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { ArrowLeft } from '@phosphor-icons/react'
+import { useState, useEffect, useCallback } from 'react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { TrustGraphStatusCard } from '@/components/admin/sybil/trust-graph-status-card'
+import { SybilClusterListView } from '@/components/admin/sybil/cluster-list-view'
+import { SybilClusterDetailView } from '@/components/admin/sybil/cluster-detail-view'
+import { BehavioralFlagsSection } from '@/components/admin/sybil/behavioral-flags-section'
 import {
   getSybilClusters,
   getSybilClusterDetail,
@@ -20,7 +24,6 @@ import {
   getBehavioralFlags,
   updateBehavioralFlag,
 } from '@/lib/api/client'
-import { cn } from '@/lib/utils'
 import type {
   SybilCluster,
   SybilClusterDetail,
@@ -30,375 +33,6 @@ import type {
 } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
-function formatNumber(n: number): string {
-  return n.toLocaleString('en-US')
-}
-
-function formatRelativeTime(dateStr: string): string {
-  const diff = Date.now() - new Date(dateStr).getTime()
-  const minutes = Math.floor(diff / 60_000)
-  if (minutes < 60) return `${minutes}m ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours}h ago`
-  const days = Math.floor(hours / 24)
-  return `${days}d ago`
-}
-
-// --- Confirm Dialog ---
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-}: {
-  open: boolean
-  title: string
-  message: string
-  onConfirm: () => void
-  onCancel: () => void
-}) {
-  const confirmRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (open) {
-      confirmRef.current?.focus()
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onCancel()
-    }
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onCancel])
-
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="confirm-dialog-title"
-      aria-describedby="confirm-dialog-message"
-    >
-      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
-        <h3 id="confirm-dialog-title" className="text-lg font-semibold text-foreground">
-          {title}
-        </h3>
-        <p id="confirm-dialog-message" className="mt-2 text-sm text-muted-foreground">
-          {message}
-        </p>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-          >
-            Cancel
-          </button>
-          <button
-            ref={confirmRef}
-            type="button"
-            onClick={onConfirm}
-            className="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
-          >
-            Confirm
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// --- Trust Graph Status Card ---
-function TrustGraphStatusCard({
-  status,
-  onRecompute,
-  recomputing,
-}: {
-  status: TrustGraphStatus
-  onRecompute: () => void
-  recomputing: boolean
-}) {
-  return (
-    <div className="rounded-lg border border-border bg-card p-4">
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <p className="text-sm text-muted-foreground">
-            {status.lastComputedAt
-              ? `Last computed: ${formatRelativeTime(status.lastComputedAt)}`
-              : 'Never computed'}
-            {' | '}
-            <span>{formatNumber(status.totalNodes)} nodes</span>
-            {' | '}
-            <span>{formatNumber(status.totalEdges)} edges</span>
-            {' | '}
-            <span>{status.clustersFlagged} clusters flagged</span>
-          </p>
-        </div>
-        <button
-          type="button"
-          onClick={onRecompute}
-          disabled={recomputing}
-          aria-label="Recompute now"
-          className={cn(
-            'rounded-md px-4 py-2 text-sm font-medium transition-colors',
-            recomputing
-              ? 'cursor-not-allowed bg-muted text-muted-foreground'
-              : 'bg-primary text-primary-foreground hover:bg-primary/90'
-          )}
-        >
-          {recomputing ? 'Recomputing...' : 'Recompute Now'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
-// --- Suspicion Ratio Bar ---
-function SuspicionBar({ ratio }: { ratio: number }) {
-  const percent = Math.round(ratio * 100)
-  return (
-    <div className="flex items-center gap-2">
-      <div className="h-2 w-20 overflow-hidden rounded-full bg-muted" aria-hidden="true">
-        <div
-          className={cn(
-            'h-full rounded-full',
-            percent >= 70 ? 'bg-destructive' : percent >= 40 ? 'bg-yellow-500' : 'bg-green-500'
-          )}
-          style={{ width: `${percent}%` }}
-        />
-      </div>
-      <span className="text-xs text-muted-foreground">{percent}%</span>
-    </div>
-  )
-}
-
-// --- Status Badge ---
-function StatusBadge({ status }: { status: string }) {
-  const colors: Record<string, string> = {
-    flagged: 'bg-destructive/10 text-destructive',
-    monitoring: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400',
-    dismissed: 'bg-muted text-muted-foreground',
-    banned: 'bg-destructive text-destructive-foreground',
-    pending: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400',
-    action_taken: 'bg-green-500/10 text-green-700 dark:text-green-400',
-  }
-  return (
-    <span
-      className={cn(
-        'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
-        colors[status] ?? 'bg-muted text-muted-foreground'
-      )}
-    >
-      {status}
-    </span>
-  )
-}
-
-// --- Cluster List View ---
-function ClusterListView({
-  clusters,
-  onViewDetail,
-}: {
-  clusters: SybilCluster[]
-  onViewDetail: (id: number) => void
-}) {
-  if (clusters.length === 0) {
-    return <p className="py-8 text-center text-muted-foreground">No clusters found.</p>
-  }
-
-  return (
-    <div className="space-y-2">
-      {clusters.map((cluster) => (
-        <article key={cluster.id} className="rounded-lg border border-border bg-card p-4">
-          <div className="flex items-center justify-between gap-4">
-            <div className="min-w-0 flex-1">
-              <div className="flex flex-wrap items-center gap-3">
-                <span className="text-sm font-medium text-foreground">
-                  {cluster.memberCount} members
-                </span>
-                <StatusBadge status={cluster.status} />
-                <SuspicionBar ratio={cluster.suspicionRatio} />
-              </div>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {cluster.internalEdgeCount} internal / {cluster.externalEdgeCount} external
-                connections &middot; Detected {formatRelativeTime(cluster.detectedAt)}
-              </p>
-            </div>
-            <button
-              type="button"
-              onClick={() => onViewDetail(cluster.id)}
-              aria-label="View details"
-              className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-            >
-              View details
-            </button>
-          </div>
-        </article>
-      ))}
-    </div>
-  )
-}
-
-// --- Cluster Detail View ---
-function ClusterDetailView({
-  detail,
-  onBack,
-  onAction,
-}: {
-  detail: SybilClusterDetail
-  onBack: () => void
-  onAction: (status: SybilClusterStatus) => void
-}) {
-  return (
-    <div className="space-y-4">
-      <button
-        type="button"
-        onClick={onBack}
-        className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
-        aria-label="Back to cluster list"
-      >
-        <ArrowLeft size={14} aria-hidden="true" />
-        Back to clusters
-      </button>
-
-      <div className="rounded-lg border border-border bg-card p-4">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-semibold text-foreground">Cluster #{detail.id}</h3>
-            <div className="mt-1 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
-              <span>{detail.memberCount} members</span>
-              <StatusBadge status={detail.status} />
-              <SuspicionBar ratio={detail.suspicionRatio} />
-            </div>
-          </div>
-          <div className="flex gap-2">
-            {detail.status !== 'monitoring' && (
-              <button
-                type="button"
-                onClick={() => onAction('monitoring')}
-                className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-              >
-                Monitor
-              </button>
-            )}
-            {detail.status !== 'dismissed' && (
-              <button
-                type="button"
-                onClick={() => onAction('dismissed')}
-                aria-label="Dismiss cluster"
-                className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-              >
-                Dismiss
-              </button>
-            )}
-            {detail.status !== 'banned' && (
-              <button
-                type="button"
-                onClick={() => onAction('banned')}
-                aria-label="Ban cluster"
-                className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
-              >
-                Ban
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Member table */}
-      <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead>
-            <tr className="border-b border-border text-left">
-              <th className="pb-2 pr-4 font-medium text-muted-foreground">Handle</th>
-              <th className="pb-2 pr-4 font-medium text-muted-foreground">Role</th>
-              <th className="pb-2 pr-4 font-medium text-muted-foreground">Trust</th>
-              <th className="pb-2 pr-4 font-medium text-muted-foreground">Reputation</th>
-              <th className="pb-2 pr-4 font-medium text-muted-foreground">Account Age</th>
-              <th className="pb-2 font-medium text-muted-foreground">Communities</th>
-            </tr>
-          </thead>
-          <tbody>
-            {detail.members.map((member) => (
-              <tr key={member.did} className="border-b border-border last:border-0">
-                <td className="py-2 pr-4">
-                  <div>
-                    <p className="font-medium text-foreground">{member.handle}</p>
-                    <p className="text-xs text-muted-foreground">{member.displayName}</p>
-                  </div>
-                </td>
-                <td className="py-2 pr-4">
-                  <StatusBadge status={member.roleInCluster} />
-                </td>
-                <td className="py-2 pr-4 text-muted-foreground">
-                  {(member.trustScore * 100).toFixed(0)}%
-                </td>
-                <td className="py-2 pr-4 text-muted-foreground">
-                  {(member.reputationScore * 100).toFixed(0)}%
-                </td>
-                <td className="py-2 pr-4 text-muted-foreground">{member.accountAge}</td>
-                <td className="py-2 text-muted-foreground">{member.communitiesActiveIn}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}
-
-// --- Behavioral Flags Section ---
-function BehavioralFlagsSection({
-  flags,
-  onDismiss,
-}: {
-  flags: BehavioralFlag[]
-  onDismiss: (id: number) => void
-}) {
-  return (
-    <div className="space-y-3">
-      <h2 className="text-lg font-semibold text-foreground">Behavioral Flags</h2>
-      {flags.length === 0 && (
-        <p className="py-4 text-center text-muted-foreground">No behavioral flags.</p>
-      )}
-      {flags.map((flag) => (
-        <article key={flag.id} className="rounded-lg border border-border bg-card p-4">
-          <div className="flex items-start justify-between gap-3">
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-foreground">{flag.flagType}</span>
-                <StatusBadge status={flag.status} />
-              </div>
-              <p className="mt-1 text-sm text-muted-foreground">{flag.details}</p>
-              <p className="mt-1 text-xs text-muted-foreground">
-                {flag.affectedDids.length} affected accounts &middot; Detected{' '}
-                {formatRelativeTime(flag.detectedAt)}
-              </p>
-            </div>
-            {flag.status === 'pending' && (
-              <button
-                type="button"
-                onClick={() => onDismiss(flag.id)}
-                aria-label="Dismiss flag"
-                className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
-              >
-                Dismiss
-              </button>
-            )}
-          </div>
-        </article>
-      ))}
-    </div>
-  )
-}
-
-// --- Main Page ---
 export default function AdminSybilDetectionPage() {
   const { getAccessToken } = useAuth()
   const [clusters, setClusters] = useState<SybilCluster[]>([])
@@ -518,7 +152,6 @@ export default function AdminSybilDetectionPage() {
 
         {!loading && !loadError && (
           <>
-            {/* Trust Graph Status */}
             {graphStatus && (
               <TrustGraphStatusCard
                 status={graphStatus}
@@ -527,9 +160,8 @@ export default function AdminSybilDetectionPage() {
               />
             )}
 
-            {/* Cluster List or Detail */}
             {selectedDetail ? (
-              <ClusterDetailView
+              <SybilClusterDetailView
                 detail={selectedDetail}
                 onBack={() => setSelectedDetail(null)}
                 onAction={handleClusterAction}
@@ -560,14 +192,13 @@ export default function AdminSybilDetectionPage() {
                     </select>
                   </div>
                 </div>
-                <ClusterListView
+                <SybilClusterListView
                   clusters={filteredClusters}
                   onViewDetail={(id) => void handleViewDetail(id)}
                 />
               </div>
             )}
 
-            {/* Behavioral Flags */}
             {!selectedDetail && (
               <BehavioralFlagsSection
                 flags={flags}
@@ -577,11 +208,12 @@ export default function AdminSybilDetectionPage() {
           </>
         )}
 
-        {/* Confirm Dialog */}
         <ConfirmDialog
           open={confirmAction !== null}
           title={confirmAction?.title ?? ''}
-          message={confirmAction?.message ?? ''}
+          description={confirmAction?.message ?? ''}
+          confirmLabel="Confirm"
+          variant="destructive"
           onConfirm={() => confirmAction?.onConfirm()}
           onCancel={() => setConfirmAction(null)}
         />
diff --git a/src/app/admin/trust-seeds/page.tsx b/src/app/admin/trust-seeds/page.tsx
index 8afaba3..c5e2ce3 100644
--- a/src/app/admin/trust-seeds/page.tsx
+++ b/src/app/admin/trust-seeds/page.tsx
@@ -7,206 +7,16 @@
 
 'use client'
 
-import { useState, useEffect, useCallback, useRef } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { AdminLayout } from '@/components/admin/admin-layout'
 import { ErrorAlert } from '@/components/error-alert'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { AddSeedDialog } from '@/components/admin/trust-seeds/add-seed-dialog'
+import { TrustSeedCard } from '@/components/admin/trust-seeds/trust-seed-card'
 import { getTrustSeeds, createTrustSeed, deleteTrustSeed } from '@/lib/api/client'
-import { cn } from '@/lib/utils'
 import type { TrustSeed } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
-function formatDate(dateStr: string) {
-  return new Date(dateStr).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
-
-// --- Confirm Dialog ---
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-}: {
-  open: boolean
-  title: string
-  message: string
-  onConfirm: () => void
-  onCancel: () => void
-}) {
-  const confirmRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (open) {
-      confirmRef.current?.focus()
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onCancel()
-    }
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onCancel])
-
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="confirm-dialog-title"
-      aria-describedby="confirm-dialog-message"
-    >
-      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
-        <h3 id="confirm-dialog-title" className="text-lg font-semibold text-foreground">
-          {title}
-        </h3>
-        <p id="confirm-dialog-message" className="mt-2 text-sm text-muted-foreground">
-          {message}
-        </p>
-        <div className="mt-4 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-          >
-            Cancel
-          </button>
-          <button
-            ref={confirmRef}
-            type="button"
-            onClick={onConfirm}
-            className="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
-          >
-            Confirm
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// --- Add Seed Dialog ---
-function AddSeedDialog({
-  open,
-  onClose,
-  onSubmit,
-}: {
-  open: boolean
-  onClose: () => void
-  onSubmit: (data: { handle: string; communityId?: string; reason?: string }) => void
-}) {
-  const [handle, setHandle] = useState('')
-  const [reason, setReason] = useState('')
-  const handleRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (open) {
-      handleRef.current?.focus()
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
-    document.addEventListener('keydown', handleKey)
-    return () => document.removeEventListener('keydown', handleKey)
-  }, [open, onClose])
-
-  if (!open) return null
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!handle.trim()) return
-    onSubmit({
-      handle: handle.trim(),
-      reason: reason.trim() || undefined,
-    })
-  }
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Add trust seed"
-    >
-      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
-        <h3 className="text-lg font-semibold text-foreground">Add Trust Seed</h3>
-        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
-          <div>
-            <label htmlFor="seed-handle" className="block text-sm font-medium text-foreground">
-              Handle
-            </label>
-            <input
-              ref={handleRef}
-              id="seed-handle"
-              type="text"
-              value={handle}
-              onChange={(e) => setHandle(e.target.value)}
-              placeholder="user.bsky.social"
-              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground"
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="seed-reason" className="block text-sm font-medium text-foreground">
-              Reason
-            </label>
-            <input
-              id="seed-reason"
-              type="text"
-              value={reason}
-              onChange={(e) => setReason(e.target.value)}
-              placeholder="Optional: why this account is trusted"
-              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground"
-            />
-          </div>
-          <div className="flex justify-end gap-2">
-            <button
-              type="button"
-              onClick={onClose}
-              className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
-            >
-              Add
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  )
-}
-
-// --- Type Badge ---
-function TypeBadge({ implicit }: { implicit: boolean }) {
-  return (
-    <span
-      className={cn(
-        'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
-        implicit ? 'bg-muted text-muted-foreground' : 'bg-primary/10 text-primary'
-      )}
-    >
-      {implicit ? 'Automatic' : 'Manual'}
-    </span>
-  )
-}
-
-// --- Main Page ---
 export default function AdminTrustSeedsPage() {
   const { getAccessToken } = useAuth()
   const [seeds, setSeeds] = useState<TrustSeed[]>([])
@@ -217,7 +27,7 @@ export default function AdminTrustSeedsPage() {
   const [addDialogKey, setAddDialogKey] = useState(0)
   const [confirmAction, setConfirmAction] = useState<{
     title: string
-    message: string
+    description: string
     onConfirm: () => void
   } | null>(null)
 
@@ -252,7 +62,7 @@ export default function AdminTrustSeedsPage() {
   const handleRemoveSeed = (seed: TrustSeed) => {
     setConfirmAction({
       title: 'Remove trust seed',
-      message: `Are you sure you want to remove ${seed.handle} as a trust seed?`,
+      description: `Are you sure you want to remove ${seed.handle} as a trust seed?`,
       onConfirm: async () => {
         setConfirmAction(null)
         setActionError(null)
@@ -304,37 +114,7 @@ export default function AdminTrustSeedsPage() {
 
             <div className="space-y-2">
               {seeds.map((seed) => (
-                <article key={seed.id} className="rounded-lg border border-border bg-card p-4">
-                  <div className="flex items-center justify-between gap-4">
-                    <div className="min-w-0 flex-1">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="text-sm font-medium text-foreground">{seed.handle}</span>
-                        <TypeBadge implicit={seed.implicit} />
-                        {seed.communityId ? (
-                          <span className="text-xs text-muted-foreground">Scoped</span>
-                        ) : (
-                          <span className="text-xs text-muted-foreground">Global</span>
-                        )}
-                      </div>
-                      <p className="mt-0.5 text-xs text-muted-foreground">
-                        {seed.displayName}
-                        {seed.reason && <> &middot; {seed.reason}</>}
-                        {' &middot; Added '}
-                        {formatDate(seed.createdAt)}
-                      </p>
-                    </div>
-                    {!seed.implicit && (
-                      <button
-                        type="button"
-                        onClick={() => handleRemoveSeed(seed)}
-                        aria-label="Remove"
-                        className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm text-destructive transition-colors hover:bg-destructive/10"
-                      >
-                        Remove
-                      </button>
-                    )}
-                  </div>
-                </article>
+                <TrustSeedCard key={seed.id} seed={seed} onRemove={handleRemoveSeed} />
               ))}
               {seeds.length === 0 && (
                 <p className="py-8 text-center text-muted-foreground">No trust seeds configured.</p>
@@ -343,7 +123,6 @@ export default function AdminTrustSeedsPage() {
           </>
         )}
 
-        {/* Add Seed Dialog */}
         <AddSeedDialog
           key={addDialogKey}
           open={addDialogOpen}
@@ -351,11 +130,11 @@ export default function AdminTrustSeedsPage() {
           onSubmit={(data) => void handleAddSeed(data)}
         />
 
-        {/* Confirm Dialog */}
         <ConfirmDialog
           open={confirmAction !== null}
           title={confirmAction?.title ?? ''}
-          message={confirmAction?.message ?? ''}
+          description={confirmAction?.description ?? ''}
+          variant="destructive"
           onConfirm={() => confirmAction?.onConfirm()}
           onCancel={() => setConfirmAction(null)}
         />
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 28de7fb..7f8c87d 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -16,6 +16,10 @@ import { Breadcrumbs } from '@/components/breadcrumbs'
 import { AgeGateDialog } from '@/components/age-gate-dialog'
 import { CrossPostAuthDialog } from '@/components/crosspost-auth-dialog'
 import { CommunityProfileSettings } from '@/components/community-profile-settings'
+import { ContentSafetySection } from '@/components/settings/content-safety-section'
+import { CommunityOverridesSection } from '@/components/settings/community-overrides-section'
+import { CrossPostingSection } from '@/components/settings/cross-posting-section'
+import { NotificationsSection } from '@/components/settings/notifications-section'
 import { cn } from '@/lib/utils'
 import {
   getPreferences,
@@ -66,7 +70,6 @@ export default function SettingsPage() {
   const [declaredAge, setDeclaredAge] = useState<number | null>(null)
   const [showAgeGate, setShowAgeGate] = useState(false)
 
-  // Load preferences on mount
   useEffect(() => {
     const token = getAccessToken()
     if (!token) {
@@ -125,7 +128,6 @@ export default function SettingsPage() {
         return
       }
 
-      // If switching to mature and no age declaration, show age gate
       if (values.maturityLevel === 'sfw-mature' && !declaredAge) {
         setShowAgeGate(true)
         setSaving(false)
@@ -138,7 +140,6 @@ export default function SettingsPage() {
           .map((w) => w.trim())
           .filter(Boolean)
 
-        // Save global preferences
         await updatePreferences(
           {
             maturityLevel: values.maturityLevel === 'sfw-mature' ? 'mature' : 'sfw',
@@ -149,7 +150,6 @@ export default function SettingsPage() {
           token
         )
 
-        // Save per-community overrides
         await Promise.all(
           communityOverrides.map((c) =>
             updateCommunityPreference(
@@ -213,261 +213,37 @@ export default function SettingsPage() {
               </p>
             )}
 
-            {/* Community Profile (separate save, independent section) */}
             <CommunityProfileSettings />
 
-            {/* Content Safety */}
-            <fieldset className="space-y-4 rounded-lg border border-border p-4">
-              <legend className="px-2 text-sm font-semibold text-foreground">Content Safety</legend>
-
-              <div className="space-y-1">
-                <label
-                  htmlFor="maturity-level"
-                  className="block text-sm font-medium text-foreground"
-                >
-                  Maturity level
-                </label>
-                <select
-                  id="maturity-level"
-                  value={values.maturityLevel}
-                  onChange={(e) =>
-                    setValues({ ...values, maturityLevel: e.target.value as MaturityLevel })
-                  }
-                  className={cn(
-                    'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground',
-                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                  )}
-                >
-                  <option value="sfw">SFW only</option>
-                  <option value="sfw-mature">SFW + Mature</option>
-                </select>
-                <p className="text-xs text-muted-foreground">
-                  Controls which content you can see. Mature content requires age confirmation.
-                </p>
-              </div>
-
-              <div className="space-y-1">
-                <label htmlFor="muted-words" className="block text-sm font-medium text-foreground">
-                  Muted words
-                </label>
-                <textarea
-                  id="muted-words"
-                  value={values.mutedWords}
-                  onChange={(e) => setValues({ ...values, mutedWords: e.target.value })}
-                  placeholder="Enter words separated by commas"
-                  rows={3}
-                  className={cn(
-                    'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                  )}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Posts containing these words will be collapsed. Comma-separated.
-                </p>
-              </div>
-            </fieldset>
-
-            {/* Per-Community Overrides */}
-            <fieldset className="space-y-4 rounded-lg border border-border p-4">
-              <legend className="px-2 text-sm font-semibold text-foreground">
-                Per-Community Overrides
-              </legend>
-
-              {communityOverrides.length === 0 ? (
-                <p className="text-sm text-muted-foreground">
-                  No community memberships found. Join a community to configure per-community
-                  settings.
-                </p>
-              ) : (
-                <div className="space-y-3">
-                  {communityOverrides.map((community) => (
-                    <details
-                      key={community.communityDid}
-                      className="rounded-md border border-border"
-                    >
-                      <summary className="cursor-pointer px-3 py-2 text-sm font-medium text-foreground hover:bg-muted/50">
-                        {community.communityName}
-                      </summary>
-
-                      <div className="space-y-3 border-t border-border px-3 py-3">
-                        <div className="space-y-1">
-                          <label
-                            htmlFor={`maturity-${community.communityDid}`}
-                            className="block text-xs font-medium text-foreground"
-                          >
-                            Maturity override
-                          </label>
-                          <select
-                            id={`maturity-${community.communityDid}`}
-                            value={community.maturityLevel}
-                            onChange={(e) =>
-                              handleCommunityChange(
-                                community.communityDid,
-                                'maturityLevel',
-                                e.target.value
-                              )
-                            }
-                            className={cn(
-                              'block w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground',
-                              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                            )}
-                          >
-                            <option value="inherit">Inherit global setting</option>
-                            <option value="sfw">SFW only</option>
-                            <option value="mature">SFW + Mature</option>
-                          </select>
-                        </div>
-
-                        <div className="space-y-1">
-                          <label
-                            htmlFor={`muted-words-${community.communityDid}`}
-                            className="block text-xs font-medium text-foreground"
-                          >
-                            Community muted words
-                          </label>
-                          <textarea
-                            id={`muted-words-${community.communityDid}`}
-                            value={community.mutedWords}
-                            onChange={(e) =>
-                              handleCommunityChange(
-                                community.communityDid,
-                                'mutedWords',
-                                e.target.value
-                              )
-                            }
-                            placeholder="Additional muted words for this community"
-                            rows={2}
-                            className={cn(
-                              'block w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground',
-                              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                            )}
-                          />
-                          <p className="text-xs text-muted-foreground">
-                            These are in addition to your global muted words. Comma-separated.
-                          </p>
-                        </div>
-
-                        <div className="space-y-1">
-                          <label
-                            htmlFor={`blocked-${community.communityDid}`}
-                            className="block text-xs font-medium text-foreground"
-                          >
-                            Community blocked users
-                          </label>
-                          <textarea
-                            id={`blocked-${community.communityDid}`}
-                            value={community.blockedDids}
-                            onChange={(e) =>
-                              handleCommunityChange(
-                                community.communityDid,
-                                'blockedDids',
-                                e.target.value
-                              )
-                            }
-                            placeholder="DIDs of users to block in this community"
-                            rows={2}
-                            className={cn(
-                              'block w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground',
-                              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                            )}
-                          />
-                          <p className="text-xs text-muted-foreground">
-                            Block specific users only in this community. Comma-separated DIDs.
-                          </p>
-                        </div>
-                      </div>
-                    </details>
-                  ))}
-                </div>
-              )}
-            </fieldset>
-
-            {/* Cross-Posting */}
-            <fieldset className="space-y-4 rounded-lg border border-border p-4">
-              <legend className="px-2 text-sm font-semibold text-foreground">Cross-Posting</legend>
-              {crossPostScopesGranted ? (
-                <div className="space-y-3">
-                  <p className="text-xs text-muted-foreground">
-                    Cross-posting authorized. You can share topics on Bluesky and Frontpage.
-                  </p>
-                  <label className="flex items-center gap-2">
-                    <input
-                      type="checkbox"
-                      checked={values.crossPostBluesky}
-                      onChange={(e) => setValues({ ...values, crossPostBluesky: e.target.checked })}
-                      className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                    />
-                    <span className="text-sm text-foreground">
-                      Share new topics on Bluesky by default
-                    </span>
-                  </label>
-                  <label className="flex items-center gap-2">
-                    <input
-                      type="checkbox"
-                      checked={values.crossPostFrontpage}
-                      onChange={(e) =>
-                        setValues({ ...values, crossPostFrontpage: e.target.checked })
-                      }
-                      className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                    />
-                    <span className="text-sm text-foreground">
-                      Share new topics on Frontpage by default
-                    </span>
-                  </label>
-                </div>
-              ) : (
-                <div className="space-y-3">
-                  <p className="text-sm text-muted-foreground">
-                    To share topics on Bluesky and Frontpage, Barazo needs permission to create
-                    posts on your behalf.
-                  </p>
-                  <button
-                    type="button"
-                    onClick={() => setShowCrossPostAuthDialog(true)}
-                    className={cn(
-                      'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors',
-                      'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-                    )}
-                  >
-                    Authorize cross-posting
-                  </button>
-                </div>
-              )}
-            </fieldset>
-
-            {/* Notifications */}
-            <fieldset className="space-y-4 rounded-lg border border-border p-4">
-              <legend className="px-2 text-sm font-semibold text-foreground">Notifications</legend>
-              <div className="space-y-3">
-                <label className="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={values.notifyReplies}
-                    onChange={(e) => setValues({ ...values, notifyReplies: e.target.checked })}
-                    className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                  />
-                  <span className="text-sm text-foreground">Replies to my posts</span>
-                </label>
-                <label className="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={values.notifyMentions}
-                    onChange={(e) => setValues({ ...values, notifyMentions: e.target.checked })}
-                    className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                  />
-                  <span className="text-sm text-foreground">Mentions of my handle</span>
-                </label>
-                <label className="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={values.notifyReactions}
-                    onChange={(e) => setValues({ ...values, notifyReactions: e.target.checked })}
-                    className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                  />
-                  <span className="text-sm text-foreground">Reactions on my posts</span>
-                </label>
-              </div>
-            </fieldset>
+            <ContentSafetySection
+              maturityLevel={values.maturityLevel}
+              mutedWords={values.mutedWords}
+              onMaturityChange={(level) => setValues({ ...values, maturityLevel: level })}
+              onMutedWordsChange={(words) => setValues({ ...values, mutedWords: words })}
+            />
+
+            <CommunityOverridesSection
+              overrides={communityOverrides}
+              onChange={handleCommunityChange}
+            />
+
+            <CrossPostingSection
+              authorized={crossPostScopesGranted}
+              crossPostBluesky={values.crossPostBluesky}
+              crossPostFrontpage={values.crossPostFrontpage}
+              onBlueskyChange={(v) => setValues({ ...values, crossPostBluesky: v })}
+              onFrontpageChange={(v) => setValues({ ...values, crossPostFrontpage: v })}
+              onAuthorize={() => setShowCrossPostAuthDialog(true)}
+            />
+
+            <NotificationsSection
+              notifyReplies={values.notifyReplies}
+              notifyMentions={values.notifyMentions}
+              notifyReactions={values.notifyReactions}
+              onRepliesChange={(v) => setValues({ ...values, notifyReplies: v })}
+              onMentionsChange={(v) => setValues({ ...values, notifyMentions: v })}
+              onReactionsChange={(v) => setValues({ ...values, notifyReactions: v })}
+            />
 
             {/* My Reports link */}
             <div className="rounded-lg border border-border p-4">
@@ -486,7 +262,6 @@ export default function SettingsPage() {
               </p>
             </div>
 
-            {/* Save */}
             <div className="flex justify-end">
               <button
                 type="submit"
@@ -518,7 +293,6 @@ export default function SettingsPage() {
         onConfirm={(age) => {
           setDeclaredAge(age)
           setShowAgeGate(false)
-          // Re-trigger save now that age is declared
           void handleSave({ preventDefault: () => {} } as React.FormEvent)
         }}
         onCancel={() => {
diff --git a/src/app/settings/reports/page.tsx b/src/app/settings/reports/page.tsx
index a34709f..a5c5b50 100644
--- a/src/app/settings/reports/page.tsx
+++ b/src/app/settings/reports/page.tsx
@@ -13,35 +13,11 @@ import { useState, useEffect, useCallback } from 'react'
 import { ForumLayout } from '@/components/layout/forum-layout'
 import { Breadcrumbs } from '@/components/breadcrumbs'
 import { ErrorAlert } from '@/components/error-alert'
-import { cn } from '@/lib/utils'
+import { ReportCard } from '@/components/settings/report-card'
 import { getMyReports, submitAppeal } from '@/lib/api/client'
 import type { MyReport } from '@/lib/api/types'
 import { useAuth } from '@/hooks/use-auth'
 
-function statusLabel(report: MyReport): string {
-  if (report.appealStatus === 'pending') return 'Appeal pending'
-  if (report.status === 'resolved' && report.resolutionType) {
-    return report.resolutionType.charAt(0).toUpperCase() + report.resolutionType.slice(1)
-  }
-  return 'Pending'
-}
-
-function statusColor(report: MyReport): string {
-  if (report.appealStatus === 'pending')
-    return 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400'
-  if (report.status === 'pending') return 'bg-blue-500/10 text-blue-700 dark:text-blue-400'
-  if (report.resolutionType === 'dismissed') return 'bg-muted text-muted-foreground'
-  return 'bg-green-500/10 text-green-700 dark:text-green-400'
-}
-
-function canAppeal(report: MyReport): boolean {
-  return (
-    report.status === 'resolved' &&
-    report.resolutionType === 'dismissed' &&
-    report.appealStatus === 'none'
-  )
-}
-
 export default function MyReportsPage() {
   const { getAccessToken } = useAuth()
   const [reports, setReports] = useState<MyReport[]>([])
@@ -81,6 +57,11 @@ export default function MyReportsPage() {
     setAppealError('')
   }, [])
 
+  const handleAppealReasonChange = useCallback((reason: string) => {
+    setAppealReason(reason)
+    setAppealError('')
+  }, [])
+
   const handleAppealSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault()
@@ -114,14 +95,6 @@ export default function MyReportsPage() {
     [appealingId, appealReason, getAccessToken]
   )
 
-  const formatDate = (iso: string) => {
-    return new Date(iso).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-    })
-  }
-
   return (
     <ForumLayout>
       <div className="space-y-6">
@@ -149,120 +122,19 @@ export default function MyReportsPage() {
         ) : (
           <div className="max-w-2xl space-y-4">
             {reports.map((report) => (
-              <div
+              <ReportCard
                 key={report.id}
-                className="rounded-lg border border-border bg-card p-4 space-y-3"
-              >
-                {/* Report header */}
-                <div className="flex items-start justify-between gap-3">
-                  <div className="space-y-1">
-                    <p className="text-sm font-medium text-foreground">
-                      {report.reasonType.charAt(0).toUpperCase() + report.reasonType.slice(1)}
-                    </p>
-                    {report.description && (
-                      <p className="text-sm text-muted-foreground">{report.description}</p>
-                    )}
-                  </div>
-                  <span
-                    className={cn(
-                      'shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium',
-                      statusColor(report)
-                    )}
-                  >
-                    {statusLabel(report)}
-                  </span>
-                </div>
-
-                {/* Metadata */}
-                <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
-                  <span>Reported: {formatDate(report.createdAt)}</span>
-                  {report.resolvedAt && <span>Resolved: {formatDate(report.resolvedAt)}</span>}
-                </div>
-
-                {/* Appeal success message */}
-                {appealSuccess === report.id && (
-                  <p
-                    className="rounded-md bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-400"
-                    role="status"
-                  >
-                    Appeal submitted. A moderator will re-review your report.
-                  </p>
-                )}
-
-                {/* Appeal button */}
-                {canAppeal(report) && appealingId !== report.id && appealSuccess !== report.id && (
-                  <button
-                    type="button"
-                    onClick={() => handleAppealOpen(report.id)}
-                    className={cn(
-                      'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors',
-                      'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                    )}
-                  >
-                    Appeal
-                  </button>
-                )}
-
-                {/* Appeal form */}
-                {appealingId === report.id && (
-                  <form onSubmit={handleAppealSubmit} className="space-y-3" noValidate>
-                    <div className="space-y-1">
-                      <label
-                        htmlFor={`appeal-reason-${report.id}`}
-                        className="block text-sm font-medium text-foreground"
-                      >
-                        Reason for appeal
-                      </label>
-                      <textarea
-                        id={`appeal-reason-${report.id}`}
-                        value={appealReason}
-                        onChange={(e) => {
-                          setAppealReason(e.target.value)
-                          setAppealError('')
-                        }}
-                        placeholder="Explain why you believe this report should be reconsidered"
-                        rows={3}
-                        disabled={appealSubmitting}
-                        className={cn(
-                          'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                          'disabled:cursor-not-allowed disabled:opacity-50'
-                        )}
-                      />
-                      {appealError && (
-                        <p className="text-sm text-destructive" role="alert">
-                          {appealError}
-                        </p>
-                      )}
-                    </div>
-                    <div className="flex gap-3">
-                      <button
-                        type="submit"
-                        disabled={appealSubmitting}
-                        className={cn(
-                          'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors',
-                          'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                          'disabled:cursor-not-allowed disabled:opacity-50'
-                        )}
-                      >
-                        {appealSubmitting ? 'Submitting...' : 'Submit appeal'}
-                      </button>
-                      <button
-                        type="button"
-                        onClick={handleAppealCancel}
-                        disabled={appealSubmitting}
-                        className={cn(
-                          'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors',
-                          'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                          'disabled:cursor-not-allowed disabled:opacity-50'
-                        )}
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </form>
-                )}
-              </div>
+                report={report}
+                appealingId={appealingId}
+                appealReason={appealReason}
+                appealError={appealError}
+                appealSubmitting={appealSubmitting}
+                appealSuccess={appealSuccess}
+                onAppealOpen={handleAppealOpen}
+                onAppealCancel={handleAppealCancel}
+                onAppealReasonChange={handleAppealReasonChange}
+                onAppealSubmit={handleAppealSubmit}
+              />
             ))}
           </div>
         )}
diff --git a/src/components/admin/categories/category-form.tsx b/src/components/admin/categories/category-form.tsx
new file mode 100644
index 0000000..54d6d14
--- /dev/null
+++ b/src/components/admin/categories/category-form.tsx
@@ -0,0 +1,103 @@
+/**
+ * CategoryForm - Edit/create form for a category with maturity rating.
+ * @see specs/prd-web.md Section M11
+ */
+
+import type { MaturityRating } from '@/lib/api/types'
+
+export interface EditingCategory {
+  id: string | null
+  name: string
+  slug: string
+  description: string
+  parentId: string | null
+  maturityRating: MaturityRating
+}
+
+interface CategoryFormProps {
+  editing: EditingCategory
+  onChange: (cat: EditingCategory) => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function CategoryForm({ editing, onChange, onSave, onCancel }: CategoryFormProps) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <h2 className="mb-4 text-lg font-semibold text-foreground">
+        {editing.id ? 'Edit Category' : 'New Category'}
+      </h2>
+      <div className="space-y-4">
+        <div>
+          <label htmlFor="cat-name" className="block text-sm font-medium text-foreground">
+            Category Name
+          </label>
+          <input
+            id="cat-name"
+            type="text"
+            value={editing.name}
+            onChange={(e) => onChange({ ...editing, name: e.target.value })}
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+        <div>
+          <label htmlFor="cat-slug" className="block text-sm font-medium text-foreground">
+            Slug
+          </label>
+          <input
+            id="cat-slug"
+            type="text"
+            value={editing.slug}
+            onChange={(e) => onChange({ ...editing, slug: e.target.value })}
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+        <div>
+          <label htmlFor="cat-desc" className="block text-sm font-medium text-foreground">
+            Description
+          </label>
+          <textarea
+            id="cat-desc"
+            value={editing.description}
+            onChange={(e) => onChange({ ...editing, description: e.target.value })}
+            rows={2}
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+        <div>
+          <label htmlFor="cat-maturity" className="block text-sm font-medium text-foreground">
+            Maturity Rating
+          </label>
+          <select
+            id="cat-maturity"
+            value={editing.maturityRating}
+            onChange={(e) =>
+              onChange({ ...editing, maturityRating: e.target.value as MaturityRating })
+            }
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          >
+            <option value="safe">Safe</option>
+            <option value="mature">Mature</option>
+            <option value="adult">Adult</option>
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={onSave}
+            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+          >
+            Save
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/categories/category-row.tsx b/src/components/admin/categories/category-row.tsx
new file mode 100644
index 0000000..626cc99
--- /dev/null
+++ b/src/components/admin/categories/category-row.tsx
@@ -0,0 +1,85 @@
+/**
+ * CategoryRow - Recursive tree row for a single category with edit/delete controls.
+ * @see specs/prd-web.md Section M11
+ */
+
+import { PencilSimple, TrashSimple } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+import type { CategoryTreeNode, MaturityRating } from '@/lib/api/types'
+
+const MATURITY_LABELS: Record<MaturityRating, string> = {
+  safe: 'Safe',
+  mature: 'Mature',
+  adult: 'Adult',
+}
+
+const MATURITY_COLORS: Record<MaturityRating, string> = {
+  safe: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  mature: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
+  adult: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
+}
+
+interface CategoryRowProps {
+  category: CategoryTreeNode
+  depth: number
+  onEdit: (cat: CategoryTreeNode) => void
+  onDelete: (id: string) => void
+}
+
+export function CategoryRow({ category, depth, onEdit, onDelete }: CategoryRowProps) {
+  return (
+    <>
+      <div
+        data-depth={depth}
+        className={cn(
+          'flex items-center justify-between rounded-md border border-border bg-card p-3',
+          depth > 0 && 'ml-6'
+        )}
+      >
+        <div className="flex items-center gap-3">
+          <div>
+            <p className="text-sm font-medium text-foreground">{category.name}</p>
+            {category.description && (
+              <p className="text-xs text-muted-foreground">{category.description}</p>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <span
+            className={cn(
+              'rounded-full px-2 py-0.5 text-xs font-medium',
+              MATURITY_COLORS[category.maturityRating]
+            )}
+          >
+            {MATURITY_LABELS[category.maturityRating]}
+          </span>
+          <button
+            type="button"
+            onClick={() => onEdit(category)}
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            aria-label={`Edit ${category.name}`}
+          >
+            <PencilSimple size={16} aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            onClick={() => onDelete(category.id)}
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+            aria-label={`Delete ${category.name}`}
+          >
+            <TrashSimple size={16} aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+      {category.children.map((child) => (
+        <CategoryRow
+          key={child.id}
+          category={child}
+          depth={depth + 1}
+          onEdit={onEdit}
+          onDelete={onDelete}
+        />
+      ))}
+    </>
+  )
+}
diff --git a/src/components/admin/moderation/action-log-tab.tsx b/src/components/admin/moderation/action-log-tab.tsx
new file mode 100644
index 0000000..13281ca
--- /dev/null
+++ b/src/components/admin/moderation/action-log-tab.tsx
@@ -0,0 +1,54 @@
+/**
+ * ModerationActionLogTab - Read-only list of moderation action log entries.
+ * @see specs/prd-web.md Section M11
+ */
+
+import { formatDate } from '@/lib/format'
+import type { ModerationLogEntry } from '@/lib/api/types'
+
+const ACTION_TYPE_LABELS: Record<string, string> = {
+  lock: 'Locked',
+  unlock: 'Unlocked',
+  pin: 'Pinned',
+  unpin: 'Unpinned',
+  delete: 'Deleted',
+  ban: 'Banned',
+  unban: 'Unbanned',
+  warn: 'Warned',
+  label: 'Labeled',
+  approve: 'Approved',
+  reject: 'Rejected',
+}
+
+interface ModerationActionLogTabProps {
+  entries: ModerationLogEntry[]
+}
+
+export function ModerationActionLogTab({ entries }: ModerationActionLogTabProps) {
+  return (
+    <div className="space-y-2">
+      {entries.map((entry) => (
+        <div key={entry.id} className="rounded-md border border-border bg-card p-3">
+          <div className="flex items-center justify-between">
+            <p className="text-sm text-foreground">
+              <span className="font-medium">{entry.moderatorHandle}</span>{' '}
+              <span className="text-muted-foreground">
+                {ACTION_TYPE_LABELS[entry.actionType] ?? entry.actionType}
+              </span>
+              {entry.targetHandle && (
+                <span className="text-muted-foreground"> {entry.targetHandle}</span>
+              )}
+            </p>
+            <span className="text-xs text-muted-foreground">{formatDate(entry.createdAt)}</span>
+          </div>
+          {entry.reason && (
+            <p className="mt-1 text-xs text-muted-foreground italic">{entry.reason}</p>
+          )}
+        </div>
+      ))}
+      {entries.length === 0 && (
+        <p className="py-8 text-center text-muted-foreground">No moderation actions recorded.</p>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/admin/moderation/first-post-tab.tsx b/src/components/admin/moderation/first-post-tab.tsx
new file mode 100644
index 0000000..95e45c1
--- /dev/null
+++ b/src/components/admin/moderation/first-post-tab.tsx
@@ -0,0 +1,153 @@
+/**
+ * ModerationFirstPostTab - First-post approval queue with batch actions.
+ * Shows account age, cross-community activity, and ban warnings.
+ * @see specs/prd-web.md Section M11
+ */
+
+'use client'
+
+import { useState } from 'react'
+import { ShieldCheck, Clock, Prohibit } from '@phosphor-icons/react'
+import { formatDate } from '@/lib/format'
+import type { FirstPostQueueItem } from '@/lib/api/types'
+
+interface ModerationFirstPostTabProps {
+  items: FirstPostQueueItem[]
+  onResolve: (id: string, action: 'approved' | 'rejected') => void
+  onBatchResolve: (ids: string[], action: 'approved' | 'rejected') => void
+}
+
+export function ModerationFirstPostTab({
+  items,
+  onResolve,
+  onBatchResolve,
+}: ModerationFirstPostTabProps) {
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+
+  const allSelected = items.length > 0 && selectedIds.size === items.length
+
+  const toggleSelectAll = () => {
+    if (allSelected) {
+      setSelectedIds(new Set())
+    } else {
+      setSelectedIds(new Set(items.map((item) => item.id)))
+    }
+  }
+
+  const toggleItem = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  const handleBatchAction = (action: 'approved' | 'rejected') => {
+    const ids = Array.from(selectedIds)
+    onBatchResolve(ids, action)
+    setSelectedIds(new Set())
+  }
+
+  return (
+    <div className="space-y-3">
+      {items.length > 0 && (
+        <div className="flex items-center justify-between">
+          <label className="flex items-center gap-2 text-sm text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={allSelected}
+              onChange={toggleSelectAll}
+              className="rounded border-border"
+              aria-label="Select all"
+            />
+            Select all ({items.length})
+          </label>
+          {selectedIds.size > 0 && (
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => handleBatchAction('approved')}
+                className="rounded-md bg-green-600 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-green-700"
+              >
+                Approve selected ({selectedIds.size})
+              </button>
+              <button
+                type="button"
+                onClick={() => handleBatchAction('rejected')}
+                className="rounded-md bg-destructive px-3 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
+              >
+                Reject selected ({selectedIds.size})
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+      {items.map((item) => (
+        <article key={item.id} className="rounded-lg border border-border bg-card p-4">
+          <div className="flex items-start gap-3">
+            <input
+              type="checkbox"
+              checked={selectedIds.has(item.id)}
+              onChange={() => toggleItem(item.id)}
+              className="mt-1 rounded border-border"
+              aria-label={`Select post by ${item.authorHandle}`}
+            />
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium text-foreground">{item.authorHandle}</p>
+              <div className="mt-1 flex flex-wrap gap-2 text-xs text-muted-foreground">
+                <span className="inline-flex items-center gap-1">
+                  <Clock size={12} aria-hidden="true" />
+                  New account, {item.accountAge} old
+                </span>
+                {item.crossCommunityCount > 0 && (
+                  <span className="inline-flex items-center gap-1">
+                    <ShieldCheck size={12} aria-hidden="true" />
+                    Active in {item.crossCommunityCount} other communities
+                  </span>
+                )}
+                {item.bannedFromOtherCommunities > 0 && (
+                  <span className="inline-flex items-center gap-1 font-medium text-destructive">
+                    <Prohibit size={12} aria-hidden="true" />
+                    Banned from {item.bannedFromOtherCommunities} other{' '}
+                    {item.bannedFromOtherCommunities === 1 ? 'community' : 'communities'}
+                  </span>
+                )}
+              </div>
+              {item.title && (
+                <p className="mt-2 text-sm font-medium text-foreground">{item.title}</p>
+              )}
+              <p className="mt-1 text-sm text-muted-foreground">{item.content}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {item.contentType === 'topic' ? 'Topic' : 'Reply'} &middot;{' '}
+                {formatDate(item.createdAt)}
+              </p>
+            </div>
+            <div className="flex shrink-0 gap-2">
+              <button
+                type="button"
+                onClick={() => onResolve(item.id, 'approved')}
+                className="rounded-md bg-green-600 px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-green-700"
+              >
+                Approve
+              </button>
+              <button
+                type="button"
+                onClick={() => onResolve(item.id, 'rejected')}
+                className="rounded-md bg-destructive px-3 py-1 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
+              >
+                Reject
+              </button>
+            </div>
+          </div>
+        </article>
+      ))}
+      {items.length === 0 && (
+        <p className="py-8 text-center text-muted-foreground">No posts awaiting approval.</p>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/admin/moderation/reported-users-tab.tsx b/src/components/admin/moderation/reported-users-tab.tsx
new file mode 100644
index 0000000..a77e2db
--- /dev/null
+++ b/src/components/admin/moderation/reported-users-tab.tsx
@@ -0,0 +1,40 @@
+/**
+ * ModerationReportedUsersTab - Users sorted by report count.
+ * @see specs/prd-web.md Section M11
+ */
+
+import { Prohibit } from '@phosphor-icons/react'
+import { formatDate } from '@/lib/format'
+import type { ReportedUser } from '@/lib/api/types'
+
+interface ModerationReportedUsersTabProps {
+  users: ReportedUser[]
+}
+
+export function ModerationReportedUsersTab({ users }: ModerationReportedUsersTabProps) {
+  return (
+    <div className="space-y-2">
+      {users.map((user) => (
+        <div key={user.did} className="rounded-md border border-border bg-card p-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-foreground">{user.handle}</p>
+              <p className="text-xs text-muted-foreground">
+                {user.reportCount} reports &middot; Latest: {formatDate(user.latestReportAt)}
+              </p>
+              {user.bannedFromOtherCommunities > 0 && (
+                <p className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-destructive">
+                  <Prohibit size={12} aria-hidden="true" />
+                  Banned from {user.bannedFromOtherCommunities} other communities
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+      {users.length === 0 && (
+        <p className="py-8 text-center text-muted-foreground">No reported users.</p>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/admin/moderation/reports-tab.tsx b/src/components/admin/moderation/reports-tab.tsx
new file mode 100644
index 0000000..8934efe
--- /dev/null
+++ b/src/components/admin/moderation/reports-tab.tsx
@@ -0,0 +1,88 @@
+/**
+ * ModerationReportsTab - Report queue with resolution actions.
+ * Sorts potentially illegal reports first, then by newest.
+ * @see specs/prd-web.md Section M11
+ */
+
+'use client'
+
+import { WarningCircle } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+import { formatDate } from '@/lib/format'
+import type { ModerationReport, ReportResolution } from '@/lib/api/types'
+
+const RESOLUTION_ACTIONS: { value: ReportResolution; label: string }[] = [
+  { value: 'dismissed', label: 'Dismiss' },
+  { value: 'warned', label: 'Warn' },
+  { value: 'labeled', label: 'Label' },
+  { value: 'removed', label: 'Remove' },
+  { value: 'banned', label: 'Ban' },
+]
+
+interface ModerationReportsTabProps {
+  reports: ModerationReport[]
+  onResolve: (id: string, resolution: ReportResolution) => void
+}
+
+export function ModerationReportsTab({ reports, onResolve }: ModerationReportsTabProps) {
+  const sorted = [...reports].sort((a, b) => {
+    if (a.potentiallyIllegal !== b.potentiallyIllegal) {
+      return a.potentiallyIllegal ? -1 : 1
+    }
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  })
+
+  return (
+    <div className="space-y-3">
+      {sorted.map((report) => (
+        <article
+          key={report.id}
+          className={cn(
+            'rounded-lg border border-border bg-card p-4',
+            report.potentiallyIllegal && 'border-l-4 border-l-destructive'
+          )}
+        >
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              {report.potentiallyIllegal && (
+                <span className="mb-1 inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive">
+                  <WarningCircle size={12} aria-hidden="true" />
+                  Potentially illegal
+                </span>
+              )}
+              <p className="text-sm font-medium text-foreground">
+                <span className="capitalize">{report.reasonType}</span>
+                {' -- reported by '}
+                <span className="text-muted-foreground">{report.reporterHandle}</span>
+              </p>
+              <p className="mt-1 text-sm text-muted-foreground">{report.targetContent}</p>
+              {report.reason && (
+                <p className="mt-1 text-xs text-muted-foreground italic">
+                  &ldquo;{report.reason}&rdquo;
+                </p>
+              )}
+              <p className="mt-1 text-xs text-muted-foreground">
+                Target: {report.targetAuthorHandle} &middot; {formatDate(report.createdAt)}
+              </p>
+            </div>
+            <div className="flex shrink-0 gap-1">
+              {RESOLUTION_ACTIONS.map((action) => (
+                <button
+                  key={action.value}
+                  type="button"
+                  onClick={() => onResolve(report.id, action.value)}
+                  className="rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                >
+                  {action.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </article>
+      ))}
+      {sorted.length === 0 && (
+        <p className="py-8 text-center text-muted-foreground">No pending reports.</p>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/admin/moderation/thresholds-tab.tsx b/src/components/admin/moderation/thresholds-tab.tsx
new file mode 100644
index 0000000..13e8e7a
--- /dev/null
+++ b/src/components/admin/moderation/thresholds-tab.tsx
@@ -0,0 +1,159 @@
+/**
+ * ModerationThresholdsTab - Form for editing moderation threshold settings.
+ * Auto-block, warn, rate limits, anti-spam, burst detection.
+ * @see specs/prd-web.md Section M11
+ */
+
+'use client'
+
+import { useState } from 'react'
+import type { ModerationThresholds } from '@/lib/api/types'
+
+interface ModerationThresholdsTabProps {
+  thresholds: ModerationThresholds
+  onSave: (updated: Partial<ModerationThresholds>) => void
+}
+
+export function ModerationThresholdsTab({ thresholds, onSave }: ModerationThresholdsTabProps) {
+  const [values, setValues] = useState(thresholds)
+
+  return (
+    <div className="max-w-lg space-y-4">
+      <div>
+        <label htmlFor="threshold-autoblock" className="block text-sm font-medium text-foreground">
+          Auto-block report count
+        </label>
+        <input
+          id="threshold-autoblock"
+          type="number"
+          min={1}
+          value={values.autoBlockReportCount}
+          onChange={(e) =>
+            setValues({ ...values, autoBlockReportCount: parseInt(e.target.value, 10) || 1 })
+          }
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="threshold-warn" className="block text-sm font-medium text-foreground">
+          Warn threshold
+        </label>
+        <input
+          id="threshold-warn"
+          type="number"
+          min={1}
+          value={values.warnThreshold}
+          onChange={(e) =>
+            setValues({ ...values, warnThreshold: parseInt(e.target.value, 10) || 1 })
+          }
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="threshold-fpq" className="block text-sm font-medium text-foreground">
+          First-post queue count (0 to disable)
+        </label>
+        <input
+          id="threshold-fpq"
+          type="number"
+          min={0}
+          value={values.firstPostQueueCount}
+          onChange={(e) =>
+            setValues({ ...values, firstPostQueueCount: parseInt(e.target.value, 10) || 0 })
+          }
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+      </div>
+      <div>
+        <label htmlFor="threshold-ratelimit" className="block text-sm font-medium text-foreground">
+          New account rate limit (writes/min)
+        </label>
+        <input
+          id="threshold-ratelimit"
+          type="number"
+          min={1}
+          value={values.newAccountRateLimit}
+          onChange={(e) =>
+            setValues({ ...values, newAccountRateLimit: parseInt(e.target.value, 10) || 1 })
+          }
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+      </div>
+      <fieldset className="space-y-3">
+        <legend className="text-sm font-medium text-foreground">Anti-spam settings</legend>
+        <div className="flex items-center gap-2">
+          <input
+            id="threshold-linkhold"
+            type="checkbox"
+            checked={values.linkPostingHold}
+            onChange={(e) => setValues({ ...values, linkPostingHold: e.target.checked })}
+            className="rounded border-border"
+          />
+          <label htmlFor="threshold-linkhold" className="text-sm text-foreground">
+            Hold posts with links from new accounts for review
+          </label>
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            id="threshold-topicdelay"
+            type="checkbox"
+            checked={values.topicCreationDelay}
+            onChange={(e) => setValues({ ...values, topicCreationDelay: e.target.checked })}
+            className="rounded border-border"
+          />
+          <label htmlFor="threshold-topicdelay" className="text-sm text-foreground">
+            Delay topic creation for new accounts
+          </label>
+        </div>
+      </fieldset>
+      <div className="flex gap-4">
+        <div>
+          <label
+            htmlFor="threshold-burstcount"
+            className="block text-sm font-medium text-foreground"
+          >
+            Burst detection: posts
+          </label>
+          <input
+            id="threshold-burstcount"
+            type="number"
+            min={1}
+            value={values.burstDetectionPostCount}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                burstDetectionPostCount: parseInt(e.target.value, 10) || 1,
+              })
+            }
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+        <div>
+          <label htmlFor="threshold-burstmin" className="block text-sm font-medium text-foreground">
+            in minutes
+          </label>
+          <input
+            id="threshold-burstmin"
+            type="number"
+            min={1}
+            value={values.burstDetectionMinutes}
+            onChange={(e) =>
+              setValues({
+                ...values,
+                burstDetectionMinutes: parseInt(e.target.value, 10) || 1,
+              })
+            }
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={() => onSave(values)}
+        className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+      >
+        Save Thresholds
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/admin/onboarding/onboarding-field-form.tsx b/src/components/admin/onboarding/onboarding-field-form.tsx
new file mode 100644
index 0000000..bad0cc1
--- /dev/null
+++ b/src/components/admin/onboarding/onboarding-field-form.tsx
@@ -0,0 +1,142 @@
+/**
+ * OnboardingFieldForm - Edit/create form for an onboarding field.
+ * @see specs/prd-web.md Section M11
+ */
+
+import type { OnboardingFieldType } from '@/lib/api/types'
+
+const FIELD_TYPE_LABELS: Record<OnboardingFieldType, string> = {
+  age_confirmation: 'Age Confirmation',
+  tos_acceptance: 'ToS Acceptance',
+  newsletter_email: 'Newsletter Email',
+  custom_text: 'Text Input',
+  custom_select: 'Dropdown Select',
+  custom_checkbox: 'Checkbox',
+}
+
+export interface EditingField {
+  id: string | null
+  fieldType: OnboardingFieldType
+  label: string
+  description: string
+  isMandatory: boolean
+  config: Record<string, unknown> | null
+}
+
+export const EMPTY_FIELD: EditingField = {
+  id: null,
+  fieldType: 'custom_text',
+  label: '',
+  description: '',
+  isMandatory: true,
+  config: null,
+}
+
+interface OnboardingFieldFormProps {
+  editing: EditingField
+  saving: boolean
+  error: string | null
+  onChange: (field: EditingField) => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function OnboardingFieldForm({
+  editing,
+  saving,
+  error,
+  onChange,
+  onSave,
+  onCancel,
+}: OnboardingFieldFormProps) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <h2 className="mb-4 text-lg font-semibold text-foreground">
+        {editing.id ? 'Edit Field' : 'New Onboarding Field'}
+      </h2>
+      <div className="space-y-4">
+        {!editing.id && (
+          <div>
+            <label htmlFor="field-type" className="block text-sm font-medium text-foreground">
+              Field Type
+            </label>
+            <select
+              id="field-type"
+              value={editing.fieldType}
+              onChange={(e) =>
+                onChange({ ...editing, fieldType: e.target.value as OnboardingFieldType })
+              }
+              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+            >
+              {Object.entries(FIELD_TYPE_LABELS).map(([value, label]) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+        <div>
+          <label htmlFor="field-label" className="block text-sm font-medium text-foreground">
+            Label
+          </label>
+          <input
+            id="field-label"
+            type="text"
+            value={editing.label}
+            onChange={(e) => onChange({ ...editing, label: e.target.value })}
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+            placeholder="e.g., Accept our community rules"
+          />
+        </div>
+        <div>
+          <label htmlFor="field-description" className="block text-sm font-medium text-foreground">
+            Description (optional)
+          </label>
+          <textarea
+            id="field-description"
+            value={editing.description}
+            onChange={(e) => onChange({ ...editing, description: e.target.value })}
+            rows={2}
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+            placeholder="Additional context or instructions for users"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            id="field-mandatory"
+            type="checkbox"
+            checked={editing.isMandatory}
+            onChange={(e) => onChange({ ...editing, isMandatory: e.target.checked })}
+            className="h-4 w-4 rounded border-border"
+          />
+          <label htmlFor="field-mandatory" className="text-sm text-foreground">
+            Required (users must complete this field before posting)
+          </label>
+        </div>
+        {error && (
+          <p role="alert" className="text-sm text-destructive">
+            {error}
+          </p>
+        )}
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={onSave}
+            disabled={saving}
+            className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+          >
+            {saving ? 'Saving...' : 'Save'}
+          </button>
+          <button
+            type="button"
+            onClick={onCancel}
+            className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/onboarding/onboarding-field-item.tsx b/src/components/admin/onboarding/onboarding-field-item.tsx
new file mode 100644
index 0000000..1ca30d0
--- /dev/null
+++ b/src/components/admin/onboarding/onboarding-field-item.tsx
@@ -0,0 +1,99 @@
+/**
+ * OnboardingFieldItem - Single onboarding field row with reorder/edit/delete controls.
+ * @see specs/prd-web.md Section M11
+ */
+
+import { PencilSimple, TrashSimple, ArrowUp, ArrowDown } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+import type { OnboardingField, OnboardingFieldType } from '@/lib/api/types'
+
+const FIELD_TYPE_LABELS: Record<OnboardingFieldType, string> = {
+  age_confirmation: 'Age Confirmation',
+  tos_acceptance: 'ToS Acceptance',
+  newsletter_email: 'Newsletter Email',
+  custom_text: 'Text Input',
+  custom_select: 'Dropdown Select',
+  custom_checkbox: 'Checkbox',
+}
+
+interface OnboardingFieldItemProps {
+  field: OnboardingField
+  index: number
+  totalCount: number
+  onMoveUp: (index: number) => void
+  onMoveDown: (index: number) => void
+  onEdit: (field: OnboardingField) => void
+  onDelete: (id: string) => void
+}
+
+export function OnboardingFieldItem({
+  field,
+  index,
+  totalCount,
+  onMoveUp,
+  onMoveDown,
+  onEdit,
+  onDelete,
+}: OnboardingFieldItemProps) {
+  return (
+    <div className="flex items-center justify-between rounded-md border border-border bg-card p-3">
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium text-foreground">{field.label}</p>
+          <span
+            className={cn(
+              'rounded-full px-2 py-0.5 text-xs font-medium',
+              'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+            )}
+          >
+            {FIELD_TYPE_LABELS[field.fieldType]}
+          </span>
+          {field.isMandatory && (
+            <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400">
+              Required
+            </span>
+          )}
+        </div>
+        {field.description && (
+          <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
+        )}
+      </div>
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={() => onMoveUp(index)}
+          disabled={index === 0}
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-30"
+          aria-label={`Move ${field.label} up`}
+        >
+          <ArrowUp size={16} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onMoveDown(index)}
+          disabled={index === totalCount - 1}
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-30"
+          aria-label={`Move ${field.label} down`}
+        >
+          <ArrowDown size={16} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onEdit(field)}
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          aria-label={`Edit ${field.label}`}
+        >
+          <PencilSimple size={16} aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onDelete(field.id)}
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+          aria-label={`Delete ${field.label}`}
+        >
+          <TrashSimple size={16} aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/plugins/plugin-card.tsx b/src/components/admin/plugins/plugin-card.tsx
new file mode 100644
index 0000000..a4460ee
--- /dev/null
+++ b/src/components/admin/plugins/plugin-card.tsx
@@ -0,0 +1,115 @@
+/**
+ * PluginCard - Card display for a single plugin with controls.
+ * @see specs/prd-web.md Section M13
+ */
+
+import { Gear, Trash } from '@phosphor-icons/react'
+import { cn } from '@/lib/utils'
+import type { Plugin } from '@/lib/api/types'
+
+const SOURCE_STYLES: Record<string, string> = {
+  core: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400',
+  official: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400',
+  community: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
+  experimental: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
+}
+
+const SOURCE_LABELS: Record<string, string> = {
+  core: 'Core',
+  official: 'Official',
+  community: 'Community',
+  experimental: 'Experimental',
+}
+
+interface PluginCardProps {
+  plugin: Plugin
+  allPlugins: Plugin[]
+  onOpenSettings: (plugin: Plugin) => void
+  onToggle: (plugin: Plugin) => void
+  onUninstall: (plugin: Plugin) => void
+}
+
+export function PluginCard({
+  plugin,
+  allPlugins,
+  onOpenSettings,
+  onToggle,
+  onUninstall,
+}: PluginCardProps) {
+  return (
+    <article
+      className={cn('rounded-lg border border-border bg-card p-4', !plugin.enabled && 'opacity-60')}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <h2 className="text-sm font-semibold text-foreground">{plugin.displayName}</h2>
+            <span className="text-xs text-muted-foreground">v{plugin.version}</span>
+            <span
+              className={cn(
+                'rounded-full px-2 py-0.5 text-xs font-medium',
+                SOURCE_STYLES[plugin.source] ?? SOURCE_STYLES.community
+              )}
+            >
+              {SOURCE_LABELS[plugin.source] ?? plugin.source}
+            </span>
+          </div>
+          <p className="mt-1 text-xs text-muted-foreground">{plugin.description}</p>
+          {plugin.dependencies.length > 0 && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              Depends on:{' '}
+              {plugin.dependencies
+                .map((depId) => {
+                  const dep = allPlugins.find((p) => p.id === depId)
+                  return dep?.displayName ?? depId
+                })
+                .join(', ')}
+            </p>
+          )}
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2">
+          {Object.keys(plugin.settingsSchema).length > 0 && (
+            <button
+              type="button"
+              onClick={() => onOpenSettings(plugin)}
+              className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:text-foreground"
+              aria-label={`${plugin.displayName} settings`}
+            >
+              <Gear size={16} aria-hidden="true" />
+            </button>
+          )}
+          {plugin.source !== 'core' && (
+            <button
+              type="button"
+              onClick={() => onUninstall(plugin)}
+              className="rounded-md border border-border p-1.5 text-muted-foreground transition-colors hover:text-destructive"
+              aria-label={`Uninstall ${plugin.displayName}`}
+            >
+              <Trash size={16} aria-hidden="true" />
+            </button>
+          )}
+          <button
+            type="button"
+            role="switch"
+            aria-checked={plugin.enabled}
+            aria-label={`${plugin.enabled ? 'Disable' : 'Enable'} ${plugin.displayName}`}
+            onClick={() => onToggle(plugin)}
+            className={cn(
+              'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors',
+              plugin.enabled ? 'bg-primary' : 'bg-muted'
+            )}
+          >
+            <span
+              aria-hidden="true"
+              className={cn(
+                'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition-transform',
+                plugin.enabled ? 'translate-x-5' : 'translate-x-0'
+              )}
+            />
+          </button>
+        </div>
+      </div>
+    </article>
+  )
+}
diff --git a/src/components/admin/plugins/plugin-settings-modal.tsx b/src/components/admin/plugins/plugin-settings-modal.tsx
new file mode 100644
index 0000000..505b855
--- /dev/null
+++ b/src/components/admin/plugins/plugin-settings-modal.tsx
@@ -0,0 +1,84 @@
+/**
+ * PluginSettingsModal - Modal dialog for editing a plugin's settings.
+ * Dynamically renders fields from the plugin's settingsSchema.
+ * @see specs/prd-web.md Section M13
+ */
+
+'use client'
+
+import { useState } from 'react'
+import { X } from '@phosphor-icons/react'
+import { SettingsField } from '@/components/admin/plugins/settings-field'
+import type { Plugin } from '@/lib/api/types'
+
+interface PluginSettingsModalProps {
+  plugin: Plugin
+  onClose: () => void
+  onSave: (settings: Record<string, boolean | string | number>) => void
+}
+
+export function PluginSettingsModal({ plugin, onClose, onSave }: PluginSettingsModalProps) {
+  const [values, setValues] = useState<Record<string, boolean | string | number>>(() => ({
+    ...plugin.settings,
+  }))
+
+  const handleChange = (key: string, value: boolean | string | number) => {
+    setValues((prev) => ({ ...prev, [key]: value }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSave(values)
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      aria-label={`${plugin.displayName} settings`}
+    >
+      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
+        <div className="mb-4 flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-foreground">{plugin.displayName} Settings</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground"
+            aria-label="Close settings"
+          >
+            <X size={18} aria-hidden="true" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {Object.entries(plugin.settingsSchema).map(([key, schema]) => (
+            <SettingsField
+              key={key}
+              fieldKey={key}
+              schema={schema}
+              value={values[key] ?? schema.default}
+              onChange={(val) => handleChange(key, val)}
+            />
+          ))}
+
+          <div className="flex justify-end gap-2 pt-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              Save
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/plugins/settings-field.tsx b/src/components/admin/plugins/settings-field.tsx
new file mode 100644
index 0000000..53d43f6
--- /dev/null
+++ b/src/components/admin/plugins/settings-field.tsx
@@ -0,0 +1,89 @@
+/**
+ * SettingsField - Dynamic form field renderer for plugin settings schemas.
+ * Handles boolean, select, number, and string types.
+ * @see specs/prd-web.md Section M13
+ */
+
+import type { PluginSettingsSchema } from '@/lib/api/types'
+
+interface SettingsFieldProps {
+  fieldKey: string
+  schema: PluginSettingsSchema[string]
+  value: boolean | string | number
+  onChange: (value: boolean | string | number) => void
+}
+
+export function SettingsField({ fieldKey, schema, value, onChange }: SettingsFieldProps) {
+  if (schema.type === 'boolean') {
+    return (
+      <label className="flex items-center justify-between gap-3">
+        <div>
+          <span className="text-sm font-medium text-foreground">{schema.label}</span>
+          {schema.description && (
+            <p className="text-xs text-muted-foreground">{schema.description}</p>
+          )}
+        </div>
+        <input
+          type="checkbox"
+          checked={value as boolean}
+          onChange={(e) => onChange(e.target.checked)}
+          className="h-4 w-4 rounded border-border"
+        />
+      </label>
+    )
+  }
+
+  if (schema.type === 'select') {
+    return (
+      <label className="block">
+        <span className="text-sm font-medium text-foreground">{schema.label}</span>
+        {schema.description && (
+          <p className="text-xs text-muted-foreground">{schema.description}</p>
+        )}
+        <select
+          value={value as string}
+          onChange={(e) => onChange(e.target.value)}
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground"
+        >
+          {schema.options?.map((opt) => (
+            <option key={opt} value={opt}>
+              {opt || '(none)'}
+            </option>
+          ))}
+        </select>
+      </label>
+    )
+  }
+
+  if (schema.type === 'number') {
+    return (
+      <label className="block">
+        <span className="text-sm font-medium text-foreground">{schema.label}</span>
+        {schema.description && (
+          <p className="text-xs text-muted-foreground">{schema.description}</p>
+        )}
+        <input
+          type="number"
+          value={value as number}
+          onChange={(e) => onChange(Number(e.target.value))}
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground"
+          name={fieldKey}
+        />
+      </label>
+    )
+  }
+
+  return (
+    <label className="block">
+      <span className="text-sm font-medium text-foreground">{schema.label}</span>
+      {schema.description && <p className="text-xs text-muted-foreground">{schema.description}</p>}
+      <input
+        type="text"
+        value={value as string}
+        onChange={(e) => onChange(e.target.value)}
+        className="mt-1 w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground"
+        name={fieldKey}
+      />
+    </label>
+  )
+}
diff --git a/src/components/admin/settings/community-settings-form.tsx b/src/components/admin/settings/community-settings-form.tsx
new file mode 100644
index 0000000..391d061
--- /dev/null
+++ b/src/components/admin/settings/community-settings-form.tsx
@@ -0,0 +1,143 @@
+/**
+ * CommunitySettingsForm - Form for community name, description, maturity, reactions, branding.
+ * @see specs/prd-web.md Section M11
+ */
+
+'use client'
+
+import { ErrorAlert } from '@/components/error-alert'
+import type { CommunitySettings, MaturityRating } from '@/lib/api/types'
+
+interface CommunitySettingsFormProps {
+  settings: CommunitySettings
+  onChange: (updated: CommunitySettings) => void
+  onSave: () => void
+  saving: boolean
+  saveError: string | null
+  onDismissError: () => void
+}
+
+export function CommunitySettingsForm({
+  settings,
+  onChange,
+  onSave,
+  saving,
+  saveError,
+  onDismissError,
+}: CommunitySettingsFormProps) {
+  return (
+    <div className="max-w-lg space-y-6">
+      <div>
+        <label htmlFor="settings-name" className="block text-sm font-medium text-foreground">
+          Community Name
+        </label>
+        <input
+          id="settings-name"
+          type="text"
+          value={settings.communityName}
+          onChange={(e) => onChange({ ...settings, communityName: e.target.value })}
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="settings-desc" className="block text-sm font-medium text-foreground">
+          Description
+        </label>
+        <textarea
+          id="settings-desc"
+          value={settings.communityDescription ?? ''}
+          onChange={(e) => onChange({ ...settings, communityDescription: e.target.value || null })}
+          rows={3}
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="settings-maturity" className="block text-sm font-medium text-foreground">
+          Community Maturity Rating
+        </label>
+        <select
+          id="settings-maturity"
+          value={settings.maturityRating}
+          onChange={(e) =>
+            onChange({ ...settings, maturityRating: e.target.value as MaturityRating })
+          }
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        >
+          <option value="safe">Safe (default)</option>
+          <option value="mature">Mature</option>
+          <option value="adult">Adult</option>
+        </select>
+        <p className="mt-1 text-xs text-muted-foreground">
+          Changing to Mature or Adult affects global aggregator visibility.
+        </p>
+      </div>
+
+      <div>
+        <label htmlFor="settings-reactions" className="block text-sm font-medium text-foreground">
+          Reaction Set
+        </label>
+        <input
+          id="settings-reactions"
+          type="text"
+          value={settings.reactionSet.join(', ')}
+          onChange={(e) =>
+            onChange({
+              ...settings,
+              reactionSet: e.target.value
+                .split(',')
+                .map((s) => s.trim())
+                .filter(Boolean),
+            })
+          }
+          className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+        />
+        <p className="mt-1 text-xs text-muted-foreground">
+          Comma-separated list of reaction types available in your community.
+        </p>
+      </div>
+
+      <fieldset className="space-y-4">
+        <legend className="text-sm font-medium text-foreground">Branding</legend>
+        <div>
+          <label htmlFor="settings-primary-color" className="block text-sm text-muted-foreground">
+            Primary Color
+          </label>
+          <input
+            id="settings-primary-color"
+            type="text"
+            value={settings.primaryColor ?? ''}
+            onChange={(e) => onChange({ ...settings, primaryColor: e.target.value || null })}
+            placeholder="#31748f"
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+        <div>
+          <label htmlFor="settings-accent-color" className="block text-sm text-muted-foreground">
+            Accent Color
+          </label>
+          <input
+            id="settings-accent-color"
+            type="text"
+            value={settings.accentColor ?? ''}
+            onChange={(e) => onChange({ ...settings, accentColor: e.target.value || null })}
+            placeholder="#c4a7e7"
+            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
+          />
+        </div>
+      </fieldset>
+
+      {saveError && <ErrorAlert message={saveError} onDismiss={onDismissError} />}
+
+      <button
+        type="button"
+        onClick={onSave}
+        disabled={saving}
+        className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
+      >
+        {saving ? 'Saving...' : 'Save Settings'}
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/admin/settings/pds-override-dialog.tsx b/src/components/admin/settings/pds-override-dialog.tsx
new file mode 100644
index 0000000..7186ebf
--- /dev/null
+++ b/src/components/admin/settings/pds-override-dialog.tsx
@@ -0,0 +1,124 @@
+/**
+ * PdsOverrideDialog - Form dialog for adding/editing PDS trust factor overrides.
+ * @see specs/prd-web.md Section M11
+ */
+
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+import { cn } from '@/lib/utils'
+
+interface PdsOverrideDialogProps {
+  open: boolean
+  mode: 'add' | 'edit'
+  initialHostname: string
+  initialTrustFactor: number
+  onClose: () => void
+  onSubmit: (hostname: string, trustFactor: number) => void
+}
+
+export function PdsOverrideDialog({
+  open,
+  mode,
+  initialHostname,
+  initialTrustFactor,
+  onClose,
+  onSubmit,
+}: PdsOverrideDialogProps) {
+  const [hostname, setHostname] = useState(initialHostname)
+  const [trustFactor, setTrustFactor] = useState(initialTrustFactor)
+  const hostnameRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open && mode === 'add') {
+      hostnameRef.current?.focus()
+    }
+  }, [open, mode])
+
+  useEffect(() => {
+    if (!open) return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (mode === 'add' && !hostname.trim()) return
+    onSubmit(hostname.trim(), trustFactor)
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      aria-label={mode === 'add' ? 'Add PDS trust override' : 'Edit PDS trust factor'}
+    >
+      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
+        <h3 className="text-lg font-semibold text-foreground">
+          {mode === 'add' ? 'Add PDS Override' : 'Edit Trust Factor'}
+        </h3>
+        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
+          <div>
+            <label htmlFor="pds-hostname" className="block text-sm font-medium text-foreground">
+              PDS Hostname
+            </label>
+            <input
+              ref={hostnameRef}
+              id="pds-hostname"
+              type="text"
+              value={hostname}
+              onChange={(e) => setHostname(e.target.value)}
+              disabled={mode === 'edit'}
+              placeholder="my-pds.example.org"
+              className={cn(
+                'mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+                mode === 'edit' && 'cursor-not-allowed opacity-60'
+              )}
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="pds-trust-factor" className="block text-sm font-medium text-foreground">
+              Trust Factor: {trustFactor.toFixed(1)}
+            </label>
+            <input
+              id="pds-trust-factor"
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              value={trustFactor}
+              onChange={(e) => setTrustFactor(parseFloat(e.target.value))}
+              className="mt-1 w-full"
+            />
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
+              <span>0.0 (untrusted)</span>
+              <span>1.0 (fully trusted)</span>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              {mode === 'add' ? 'Add' : 'Save'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/settings/pds-trust-section.tsx b/src/components/admin/settings/pds-trust-section.tsx
new file mode 100644
index 0000000..da31dcf
--- /dev/null
+++ b/src/components/admin/settings/pds-trust-section.tsx
@@ -0,0 +1,138 @@
+/**
+ * PdsTrustSection - PDS Provider Trust management with add/edit/remove.
+ * @see specs/prd-web.md Section M11
+ */
+
+'use client'
+
+import { useState } from 'react'
+import { ConfirmDialog } from '@/components/confirm-dialog'
+import { PdsOverrideDialog } from '@/components/admin/settings/pds-override-dialog'
+import type { PdsTrustFactor } from '@/lib/api/types'
+
+interface PdsTrustSectionProps {
+  providers: PdsTrustFactor[]
+  onUpdate: (pdsHost: string, trustFactor: number) => void
+  onRemove: (pdsHost: string) => void
+}
+
+export function PdsTrustSection({ providers, onUpdate, onRemove }: PdsTrustSectionProps) {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [dialogKey, setDialogKey] = useState(0)
+  const [dialogMode, setDialogMode] = useState<'add' | 'edit'>('add')
+  const [editHostname, setEditHostname] = useState('')
+  const [editTrustFactor, setEditTrustFactor] = useState(1.0)
+  const [confirmRemove, setConfirmRemove] = useState<string | null>(null)
+
+  const handleAdd = () => {
+    setDialogMode('add')
+    setEditHostname('')
+    setEditTrustFactor(1.0)
+    setDialogKey((k) => k + 1)
+    setDialogOpen(true)
+  }
+
+  const handleEdit = (provider: PdsTrustFactor) => {
+    setDialogMode('edit')
+    setEditHostname(provider.pdsHost)
+    setEditTrustFactor(provider.trustFactor)
+    setDialogKey((k) => k + 1)
+    setDialogOpen(true)
+  }
+
+  const handleDialogSubmit = (hostname: string, trustFactor: number) => {
+    onUpdate(hostname, trustFactor)
+    setDialogOpen(false)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-foreground">PDS Provider Trust</h2>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            Accounts from providers with higher trust factors earn reputation faster. Override the
+            default if you trust a specific self-hosted PDS provider.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={handleAdd}
+          aria-label="Add override"
+          className="shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+        >
+          Add Override
+        </button>
+      </div>
+
+      <div className="space-y-2">
+        {providers.map((provider) => (
+          <div
+            key={provider.pdsHost}
+            className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-3"
+          >
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-foreground">{provider.pdsHost}</span>
+                {provider.isDefault && (
+                  <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                    Default
+                  </span>
+                )}
+              </div>
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                Trust factor: {provider.trustFactor.toFixed(1)}
+              </p>
+            </div>
+            {!provider.isDefault && (
+              <div className="flex shrink-0 gap-2">
+                <button
+                  type="button"
+                  onClick={() => handleEdit(provider)}
+                  aria-label="Edit"
+                  className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setConfirmRemove(provider.pdsHost)}
+                  aria-label="Remove"
+                  className="rounded-md border border-border px-3 py-1.5 text-sm text-destructive transition-colors hover:bg-destructive/10"
+                >
+                  Remove
+                </button>
+              </div>
+            )}
+          </div>
+        ))}
+        {providers.length === 0 && (
+          <p className="py-4 text-center text-muted-foreground">No PDS providers configured.</p>
+        )}
+      </div>
+
+      <PdsOverrideDialog
+        key={dialogKey}
+        open={dialogOpen}
+        mode={dialogMode}
+        initialHostname={editHostname}
+        initialTrustFactor={editTrustFactor}
+        onClose={() => setDialogOpen(false)}
+        onSubmit={handleDialogSubmit}
+      />
+
+      <ConfirmDialog
+        open={confirmRemove !== null}
+        title="Remove PDS override"
+        description={`Are you sure you want to remove the trust override for ${confirmRemove ?? ''}? The default trust factor will apply.`}
+        confirmLabel="Confirm"
+        variant="destructive"
+        onConfirm={() => {
+          if (confirmRemove) onRemove(confirmRemove)
+          setConfirmRemove(null)
+        }}
+        onCancel={() => setConfirmRemove(null)}
+      />
+    </div>
+  )
+}
diff --git a/src/components/admin/sybil/behavioral-flags-section.tsx b/src/components/admin/sybil/behavioral-flags-section.tsx
new file mode 100644
index 0000000..d5d4a07
--- /dev/null
+++ b/src/components/admin/sybil/behavioral-flags-section.tsx
@@ -0,0 +1,51 @@
+/**
+ * BehavioralFlagsSection - List of behavioral flags with dismiss capability.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { formatRelativeTime } from '@/lib/format'
+import { StatusBadge } from '@/components/admin/sybil/status-badge'
+import type { BehavioralFlag } from '@/lib/api/types'
+
+interface BehavioralFlagsSectionProps {
+  flags: BehavioralFlag[]
+  onDismiss: (id: number) => void
+}
+
+export function BehavioralFlagsSection({ flags, onDismiss }: BehavioralFlagsSectionProps) {
+  return (
+    <div className="space-y-3">
+      <h2 className="text-lg font-semibold text-foreground">Behavioral Flags</h2>
+      {flags.length === 0 && (
+        <p className="py-4 text-center text-muted-foreground">No behavioral flags.</p>
+      )}
+      {flags.map((flag) => (
+        <article key={flag.id} className="rounded-lg border border-border bg-card p-4">
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-foreground">{flag.flagType}</span>
+                <StatusBadge status={flag.status} />
+              </div>
+              <p className="mt-1 text-sm text-muted-foreground">{flag.details}</p>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {flag.affectedDids.length} affected accounts &middot; Detected{' '}
+                {formatRelativeTime(flag.detectedAt)}
+              </p>
+            </div>
+            {flag.status === 'pending' && (
+              <button
+                type="button"
+                onClick={() => onDismiss(flag.id)}
+                aria-label="Dismiss flag"
+                className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+              >
+                Dismiss
+              </button>
+            )}
+          </div>
+        </article>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/admin/sybil/cluster-detail-view.tsx b/src/components/admin/sybil/cluster-detail-view.tsx
new file mode 100644
index 0000000..3c7f26d
--- /dev/null
+++ b/src/components/admin/sybil/cluster-detail-view.tsx
@@ -0,0 +1,115 @@
+/**
+ * SybilClusterDetailView - Detail view for a single sybil cluster.
+ * Shows member table and action buttons (Monitor/Dismiss/Ban).
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { ArrowLeft } from '@phosphor-icons/react'
+import { StatusBadge } from '@/components/admin/sybil/status-badge'
+import { SuspicionBar } from '@/components/admin/sybil/suspicion-bar'
+import type { SybilClusterDetail, SybilClusterStatus } from '@/lib/api/types'
+
+interface SybilClusterDetailViewProps {
+  detail: SybilClusterDetail
+  onBack: () => void
+  onAction: (status: SybilClusterStatus) => void
+}
+
+export function SybilClusterDetailView({ detail, onBack, onAction }: SybilClusterDetailViewProps) {
+  return (
+    <div className="space-y-4">
+      <button
+        type="button"
+        onClick={onBack}
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        aria-label="Back to cluster list"
+      >
+        <ArrowLeft size={14} aria-hidden="true" />
+        Back to clusters
+      </button>
+
+      <div className="rounded-lg border border-border bg-card p-4">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold text-foreground">Cluster #{detail.id}</h3>
+            <div className="mt-1 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+              <span>{detail.memberCount} members</span>
+              <StatusBadge status={detail.status} />
+              <SuspicionBar ratio={detail.suspicionRatio} />
+            </div>
+          </div>
+          <div className="flex gap-2">
+            {detail.status !== 'monitoring' && (
+              <button
+                type="button"
+                onClick={() => onAction('monitoring')}
+                className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+              >
+                Monitor
+              </button>
+            )}
+            {detail.status !== 'dismissed' && (
+              <button
+                type="button"
+                onClick={() => onAction('dismissed')}
+                aria-label="Dismiss cluster"
+                className="rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+              >
+                Dismiss
+              </button>
+            )}
+            {detail.status !== 'banned' && (
+              <button
+                type="button"
+                onClick={() => onAction('banned')}
+                aria-label="Ban cluster"
+                className="rounded-md bg-destructive px-3 py-1.5 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90"
+              >
+                Ban
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Member table */}
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border text-left">
+              <th className="pb-2 pr-4 font-medium text-muted-foreground">Handle</th>
+              <th className="pb-2 pr-4 font-medium text-muted-foreground">Role</th>
+              <th className="pb-2 pr-4 font-medium text-muted-foreground">Trust</th>
+              <th className="pb-2 pr-4 font-medium text-muted-foreground">Reputation</th>
+              <th className="pb-2 pr-4 font-medium text-muted-foreground">Account Age</th>
+              <th className="pb-2 font-medium text-muted-foreground">Communities</th>
+            </tr>
+          </thead>
+          <tbody>
+            {detail.members.map((member) => (
+              <tr key={member.did} className="border-b border-border last:border-0">
+                <td className="py-2 pr-4">
+                  <div>
+                    <p className="font-medium text-foreground">{member.handle}</p>
+                    <p className="text-xs text-muted-foreground">{member.displayName}</p>
+                  </div>
+                </td>
+                <td className="py-2 pr-4">
+                  <StatusBadge status={member.roleInCluster} />
+                </td>
+                <td className="py-2 pr-4 text-muted-foreground">
+                  {(member.trustScore * 100).toFixed(0)}%
+                </td>
+                <td className="py-2 pr-4 text-muted-foreground">
+                  {(member.reputationScore * 100).toFixed(0)}%
+                </td>
+                <td className="py-2 pr-4 text-muted-foreground">{member.accountAge}</td>
+                <td className="py-2 text-muted-foreground">{member.communitiesActiveIn}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/sybil/cluster-list-view.tsx b/src/components/admin/sybil/cluster-list-view.tsx
new file mode 100644
index 0000000..94dcac1
--- /dev/null
+++ b/src/components/admin/sybil/cluster-list-view.tsx
@@ -0,0 +1,52 @@
+/**
+ * SybilClusterListView - List of sybil clusters with summary info.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { formatRelativeTime } from '@/lib/format'
+import { StatusBadge } from '@/components/admin/sybil/status-badge'
+import { SuspicionBar } from '@/components/admin/sybil/suspicion-bar'
+import type { SybilCluster } from '@/lib/api/types'
+
+interface SybilClusterListViewProps {
+  clusters: SybilCluster[]
+  onViewDetail: (id: number) => void
+}
+
+export function SybilClusterListView({ clusters, onViewDetail }: SybilClusterListViewProps) {
+  if (clusters.length === 0) {
+    return <p className="py-8 text-center text-muted-foreground">No clusters found.</p>
+  }
+
+  return (
+    <div className="space-y-2">
+      {clusters.map((cluster) => (
+        <article key={cluster.id} className="rounded-lg border border-border bg-card p-4">
+          <div className="flex items-center justify-between gap-4">
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-3">
+                <span className="text-sm font-medium text-foreground">
+                  {cluster.memberCount} members
+                </span>
+                <StatusBadge status={cluster.status} />
+                <SuspicionBar ratio={cluster.suspicionRatio} />
+              </div>
+              <p className="mt-1 text-xs text-muted-foreground">
+                {cluster.internalEdgeCount} internal / {cluster.externalEdgeCount} external
+                connections &middot; Detected {formatRelativeTime(cluster.detectedAt)}
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => onViewDetail(cluster.id)}
+              aria-label="View details"
+              className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted"
+            >
+              View details
+            </button>
+          </div>
+        </article>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/admin/sybil/status-badge.tsx b/src/components/admin/sybil/status-badge.tsx
new file mode 100644
index 0000000..bc3f1bf
--- /dev/null
+++ b/src/components/admin/sybil/status-badge.tsx
@@ -0,0 +1,32 @@
+/**
+ * StatusBadge - Colored badge for status strings used across admin sybil views.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { cn } from '@/lib/utils'
+
+const STATUS_COLORS: Record<string, string> = {
+  flagged: 'bg-destructive/10 text-destructive',
+  monitoring: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400',
+  dismissed: 'bg-muted text-muted-foreground',
+  banned: 'bg-destructive text-destructive-foreground',
+  pending: 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400',
+  action_taken: 'bg-green-500/10 text-green-700 dark:text-green-400',
+}
+
+interface StatusBadgeProps {
+  status: string
+}
+
+export function StatusBadge({ status }: StatusBadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
+        STATUS_COLORS[status] ?? 'bg-muted text-muted-foreground'
+      )}
+    >
+      {status}
+    </span>
+  )
+}
diff --git a/src/components/admin/sybil/suspicion-bar.tsx b/src/components/admin/sybil/suspicion-bar.tsx
new file mode 100644
index 0000000..84b3cd1
--- /dev/null
+++ b/src/components/admin/sybil/suspicion-bar.tsx
@@ -0,0 +1,28 @@
+/**
+ * SuspicionBar - Visual progress bar showing suspicion ratio with color coding.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { cn } from '@/lib/utils'
+
+interface SuspicionBarProps {
+  ratio: number
+}
+
+export function SuspicionBar({ ratio }: SuspicionBarProps) {
+  const percent = Math.round(ratio * 100)
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-2 w-20 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+        <div
+          className={cn(
+            'h-full rounded-full',
+            percent >= 70 ? 'bg-destructive' : percent >= 40 ? 'bg-yellow-500' : 'bg-green-500'
+          )}
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      <span className="text-xs text-muted-foreground">{percent}%</span>
+    </div>
+  )
+}
diff --git a/src/components/admin/sybil/trust-graph-status-card.tsx b/src/components/admin/sybil/trust-graph-status-card.tsx
new file mode 100644
index 0000000..d781a76
--- /dev/null
+++ b/src/components/admin/sybil/trust-graph-status-card.tsx
@@ -0,0 +1,58 @@
+/**
+ * TrustGraphStatusCard - Displays trust graph computation status and recompute button.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { formatRelativeTime, formatNumber } from '@/lib/format'
+import { cn } from '@/lib/utils'
+
+interface TrustGraphStatusCardProps {
+  status: {
+    lastComputedAt: string | null
+    totalNodes: number
+    totalEdges: number
+    clustersFlagged: number
+  }
+  onRecompute: () => void
+  recomputing: boolean
+}
+
+export function TrustGraphStatusCard({
+  status,
+  onRecompute,
+  recomputing,
+}: TrustGraphStatusCardProps) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <p className="text-sm text-muted-foreground">
+            {status.lastComputedAt
+              ? `Last computed: ${formatRelativeTime(status.lastComputedAt)}`
+              : 'Never computed'}
+            {' | '}
+            <span>{formatNumber(status.totalNodes)} nodes</span>
+            {' | '}
+            <span>{formatNumber(status.totalEdges)} edges</span>
+            {' | '}
+            <span>{status.clustersFlagged} clusters flagged</span>
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onRecompute}
+          disabled={recomputing}
+          aria-label="Recompute now"
+          className={cn(
+            'rounded-md px-4 py-2 text-sm font-medium transition-colors',
+            recomputing
+              ? 'cursor-not-allowed bg-muted text-muted-foreground'
+              : 'bg-primary text-primary-foreground hover:bg-primary/90'
+          )}
+        >
+          {recomputing ? 'Recomputing...' : 'Recompute Now'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/trust-seeds/add-seed-dialog.tsx b/src/components/admin/trust-seeds/add-seed-dialog.tsx
new file mode 100644
index 0000000..cbed452
--- /dev/null
+++ b/src/components/admin/trust-seeds/add-seed-dialog.tsx
@@ -0,0 +1,104 @@
+/**
+ * AddSeedDialog - Modal dialog for adding a new trust seed.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+'use client'
+
+import { useState, useEffect, useRef } from 'react'
+
+interface AddSeedDialogProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (data: { handle: string; communityId?: string; reason?: string }) => void
+}
+
+export function AddSeedDialog({ open, onClose, onSubmit }: AddSeedDialogProps) {
+  const [handle, setHandle] = useState('')
+  const [reason, setReason] = useState('')
+  const handleRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (open) {
+      handleRef.current?.focus()
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', handleKey)
+    return () => document.removeEventListener('keydown', handleKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!handle.trim()) return
+    onSubmit({
+      handle: handle.trim(),
+      reason: reason.trim() || undefined,
+    })
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Add trust seed"
+    >
+      <div className="mx-4 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
+        <h3 className="text-lg font-semibold text-foreground">Add Trust Seed</h3>
+        <form onSubmit={handleSubmit} className="mt-4 space-y-4">
+          <div>
+            <label htmlFor="seed-handle" className="block text-sm font-medium text-foreground">
+              Handle
+            </label>
+            <input
+              ref={handleRef}
+              id="seed-handle"
+              type="text"
+              value={handle}
+              onChange={(e) => setHandle(e.target.value)}
+              placeholder="user.bsky.social"
+              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="seed-reason" className="block text-sm font-medium text-foreground">
+              Reason
+            </label>
+            <input
+              id="seed-reason"
+              type="text"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder="Optional: why this account is trusted"
+              className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground"
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="rounded-md border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+            >
+              Add
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/trust-seeds/trust-seed-card.tsx b/src/components/admin/trust-seeds/trust-seed-card.tsx
new file mode 100644
index 0000000..6a494f8
--- /dev/null
+++ b/src/components/admin/trust-seeds/trust-seed-card.tsx
@@ -0,0 +1,62 @@
+/**
+ * TrustSeedCard - Card display for a single trust seed with remove control.
+ * @see specs/prd-web.md Section P2.10
+ */
+
+import { cn } from '@/lib/utils'
+import { formatDateShort } from '@/lib/format'
+import type { TrustSeed } from '@/lib/api/types'
+
+function TypeBadge({ implicit }: { implicit: boolean }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex rounded-full px-2 py-0.5 text-xs font-medium',
+        implicit ? 'bg-muted text-muted-foreground' : 'bg-primary/10 text-primary'
+      )}
+    >
+      {implicit ? 'Automatic' : 'Manual'}
+    </span>
+  )
+}
+
+interface TrustSeedCardProps {
+  seed: TrustSeed
+  onRemove: (seed: TrustSeed) => void
+}
+
+export function TrustSeedCard({ seed, onRemove }: TrustSeedCardProps) {
+  return (
+    <article className="rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-sm font-medium text-foreground">{seed.handle}</span>
+            <TypeBadge implicit={seed.implicit} />
+            {seed.communityId ? (
+              <span className="text-xs text-muted-foreground">Scoped</span>
+            ) : (
+              <span className="text-xs text-muted-foreground">Global</span>
+            )}
+          </div>
+          <p className="mt-0.5 text-xs text-muted-foreground">
+            {seed.displayName}
+            {seed.reason && <> &middot; {seed.reason}</>}
+            {' &middot; Added '}
+            {formatDateShort(seed.createdAt)}
+          </p>
+        </div>
+        {!seed.implicit && (
+          <button
+            type="button"
+            onClick={() => onRemove(seed)}
+            aria-label="Remove"
+            className="shrink-0 rounded-md border border-border px-3 py-1.5 text-sm text-destructive transition-colors hover:bg-destructive/10"
+          >
+            Remove
+          </button>
+        )}
+      </div>
+    </article>
+  )
+}
diff --git a/src/components/community-profile-form-fields.tsx b/src/components/community-profile-form-fields.tsx
new file mode 100644
index 0000000..c3deaac
--- /dev/null
+++ b/src/components/community-profile-form-fields.tsx
@@ -0,0 +1,77 @@
+/**
+ * CommunityProfileFormFields - Display name and bio inputs for community profile.
+ * @see specs/prd-web.md Section M8 (Settings / Community Profile)
+ */
+
+import { cn } from '@/lib/utils'
+
+const DISPLAY_NAME_MAX = 256
+const BIO_MAX = 2048
+
+interface CommunityProfileFormFieldsProps {
+  displayName: string
+  bio: string
+  placeholderDisplayName?: string
+  placeholderBio?: string
+  onDisplayNameChange: (value: string) => void
+  onBioChange: (value: string) => void
+}
+
+export function CommunityProfileFormFields({
+  displayName,
+  bio,
+  placeholderDisplayName,
+  placeholderBio,
+  onDisplayNameChange,
+  onBioChange,
+}: CommunityProfileFormFieldsProps) {
+  return (
+    <>
+      <div className="space-y-1">
+        <label
+          htmlFor="community-display-name"
+          className="block text-sm font-medium text-foreground"
+        >
+          Display name
+        </label>
+        <input
+          id="community-display-name"
+          type="text"
+          value={displayName}
+          onChange={(e) => onDisplayNameChange(e.target.value)}
+          placeholder={placeholderDisplayName ?? 'Display name'}
+          maxLength={DISPLAY_NAME_MAX}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        />
+        <p className="text-xs text-muted-foreground">
+          {displayName.length}/{DISPLAY_NAME_MAX} characters. Leave empty to use your AT Protocol
+          display name.
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <label htmlFor="community-bio" className="block text-sm font-medium text-foreground">
+          Bio
+        </label>
+        <textarea
+          id="community-bio"
+          value={bio}
+          onChange={(e) => onBioChange(e.target.value)}
+          placeholder={placeholderBio ?? 'Tell the community about yourself'}
+          maxLength={BIO_MAX}
+          rows={4}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        />
+        <p className="text-xs text-muted-foreground">
+          {bio.length}/{BIO_MAX} characters. Leave empty to use your AT Protocol bio.
+        </p>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/community-profile-settings.tsx b/src/components/community-profile-settings.tsx
index f315c24..54ed565 100644
--- a/src/components/community-profile-settings.tsx
+++ b/src/components/community-profile-settings.tsx
@@ -1,274 +1,60 @@
 /**
- * CommunityProfileSettings - Section for customizing per-community profile.
- * Displays source AT Protocol profile as reference, override form for
- * display name / bio / avatar / banner, and reset functionality.
+ * CommunityProfileSettings - Per-community profile customization section.
  * @see specs/prd-web.md Section M8 (Settings / Community Profile)
  */
 
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
 import { cn } from '@/lib/utils'
 import { ImageUpload } from '@/components/image-upload'
 import { ConfirmDialog } from '@/components/confirm-dialog'
+import { SourceProfilePreview } from '@/components/source-profile-preview'
+import { CommunityProfileFormFields } from '@/components/community-profile-form-fields'
 import { useAuth } from '@/hooks/use-auth'
-import {
-  getPublicSettings,
-  getCommunityProfile,
-  updateCommunityProfile,
-  resetCommunityProfile,
-  uploadCommunityAvatar,
-  uploadCommunityBanner,
-} from '@/lib/api/client'
-import type { CommunityProfile } from '@/lib/api/types'
+import { useCommunityProfile } from '@/hooks/use-community-profile'
 import { ArrowCounterClockwise } from '@phosphor-icons/react'
 
-const DISPLAY_NAME_MAX = 256
-const BIO_MAX = 2048
-
 export function CommunityProfileSettings() {
-  const { getAccessToken, isAuthenticated } = useAuth()
-
-  const [communityDid, setCommunityDid] = useState<string | null>(null)
-  const [profile, setProfile] = useState<CommunityProfile | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState(false)
-  const [showResetConfirm, setShowResetConfirm] = useState(false)
-
-  // Form state for text overrides
-  const [displayName, setDisplayName] = useState('')
-  const [bio, setBio] = useState('')
-
-  // Load community DID from public settings, then load profile
-  useEffect(() => {
-    if (!isAuthenticated) {
-      setLoading(false)
-      return
-    }
-
-    const token = getAccessToken()
-    if (!token) {
-      setLoading(false)
-      return
-    }
-
-    let cancelled = false
-
-    async function loadProfile() {
-      try {
-        const publicSettings = await getPublicSettings()
-        const did = publicSettings.communityDid
-        if (!did) {
-          // Community not initialized yet
-          if (!cancelled) {
-            setLoading(false)
-          }
-          return
-        }
-
-        if (!cancelled) {
-          setCommunityDid(did)
-        }
-
-        const currentToken = token
-        if (!currentToken) return
-
-        const communityProfile = await getCommunityProfile(did, currentToken)
-        if (!cancelled) {
-          setProfile(communityProfile)
-          // Initialize form with current override values (empty string means "use source")
-          setDisplayName(communityProfile.hasOverride ? (communityProfile.displayName ?? '') : '')
-          setBio(communityProfile.hasOverride ? (communityProfile.bio ?? '') : '')
-        }
-      } catch {
-        if (!cancelled) {
-          setError('Failed to load community profile.')
-        }
-      } finally {
-        if (!cancelled) {
-          setLoading(false)
-        }
-      }
-    }
-
-    void loadProfile()
-    return () => {
-      cancelled = true
-    }
-  }, [getAccessToken, isAuthenticated])
-
-  const handleSave = useCallback(
-    async (e: React.FormEvent) => {
-      e.preventDefault()
-      if (!communityDid) return
-
-      const token = getAccessToken()
-      if (!token) {
-        setError('Not authenticated')
-        return
-      }
-
-      setSaving(true)
-      setError(null)
-      setSuccess(false)
-
-      try {
-        await updateCommunityProfile(
-          communityDid,
-          {
-            displayName: displayName.trim() || null,
-            bio: bio.trim() || null,
-          },
-          token
-        )
-
-        // Reload profile to get fresh state
-        const updatedProfile = await getCommunityProfile(communityDid, token)
-        setProfile(updatedProfile)
-        setSuccess(true)
-      } catch {
-        setError('Failed to save community profile.')
-      } finally {
-        setSaving(false)
-      }
-    },
-    [communityDid, displayName, bio, getAccessToken]
-  )
-
-  const handleReset = useCallback(async () => {
-    if (!communityDid) return
-
-    const token = getAccessToken()
-    if (!token) {
-      setError('Not authenticated')
-      return
-    }
-
-    setShowResetConfirm(false)
-    setSaving(true)
-    setError(null)
-    setSuccess(false)
-
-    try {
-      await resetCommunityProfile(communityDid, token)
-
-      // Reload profile after reset
-      const updatedProfile = await getCommunityProfile(communityDid, token)
-      setProfile(updatedProfile)
-      setDisplayName('')
-      setBio('')
-      setSuccess(true)
-    } catch {
-      setError('Failed to reset community profile.')
-    } finally {
-      setSaving(false)
-    }
-  }, [communityDid, getAccessToken])
-
-  const handleAvatarUpload = useCallback(
-    async (file: File): Promise<{ url: string }> => {
-      if (!communityDid) throw new Error('No community DID')
-      const token = getAccessToken()
-      if (!token) throw new Error('Not authenticated')
-
-      const result = await uploadCommunityAvatar(communityDid, file, token)
-
-      // Reload profile to reflect new avatar
-      const updatedProfile = await getCommunityProfile(communityDid, token)
-      setProfile(updatedProfile)
-
-      return result
-    },
-    [communityDid, getAccessToken]
-  )
-
-  const handleBannerUpload = useCallback(
-    async (file: File): Promise<{ url: string }> => {
-      if (!communityDid) throw new Error('No community DID')
-      const token = getAccessToken()
-      if (!token) throw new Error('Not authenticated')
-
-      const result = await uploadCommunityBanner(communityDid, file, token)
-
-      // Reload profile to reflect new banner
-      const updatedProfile = await getCommunityProfile(communityDid, token)
-      setProfile(updatedProfile)
-
-      return result
-    },
-    [communityDid, getAccessToken]
-  )
-
-  const handleAvatarRemove = useCallback(async () => {
-    if (!communityDid) return
-    const token = getAccessToken()
-    if (!token) return
-
-    try {
-      // Update profile with null avatar by saving without avatar override
-      // The API interprets a PUT without avatar fields as keeping current state,
-      // so we reset the full profile and re-save text fields
-      await updateCommunityProfile(
-        communityDid,
-        {
-          displayName: displayName.trim() || null,
-          bio: bio.trim() || null,
-        },
-        token
-      )
-      const updatedProfile = await getCommunityProfile(communityDid, token)
-      setProfile(updatedProfile)
-    } catch {
-      setError('Failed to remove avatar.')
-    }
-  }, [communityDid, displayName, bio, getAccessToken])
-
-  const handleBannerRemove = useCallback(async () => {
-    if (!communityDid) return
-    const token = getAccessToken()
-    if (!token) return
-
-    try {
-      await updateCommunityProfile(
-        communityDid,
-        {
-          displayName: displayName.trim() || null,
-          bio: bio.trim() || null,
-        },
-        token
-      )
-      const updatedProfile = await getCommunityProfile(communityDid, token)
-      setProfile(updatedProfile)
-    } catch {
-      setError('Failed to remove banner.')
-    }
-  }, [communityDid, displayName, bio, getAccessToken])
+  const { isAuthenticated } = useAuth()
+  const {
+    communityDid,
+    profile,
+    loading,
+    saving,
+    error,
+    success,
+    displayName,
+    bio,
+    setDisplayName,
+    setBio,
+    handleSave,
+    handleReset,
+    handleAvatarUpload,
+    handleBannerUpload,
+    handleAvatarRemove,
+    handleBannerRemove,
+    showResetConfirm,
+    setShowResetConfirm,
+  } = useCommunityProfile()
 
   if (!isAuthenticated) return null
 
-  if (loading) {
-    return (
-      <fieldset className="space-y-4 rounded-lg border border-border p-4">
-        <legend className="px-2 text-sm font-semibold text-foreground">Community Profile</legend>
-        <div className="animate-pulse space-y-3">
-          <div className="h-24 w-24 rounded-full bg-muted" />
-          <div className="h-10 rounded-md bg-muted" />
-          <div className="h-20 rounded-md bg-muted" />
-        </div>
-      </fieldset>
-    )
-  }
-
-  if (!communityDid) {
+  if (loading || !communityDid) {
     return (
       <fieldset className="space-y-4 rounded-lg border border-border p-4">
         <legend className="px-2 text-sm font-semibold text-foreground">Community Profile</legend>
-        <p className="text-sm text-muted-foreground">
-          Community has not been initialized yet. Profile customization will be available once the
-          community is set up.
-        </p>
+        {loading ? (
+          <div className="animate-pulse space-y-3">
+            <div className="h-24 w-24 rounded-full bg-muted" />
+            <div className="h-10 rounded-md bg-muted" />
+            <div className="h-20 rounded-md bg-muted" />
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Community has not been initialized yet. Profile customization will be available once the
+            community is set up.
+          </p>
+        )}
       </fieldset>
     )
   }
@@ -301,38 +87,14 @@ export function CommunityProfileSettings() {
           </p>
         )}
 
-        {/* Source profile preview (read-only) */}
         {profile?.source && (
-          <div className="space-y-2 rounded-md border border-dashed border-border bg-muted/30 p-3">
-            <p className="text-xs font-medium text-muted-foreground">
-              Your AT Protocol profile (source)
-            </p>
-            <div className="flex items-center gap-3">
-              {profile.source.avatarUrl ? (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  src={profile.source.avatarUrl}
-                  alt="Source avatar"
-                  className="h-10 w-10 rounded-full object-cover"
-                />
-              ) : (
-                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
-                  <span className="text-xs">--</span>
-                </div>
-              )}
-              <div className="min-w-0">
-                <p className="truncate text-sm text-muted-foreground">
-                  {profile.source.displayName || '(no display name)'}
-                </p>
-                <p className="truncate text-xs text-muted-foreground/70">
-                  {profile.source.bio || '(no bio)'}
-                </p>
-              </div>
-            </div>
-          </div>
+          <SourceProfilePreview
+            avatarUrl={profile.source.avatarUrl}
+            displayName={profile.source.displayName}
+            bio={profile.source.bio}
+          />
         )}
 
-        {/* Avatar upload */}
         <ImageUpload
           currentUrl={profile?.avatarUrl ?? null}
           onUpload={handleAvatarUpload}
@@ -341,7 +103,6 @@ export function CommunityProfileSettings() {
           aspectRatio="1/1"
         />
 
-        {/* Banner upload */}
         <ImageUpload
           currentUrl={profile?.bannerUrl ?? null}
           onUpload={handleBannerUpload}
@@ -350,55 +111,15 @@ export function CommunityProfileSettings() {
           aspectRatio="3/1"
         />
 
-        {/* Display name */}
-        <div className="space-y-1">
-          <label
-            htmlFor="community-display-name"
-            className="block text-sm font-medium text-foreground"
-          >
-            Display name
-          </label>
-          <input
-            id="community-display-name"
-            type="text"
-            value={displayName}
-            onChange={(e) => setDisplayName(e.target.value)}
-            placeholder={profile?.source.displayName ?? 'Display name'}
-            maxLength={DISPLAY_NAME_MAX}
-            className={cn(
-              'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-            )}
-          />
-          <p className="text-xs text-muted-foreground">
-            {displayName.length}/{DISPLAY_NAME_MAX} characters. Leave empty to use your AT Protocol
-            display name.
-          </p>
-        </div>
-
-        {/* Bio */}
-        <div className="space-y-1">
-          <label htmlFor="community-bio" className="block text-sm font-medium text-foreground">
-            Bio
-          </label>
-          <textarea
-            id="community-bio"
-            value={bio}
-            onChange={(e) => setBio(e.target.value)}
-            placeholder={profile?.source.bio ?? 'Tell the community about yourself'}
-            maxLength={BIO_MAX}
-            rows={4}
-            className={cn(
-              'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-            )}
-          />
-          <p className="text-xs text-muted-foreground">
-            {bio.length}/{BIO_MAX} characters. Leave empty to use your AT Protocol bio.
-          </p>
-        </div>
+        <CommunityProfileFormFields
+          displayName={displayName}
+          bio={bio}
+          placeholderDisplayName={profile?.source.displayName ?? undefined}
+          placeholderBio={profile?.source.bio ?? undefined}
+          onDisplayNameChange={setDisplayName}
+          onBioChange={setBio}
+        />
 
-        {/* Action buttons */}
         <div className="flex items-center justify-between gap-3">
           <button
             type="button"
diff --git a/src/components/markdown-editor.tsx b/src/components/markdown-editor.tsx
index 43fe7e6..86e0072 100644
--- a/src/components/markdown-editor.tsx
+++ b/src/components/markdown-editor.tsx
@@ -8,89 +8,9 @@
 'use client'
 
 import { useRef, useState, useCallback } from 'react'
-import { TextB, TextItalic, Link as LinkIcon, Code, Quotes, List } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
-
-interface ToolbarAction {
-  label: string
-  icon: typeof TextB
-  apply: (value: string, start: number, end: number) => { result: string; cursor: number }
-}
-
-const TOOLBAR_ACTIONS: ToolbarAction[] = [
-  {
-    label: 'Bold',
-    icon: TextB,
-    apply: (value, start, end) => {
-      const selected = value.slice(start, end)
-      const replacement = selected ? `**${selected}**` : '**text**'
-      return {
-        result: value.slice(0, start) + replacement + value.slice(end),
-        cursor: selected ? start + replacement.length : start + 2,
-      }
-    },
-  },
-  {
-    label: 'Italic',
-    icon: TextItalic,
-    apply: (value, start, end) => {
-      const selected = value.slice(start, end)
-      const replacement = selected ? `*${selected}*` : '*text*'
-      return {
-        result: value.slice(0, start) + replacement + value.slice(end),
-        cursor: selected ? start + replacement.length : start + 1,
-      }
-    },
-  },
-  {
-    label: 'Link',
-    icon: LinkIcon,
-    apply: (value, start, end) => {
-      const selected = value.slice(start, end)
-      const replacement = selected ? `[${selected}](url)` : '[text](url)'
-      return {
-        result: value.slice(0, start) + replacement + value.slice(end),
-        cursor: selected ? start + selected.length + 3 : start + 1,
-      }
-    },
-  },
-  {
-    label: 'Code',
-    icon: Code,
-    apply: (value, start, end) => {
-      const selected = value.slice(start, end)
-      const replacement = selected ? `\`${selected}\`` : '`code`'
-      return {
-        result: value.slice(0, start) + replacement + value.slice(end),
-        cursor: selected ? start + replacement.length : start + 1,
-      }
-    },
-  },
-  {
-    label: 'Quote',
-    icon: Quotes,
-    apply: (value, start, end) => {
-      const selected = value.slice(start, end)
-      const replacement = `> ${selected || 'quote'}`
-      return {
-        result: value.slice(0, start) + replacement + value.slice(end),
-        cursor: start + replacement.length,
-      }
-    },
-  },
-  {
-    label: 'List',
-    icon: List,
-    apply: (value, start, end) => {
-      const selected = value.slice(start, end)
-      const replacement = `- ${selected || 'item'}`
-      return {
-        result: value.slice(0, start) + replacement + value.slice(end),
-        cursor: start + replacement.length,
-      }
-    },
-  },
-]
+import { TOOLBAR_ACTIONS } from '@/components/markdown-toolbar-actions'
+import type { ToolbarAction } from '@/components/markdown-toolbar-actions'
 
 interface MarkdownEditorProps {
   value: string
@@ -126,7 +46,6 @@ export function MarkdownEditor({
 
       onChange(result)
 
-      // Restore focus and cursor position after React re-render
       requestAnimationFrame(() => {
         textarea.focus()
         textarea.setSelectionRange(cursor, cursor)
@@ -172,7 +91,6 @@ export function MarkdownEditor({
         {label}
       </label>
 
-      {/* Toolbar */}
       <div
         ref={toolbarRef}
         role="toolbar"
@@ -199,7 +117,6 @@ export function MarkdownEditor({
         })}
       </div>
 
-      {/* Textarea */}
       <textarea
         ref={textareaRef}
         id={id}
@@ -216,7 +133,6 @@ export function MarkdownEditor({
         )}
       />
 
-      {/* Error message */}
       {error && (
         <p id={errorId} className="text-sm text-destructive" role="alert">
           {error}
diff --git a/src/components/markdown-toolbar-actions.ts b/src/components/markdown-toolbar-actions.ts
new file mode 100644
index 0000000..e71174e
--- /dev/null
+++ b/src/components/markdown-toolbar-actions.ts
@@ -0,0 +1,88 @@
+/**
+ * Markdown toolbar actions configuration.
+ * Each action defines how to wrap/insert markdown formatting.
+ * @see specs/prd-web.md Section 4 (Editor Components)
+ */
+
+import { TextB, TextItalic, Link as LinkIcon, Code, Quotes, List } from '@phosphor-icons/react'
+
+export interface ToolbarAction {
+  label: string
+  icon: typeof TextB
+  apply: (value: string, start: number, end: number) => { result: string; cursor: number }
+}
+
+export const TOOLBAR_ACTIONS: ToolbarAction[] = [
+  {
+    label: 'Bold',
+    icon: TextB,
+    apply: (value, start, end) => {
+      const selected = value.slice(start, end)
+      const replacement = selected ? `**${selected}**` : '**text**'
+      return {
+        result: value.slice(0, start) + replacement + value.slice(end),
+        cursor: selected ? start + replacement.length : start + 2,
+      }
+    },
+  },
+  {
+    label: 'Italic',
+    icon: TextItalic,
+    apply: (value, start, end) => {
+      const selected = value.slice(start, end)
+      const replacement = selected ? `*${selected}*` : '*text*'
+      return {
+        result: value.slice(0, start) + replacement + value.slice(end),
+        cursor: selected ? start + replacement.length : start + 1,
+      }
+    },
+  },
+  {
+    label: 'Link',
+    icon: LinkIcon,
+    apply: (value, start, end) => {
+      const selected = value.slice(start, end)
+      const replacement = selected ? `[${selected}](url)` : '[text](url)'
+      return {
+        result: value.slice(0, start) + replacement + value.slice(end),
+        cursor: selected ? start + selected.length + 3 : start + 1,
+      }
+    },
+  },
+  {
+    label: 'Code',
+    icon: Code,
+    apply: (value, start, end) => {
+      const selected = value.slice(start, end)
+      const replacement = selected ? `\`${selected}\`` : '`code`'
+      return {
+        result: value.slice(0, start) + replacement + value.slice(end),
+        cursor: selected ? start + replacement.length : start + 1,
+      }
+    },
+  },
+  {
+    label: 'Quote',
+    icon: Quotes,
+    apply: (value, start, end) => {
+      const selected = value.slice(start, end)
+      const replacement = `> ${selected || 'quote'}`
+      return {
+        result: value.slice(0, start) + replacement + value.slice(end),
+        cursor: start + replacement.length,
+      }
+    },
+  },
+  {
+    label: 'List',
+    icon: List,
+    apply: (value, start, end) => {
+      const selected = value.slice(start, end)
+      const replacement = `- ${selected || 'item'}`
+      return {
+        result: value.slice(0, start) + replacement + value.slice(end),
+        cursor: start + replacement.length,
+      }
+    },
+  },
+]
diff --git a/src/components/onboarding-field-input.tsx b/src/components/onboarding-field-input.tsx
new file mode 100644
index 0000000..2fe438a
--- /dev/null
+++ b/src/components/onboarding-field-input.tsx
@@ -0,0 +1,175 @@
+/**
+ * OnboardingFieldInput - Dynamic field renderer for onboarding modal.
+ * Renders the appropriate input based on field type configuration.
+ */
+
+import type { OnboardingField } from '@/lib/api/types'
+
+const AGE_OPTIONS = [
+  { value: 0, label: 'Rather not say' },
+  { value: 13, label: '13+' },
+  { value: 14, label: '14+' },
+  { value: 15, label: '15+' },
+  { value: 16, label: '16+' },
+  { value: 18, label: '18+' },
+] as const
+
+const INPUT_CLASS =
+  'mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground'
+
+function FieldLabel({
+  htmlFor,
+  label,
+  required,
+  description,
+  block = true,
+}: {
+  htmlFor: string
+  label: string
+  required: boolean
+  description?: string | null
+  block?: boolean
+}) {
+  return (
+    <>
+      <label
+        htmlFor={htmlFor}
+        className={`${block ? 'block ' : ''}text-sm font-medium text-foreground`}
+      >
+        {label}
+        {required && <span className="ml-1 text-destructive">*</span>}
+      </label>
+      {description && <p className="mt-0.5 text-xs text-muted-foreground">{description}</p>}
+    </>
+  )
+}
+
+interface OnboardingFieldInputProps {
+  field: OnboardingField
+  value: unknown
+  onChange: (value: unknown) => void
+}
+
+export function OnboardingFieldInput({ field, value, onChange }: OnboardingFieldInputProps) {
+  const labelId = `onboarding-${field.id}`
+  const required = field.isMandatory
+
+  switch (field.fieldType) {
+    case 'age_confirmation':
+      return (
+        <div>
+          <FieldLabel
+            htmlFor={labelId}
+            label={field.label}
+            required={required}
+            description={field.description}
+          />
+          <select
+            id={labelId}
+            value={value !== undefined ? String(value) : ''}
+            onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+            className={INPUT_CLASS}
+          >
+            <option value="">Select age bracket...</option>
+            {AGE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )
+
+    case 'tos_acceptance':
+    case 'custom_checkbox':
+      return (
+        <div className="flex items-start gap-2">
+          <input
+            id={labelId}
+            type="checkbox"
+            checked={value === true}
+            onChange={(e) => onChange(e.target.checked)}
+            className="mt-1 h-4 w-4 rounded border-border"
+          />
+          <div>
+            <FieldLabel
+              htmlFor={labelId}
+              label={field.label}
+              required={required}
+              description={field.description}
+              block={false}
+            />
+          </div>
+        </div>
+      )
+
+    case 'newsletter_email':
+      return (
+        <div>
+          <FieldLabel
+            htmlFor={labelId}
+            label={field.label}
+            required={required}
+            description={field.description}
+          />
+          <input
+            id={labelId}
+            type="email"
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value || undefined)}
+            placeholder="your@email.com"
+            className={INPUT_CLASS}
+          />
+        </div>
+      )
+
+    case 'custom_text':
+      return (
+        <div>
+          <FieldLabel
+            htmlFor={labelId}
+            label={field.label}
+            required={required}
+            description={field.description}
+          />
+          <textarea
+            id={labelId}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value || undefined)}
+            rows={3}
+            className={INPUT_CLASS}
+          />
+        </div>
+      )
+
+    case 'custom_select': {
+      const options = (field.config?.options ?? []) as string[]
+      return (
+        <div>
+          <FieldLabel
+            htmlFor={labelId}
+            label={field.label}
+            required={required}
+            description={field.description}
+          />
+          <select
+            id={labelId}
+            value={typeof value === 'string' ? value : ''}
+            onChange={(e) => onChange(e.target.value || undefined)}
+            className={INPUT_CLASS}
+          >
+            <option value="">Select...</option>
+            {options.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        </div>
+      )
+    }
+
+    default:
+      return null
+  }
+}
diff --git a/src/components/onboarding-modal.tsx b/src/components/onboarding-modal.tsx
index 389251c..89aad3c 100644
--- a/src/components/onboarding-modal.tsx
+++ b/src/components/onboarding-modal.tsx
@@ -8,6 +8,7 @@
 
 import { useState } from 'react'
 import { cn } from '@/lib/utils'
+import { OnboardingFieldInput } from '@/components/onboarding-field-input'
 import type { OnboardingField } from '@/lib/api/types'
 
 interface OnboardingModalProps {
@@ -17,16 +18,6 @@ interface OnboardingModalProps {
   onCancel: () => void
 }
 
-/** Valid age bracket options for age_confirmation fields */
-const AGE_OPTIONS = [
-  { value: 0, label: 'Rather not say' },
-  { value: 13, label: '13+' },
-  { value: 14, label: '14+' },
-  { value: 15, label: '15+' },
-  { value: 16, label: '16+' },
-  { value: 18, label: '18+' },
-] as const
-
 export function OnboardingModal({ open, fields, onSubmit, onCancel }: OnboardingModalProps) {
   const [responses, setResponses] = useState<Record<string, unknown>>({})
   const [submitting, setSubmitting] = useState(false)
@@ -121,161 +112,3 @@ export function OnboardingModal({ open, fields, onSubmit, onCancel }: Onboarding
     </div>
   )
 }
-
-/** Render the appropriate input for a field type */
-function OnboardingFieldInput({
-  field,
-  value,
-  onChange,
-}: {
-  field: OnboardingField
-  value: unknown
-  onChange: (value: unknown) => void
-}) {
-  const labelId = `onboarding-${field.id}`
-  const required = field.isMandatory
-
-  switch (field.fieldType) {
-    case 'age_confirmation':
-      return (
-        <div>
-          <label htmlFor={labelId} className="block text-sm font-medium text-foreground">
-            {field.label}
-            {required && <span className="ml-1 text-destructive">*</span>}
-          </label>
-          {field.description && (
-            <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-          )}
-          <select
-            id={labelId}
-            value={value !== undefined ? String(value) : ''}
-            onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
-            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-          >
-            <option value="">Select age bracket...</option>
-            {AGE_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      )
-
-    case 'tos_acceptance':
-      return (
-        <div className="flex items-start gap-2">
-          <input
-            id={labelId}
-            type="checkbox"
-            checked={value === true}
-            onChange={(e) => onChange(e.target.checked)}
-            className="mt-1 h-4 w-4 rounded border-border"
-          />
-          <div>
-            <label htmlFor={labelId} className="text-sm font-medium text-foreground">
-              {field.label}
-              {required && <span className="ml-1 text-destructive">*</span>}
-            </label>
-            {field.description && (
-              <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-            )}
-          </div>
-        </div>
-      )
-
-    case 'newsletter_email':
-      return (
-        <div>
-          <label htmlFor={labelId} className="block text-sm font-medium text-foreground">
-            {field.label}
-            {required && <span className="ml-1 text-destructive">*</span>}
-          </label>
-          {field.description && (
-            <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-          )}
-          <input
-            id={labelId}
-            type="email"
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value || undefined)}
-            placeholder="your@email.com"
-            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-          />
-        </div>
-      )
-
-    case 'custom_text':
-      return (
-        <div>
-          <label htmlFor={labelId} className="block text-sm font-medium text-foreground">
-            {field.label}
-            {required && <span className="ml-1 text-destructive">*</span>}
-          </label>
-          {field.description && (
-            <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-          )}
-          <textarea
-            id={labelId}
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value || undefined)}
-            rows={3}
-            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-          />
-        </div>
-      )
-
-    case 'custom_select': {
-      const options = (field.config?.options ?? []) as string[]
-      return (
-        <div>
-          <label htmlFor={labelId} className="block text-sm font-medium text-foreground">
-            {field.label}
-            {required && <span className="ml-1 text-destructive">*</span>}
-          </label>
-          {field.description && (
-            <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-          )}
-          <select
-            id={labelId}
-            value={typeof value === 'string' ? value : ''}
-            onChange={(e) => onChange(e.target.value || undefined)}
-            className="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground"
-          >
-            <option value="">Select...</option>
-            {options.map((opt) => (
-              <option key={opt} value={opt}>
-                {opt}
-              </option>
-            ))}
-          </select>
-        </div>
-      )
-    }
-
-    case 'custom_checkbox':
-      return (
-        <div className="flex items-start gap-2">
-          <input
-            id={labelId}
-            type="checkbox"
-            checked={value === true}
-            onChange={(e) => onChange(e.target.checked)}
-            className="mt-1 h-4 w-4 rounded border-border"
-          />
-          <div>
-            <label htmlFor={labelId} className="text-sm font-medium text-foreground">
-              {field.label}
-              {required && <span className="ml-1 text-destructive">*</span>}
-            </label>
-            {field.description && (
-              <p className="mt-0.5 text-xs text-muted-foreground">{field.description}</p>
-            )}
-          </div>
-        </div>
-      )
-
-    default:
-      return null
-  }
-}
diff --git a/src/components/report-dialog.tsx b/src/components/report-dialog.tsx
index b76cb6a..bcaf8c8 100644
--- a/src/components/report-dialog.tsx
+++ b/src/components/report-dialog.tsx
@@ -2,9 +2,7 @@
  * ReportDialog - Report content with AT Protocol reason categories.
  * Button + accessible dialog with reason selection, optional details,
  * and success/error acknowledgment after submission.
- * Follows com.atproto.moderation.defs reason types.
  * @see specs/prd-web.md Section M7 (Report button)
- * @see decisions/content-moderation.md
  */
 
 'use client'
@@ -12,6 +10,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Flag, CheckCircle } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
+import { ReportFormContent } from '@/components/report-form-content'
 
 export interface ReportSubmission {
   subjectUri: string
@@ -26,15 +25,6 @@ interface ReportDialogProps {
   className?: string
 }
 
-const REPORT_REASONS = [
-  { value: 'spam', label: 'Spam' },
-  { value: 'sexual', label: 'Sexual content' },
-  { value: 'harassment', label: 'Harassment' },
-  { value: 'violation', label: 'Rule violation' },
-  { value: 'misleading', label: 'Misleading' },
-  { value: 'other', label: 'Other' },
-] as const
-
 export function ReportDialog({
   subjectUri,
   onSubmit,
@@ -60,20 +50,14 @@ export function ReportDialog({
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        handleClose()
-      }
+      if (e.key === 'Escape') handleClose()
     },
     [handleClose]
   )
 
   useEffect(() => {
-    if (open) {
-      document.addEventListener('keydown', handleKeyDown)
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
+    if (open) document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
   }, [open, handleKeyDown])
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -148,88 +132,17 @@ export function ReportDialog({
                 </button>
               </div>
             ) : (
-              <>
-                <h2 id="report-dialog-title" className="text-lg font-semibold text-foreground">
-                  Report Content
-                </h2>
-
-                <form onSubmit={handleSubmit} className="mt-4 space-y-4" noValidate>
-                  <fieldset disabled={submitting}>
-                    <legend className="text-sm font-medium text-foreground">Reason</legend>
-                    <div className="mt-2 space-y-2">
-                      {REPORT_REASONS.map((r) => (
-                        <label key={r.value} className="flex items-center gap-2">
-                          <input
-                            type="radio"
-                            name="report-reason"
-                            value={r.value}
-                            checked={reason === r.value}
-                            onChange={() => {
-                              setReason(r.value)
-                              setError('')
-                            }}
-                            className="h-4 w-4 border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                          />
-                          <span className="text-sm text-foreground">{r.label}</span>
-                        </label>
-                      ))}
-                    </div>
-                    {error && (
-                      <p className="mt-1 text-sm text-destructive" role="alert">
-                        {error}
-                      </p>
-                    )}
-                  </fieldset>
-
-                  <div className="space-y-1">
-                    <label
-                      htmlFor="report-details"
-                      className="block text-sm font-medium text-foreground"
-                    >
-                      Additional details
-                    </label>
-                    <textarea
-                      id="report-details"
-                      value={details}
-                      onChange={(e) => setDetails(e.target.value)}
-                      placeholder="Optional: provide more context"
-                      rows={3}
-                      disabled={submitting}
-                      className={cn(
-                        'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-                        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                        'disabled:cursor-not-allowed disabled:opacity-50'
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex justify-end gap-3">
-                    <button
-                      type="button"
-                      onClick={handleClose}
-                      disabled={submitting}
-                      className={cn(
-                        'rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors',
-                        'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                        'disabled:cursor-not-allowed disabled:opacity-50'
-                      )}
-                    >
-                      Cancel
-                    </button>
-                    <button
-                      type="submit"
-                      disabled={submitting}
-                      className={cn(
-                        'rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors',
-                        'hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                        'disabled:cursor-not-allowed disabled:opacity-50'
-                      )}
-                    >
-                      {submitting ? 'Submitting...' : 'Submit Report'}
-                    </button>
-                  </div>
-                </form>
-              </>
+              <ReportFormContent
+                reason={reason}
+                details={details}
+                error={error}
+                submitting={submitting}
+                onReasonChange={setReason}
+                onDetailsChange={setDetails}
+                onErrorClear={() => setError('')}
+                onSubmit={handleSubmit}
+                onClose={handleClose}
+              />
             )}
           </div>
         </div>
diff --git a/src/components/report-form-content.tsx b/src/components/report-form-content.tsx
new file mode 100644
index 0000000..9ea90dd
--- /dev/null
+++ b/src/components/report-form-content.tsx
@@ -0,0 +1,121 @@
+/**
+ * ReportFormContent - Report form with reason radio buttons and details textarea.
+ * @see specs/prd-web.md Section M7 (Report button)
+ */
+
+import { cn } from '@/lib/utils'
+
+const REPORT_REASONS = [
+  { value: 'spam', label: 'Spam' },
+  { value: 'sexual', label: 'Sexual content' },
+  { value: 'harassment', label: 'Harassment' },
+  { value: 'violation', label: 'Rule violation' },
+  { value: 'misleading', label: 'Misleading' },
+  { value: 'other', label: 'Other' },
+] as const
+
+interface ReportFormContentProps {
+  reason: string
+  details: string
+  error: string
+  submitting: boolean
+  onReasonChange: (reason: string) => void
+  onDetailsChange: (details: string) => void
+  onErrorClear: () => void
+  onSubmit: (e: React.FormEvent) => void
+  onClose: () => void
+}
+
+export function ReportFormContent({
+  reason,
+  details,
+  error,
+  submitting,
+  onReasonChange,
+  onDetailsChange,
+  onErrorClear,
+  onSubmit,
+  onClose,
+}: ReportFormContentProps) {
+  return (
+    <>
+      <h2 id="report-dialog-title" className="text-lg font-semibold text-foreground">
+        Report Content
+      </h2>
+
+      <form onSubmit={onSubmit} className="mt-4 space-y-4" noValidate>
+        <fieldset disabled={submitting}>
+          <legend className="text-sm font-medium text-foreground">Reason</legend>
+          <div className="mt-2 space-y-2">
+            {REPORT_REASONS.map((r) => (
+              <label key={r.value} className="flex items-center gap-2">
+                <input
+                  type="radio"
+                  name="report-reason"
+                  value={r.value}
+                  checked={reason === r.value}
+                  onChange={() => {
+                    onReasonChange(r.value)
+                    onErrorClear()
+                  }}
+                  className="h-4 w-4 border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+                />
+                <span className="text-sm text-foreground">{r.label}</span>
+              </label>
+            ))}
+          </div>
+          {error && (
+            <p className="mt-1 text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          )}
+        </fieldset>
+
+        <div className="space-y-1">
+          <label htmlFor="report-details" className="block text-sm font-medium text-foreground">
+            Additional details
+          </label>
+          <textarea
+            id="report-details"
+            value={details}
+            onChange={(e) => onDetailsChange(e.target.value)}
+            placeholder="Optional: provide more context"
+            rows={3}
+            disabled={submitting}
+            className={cn(
+              'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'disabled:cursor-not-allowed disabled:opacity-50'
+            )}
+          />
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={submitting}
+            className={cn(
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors',
+              'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'disabled:cursor-not-allowed disabled:opacity-50'
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={submitting}
+            className={cn(
+              'rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors',
+              'hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              'disabled:cursor-not-allowed disabled:opacity-50'
+            )}
+          >
+            {submitting ? 'Submitting...' : 'Submit Report'}
+          </button>
+        </div>
+      </form>
+    </>
+  )
+}
diff --git a/src/components/search-input.tsx b/src/components/search-input.tsx
index 4a0a117..50dcf82 100644
--- a/src/components/search-input.tsx
+++ b/src/components/search-input.tsx
@@ -1,6 +1,5 @@
 /**
- * SearchInput - WAI-ARIA Combobox pattern with typeahead suggestions.
- * Result count announced via role="status".
+ * SearchInput - WAI-ARIA Combobox with typeahead suggestions.
  * @see specs/prd-web.md Section M9 (Search)
  */
 
@@ -10,6 +9,7 @@ import { useState, useRef, useCallback, useEffect, useId } from 'react'
 import { useRouter } from 'next/navigation'
 import { MagnifyingGlass, X } from '@phosphor-icons/react'
 import { cn } from '@/lib/utils'
+import { SearchSuggestionList } from '@/components/search-suggestion-list'
 
 export interface SearchSuggestion {
   type: 'topic' | 'reply'
@@ -57,9 +57,7 @@ export function SearchInput({
     (value: string) => {
       setQuery(value)
       setActiveIndex(-1)
-
       if (debounceRef.current) clearTimeout(debounceRef.current)
-
       if (value.length > 0) {
         debounceRef.current = setTimeout(() => {
           setIsOpen(true)
@@ -89,15 +87,11 @@ export function SearchInput({
           break
         case 'ArrowDown':
           e.preventDefault()
-          if (showListbox) {
-            setActiveIndex((prev) => Math.min(prev + 1, suggestions.length - 1))
-          }
+          if (showListbox) setActiveIndex((prev) => Math.min(prev + 1, suggestions.length - 1))
           break
         case 'ArrowUp':
           e.preventDefault()
-          if (showListbox) {
-            setActiveIndex((prev) => Math.max(prev - 1, 0))
-          }
+          if (showListbox) setActiveIndex((prev) => Math.max(prev - 1, 0))
           break
       }
     },
@@ -132,7 +126,6 @@ export function SearchInput({
             if (hasQuery && hasSuggestions) setIsOpen(true)
           }}
           onBlur={() => {
-            // Delay to allow click on suggestion
             setTimeout(() => setIsOpen(false), 150)
           }}
           placeholder={placeholder}
@@ -156,38 +149,16 @@ export function SearchInput({
       </div>
 
       {showListbox && (
-        <div
+        <SearchSuggestionList
           id={listboxId}
-          role="listbox"
-          aria-label="Search suggestions"
-          className="absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border border-border bg-card py-1 shadow-lg"
-        >
-          {suggestions.map((suggestion, index) => (
-            <div
-              key={suggestion.rkey}
-              id={`${id}-option-${index}`}
-              role="option"
-              tabIndex={-1}
-              aria-selected={index === activeIndex}
-              className={cn(
-                'cursor-pointer px-3 py-2 text-sm',
-                index === activeIndex
-                  ? 'bg-primary/10 text-foreground'
-                  : 'text-foreground hover:bg-muted'
-              )}
-              onMouseDown={(e) => {
-                e.preventDefault()
-                router.push(`/t/-/${suggestion.rkey}`)
-                setIsOpen(false)
-              }}
-            >
-              <span className="font-medium">{suggestion.title}</span>
-              <span className="ml-2 text-xs text-muted-foreground capitalize">
-                {suggestion.type}
-              </span>
-            </div>
-          ))}
-        </div>
+          baseId={id}
+          suggestions={suggestions}
+          activeIndex={activeIndex}
+          onSelect={(rkey) => {
+            router.push(`/t/-/${rkey}`)
+            setIsOpen(false)
+          }}
+        />
       )}
 
       <div id={statusId} role="status" aria-live="polite" className="sr-only">
diff --git a/src/components/search-suggestion-list.tsx b/src/components/search-suggestion-list.tsx
new file mode 100644
index 0000000..5afda45
--- /dev/null
+++ b/src/components/search-suggestion-list.tsx
@@ -0,0 +1,55 @@
+/**
+ * SearchSuggestionList - Listbox of search suggestions with keyboard navigation.
+ * @see specs/prd-web.md Section M9 (Search)
+ */
+
+import { cn } from '@/lib/utils'
+import type { SearchSuggestion } from '@/components/search-input'
+
+interface SearchSuggestionListProps {
+  id: string
+  baseId: string
+  suggestions: SearchSuggestion[]
+  activeIndex: number
+  onSelect: (rkey: string) => void
+}
+
+export function SearchSuggestionList({
+  id,
+  baseId,
+  suggestions,
+  activeIndex,
+  onSelect,
+}: SearchSuggestionListProps) {
+  return (
+    <div
+      id={id}
+      role="listbox"
+      aria-label="Search suggestions"
+      className="absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border border-border bg-card py-1 shadow-lg"
+    >
+      {suggestions.map((suggestion, index) => (
+        <div
+          key={suggestion.rkey}
+          id={`${baseId}-option-${index}`}
+          role="option"
+          tabIndex={-1}
+          aria-selected={index === activeIndex}
+          className={cn(
+            'cursor-pointer px-3 py-2 text-sm',
+            index === activeIndex
+              ? 'bg-primary/10 text-foreground'
+              : 'text-foreground hover:bg-muted'
+          )}
+          onMouseDown={(e) => {
+            e.preventDefault()
+            onSelect(suggestion.rkey)
+          }}
+        >
+          <span className="font-medium">{suggestion.title}</span>
+          <span className="ml-2 text-xs text-muted-foreground capitalize">{suggestion.type}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/settings/community-overrides-section.tsx b/src/components/settings/community-overrides-section.tsx
new file mode 100644
index 0000000..3f060e4
--- /dev/null
+++ b/src/components/settings/community-overrides-section.tsx
@@ -0,0 +1,121 @@
+/**
+ * CommunityOverridesSection - Per-community maturity, muted words, blocked users.
+ * @see specs/prd-web.md Section M8
+ */
+
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface CommunityOverrideValues {
+  communityDid: string
+  communityName: string
+  maturityLevel: 'inherit' | 'sfw' | 'mature'
+  mutedWords: string
+  blockedDids: string
+}
+
+interface CommunityOverridesSectionProps {
+  overrides: CommunityOverrideValues[]
+  onChange: (communityDid: string, field: keyof CommunityOverrideValues, value: string) => void
+}
+
+export function CommunityOverridesSection({ overrides, onChange }: CommunityOverridesSectionProps) {
+  return (
+    <fieldset className="space-y-4 rounded-lg border border-border p-4">
+      <legend className="px-2 text-sm font-semibold text-foreground">
+        Per-Community Overrides
+      </legend>
+
+      {overrides.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          No community memberships found. Join a community to configure per-community settings.
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {overrides.map((community) => (
+            <details key={community.communityDid} className="rounded-md border border-border">
+              <summary className="cursor-pointer px-3 py-2 text-sm font-medium text-foreground hover:bg-muted/50">
+                {community.communityName}
+              </summary>
+
+              <div className="space-y-3 border-t border-border px-3 py-3">
+                <div className="space-y-1">
+                  <label
+                    htmlFor={`maturity-${community.communityDid}`}
+                    className="block text-xs font-medium text-foreground"
+                  >
+                    Maturity override
+                  </label>
+                  <select
+                    id={`maturity-${community.communityDid}`}
+                    value={community.maturityLevel}
+                    onChange={(e) =>
+                      onChange(community.communityDid, 'maturityLevel', e.target.value)
+                    }
+                    className={cn(
+                      'block w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                    )}
+                  >
+                    <option value="inherit">Inherit global setting</option>
+                    <option value="sfw">SFW only</option>
+                    <option value="mature">SFW + Mature</option>
+                  </select>
+                </div>
+
+                <div className="space-y-1">
+                  <label
+                    htmlFor={`muted-words-${community.communityDid}`}
+                    className="block text-xs font-medium text-foreground"
+                  >
+                    Community muted words
+                  </label>
+                  <textarea
+                    id={`muted-words-${community.communityDid}`}
+                    value={community.mutedWords}
+                    onChange={(e) => onChange(community.communityDid, 'mutedWords', e.target.value)}
+                    placeholder="Additional muted words for this community"
+                    rows={2}
+                    className={cn(
+                      'block w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                    )}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    These are in addition to your global muted words. Comma-separated.
+                  </p>
+                </div>
+
+                <div className="space-y-1">
+                  <label
+                    htmlFor={`blocked-${community.communityDid}`}
+                    className="block text-xs font-medium text-foreground"
+                  >
+                    Community blocked users
+                  </label>
+                  <textarea
+                    id={`blocked-${community.communityDid}`}
+                    value={community.blockedDids}
+                    onChange={(e) =>
+                      onChange(community.communityDid, 'blockedDids', e.target.value)
+                    }
+                    placeholder="DIDs of users to block in this community"
+                    rows={2}
+                    className={cn(
+                      'block w-full rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground',
+                      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+                    )}
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    Block specific users only in this community. Comma-separated DIDs.
+                  </p>
+                </div>
+              </div>
+            </details>
+          ))}
+        </div>
+      )}
+    </fieldset>
+  )
+}
diff --git a/src/components/settings/content-safety-section.tsx b/src/components/settings/content-safety-section.tsx
new file mode 100644
index 0000000..d25d214
--- /dev/null
+++ b/src/components/settings/content-safety-section.tsx
@@ -0,0 +1,71 @@
+/**
+ * ContentSafetySection - Maturity level selector and muted words.
+ * @see specs/prd-web.md Section M8
+ */
+
+'use client'
+
+import { cn } from '@/lib/utils'
+
+type MaturityLevel = 'sfw' | 'sfw-mature'
+
+interface ContentSafetySectionProps {
+  maturityLevel: MaturityLevel
+  mutedWords: string
+  onMaturityChange: (level: MaturityLevel) => void
+  onMutedWordsChange: (words: string) => void
+}
+
+export function ContentSafetySection({
+  maturityLevel,
+  mutedWords,
+  onMaturityChange,
+  onMutedWordsChange,
+}: ContentSafetySectionProps) {
+  return (
+    <fieldset className="space-y-4 rounded-lg border border-border p-4">
+      <legend className="px-2 text-sm font-semibold text-foreground">Content Safety</legend>
+
+      <div className="space-y-1">
+        <label htmlFor="maturity-level" className="block text-sm font-medium text-foreground">
+          Maturity level
+        </label>
+        <select
+          id="maturity-level"
+          value={maturityLevel}
+          onChange={(e) => onMaturityChange(e.target.value as MaturityLevel)}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        >
+          <option value="sfw">SFW only</option>
+          <option value="sfw-mature">SFW + Mature</option>
+        </select>
+        <p className="text-xs text-muted-foreground">
+          Controls which content you can see. Mature content requires age confirmation.
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        <label htmlFor="muted-words" className="block text-sm font-medium text-foreground">
+          Muted words
+        </label>
+        <textarea
+          id="muted-words"
+          value={mutedWords}
+          onChange={(e) => onMutedWordsChange(e.target.value)}
+          placeholder="Enter words separated by commas"
+          rows={3}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        />
+        <p className="text-xs text-muted-foreground">
+          Posts containing these words will be collapsed. Comma-separated.
+        </p>
+      </div>
+    </fieldset>
+  )
+}
diff --git a/src/components/settings/cross-posting-section.tsx b/src/components/settings/cross-posting-section.tsx
new file mode 100644
index 0000000..9c914cf
--- /dev/null
+++ b/src/components/settings/cross-posting-section.tsx
@@ -0,0 +1,76 @@
+/**
+ * CrossPostingSection - Cross-posting authorization and toggle controls.
+ * @see specs/prd-web.md Section M8
+ */
+
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface CrossPostingSectionProps {
+  authorized: boolean
+  crossPostBluesky: boolean
+  crossPostFrontpage: boolean
+  onBlueskyChange: (enabled: boolean) => void
+  onFrontpageChange: (enabled: boolean) => void
+  onAuthorize: () => void
+}
+
+export function CrossPostingSection({
+  authorized,
+  crossPostBluesky,
+  crossPostFrontpage,
+  onBlueskyChange,
+  onFrontpageChange,
+  onAuthorize,
+}: CrossPostingSectionProps) {
+  return (
+    <fieldset className="space-y-4 rounded-lg border border-border p-4">
+      <legend className="px-2 text-sm font-semibold text-foreground">Cross-Posting</legend>
+      {authorized ? (
+        <div className="space-y-3">
+          <p className="text-xs text-muted-foreground">
+            Cross-posting authorized. You can share topics on Bluesky and Frontpage.
+          </p>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={crossPostBluesky}
+              onChange={(e) => onBlueskyChange(e.target.checked)}
+              className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <span className="text-sm text-foreground">Share new topics on Bluesky by default</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={crossPostFrontpage}
+              onChange={(e) => onFrontpageChange(e.target.checked)}
+              className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <span className="text-sm text-foreground">
+              Share new topics on Frontpage by default
+            </span>
+          </label>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground">
+            To share topics on Bluesky and Frontpage, Barazo needs permission to create posts on
+            your behalf.
+          </p>
+          <button
+            type="button"
+            onClick={onAuthorize}
+            className={cn(
+              'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors',
+              'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+            )}
+          >
+            Authorize cross-posting
+          </button>
+        </div>
+      )}
+    </fieldset>
+  )
+}
diff --git a/src/components/settings/notifications-section.tsx b/src/components/settings/notifications-section.tsx
new file mode 100644
index 0000000..0cdae19
--- /dev/null
+++ b/src/components/settings/notifications-section.tsx
@@ -0,0 +1,59 @@
+/**
+ * NotificationsSection - Notification preference toggles.
+ * @see specs/prd-web.md Section M8
+ */
+
+'use client'
+
+interface NotificationsSectionProps {
+  notifyReplies: boolean
+  notifyMentions: boolean
+  notifyReactions: boolean
+  onRepliesChange: (enabled: boolean) => void
+  onMentionsChange: (enabled: boolean) => void
+  onReactionsChange: (enabled: boolean) => void
+}
+
+export function NotificationsSection({
+  notifyReplies,
+  notifyMentions,
+  notifyReactions,
+  onRepliesChange,
+  onMentionsChange,
+  onReactionsChange,
+}: NotificationsSectionProps) {
+  return (
+    <fieldset className="space-y-4 rounded-lg border border-border p-4">
+      <legend className="px-2 text-sm font-semibold text-foreground">Notifications</legend>
+      <div className="space-y-3">
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={notifyReplies}
+            onChange={(e) => onRepliesChange(e.target.checked)}
+            className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <span className="text-sm text-foreground">Replies to my posts</span>
+        </label>
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={notifyMentions}
+            onChange={(e) => onMentionsChange(e.target.checked)}
+            className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <span className="text-sm text-foreground">Mentions of my handle</span>
+        </label>
+        <label className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            checked={notifyReactions}
+            onChange={(e) => onReactionsChange(e.target.checked)}
+            className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+          />
+          <span className="text-sm text-foreground">Reactions on my posts</span>
+        </label>
+      </div>
+    </fieldset>
+  )
+}
diff --git a/src/components/settings/report-appeal-form.tsx b/src/components/settings/report-appeal-form.tsx
new file mode 100644
index 0000000..27e1d04
--- /dev/null
+++ b/src/components/settings/report-appeal-form.tsx
@@ -0,0 +1,82 @@
+/**
+ * ReportAppealForm - Inline appeal form for a dismissed report.
+ * @see specs/prd-web.md Section M7 (Appeals process)
+ */
+
+import { cn } from '@/lib/utils'
+
+interface ReportAppealFormProps {
+  reportId: number
+  appealReason: string
+  appealError: string
+  appealSubmitting: boolean
+  onAppealReasonChange: (reason: string) => void
+  onAppealSubmit: (e: React.FormEvent) => void
+  onAppealCancel: () => void
+}
+
+export function ReportAppealForm({
+  reportId,
+  appealReason,
+  appealError,
+  appealSubmitting,
+  onAppealReasonChange,
+  onAppealSubmit,
+  onAppealCancel,
+}: ReportAppealFormProps) {
+  return (
+    <form onSubmit={onAppealSubmit} className="space-y-3" noValidate>
+      <div className="space-y-1">
+        <label
+          htmlFor={`appeal-reason-${reportId}`}
+          className="block text-sm font-medium text-foreground"
+        >
+          Reason for appeal
+        </label>
+        <textarea
+          id={`appeal-reason-${reportId}`}
+          value={appealReason}
+          onChange={(e) => onAppealReasonChange(e.target.value)}
+          placeholder="Explain why you believe this report should be reconsidered"
+          rows={3}
+          disabled={appealSubmitting}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        />
+        {appealError && (
+          <p className="text-sm text-destructive" role="alert">
+            {appealError}
+          </p>
+        )}
+      </div>
+      <div className="flex gap-3">
+        <button
+          type="submit"
+          disabled={appealSubmitting}
+          className={cn(
+            'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors',
+            'hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          {appealSubmitting ? 'Submitting...' : 'Submit appeal'}
+        </button>
+        <button
+          type="button"
+          onClick={onAppealCancel}
+          disabled={appealSubmitting}
+          className={cn(
+            'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors',
+            'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/src/components/settings/report-card.tsx b/src/components/settings/report-card.tsx
new file mode 100644
index 0000000..d0799c2
--- /dev/null
+++ b/src/components/settings/report-card.tsx
@@ -0,0 +1,121 @@
+/**
+ * ReportCard - Single report display with status badge, metadata, and appeal form.
+ * @see specs/prd-web.md Section M7 (Appeals process)
+ */
+
+import { cn } from '@/lib/utils'
+import { formatDateShort } from '@/lib/format'
+import { ReportAppealForm } from '@/components/settings/report-appeal-form'
+import type { MyReport } from '@/lib/api/types'
+
+function statusLabel(report: MyReport): string {
+  if (report.appealStatus === 'pending') return 'Appeal pending'
+  if (report.status === 'resolved' && report.resolutionType) {
+    return report.resolutionType.charAt(0).toUpperCase() + report.resolutionType.slice(1)
+  }
+  return 'Pending'
+}
+
+function statusColor(report: MyReport): string {
+  if (report.appealStatus === 'pending')
+    return 'bg-yellow-500/10 text-yellow-700 dark:text-yellow-400'
+  if (report.status === 'pending') return 'bg-blue-500/10 text-blue-700 dark:text-blue-400'
+  if (report.resolutionType === 'dismissed') return 'bg-muted text-muted-foreground'
+  return 'bg-green-500/10 text-green-700 dark:text-green-400'
+}
+
+function canAppeal(report: MyReport): boolean {
+  return (
+    report.status === 'resolved' &&
+    report.resolutionType === 'dismissed' &&
+    report.appealStatus === 'none'
+  )
+}
+
+interface ReportCardProps {
+  report: MyReport
+  appealingId: number | null
+  appealReason: string
+  appealError: string
+  appealSubmitting: boolean
+  appealSuccess: number | null
+  onAppealOpen: (reportId: number) => void
+  onAppealCancel: () => void
+  onAppealReasonChange: (reason: string) => void
+  onAppealSubmit: (e: React.FormEvent) => void
+}
+
+export function ReportCard({
+  report,
+  appealingId,
+  appealReason,
+  appealError,
+  appealSubmitting,
+  appealSuccess,
+  onAppealOpen,
+  onAppealCancel,
+  onAppealReasonChange,
+  onAppealSubmit,
+}: ReportCardProps) {
+  return (
+    <div className="rounded-lg border border-border bg-card p-4 space-y-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-foreground">
+            {report.reasonType.charAt(0).toUpperCase() + report.reasonType.slice(1)}
+          </p>
+          {report.description && (
+            <p className="text-sm text-muted-foreground">{report.description}</p>
+          )}
+        </div>
+        <span
+          className={cn(
+            'shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium',
+            statusColor(report)
+          )}
+        >
+          {statusLabel(report)}
+        </span>
+      </div>
+
+      <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+        <span>Reported: {formatDateShort(report.createdAt)}</span>
+        {report.resolvedAt && <span>Resolved: {formatDateShort(report.resolvedAt)}</span>}
+      </div>
+
+      {appealSuccess === report.id && (
+        <p
+          className="rounded-md bg-green-500/10 px-3 py-2 text-sm text-green-700 dark:text-green-400"
+          role="status"
+        >
+          Appeal submitted. A moderator will re-review your report.
+        </p>
+      )}
+
+      {canAppeal(report) && appealingId !== report.id && appealSuccess !== report.id && (
+        <button
+          type="button"
+          onClick={() => onAppealOpen(report.id)}
+          className={cn(
+            'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors',
+            'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        >
+          Appeal
+        </button>
+      )}
+
+      {appealingId === report.id && (
+        <ReportAppealForm
+          reportId={report.id}
+          appealReason={appealReason}
+          appealError={appealError}
+          appealSubmitting={appealSubmitting}
+          onAppealReasonChange={onAppealReasonChange}
+          onAppealSubmit={onAppealSubmit}
+          onAppealCancel={onAppealCancel}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/src/components/source-profile-preview.tsx b/src/components/source-profile-preview.tsx
new file mode 100644
index 0000000..9afe5ec
--- /dev/null
+++ b/src/components/source-profile-preview.tsx
@@ -0,0 +1,38 @@
+/**
+ * SourceProfilePreview - Read-only display of the user's AT Protocol source profile.
+ * @see specs/prd-web.md Section M8 (Settings / Community Profile)
+ */
+
+interface SourceProfilePreviewProps {
+  avatarUrl?: string | null
+  displayName?: string | null
+  bio?: string | null
+}
+
+export function SourceProfilePreview({ avatarUrl, displayName, bio }: SourceProfilePreviewProps) {
+  return (
+    <div className="space-y-2 rounded-md border border-dashed border-border bg-muted/30 p-3">
+      <p className="text-xs font-medium text-muted-foreground">Your AT Protocol profile (source)</p>
+      <div className="flex items-center gap-3">
+        {avatarUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={avatarUrl}
+            alt="Source avatar"
+            className="h-10 w-10 rounded-full object-cover"
+          />
+        ) : (
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted text-muted-foreground">
+            <span className="text-xs">--</span>
+          </div>
+        )}
+        <div className="min-w-0">
+          <p className="truncate text-sm text-muted-foreground">
+            {displayName || '(no display name)'}
+          </p>
+          <p className="truncate text-xs text-muted-foreground/70">{bio || '(no bio)'}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/topic-content-editor.tsx b/src/components/topic-content-editor.tsx
new file mode 100644
index 0000000..035babb
--- /dev/null
+++ b/src/components/topic-content-editor.tsx
@@ -0,0 +1,84 @@
+/**
+ * TopicContentEditor - Write/Preview tabs with markdown editor.
+ * @see specs/prd-web.md Section 4 (Editor Components)
+ */
+
+'use client'
+
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { MarkdownEditor } from '@/components/markdown-editor'
+import { MarkdownPreview } from '@/components/markdown-preview'
+
+interface TopicContentEditorProps {
+  content: string
+  onChange: (content: string) => void
+  error?: string
+}
+
+export function TopicContentEditor({ content, onChange, error }: TopicContentEditorProps) {
+  const [activeTab, setActiveTab] = useState<'write' | 'preview'>('write')
+
+  return (
+    <div className="space-y-1">
+      <div role="tablist" aria-label="Editor mode" className="flex gap-1 border-b border-border">
+        <button
+          type="button"
+          role="tab"
+          id="tab-write"
+          aria-selected={activeTab === 'write'}
+          aria-controls="tabpanel-write"
+          onClick={() => setActiveTab('write')}
+          className={cn(
+            'px-3 py-1.5 text-sm font-medium transition-colors',
+            activeTab === 'write'
+              ? 'border-b-2 border-primary text-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          Write
+        </button>
+        <button
+          type="button"
+          role="tab"
+          id="tab-preview"
+          aria-selected={activeTab === 'preview'}
+          aria-controls="tabpanel-preview"
+          onClick={() => setActiveTab('preview')}
+          className={cn(
+            'px-3 py-1.5 text-sm font-medium transition-colors',
+            activeTab === 'preview'
+              ? 'border-b-2 border-primary text-foreground'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          Preview
+        </button>
+      </div>
+
+      <div
+        id="tabpanel-write"
+        role="tabpanel"
+        aria-labelledby="tab-write"
+        hidden={activeTab !== 'write'}
+      >
+        <MarkdownEditor
+          value={content}
+          onChange={onChange}
+          id="topic-content"
+          label="Content"
+          error={error}
+        />
+      </div>
+
+      <div
+        id="tabpanel-preview"
+        role="tabpanel"
+        aria-labelledby="tab-preview"
+        hidden={activeTab !== 'preview'}
+      >
+        <MarkdownPreview content={content} />
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/topic-cross-post-section.tsx b/src/components/topic-cross-post-section.tsx
new file mode 100644
index 0000000..c7eb50c
--- /dev/null
+++ b/src/components/topic-cross-post-section.tsx
@@ -0,0 +1,70 @@
+/**
+ * TopicCrossPostSection - Cross-posting options for topic creation.
+ * Shows authorized checkboxes or authorization prompt.
+ * @see specs/prd-web.md Section 4 (Editor Components)
+ */
+
+import { cn } from '@/lib/utils'
+
+interface TopicCrossPostSectionProps {
+  crossPostScopesGranted: boolean
+  crossPostBluesky: boolean
+  crossPostFrontpage: boolean
+  onCrossPostBlueskyChange: (checked: boolean) => void
+  onCrossPostFrontpageChange: (checked: boolean) => void
+  onAuthorizeClick: () => void
+}
+
+export function TopicCrossPostSection({
+  crossPostScopesGranted,
+  crossPostBluesky,
+  crossPostFrontpage,
+  onCrossPostBlueskyChange,
+  onCrossPostFrontpageChange,
+  onAuthorizeClick,
+}: TopicCrossPostSectionProps) {
+  return (
+    <fieldset className="space-y-3">
+      <legend className="text-sm font-medium text-foreground">Cross-post</legend>
+      {crossPostScopesGranted ? (
+        <div className="flex flex-col gap-2">
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={crossPostBluesky}
+              onChange={(e) => onCrossPostBlueskyChange(e.target.checked)}
+              className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <span className="text-sm text-foreground">Share on Bluesky</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={crossPostFrontpage}
+              onChange={(e) => onCrossPostFrontpageChange(e.target.checked)}
+              className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
+            />
+            <span className="text-sm text-foreground">Share on Frontpage</span>
+          </label>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            Cross-posting requires additional permissions.
+          </p>
+          <button
+            type="button"
+            onClick={onAuthorizeClick}
+            className={cn(
+              'text-sm font-medium text-primary transition-colors',
+              'hover:text-primary-hover underline underline-offset-4',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+            )}
+          >
+            Authorize cross-posting
+          </button>
+        </div>
+      )}
+    </fieldset>
+  )
+}
diff --git a/src/components/topic-form-validation.ts b/src/components/topic-form-validation.ts
new file mode 100644
index 0000000..d7bdbdc
--- /dev/null
+++ b/src/components/topic-form-validation.ts
@@ -0,0 +1,39 @@
+/**
+ * TopicForm validation logic and types.
+ * @see specs/prd-web.md Section 4 (Editor Components)
+ */
+
+export interface TopicFormValues {
+  title: string
+  content: string
+  category: string
+  tags?: string[]
+  crossPostBluesky?: boolean
+  crossPostFrontpage?: boolean
+}
+
+export interface FormErrors {
+  title?: string
+  content?: string
+  category?: string
+}
+
+export function validateTopicForm(values: TopicFormValues): FormErrors {
+  const errors: FormErrors = {}
+  if (!values.title.trim()) {
+    errors.title = 'Title is required'
+  } else if (values.title.trim().length < 3) {
+    errors.title = 'Title must be at least 3 characters'
+  } else if (values.title.trim().length > 200) {
+    errors.title = 'Title must be at most 200 characters'
+  }
+  if (!values.content.trim()) {
+    errors.content = 'Content is required'
+  } else if (values.content.trim().length < 10) {
+    errors.content = 'Content must be at least 10 characters'
+  }
+  if (!values.category) {
+    errors.category = 'Category is required'
+  }
+  return errors
+}
diff --git a/src/components/topic-form.tsx b/src/components/topic-form.tsx
index b8e831e..ab1768b 100644
--- a/src/components/topic-form.tsx
+++ b/src/components/topic-form.tsx
@@ -10,26 +10,14 @@
 import { useState, useCallback } from 'react'
 import type { CreateTopicInput } from '@/lib/api/types'
 import { cn } from '@/lib/utils'
-import { MarkdownEditor } from './markdown-editor'
-import { MarkdownPreview } from './markdown-preview'
-import { CrossPostAuthDialog } from './crosspost-auth-dialog'
+import { TopicMetaFields } from '@/components/topic-meta-fields'
+import { TopicContentEditor } from '@/components/topic-content-editor'
+import { TopicCrossPostSection } from '@/components/topic-cross-post-section'
+import { CrossPostAuthDialog } from '@/components/crosspost-auth-dialog'
+import { validateTopicForm } from '@/components/topic-form-validation'
+import type { TopicFormValues, FormErrors } from '@/components/topic-form-validation'
 import { useAuth } from '@/hooks/use-auth'
 
-interface TopicFormValues {
-  title: string
-  content: string
-  category: string
-  tags?: string[]
-  crossPostBluesky?: boolean
-  crossPostFrontpage?: boolean
-}
-
-interface FormErrors {
-  title?: string
-  content?: string
-  category?: string
-}
-
 interface TopicFormProps {
   onSubmit: (values: CreateTopicInput) => void | Promise<void>
   initialValues?: Partial<TopicFormValues>
@@ -48,30 +36,6 @@ const CATEGORIES_FALLBACK = [
   { slug: 'meta', name: 'Meta' },
 ]
 
-function validate(values: TopicFormValues): FormErrors {
-  const errors: FormErrors = {}
-
-  if (!values.title.trim()) {
-    errors.title = 'Title is required'
-  } else if (values.title.trim().length < 3) {
-    errors.title = 'Title must be at least 3 characters'
-  } else if (values.title.trim().length > 200) {
-    errors.title = 'Title must be at most 200 characters'
-  }
-
-  if (!values.content.trim()) {
-    errors.content = 'Content is required'
-  } else if (values.content.trim().length < 10) {
-    errors.content = 'Content must be at least 10 characters'
-  }
-
-  if (!values.category) {
-    errors.category = 'Category is required'
-  }
-
-  return errors
-}
-
 export function TopicForm({
   onSubmit,
   initialValues,
@@ -89,14 +53,12 @@ export function TopicForm({
     initialValues?.crossPostFrontpage ?? false
   )
   const [errors, setErrors] = useState<FormErrors>({})
-  const [activeTab, setActiveTab] = useState<'write' | 'preview'>('write')
   const [showCrossPostAuthDialog, setShowCrossPostAuthDialog] = useState(false)
   const { crossPostScopesGranted, requestCrossPostAuth } = useAuth()
 
   const handleSubmit = useCallback(
     (e: React.FormEvent) => {
       e.preventDefault()
-
       const values: TopicFormValues = {
         title,
         content,
@@ -108,14 +70,9 @@ export function TopicForm({
         crossPostBluesky,
         crossPostFrontpage,
       }
-
-      const validationErrors = validate(values)
+      const validationErrors = validateTopicForm(values)
       setErrors(validationErrors)
-
-      if (Object.keys(validationErrors).length > 0) {
-        return
-      }
-
+      if (Object.keys(validationErrors).length > 0) return
       onSubmit({
         title: values.title.trim(),
         content: values.content.trim(),
@@ -135,187 +92,28 @@ export function TopicForm({
       noValidate
       aria-label={mode === 'create' ? 'Create new topic' : 'Edit topic'}
     >
-      {/* Title */}
-      <div className="space-y-1">
-        <label htmlFor="topic-title" className="block text-sm font-medium text-foreground">
-          Title
-        </label>
-        <input
-          id="topic-title"
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Enter a descriptive title"
-          aria-invalid={errors.title ? 'true' : undefined}
-          aria-describedby={errors.title ? 'topic-title-error' : undefined}
-          className={cn(
-            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            errors.title && 'border-destructive'
-          )}
-        />
-        {errors.title && (
-          <p id="topic-title-error" className="text-sm text-destructive" role="alert">
-            {errors.title}
-          </p>
-        )}
-      </div>
-
-      {/* Category */}
-      <div className="space-y-1">
-        <label htmlFor="topic-category" className="block text-sm font-medium text-foreground">
-          Category
-        </label>
-        <select
-          id="topic-category"
-          value={category}
-          onChange={(e) => setCategory(e.target.value)}
-          aria-invalid={errors.category ? 'true' : undefined}
-          aria-describedby={errors.category ? 'topic-category-error' : undefined}
-          className={cn(
-            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            errors.category && 'border-destructive'
-          )}
-        >
-          <option value="">Select a category</option>
-          {categories.map((cat) => (
-            <option key={cat.slug} value={cat.slug}>
-              {cat.name}
-            </option>
-          ))}
-        </select>
-        {errors.category && (
-          <p id="topic-category-error" className="text-sm text-destructive" role="alert">
-            {errors.category}
-          </p>
-        )}
-      </div>
-
-      {/* Tags */}
-      <div className="space-y-1">
-        <label htmlFor="topic-tags" className="block text-sm font-medium text-foreground">
-          Tags
-        </label>
-        <input
-          id="topic-tags"
-          type="text"
-          value={tagInput}
-          onChange={(e) => setTagInput(e.target.value)}
-          placeholder="Comma-separated tags (e.g., discussion, help)"
-          className={cn(
-            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
-            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-          )}
-        />
-      </div>
+      <TopicMetaFields
+        title={title}
+        category={category}
+        tagInput={tagInput}
+        categories={categories}
+        errors={errors}
+        onTitleChange={setTitle}
+        onCategoryChange={setCategory}
+        onTagInputChange={setTagInput}
+      />
 
-      {/* Content - Write/Preview tabs */}
-      <div className="space-y-1">
-        <div role="tablist" aria-label="Editor mode" className="flex gap-1 border-b border-border">
-          <button
-            type="button"
-            role="tab"
-            id="tab-write"
-            aria-selected={activeTab === 'write'}
-            aria-controls="tabpanel-write"
-            onClick={() => setActiveTab('write')}
-            className={cn(
-              'px-3 py-1.5 text-sm font-medium transition-colors',
-              activeTab === 'write'
-                ? 'border-b-2 border-primary text-foreground'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            Write
-          </button>
-          <button
-            type="button"
-            role="tab"
-            id="tab-preview"
-            aria-selected={activeTab === 'preview'}
-            aria-controls="tabpanel-preview"
-            onClick={() => setActiveTab('preview')}
-            className={cn(
-              'px-3 py-1.5 text-sm font-medium transition-colors',
-              activeTab === 'preview'
-                ? 'border-b-2 border-primary text-foreground'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-          >
-            Preview
-          </button>
-        </div>
+      <TopicContentEditor content={content} onChange={setContent} error={errors.content} />
 
-        <div
-          id="tabpanel-write"
-          role="tabpanel"
-          aria-labelledby="tab-write"
-          hidden={activeTab !== 'write'}
-        >
-          <MarkdownEditor
-            value={content}
-            onChange={setContent}
-            id="topic-content"
-            label="Content"
-            error={errors.content}
-          />
-        </div>
-
-        <div
-          id="tabpanel-preview"
-          role="tabpanel"
-          aria-labelledby="tab-preview"
-          hidden={activeTab !== 'preview'}
-        >
-          <MarkdownPreview content={content} />
-        </div>
-      </div>
-
-      {/* Cross-post options */}
       {mode === 'create' && (
-        <fieldset className="space-y-3">
-          <legend className="text-sm font-medium text-foreground">Cross-post</legend>
-          {crossPostScopesGranted ? (
-            <div className="flex flex-col gap-2">
-              <label className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  checked={crossPostBluesky}
-                  onChange={(e) => setCrossPostBluesky(e.target.checked)}
-                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                />
-                <span className="text-sm text-foreground">Share on Bluesky</span>
-              </label>
-              <label className="flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  checked={crossPostFrontpage}
-                  onChange={(e) => setCrossPostFrontpage(e.target.checked)}
-                  className="h-4 w-4 rounded border-border text-primary focus-visible:ring-2 focus-visible:ring-ring"
-                />
-                <span className="text-sm text-foreground">Share on Frontpage</span>
-              </label>
-            </div>
-          ) : (
-            <div className="space-y-2">
-              <p className="text-sm text-muted-foreground">
-                Cross-posting requires additional permissions.
-              </p>
-              <button
-                type="button"
-                onClick={() => setShowCrossPostAuthDialog(true)}
-                className={cn(
-                  'text-sm font-medium text-primary transition-colors',
-                  'hover:text-primary-hover underline underline-offset-4',
-                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
-                )}
-              >
-                Authorize cross-posting
-              </button>
-            </div>
-          )}
-        </fieldset>
+        <TopicCrossPostSection
+          crossPostScopesGranted={crossPostScopesGranted}
+          crossPostBluesky={crossPostBluesky}
+          crossPostFrontpage={crossPostFrontpage}
+          onCrossPostBlueskyChange={setCrossPostBluesky}
+          onCrossPostFrontpageChange={setCrossPostFrontpage}
+          onAuthorizeClick={() => setShowCrossPostAuthDialog(true)}
+        />
       )}
 
       <CrossPostAuthDialog
@@ -327,7 +125,6 @@ export function TopicForm({
         onCancel={() => setShowCrossPostAuthDialog(false)}
       />
 
-      {/* Submit */}
       <div className="flex justify-end">
         <button
           type="submit"
diff --git a/src/components/topic-meta-fields.tsx b/src/components/topic-meta-fields.tsx
new file mode 100644
index 0000000..2743be1
--- /dev/null
+++ b/src/components/topic-meta-fields.tsx
@@ -0,0 +1,104 @@
+/**
+ * TopicMetaFields - Title, category, and tags inputs for topic form.
+ * @see specs/prd-web.md Section 4 (Editor Components)
+ */
+
+import { cn } from '@/lib/utils'
+
+interface TopicMetaFieldsProps {
+  title: string
+  category: string
+  tagInput: string
+  categories: Array<{ slug: string; name: string }>
+  errors: { title?: string; category?: string }
+  onTitleChange: (title: string) => void
+  onCategoryChange: (category: string) => void
+  onTagInputChange: (tags: string) => void
+}
+
+export function TopicMetaFields({
+  title,
+  category,
+  tagInput,
+  categories,
+  errors,
+  onTitleChange,
+  onCategoryChange,
+  onTagInputChange,
+}: TopicMetaFieldsProps) {
+  return (
+    <>
+      <div className="space-y-1">
+        <label htmlFor="topic-title" className="block text-sm font-medium text-foreground">
+          Title
+        </label>
+        <input
+          id="topic-title"
+          type="text"
+          value={title}
+          onChange={(e) => onTitleChange(e.target.value)}
+          placeholder="Enter a descriptive title"
+          aria-invalid={errors.title ? 'true' : undefined}
+          aria-describedby={errors.title ? 'topic-title-error' : undefined}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            errors.title && 'border-destructive'
+          )}
+        />
+        {errors.title && (
+          <p id="topic-title-error" className="text-sm text-destructive" role="alert">
+            {errors.title}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-1">
+        <label htmlFor="topic-category" className="block text-sm font-medium text-foreground">
+          Category
+        </label>
+        <select
+          id="topic-category"
+          value={category}
+          onChange={(e) => onCategoryChange(e.target.value)}
+          aria-invalid={errors.category ? 'true' : undefined}
+          aria-describedby={errors.category ? 'topic-category-error' : undefined}
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            errors.category && 'border-destructive'
+          )}
+        >
+          <option value="">Select a category</option>
+          {categories.map((cat) => (
+            <option key={cat.slug} value={cat.slug}>
+              {cat.name}
+            </option>
+          ))}
+        </select>
+        {errors.category && (
+          <p id="topic-category-error" className="text-sm text-destructive" role="alert">
+            {errors.category}
+          </p>
+        )}
+      </div>
+
+      <div className="space-y-1">
+        <label htmlFor="topic-tags" className="block text-sm font-medium text-foreground">
+          Tags
+        </label>
+        <input
+          id="topic-tags"
+          type="text"
+          value={tagInput}
+          onChange={(e) => onTagInputChange(e.target.value)}
+          placeholder="Comma-separated tags (e.g., discussion, help)"
+          className={cn(
+            'block w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        />
+      </div>
+    </>
+  )
+}
diff --git a/src/hooks/use-community-profile.ts b/src/hooks/use-community-profile.ts
new file mode 100644
index 0000000..1124bba
--- /dev/null
+++ b/src/hooks/use-community-profile.ts
@@ -0,0 +1,245 @@
+/**
+ * useCommunityProfile - Manages community profile data loading and mutations.
+ * Handles loading community DID, profile data, save, reset, and image upload/remove.
+ * @see specs/prd-web.md Section M8 (Settings / Community Profile)
+ */
+
+import { useState, useEffect, useCallback } from 'react'
+import { useAuth } from '@/hooks/use-auth'
+import {
+  getPublicSettings,
+  getCommunityProfile,
+  updateCommunityProfile,
+  resetCommunityProfile,
+  uploadCommunityAvatar,
+  uploadCommunityBanner,
+} from '@/lib/api/client'
+import type { CommunityProfile } from '@/lib/api/types'
+
+interface UseCommunityProfileReturn {
+  communityDid: string | null
+  profile: CommunityProfile | null
+  loading: boolean
+  saving: boolean
+  error: string | null
+  success: boolean
+  displayName: string
+  bio: string
+  setDisplayName: (v: string) => void
+  setBio: (v: string) => void
+  handleSave: (e: React.FormEvent) => void
+  handleReset: () => void
+  handleAvatarUpload: (file: File) => Promise<{ url: string }>
+  handleBannerUpload: (file: File) => Promise<{ url: string }>
+  handleAvatarRemove: () => void
+  handleBannerRemove: () => void
+  setShowResetConfirm: (show: boolean) => void
+  showResetConfirm: boolean
+}
+
+export function useCommunityProfile(): UseCommunityProfileReturn {
+  const { getAccessToken, isAuthenticated } = useAuth()
+
+  const [communityDid, setCommunityDid] = useState<string | null>(null)
+  const [profile, setProfile] = useState<CommunityProfile | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState(false)
+  const [showResetConfirm, setShowResetConfirm] = useState(false)
+  const [displayName, setDisplayName] = useState('')
+  const [bio, setBio] = useState('')
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      setLoading(false)
+      return
+    }
+
+    const token = getAccessToken()
+    if (!token) {
+      setLoading(false)
+      return
+    }
+
+    let cancelled = false
+
+    async function loadProfile() {
+      try {
+        const publicSettings = await getPublicSettings()
+        const did = publicSettings.communityDid
+        if (!did) {
+          if (!cancelled) setLoading(false)
+          return
+        }
+
+        if (!cancelled) setCommunityDid(did)
+
+        const currentToken = token
+        if (!currentToken) return
+
+        const communityProfile = await getCommunityProfile(did, currentToken)
+        if (!cancelled) {
+          setProfile(communityProfile)
+          setDisplayName(communityProfile.hasOverride ? (communityProfile.displayName ?? '') : '')
+          setBio(communityProfile.hasOverride ? (communityProfile.bio ?? '') : '')
+        }
+      } catch {
+        if (!cancelled) setError('Failed to load community profile.')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+
+    void loadProfile()
+    return () => {
+      cancelled = true
+    }
+  }, [getAccessToken, isAuthenticated])
+
+  const handleSave = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault()
+      if (!communityDid) return
+
+      const token = getAccessToken()
+      if (!token) {
+        setError('Not authenticated')
+        return
+      }
+
+      setSaving(true)
+      setError(null)
+      setSuccess(false)
+
+      try {
+        await updateCommunityProfile(
+          communityDid,
+          { displayName: displayName.trim() || null, bio: bio.trim() || null },
+          token
+        )
+        const updatedProfile = await getCommunityProfile(communityDid, token)
+        setProfile(updatedProfile)
+        setSuccess(true)
+      } catch {
+        setError('Failed to save community profile.')
+      } finally {
+        setSaving(false)
+      }
+    },
+    [communityDid, displayName, bio, getAccessToken]
+  )
+
+  const handleReset = useCallback(async () => {
+    if (!communityDid) return
+
+    const token = getAccessToken()
+    if (!token) {
+      setError('Not authenticated')
+      return
+    }
+
+    setShowResetConfirm(false)
+    setSaving(true)
+    setError(null)
+    setSuccess(false)
+
+    try {
+      await resetCommunityProfile(communityDid, token)
+      const updatedProfile = await getCommunityProfile(communityDid, token)
+      setProfile(updatedProfile)
+      setDisplayName('')
+      setBio('')
+      setSuccess(true)
+    } catch {
+      setError('Failed to reset community profile.')
+    } finally {
+      setSaving(false)
+    }
+  }, [communityDid, getAccessToken])
+
+  const handleAvatarUpload = useCallback(
+    async (file: File): Promise<{ url: string }> => {
+      if (!communityDid) throw new Error('No community DID')
+      const token = getAccessToken()
+      if (!token) throw new Error('Not authenticated')
+
+      const result = await uploadCommunityAvatar(communityDid, file, token)
+      const updatedProfile = await getCommunityProfile(communityDid, token)
+      setProfile(updatedProfile)
+      return result
+    },
+    [communityDid, getAccessToken]
+  )
+
+  const handleBannerUpload = useCallback(
+    async (file: File): Promise<{ url: string }> => {
+      if (!communityDid) throw new Error('No community DID')
+      const token = getAccessToken()
+      if (!token) throw new Error('Not authenticated')
+
+      const result = await uploadCommunityBanner(communityDid, file, token)
+      const updatedProfile = await getCommunityProfile(communityDid, token)
+      setProfile(updatedProfile)
+      return result
+    },
+    [communityDid, getAccessToken]
+  )
+
+  const handleAvatarRemove = useCallback(async () => {
+    if (!communityDid) return
+    const token = getAccessToken()
+    if (!token) return
+
+    try {
+      await updateCommunityProfile(
+        communityDid,
+        { displayName: displayName.trim() || null, bio: bio.trim() || null },
+        token
+      )
+      const updatedProfile = await getCommunityProfile(communityDid, token)
+      setProfile(updatedProfile)
+    } catch {
+      setError('Failed to remove avatar.')
+    }
+  }, [communityDid, displayName, bio, getAccessToken])
+
+  const handleBannerRemove = useCallback(async () => {
+    if (!communityDid) return
+    const token = getAccessToken()
+    if (!token) return
+
+    try {
+      await updateCommunityProfile(
+        communityDid,
+        { displayName: displayName.trim() || null, bio: bio.trim() || null },
+        token
+      )
+      const updatedProfile = await getCommunityProfile(communityDid, token)
+      setProfile(updatedProfile)
+    } catch {
+      setError('Failed to remove banner.')
+    }
+  }, [communityDid, displayName, bio, getAccessToken])
+
+  return {
+    communityDid,
+    profile,
+    loading,
+    saving,
+    error,
+    success,
+    displayName,
+    bio,
+    setDisplayName,
+    setBio,
+    handleSave,
+    handleReset,
+    handleAvatarUpload,
+    handleBannerUpload,
+    handleAvatarRemove,
+    handleBannerRemove,
+    showResetConfirm,
+    setShowResetConfirm,
+  }
+}
diff --git a/src/lib/format.ts b/src/lib/format.ts
index c4286d9..d090907 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -29,6 +29,36 @@ export function formatRelativeTime(isoDate: string): string {
   return `${diffYears}y ago`
 }
 
+/**
+ * Formats an ISO date string as a short date/time (e.g., "Jan 15, 3:42 PM").
+ */
+export function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+/**
+ * Formats an ISO date string as a short date without time (e.g., "Jan 15, 2026").
+ */
+export function formatDateShort(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+/**
+ * Formats a number with locale-aware separators (e.g., 1,234).
+ */
+export function formatNumber(n: number): string {
+  return n.toLocaleString('en-US')
+}
+
 /**
  * Formats a number with compact notation (e.g., 1.2k, 3.4M).
  */
-- 
2.51.2