diff --git a/app/(main)/(auth)/applications/[id]/loading.tsx b/app/(main)/(auth)/applications/[id]/loading.tsx
index fb9c13ef..9a2eb187 100644
--- a/app/(main)/(auth)/applications/[id]/loading.tsx
+++ b/app/(main)/(auth)/applications/[id]/loading.tsx
@@ -1,26 +1,19 @@
 import { AnswersCardSkeleton } from '@/components/features/application-answers-skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function MyApplicationDetailLoading() {
   return (
     <div className="mx-auto max-w-5xl">
       <div className="mb-4">
-        {/* Back link skeleton */}
-        <Skeleton className="mb-2 h-7 w-48" />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-8 w-48" />
-              <Skeleton className="h-5 w-20 rounded-md" />
-            </div>
-            <Skeleton className="h-4 w-56" />
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Skeleton className="h-9 w-20" />
-            <Skeleton className="h-9 w-20" />
-          </div>
-        </div>
-        <Skeleton className="mt-3 h-4 w-56" />
+        <PageHeaderSkeleton
+          titleWidth="w-48"
+          hasBack
+          hasAdornment
+          actionSize="sm"
+          actions={['w-32', 'w-9']}
+        />
+        <Skeleton className="mt-1 h-5 w-56" />
       </div>
 
       <div className="flex flex-col gap-4">
diff --git a/app/(main)/(auth)/applications/loading.tsx b/app/(main)/(auth)/applications/loading.tsx
index 1f05817a..9c5c0286 100644
--- a/app/(main)/(auth)/applications/loading.tsx
+++ b/app/(main)/(auth)/applications/loading.tsx
@@ -1,50 +1,21 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+
+const COLUMNS: DataTableSkeletonColumn[] = [
+  { head: 'w-20', cell: 'w-40', mobile: 'primary' },
+  { head: 'w-16', shape: 'badge', mobile: 'trailing' },
+  { head: 'w-24', mobile: 'line' },
+  { head: 'w-16', shape: 'action', cell: 'w-20', mobile: 'lineTrailing' },
+];
 
 export default function MyApplicationsLoading() {
   return (
     <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-4 w-72" />
-      </div>
-
-      <Card className="gap-0 overflow-hidden p-0">
-        <CardContent className="p-0">
-          <div className="hidden md:block">
-            <div className="flex h-10 items-center gap-4 border-b px-4">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <Skeleton key={i} className="h-4 w-20" />
-              ))}
-            </div>
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="border-b p-4 last:border-0">
-                <div className="grid grid-cols-4 gap-4">
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-5 w-20 rounded-md" />
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-8 w-20 rounded-md" />
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex flex-col divide-y md:hidden">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="flex flex-col gap-2 p-4">
-                <div className="flex items-center justify-between gap-2">
-                  <Skeleton className="h-4 w-40" />
-                  <Skeleton className="h-5 w-16 rounded-md" />
-                </div>
-                <div className="flex items-center justify-between gap-2">
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-8 w-20 rounded-md" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeaderSkeleton titleWidth="w-48" />
+      <DataTableSkeleton columns={COLUMNS} />
     </div>
   );
 }
diff --git a/app/(main)/(auth)/emails/loading.tsx b/app/(main)/(auth)/emails/loading.tsx
index 9d132ff2..539236bf 100644
--- a/app/(main)/(auth)/emails/loading.tsx
+++ b/app/(main)/(auth)/emails/loading.tsx
@@ -1,37 +1,17 @@
 import { EmailFailureStripSkeleton } from '@/components/features/email-failure-strip';
-import { EmailLogTableSkeleton } from '@/components/features/email-log-table-skeleton';
+import { EmailLogResultsSkeleton } from '@/components/features/email-log-results';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import { DataTableToolbarSkeleton } from '@/components/ui/data-table-toolbar';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function EmailsLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* Header skeleton */}
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-7 w-32" />
-        <Skeleton className="h-4 w-80" />
-      </div>
-
+      <PageHeaderSkeleton titleWidth="w-32" />
       <EmailFailureStripSkeleton />
-
-      {/* Toolbar skeleton — Status Select + Template Select + Search Input */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-        <div className="flex w-full flex-col gap-1.5 sm:w-44">
-          <Skeleton className="h-3 w-10" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-52">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-64">
-          <Skeleton className="h-3 w-12" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-      </div>
-
-      <Skeleton className="h-4 w-full max-w-md" />
-
-      <EmailLogTableSkeleton />
+      <DataTableToolbarSkeleton fields={['sm:w-44', 'sm:w-52', 'sm:w-64']} />
+      <Skeleton className="h-5 w-full max-w-md" />
+      <EmailLogResultsSkeleton />
     </div>
   );
 }
diff --git a/app/(main)/(auth)/emails/page.tsx b/app/(main)/(auth)/emails/page.tsx
index ecbc9726..707123a1 100644
--- a/app/(main)/(auth)/emails/page.tsx
+++ b/app/(main)/(auth)/emails/page.tsx
@@ -12,8 +12,10 @@ import {
   EmailFailureStrip,
   EmailFailureStripSkeleton,
 } from '@/components/features/email-failure-strip';
-import { EmailLogResults } from '@/components/features/email-log-results';
-import { EmailLogTableSkeleton } from '@/components/features/email-log-table-skeleton';
+import {
+  EmailLogResults,
+  EmailLogResultsSkeleton,
+} from '@/components/features/email-log-results';
 import { EmailLogToolbar } from '@/components/features/email-log-toolbar';
 import { PageHeader } from '@/components/layouts/page-header';
 
@@ -66,7 +68,7 @@ export default async function EmailsPage({ searchParams }: EmailsPageProps) {
 
       <Suspense
         key={JSON.stringify({ ...filters, page })}
-        fallback={<EmailLogTableSkeleton />}
+        fallback={<EmailLogResultsSkeleton />}
       >
         <EmailLogResults
           filters={filters}
diff --git a/app/(main)/(auth)/global-questions/loading.tsx b/app/(main)/(auth)/global-questions/loading.tsx
index ed2ff35c..bde63f1f 100644
--- a/app/(main)/(auth)/global-questions/loading.tsx
+++ b/app/(main)/(auth)/global-questions/loading.tsx
@@ -1,67 +1,39 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+
+const COLUMNS: DataTableSkeletonColumn[] = [
+  { head: 'w-12', cell: 'w-8', headClassName: 'w-12 px-2', mobile: 'line' },
+  { head: 'w-24', cell: 'w-56', mobile: 'primary' },
+  { head: 'w-24', headClassName: 'w-36', shape: 'badge', mobile: 'trailing' },
+  { head: 'w-24', cell: 'w-24', mobile: 'hidden' },
+  {
+    head: 'w-20',
+    headClassName: 'w-28',
+    shape: 'badge',
+    mobile: 'lineTrailing',
+  },
+  {
+    head: 'w-24',
+    headClassName: 'w-32',
+    shape: 'action',
+    cell: 'w-20',
+    mobile: 'line',
+  },
+];
 
 export default function GlobalQuestionsLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* PageHeader skeleton */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-8 w-48" />
-          <Skeleton className="h-4 w-80" />
-        </div>
-        <Skeleton className="h-8 w-28 shrink-0" />
-      </div>
-
-      {/* Table skeleton */}
-      <Card className="gap-0 overflow-hidden p-0">
-        <CardContent className="p-0">
-          <div className="hidden md:block">
-            <div className="flex h-10 items-center gap-8 border-b px-4">
-              <Skeleton className="h-4 w-12" />
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-4 w-20" />
-            </div>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-4 border-b p-4 last:border-b-0"
-              >
-                <Skeleton className="h-4 w-8" />
-                <Skeleton className="h-4 flex-1" />
-                <Skeleton className="h-6 w-24" />
-                <Skeleton className="h-4 w-16" />
-                <Skeleton className="h-6 w-20" />
-                <div className="flex gap-2">
-                  <Skeleton className="h-8 w-12" />
-                  <Skeleton className="h-8 w-16" />
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex flex-col divide-y md:hidden">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="flex flex-col gap-3 p-4">
-                <div className="flex items-start justify-between gap-2">
-                  <Skeleton className="h-4 w-40" />
-                  <Skeleton className="h-6 w-24" />
-                </div>
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-3 w-16" />
-                  <Skeleton className="h-4 w-16" />
-                </div>
-                <div className="flex gap-2">
-                  <Skeleton className="h-8 w-12" />
-                  <Skeleton className="h-8 w-16" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeaderSkeleton actions={['w-32']} actionSize="sm" />
+      <DataTableSkeleton
+        columns={COLUMNS}
+        hasReorderHandle
+        mobileGap="gap-3"
+        mobileRowGap="gap-0"
+      />
     </div>
   );
 }
diff --git a/app/(main)/(auth)/manage/applications/[id]/loading.tsx b/app/(main)/(auth)/manage/applications/[id]/loading.tsx
index 619c6f6b..aee08d21 100644
--- a/app/(main)/(auth)/manage/applications/[id]/loading.tsx
+++ b/app/(main)/(auth)/manage/applications/[id]/loading.tsx
@@ -1,4 +1,5 @@
 import { AnswersCardSkeleton } from '@/components/features/application-answers-skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { SectionCardSkeleton } from '@/components/ui/section-card';
 import { Skeleton } from '@/components/ui/skeleton';
 
@@ -6,22 +7,14 @@ export default function ApplicationDetailLoading() {
   return (
     <div className="mx-auto max-w-5xl">
       <div className="mb-4">
-        {/* Back link skeleton */}
-        <Skeleton className="mb-2 h-7 w-40" />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-8 w-40" />
-              <Skeleton className="h-5 w-20 rounded-md" />
-            </div>
-            <Skeleton className="h-4 w-56" />
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Skeleton className="h-9 w-40" />
-            <Skeleton className="h-9 w-9" />
-          </div>
-        </div>
-        <Skeleton className="mt-3 h-4 w-56" />
+        <PageHeaderSkeleton
+          titleWidth="w-40"
+          hasBack
+          hasAdornment
+          actionSize="sm"
+          actions={['w-40', 'w-9']}
+        />
+        <Skeleton className="mt-1 h-5 w-56" />
       </div>
 
       <div className="flex flex-col gap-4">
diff --git a/app/(main)/(auth)/manage/applications/loading.tsx b/app/(main)/(auth)/manage/applications/loading.tsx
index bfc4c24e..7db6aa46 100644
--- a/app/(main)/(auth)/manage/applications/loading.tsx
+++ b/app/(main)/(auth)/manage/applications/loading.tsx
@@ -1,36 +1,15 @@
-import { ApplicationsTableSkeleton } from '@/components/features/applications-table-skeleton';
-import { Skeleton } from '@/components/ui/skeleton';
+import { ApplicationsResultsSkeleton } from '@/components/features/applications-results';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import { DataTableToolbarSkeleton } from '@/components/ui/data-table-toolbar';
 
 export default function ApplicationsLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* Header skeleton */}
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-7 w-36" />
-        <Skeleton className="h-4 w-64" />
-      </div>
-
-      {/* Toolbar skeleton — Position Select + Applicant Select + Status Select + Search Input */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-        <div className="flex w-full flex-col gap-1.5 sm:w-48">
-          <Skeleton className="h-3 w-14" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-56">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-44">
-          <Skeleton className="h-3 w-10" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-64">
-          <Skeleton className="h-3 w-12" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-      </div>
-
-      <ApplicationsTableSkeleton />
+      <PageHeaderSkeleton titleWidth="w-36" />
+      <DataTableToolbarSkeleton
+        fields={['sm:w-48', 'sm:w-56', 'sm:w-44', 'sm:w-64']}
+      />
+      <ApplicationsResultsSkeleton />
     </div>
   );
 }
