diff --git a/apps/web/src/app/admin/_components/AdminNav.tsx b/apps/web/src/app/admin/_components/AdminNav.tsx
new file mode 100644
index 00000000..5f5df7eb
--- /dev/null
+++ b/apps/web/src/app/admin/_components/AdminNav.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useEffect, useRef } from "react"
+
+import { TabNav } from "@/components/ui/Tabs"
+
+export interface AdminNavLink {
+  href: string
+  label: string
+}
+
+/**
+ * The admin section's tabs; the current one follows the URL. On a phone the
+ * row scrolls sideways, so the current tab is scrolled into view.
+ */
+export function AdminNav({ links }: { links: readonly AdminNavLink[] }) {
+  const pathname = usePathname()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const current = ref.current?.querySelector<HTMLElement>('[aria-current="page"]')
+    const row = current?.closest("ul")
+    if (!current || !row || row.scrollWidth <= row.clientWidth) return
+    const tab = current.getBoundingClientRect()
+    const box = row.getBoundingClientRect()
+    row.scrollLeft += tab.left - box.left - (box.width - tab.width) / 2
+  }, [pathname])
+
+  return (
+    <div ref={ref}>
+      <TabNav label="Trang quản trị" items={links.map((link) => ({ ...link, current: pathname === link.href }))} />
+    </div>
+  )
+}
diff --git a/apps/web/src/app/admin/_components/ui.tsx b/apps/web/src/app/admin/_components/ui.tsx
new file mode 100644
index 00000000..83fd662f
--- /dev/null
+++ b/apps/web/src/app/admin/_components/ui.tsx
@@ -0,0 +1,137 @@
+import clsx from "clsx"
+import type { ReactNode } from "react"
+
+/**
+ * Building blocks the admin pages share (DOS/Give#96 part C), on the #95
+ * kit: a page frame, a section with its count, a card per queue item, a
+ * label/value grid and a table that scrolls sideways on phones.
+ */
+
+/** A page: its title, an optional action on the right, the rules staff follow, then the sections. */
+export function AdminPage({
+  title,
+  action,
+  intro,
+  children,
+}: {
+  title: string
+  action?: ReactNode
+  intro?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <div className="container-page space-y-10 py-8 sm:py-10">
+      <header className="space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">{title}</h1>
+          {action && <div className="flex flex-wrap gap-2">{action}</div>}
+        </div>
+        {intro && <div className="max-w-3xl space-y-2 text-body">{intro}</div>}
+      </header>
+      {children}
+    </div>
+  )
+}
+
+/** A section with a heading, an optional count and lead, and its content. */
+export function AdminSection({
+  id,
+  title,
+  count,
+  lead,
+  children,
+}: {
+  id: string
+  title: string
+  /** A number, or a phrase such as "50 mới nhất / 120". */
+  count?: number | string
+  lead?: ReactNode
+  children: ReactNode
+}) {
+  return (
+    <section aria-labelledby={id} className="space-y-4">
+      <div className="space-y-1">
+        <h2 id={id} className="flex flex-wrap items-center gap-2 text-xl font-bold">
+          {title}
+          {count !== undefined && (
+            <span className="rounded-sm bg-gray-100 px-1.5 text-base font-medium text-body tabular-nums">{count}</span>
+          )}
+        </h2>
+        {lead && <p className="max-w-3xl text-body">{lead}</p>}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+/** A list of queue items, one card each. */
+export function ItemList({ children }: { children: ReactNode }) {
+  return <ul className="space-y-4">{children}</ul>
+}
+
+/** One queue item: facts on top, then the actions under a hairline. */
+export function ItemCard({ className, children }: { className?: string; children: ReactNode }) {
+  return <li className={clsx("space-y-5 card p-5 sm:p-6", className)}>{children}</li>
+}
+
+/** The actions of an item card, side by side from sm up. */
+export function ItemActions({ children }: { children: ReactNode }) {
+  return <div className="grid gap-6 border-t border-line pt-5 sm:grid-cols-2">{children}</div>
+}
+
+/** A label/value grid; wrap each pair in <Fact>. */
+export function Facts({
+  columns = 3,
+  className,
+  children,
+}: {
+  columns?: 2 | 3 | 4
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <dl
+      className={clsx(
+        "grid gap-x-6 gap-y-3",
+        columns === 2 && "sm:grid-cols-2",
+        columns === 3 && "sm:grid-cols-2 lg:grid-cols-3",
+        columns === 4 && "grid-cols-2 lg:grid-cols-4",
+        className
+      )}
+    >
+      {children}
+    </dl>
+  )
+}
+
+export function Fact({ label, wide, children }: { label: ReactNode; wide?: boolean; children: ReactNode }) {
+  return (
+    <div className={clsx("min-w-0", wide && "col-span-full")}>
+      <dt className="text-sm text-muted">{label}</dt>
+      <dd className="mt-0.5 break-words text-ink">{children}</dd>
+    </div>
+  )
+}
+
+/**
+ * A table in a card that scrolls sideways when it does not fit (phones).
+ * The scroll box is focusable and named so keyboard users can scroll it.
+ */
+export function DataTable({ label, head, children }: { label: string; head: readonly string[]; children: ReactNode }) {
+  return (
+    <div role="region" aria-label={label} tabIndex={0} className="overflow-x-auto card">
+      <table className="w-full min-w-[40rem] text-left text-sm">
+        <thead className="border-b border-line bg-surface text-muted">
+          <tr>
+            {head.map((h) => (
+              <th key={h} scope="col" className="px-4 py-3 font-medium">
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-line align-top text-body">{children}</tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/admin/account-swaps/page.tsx b/apps/web/src/app/admin/account-swaps/page.tsx
index 94e82cb9..314b423e 100644
--- a/apps/web/src/app/admin/account-swaps/page.tsx
+++ b/apps/web/src/app/admin/account-swaps/page.tsx
@@ -1,9 +1,12 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { AccountStatusBadge, StatusBadge, VerificationBadge } from "@/components/badges"
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { Badge, type BadgeTone } from "@/components/ui/Badge"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Field } from "@/components/ui/Field"
+import { Notice } from "@/components/ui/Notice"
 import {
   approvalBlock,
   listDecidedSwaps,
@@ -21,10 +24,18 @@ import { formatDate, formatDateTime } from "@/lib/format"
 import { FINANCE_ROLES } from "@/lib/receiving-accounts"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, Fact, Facts, ItemActions, ItemCard, ItemList } from "../_components/ui"
 import { decideAccountSwap } from "./actions"
 
 export const metadata: Metadata = { title: "Đổi tài khoản nhận", robots: { index: false } }
 
+const SWAP_TONES: Record<SwapForReview["status"], BadgeTone> = {
+  pending: "warning",
+  approved: "brand",
+  rejected: "danger",
+  cancelled: "neutral",
+}
+
 /**
  * Finance queue of account swaps (DOS/Give#55): organizers of give campaigns
  * that may hold money ask to replace an account that stopped being usable;
@@ -44,13 +55,10 @@ export default async function AdminAccountSwapsPage() {
   )
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin/accounts" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Xác minh tài khoản nhận
-        </Link>
-        <h1 className="mt-2 text-3xl font-bold">Đổi tài khoản nhận</h1>
-        <p className="mt-2 text-sm text-gray-600">
+    <AdminPage
+      title="Đổi tài khoản nhận"
+      intro={
+        <p>
           Người tổ chức của chiến dịch từ thiện đang gây quỹ, đang tạm dừng, hoặc cần chỉnh sửa mà tài khoản đã nhận
           giao dịch, đề nghị thay tài khoản nhận không còn dùng được bằng một tài khoản khác đã xác minh, đứng tên họ.
           Chỉ duyệt khi có căn cứ rằng tài khoản cũ không dùng được nữa (thư hoặc thông báo của ngân hàng, kết quả kiểm
@@ -58,14 +66,15 @@ export default async function AdminAccountSwapsPage() {
           tiền đã vào tài khoản cũ trước lúc đó vẫn thuộc chiến dịch. Trang chiến dịch và sao kê công khai ngày đổi. Mọi
           thao tác được ghi vào nhật ký kiểm toán.
         </p>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Chờ duyệt ({pending.length})</h2>
+      }
+    >
+      <AdminSection id="pending" title="Chờ duyệt" count={pending.length}>
         {pending.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có yêu cầu nào chờ duyệt.</p>
+          <EmptyState title="Không có yêu cầu nào chờ duyệt.">
+            Yêu cầu đổi tài khoản của người tổ chức sẽ hiện ở đây.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {pending.map((swap) => (
               <SwapCard
                 key={swap.id}
@@ -74,30 +83,29 @@ export default async function AdminAccountSwapsPage() {
                 selfId={session.user.id}
               />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Đã xử lý gần đây ({decided.length})</h2>
+      <AdminSection id="decided" title="Đã xử lý gần đây" count={decided.length}>
         {decided.length === 0 ? (
-          <p className="card p-6 text-gray-600">Chưa có yêu cầu nào được xử lý.</p>
+          <EmptyState title="Chưa có yêu cầu nào được xử lý." />
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {decided.map((swap) => (
               <SwapCard key={swap.id} swap={swap} oldTransactions={null} selfId={session.user.id} />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
-    </div>
+      </AdminSection>
+    </AdminPage>
   )
 }
 
 function AccountLine({ account }: { account: NonNullable<SwapForReview["old_binding"]>["account"] }) {
-  if (!account) return <dd>—</dd>
+  if (!account) return <dd className="mt-0.5 text-ink">—</dd>
   return (
-    <dd className="flex flex-wrap items-center gap-2">
+    <dd className="mt-0.5 flex flex-wrap items-center gap-2 text-ink">
       <span>
         {bankLabel(account.bank_bin)} · <span className="font-mono">{account.account_number}</span> ·{" "}
         {account.account_name}
@@ -123,134 +131,120 @@ function SwapCard({
   const block = oldTransactions === null ? null : approvalBlock(swap, oldTransactions)
 
   return (
-    <li className="space-y-4 card p-6">
+    <ItemCard>
       <div className="flex flex-wrap items-start justify-between gap-4">
-        <dl className="grid min-w-0 flex-1 gap-2 text-sm sm:grid-cols-2">
-          <div className="sm:col-span-2">
-            <dt className="text-gray-500">Chiến dịch</dt>
-            <dd className="flex flex-wrap items-center gap-2">
-              {campaign ? (
-                <>
-                  <span className="font-semibold">{campaign.title}</span>
-                  <StatusBadge status={campaign.status} />
-                </>
-              ) : (
-                swap.campaign_id
-              )}
-            </dd>
-          </div>
-          <div className="sm:col-span-2">
-            <dt className="text-gray-500">Người tổ chức</dt>
-            <dd className="flex flex-wrap items-center gap-2">
-              {organizer ? (
-                <>
-                  {organizer.display_name} (tên pháp lý: {organizer.legal_name})
-                  <VerificationBadge status={organizer.verification_status} />
-                </>
-              ) : (
-                "—"
-              )}
-            </dd>
-          </div>
-          <div>
-            <dt className="text-gray-500">Tài khoản cũ</dt>
-            <AccountLine account={swap.old_binding?.account ?? null} />
-            {swap.old_binding && (
-              <p className="mt-1 text-gray-600">
-                Gắn từ {formatDate(swap.old_binding.bound_at)}
-                {swap.old_binding.released_at ? `, ngừng lúc ${formatDateTime(swap.old_binding.released_at)}` : ""}
-                {oldTransactions !== null && ` · ${oldTransactions} giao dịch đã ghi nhận`}
-              </p>
-            )}
-            {swap.old_binding?.account?.review_note && (
-              <p className="mt-1 text-gray-600">Ghi chú tài chính: {swap.old_binding.account.review_note}</p>
-            )}
-          </div>
-          <div>
-            <dt className="text-gray-500">Tài khoản mới</dt>
-            <AccountLine account={swap.new_account} />
-          </div>
-          <div className="sm:col-span-2">
-            <dt className="text-gray-500">Lý do người tổ chức đưa ra (gửi {formatDateTime(swap.created_at)})</dt>
-            <dd className="break-words whitespace-pre-line">{swap.reason}</dd>
-          </div>
-          {swap.status !== "pending" && (
-            <div className="sm:col-span-2">
-              <dt className="text-gray-500">
-                {SWAP_STATUS_LABELS[swap.status]} lúc {formatDateTime(swap.decided_at)}
-              </dt>
-              <dd className="break-words">
-                {swap.decision_note ?? "—"}
-                {swap.public_note && <span className="block text-gray-600">Công khai: {swap.public_note}</span>}
-              </dd>
-            </div>
+        <h3 className="flex min-w-0 flex-wrap items-center gap-2 text-lg font-semibold">
+          {campaign ? (
+            <>
+              {campaign.title}
+              <StatusBadge status={campaign.status} />
+            </>
+          ) : (
+            swap.campaign_id
           )}
-        </dl>
-        <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">
-          {SWAP_STATUS_LABELS[swap.status]}
-        </span>
+        </h3>
+        <Badge tone={SWAP_TONES[swap.status]}>{SWAP_STATUS_LABELS[swap.status]}</Badge>
       </div>
+      <Facts columns={2}>
+        <Fact label="Người tổ chức" wide>
+          {organizer ? (
+            <span className="flex flex-wrap items-center gap-2">
+              {organizer.display_name} (tên pháp lý: {organizer.legal_name})
+              <VerificationBadge status={organizer.verification_status} />
+            </span>
+          ) : (
+            "—"
+          )}
+        </Fact>
+        <div className="min-w-0">
+          <dt className="text-sm text-muted">Tài khoản cũ</dt>
+          <AccountLine account={swap.old_binding?.account ?? null} />
+          {swap.old_binding && (
+            <dd className="mt-1 text-sm text-muted">
+              Gắn từ {formatDate(swap.old_binding.bound_at)}
+              {swap.old_binding.released_at ? `, ngừng lúc ${formatDateTime(swap.old_binding.released_at)}` : ""}
+              {oldTransactions !== null && ` · ${oldTransactions} giao dịch đã ghi nhận`}
+            </dd>
+          )}
+          {swap.old_binding?.account?.review_note && (
+            <dd className="mt-1 text-sm text-muted">Ghi chú tài chính: {swap.old_binding.account.review_note}</dd>
+          )}
+        </div>
+        <div className="min-w-0">
+          <dt className="text-sm text-muted">Tài khoản mới</dt>
+          <AccountLine account={swap.new_account} />
+        </div>
+        <Fact label={`Lý do người tổ chức đưa ra (gửi ${formatDateTime(swap.created_at)})`} wide>
+          <span className="whitespace-pre-line">{swap.reason}</span>
+        </Fact>
+        {swap.status !== "pending" && (
+          <Fact label={`${SWAP_STATUS_LABELS[swap.status]} lúc ${formatDateTime(swap.decided_at)}`} wide>
+            {swap.decision_note ?? "—"}
+            {swap.public_note && <span className="block text-muted">Công khai: {swap.public_note}</span>}
+          </Fact>
+        )}
+      </Facts>
 
       {swap.status === "pending" &&
         (own ? (
-          <p className="text-sm text-amber-800">Đây là chiến dịch của bạn; một nhân viên khác cần xử lý.</p>
+          <Notice tone="warning">Đây là chiến dịch của bạn; một nhân viên khác cần xử lý.</Notice>
         ) : (
-          <div className="grid gap-4 border-t border-gray-100 pt-4 sm:grid-cols-2">
+          <ItemActions>
             {block ? (
-              <p className="text-sm text-amber-800">Chưa duyệt được: {block}</p>
+              <Notice tone="warning">Chưa duyệt được: {block}</Notice>
             ) : (
               <ActionForm
                 action={decideAccountSwap.bind(null, swap.id)}
                 confirm="Duyệt đổi tài khoản? Tài khoản cũ ngừng nhận cho chiến dịch và bị khóa ngay; tài khoản mới bắt đầu nhận. Không hoàn tác được."
-                className="space-y-2"
+                className="space-y-3"
               >
                 <input type="hidden" name="decision" value="approved" />
-                <label htmlFor={`approve-note-${swap.id}`} className="label">
-                  Căn cứ duyệt (người tổ chức thấy; là lý do khóa tài khoản cũ)
-                </label>
-                <textarea
-                  id={`approve-note-${swap.id}`}
-                  name="note"
-                  className="field"
-                  rows={2}
-                  required
-                  maxLength={SWAP_REASON_MAX}
-                />
-                <label htmlFor={`public-note-${swap.id}`} className="label">
-                  Ghi chú công khai (không bắt buộc)
-                </label>
-                <input
-                  id={`public-note-${swap.id}`}
-                  name="public_note"
-                  className="field"
-                  maxLength={SWAP_PUBLIC_NOTE_MAX}
-                  placeholder="Ví dụ: Ngân hàng đã đóng tài khoản cũ."
-                />
+                <Field
+                  htmlFor={`approve-note-${swap.id}`}
+                  label="Căn cứ duyệt (người tổ chức thấy; là lý do khóa tài khoản cũ)"
+                >
+                  <textarea
+                    id={`approve-note-${swap.id}`}
+                    name="note"
+                    className="field"
+                    rows={2}
+                    required
+                    maxLength={SWAP_REASON_MAX}
+                  />
+                </Field>
+                <Field htmlFor={`public-note-${swap.id}`} label="Ghi chú công khai (không bắt buộc)">
+                  <input
+                    id={`public-note-${swap.id}`}
+                    name="public_note"
+                    className="field"
+                    maxLength={SWAP_PUBLIC_NOTE_MAX}
+                    placeholder="Ví dụ: Ngân hàng đã đóng tài khoản cũ."
+                  />
+                </Field>
                 <SubmitButton>Duyệt đổi tài khoản</SubmitButton>
               </ActionForm>
             )}
             <ActionForm
               action={decideAccountSwap.bind(null, swap.id)}
               confirm="Từ chối yêu cầu đổi tài khoản này?"
-              className="space-y-2"
+              className="space-y-3"
             >
               <input type="hidden" name="decision" value="rejected" />
-              <label htmlFor={`reject-note-${swap.id}`} className="label">
-                Từ chối
-              </label>
-              <textarea
-                id={`reject-note-${swap.id}`}
-                name="note"
-                className="field"
-                rows={2}
-                required
-                maxLength={SWAP_REASON_MAX}
-                placeholder="Lý do (người tổ chức sẽ thấy)"
-              />
+              <Field htmlFor={`reject-note-${swap.id}`} label="Từ chối">
+                <textarea
+                  id={`reject-note-${swap.id}`}
+                  name="note"
+                  className="field"
+                  rows={2}
+                  required
+                  maxLength={SWAP_REASON_MAX}
+                  placeholder="Lý do (người tổ chức sẽ thấy)"
+                />
+              </Field>
               <SubmitButton className="btn-danger">Từ chối</SubmitButton>
             </ActionForm>
-          </div>
+          </ItemActions>
         ))}
-    </li>
+    </ItemCard>
   )
 }
diff --git a/apps/web/src/app/admin/accounts/page.tsx b/apps/web/src/app/admin/accounts/page.tsx
index b6c278b5..532e0900 100644
--- a/apps/web/src/app/admin/accounts/page.tsx
+++ b/apps/web/src/app/admin/accounts/page.tsx
@@ -1,9 +1,12 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { AccountStatusBadge, VerificationBadge } from "@/components/badges"
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { Badge } from "@/components/ui/Badge"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Field } from "@/components/ui/Field"
+import { Notice } from "@/components/ui/Notice"
 import { requireSession } from "@/lib/auth/session"
 import { bankByBin } from "@/lib/banks"
 import { isStaff } from "@/lib/campaigns"
@@ -24,6 +27,7 @@ import {
 } from "@/lib/receiving-accounts"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, Fact, Facts, ItemActions, ItemCard, ItemList } from "../_components/ui"
 import { reviewAccount } from "./actions"
 
 export const metadata: Metadata = { title: "Xác minh tài khoản nhận", robots: { index: false } }
@@ -41,63 +45,44 @@ export default async function AdminAccountsPage() {
   )
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Kiểm duyệt
-        </Link>
-        <div className="mt-2 flex flex-wrap items-center justify-between gap-4">
-          <h1 className="text-3xl font-bold">Xác minh tài khoản nhận</h1>
-          <div className="flex flex-wrap gap-2">
-            <Link href="/admin/account-swaps" className="btn-secondary">
-              Đổi tài khoản nhận
-            </Link>
-            <Link href="/admin/statements" className="btn-secondary">
-              Đối soát sao kê
-            </Link>
-            <Link href="/admin/unmatched" className="btn-secondary">
-              Giao dịch chưa khớp
-            </Link>
-            <Link href="/admin/inbound" className="btn-secondary">
-              Sự kiện bị dừng
-            </Link>
-          </div>
-        </div>
-        <p className="mt-2 text-sm text-gray-600">
+    <AdminPage
+      title="Xác minh tài khoản nhận"
+      intro={
+        <p>
           Xác minh khi đã thấy, từ một nguồn do ngân hàng phát hành (sao kê trên trang của chính ngân hàng, hoặc biên
           lai và sao kê đã đối chiếu với ngân hàng), một giao dịch chuyển đi {formatVnd(VERIFICATION_TRANSFER_AMOUNT)}{" "}
           từ đúng số tài khoản này, nội dung đúng bằng mã xác minh, và tên người chuyển trên giao dịch trùng tên pháp lý
           của người tổ chức đã được xác minh. Tên chủ tài khoản và đường dẫn sao kê là do người tổ chức tự khai, chưa
           được kiểm chứng. Mọi thao tác được ghi vào nhật ký kiểm toán.
         </p>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Chờ xác minh ({pending.length})</h2>
+      }
+    >
+      <AdminSection id="pending" title="Chờ xác minh" count={pending.length}>
         {pending.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có tài khoản nào chờ xác minh.</p>
+          <EmptyState title="Không có tài khoản nào chờ xác minh.">
+            Tài khoản người tổ chức khai báo sẽ hiện ở đây cho tới khi được xác minh hoặc từ chối.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {pending.map((account) => (
               <AccountCard key={account.id} account={account} refs={refs} selfId={session.user.id} />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Đã xử lý gần đây ({reviewed.length})</h2>
+      <AdminSection id="reviewed" title="Đã xử lý gần đây" count={reviewed.length}>
         {reviewed.length === 0 ? (
-          <p className="card p-6 text-gray-600">Chưa có tài khoản nào được xử lý.</p>
+          <EmptyState title="Chưa có tài khoản nào được xử lý." />
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {reviewed.map((account) => (
               <AccountCard key={account.id} account={account} refs={refs} selfId={session.user.id} />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
-    </div>
+      </AdminSection>
+    </AdminPage>
   )
 }
 
@@ -120,128 +105,111 @@ function AccountCard({
   const status = account.verification_status
 
   return (
-    <li className="space-y-4 card p-6">
+    <ItemCard>
       <div className="flex flex-wrap items-start justify-between gap-4">
-        <dl className="grid min-w-0 flex-1 gap-2 text-sm sm:grid-cols-2">
-          <div>
-            <dt className="text-gray-500">Ngân hàng</dt>
-            <dd>
-              {bank ? `${bank.shortName} – ${bank.name}` : account.bank_bin} (BIN {account.bank_bin})
-            </dd>
-          </div>
-          <div>
-            <dt className="text-gray-500">Số tài khoản</dt>
-            <dd className="font-mono">{account.account_number}</dd>
-          </div>
-          <div>
-            <dt className="text-gray-500">Tên chủ tài khoản (người tổ chức khai)</dt>
-            <dd>
-              {account.account_name}{" "}
-              <span className={nameMatches ? "text-gray-600" : "font-semibold text-red-700"}>
-                {nameMatches ? "(tên khai trùng tên pháp lý)" : "✗ tên khai không trùng tên pháp lý"}
-              </span>
-            </dd>
-          </div>
-          <div>
-            <dt className="text-gray-500">Người tổ chức</dt>
-            <dd className="flex flex-wrap items-center gap-2">
-              {organizer ? (
-                <>
-                  {organizer.display_name} (tên pháp lý: {organizer.legal_name})
-                  {organizer.phone ? ` · ${organizer.phone}` : ""}
-                  <VerificationBadge status={organizer.verification_status} />
-                </>
-              ) : (
-                "—"
-              )}
-            </dd>
-          </div>
-          <div>
-            <dt className="text-gray-500">Loại</dt>
-            <dd>{account.account_kind ? ACCOUNT_KIND_LABELS[account.account_kind] : "—"}</dd>
-          </div>
-          <div>
-            <dt className="text-gray-500">Khai báo</dt>
-            <dd>{formatDate(account.created_at)}</dd>
-          </div>
-          {account.public_statement_url && (
-            <div className="sm:col-span-2">
-              <dt className="text-gray-500">
-                Sao kê công khai (người tổ chức cung cấp, chưa kiểm chứng; tên miền:{" "}
-                <span className="font-semibold text-gray-900">{hostnameOf(account.public_statement_url)}</span>)
-              </dt>
-              <dd className="break-all">
-                <a
-                  href={account.public_statement_url}
-                  className="text-brand-700"
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
-                >
-                  {account.public_statement_url}
-                </a>
-              </dd>
-            </div>
-          )}
-          {status === "pending" && (
-            <div className="sm:col-span-2">
-              <dt className="text-gray-500">Giao dịch cần thấy</dt>
-              <dd>
-                Chuyển đi {formatVnd(VERIFICATION_TRANSFER_AMOUNT)}, nội dung{" "}
-                <span className="font-mono font-bold">{account.verification_code}</span>
-              </dd>
-            </div>
-          )}
-          {account.review_note && (
-            <div className="sm:col-span-2">
-              <dt className="text-gray-500">Lý do</dt>
-              <dd>{account.review_note}</dd>
-            </div>
-          )}
-          {status === "verified" && (
-            <div>
-              <dt className="text-gray-500">Xác minh ngày</dt>
-              <dd>{formatDate(account.verified_at)}</dd>
-            </div>
-          )}
-          <div className="sm:col-span-2">
-            <dt className="text-gray-500">Chiến dịch đang gắn</dt>
-            <dd>{holder ? (boundCampaign?.title ?? holder.campaign_id) : "Chưa gắn"}</dd>
-          </div>
-        </dl>
+        <div className="min-w-0">
+          <h3 className="text-lg font-semibold">
+            {bank ? `${bank.shortName} – ${bank.name}` : account.bank_bin}{" "}
+            <span className="font-mono font-medium text-body">{account.account_number}</span>
+          </h3>
+          <p className="text-sm text-muted">BIN {account.bank_bin}</p>
+        </div>
         <AccountStatusBadge status={status} />
       </div>
+      <Facts columns={2}>
+        <Fact label="Tên chủ tài khoản (người tổ chức khai)">
+          <span className="flex flex-wrap items-center gap-2">
+            {account.account_name}
+            {nameMatches ? (
+              <span className="text-sm text-muted">(tên khai trùng tên pháp lý)</span>
+            ) : (
+              <Badge tone="danger">✗ tên khai không trùng tên pháp lý</Badge>
+            )}
+          </span>
+        </Fact>
+        <Fact label="Người tổ chức">
+          {organizer ? (
+            <span className="flex flex-wrap items-center gap-2">
+              {organizer.display_name} (tên pháp lý: {organizer.legal_name})
+              {organizer.phone ? ` · ${organizer.phone}` : ""}
+              <VerificationBadge status={organizer.verification_status} />
+            </span>
+          ) : (
+            "—"
+          )}
+        </Fact>
+        <Fact label="Loại">{account.account_kind ? ACCOUNT_KIND_LABELS[account.account_kind] : "—"}</Fact>
+        <Fact label="Khai báo">{formatDate(account.created_at)}</Fact>
+        {account.public_statement_url && (
+          <Fact
+            wide
+            label={
+              <>
+                Sao kê công khai (người tổ chức cung cấp, chưa kiểm chứng; tên miền:{" "}
+                <span className="font-semibold text-ink">{hostnameOf(account.public_statement_url)}</span>)
+              </>
+            }
+          >
+            <a
+              href={account.public_statement_url}
+              className="link break-all"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+            >
+              {account.public_statement_url}
+              <span className="sr-only"> (mở thẻ mới)</span>
+            </a>
+          </Fact>
+        )}
+        {status === "pending" && (
+          <Fact label="Giao dịch cần thấy" wide>
+            Chuyển đi {formatVnd(VERIFICATION_TRANSFER_AMOUNT)}, nội dung{" "}
+            <span className="rounded-sm bg-gray-100 px-1.5 font-mono font-bold">{account.verification_code}</span>
+          </Fact>
+        )}
+        {account.review_note && (
+          <Fact label="Lý do" wide>
+            {account.review_note}
+          </Fact>
+        )}
+        {status === "verified" && <Fact label="Xác minh ngày">{formatDate(account.verified_at)}</Fact>}
+        <Fact label="Chiến dịch đang gắn" wide>
+          {holder ? (boundCampaign?.title ?? holder.campaign_id) : "Chưa gắn"}
+        </Fact>
+      </Facts>
 
       {own ? (
-        <p className="text-sm text-amber-800">Đây là tài khoản của bạn; một nhân viên khác cần xử lý.</p>
+        <Notice tone="warning">Đây là tài khoản của bạn; một nhân viên khác cần xử lý.</Notice>
       ) : (
-        <div className="grid gap-4 border-t border-gray-100 pt-4 sm:grid-cols-2">
+        <ItemActions>
           {status === "pending" && options.verifyBlocked && (
-            <p className="text-sm text-amber-800">Chưa xác minh được: {options.verifyBlocked}</p>
+            <Notice tone="warning">Chưa xác minh được: {options.verifyBlocked}</Notice>
           )}
           {status === "pending" && !options.verifyBlocked && (
             <ActionForm
               action={reviewAccount.bind(null, account.id)}
               confirm="Xác minh tài khoản này? Sau đó người tổ chức có thể gắn nó với chiến dịch để nhận tiền."
-              className="space-y-2"
+              className="space-y-3"
             >
               <input type="hidden" name="decision" value="verified" />
               <input type="hidden" name="expected_code" value={account.verification_code} />
-              <label htmlFor={`sender-${account.id}`} className="label">
-                Tên người chuyển trên giao dịch (đọc từ nguồn của ngân hàng)
-              </label>
-              <input id={`sender-${account.id}`} name="sender_name" className="field" required maxLength={120} />
-              <label htmlFor={`evidence-${account.id}`} className="label">
-                Bằng chứng giao dịch xác minh
-              </label>
-              <textarea
-                id={`evidence-${account.id}`}
-                name="evidence"
-                className="field"
-                rows={2}
-                required
-                maxLength={350}
-                placeholder="Mã giao dịch ngân hàng, ngày giờ, nguồn (trang sao kê của ngân hàng, biên lai đã đối chiếu)"
-              />
+              <Field
+                htmlFor={`sender-${account.id}`}
+                label="Tên người chuyển trên giao dịch (đọc từ nguồn của ngân hàng)"
+              >
+                <input id={`sender-${account.id}`} name="sender_name" className="field" required maxLength={120} />
+              </Field>
+              <Field htmlFor={`evidence-${account.id}`} label="Bằng chứng giao dịch xác minh">
+                <textarea
+                  id={`evidence-${account.id}`}
+                  name="evidence"
+                  className="field"
+                  rows={2}
+                  required
+                  maxLength={350}
+                  placeholder="Mã giao dịch ngân hàng, ngày giờ, nguồn (trang sao kê của ngân hàng, biên lai đã đối chiếu)"
+                />
+              </Field>
               <SubmitButton>Xác minh</SubmitButton>
             </ActionForm>
           )}
@@ -253,22 +221,24 @@ function AccountCard({
                   ? "Từ chối tài khoản này? Số tài khoản sẽ được giải phóng để khai báo lại."
                   : "Khóa tài khoản này? Chiến dịch đang gắn với nó sẽ không nhận được tiền ủng hộ mới."
               }
-              className="space-y-2"
+              className="space-y-3"
             >
               {/* Rejecting frees the number; an account that was ever bound can only be disabled. */}
               <input type="hidden" name="decision" value={options.close} />
-              <label htmlFor={`reason-${account.id}`} className="label">
-                {options.close === "rejected" ? "Từ chối" : "Khóa tài khoản"}
-              </label>
-              <textarea
-                id={`reason-${account.id}`}
-                name="reason"
-                className="field"
-                rows={2}
-                required
-                maxLength={1000}
-                placeholder="Lý do (người tổ chức sẽ thấy)"
-              />
+              <Field
+                htmlFor={`reason-${account.id}`}
+                label={options.close === "rejected" ? "Từ chối" : "Khóa tài khoản"}
+              >
+                <textarea
+                  id={`reason-${account.id}`}
+                  name="reason"
+                  className="field"
+                  rows={2}
+                  required
+                  maxLength={1000}
+                  placeholder="Lý do (người tổ chức sẽ thấy)"
+                />
+              </Field>
               <SubmitButton className="btn-danger">{options.close === "rejected" ? "Từ chối" : "Khóa"}</SubmitButton>
             </ActionForm>
           )}
@@ -276,13 +246,16 @@ function AccountCard({
             <ActionForm
               action={reviewAccount.bind(null, account.id)}
               confirm="Mở lại tài khoản để xác minh? Người tổ chức sẽ nhận mã xác minh mới."
+              className="space-y-2"
             >
               <input type="hidden" name="decision" value="pending" />
+              <p className="label">Mở lại</p>
+              <p className="text-sm text-muted">Người tổ chức sẽ nhận mã xác minh mới.</p>
               <SubmitButton className="btn-secondary">Mở lại để xác minh</SubmitButton>
             </ActionForm>
           )}
-        </div>
+        </ItemActions>
       )}
-    </li>
+    </ItemCard>
   )
 }