diff --git a/app/(main)/(auth)/manage/applications/page.tsx b/app/(main)/(auth)/manage/applications/page.tsx
index b6327bf7..f542d647 100644
--- a/app/(main)/(auth)/manage/applications/page.tsx
+++ b/app/(main)/(auth)/manage/applications/page.tsx
@@ -16,8 +16,10 @@ import {
 } from '@/lib/constants';
 import type { ApplicationFilters } from '@/lib/types';
 
-import { ApplicationsResults } from '@/components/features/applications-results';
-import { ApplicationsTableSkeleton } from '@/components/features/applications-table-skeleton';
+import {
+  ApplicationsResults,
+  ApplicationsResultsSkeleton,
+} from '@/components/features/applications-results';
 import { ApplicationsToolbar } from '@/components/features/applications-toolbar';
 import { PageHeader } from '@/components/layouts/page-header';
 
@@ -105,7 +107,7 @@ export default async function ApplicationsPage({
 
       <Suspense
         key={JSON.stringify({ ...filters, page })}
-        fallback={<ApplicationsTableSkeleton showSelection={!isDraftView} />}
+        fallback={<ApplicationsResultsSkeleton isDraftView={isDraftView} />}
       >
         <ApplicationsResults
           user={user}
diff --git a/app/(main)/(auth)/manage/positions/loading.tsx b/app/(main)/(auth)/manage/positions/loading.tsx
index f475bb85..c1c7a9a4 100644
--- a/app/(main)/(auth)/manage/positions/loading.tsx
+++ b/app/(main)/(auth)/manage/positions/loading.tsx
@@ -1,29 +1,31 @@
-import { Card, CardHeader } from '@/components/ui/card';
+import { PositionCardSkeleton } from '@/components/features/position-card';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { Skeleton } from '@/components/ui/skeleton';
 
-export default function MyPositionsLoading() {
+function PositionGroupSkeleton({ count }: { count: number }) {
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-wrap items-center justify-between gap-4">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-8 w-32" />
-          <Skeleton className="h-4 w-72" />
-        </div>
-        <Skeleton className="h-9 w-32" />
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Skeleton className="size-4 rounded" />
+        <Skeleton className="h-7 w-24" />
       </div>
       <div className="flex flex-col gap-4">
-        <Skeleton className="h-6 w-16" />
-        {Array.from({ length: 3 }).map((_, i) => (
-          <Card key={i} className="gap-0 p-0">
-            <CardHeader className="p-0">
-              <div className="flex w-full items-center justify-between p-6">
-                <Skeleton className="h-5 w-48" />
-                <Skeleton className="size-5 rounded" />
-              </div>
-            </CardHeader>
-          </Card>
+        {Array.from({ length: count }).map((_, i) => (
+          <PositionCardSkeleton key={i} hasStats actions={3} />
         ))}
       </div>
     </div>
   );
 }
+
+export default function ManagePositionsLoading() {
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeaderSkeleton actions={['w-36']} />
+      <div className="flex flex-col gap-6">
+        <PositionGroupSkeleton count={2} />
+        <PositionGroupSkeleton count={1} />
+      </div>
+    </div>
+  );
+}
diff --git a/app/(main)/(auth)/positions/[id]/apply/loading.tsx b/app/(main)/(auth)/positions/[id]/apply/loading.tsx
index ae649d40..45912231 100644
--- a/app/(main)/(auth)/positions/[id]/apply/loading.tsx
+++ b/app/(main)/(auth)/positions/[id]/apply/loading.tsx
@@ -1,13 +1,15 @@
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import { Skeleton } from '@/components/ui/skeleton';
+
 export default function ApplyLoading() {
   return (
     <div className="mx-auto max-w-2xl">
-      <div className="mb-8 space-y-2">
-        <div className="bg-muted h-8 w-48 animate-pulse rounded" />
-        <div className="bg-muted h-4 w-64 animate-pulse rounded" />
+      <div className="mb-6">
+        <PageHeaderSkeleton titleWidth="w-64" />
       </div>
       <div className="flex flex-col gap-4">
         {[0, 1, 2].map((i) => (
-          <div key={i} className="bg-muted h-24 animate-pulse rounded-lg" />
+          <Skeleton key={i} className="h-24 w-full rounded-lg" />
         ))}
       </div>
     </div>
diff --git a/app/(main)/(auth)/users/loading.tsx b/app/(main)/(auth)/users/loading.tsx
index 0eb16a94..eb8c97d2 100644
--- a/app/(main)/(auth)/users/loading.tsx
+++ b/app/(main)/(auth)/users/loading.tsx
@@ -1,85 +1,33 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+import { DataTableToolbarSkeleton } from '@/components/ui/data-table-toolbar';
+
+const COLUMNS: DataTableSkeletonColumn[] = [
+  { head: 'w-24', cell: 'w-32', subCell: 'w-44', mobile: 'primary' },
+  { head: 'w-16', shape: 'badge', mobile: 'trailing' },
+  { head: 'w-20', mobile: 'hidden' },
+  { head: 'w-8', mobile: 'hidden' },
+  { head: 'w-20', shape: 'badge', mobile: 'line' },
+  {
+    head: 'w-24',
+    shape: 'action',
+    headClassName: 'text-right',
+    mobile: 'lineTrailing',
+  },
+];
 
 export default function UsersLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* Header skeleton */}
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-7 w-24" />
-        <Skeleton className="h-4 w-64" />
-      </div>
-
-      {/* Toolbar skeleton — role/position filters + search input + count line */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-        <div className="flex w-full flex-col gap-1.5 sm:w-48">
-          <Skeleton className="h-3 w-10" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-48">
-          <Skeleton className="h-3 w-28" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-64">
-          <Skeleton className="h-3 w-14" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <Skeleton className="h-4 w-48 sm:ml-auto" />
-      </div>
-
-      {/* Table skeleton */}
-      <Card className="gap-0 overflow-hidden p-0">
-        <CardContent className="p-0">
-          <div className="hidden md:block">
-            <div className="flex h-10 items-center gap-8 border-b px-4">
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-4 w-14" />
-              <Skeleton className="h-4 w-20" />
-              <Skeleton className="h-4 w-28" />
-              <Skeleton className="ml-auto h-4 w-16" />
-            </div>
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-8 border-b p-4 last:border-b-0"
-              >
-                <div className="flex flex-col gap-1">
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-3 w-44" />
-                </div>
-                <Skeleton className="h-5 w-16 rounded-md" />
-                <Skeleton className="h-4 w-20" />
-                <Skeleton className="h-4 w-8" />
-                <Skeleton className="h-5 w-20 rounded-md" />
-                <div className="ml-auto flex gap-2">
-                  <Skeleton className="h-8 w-24" />
-                  <Skeleton className="h-8 w-20" />
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex flex-col divide-y md:hidden">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="flex flex-col gap-3 p-4">
-                <div className="flex items-start justify-between gap-2">
-                  <div className="flex flex-col gap-1">
-                    <Skeleton className="h-4 w-32" />
-                    <Skeleton className="h-3 w-44" />
-                  </div>
-                  <Skeleton className="h-5 w-16 rounded-md" />
-                </div>
-                <Skeleton className="h-4 w-40" />
-                <div className="flex gap-2">
-                  <Skeleton className="h-11 w-24" />
-                  <Skeleton className="h-11 w-20" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeaderSkeleton titleWidth="w-24" actions={['w-32']} />
+      <DataTableToolbarSkeleton
+        fields={['sm:w-48', 'sm:w-48', 'sm:w-64']}
+        hasTrailingCount
+      />
+      <DataTableSkeleton columns={COLUMNS} mobileGap="gap-3" />
     </div>
   );
 }
diff --git a/app/(main)/loading.tsx b/app/(main)/loading.tsx
index f9c91e30..4f613c52 100644
--- a/app/(main)/loading.tsx
+++ b/app/(main)/loading.tsx
@@ -1,17 +1,9 @@
-import { SectionCardSkeleton } from '@/components/ui/section-card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 
 export default function HomeLoading() {
   return (
     <div className="flex w-full flex-col gap-6">
-      {/* Heading */}
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-4 w-64" />
-      </div>
-
-      <SectionCardSkeleton rowShape="badge-meta" hasSubtitle />
-      <SectionCardSkeleton rowShape="stacked-action" />
+      <PageHeaderSkeleton />
     </div>
   );
 }
diff --git a/app/(main)/positions/[id]/loading.tsx b/app/(main)/positions/[id]/loading.tsx
index 902d82eb..e324a902 100644
--- a/app/(main)/positions/[id]/loading.tsx
+++ b/app/(main)/positions/[id]/loading.tsx
@@ -4,12 +4,12 @@ export default function PositionDetailLoading() {
   return (
     <div className="flex flex-col gap-8">
       <div>
-        <Skeleton className="mb-4 h-4 w-28" />
-        <div className="mt-2 flex items-center gap-3">
+        <Skeleton className="mb-4 h-5 w-28" />
+        <div className="mt-2 flex flex-wrap items-center gap-3">
           <Skeleton className="h-8 w-64" />
-          <Skeleton className="h-5 w-16 rounded-full" />
+          <Skeleton className="h-5.5 w-16 rounded-md" />
         </div>
-        <Skeleton className="mt-3 h-5 w-48" />
+        <Skeleton className="mt-3 h-6 w-48" />
       </div>
       <div className="max-w-2xl space-y-2">
         <Skeleton className="h-4 w-full" />
diff --git a/app/(main)/positions/loading.tsx b/app/(main)/positions/loading.tsx
index d5da2c89..5426525b 100644
--- a/app/(main)/positions/loading.tsx
+++ b/app/(main)/positions/loading.tsx
@@ -1,24 +1,21 @@
-import { Card, CardHeader } from '@/components/ui/card';
+import { PositionCardSkeleton } from '@/components/features/position-card';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function PositionsLoading() {
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-8 w-40" />
-        <Skeleton className="h-4 w-72" />
-      </div>
+      <PageHeaderSkeleton titleWidth="w-40" />
       <div className="flex flex-col gap-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <Card key={i} className="gap-0 p-0">
-            <CardHeader className="p-0">
-              <div className="flex w-full items-center justify-between p-6">
-                <Skeleton className="h-5 w-48" />
-                <Skeleton className="size-5 rounded" />
-              </div>
-            </CardHeader>
-          </Card>
-        ))}
+        <div className="flex items-center gap-2">
+          <Skeleton className="size-4 rounded" />
+          <Skeleton className="h-7 w-40" />
+        </div>
+        <div className="flex flex-col gap-4">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <PositionCardSkeleton key={i} actions={2} />
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/app/(main)/profile/loading.tsx b/app/(main)/profile/loading.tsx
index 56da7dec..1bbb4f84 100644
--- a/app/(main)/profile/loading.tsx
+++ b/app/(main)/profile/loading.tsx
@@ -1,14 +1,11 @@
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function ProfileLoading() {
   return (
     <div className="mx-auto max-w-2xl">
       <div className="flex flex-col gap-6">
-        {/* PageHeader skeleton */}
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-8 w-24" />
-          <Skeleton className="h-4 w-64" />
-        </div>
+        <PageHeaderSkeleton titleWidth="w-24" />
 
         {/* Edit toggle skeleton */}
         <div className="flex justify-end">
diff --git a/components/features/answer-display.tsx b/components/features/answer-display.tsx
index 0cc1211e..5c51f509 100644
--- a/components/features/answer-display.tsx
+++ b/components/features/answer-display.tsx
@@ -1,3 +1,4 @@
+import { formatShortAnswerValue } from '@/lib/constants';
 import type { AnswerQuestion, QuestionFileTarget } from '@/lib/types';
 import { answerFieldIds, partitionAnswerValue } from '@/lib/utils';
 
@@ -27,6 +28,7 @@ export function AnswerDisplay({
           id={noticeId}
           values={orphaned}
           questionType={question.type}
+          format={question.format}
         />
       )}
 
@@ -46,7 +48,9 @@ export function AnswerDisplay({
           ))}
         </div>
       ) : (
-        <p className="text-foreground text-base font-medium">{value[0]}</p>
+        <p className="text-foreground text-base font-medium">
+          {formatShortAnswerValue(value[0] ?? '', question.format)}
+        </p>
       )}
     </>
   );
diff --git a/components/features/answer-field.tsx b/components/features/answer-field.tsx
index 735c3e4b..51d2bb1a 100644
--- a/components/features/answer-field.tsx
+++ b/components/features/answer-field.tsx
@@ -82,6 +82,7 @@ export function AnswerField({
       id={noticeId}
       values={orphaned}
       questionType={question.type}
+      format={question.format}
     />
   );
 
diff --git a/components/features/answer-mismatch-notice.tsx b/components/features/answer-mismatch-notice.tsx
index a43cc648..21aee36e 100644
--- a/components/features/answer-mismatch-notice.tsx
+++ b/components/features/answer-mismatch-notice.tsx
@@ -1,11 +1,17 @@
 import type { QuestionType } from '@/prisma/client';
 
+import {
+  type ShortAnswerFormatValue,
+  formatShortAnswerValue,
+} from '@/lib/constants';
+
 import { WarningCallout } from '@/components/ui/warning-callout';
 
 interface AnswerMismatchNoticeProps {
   id: string;
   values: string[];
   questionType: QuestionType;
+  format: ShortAnswerFormatValue | null;
 }
 
 // Callers wire `id` to the control's `aria-describedby`.
@@ -13,6 +19,7 @@ export function AnswerMismatchNotice({
   id,
   values,
   questionType,
+  format,
 }: AnswerMismatchNoticeProps) {
   if (values.length === 0) return null;
 
@@ -39,7 +46,7 @@ export function AnswerMismatchNotice({
           <ul className="mt-1 flex flex-col gap-0.5">
             {values.map((v, i) => (
               <li key={i} className="font-medium">
-                {v}
+                {formatShortAnswerValue(v, format)}
               </li>
             ))}
           </ul>
diff --git a/components/features/application-answers-list.tsx b/components/features/application-answers-list.tsx
index 36dcd265..67b17e1b 100644
--- a/components/features/application-answers-list.tsx
+++ b/components/features/application-answers-list.tsx
@@ -1,3 +1,4 @@
+import { formatShortAnswerValue } from '@/lib/constants';
 import { type ApplicationReviewAnswer } from '@/lib/types';
 
 import { AnswerFileLink } from '@/components/features/answer-file-link';
@@ -75,10 +76,16 @@ function AnswerValue({
     case 'short_answer':
       return answer.value.length > 1 ? (
         <dd>
-          <ChipList values={answer.value} />
+          <ChipList
+            values={answer.value.map((v) =>
+              formatShortAnswerValue(v, answer.format),
+            )}
+          />
         </dd>
       ) : (
-        <dd className="text-sm break-words">{answer.value[0]}</dd>
+        <dd className="text-sm break-words">
+          {formatShortAnswerValue(answer.value[0] ?? '', answer.format)}
+        </dd>
       );
     default: {
       const exhaustiveCheck: never = answer.type;
diff --git a/components/features/applications-results.tsx b/components/features/applications-results.tsx
index 549b229d..d5d733f8 100644
--- a/components/features/applications-results.tsx
+++ b/components/features/applications-results.tsx
@@ -11,6 +11,7 @@ import {
 } from '@/prisma/data/applications';
 
 import { APPLICATIONS_PAGE_SIZE } from '@/lib/constants';
+import { DATA_TABLE_RESULTS_CLASS } from '@/lib/data-table';
 import { STATE_ICONS } from '@/lib/icons';
 import type {
   ApplicationFilters,
@@ -20,6 +21,11 @@ import type {
 import { buildApplicationsHref, getPaginationBounds } from '@/lib/utils';
 
 import { ApplicationsTable } from '@/components/features/applications-table';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+import { Skeleton } from '@/components/ui/skeleton';
 import { TablePagination } from '@/components/ui/table-pagination';
 
 interface ApplicationsResultsProps {
@@ -99,7 +105,7 @@ export async function ApplicationsResults({
       );
 
     return (
-      <div className="flex flex-col gap-3">
+      <div className={DATA_TABLE_RESULTS_CLASS}>
         <p className="text-muted-foreground flex items-start gap-2 text-sm">
           <STATE_ICONS.hidden className="mt-0.5 size-4 shrink-0" />
           You can see who started an application, not what they&apos;ve written.
@@ -148,7 +154,7 @@ export async function ApplicationsResults({
       paginateRows(merged, page);
 
     return (
-      <div className="flex flex-col gap-3">
+      <div className={DATA_TABLE_RESULTS_CLASS}>
         <ApplicationsTable
           applications={rows}
           hasActiveFilters={hasActiveFilters}
@@ -171,7 +177,7 @@ export async function ApplicationsResults({
     await fetchPage(getApplicationsCount, getApplications, user, filters, page);
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className={DATA_TABLE_RESULTS_CLASS}>
       <ApplicationsTable
         applications={rows.map((a) => ({ ...a, isDraft: false as const }))}
         hasActiveFilters={hasActiveFilters}
@@ -189,3 +195,42 @@ export async function ApplicationsResults({
     </div>
   );
 }
+
+interface ApplicationsResultsSkeletonProps {
+  isDraftView?: boolean;
+}
+
+export function ApplicationsResultsSkeleton({
+  isDraftView = false,
+}: ApplicationsResultsSkeletonProps) {
+  const columns: DataTableSkeletonColumn[] = [
+    ...(isDraftView
+      ? []
+      : ([
+          {
+            head: 'w-10',
+            shape: 'checkbox',
+            headClassName: 'w-10',
+            cellClassName: 'w-10',
+            mobile: 'leading',
+          },
+        ] satisfies DataTableSkeletonColumn[])),
+    { head: 'w-24', cell: 'w-36', subCell: 'w-48', mobile: 'primary' },
+    { head: 'w-20', cell: 'w-28' },
+    { head: 'w-16', cell: 'w-20', shape: 'badge', mobile: 'trailing' },
+    { head: 'w-24', cell: 'w-20' },
+  ];
+
+  return (
+    <div className={DATA_TABLE_RESULTS_CLASS}>
+      {isDraftView && <Skeleton className="h-5 w-full max-w-lg" />}
+      <DataTableSkeleton
+        columns={columns}
+        mobileGap="gap-1"
+        mobileRowGap="gap-3"
+      />
+      {/* Single-page summary line only — multi-page controls row height is unknowable until fetch. */}
+      <Skeleton className="h-5 w-56" />
+    </div>
+  );
+}
diff --git a/components/features/applications-table-skeleton.tsx b/components/features/applications-table-skeleton.tsx
deleted file mode 100644
index 469a7ed1..00000000
--- a/components/features/applications-table-skeleton.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-
-interface ApplicationsTableSkeletonProps {
-  // Off for the drafts view, whose table renders no checkbox column.
-  showSelection?: boolean;
-}
-
-export function ApplicationsTableSkeleton({
-  showSelection = true,
-}: ApplicationsTableSkeletonProps = {}) {
-  return (
-    <Card className="gap-0 overflow-hidden p-0">
-      <CardContent className="p-0">
-        <div className="hidden md:block">
-          <div className="flex h-10 items-center gap-4 border-b px-4">
-            {showSelection && <Skeleton className="h-4 w-4" />}
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="ml-auto h-4 w-20" />
-            <Skeleton className="h-4 w-16" />
-            <Skeleton className="h-4 w-20" />
-          </div>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div
-              key={i}
-              className="flex items-center gap-4 border-b p-4 last:border-b-0"
-            >
-              {showSelection && <Skeleton className="h-4 w-4 shrink-0" />}
-              <div className="flex flex-1 flex-col gap-1">
-                <Skeleton className="h-4 w-36" />
-                <Skeleton className="h-3 w-48" />
-              </div>
-              <Skeleton className="h-4 w-28" />
-              <Skeleton className="h-5 w-20" />
-              <Skeleton className="h-4 w-20" />
-            </div>
-          ))}
-        </div>
-
-        <div className="flex flex-col divide-y md:hidden">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="flex gap-3 p-4">
-              {showSelection && (
-                <Skeleton className="mt-0.5 h-4 w-4 shrink-0" />
-              )}
-              <div className="flex min-w-0 flex-1 flex-col gap-1">
-                <div className="flex items-start justify-between gap-2">
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-5 w-20" />
-                </div>
-                <Skeleton className="h-3 w-40" />
-                <Skeleton className="h-4 w-28" />
-                <Skeleton className="h-3 w-20" />
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/components/features/email-log-results.tsx b/components/features/email-log-results.tsx
index f94a87a8..b819932e 100644
--- a/components/features/email-log-results.tsx
+++ b/components/features/email-log-results.tsx
@@ -3,10 +3,16 @@ import 'server-only';
 import { getEmailLogs, getEmailLogsCount } from '@/prisma/data/emails';
 
 import { EMAIL_LOG_PAGE_SIZE } from '@/lib/constants';
+import { DATA_TABLE_RESULTS_CLASS } from '@/lib/data-table';
 import type { EmailLogFilters } from '@/lib/types';
 import { buildEmailLogHref, getPaginationBounds } from '@/lib/utils';
 
 import { EmailLogTable } from '@/components/features/email-log-table';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+import { Skeleton } from '@/components/ui/skeleton';
 import { TablePagination } from '@/components/ui/table-pagination';
 
 interface EmailLogResultsProps {
@@ -37,7 +43,7 @@ export async function EmailLogResults({
       : initialRows;
 
   return (
-    <div className="flex flex-col gap-3">
+    <div className={DATA_TABLE_RESULTS_CLASS}>
       <EmailLogTable emails={rows} hasActiveFilters={hasActiveFilters} />
       <TablePagination
         buildHref={(p) => buildEmailLogHref(filters, p)}
@@ -52,3 +58,24 @@ export async function EmailLogResults({
     </div>
   );
 }
+
+const EMAIL_LOG_SKELETON_COLUMNS: DataTableSkeletonColumn[] = [
+  { head: 'w-32', cell: 'w-48', subCell: 'w-32', mobile: 'primary' },
+  { head: 'w-24', mobile: 'hidden' },
+  { head: 'w-40', mobile: 'line' },
+  { head: 'w-20', shape: 'badge', mobile: 'trailing' },
+  { head: 'w-24', mobile: 'line' },
+];
+
+export function EmailLogResultsSkeleton() {
+  return (
+    <div className={DATA_TABLE_RESULTS_CLASS}>
+      <DataTableSkeleton
+        columns={EMAIL_LOG_SKELETON_COLUMNS}
+        mobileGap="gap-1"
+      />
+      {/* Single-page summary line only — multi-page controls row height is unknowable until fetch. */}
+      <Skeleton className="h-5 w-56" />
+    </div>
+  );
+}
diff --git a/components/features/email-log-table-skeleton.tsx b/components/features/email-log-table-skeleton.tsx
deleted file mode 100644
index 06df7b96..00000000
--- a/components/features/email-log-table-skeleton.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-
-export function EmailLogTableSkeleton() {
-  return (
-    <Card className="gap-0 overflow-hidden p-0">
-      <CardContent className="p-0">
-        <div className="hidden md:block">
-          <div className="flex h-10 items-center gap-4 border-b px-4">
-            <Skeleton className="h-4 w-32" />
-            <Skeleton className="h-4 w-24" />
-            <Skeleton className="ml-auto h-4 w-40" />
-            <Skeleton className="h-4 w-20" />
-            <Skeleton className="h-4 w-24" />
-          </div>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <div
-              key={i}
-              className="flex items-center gap-4 border-b p-4 last:border-b-0"
-            >
-              <div className="flex flex-1 flex-col gap-1">
-                <Skeleton className="h-4 w-48" />
-                <Skeleton className="h-3 w-32" />
-              </div>
-              <Skeleton className="h-4 w-28" />
-              <Skeleton className="h-4 w-40" />
-              <Skeleton className="h-5 w-20" />
-              <Skeleton className="h-4 w-24" />
-            </div>
-          ))}
-        </div>
-
-        <div className="flex flex-col divide-y md:hidden">
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div key={i} className="flex flex-col gap-2 p-4">
-              <div className="flex items-start justify-between gap-2">
-                <Skeleton className="h-4 w-40" />
-                <Skeleton className="h-5 w-20" />
-              </div>
-              <Skeleton className="h-4 w-56" />
-              <Skeleton className="h-3 w-32" />
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/components/features/position-card.tsx b/components/features/position-card.tsx
index ab5e0b2a..82ee7765 100644
--- a/components/features/position-card.tsx
+++ b/components/features/position-card.tsx
@@ -23,6 +23,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Markdown } from '@/components/ui/markdown';
+import { Skeleton } from '@/components/ui/skeleton';
 
 interface PositionCardProps {
   position: PositionWithQuestions;
@@ -245,3 +246,83 @@ export function PositionCard({
     </Card>
   );
 }
+
+interface PositionCardSkeletonProps {
+  hasStats?: boolean;
+  actions?: number;
+}
+
+// Mirrors PositionStatCluster's total tile + 2x2 grid — update alongside it.
+function PositionStatClusterSkeleton() {
+  return (
+    <div className="w-fit shrink-0">
+      <div className="border-border mb-2 border-b pb-2">
+        <Skeleton className="h-4 w-12" />
+        <Skeleton className="mt-1 h-5 w-8" />
+      </div>
+      <div className="grid grid-cols-2 gap-x-4 gap-y-2">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i}>
+            <Skeleton className="h-3 w-16" />
+            <Skeleton className="mt-0.5 h-5 w-6" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function PositionCardSkeleton({
+  hasStats = false,
+  actions = 2,
+}: PositionCardSkeletonProps) {
+  return (
+    <Card className="flex flex-col gap-0 p-0">
+      <div className={cn(hasStats && 'sm:flex sm:flex-row')}>
+        <div
+          className={cn(hasStats && 'sm:flex sm:min-w-0 sm:flex-1 sm:flex-col')}
+        >
+          <CardHeader className="p-4 pb-3">
+            <div
+              className={cn(
+                'flex flex-wrap items-center gap-2',
+                !hasStats && 'justify-between',
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-6 w-48" />
+              </div>
+              <Skeleton className="h-5.5 w-16 rounded-md" />
+            </div>
+            <Skeleton className="mt-1 h-5 w-40" />
+          </CardHeader>
+
+          <CardContent
+            className={cn(
+              'px-4 pb-4',
+              hasStats && 'sm:flex sm:flex-1 sm:flex-col',
+            )}
+          >
+            <div className="flex flex-col gap-1.5">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-11/12" />
+              <Skeleton className="h-4 w-3/5" />
+            </div>
+
+            <div className="mt-auto flex flex-wrap items-center gap-2 pt-3">
+              {Array.from({ length: actions }).map((_, i) => (
+                <Skeleton key={i} className="h-11 w-28 md:h-8" />
+              ))}
+            </div>
+          </CardContent>
+        </div>
+
+        {hasStats && (
+          <div className="px-4 pb-4 sm:flex sm:shrink-0 sm:items-start sm:p-6 sm:pl-0">
+            <PositionStatClusterSkeleton />
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}
diff --git a/components/layouts/page-header.tsx b/components/layouts/page-header.tsx
index be7f5ece..62deb69c 100644
--- a/components/layouts/page-header.tsx
+++ b/components/layouts/page-header.tsx
@@ -2,8 +2,17 @@ import Link from 'next/link';
 import type { ReactNode } from 'react';
 
 import { ACTION_ICONS } from '@/lib/icons';
+import { cn } from '@/lib/utils';
 
 import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const WRAPPER_CLASS = 'flex flex-col gap-1';
+const ROW_CLASS =
+  'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between';
+const TITLE_ROW_CLASS = 'flex flex-wrap items-center gap-2';
+const DESCRIPTION_CLASS = 'text-muted-foreground mt-1 text-sm';
+const ACTIONS_CLASS = 'flex shrink-0 flex-wrap items-center gap-2';
 
 interface PageHeaderProps {
   title: string;
@@ -23,7 +32,7 @@ export function PageHeader({
   backLabel = 'Back',
 }: PageHeaderProps) {
   return (
-    <div className="flex flex-col gap-1">
+    <div className={WRAPPER_CLASS}>
       {backHref && (
         <Button variant="ghost" size="sm" asChild className="mb-2 -ml-2 w-fit">
           <Link href={backHref}>
@@ -32,19 +41,59 @@ export function PageHeader({
           </Link>
         </Button>
       )}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      <div className={ROW_CLASS}>
         <div>
-          <div className="flex flex-wrap items-center gap-2">
+          <div className={TITLE_ROW_CLASS}>
             <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
             {titleAdornment}
           </div>
-          {description && (
-            <p className="text-muted-foreground mt-1 text-sm">{description}</p>
-          )}
+          {description && <p className={DESCRIPTION_CLASS}>{description}</p>}
+        </div>
+        {actions && <div className={ACTIONS_CLASS}>{actions}</div>}
+      </div>
+    </div>
+  );
+}
+
+interface PageHeaderSkeletonProps {
+  titleWidth?: string;
+  hasDescription?: boolean;
+  hasAdornment?: boolean;
+  hasBack?: boolean;
+  actions?: string[];
+  actionSize?: 'sm' | 'default';
+}
+
+export function PageHeaderSkeleton({
+  titleWidth = 'w-48',
+  hasDescription = true,
+  hasAdornment = false,
+  hasBack = false,
+  actions,
+  actionSize = 'default',
+}: PageHeaderSkeletonProps) {
+  return (
+    <div className={WRAPPER_CLASS}>
+      {hasBack && <Skeleton className="mb-2 h-11 w-32 md:h-8" />}
+      <div className={ROW_CLASS}>
+        <div>
+          <div className={TITLE_ROW_CLASS}>
+            <Skeleton className={cn('h-8', titleWidth)} />
+            {hasAdornment && <Skeleton className="h-5.5 w-20 rounded-md" />}
+          </div>
+          {hasDescription && <Skeleton className="mt-1 h-5 w-72" />}
         </div>
-        {actions && (
-          <div className="flex shrink-0 flex-wrap items-center gap-2">
-            {actions}
+        {actions && actions.length > 0 && (
+          <div className={ACTIONS_CLASS}>
+            {actions.map((widthClass, i) => (
+              <Skeleton
+                key={i}
+                className={cn(
+                  actionSize === 'sm' ? 'h-11 md:h-8' : 'h-11 md:h-9',
+                  widthClass,
+                )}
+              />
+            ))}
           </div>
         )}
       </div>
diff --git a/components/ui/data-table-skeleton.tsx b/components/ui/data-table-skeleton.tsx
new file mode 100644
index 00000000..fdbaba58
--- /dev/null
+++ b/components/ui/data-table-skeleton.tsx
@@ -0,0 +1,257 @@
+import {
+  DATA_TABLE_DESKTOP_CLASS,
+  DATA_TABLE_MOBILE_CLASS,
+  DATA_TABLE_SHELL_CLASS,
+  DATA_TABLE_STACK_CLASS,
+} from '@/lib/data-table';
+import { cn } from '@/lib/utils';
+
+import { Card } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+
+type DataTableSkeletonShape = 'text' | 'badge' | 'action' | 'checkbox';
+type DataTableSkeletonMobileRole =
+  | 'leading'
+  | 'primary'
+  | 'trailing'
+  | 'line'
+  | 'lineTrailing'
+  | 'hidden';
+
+export interface DataTableSkeletonColumn {
+  head: string;
+  cell?: string;
+  subCell?: string;
+  shape?: DataTableSkeletonShape;
+  headClassName?: string;
+  cellClassName?: string;
+  mobile?: DataTableSkeletonMobileRole;
+}
+
+type DataTableSkeletonGap = 'gap-0' | 'gap-1' | 'gap-2' | 'gap-3';
+
+interface DataTableSkeletonProps {
+  columns: DataTableSkeletonColumn[];
+  rows?: number;
+  mobileRows?: number;
+  hasReorderHandle?: boolean;
+  // Vertical gap between stacked lines inside a mobile card — match the real table's mobile card.
+  mobileGap?: DataTableSkeletonGap;
+  // Gap between the leading column/handle and the card body, when either is present.
+  mobileRowGap?: DataTableSkeletonGap;
+}
+
+function shapeSkeleton(
+  shape: DataTableSkeletonShape | undefined,
+  widthClass: string,
+  { mobile = false }: { mobile?: boolean } = {},
+) {
+  const resolved: DataTableSkeletonShape = shape ?? 'text';
+  switch (resolved) {
+    case 'checkbox':
+      return <Skeleton className="size-4 shrink-0 rounded-sm" />;
+    case 'badge':
+      return <Skeleton className={cn('h-5.5 rounded-md', widthClass)} />;
+    case 'action':
+      return (
+        <Skeleton
+          className={cn(mobile ? 'h-11' : 'h-8', 'rounded-md', widthClass)}
+        />
+      );
+    case 'text':
+      return <Skeleton className={cn('h-4', widthClass)} />;
+    default: {
+      const exhaustiveCheck: never = resolved;
+      return exhaustiveCheck;
+    }
+  }
+}
+
+// Resolves each column's mobile role: explicit wins; otherwise the first
+// column defaults to `primary` and the first `badge` column to `trailing`.
+function resolveMobileRoles(
+  columns: DataTableSkeletonColumn[],
+): DataTableSkeletonMobileRole[] {
+  let trailingAssigned = false;
+  return columns.map((column, index) => {
+    if (column.mobile) {
+      if (column.mobile === 'trailing') trailingAssigned = true;
+      return column.mobile;
+    }
+    if (index === 0) return 'primary';
+    if (column.shape === 'badge' && !trailingAssigned) {
+      trailingAssigned = true;
+      return 'trailing';
+    }
+    return 'line';
+  });
+}
+
+function DataTableSkeletonMobileRow({
+  columns,
+  roles,
+  hasReorderHandle,
+  mobileGap,
+  mobileRowGap,
+}: {
+  columns: DataTableSkeletonColumn[];
+  roles: DataTableSkeletonMobileRole[];
+  hasReorderHandle: boolean;
+  mobileGap: DataTableSkeletonGap;
+  mobileRowGap: DataTableSkeletonGap;
+}) {
+  const leading = columns.filter((_, i) => roles[i] === 'leading');
+  const primaryColumn = columns.find((_, i) => roles[i] === 'primary');
+  const trailingColumn = columns.find((_, i) => roles[i] === 'trailing');
+  const lineItems: {
+    main: DataTableSkeletonColumn;
+    trailing?: DataTableSkeletonColumn;
+  }[] = [];
+  columns.forEach((column, i) => {
+    if (roles[i] === 'line') lineItems.push({ main: column });
+    else if (roles[i] === 'lineTrailing') {
+      const last = lineItems.at(-1);
+      if (last) last.trailing = column;
+      else lineItems.push({ main: column });
+    }
+  });
+
+  const body = (
+    <div className={cn('flex min-w-0 flex-1 flex-col', mobileGap)}>
+      {(primaryColumn || trailingColumn) && (
+        <div className="flex items-center justify-between gap-2">
+          {primaryColumn ? (
+            <div className="flex min-w-0 flex-1 flex-col gap-1">
+              {shapeSkeleton(
+                primaryColumn.shape,
+                primaryColumn.cell ?? primaryColumn.head,
+              )}
+              {primaryColumn.subCell && (
+                <Skeleton className={cn('h-3', primaryColumn.subCell)} />
+              )}
+            </div>
+          ) : (
+            <div />
+          )}
+          {trailingColumn &&
+            shapeSkeleton(
+              trailingColumn.shape,
+              trailingColumn.cell ?? trailingColumn.head,
+              { mobile: true },
+            )}
+        </div>
+      )}
+      {lineItems.map(({ main, trailing }, i) =>
+        trailing ? (
+          <div key={i} className="flex items-center justify-between gap-2">
+            {shapeSkeleton(main.shape, main.cell ?? main.head)}
+            {shapeSkeleton(trailing.shape, trailing.cell ?? trailing.head, {
+              mobile: true,
+            })}
+          </div>
+        ) : (
+          <div key={i}>{shapeSkeleton(main.shape, main.cell ?? main.head)}</div>
+        ),
+      )}
+    </div>
+  );
+
+  if (!hasReorderHandle && leading.length === 0)
+    return <div className={cn('flex flex-col p-4', mobileGap)}>{body}</div>;
+
+  return (
+    <div className={cn('flex items-start p-4', mobileRowGap)}>
+      {hasReorderHandle && (
+        <Skeleton className="ml-2 size-11 shrink-0 rounded-md" />
+      )}
+      {leading.map((column, i) => (
+        <div key={i} className="mt-0.5 shrink-0">
+          {shapeSkeleton(column.shape, column.cell ?? column.head)}
+        </div>
+      ))}
+      {body}
+    </div>
+  );
+}
+
+export function DataTableSkeleton({
+  columns,
+  rows = 5,
+  mobileRows = 3,
+  hasReorderHandle = false,
+  mobileGap = 'gap-2',
+  mobileRowGap = 'gap-2',
+}: DataTableSkeletonProps) {
+  const mobileRoles = resolveMobileRoles(columns);
+
+  return (
+    <div className={DATA_TABLE_STACK_CLASS}>
+      <Card className={DATA_TABLE_SHELL_CLASS}>
+        <div className={DATA_TABLE_DESKTOP_CLASS}>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {hasReorderHandle && (
+                  <TableHead className="w-8 px-2">
+                    <span className="sr-only">Reorder</span>
+                  </TableHead>
+                )}
+                {columns.map((column, i) => (
+                  <TableHead key={i} className={column.headClassName}>
+                    <Skeleton className={cn('h-4', column.head)} />
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: rows }).map((_, rowIndex) => (
+                <TableRow key={rowIndex}>
+                  {hasReorderHandle && (
+                    <TableCell className="px-2">
+                      <Skeleton className="size-8 rounded-md" />
+                    </TableCell>
+                  )}
+                  {columns.map((column, i) => (
+                    <TableCell key={i} className={column.cellClassName}>
+                      {column.subCell ? (
+                        <div className="flex flex-col gap-1">
+                          <Skeleton
+                            className={cn('h-4', column.cell ?? column.head)}
+                          />
+                          <Skeleton className={cn('h-3', column.subCell)} />
+                        </div>
+                      ) : (
+                        shapeSkeleton(column.shape, column.cell ?? column.head)
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        <div className={DATA_TABLE_MOBILE_CLASS}>
+          {Array.from({ length: mobileRows }).map((_, rowIndex) => (
+            <DataTableSkeletonMobileRow
+              key={rowIndex}
+              columns={columns}
+              roles={mobileRoles}
+              hasReorderHandle={hasReorderHandle}
+              mobileGap={mobileGap}
+              mobileRowGap={mobileRowGap}
+            />
+          ))}
+        </div>
+      </Card>
+    </div>
+  );
+}
diff --git a/components/ui/data-table-toolbar.tsx b/components/ui/data-table-toolbar.tsx
index f1a8cc78..cad1881d 100644
--- a/components/ui/data-table-toolbar.tsx
+++ b/components/ui/data-table-toolbar.tsx
@@ -3,17 +3,18 @@ import type { ReactNode } from 'react';
 import { cn } from '@/lib/utils';
 
 import { Label } from '@/components/ui/label';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const WRAPPER_CLASS =
+  'flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end';
+const FIELD_CLASS = 'flex w-full flex-col gap-1.5 sm:w-48';
 
 interface DataTableToolbarProps {
   children: ReactNode;
 }
 
 export function DataTableToolbar({ children }: DataTableToolbarProps) {
-  return (
-    <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-      {children}
-    </div>
-  );
+  return <div className={WRAPPER_CLASS}>{children}</div>;
 }
 
 interface DataTableToolbarFieldProps {
@@ -30,9 +31,34 @@ export function DataTableToolbarField({
   children,
 }: DataTableToolbarFieldProps) {
   return (
-    <div className={cn('flex w-full flex-col gap-1.5 sm:w-48', className)}>
+    <div className={cn(FIELD_CLASS, className)}>
       <Label htmlFor={htmlFor}>{label}</Label>
       {children}
     </div>
   );
 }
+
+interface DataTableToolbarSkeletonProps {
+  // Per-field width utility, e.g. 'sm:w-48' — mirrors DataTableToolbarField's className.
+  fields: string[];
+  hasTrailingCount?: boolean;
+}
+
+export function DataTableToolbarSkeleton({
+  fields,
+  hasTrailingCount = false,
+}: DataTableToolbarSkeletonProps) {
+  return (
+    <div className={WRAPPER_CLASS}>
+      {fields.map((widthClass, i) => (
+        <div key={i} className={cn(FIELD_CLASS, widthClass)}>
+          <Skeleton className="h-3.5 w-16" />
+          <Skeleton className="h-11 w-full md:h-9" />
+        </div>
+      ))}
+      {hasTrailingCount && (
+        <Skeleton className="h-5 w-48 sm:ml-auto sm:self-end" />
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/data-table.tsx b/components/ui/data-table.tsx
index c5be5666..582b8bc6 100644
--- a/components/ui/data-table.tsx
+++ b/components/ui/data-table.tsx
@@ -6,6 +6,10 @@ import { useCallback, useMemo } from 'react';
 import { parseAsStringEnum, parseAsStringLiteral, useQueryStates } from 'nuqs';
 
 import {
+  DATA_TABLE_DESKTOP_CLASS,
+  DATA_TABLE_MOBILE_CLASS,
+  DATA_TABLE_SHELL_CLASS,
+  DATA_TABLE_STACK_CLASS,
   type DataTableColumn,
   type SortDirection,
   type SortState,
@@ -289,15 +293,15 @@ export function DataTable<T>({
   const columnCount = columns.length + (showReorderColumn ? 1 : 0);
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className={DATA_TABLE_STACK_CLASS}>
       {showReorderColumn && !sortedByOrder && (
         <p className="text-muted-foreground text-sm">{reorder.sortHint}</p>
       )}
       {/* overflow-hidden clips the header hover highlight to the card's rounded corners */}
-      <Card className="gap-0 overflow-hidden p-0">
+      <Card className={DATA_TABLE_SHELL_CLASS}>
         {/* DndContext must wrap this div, not nest inside <tbody> (a11y live region renders as a sibling). */}
         <ReorderSection
-          className="hidden md:block"
+          className={DATA_TABLE_DESKTOP_CLASS}
           reorderActive={showReorderColumn}
           reorder={reorder}
           rows={sortedRows}
@@ -380,7 +384,7 @@ export function DataTable<T>({
 
         {/* Mobile stacked cards — sort order from sortedRows reflects active sort */}
         <ReorderSection
-          className="flex flex-col divide-y md:hidden"
+          className={DATA_TABLE_MOBILE_CLASS}
           reorderActive={showReorderColumn}
           reorder={reorder}
           rows={sortedRows}
diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index 40ed2559..395076bd 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -65,6 +65,8 @@ Any change to a brand/status token must keep ≥4.5:1 contrast against its paire
 - **Buttons:** primary = `primary`; secondary/cancel = `secondary` or `variant="outline"`; destructive = `variant="destructive"`. One primary action per view.
 - **Forms:** use the shadcn `Form`/`FieldGroup` primitives with `FormLabel`; every input has an associated label; surface validation with `data-invalid` / inline `FormMessage`, not ad-hoc text. (Form wiring rules: `ENGINEERING.md` §4.)
 - **State surfaces:** all three required (`ENGINEERING.md` §4) — `<Suspense>` + skeleton for loading, `error.tsx`/inline error for failure, a designed empty state (icon + one line + primary action) for zero items. Secondary cards on a detail page may opt into `SectionCardEmpty`'s compact variant (one muted line, no icon/action) instead — the roomy form stays the default for dashboards.
+- **Skeleton adjacency.** A skeleton lives beside the component it mirrors and shares that component's layout constants (`SectionCard`, `PageHeader`, `PositionCard`, `DataTable`) — never hand-drawn markup that happens to look similar. A `'use client'` component's skeleton lives in a sibling **server** module, and both sides import their shared class constants from the feature's `lib/` module — a server `loading.tsx` importing a client module would pull its bundle into that route and still couldn't read its constants, since Next turns every export of a client module into a client reference.
+- **Skeleton row counts:** tables default to **5 rows desktop / 3 mobile**; flat card lists to **3 cards**; grouped card lists to **2 groups (2 cards, then 1)**; `SectionCardSkeleton` keeps its own 3-row default. Override only where a surface is known to be shorter.
 - **Focus & overlays:** never `outline-none` without a visible replacement; rely on Radix focus trapping in dialogs/sheets — don't break it with custom wrappers.
 - **Section sub-nav.** A page section opts into the sidebar's in-page nav by giving its outermost `<section>` an `id` plus `data-section-nav="<Label>"` (matching its visible heading) and `scroll-mt-6`. The sidebar discovers these from the DOM under the active nav item — nothing to register elsewhere, and a group that never renders (e.g. an empty position status) contributes nothing. Fewer than two opted-in sections on a page renders no sub-nav. This is secondary navigation only — never the sole way to reach a section; every opted-in section must also be reachable by scrolling. The highlighted item is the last section whose top has crossed the middle of the scroll area. At the top of the page it is the first section, at the bottom the last, and after a click the clicked section until the user scrolls again.
 
diff --git a/docs/WORKFLOWS.md b/docs/WORKFLOWS.md
index d53c7533..d82d17e5 100644
--- a/docs/WORKFLOWS.md
+++ b/docs/WORKFLOWS.md
@@ -229,7 +229,7 @@ Any signed-in user. Every user is an applicant; manager and admin capabilities a
 ### AP-2 Answer profile questions
 
 - **Trigger** — the Profile item in the user menu, the completeness banner, or the apply page's **Go to Profile** button.
-- **Happy path** — `getProfileData(user.id)` returns every non-deleted global question with the caller's answer. Each field autosaves on blur through `updateGlobalAnswer`, which validates format and option membership and upserts scoped to the caller. Answers are shared across every application: "Your answers are shared across every application."
+- **Happy path** — `getProfileData(user.id)` returns every non-deleted global question with the caller's answer. Each field autosaves on blur through `updateGlobalAnswer`, which validates format and option membership and upserts scoped to the caller. A `phone_number`-formatted answer is additionally normalized to digits with an optional leading `+` before it's stored. Answers are shared across every application: "Your answers are shared across every application."
 - **Failure / edge**
   - Format mismatch on a `short_answer` with a `format` → the format's message from `SHORT_ANSWER_FORMAT_ERROR_MESSAGES`, inline; the autosave is skipped so the error isn't also toasted.
   - Option not in the question's list, too many values, or over the length limit → the message from `getAnswerValueError`.
@@ -277,7 +277,7 @@ Any signed-in user. Every user is an applicant; manager and admin capabilities a
 ### AP-6 Answer application questions
 
 - **Trigger** — the stepper on `/positions/[id]/apply` for a `draft` or `withdrawn` application.
-- **Happy path** — step 1 holds the global (profile) questions, step 2 the position questions; the stepper collapses to one step when the position has no questions of its own. Each field autosaves on blur via `createOrUpdateApplicationAnswer`, which re-reads the question's label and shape from the database (never from the client) and upserts the answer with that label snapshotted onto the row.
+- **Happy path** — step 1 holds the global (profile) questions, step 2 the position questions; the stepper collapses to one step when the position has no questions of its own. Each field autosaves on blur via `createOrUpdateApplicationAnswer`, which re-reads the question's label and shape from the database (never from the client) and upserts the answer with that label snapshotted onto the row. A `phone_number`-formatted answer is normalized to digits with an optional leading `+` the same way as [AP-2](#ap-2-answer-profile-questions).
 - **Failure / edge**
   - Format mismatch, bad option, too many values, or over-length → the specific message inline and as a toast; the value is not persisted.
   - Application no longer applicant-editable → **"This application has already been submitted. Withdraw it to make changes."**
@@ -345,7 +345,7 @@ Any signed-in user. Every user is an applicant; manager and admin capabilities a
 ### AP-11 View one of your applications
 
 - **Trigger** — a position title link on `/applications`, or the redirect after submitting ([AP-9](#ap-9-submit-an-application)).
-- **Happy path** — `getMyApplication(id, user.id)` is scoped to the caller with the same visibility as the list, and returns the public status ([XC-8](#xc-8-applicant-facing-status-grouping)). The header shows the position title with the status badge directly beside it, the status sentence underneath, and the primary/row actions (Continue, Edit & resubmit, Withdraw, Delete draft — whichever applies) right-aligned on that same header row; below it, "Applied <date>" (or "Draft · last saved <date>", from `lastSavedAt` — a draft's own `updatedAt`, never exposed for a submitted application) and a link to the position, then both answer groups — "Your Profile Answers" and "Your Answers for This Position" — full width. The position-answers group lists **every** live position question, in the position's own question order, whether it was answered or not: an answered row renders from its snapshotted `questionLabel`/`value`/`type`, so a retyped or relabeled question still shows the original label and value; an unanswered one shows the current question's label with "No answer" in the value slot. An answer to a since-deleted question still renders, appended after the live questions. The header's primary action follows the same rule as the list ([AP-10](#ap-10-track-your-applications)): on a draft or withdrawn application whose position is no longer accepting, Continue/Edit & resubmit is disabled with the reason in a tooltip on hover/focus, and Delete/Withdraw still render alongside it.
+- **Happy path** — `getMyApplication(id, user.id)` is scoped to the caller with the same visibility as the list, and returns the public status ([XC-8](#xc-8-applicant-facing-status-grouping)). The header shows the position title with the status badge directly beside it, the status sentence underneath, and the primary/row actions (Continue, Edit & resubmit, Withdraw, Delete draft — whichever applies) right-aligned on that same header row; below it, "Applied <date>" (or "Draft · last saved <date>", from `lastSavedAt` — a draft's own `updatedAt`, never exposed for a submitted application) and a link to the position, then both answer groups — "Your Profile Answers" and "Your Answers for This Position" — full width. The position-answers group lists **every** live position question, in the position's own question order, whether it was answered or not: an answered row renders from its snapshotted `questionLabel`/`value`/`type`, so a retyped or relabeled question still shows the original label and value; an unanswered one shows the current question's label with "No answer" in the value slot. An answer to a since-deleted question still renders, appended after the live questions. The header's primary action follows the same rule as the list ([AP-10](#ap-10-track-your-applications)): on a draft or withdrawn application whose position is no longer accepting, Continue/Edit & resubmit is disabled with the reason in a tooltip on hover/focus, and Delete/Withdraw still render alongside it. A `short_answer` with `format: 'phone_number'` renders 10-digit and 11-digit-leading-`1` values masked as `(555) 123-4567`; anything else — international numbers, legacy shapes that don't fit the mask — renders exactly as stored.
   - **Deadline (drafts and withdrawn applications only)** — a fourth segment after the **View position** link, `DeadlineIndicator` (`variant="full"`, `emphasizeUrgency`) tiered against a server-resolved `now` — same helper and thresholds as [AP-10](#ap-10-track-your-applications). The gate is separate from the "Draft · last saved" vs "Applied" prefix above it, so a withdrawn application keeps its "Applied <date>" prefix while still gaining the deadline segment. A submitted or terminal application's meta line is unchanged; `getMyApplication`'s select already carries the fields needed, so no data-layer change.
 - **Failure / edge**
   - Not the caller's, soft-deleted, or on an unpublished position → `notFound()`, so a bookmarked URL cannot outlive its list row.
@@ -523,7 +523,7 @@ A user who manages at least one non-deleted position. Manager status is **derive
 ### PM-9 Open an application for review
 
 - **Trigger** — a row on `/manage/applications` (`/manage/applications/[id]`).
-- **Happy path** — `getApplicationForReview(id, user)` uses the `listable` scope — withdrawn rows are kept, drafts are not — and `getApplicationStatusHistory(id, user)` fetches alongside it. The page shows a "Back to Applications" link, then a header row with the applicant's snapshotted name and status badge together, their email underneath, and a header action appropriate to status, right-aligned on that same row — a split button for the four unresolved statuses (its caret dropdown ends in **See more**, which opens the status dialog), or for terminal decisions and non-reviewable statuses alike, the same explanatory note plus a standalone caret whose dropdown menu also ends in **See more** — there is no separate standalone `⋯` for any status, since that would be a second control shape doing the same job as the caret; below it, a linked position title and the applied date, then an "Other Applications" section (`getApplicantOtherApplications`) followed by the profile and position answer groups, then an "Email History" section (`getApplicationEmailHistory`) last, each full width. The "Other Applications" section lists this applicant's other applications platform-wide — including positions the viewer doesn't manage — with precise status, applied date, and the position title linked to `/positions/[id]`; a row links to `/manage/applications/[id]` only when the viewer can actually open it (admin, or a manager of that position) — otherwise the row shows no link at all. The position-answers group lists **every** live position question, in the position's own question order, whether it was answered or not: an answered row renders from its snapshotted `questionLabel`/`value`/`type`, so a question retyped or relabeled after submission still shows the original label and value; an unanswered one shows the current question's label with "No answer" in the value slot. An answer to a since-deleted question still renders, appended after the live questions. The "Email History" section lists every `EmailLog` row for this application — subject, a status badge, and a meta line of `{Template label} · {timestamp} · {status description}` (`getEmailLogOccurredAt`) — through the same `listable` scope as the rest of the page, applied through the `application` relation; OTP rows never appear, since they're written with no `applicationId` and so can never match the equality filter (no template filter exists to be forgotten or bypassed). The template label is what tells `application_accepted` and `application_rejected` apart here, since both now render an identical subject ([XC-9](#xc-9-applicant-email)). `sent` is shown distinctly from `delivered` — a sentence under the timestamp states that delivery isn't confirmed yet, since a provider hand-off is not proof of receipt. See `PERMISSIONS.md` → "Cross-scope disclosure" for the authorization rule. A manager working this queue may separately receive a daily digest of new arrivals or a weekly reminder of everything still unresolved across their positions ([XC-10](#xc-10-manager-digests)) — neither email is tied to any one application, so neither appears in this page's Email History section.
+- **Happy path** — `getApplicationForReview(id, user)` uses the `listable` scope — withdrawn rows are kept, drafts are not — and `getApplicationStatusHistory(id, user)` fetches alongside it. The page shows a "Back to Applications" link, then a header row with the applicant's snapshotted name and status badge together, their email underneath, and a header action appropriate to status, right-aligned on that same row — a split button for the four unresolved statuses (its caret dropdown ends in **See more**, which opens the status dialog), or for terminal decisions and non-reviewable statuses alike, the same explanatory note plus a standalone caret whose dropdown menu also ends in **See more** — there is no separate standalone `⋯` for any status, since that would be a second control shape doing the same job as the caret; below it, a linked position title and the applied date, then an "Other Applications" section (`getApplicantOtherApplications`) followed by the profile and position answer groups, then an "Email History" section (`getApplicationEmailHistory`) last, each full width. The "Other Applications" section lists this applicant's other applications platform-wide — including positions the viewer doesn't manage — with precise status, applied date, and the position title linked to `/positions/[id]`; a row links to `/manage/applications/[id]` only when the viewer can actually open it (admin, or a manager of that position) — otherwise the row shows no link at all. The position-answers group lists **every** live position question, in the position's own question order, whether it was answered or not: an answered row renders from its snapshotted `questionLabel`/`value`/`type`, so a question retyped or relabeled after submission still shows the original label and value; an unanswered one shows the current question's label with "No answer" in the value slot. An answer to a since-deleted question still renders, appended after the live questions. A `short_answer` with `format: 'phone_number'` renders 10-digit and 11-digit-leading-`1` values masked as `(555) 123-4567`, same as [AP-11](#ap-11-view-one-of-your-applications); anything else renders exactly as stored. The "Email History" section lists every `EmailLog` row for this application — subject, a status badge, and a meta line of `{Template label} · {timestamp} · {status description}` (`getEmailLogOccurredAt`) — through the same `listable` scope as the rest of the page, applied through the `application` relation; OTP rows never appear, since they're written with no `applicationId` and so can never match the equality filter (no template filter exists to be forgotten or bypassed). The template label is what tells `application_accepted` and `application_rejected` apart here, since both now render an identical subject ([XC-9](#xc-9-applicant-email)). `sent` is shown distinctly from `delivered` — a sentence under the timestamp states that delivery isn't confirmed yet, since a provider hand-off is not proof of receipt. See `PERMISSIONS.md` → "Cross-scope disclosure" for the authorization rule. A manager working this queue may separately receive a daily digest of new arrivals or a weekly reminder of everything still unresolved across their positions ([XC-10](#xc-10-manager-digests)) — neither email is tied to any one application, so neither appears in this page's Email History section.
 - **Failure / edge**
   - Outside the caller's scope, a draft, or missing → `notFound()`; unauthorized and missing are indistinguishable.
   - The applicant renamed themselves since submitting → the heading reads "<snapshotted name> (<current name>)".
diff --git a/lib/constants.ts b/lib/constants.ts
index 09e17daa..428e8ddc 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -162,6 +162,44 @@ export function matchesShortAnswerFormat(
   return SHORT_ANSWER_FORMAT_PATTERNS[format].test(value.trim());
 }
 
+// Digits + optional leading +; 00 promotes to + (validator treats them as the same prefix).
+export function normalizePhoneNumber(value: string): string {
+  const trimmed = value.trim();
+  if (!matchesShortAnswerFormat(trimmed, 'phone_number')) return trimmed;
+
+  const hasPlus = trimmed.startsWith('+');
+  const digits = trimmed.replace(/\D/g, '');
+  if (hasPlus) return `+${digits}`;
+  if (digits.startsWith('00')) return `+${digits.slice(2)}`;
+  return digits;
+}
+
+// Digit-strips first so legacy, unnormalized rows also mask. Anything else renders unchanged.
+export function formatPhoneNumber(value: string): string {
+  const digits = value.replace(/\D/g, '');
+  if (digits.length === 10)
+    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+  if (digits.length === 11 && digits.startsWith('1'))
+    return `(${digits.slice(1, 4)}) ${digits.slice(4, 7)}-${digits.slice(7)}`;
+  return value;
+}
+
+// Trims every format; phone_number additionally normalizes to digits + optional leading +.
+export function normalizeShortAnswerValue(
+  value: string,
+  format: ShortAnswerFormatValue,
+): string {
+  return format === 'phone_number' ? normalizePhoneNumber(value) : value.trim();
+}
+
+// Identity for every format except phone_number, which masks US-shaped values.
+export function formatShortAnswerValue(
+  value: string,
+  format: ShortAnswerFormatValue | null,
+): string {
+  return format === 'phone_number' ? formatPhoneNumber(value) : value;
+}
+
 export const baseQuestionSchema = z.object({
   label: z.string().min(1, 'Label is required'),
   type: z.enum(QUESTION_TYPE_VALUES),
diff --git a/lib/data-table.ts b/lib/data-table.ts
index a62a60fe..33c80689 100644
--- a/lib/data-table.ts
+++ b/lib/data-table.ts
@@ -1,5 +1,12 @@
 import type { ReactNode } from 'react';
 
+export const DATA_TABLE_STACK_CLASS = 'flex flex-col gap-2';
+export const DATA_TABLE_SHELL_CLASS = 'gap-0 overflow-hidden p-0';
+export const DATA_TABLE_DESKTOP_CLASS = 'hidden md:block';
+export const DATA_TABLE_MOBILE_CLASS = 'flex flex-col divide-y md:hidden';
+// Wraps a table plus its adjoining pagination/filter-summary line.
+export const DATA_TABLE_RESULTS_CLASS = 'flex flex-col gap-3';
+
 export type SortDirection = 'asc' | 'desc';
 
 export interface SortState {
diff --git a/lib/types.ts b/lib/types.ts
index aecb391a..9a33e20d 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -342,6 +342,7 @@ export type ApplicationReviewAnswer = {
   questionLabel: string;
   value: string[];
   type: QuestionType;
+  format: ShortAnswerFormat | null;
   isGlobal: boolean;
 };
 
diff --git a/package-lock.json b/package-lock.json
index a6d2683b..2bf85761 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "aplio",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aplio",
-      "version": "1.14.0",
+      "version": "1.14.1",
       "dependencies": {
         "@better-auth/prisma-adapter": "^1.6.29",
         "@dnd-kit/core": "^6.3.1",
diff --git a/package.json b/package.json
index 482c1a6c..a64cf465 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aplio",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "private": true,
   "engines": {
     "node": "24.x",
diff --git a/prisma/actions/applications.ts b/prisma/actions/applications.ts
index 8d1a3f14..ee36776c 100644
--- a/prisma/actions/applications.ts
+++ b/prisma/actions/applications.ts
@@ -34,6 +34,7 @@ import {
   isAllowedApplicationStatusTransition,
   isApplicantEditableApplicationStatus,
   matchesShortAnswerFormat,
+  normalizeShortAnswerValue,
 } from '@/lib/constants';
 import {
   type DecisionEmailRecipient,
@@ -273,10 +274,11 @@ export async function createOrUpdateApplicationAnswer(params: {
   const answerError = getAnswerValueError(question, value);
   if (answerError) return { error: answerError };
 
-  // matchesShortAnswerFormat trims internally, so save the trimmed value.
+  // Trims every short-answer format; phone_number additionally normalizes to digits.
+  const format = question.format;
   const persistedValue =
-    question.type === 'short_answer' && question.format
-      ? value.map((v) => v.trim())
+    question.type === 'short_answer' && format
+      ? value.map((v) => normalizeShortAnswerValue(v, format))
       : value;
 
   if (isGlobal) {
diff --git a/prisma/actions/profile.ts b/prisma/actions/profile.ts
index 79e6cb88..50f0e24e 100644
--- a/prisma/actions/profile.ts
+++ b/prisma/actions/profile.ts
@@ -14,6 +14,7 @@ import {
   getAnswerValueError,
   matchesShortAnswerFormat,
   nameSchema,
+  normalizeShortAnswerValue,
 } from '@/lib/constants';
 import { prisma } from '@/lib/prisma';
 import { type ErrorType, type ResponseType } from '@/lib/utils';
@@ -72,10 +73,11 @@ export async function updateGlobalAnswer(
   const answerError = getAnswerValueError(question, parsed.data.value);
   if (answerError) return { error: answerError };
 
-  // matchesShortAnswerFormat trims internally, so save the trimmed value.
+  // Trims every short-answer format; phone_number additionally normalizes to digits.
+  const format = question.format;
   const persistedValue =
-    question.type === 'short_answer' && question.format
-      ? parsed.data.value.map((v) => v.trim())
+    question.type === 'short_answer' && format
+      ? parsed.data.value.map((v) => normalizeShortAnswerValue(v, format))
       : parsed.data.value;
 
   const result = await prisma.globalAnswer.upsert({
diff --git a/prisma/data/applications.ts b/prisma/data/applications.ts
index 12434dcb..638f0851 100644
--- a/prisma/data/applications.ts
+++ b/prisma/data/applications.ts
@@ -107,6 +107,7 @@ const applicationAnswersSelect = {
       questionLabel: true,
       questionType: true,
       value: true,
+      globalQuestion: { select: { format: true } },
     },
   },
   positionAnswers: {
@@ -118,6 +119,7 @@ const applicationAnswersSelect = {
       questionLabel: true,
       questionType: true,
       value: true,
+      positionQuestion: { select: { format: true } },
     },
   },
 } as const;
@@ -127,7 +129,7 @@ const positionQuestionsSelect = {
   questions: {
     where: { deletedAt: null },
     orderBy: { order: 'asc' },
-    select: { id: true, label: true, type: true },
+    select: { id: true, label: true, type: true, format: true },
   },
 } as const;
 
@@ -162,6 +164,7 @@ function normalizeApplicationAnswers(
           questionLabel: answer.questionLabel,
           value: answer.value,
           type: answer.questionType,
+          format: question.format,
           isGlobal: false,
         };
       return {
@@ -170,6 +173,7 @@ function normalizeApplicationAnswers(
         questionLabel: question.label,
         value: [],
         type: question.type,
+        format: question.format,
         isGlobal: false,
       };
     },
@@ -183,6 +187,7 @@ function normalizeApplicationAnswers(
       questionLabel: a.questionLabel,
       value: a.value,
       type: a.questionType,
+      format: a.positionQuestion.format,
       isGlobal: false,
     }));
 
@@ -193,6 +198,7 @@ function normalizeApplicationAnswers(
       questionLabel: a.questionLabel,
       value: a.value,
       type: a.questionType,
+      format: a.globalQuestion.format,
       isGlobal: true,
     })),
     positionAnswers: [...liveQuestionAnswers, ...orphanedAnswers],
diff --git a/tests/db/phone-number-normalization.test.ts b/tests/db/phone-number-normalization.test.ts
new file mode 100644
index 00000000..5d857975
--- /dev/null
+++ b/tests/db/phone-number-normalization.test.ts
@@ -0,0 +1,82 @@
+import {
+  cleanupFixtures,
+  createTestApplication,
+  createTestGlobalQuestion,
+  createTestPosition,
+  createTestUser,
+} from '@/tests/helpers/fixtures';
+import { actAs } from '@/tests/stubs/auth-server';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+
+import { createOrUpdateApplicationAnswer } from '@/prisma/actions/applications';
+import { updateGlobalAnswer } from '@/prisma/actions/profile';
+import type { Position, User } from '@/prisma/client';
+
+import { prisma } from '@/lib/prisma';
+import { isError } from '@/lib/utils';
+
+let admin: User;
+let openPosition: Position;
+
+beforeAll(async () => {
+  admin = await createTestUser({ isAdmin: true });
+  openPosition = await createTestPosition(admin);
+});
+
+afterAll(async () => {
+  await cleanupFixtures();
+});
+
+describe('phone_number normalization on write', () => {
+  it('updateGlobalAnswer stores a digits-only value', async () => {
+    const question = await createTestGlobalQuestion(admin, {
+      format: 'phone_number',
+    });
+    const applicant = await createTestUser();
+
+    actAs(applicant);
+    const result = await updateGlobalAnswer(question.id, ['(617) 555-0100']);
+    expect(isError(result)).toBe(false);
+
+    const answer = await prisma.globalAnswer.findUniqueOrThrow({
+      where: {
+        userId_globalQuestionId: {
+          userId: applicant.id,
+          globalQuestionId: question.id,
+        },
+      },
+      select: { value: true },
+    });
+    expect(answer.value).toEqual(['6175550100']);
+  });
+
+  it('createOrUpdateApplicationAnswer stores a digits-only value', async () => {
+    const question = await createTestGlobalQuestion(admin, {
+      format: 'phone_number',
+      required: false,
+    });
+    const applicant = await createTestUser();
+    const draft = await createTestApplication(applicant, openPosition, {
+      status: 'draft',
+    });
+
+    actAs(applicant);
+    const result = await createOrUpdateApplicationAnswer({
+      applicationId: draft.id,
+      questionId: question.id,
+      value: ['(617) 555-0100'],
+    });
+    expect(isError(result)).toBe(false);
+
+    const answer = await prisma.globalApplicationAnswer.findUniqueOrThrow({
+      where: {
+        applicationId_globalQuestionId: {
+          applicationId: draft.id,
+          globalQuestionId: question.id,
+        },
+      },
+      select: { value: true },
+    });
+    expect(answer.value).toEqual(['6175550100']);
+  });
+});
diff --git a/tests/unit/constants.test.ts b/tests/unit/constants.test.ts
index f1637197..0a97acd7 100644
--- a/tests/unit/constants.test.ts
+++ b/tests/unit/constants.test.ts
@@ -26,11 +26,15 @@ import {
   REVIEWER_APPLICATION_STATUSES,
   TERMINAL_DECISION_STATUSES,
   UNRESOLVED_APPLICATION_STATUSES,
+  formatPhoneNumber,
+  formatShortAnswerValue,
   getAnswerBlurError,
   getAnswerValueError,
   getStatusOptions,
   makePositionFormSchema,
   matchesShortAnswerFormat,
+  normalizePhoneNumber,
+  normalizeShortAnswerValue,
   positionDateOrderIssues,
   positionPastDateIssues,
   positionScheduleIssues,
@@ -277,6 +281,93 @@ describe('matchesShortAnswerFormat', () => {
   });
 });
 
+describe('normalizePhoneNumber / formatPhoneNumber', () => {
+  it('round-trips a bare 10-digit number', () => {
+    expect(normalizePhoneNumber('5551234567')).toBe('5551234567');
+    expect(formatPhoneNumber(normalizePhoneNumber('5551234567'))).toBe(
+      '(555) 123-4567',
+    );
+  });
+
+  it('round-trips a legacy punctuated 10-digit number', () => {
+    expect(normalizePhoneNumber('(555) 123-4567')).toBe('5551234567');
+    expect(formatPhoneNumber(normalizePhoneNumber('(555) 123-4567'))).toBe(
+      '(555) 123-4567',
+    );
+  });
+
+  it('round-trips an 11-digit number with a leading 1 and +', () => {
+    expect(normalizePhoneNumber('+1 555 123 4567')).toBe('+15551234567');
+    expect(formatPhoneNumber(normalizePhoneNumber('+1 555 123 4567'))).toBe(
+      '(555) 123-4567',
+    );
+  });
+
+  it('leaves an already-normalized value unchanged', () => {
+    expect(normalizePhoneNumber('+15551234567')).toBe('+15551234567');
+    expect(formatPhoneNumber('+15551234567')).toBe('(555) 123-4567');
+  });
+
+  it('round-trips a + international number by rendering unchanged', () => {
+    expect(normalizePhoneNumber('+44 20 7123 4567')).toBe('+442071234567');
+    expect(formatPhoneNumber(normalizePhoneNumber('+44 20 7123 4567'))).toBe(
+      '+442071234567',
+    );
+  });
+
+  it('round-trips a 00 international number, promoting the prefix to +', () => {
+    expect(normalizePhoneNumber('0044 20 7123 4567')).toBe('+442071234567');
+    expect(formatPhoneNumber(normalizePhoneNumber('0044 20 7123 4567'))).toBe(
+      '+442071234567',
+    );
+  });
+
+  it('round-trips a 7-digit local number by rendering unchanged', () => {
+    expect(normalizePhoneNumber('555-0100')).toBe('5550100');
+    expect(formatPhoneNumber(normalizePhoneNumber('555-0100'))).toBe('5550100');
+  });
+
+  it('round-trips a validator-passing value that fits no mask', () => {
+    expect(normalizePhoneNumber('12345678901234')).toBe('12345678901234');
+    expect(formatPhoneNumber(normalizePhoneNumber('12345678901234'))).toBe(
+      '12345678901234',
+    );
+  });
+
+  it('returns unparseable input unchanged from normalize', () => {
+    expect(normalizePhoneNumber('abc')).toBe('abc');
+  });
+});
+
+describe('normalizeShortAnswerValue / formatShortAnswerValue', () => {
+  it('normalizes a phone_number value', () => {
+    expect(normalizeShortAnswerValue('(617) 555-0100', 'phone_number')).toBe(
+      '6175550100',
+    );
+  });
+
+  it('formats a phone_number value', () => {
+    expect(formatShortAnswerValue('6175550100', 'phone_number')).toBe(
+      '(617) 555-0100',
+    );
+  });
+
+  it('trims but otherwise leaves email/url/zip_code unchanged on normalize', () => {
+    expect(normalizeShortAnswerValue('  a@b.com  ', 'email')).toBe('a@b.com');
+    expect(normalizeShortAnswerValue('  example.com  ', 'url')).toBe(
+      'example.com',
+    );
+    expect(normalizeShortAnswerValue('  02115  ', 'zip_code')).toBe('02115');
+  });
+
+  it('is the identity on format for email/url/zip_code and a null format', () => {
+    expect(formatShortAnswerValue('a@b.com', 'email')).toBe('a@b.com');
+    expect(formatShortAnswerValue('example.com', 'url')).toBe('example.com');
+    expect(formatShortAnswerValue('02115', 'zip_code')).toBe('02115');
+    expect(formatShortAnswerValue('6175550100', null)).toBe('6175550100');
+  });
+});
+
 describe('status-set invariants', () => {
   it('REVIEWER_APPLICATION_STATUSES excludes draft and withdrawn', () => {
     expect(REVIEWER_APPLICATION_STATUSES).not.toContain('draft');
diff --git a/tests/unit/loading-skeletons.test.ts b/tests/unit/loading-skeletons.test.ts
new file mode 100644
index 00000000..d3eff572
--- /dev/null
+++ b/tests/unit/loading-skeletons.test.ts
@@ -0,0 +1,69 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+// Bespoke header, corrected in place against a page that hand-rolls its own
+// header rather than PageHeader — see components/layouts/page-header.tsx.
+const BESPOKE_HEADER_EXCEPTIONS = [
+  join('app', '(main)', 'positions', '[id]', 'loading.tsx'),
+];
+// Owned by a follow-up ticket rewriting this page's tier — leave untouched.
+const OWNED_BY_OTHER_TICKET_EXCEPTIONS = [
+  join(
+    'app',
+    '(main)',
+    '(auth)',
+    'manage',
+    'positions',
+    '[id]',
+    'edit',
+    'loading.tsx',
+  ),
+];
+
+function findLoadingFiles(dir: string, root: string): string[] {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  const results: string[] = [];
+  for (const entry of entries) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...findLoadingFiles(fullPath, root));
+    } else if (entry.name === 'loading.tsx') {
+      results.push(fullPath.slice(root.length + 1));
+    }
+  }
+  return results;
+}
+
+const appDir = join(process.cwd(), 'app');
+const loadingFiles = findLoadingFiles(appDir, process.cwd());
+
+describe('loading.tsx skeletons', () => {
+  it('finds every route loading.tsx', () => {
+    // Guards the guard: a refactor that renames/moves app/ must not silently
+    // shrink this list to zero and pass everything by omission.
+    expect(loadingFiles.length).toBeGreaterThanOrEqual(14);
+  });
+
+  for (const file of loadingFiles) {
+    const source = readFileSync(join(process.cwd(), file), 'utf-8');
+    const isExempt =
+      BESPOKE_HEADER_EXCEPTIONS.includes(file) ||
+      OWNED_BY_OTHER_TICKET_EXCEPTIONS.includes(file);
+
+    it(`${file} provides the shell markup itself, not via shared skeletons`, () => {
+      expect(source).not.toMatch(/@\/components\/ui\/card/);
+      expect(source).not.toMatch(/@\/components\/ui\/table/);
+    });
+
+    it(`${file} never hand-draws with animate-pulse`, () => {
+      expect(source).not.toMatch(/animate-pulse/);
+    });
+
+    if (!isExempt) {
+      it(`${file} composes PageHeaderSkeleton`, () => {
+        expect(source).toMatch(/PageHeaderSkeleton/);
+      });
+    }
+  }
+});