diff --git a/apps/web/src/app/admin/error.tsx b/apps/web/src/app/admin/error.tsx
new file mode 100644
index 00000000..93f60a44
--- /dev/null
+++ b/apps/web/src/app/admin/error.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import { Button } from "@/components/ui/Button"
+import { Notice } from "@/components/ui/Notice"
+
+/** An admin page that failed to load; the admin tabs stay so staff can go elsewhere. */
+export default function AdminError({ retry }: { error: Error & { digest?: string }; retry: () => void }) {
+  return (
+    <div className="container-page py-8 sm:py-10">
+      <div className="max-w-2xl space-y-4">
+        <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">Không tải được trang này</h1>
+        <Notice tone="danger">
+          Có lỗi khi đọc dữ liệu của trang. Hãy thử lại; nếu vẫn lỗi, hãy tải lại trang sau ít phút.
+        </Notice>
+        <Button onClick={() => retry()}>Thử lại</Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/admin/evidence/page.tsx b/apps/web/src/app/admin/evidence/page.tsx
index 64dc970b..56d937cd 100644
--- a/apps/web/src/app/admin/evidence/page.tsx
+++ b/apps/web/src/app/admin/evidence/page.tsx
@@ -4,6 +4,9 @@ import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Field } from "@/components/ui/Field"
+import { Notice } from "@/components/ui/Notice"
 import { requireSession } from "@/lib/auth/session"
 import { isStaff } from "@/lib/campaigns"
 import { HIDDEN_LIMIT, listModerationQueue, MODERATION_ROLES, type ModerationItem } from "@/lib/evidence-moderation"
@@ -12,6 +15,7 @@ import { campaignRefs } from "@/lib/receiving-accounts"
 import { EVIDENCE_KINDS, evidenceUrl } from "@/lib/statement"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, ItemList } from "../_components/ui"
 import { moderateEvidence } from "./actions"
 
 export const metadata: Metadata = { title: "Ảnh chứng từ bị báo cáo", robots: { index: false } }
@@ -35,48 +39,47 @@ export default async function AdminEvidencePage() {
   )
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Kiểm duyệt
-        </Link>
-        <h1 className="mt-2 text-3xl font-bold">Ảnh chứng từ bị báo cáo</h1>
-        <p className="mt-2 text-sm text-gray-600">
+    <AdminPage
+      title="Ảnh chứng từ bị báo cáo"
+      intro={
+        <p>
           Ảnh chứng từ khoản chi được công khai trên sao kê. Người tổ chức phải che thông tin cá nhân của người nhận (số
           CCCD, số điện thoại, địa chỉ…). Ẩn ảnh nào lộ thông tin cá nhân: ảnh biến khỏi sao kê công khai ngay, người tổ
           chức vẫn thấy ảnh đã bị ẩn để tải lại bản đã che. Giữ ảnh nếu báo cáo không đúng. Mỗi lần ẩn hoặc hiện lại
           được ghi vào nhật ký kiểm toán.
         </p>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Chờ xem xét ({reported.length})</h2>
+      }
+    >
+      <AdminSection id="reported" title="Chờ xem xét" count={reported.length}>
         {reported.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có ảnh nào bị báo cáo.</p>
+          <EmptyState title="Không có ảnh nào bị báo cáo.">
+            Ảnh chứng từ bị người xem báo cáo lộ thông tin cá nhân sẽ hiện ở đây.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {reported.map((item) => (
               <EvidenceCard key={item.evidence_id} item={item} campaign={refs.get(item.campaign_id ?? "")} />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-4 text-xl font-bold">
-          Đang ẩn{hidden.length < HIDDEN_LIMIT ? ` (${hidden.length})` : ` (${HIDDEN_LIMIT} gần nhất)`}
-        </h2>
+      <AdminSection
+        id="hidden"
+        title="Đang ẩn"
+        count={hidden.length < HIDDEN_LIMIT ? hidden.length : `${HIDDEN_LIMIT} gần nhất`}
+      >
         {hidden.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có ảnh nào đang bị ẩn.</p>
+          <EmptyState title="Không có ảnh nào đang bị ẩn." />
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {hidden.map((item) => (
               <EvidenceCard key={item.evidence_id} item={item} campaign={refs.get(item.campaign_id ?? "")} />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
-    </div>
+      </AdminSection>
+    </AdminPage>
   )
 }
 
@@ -90,53 +93,59 @@ function EvidenceCard({
   const isHidden = item.state?.hidden ?? false
   const kind = EVIDENCE_KINDS[item.kind] ?? item.kind
   return (
-    <li className="flex flex-wrap gap-6 card p-6">
-      <a href={evidenceUrl(item.storage_path)} target="_blank" rel="noreferrer" className="shrink-0">
+    <li className="flex flex-col gap-6 card p-5 sm:flex-row sm:p-6">
+      <a
+        href={evidenceUrl(item.storage_path)}
+        target="_blank"
+        rel="noreferrer"
+        className="shrink-0 self-start rounded"
+        aria-label={`${kind}: mở ảnh cỡ đầy đủ trong thẻ mới`}
+      >
         <Image
           src={evidenceUrl(item.storage_path)}
           alt={kind}
           width={192}
           height={192}
           unoptimized
-          className="h-48 w-48 rounded border border-gray-200 bg-gray-50 object-contain"
+          className="h-48 w-48 rounded border border-line bg-surface object-contain"
         />
       </a>
-      <div className="min-w-0 flex-1 space-y-3 text-sm">
-        <p className="text-gray-600">
+      <div className="min-w-0 flex-1 space-y-4">
+        <p className="text-sm text-muted">
           {kind} · tải lên {formatDateTime(item.uploaded_at)}
           {campaign && (
             <>
               {" · "}
-              <Link href={`/campaigns/${campaign.slug}/statement`} className="text-brand-700" target="_blank">
+              <Link href={`/campaigns/${campaign.slug}/statement`} className="link" target="_blank">
                 {campaign.title}
+                <span className="sr-only"> (mở thẻ mới)</span>
               </Link>
             </>
           )}
         </p>
         {isHidden && (
-          <p className="rounded bg-red-50 p-2 text-red-800">
+          <Notice tone="danger">
             Đang ẩn từ {formatDateTime(item.state!.moderated_at)}
             {item.state?.reason ? `: ${item.state.reason}` : ""}
-          </p>
+          </Notice>
         )}
         {item.reports.length > 0 && (
           <div>
-            <p className="font-medium">{item.reports.length} báo cáo đang mở</p>
-            <ul className="mt-1 list-disc space-y-1 pl-5 text-gray-700">
+            <p className="font-semibold text-ink">{item.reports.length} báo cáo đang mở</p>
+            <ul className="mt-1 list-disc space-y-1 pl-5 text-body">
               {item.reports.map((r) => (
                 <li key={r.id} className="break-words">
-                  {r.reason ?? <span className="text-gray-500">(không ghi lý do)</span>}{" "}
-                  <span className="text-xs text-gray-500">{formatDateTime(r.created_at)}</span>
+                  {r.reason ?? <span className="text-muted">(không ghi lý do)</span>}{" "}
+                  <span className="text-sm text-muted">{formatDateTime(r.created_at)}</span>
                 </li>
               ))}
             </ul>
           </div>
         )}
-        <ActionForm action={moderateEvidence.bind(null, item.evidence_id)} className="space-y-2">
-          <label htmlFor={`reason-${item.evidence_id}`} className="label">
-            Lý do (bắt buộc khi ẩn)
-          </label>
-          <input id={`reason-${item.evidence_id}`} name="reason" maxLength={500} className="field" />
+        <ActionForm action={moderateEvidence.bind(null, item.evidence_id)} className="max-w-xl space-y-3">
+          <Field htmlFor={`reason-${item.evidence_id}`} label="Lý do (bắt buộc khi ẩn)">
+            <input id={`reason-${item.evidence_id}`} name="reason" maxLength={500} className="field" />
+          </Field>
           <div className="flex flex-wrap gap-2">
             {!isHidden && (
               <SubmitButton name="decision" value="hide" className="btn-primary">
diff --git a/apps/web/src/app/admin/inbound/page.tsx b/apps/web/src/app/admin/inbound/page.tsx
index 797078b9..41572286 100644
--- a/apps/web/src/app/admin/inbound/page.tsx
+++ b/apps/web/src/app/admin/inbound/page.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Notice } from "@/components/ui/Notice"
 import { requireSession } from "@/lib/auth/session"
 import { isStaff } from "@/lib/campaigns"
 import { formatDateTime } from "@/lib/format"
@@ -21,6 +22,7 @@ import { listStaff } from "@/lib/staff"
 import { accountLabels, type AuditEntry } from "@/lib/statement-import"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, DataTable, ItemActions, ItemCard, ItemList } from "../_components/ui"
 import { dismissInboundEvent, retryInboundEvent } from "./actions"
 
 export const metadata: Metadata = { title: "Sự kiện tiền vào bị dừng", robots: { index: false } }
@@ -47,29 +49,29 @@ export default async function AdminInboundPage() {
   const staffNames = new Map(staff.map((s) => [s.user_id, s.email ?? s.display_name ?? s.user_id]))
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin/statements" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Đối soát sao kê
-        </Link>
-        <h1 className="mt-2 text-3xl font-bold">Sự kiện tiền vào bị dừng</h1>
-        <p className="mt-2 text-sm text-gray-600">
+    <AdminPage
+      title="Sự kiện tiền vào bị dừng"
+      intro={
+        <p>
           Mỗi sao kê tải lên (hoặc thông báo từ ngân hàng, cổng thanh toán) là một sự kiện Give xử lý tự động. Sự kiện
           nào thử 10 lần vẫn lỗi thì dừng ở đây, chờ nhân viên tài chính quyết định. Gửi lại khi nguyên nhân đã được
           khắc phục (ví dụ cơ sở dữ liệu đã chạy lại bình thường): Give thử lại từ đầu trong vài phút. Bỏ qua khi sự
           kiện không bao giờ nên được xử lý (file thử, tải nhầm tài khoản): ghi lý do; dữ liệu đã ghi trước đó vẫn giữ
           nguyên. Mỗi lần gửi lại hay bỏ qua đều được ghi vào nhật ký kiểm toán.
         </p>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">
-          Đang dừng ({total > events.length ? `${events.length} cũ nhất / ${total}` : total})
-        </h2>
+      }
+    >
+      <AdminSection
+        id="parked"
+        title="Đang dừng"
+        count={total > events.length ? `${events.length} cũ nhất / ${total}` : total}
+      >
         {events.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có sự kiện nào đang dừng.</p>
+          <EmptyState title="Không có sự kiện nào đang dừng.">
+            Mọi sao kê và thông báo tiền vào đều đang được xử lý tự động.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {events.map((event) => {
               const ref = refs.get(event.id) ?? null
               return (
@@ -81,12 +83,12 @@ export default async function AdminInboundPage() {
                 />
               )
             })}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
       {isAdmin && <AuditTrail entries={audit} names={staffNames} />}
-    </div>
+    </AdminPage>
   )
 }
 
@@ -100,30 +102,31 @@ function ParkedCard({
   part: { number: number; count: number } | null
 }) {
   return (
-    <li className="space-y-4 card p-6">
-      <div className="space-y-2 text-sm">
-        <p className="text-gray-500">
+    <ItemCard>
+      <div className="space-y-3">
+        <p className="text-sm text-muted">
           {INBOUND_CHANNEL_LABELS[event.channel] ?? event.channel}
           {account ? ` · ${account}` : ""}
           {part ? ` · phần ${part.number}/${part.count} của file` : ""} · nhận lúc {formatDateTime(event.received_at)}
         </p>
-        <p className="text-base font-medium text-amber-800">{parkedReasonLabel(event.last_error)}</p>
-        <p className="text-gray-600">
-          Mã lỗi: <span className="font-mono">{event.last_error ?? "—"}</span> · đã thử {event.attempts} lần
-          {event.last_attempt_at ? `, lần cuối ${formatDateTime(event.last_attempt_at)}` : ""} · dừng lúc{" "}
-          {formatDateTime(event.parked_at)}
-        </p>
-        <p className="font-mono text-xs break-all text-gray-400">{event.id}</p>
+        <Notice tone="warning" title={parkedReasonLabel(event.last_error)}>
+          <p className="text-sm">
+            Mã lỗi: <span className="font-mono">{event.last_error ?? "—"}</span> · đã thử {event.attempts} lần
+            {event.last_attempt_at ? `, lần cuối ${formatDateTime(event.last_attempt_at)}` : ""} · dừng lúc{" "}
+            {formatDateTime(event.parked_at)}
+          </p>
+        </Notice>
+        <p className="font-mono text-xs break-all text-muted">{event.id}</p>
       </div>
 
-      <div className="grid gap-4 border-t border-gray-100 pt-4 sm:grid-cols-2">
+      <ItemActions>
         <ActionForm
           action={retryInboundEvent.bind(null, event.id)}
           confirm="Gửi lại sự kiện này để Give tự xử lý lại?"
           className="space-y-2"
         >
           <p className="label">Gửi lại</p>
-          <p className="text-sm text-gray-600">
+          <p className="text-sm text-muted">
             Give thử lại trong lần chạy tới, với 10 lượt thử mới. Chỉ nên gửi lại khi nguyên nhân đã được khắc phục.
           </p>
           <SubmitButton className="btn-secondary">Gửi lại</SubmitButton>
@@ -147,8 +150,8 @@ function ParkedCard({
           />
           <SubmitButton className="btn-secondary">Bỏ qua</SubmitButton>
         </ActionForm>
-      </div>
-    </li>
+      </ItemActions>
+    </ItemCard>
   )
 }
 
@@ -166,28 +169,31 @@ function auditSummary(entry: AuditEntry): string {
 
 function AuditTrail({ entries, names }: { entries: AuditEntry[]; names: Map<string, string> }) {
   return (
-    <section>
-      <h2 className="mb-2 text-xl font-bold">Nhật ký kiểm toán ({entries.length})</h2>
-      <p className="mb-4 text-sm text-gray-600">Gửi lại và bỏ qua gần đây. Chỉ quản trị viên xem được.</p>
+    <AdminSection
+      id="audit"
+      title="Nhật ký kiểm toán"
+      count={entries.length}
+      lead="Gửi lại và bỏ qua gần đây. Chỉ quản trị viên xem được."
+    >
       {entries.length === 0 ? (
-        <p className="card p-6 text-gray-600">Chưa có mục nào.</p>
+        <EmptyState title="Chưa có mục nào." />
       ) : (
-        <ul className="divide-y divide-gray-100 card text-sm">
+        <DataTable label="Nhật ký gửi lại và bỏ qua" head={["Thao tác", "Chi tiết", "Người thực hiện", "Lúc"]}>
           {entries.map((entry) => (
-            <li key={entry.id} className="space-y-1 p-4">
-              <div className="flex flex-wrap justify-between gap-2">
-                <span className="font-medium">{INBOUND_AUDIT_LABELS[entry.action] ?? entry.action}</span>
-                <span className="text-gray-500">{formatDateTime(entry.created_at)}</span>
-              </div>
-              <div className="text-gray-700">{auditSummary(entry)}</div>
-              <div className="font-mono text-xs break-all text-gray-400">{entry.entity_id}</div>
-              <div className="text-gray-500">
-                Người thực hiện: {entry.actor_id ? (names.get(entry.actor_id) ?? entry.actor_id) : "—"}
-              </div>
-            </li>
+            <tr key={entry.id}>
+              <td className="px-4 py-3">
+                <p className="font-medium text-ink">{INBOUND_AUDIT_LABELS[entry.action] ?? entry.action}</p>
+                <p className="font-mono text-xs break-all text-muted">{entry.entity_id}</p>
+              </td>
+              <td className="max-w-md px-4 py-3 break-words">{auditSummary(entry)}</td>
+              <td className="px-4 py-3 break-all">
+                {entry.actor_id ? (names.get(entry.actor_id) ?? entry.actor_id) : "—"}
+              </td>
+              <td className="px-4 py-3 whitespace-nowrap text-muted">{formatDateTime(entry.created_at)}</td>
+            </tr>
           ))}
-        </ul>
+        </DataTable>
       )}
-    </section>
+    </AdminSection>
   )
 }
diff --git a/apps/web/src/app/admin/layout.tsx b/apps/web/src/app/admin/layout.tsx
new file mode 100644
index 00000000..40ce7e26
--- /dev/null
+++ b/apps/web/src/app/admin/layout.tsx
@@ -0,0 +1,65 @@
+import type { ReactNode } from "react"
+
+import { ShieldIcon } from "@/components/ui/icons"
+import { getSession } from "@/lib/auth/session"
+import { isStaff } from "@/lib/campaigns"
+import { MODERATION_ROLES } from "@/lib/evidence-moderation"
+import { FINANCE_ROLES } from "@/lib/receiving-accounts"
+import { dbAs } from "@/lib/supabase"
+
+import { AdminNav, type AdminNavLink } from "./_components/AdminNav"
+
+/**
+ * The admin section's frame: tabs for the pages this person's role opens.
+ * Each page still checks the role itself (and 404s); the tabs are only
+ * navigation, so a signed-out or non-staff visitor sees none.
+ */
+export default async function AdminLayout({ children }: { children: ReactNode }) {
+  const links = await adminLinks()
+  return (
+    <>
+      {links.length > 0 && (
+        <div className="bg-surface">
+          <div className="container-page pt-4">
+            <p className="flex items-center gap-1.5 text-sm font-medium text-muted">
+              <ShieldIcon width={16} height={16} />
+              Quản trị Give
+            </p>
+            <AdminNav links={links} />
+          </div>
+        </div>
+      )}
+      {children}
+    </>
+  )
+}
+
+async function adminLinks(): Promise<AdminNavLink[]> {
+  const session = await getSession()
+  if (!session) return []
+  const db = dbAs(session.accessToken)
+  const [moderates, finance, admin] = await Promise.all([
+    isStaff(db, MODERATION_ROLES),
+    isStaff(db, FINANCE_ROLES),
+    isStaff(db, ["admin"]),
+  ])
+  return [
+    ...(moderates
+      ? [
+          { href: "/admin", label: "Kiểm duyệt" },
+          { href: "/admin/evidence", label: "Ảnh chứng từ" },
+          { href: "/admin/payment-requests", label: "Thanh toán" },
+        ]
+      : []),
+    ...(finance
+      ? [
+          { href: "/admin/accounts", label: "Tài khoản nhận" },
+          { href: "/admin/account-swaps", label: "Đổi tài khoản" },
+          { href: "/admin/statements", label: "Sao kê" },
+          { href: "/admin/unmatched", label: "Chưa khớp" },
+          { href: "/admin/inbound", label: "Tiền vào bị dừng" },
+        ]
+      : []),
+    ...(admin ? [{ href: "/admin/roles", label: "Phân quyền" }] : []),
+  ]
+}
diff --git a/apps/web/src/app/admin/loading.tsx b/apps/web/src/app/admin/loading.tsx
new file mode 100644
index 00000000..fac467c3
--- /dev/null
+++ b/apps/web/src/app/admin/loading.tsx
@@ -0,0 +1,26 @@
+/** Shown while an admin page loads: the page's shape in grey, under the admin tabs. */
+export default function AdminLoading() {
+  return (
+    <div className="container-page space-y-10 py-8 sm:py-10" role="status" aria-live="polite">
+      <span className="sr-only">Đang tải…</span>
+      <div aria-hidden className="space-y-3">
+        <div className="h-8 w-64 max-w-full animate-pulse rounded bg-gray-200" />
+        <div className="h-4 w-full max-w-3xl animate-pulse rounded bg-gray-100" />
+        <div className="h-4 w-2/3 max-w-2xl animate-pulse rounded bg-gray-100" />
+      </div>
+      <div aria-hidden className="space-y-4">
+        <div className="h-6 w-48 animate-pulse rounded bg-gray-200" />
+        {[0, 1].map((i) => (
+          <div key={i} className="space-y-4 card p-5 sm:p-6">
+            <div className="h-5 w-1/2 animate-pulse rounded bg-gray-200" />
+            <div className="grid gap-3 sm:grid-cols-3">
+              {[0, 1, 2].map((j) => (
+                <div key={j} className="h-10 animate-pulse rounded bg-gray-100" />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/admin/page.tsx b/apps/web/src/app/admin/page.tsx
index 56fd0b53..289361ed 100644
--- a/apps/web/src/app/admin/page.tsx
+++ b/apps/web/src/app/admin/page.tsx
@@ -1,9 +1,12 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound, redirect } from "next/navigation"
+import type { ReactNode } from "react"
 
 import { TypeBadge, VerificationBadge } from "@/components/badges"
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { ButtonLink } from "@/components/ui/Button"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Notice } from "@/components/ui/Notice"
 import { requireSession } from "@/lib/auth/session"
 import {
   accountProblemLabel,
@@ -12,17 +15,19 @@ import {
   listReviewQueue,
   listWaitingForAccount,
   waitingAdvice,
+  type CampaignType,
   type WaitingForAccount,
 } from "@/lib/campaigns"
 import { formatDate, formatVnd } from "@/lib/format"
 import { FINANCE_ROLES } from "@/lib/receiving-accounts"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, Fact, Facts, ItemActions, ItemCard, ItemList } from "./_components/ui"
 import { approveCampaign, requestChanges, setVerification } from "./actions"
 
 export const metadata: Metadata = { title: "Kiểm duyệt", robots: { index: false } }
 
-export default async function AdminPage() {
+export default async function AdminReviewPage() {
   const session = await requireSession("/admin")
   const db = dbAs(session.accessToken)
   const [moderates, reviewsAccounts] = await Promise.all([isStaff(db), isStaff(db, FINANCE_ROLES)])
@@ -33,7 +38,8 @@ export default async function AdminPage() {
     notFound()
   }
 
-  const [queue, waiting, organizers, canManageRoles] = await Promise.all([
+  // Links to the other admin pages are the admin layout's tabs.
+  const [queue, waiting, organizers] = await Promise.all([
     listReviewQueue(db),
     // A read error hides only this section, not the review queue.
     listWaitingForAccount(db).catch((e: { code?: string; message?: string } | null): WaitingForAccount[] | null => {
@@ -41,117 +47,71 @@ export default async function AdminPage() {
       return null
     }),
     listOrganizersToVerify(db),
-    isStaff(db, ["admin"]),
   ])
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <h1 className="text-3xl font-bold">Kiểm duyệt</h1>
-        <div className="flex flex-wrap gap-2">
-          <Link href="/admin/evidence" className="btn-secondary">
-            Ảnh chứng từ bị báo cáo
-          </Link>
-          <Link href="/admin/payment-requests" className="btn-secondary">
-            Yêu cầu thanh toán
-          </Link>
-          {reviewsAccounts && (
-            <>
-              <Link href="/admin/accounts" className="btn-secondary">
-                Xác minh tài khoản nhận
-              </Link>
-              <Link href="/admin/account-swaps" className="btn-secondary">
-                Đổi tài khoản nhận
-              </Link>
-              <Link href="/admin/statements" className="btn-secondary">
-                Đối soát sao kê
-              </Link>
-              <Link href="/admin/inbound" className="btn-secondary">
-                Sự kiện bị dừng
-              </Link>
-            </>
-          )}
-          {canManageRoles && (
-            <Link href="/admin/roles" className="btn-secondary">
-              Phân quyền nhân sự
-            </Link>
-          )}
-        </div>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Chiến dịch chờ duyệt ({queue.length})</h2>
+    <AdminPage title="Kiểm duyệt">
+      <AdminSection id="queue" title="Chiến dịch chờ duyệt" count={queue.length}>
         {queue.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có chiến dịch nào chờ duyệt.</p>
+          <EmptyState title="Không có chiến dịch nào chờ duyệt.">
+            Chiến dịch người tổ chức gửi duyệt sẽ hiện ở đây, gửi sớm nhất ở trên cùng.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {queue.map((campaign) => {
               const own = campaign.organizer_id === session.user.id
               return (
-                <li key={campaign.id} className="space-y-4 card p-6">
-                  <div className="flex flex-wrap items-start justify-between gap-4">
-                    <div className="min-w-0">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <TypeBadge type={campaign.type} />
-                        {campaign.category && (
-                          <span className="text-sm text-gray-600">
-                            {campaign.category.icon} {campaign.category.name}
-                          </span>
-                        )}
-                      </div>
-                      <h3 className="mt-1 text-lg font-semibold">{campaign.title}</h3>
-                      <p className="text-sm text-gray-600">{campaign.summary}</p>
-                    </div>
-                    <Link href={`/campaigns/${campaign.slug}`} className="btn-secondary" target="_blank">
-                      Xem trước
-                    </Link>
-                  </div>
-                  <dl className="grid gap-2 text-sm sm:grid-cols-3">
-                    <div>
-                      <dt className="text-gray-500">Mục tiêu</dt>
-                      <dd>{formatVnd(campaign.goal_amount)}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Thời gian</dt>
-                      <dd>
-                        {campaign.starts_at ? formatDate(campaign.starts_at) : "Khi duyệt"} →{" "}
-                        {formatDate(campaign.ends_at)}
-                      </dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Gửi duyệt</dt>
-                      <dd>{formatDate(campaign.submitted_at)}</dd>
-                    </div>
+                <ItemCard key={campaign.id}>
+                  <CampaignHead
+                    campaign={campaign}
+                    meta={
+                      campaign.category && (
+                        <span className="text-sm text-muted">
+                          {campaign.category.icon} {campaign.category.name}
+                        </span>
+                      )
+                    }
+                  >
+                    <p className="mt-1 text-body">{campaign.summary}</p>
+                  </CampaignHead>
+                  <Facts>
+                    <Fact label="Mục tiêu">
+                      <span className="font-semibold tabular-nums">{formatVnd(campaign.goal_amount)}</span>
+                    </Fact>
+                    <Fact label="Thời gian">
+                      {campaign.starts_at ? formatDate(campaign.starts_at) : "Khi duyệt"} →{" "}
+                      {formatDate(campaign.ends_at)}
+                    </Fact>
+                    <Fact label="Gửi duyệt">{formatDate(campaign.submitted_at)}</Fact>
                     {campaign.organizer && (
-                      <div className="sm:col-span-3">
-                        <dt className="text-gray-500">Người tổ chức</dt>
-                        <dd className="flex flex-wrap items-center gap-2">
+                      <Fact label="Người tổ chức" wide>
+                        <span className="flex flex-wrap items-center gap-2">
                           {campaign.organizer.display_name} (tên pháp lý: {campaign.organizer.legal_name},{" "}
                           {campaign.organizer.kind === "organization" ? "tổ chức" : "cá nhân"})
                           <VerificationBadge status={campaign.organizer.verification_status} />
-                        </dd>
-                      </div>
+                        </span>
+                      </Fact>
                     )}
                     {campaign.type === "give" && (
-                      <div className="sm:col-span-3">
-                        <dt className="text-gray-500">Người thụ hưởng</dt>
-                        <dd>
-                          {campaign.beneficiary_name}
-                          {campaign.beneficiary_relation ? ` (${campaign.beneficiary_relation})` : ""}
-                        </dd>
-                      </div>
+                      <Fact label="Người thụ hưởng" wide>
+                        {campaign.beneficiary_name}
+                        {campaign.beneficiary_relation ? ` (${campaign.beneficiary_relation})` : ""}
+                      </Fact>
                     )}
-                  </dl>
+                  </Facts>
                   {own ? (
-                    <p className="text-sm text-amber-800">
-                      Đây là chiến dịch của bạn; một kiểm duyệt viên khác cần duyệt.
-                    </p>
+                    <Notice tone="warning">Đây là chiến dịch của bạn; một kiểm duyệt viên khác cần duyệt.</Notice>
                   ) : (
-                    <div className="grid gap-4 border-t border-gray-100 pt-4 sm:grid-cols-2">
+                    <ItemActions>
                       <ActionForm
                         action={approveCampaign.bind(null, campaign.id)}
                         confirm="Duyệt chiến dịch này? Nếu đã tới ngày bắt đầu, chiến dịch sẽ công khai ngay."
+                        className="space-y-2"
                       >
+                        <p className="label">Duyệt</p>
+                        <p className="text-sm text-muted">
+                          Nếu đã tới ngày bắt đầu, chiến dịch công khai ngay khi duyệt.
+                        </p>
                         <SubmitButton>Duyệt</SubmitButton>
                       </ActionForm>
                       <ActionForm action={requestChanges.bind(null, campaign.id)} resetOnSuccess className="space-y-2">
@@ -170,30 +130,29 @@ export default async function AdminPage() {
                         />
                         <SubmitButton className="btn-secondary">Gửi yêu cầu</SubmitButton>
                       </ActionForm>
-                    </div>
+                    </ItemActions>
                   )}
-                </li>
+                </ItemCard>
               )
             })}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-2 text-xl font-bold">
-          Chiến dịch đã duyệt chờ tài khoản nhận{waiting ? ` (${waiting.length})` : ""}
-        </h2>
-        <p className="mb-4 text-sm text-gray-600">
-          Chiến dịch (từ thiện hoặc dự án có quà tặng) đã duyệt nhưng tài khoản nhận tiền không còn dùng được, nên hệ
-          thống không tự mở. Chiến dịch tự mở nếu tài khoản dùng được trở lại; nếu không, hãy yêu cầu chỉnh sửa để người
-          tổ chức nhả tài khoản cũ, gắn tài khoản khác rồi gửi duyệt lại.
-        </p>
+      <AdminSection
+        id="waiting"
+        title="Đã duyệt, chờ tài khoản nhận"
+        count={waiting?.length}
+        lead="Chiến dịch (từ thiện hoặc dự án có quà tặng) đã duyệt nhưng tài khoản nhận tiền không còn dùng được, nên hệ thống không tự mở. Chiến dịch tự mở nếu tài khoản dùng được trở lại; nếu không, hãy yêu cầu chỉnh sửa để người tổ chức nhả tài khoản cũ, gắn tài khoản khác rồi gửi duyệt lại."
+      >
         {waiting === null ? (
-          <p className="card p-6 text-gray-600">Chưa tải được danh sách này. Hãy tải lại trang sau.</p>
+          <Notice tone="danger" title="Chưa tải được danh sách này.">
+            Các phần khác của trang vẫn dùng được. Hãy tải lại trang sau.
+          </Notice>
         ) : waiting.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có chiến dịch đã duyệt nào đang chờ tài khoản nhận.</p>
+          <EmptyState title="Không có chiến dịch đã duyệt nào đang chờ tài khoản nhận." />
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {waiting.map((campaign) => {
               const own = campaign.organizer_id === session.user.id
               const now = new Date()
@@ -201,53 +160,34 @@ export default async function AdminPage() {
               const due = !campaign.starts_at || new Date(campaign.starts_at) <= now
               const advice = waitingAdvice(campaign, now)
               return (
-                <li key={campaign.id} className="space-y-4 card p-6">
-                  <div className="flex flex-wrap items-start justify-between gap-4">
-                    <div className="min-w-0">
-                      <TypeBadge type={campaign.type} />
-                      <h3 className="mt-1 text-lg font-semibold">{campaign.title}</h3>
-                      <p className="text-sm text-red-700">{accountProblemLabel(campaign.account_problem)}</p>
-                    </div>
-                    <Link href={`/campaigns/${campaign.slug}`} className="btn-secondary" target="_blank">
-                      Xem trước
-                    </Link>
-                  </div>
-                  <dl className="grid gap-2 text-sm sm:grid-cols-3">
-                    <div>
-                      <dt className="text-gray-500">Ngày bắt đầu</dt>
-                      <dd>
-                        {campaign.starts_at ? formatDate(campaign.starts_at) : "Khi duyệt"}
-                        {ended ? " (đã quá ngày kết thúc)" : due ? " (đã tới, đang chờ mở)" : ""}
-                      </dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Ngày kết thúc</dt>
-                      <dd>{formatDate(campaign.ends_at)}</dd>
-                    </div>
-                    <div>
-                      <dt className="text-gray-500">Duyệt lúc</dt>
-                      <dd>{formatDate(campaign.approved_at)}</dd>
-                    </div>
+                <ItemCard key={campaign.id}>
+                  <CampaignHead campaign={campaign}>
+                    <p className="mt-1 font-medium text-red-700">{accountProblemLabel(campaign.account_problem)}</p>
+                  </CampaignHead>
+                  <Facts>
+                    <Fact label="Ngày bắt đầu">
+                      {campaign.starts_at ? formatDate(campaign.starts_at) : "Khi duyệt"}
+                      {ended ? " (đã quá ngày kết thúc)" : due ? " (đã tới, đang chờ mở)" : ""}
+                    </Fact>
+                    <Fact label="Ngày kết thúc">{formatDate(campaign.ends_at)}</Fact>
+                    <Fact label="Duyệt lúc">{formatDate(campaign.approved_at)}</Fact>
                     {campaign.organizer && (
-                      <div className="sm:col-span-3">
-                        <dt className="text-gray-500">Người tổ chức</dt>
-                        <dd className="flex flex-wrap items-center gap-2">
+                      <Fact label="Người tổ chức" wide>
+                        <span className="flex flex-wrap items-center gap-2">
                           {campaign.organizer.display_name} (tên pháp lý: {campaign.organizer.legal_name})
                           <VerificationBadge status={campaign.organizer.verification_status} />
-                        </dd>
-                      </div>
+                        </span>
+                      </Fact>
                     )}
-                  </dl>
-                  {advice.note && <p className="text-sm text-amber-800">{advice.note}</p>}
+                  </Facts>
+                  {advice.note && <Notice tone="warning">{advice.note}</Notice>}
                   {advice.sendBackReason === null ? null : own ? (
-                    <p className="text-sm text-amber-800">
-                      Đây là chiến dịch của bạn; một kiểm duyệt viên khác cần xử lý.
-                    </p>
+                    <Notice tone="warning">Đây là chiến dịch của bạn; một kiểm duyệt viên khác cần xử lý.</Notice>
                   ) : (
                     <ActionForm
                       action={requestChanges.bind(null, campaign.id)}
                       confirm="Trả chiến dịch đã duyệt về cho người tổ chức chỉnh sửa? Chiến dịch sẽ phải gửi duyệt lại."
-                      className="space-y-2 border-t border-gray-100 pt-4"
+                      className="space-y-2 border-t border-line pt-5"
                     >
                       <input type="hidden" name="from_status" value="approved" />
                       <label htmlFor={`waiting-reason-${campaign.id}`} className="label">
@@ -256,8 +196,8 @@ export default async function AdminPage() {
                       <textarea
                         id={`waiting-reason-${campaign.id}`}
                         name="reason"
-                        className="field"
-                        rows={2}
+                        className="field max-w-2xl"
+                        rows={4}
                         required
                         maxLength={2000}
                         defaultValue={advice.sendBackReason}
@@ -265,28 +205,28 @@ export default async function AdminPage() {
                       <SubmitButton className="btn-secondary">Gửi yêu cầu</SubmitButton>
                     </ActionForm>
                   )}
-                </li>
+                </ItemCard>
               )
             })}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-2 text-xl font-bold">Xác minh người tổ chức ({organizers.length})</h2>
-        <p className="mb-4 text-sm text-gray-600">
-          Xác minh khi đã đối chiếu tên pháp lý với giấy tờ hoặc tài khoản ngân hàng. Nếu người tổ chức đổi tên sau khi
-          trang này tải, thao tác sẽ bị từ chối để bạn xem lại.
-        </p>
+      <AdminSection
+        id="organizers"
+        title="Xác minh người tổ chức"
+        count={organizers.length}
+        lead="Xác minh khi đã đối chiếu tên pháp lý với giấy tờ hoặc tài khoản ngân hàng. Nếu người tổ chức đổi tên sau khi trang này tải, thao tác sẽ bị từ chối để bạn xem lại."
+      >
         {organizers.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có hồ sơ nào chờ xác minh.</p>
+          <EmptyState title="Không có hồ sơ nào chờ xác minh." />
         ) : (
-          <ul className="divide-y divide-gray-200 rounded-lg border border-gray-200">
+          <ul className="divide-y divide-line card">
             {organizers.map((organizer) => (
-              <li key={organizer.user_id} className="flex flex-wrap items-center gap-4 p-4">
-                <div className="min-w-0 flex-1 text-sm">
-                  <p className="font-semibold">{organizer.display_name}</p>
-                  <p className="text-gray-600">
+              <li key={organizer.user_id} className="flex flex-wrap items-center gap-4 p-4 sm:p-5">
+                <div className="min-w-0 flex-1 basis-60 text-sm">
+                  <p className="text-base font-semibold text-ink">{organizer.display_name}</p>
+                  <p className="text-body">
                     Tên pháp lý: {organizer.legal_name} · {organizer.kind === "organization" ? "Tổ chức" : "Cá nhân"}
                     {organizer.phone ? ` · ${organizer.phone}` : ""}
                   </p>
@@ -313,7 +253,34 @@ export default async function AdminPage() {
             ))}
           </ul>
         )}
-      </section>
+      </AdminSection>
+    </AdminPage>
+  )
+}
+
+/** A campaign's type, title and a line under it, with a preview link on the right. */
+function CampaignHead({
+  campaign,
+  meta,
+  children,
+}: {
+  campaign: { type: CampaignType; title: string; slug: string }
+  meta?: ReactNode
+  children?: ReactNode
+}) {
+  return (
+    <div className="flex flex-wrap items-start justify-between gap-4">
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <TypeBadge type={campaign.type} />
+          {meta}
+        </div>
+        <h3 className="mt-2 text-lg font-semibold">{campaign.title}</h3>
+        {children}
+      </div>
+      <ButtonLink href={`/campaigns/${campaign.slug}`} variant="secondary" target="_blank">
+        Xem trước<span className="sr-only"> (mở thẻ mới)</span>
+      </ButtonLink>
     </div>
   )
 }
diff --git a/apps/web/src/app/admin/payment-requests/page.tsx b/apps/web/src/app/admin/payment-requests/page.tsx
index 6c82006e..9e0c2c76 100644
--- a/apps/web/src/app/admin/payment-requests/page.tsx
+++ b/apps/web/src/app/admin/payment-requests/page.tsx
@@ -1,8 +1,12 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { Badge } from "@/components/ui/Badge"
+import { ButtonLink } from "@/components/ui/Button"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Field } from "@/components/ui/Field"
+import { Notice } from "@/components/ui/Notice"
 import { requireSession } from "@/lib/auth/session"
 import { isStaff } from "@/lib/campaigns"
 import { formatDate, formatDateTime, formatVnd } from "@/lib/format"
@@ -14,6 +18,7 @@ import {
 } from "@/lib/payment-requests"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, Fact, Facts, ItemActions, ItemCard, ItemList } from "../_components/ui"
 import { setPaymentRequestsStopped } from "./actions"
 
 export const metadata: Metadata = { title: "Yêu cầu thanh toán", robots: { index: false } }
@@ -32,13 +37,10 @@ export default async function AdminPaymentRequestsPage() {
   const campaigns = await listSucceededBackCampaigns(db)
 
   return (
-    <div className="mx-auto max-w-5xl space-y-8 px-4 py-10">
-      <div>
-        <Link href="/admin" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Kiểm duyệt
-        </Link>
-        <h1 className="mt-2 text-3xl font-bold">Yêu cầu thanh toán của dự án ủng hộ</h1>
-        <p className="mt-2 text-sm text-gray-600">
+    <AdminPage
+      title="Yêu cầu thanh toán của dự án ủng hộ"
+      intro={
+        <p>
           Dự án ủng hộ đạt mục tiêu thì người ủng hộ được yêu cầu chuyển tiền thẳng vào tài khoản của người tạo dự án.
           Khi nghi gian lận, hãy tạm dừng yêu cầu thanh toán: Give ngừng nhắc thanh toán, ẩn thông tin chuyển khoản, báo
           cho người ủng hộ đang chờ thanh toán và người tạo dự án, và trang dự án hiện ghi chú công khai. Lý do nội bộ
@@ -46,90 +48,96 @@ export default async function AdminPaymentRequestsPage() {
           ngày nhắc của các cam kết đang chờ được lùi thêm đúng thời gian đã tạm dừng. Tiền vẫn chuyển tới được ghi nhận
           như thường. Đổi ghi chú của một lần tạm dừng chỉ đổi trang dự án; thông báo đã gửi giữ ghi chú cũ.
         </p>
-      </div>
-
-      {campaigns.length === 0 ? (
-        <p className="card p-6 text-gray-600">Chưa có dự án ủng hộ nào đạt mục tiêu.</p>
-      ) : (
-        <ul className="space-y-4">
-          {campaigns.map((campaign) => (
-            <CampaignCard key={campaign.id} campaign={campaign} />
-          ))}
-        </ul>
-      )}
-    </div>
+      }
+    >
+      <AdminSection id="campaigns" title="Dự án đã đạt mục tiêu" count={campaigns.length}>
+        {campaigns.length === 0 ? (
+          <EmptyState title="Chưa có dự án ủng hộ nào đạt mục tiêu.">
+            Dự án đạt mục tiêu sẽ hiện ở đây để tạm dừng yêu cầu thanh toán khi cần.
+          </EmptyState>
+        ) : (
+          <ItemList>
+            {campaigns.map((campaign) => (
+              <CampaignCard key={campaign.id} campaign={campaign} />
+            ))}
+          </ItemList>
+        )}
+      </AdminSection>
+    </AdminPage>
   )
 }
 
 function CampaignCard({ campaign }: { campaign: SucceededBackCampaign }) {
   const stopped = !!campaign.payments_stopped_at
   return (
-    <li className="space-y-4 card p-6">
+    <ItemCard>
       <div className="flex flex-wrap items-start justify-between gap-4">
-        <div className="min-w-0">
-          <h2 className="text-lg font-semibold">{campaign.title}</h2>
-          <p className="text-sm text-gray-600">Đạt mục tiêu {formatDate(campaign.outcome_at)}</p>
+        <div className="min-w-0 flex-1">
+          <h3 className="flex flex-wrap items-center gap-2 text-lg font-semibold">
+            {campaign.title}
+            {stopped && <Badge tone="danger">Đã tạm dừng</Badge>}
+          </h3>
+          <p className="text-sm text-muted">Đạt mục tiêu {formatDate(campaign.outcome_at)}</p>
         </div>
-        <Link href={`/campaigns/${campaign.slug}`} className="btn-secondary" target="_blank">
-          Xem dự án
-        </Link>
+        <ButtonLink href={`/campaigns/${campaign.slug}`} variant="secondary" target="_blank">
+          Xem dự án<span className="sr-only"> (mở thẻ mới)</span>
+        </ButtonLink>
       </div>
-      <dl className="grid gap-2 text-sm sm:grid-cols-4">
-        <div>
-          <dt className="text-gray-500">Cam kết</dt>
-          <dd>{formatVnd(campaign.pledged_amount)}</dd>
-        </div>
-        <div>
-          <dt className="text-gray-500">Đã thanh toán</dt>
-          <dd>{formatVnd(campaign.paid_amount)}</dd>
-        </div>
-        <div>
-          <dt className="text-gray-500">Hoàn tiền còn nợ</dt>
-          <dd>{formatVnd(campaign.refund_owed_amount)}</dd>
-        </div>
-        <div>
-          <dt className="text-gray-500">Người đồng hành</dt>
-          <dd>{campaign.backers_count}</dd>
-        </div>
-      </dl>
+      <Facts columns={4}>
+        <Fact label="Cam kết">
+          <span className="figure">{formatVnd(campaign.pledged_amount)}</span>
+        </Fact>
+        <Fact label="Đã thanh toán">
+          <span className="figure">{formatVnd(campaign.paid_amount)}</span>
+        </Fact>
+        <Fact label="Hoàn tiền còn nợ">
+          <span className="figure">{formatVnd(campaign.refund_owed_amount)}</span>
+        </Fact>
+        <Fact label="Người đồng hành">
+          <span className="figure">{campaign.backers_count}</span>
+        </Fact>
+      </Facts>
 
       {stopped ? (
         <>
-          <div className="space-y-1 rounded-md bg-red-50 px-3 py-2 text-sm text-red-900">
-            <p className="font-semibold">
-              Đã tạm dừng yêu cầu thanh toán từ {formatDateTime(campaign.payments_stopped_at)}.
-            </p>
+          <Notice
+            tone="danger"
+            title={`Đã tạm dừng yêu cầu thanh toán từ ${formatDateTime(campaign.payments_stopped_at)}.`}
+          >
             {campaign.payments_stopped_note && (
               <p className="whitespace-pre-line">Ghi chú công khai: {campaign.payments_stopped_note}</p>
             )}
-          </div>
-          <div className="grid gap-4 sm:grid-cols-2">
+          </Notice>
+          <ItemActions>
             <ActionForm
               action={setPaymentRequestsStopped.bind(null, campaign.id)}
               confirm="Mở lại yêu cầu thanh toán? Trang thanh toán hiện lại và người ủng hộ đang chờ thanh toán được báo."
-              className="space-y-2"
+              className="space-y-3"
             >
               <input type="hidden" name="action" value="resume" />
-              <label htmlFor={`resume-reason-${campaign.id}`} className="label">
-                Lý do mở lại (nội bộ)
-              </label>
-              <textarea
-                id={`resume-reason-${campaign.id}`}
-                name="reason"
-                className="field"
-                rows={2}
-                required
-                maxLength={STOP_REASON_MAX}
-              />
+              <Field htmlFor={`resume-reason-${campaign.id}`} label="Lý do mở lại (nội bộ)">
+                <textarea
+                  id={`resume-reason-${campaign.id}`}
+                  name="reason"
+                  className="field"
+                  rows={2}
+                  required
+                  maxLength={STOP_REASON_MAX}
+                />
+              </Field>
               <SubmitButton>Mở lại yêu cầu thanh toán</SubmitButton>
             </ActionForm>
             <StopForm campaign={campaign} />
-          </div>
+          </ItemActions>
         </>
       ) : (
-        <StopForm campaign={campaign} />
+        <div className="border-t border-line pt-5">
+          <div className="max-w-2xl">
+            <StopForm campaign={campaign} />
+          </div>
+        </div>
       )}
-    </li>
+    </ItemCard>
   )
 }
 
@@ -144,35 +152,36 @@ function StopForm({ campaign }: { campaign: SucceededBackCampaign }) {
           ? "Đổi ghi chú công khai của lần tạm dừng này?"
           : "Tạm dừng yêu cầu thanh toán của dự án này? Người ủng hộ đang chờ thanh toán và người tạo dự án sẽ được báo, trang dự án hiện ghi chú công khai."
       }
-      className="space-y-2"
+      className="space-y-3"
     >
       <input type="hidden" name="action" value="stop" />
-      <label htmlFor={`stop-reason-${campaign.id}`} className="label">
-        {stopped ? "Lý do đổi ghi chú (nội bộ)" : "Lý do tạm dừng (nội bộ, ghi vào nhật ký kiểm toán)"}
-      </label>
-      <textarea
-        id={`stop-reason-${campaign.id}`}
-        name="reason"
-        className="field"
-        rows={2}
-        required
-        maxLength={STOP_REASON_MAX}
-        placeholder={stopped ? undefined : "Ví dụ: báo cáo gian lận, đã đối chiếu bằng chứng."}
-      />
-      <label htmlFor={`stop-note-${campaign.id}`} className="label">
-        Ghi chú công khai (người ủng hộ và trang dự án thấy)
-      </label>
-      <textarea
-        id={`stop-note-${campaign.id}`}
-        name="public_note"
-        className="field"
-        rows={2}
-        required
-        maxLength={STOP_PUBLIC_NOTE_MAX}
-        defaultValue={campaign.payments_stopped_note ?? ""}
-        placeholder="Ví dụ: Give đang xác minh dự án này. Đừng chuyển tiền cho tới khi có thông báo mới."
-      />
-      <SubmitButton className={stopped ? "btn-secondary" : "btn-secondary text-red-700"}>
+      <Field
+        htmlFor={`stop-reason-${campaign.id}`}
+        label={stopped ? "Lý do đổi ghi chú (nội bộ)" : "Lý do tạm dừng (nội bộ, ghi vào nhật ký kiểm toán)"}
+      >
+        <textarea
+          id={`stop-reason-${campaign.id}`}
+          name="reason"
+          className="field"
+          rows={2}
+          required
+          maxLength={STOP_REASON_MAX}
+          placeholder={stopped ? undefined : "Ví dụ: báo cáo gian lận, đã đối chiếu bằng chứng."}
+        />
+      </Field>
+      <Field htmlFor={`stop-note-${campaign.id}`} label="Ghi chú công khai (người ủng hộ và trang dự án thấy)">
+        <textarea
+          id={`stop-note-${campaign.id}`}
+          name="public_note"
+          className="field"
+          rows={2}
+          required
+          maxLength={STOP_PUBLIC_NOTE_MAX}
+          defaultValue={campaign.payments_stopped_note ?? ""}
+          placeholder="Ví dụ: Give đang xác minh dự án này. Đừng chuyển tiền cho tới khi có thông báo mới."
+        />
+      </Field>
+      <SubmitButton className={stopped ? "btn-secondary" : "btn-danger"}>
         {stopped ? "Đổi ghi chú công khai" : "Tạm dừng yêu cầu thanh toán"}
       </SubmitButton>
     </ActionForm>
diff --git a/apps/web/src/app/admin/roles/page.tsx b/apps/web/src/app/admin/roles/page.tsx
index dd751ebe..f6ca18a2 100644
--- a/apps/web/src/app/admin/roles/page.tsx
+++ b/apps/web/src/app/admin/roles/page.tsx
@@ -1,14 +1,17 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { Card } from "@/components/ui/Card"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Field } from "@/components/ui/Field"
 import { requireSession } from "@/lib/auth/session"
 import { isStaff } from "@/lib/campaigns"
 import { formatDate } from "@/lib/format"
 import { describeChange, listRoleChanges, listStaff, ROLE_DESCRIPTIONS, ROLE_LABELS, STAFF_ROLES } from "@/lib/staff"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, DataTable } from "../_components/ui"
 import { grantRole, revokeRole } from "./actions"
 
 export const metadata: Metadata = { title: "Phân quyền nhân sự", robots: { index: false } }
@@ -22,145 +25,131 @@ export default async function StaffRolesPage() {
   const [staff, changes] = await Promise.all([listStaff(db), listRoleChanges(db)])
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin" className="text-sm text-gray-600 hover:underline">
-          ← Kiểm duyệt
-        </Link>
-        <h1 className="mt-2 text-3xl font-bold">Phân quyền nhân sự</h1>
-        <p className="mt-2 text-sm text-gray-600">
-          Mỗi lần cấp, đổi hoặc thu quyền đều được ghi vào nhật ký. Luôn phải còn ít nhất một quản trị viên.
-        </p>
-      </div>
-
-      <section className="space-y-4 card p-6">
-        <h2 className="text-xl font-bold">Cấp quyền</h2>
-        <ActionForm action={grantRole} resetOnSuccess className="space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2">
-            <div>
-              <label htmlFor="grant-user" className="label">
-                Email hoặc mã người dùng DOS.Me
-              </label>
-              <input
-                id="grant-user"
-                name="user"
-                className="field"
-                required
-                maxLength={320}
-                autoComplete="off"
-                placeholder="ten@vidu.com"
-              />
-            </div>
-            <div>
-              <label htmlFor="grant-role" className="label">
-                Quyền
-              </label>
-              <select id="grant-role" name="role" className="field" defaultValue="moderator">
-                {STAFF_ROLES.map((role) => (
-                  <option key={role} value={role}>
-                    {ROLE_LABELS[role]}: {ROLE_DESCRIPTIONS[role]}
-                  </option>
-                ))}
-              </select>
+    <AdminPage
+      title="Phân quyền nhân sự"
+      intro={<p>Mỗi lần cấp, đổi hoặc thu quyền đều được ghi vào nhật ký. Luôn phải còn ít nhất một quản trị viên.</p>}
+    >
+      <AdminSection id="grant" title="Cấp quyền">
+        <Card className="max-w-3xl">
+          <ActionForm action={grantRole} resetOnSuccess className="space-y-4">
+            <div className="grid gap-4 sm:grid-cols-2">
+              <Field htmlFor="grant-user" label="Email hoặc mã người dùng DOS.Me">
+                <input
+                  id="grant-user"
+                  name="user"
+                  className="field"
+                  required
+                  maxLength={320}
+                  autoComplete="off"
+                  placeholder="ten@vidu.com"
+                />
+              </Field>
+              <Field
+                htmlFor="grant-role"
+                label="Quyền"
+                hint="Nếu người này đã có quyền khác, quyền cũ sẽ được thay bằng quyền mới."
+              >
+                <select id="grant-role" name="role" className="field" defaultValue="moderator">
+                  {STAFF_ROLES.map((role) => (
+                    <option key={role} value={role}>
+                      {ROLE_LABELS[role]}: {ROLE_DESCRIPTIONS[role]}
+                    </option>
+                  ))}
+                </select>
+              </Field>
             </div>
-          </div>
-          <div>
-            <label htmlFor="grant-reason" className="label">
-              Lý do (không bắt buộc)
-            </label>
-            <input id="grant-reason" name="reason" className="field" maxLength={500} />
-          </div>
-          <p className="text-sm text-gray-600">Nếu người này đã có quyền khác, quyền cũ sẽ được thay bằng quyền mới.</p>
-          <SubmitButton>Cấp quyền</SubmitButton>
-        </ActionForm>
-      </section>
+            <Field htmlFor="grant-reason" label="Lý do (không bắt buộc)">
+              <input id="grant-reason" name="reason" className="field" maxLength={500} />
+            </Field>
+            <SubmitButton>Cấp quyền</SubmitButton>
+          </ActionForm>
+        </Card>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Nhân sự hiện tại ({staff.length})</h2>
-        <ul className="divide-y divide-gray-200 rounded-lg border border-gray-200">
-          {staff.map((member) => {
-            const self = member.user_id === session.user.id
-            const name = member.display_name || member.email || member.user_id
-            return (
-              <li key={member.user_id} className="flex flex-wrap items-start gap-4 p-4">
-                <div className="min-w-0 flex-1 text-sm">
-                  <p className="font-semibold">
-                    {name}
-                    {self && <span className="ml-2 font-normal text-gray-500">(bạn)</span>}
-                  </p>
-                  {member.email && member.email !== name && <p className="text-gray-600">{member.email}</p>}
-                  <p className="text-gray-600">
-                    {ROLE_LABELS[member.role] ?? member.role} · từ {formatDate(member.created_at)}
-                  </p>
-                  <p className="mt-1 font-mono text-xs break-all text-gray-400">{member.user_id}</p>
-                </div>
-                <div className="flex flex-wrap items-start gap-2">
-                  <ActionForm
-                    action={grantRole}
-                    className="flex items-start gap-2"
-                    confirm={
-                      self
-                        ? "Đổi quyền của chính bạn? Nếu hạ quyền, bạn sẽ mất quyền truy cập trang này ngay."
-                        : undefined
-                    }
-                  >
-                    <input type="hidden" name="user" value={member.user_id} />
-                    {self && <input type="hidden" name="confirm_self" value="yes" />}
-                    <label htmlFor={`role-${member.user_id}`} className="sr-only">
-                      Đổi quyền của {name}
-                    </label>
-                    <select
-                      id={`role-${member.user_id}`}
-                      name="role"
-                      className="field w-auto"
-                      defaultValue={member.role}
+      <AdminSection id="staff" title="Nhân sự hiện tại" count={staff.length}>
+        {staff.length === 0 ? (
+          <EmptyState title="Chưa có nhân sự nào." />
+        ) : (
+          <ul className="divide-y divide-line card">
+            {staff.map((member) => {
+              const self = member.user_id === session.user.id
+              const name = member.display_name || member.email || member.user_id
+              return (
+                <li key={member.user_id} className="flex flex-wrap items-start gap-4 p-4 sm:p-5">
+                  <div className="min-w-0 flex-1 basis-60 text-sm">
+                    <p className="text-base font-semibold text-ink">
+                      {name}
+                      {self && <span className="ml-2 font-normal text-muted">(bạn)</span>}
+                    </p>
+                    {member.email && member.email !== name && <p className="text-muted">{member.email}</p>}
+                    <p className="text-muted">
+                      {ROLE_LABELS[member.role] ?? member.role} · từ {formatDate(member.created_at)}
+                    </p>
+                    <p className="mt-1 font-mono text-xs break-all text-muted">{member.user_id}</p>
+                  </div>
+                  <div className="flex flex-wrap items-start gap-2">
+                    <ActionForm
+                      action={grantRole}
+                      className="flex flex-wrap items-start gap-2"
+                      confirm={
+                        self
+                          ? "Đổi quyền của chính bạn? Nếu hạ quyền, bạn sẽ mất quyền truy cập trang này ngay."
+                          : undefined
+                      }
+                    >
+                      <input type="hidden" name="user" value={member.user_id} />
+                      {self && <input type="hidden" name="confirm_self" value="yes" />}
+                      <label htmlFor={`role-${member.user_id}`} className="sr-only">
+                        Đổi quyền của {name}
+                      </label>
+                      <div className="w-44">
+                        <select id={`role-${member.user_id}`} name="role" className="field" defaultValue={member.role}>
+                          {STAFF_ROLES.map((role) => (
+                            <option key={role} value={role}>
+                              {ROLE_LABELS[role]}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <SubmitButton className="btn-secondary">Đổi quyền</SubmitButton>
+                    </ActionForm>
+                    <ActionForm
+                      action={revokeRole.bind(null, member.user_id)}
+                      confirm={
+                        self
+                          ? "Thu quyền của chính bạn? Bạn sẽ mất quyền truy cập trang này ngay."
+                          : `Thu quyền ${ROLE_LABELS[member.role] ?? member.role} của ${name}?`
+                      }
                     >
-                      {STAFF_ROLES.map((role) => (
-                        <option key={role} value={role}>
-                          {ROLE_LABELS[role]}
-                        </option>
-                      ))}
-                    </select>
-                    <SubmitButton className="btn-secondary">Đổi quyền</SubmitButton>
-                  </ActionForm>
-                  <ActionForm
-                    action={revokeRole.bind(null, member.user_id)}
-                    confirm={
-                      self
-                        ? "Thu quyền của chính bạn? Bạn sẽ mất quyền truy cập trang này ngay."
-                        : `Thu quyền ${ROLE_LABELS[member.role] ?? member.role} của ${name}?`
-                    }
-                  >
-                    <SubmitButton className="btn-danger">Thu quyền</SubmitButton>
-                  </ActionForm>
-                </div>
-              </li>
-            )
-          })}
-        </ul>
-      </section>
+                      <SubmitButton className="btn-danger">Thu quyền</SubmitButton>
+                    </ActionForm>
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+        )}
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Nhật ký phân quyền</h2>
+      <AdminSection id="changes" title="Nhật ký phân quyền">
         {changes.length === 0 ? (
-          <p className="card p-6 text-gray-600">Chưa có thay đổi nào qua trang này.</p>
+          <EmptyState title="Chưa có thay đổi nào qua trang này." />
         ) : (
-          <ul className="divide-y divide-gray-200 rounded-lg border border-gray-200 text-sm">
+          <DataTable label="Nhật ký phân quyền" head={["Thay đổi", "Bởi", "Lý do", "Ngày"]}>
             {changes.map((change) => (
-              <li key={change.id} className="p-4">
-                <p>
-                  <span className="font-semibold">{describeChange(change)}</span>{" "}
+              <tr key={change.id}>
+                <td className="px-4 py-3">
+                  <span className="font-semibold text-ink">{describeChange(change)}</span>{" "}
                   {change.action === "admin.revoke" ? "của" : "cho"} {change.user_email ?? change.user_id}
-                </p>
-                <p className="text-gray-600">
-                  {formatDate(change.created_at)} · bởi {change.actor_email ?? change.actor_id ?? "hệ thống"}
-                  {change.reason ? ` · Lý do: ${change.reason}` : ""}
-                </p>
-              </li>
+                </td>
+                <td className="px-4 py-3 break-all">{change.actor_email ?? change.actor_id ?? "hệ thống"}</td>
+                <td className="max-w-xs px-4 py-3 break-words">{change.reason || "—"}</td>
+                <td className="px-4 py-3 whitespace-nowrap text-muted">{formatDate(change.created_at)}</td>
+              </tr>
             ))}
-          </ul>
+          </DataTable>
         )}
-      </section>
-    </div>
+      </AdminSection>
+    </AdminPage>
   )
 }
diff --git a/apps/web/src/app/admin/statements/page.tsx b/apps/web/src/app/admin/statements/page.tsx
index 9cc1a40a..8dd2e4e8 100644
--- a/apps/web/src/app/admin/statements/page.tsx
+++ b/apps/web/src/app/admin/statements/page.tsx
@@ -3,6 +3,9 @@ import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { ActionForm, SubmitButton } from "@/components/forms"
+import { ButtonLink } from "@/components/ui/Button"
+import { EmptyState } from "@/components/ui/EmptyState"
+import { Notice } from "@/components/ui/Notice"
 import { requireSession } from "@/lib/auth/session"
 import { isStaff } from "@/lib/campaigns"
 import { formatDate, formatDateTime, formatVnd } from "@/lib/format"
@@ -29,6 +32,7 @@ import {
 import { inboundExplanationLabel } from "@/lib/statement"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, DataTable, ItemActions, ItemCard, ItemList } from "../_components/ui"
 import { resolveStatementRow } from "./actions"
 
 export const metadata: Metadata = { title: "Đối soát sao kê", robots: { index: false } }
@@ -74,40 +78,32 @@ export default async function AdminStatementsPage() {
   const staffEmails = new Map(staff.map((s) => [s.user_id, s.email ?? s.display_name ?? s.user_id]))
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin/accounts" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Xác minh tài khoản nhận
-        </Link>
-        <div className="mt-2 flex flex-wrap items-center justify-between gap-4">
-          <h1 className="text-3xl font-bold">Đối soát sao kê</h1>
-          <div className="flex flex-wrap gap-2">
-            <Link href="/admin/unmatched" className="btn-secondary">
-              Giao dịch chưa khớp
-            </Link>
-            <Link href="/admin/inbound" className="btn-secondary">
-              Sự kiện bị dừng
-            </Link>
-            <Link href="/me/statements" className="btn-secondary">
-              Tải sao kê
-            </Link>
-          </div>
-        </div>
-        <p className="mt-2 text-sm text-gray-600">
+    <AdminPage
+      title="Đối soát sao kê"
+      action={
+        <ButtonLink href="/me/statements" variant="secondary">
+          Tải sao kê
+        </ButtonLink>
+      }
+      intro={
+        <p>
           Các dòng sao kê dưới đây chưa được ghi thành giao dịch vì Give không chắc chúng là giao dịch mới hay lặp lại
           một giao dịch đã ghi. Đối chiếu với sao kê trên trang của chính ngân hàng rồi chọn một cách xử lý. Ghi chú là
           bắt buộc; mỗi lần xử lý được ghi vào nhật ký kiểm toán và không đổi được.
         </p>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">
-          Chờ xử lý ({total > queue.length ? `${queue.length} đầu tiên / ${total}` : total})
-        </h2>
+      }
+    >
+      <AdminSection
+        id="queue"
+        title="Chờ xử lý"
+        count={total > queue.length ? `${queue.length} đầu tiên / ${total}` : total}
+      >
         {queue.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có dòng sao kê nào chờ xử lý.</p>
+          <EmptyState title="Không có dòng sao kê nào chờ xử lý.">
+            Dòng sao kê Give không chắc là mới hay lặp lại sẽ hiện ở đây.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {queue.map((row, i) => (
               <QueueCard
                 key={row.id}
@@ -117,52 +113,53 @@ export default async function AdminStatementsPage() {
                 targets={targets[i]}
               />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
-      <section>
-        <h2 className="mb-4 text-xl font-bold">Đã xử lý gần đây ({resolved.length})</h2>
+      <AdminSection id="resolved" title="Đã xử lý gần đây" count={resolved.length}>
         {resolved.length === 0 ? (
-          <p className="card p-6 text-gray-600">Chưa có dòng nào được xử lý.</p>
+          <EmptyState title="Chưa có dòng nào được xử lý." />
         ) : (
-          <ul className="divide-y divide-gray-100 card text-sm">
+          <DataTable label="Dòng sao kê đã xử lý gần đây" head={["Dòng sao kê", "Cách xử lý", "Ghi chú", "Xử lý lúc"]}>
             {resolved.map((row) => (
-              <li key={row.id} className="space-y-1 p-4">
-                <div className="flex flex-wrap justify-between gap-2">
-                  <span>
-                    <span className="font-medium">{signedAmount(row.direction, row.amount)}</span> · {bookedLabel(row)}{" "}
-                    · {labels.get(row.batch.receiving_account_id) ?? "—"} · lần #{row.batch.batch_no} dòng {row.row_no}
-                  </span>
-                  <span className="text-gray-500">{formatDateTime(row.resolved_at)}</span>
-                </div>
-                <div>
-                  <span className="font-semibold">{row.resolution ? RESOLUTION_LABELS[row.resolution] : "—"}</span> (
-                  {rowStatusLabel(row.status).toLowerCase()}). Lý do vào hàng chờ:{" "}
-                  {ambiguousReasonLabel(row.ambiguous_reason)}
-                </div>
-                <div className="text-gray-700">Ghi chú: {row.resolution_note}</div>
-              </li>
+              <tr key={row.id}>
+                <td className="px-4 py-3">
+                  <p className="font-semibold text-ink tabular-nums">{signedAmount(row.direction, row.amount)}</p>
+                  <p className="text-muted">
+                    {bookedLabel(row)} · {labels.get(row.batch.receiving_account_id) ?? "—"} · lần #{row.batch.batch_no}{" "}
+                    dòng {row.row_no}
+                  </p>
+                </td>
+                <td className="px-4 py-3">
+                  <p className="font-semibold text-ink">{row.resolution ? RESOLUTION_LABELS[row.resolution] : "—"}</p>
+                  <p className="text-muted">
+                    {rowStatusLabel(row.status)}. Lý do vào hàng chờ: {ambiguousReasonLabel(row.ambiguous_reason)}
+                  </p>
+                </td>
+                <td className="max-w-xs px-4 py-3 break-words">{row.resolution_note}</td>
+                <td className="px-4 py-3 whitespace-nowrap text-muted">{formatDateTime(row.resolved_at)}</td>
+              </tr>
             ))}
-          </ul>
+          </DataTable>
         )}
-      </section>
+      </AdminSection>
 
       {isAdmin && <AuditTrail entries={audit} names={staffEmails} />}
-    </div>
+    </AdminPage>
   )
 }
 
 function RowFacts({ row }: { row: StatementRowView }) {
   return (
     <>
-      <span className={`font-semibold ${row.direction === "in" ? "text-green-700" : "text-red-700"}`}>
+      <span className={`font-semibold tabular-nums ${row.direction === "in" ? "text-brand-700" : "text-red-700"}`}>
         {signedAmount(row.direction, row.amount)}
       </span>{" "}
       · {bookedLabel(row)} · {row.description ?? "không có nội dung"}
       {row.counterparty_name ? ` · ${row.counterparty_name}` : ""}
       {row.balance_after !== null ? ` · số dư sau ${formatVnd(row.balance_after)}` : ""}
-      {row.provider_tx_id ? <span className="font-mono text-gray-500"> · {row.provider_tx_id}</span> : null}
+      {row.provider_tx_id ? <span className="font-mono text-muted"> · {row.provider_tx_id}</span> : null}
     </>
   )
 }
@@ -180,69 +177,71 @@ function QueueCard({
 }) {
   const candidateTx = candidate?.bank_transaction_id ?? null
   return (
-    <li className="space-y-4 card p-6">
-      <div className="space-y-2 text-sm">
-        <p className="text-gray-500">
+    <ItemCard>
+      <div className="space-y-3">
+        <p className="text-sm text-muted">
           {account ?? "Tài khoản"} ·{" "}
-          <Link href={`/me/statements/${row.batch.id}`} className="text-brand-700">
+          <Link href={`/me/statements/${row.batch.id}`} className="link">
             lần tải #{row.batch.batch_no}
           </Link>{" "}
           ({row.batch.parser}) · dòng {row.row_no}
         </p>
-        <p className="text-base">
+        <p className="text-ink">
           <RowFacts row={row} />
         </p>
-        <p className="text-amber-800">{ambiguousReasonLabel(row.ambiguous_reason)}</p>
+        <Notice tone="warning">{ambiguousReasonLabel(row.ambiguous_reason)}</Notice>
         {candidate && (
-          <p className="rounded-md bg-gray-50 p-3">
+          <p className="rounded-md bg-surface p-3 text-sm">
             Khớp với dòng {candidate.row_no} của một lần tải trước ({rowStatusLabel(candidate.status).toLowerCase()}):{" "}
             <RowFacts row={candidate} />
           </p>
         )}
       </div>
 
-      <div className="grid gap-4 border-t border-gray-100 pt-4 sm:grid-cols-2">
+      <ItemActions>
         <ActionForm
           action={resolveStatementRow.bind(null, row.id)}
           confirm="Đánh dấu dòng này là giao dịch đã ghi? Dòng sẽ không được ghi thêm lần nữa."
-          className="space-y-2"
+          className="space-y-3"
         >
           <input type="hidden" name="resolution" value="duplicate" />
           <p className="label">{RESOLUTION_LABELS.duplicate}</p>
           {targets.shown.length === 0 ? (
-            <p className="text-sm text-gray-600">
+            <p className="text-sm text-muted">
               Không có giao dịch đã ghi nào cùng chiều, cùng số tiền trong vòng {DUPLICATE_WINDOW_DAYS} ngày.
             </p>
           ) : (
             <>
-              <fieldset className="space-y-1 text-sm">
+              <fieldset className="space-y-2 text-sm">
                 <legend className="sr-only">Giao dịch mà dòng này lặp lại</legend>
                 {targets.shown.map((tx) => (
-                  <label key={tx.id} className="flex items-start gap-2">
+                  <label
+                    key={tx.id}
+                    className="flex cursor-pointer items-start gap-3 rounded-md border border-line p-3 hover:border-gray-400 has-[:checked]:border-brand-600 has-[:checked]:bg-brand-50"
+                  >
                     <input
                       type="radio"
                       name="bank_transaction_id"
                       value={tx.id}
                       required
                       defaultChecked={tx.id === candidateTx}
-                      className="mt-1"
+                      className="mt-1 size-4 accent-brand-700"
                     />
                     <span>
-                      {bookedLabel(tx)} · {formatVnd(tx.amount)} · {tx.description ?? "—"}
+                      {bookedLabel(tx)} · <span className="tabular-nums">{formatVnd(tx.amount)}</span> ·{" "}
+                      {tx.description ?? "—"}
                       {tx.counterparty_name ? ` · ${tx.counterparty_name}` : ""}{" "}
-                      <span className="font-mono text-gray-500">{tx.provider_tx_id}</span>
-                      {tx.id === candidateTx && (
-                        <span className="text-gray-600"> (dòng trước ứng với giao dịch này)</span>
-                      )}
+                      <span className="font-mono text-muted">{tx.provider_tx_id}</span>
+                      {tx.id === candidateTx && <span className="text-muted"> (dòng trước ứng với giao dịch này)</span>}
                     </span>
                   </label>
                 ))}
               </fieldset>
               {targets.total > targets.shown.length && (
-                <p className="text-sm text-amber-800">
+                <Notice tone="warning">
                   Còn {targets.total - targets.shown.length} giao dịch khác cùng số tiền xa ngày hơn không hiện ở đây.
                   Nếu không thấy đúng giao dịch, đừng chọn đại một giao dịch.
-                </p>
+                </Notice>
               )}
               <NoteField id={`dup-note-${row.id}`} />
               <SubmitButton className="btn-secondary">Là giao dịch đã ghi</SubmitButton>
@@ -253,16 +252,16 @@ function QueueCard({
         <ActionForm
           action={resolveStatementRow.bind(null, row.id)}
           confirm="Nhập dòng này thành một giao dịch mới? Số tiền sẽ được tính vào sao kê của chiến dịch và không xóa được."
-          className="space-y-2"
+          className="space-y-3"
         >
           <input type="hidden" name="resolution" value="import" />
           <p className="label">{RESOLUTION_LABELS.import}</p>
-          <p className="text-sm text-gray-600">
+          <p className="text-sm text-muted">
             Chỉ chọn khi bạn đã thấy giao dịch này trên sao kê của ngân hàng và nó chưa được ghi.
           </p>
           {row.candidate_row_id && (
-            <label className="flex items-start gap-2 text-sm">
-              <input type="checkbox" name="override_candidate" required className="mt-1" />
+            <label className="flex cursor-pointer items-start gap-3 text-sm">
+              <input type="checkbox" name="override_candidate" required className="mt-1 size-4 accent-brand-700" />
               <span>
                 Tôi đã đối chiếu: đây là giao dịch khác với dòng {candidate ? `${candidate.row_no} ` : ""}của lần tải
                 trước.
@@ -272,8 +271,8 @@ function QueueCard({
           <NoteField id={`import-note-${row.id}`} />
           <SubmitButton>Nhập thành giao dịch mới</SubmitButton>
         </ActionForm>
-      </div>
-    </li>
+      </ItemActions>
+    </ItemCard>
   )
 }
 
@@ -317,29 +316,28 @@ function auditSummary(entry: AuditEntry): string {
 
 function AuditTrail({ entries, names }: { entries: AuditEntry[]; names: Map<string, string> }) {
   return (
-    <section>
-      <h2 className="mb-2 text-xl font-bold">Nhật ký kiểm toán ({entries.length})</h2>
-      <p className="mb-4 text-sm text-gray-600">
-        Xử lý dòng sao kê, khớp tay và giải trình tiền vào gần đây. Chỉ quản trị viên xem được.
-      </p>
+    <AdminSection
+      id="audit"
+      title="Nhật ký kiểm toán"
+      count={entries.length}
+      lead="Xử lý dòng sao kê, khớp tay và giải trình tiền vào gần đây. Chỉ quản trị viên xem được."
+    >
       {entries.length === 0 ? (
-        <p className="card p-6 text-gray-600">Chưa có mục nào.</p>
+        <EmptyState title="Chưa có mục nào." />
       ) : (
-        <ul className="divide-y divide-gray-100 card text-sm">
+        <DataTable label="Nhật ký kiểm toán đối soát" head={["Thao tác", "Chi tiết", "Người thực hiện", "Lúc"]}>
           {entries.map((entry) => (
-            <li key={entry.id} className="space-y-1 p-4">
-              <div className="flex flex-wrap justify-between gap-2">
-                <span className="font-medium">{AUDIT_ACTION_LABELS[entry.action] ?? entry.action}</span>
-                <span className="text-gray-500">{formatDateTime(entry.created_at)}</span>
-              </div>
-              <div className="text-gray-700">{auditSummary(entry)}</div>
-              <div className="text-gray-500">
-                Người thực hiện: {entry.actor_id ? (names.get(entry.actor_id) ?? entry.actor_id) : "—"}
-              </div>
-            </li>
+            <tr key={entry.id}>
+              <td className="px-4 py-3 font-medium text-ink">{AUDIT_ACTION_LABELS[entry.action] ?? entry.action}</td>
+              <td className="max-w-md px-4 py-3 break-words">{auditSummary(entry)}</td>
+              <td className="px-4 py-3 break-all">
+                {entry.actor_id ? (names.get(entry.actor_id) ?? entry.actor_id) : "—"}
+              </td>
+              <td className="px-4 py-3 whitespace-nowrap text-muted">{formatDateTime(entry.created_at)}</td>
+            </tr>
           ))}
-        </ul>
+        </DataTable>
       )}
-    </section>
+    </AdminSection>
   )
 }
diff --git a/apps/web/src/app/admin/unmatched/page.tsx b/apps/web/src/app/admin/unmatched/page.tsx
index 75d252cb..6b5e76cc 100644
--- a/apps/web/src/app/admin/unmatched/page.tsx
+++ b/apps/web/src/app/admin/unmatched/page.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next"
-import Link from "next/link"
 import { notFound } from "next/navigation"
 
 import { InboundExplanationList, ManualMatchList } from "@/components/Reconciliation"
 import { UnmatchedTransactionCard } from "@/components/UnmatchedTransaction"
+import { EmptyState } from "@/components/ui/EmptyState"
 import { explainTransaction } from "@/app/admin/unmatched/actions"
 import { matchTransaction } from "@/app/me/campaigns/[id]/unmatched/actions"
 import { requireSession } from "@/lib/auth/session"
@@ -12,6 +12,8 @@ import { campaignRefs, FINANCE_ROLES } from "@/lib/receiving-accounts"
 import { listInboundExplanations, listManualMatches, listMatchCandidates, listUnmatched } from "@/lib/reconciliation"
 import { dbAs } from "@/lib/supabase"
 
+import { AdminPage, AdminSection, ItemList } from "../_components/ui"
+
 export const metadata: Metadata = { title: "Giao dịch chưa khớp", robots: { index: false } }
 
 export default async function AdminUnmatchedPage() {
@@ -38,33 +40,35 @@ export default async function AdminUnmatchedPage() {
   const titles = new Map([...refs].map(([id, ref]) => [id, ref.title]))
 
   return (
-    <div className="mx-auto max-w-5xl space-y-12 px-4 py-10">
-      <div>
-        <Link href="/admin/statements" className="text-sm text-gray-600 hover:text-gray-900">
-          ← Đối soát sao kê
-        </Link>
-        <h1 className="mt-2 text-3xl font-bold">Giao dịch chưa khớp</h1>
-        <p className="mt-2 text-sm text-gray-600">
-          Tiền đã vào tài khoản nhận của chiến dịch nhưng không có mã ủng hộ hợp lệ, nên đang được tính là &quot;chưa
-          khớp&quot;. Khớp tay khi đã rõ khoản này của lượt ủng hộ nào; người tổ chức cũng khớp được ở trang chiến dịch
-          của họ. Khớp tay chỉ chuyển tiền từ &quot;chưa khớp&quot; sang &quot;đã khớp&quot;, tổng đã thanh toán của
-          chiến dịch không đổi. Mỗi giao dịch chỉ khớp được một lần, và mỗi lần được ghi vào nhật ký kiểm toán.
-        </p>
-        <p className="mt-2 text-sm text-gray-600">
-          Khoản không phải tiền ủng hộ (người tổ chức nạp thêm, ngân hàng hoàn phí, lãi) thì giải trình thay vì khớp, kể
-          cả khi chiến dịch đã hủy hoặc đã đóng: ghi lý do và bằng chứng đã kiểm tra. Sao kê công khai chỉ hiện loại
-          khoản tiền; tổng đã thanh toán không đổi, và giao dịch không còn chặn việc nhả tài khoản nhận.
-        </p>
-      </div>
-
-      <section>
-        <h2 className="mb-4 text-xl font-bold">
-          Chờ khớp ({total > unmatched.length ? `${unmatched.length} mới nhất / ${total}` : total})
-        </h2>
+    <AdminPage
+      title="Giao dịch chưa khớp"
+      intro={
+        <>
+          <p>
+            Tiền đã vào tài khoản nhận của chiến dịch nhưng không có mã ủng hộ hợp lệ, nên đang được tính là &quot;chưa
+            khớp&quot;. Khớp tay khi đã rõ khoản này của lượt ủng hộ nào; người tổ chức cũng khớp được ở trang chiến
+            dịch của họ. Khớp tay chỉ chuyển tiền từ &quot;chưa khớp&quot; sang &quot;đã khớp&quot;, tổng đã thanh toán
+            của chiến dịch không đổi. Mỗi giao dịch chỉ khớp được một lần, và mỗi lần được ghi vào nhật ký kiểm toán.
+          </p>
+          <p>
+            Khoản không phải tiền ủng hộ (người tổ chức nạp thêm, ngân hàng hoàn phí, lãi) thì giải trình thay vì khớp,
+            kể cả khi chiến dịch đã hủy hoặc đã đóng: ghi lý do và bằng chứng đã kiểm tra. Sao kê công khai chỉ hiện
+            loại khoản tiền; tổng đã thanh toán không đổi, và giao dịch không còn chặn việc nhả tài khoản nhận.
+          </p>
+        </>
+      }
+    >
+      <AdminSection
+        id="unmatched"
+        title="Chờ khớp"
+        count={total > unmatched.length ? `${unmatched.length} mới nhất / ${total}` : total}
+      >
         {unmatched.length === 0 ? (
-          <p className="card p-6 text-gray-600">Không có giao dịch nào chờ khớp.</p>
+          <EmptyState title="Không có giao dịch nào chờ khớp.">
+            Tiền vào không có mã ủng hộ hợp lệ sẽ hiện ở đây để khớp tay hoặc giải trình.
+          </EmptyState>
         ) : (
-          <ul className="space-y-4">
+          <ItemList>
             {unmatched.map((tx) => (
               <UnmatchedTransactionCard
                 key={tx.id}
@@ -75,13 +79,13 @@ export default async function AdminUnmatchedPage() {
                 campaignTitle={titles.get(tx.campaign_id) ?? tx.campaign_id}
               />
             ))}
-          </ul>
+          </ItemList>
         )}
-      </section>
+      </AdminSection>
 
       <ManualMatchList matches={matches} titles={titles} />
 
       <InboundExplanationList explanations={explanations} titles={titles} />
-    </div>
+    </AdminPage>
   )
 }
diff --git a/apps/web/src/components/ui/Notice.tsx b/apps/web/src/components/ui/Notice.tsx
new file mode 100644
index 00000000..2e28e4e6
--- /dev/null
+++ b/apps/web/src/components/ui/Notice.tsx
@@ -0,0 +1,35 @@
+import clsx from "clsx"
+import type { ReactNode } from "react"
+
+export type NoticeTone = "info" | "warning" | "danger" | "success"
+
+const TONES: Record<NoticeTone, string> = {
+  info: "border-sky-200 bg-sky-50 text-sky-900",
+  warning: "border-amber-200 bg-amber-50 text-amber-900",
+  danger: "border-red-200 bg-red-50 text-red-900",
+  success: "border-brand-200 bg-brand-50 text-brand-900",
+}
+
+/**
+ * A boxed message inside a page or card: why an action is blocked, a state
+ * that needs attention, a list that failed to load. One text colour per tone
+ * (DOS/Give#95 gotcha); pass `title` for a bold first line.
+ */
+export function Notice({
+  tone = "info",
+  title,
+  className,
+  children,
+}: {
+  tone?: NoticeTone
+  title?: ReactNode
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <div className={clsx("rounded-md border px-4 py-3 text-base", TONES[tone], className)}>
+      {title && <p className="font-semibold">{title}</p>}
+      {children && <div className={clsx(title && "mt-1")}>{children}</div>}
+    </div>
+  )
+}