diff --git a/apps/frontend/AGENTS.md b/apps/frontend/AGENTS.md
index 9cc2f5bc..56d05262 100644
--- a/apps/frontend/AGENTS.md
+++ b/apps/frontend/AGENTS.md
@@ -73,6 +73,21 @@ Import direction is one-way and must stay that way: `api.ts` ← `authClient.ts`
 - Tailwind v4 via `@tailwindcss/postcss` (`postcss.config.mjs`), `@import "tailwindcss"` in `globals.css`. Custom theme tokens in the `@theme` block (`--color-core-green`, `--color-primary-*`, fonts Roboto Slab / PT Sans, heading/body sizes).
 - Chakra UI v3 unstyled components (`Table.Root`, `Dialog`, `Field`, `Button`, `Input`, ...) under `ChakraProvider defaultSystem`. Emotion is a Chakra dep. Inline styles appear alongside Tailwind classes in layout components.
 
+## Shared UI
+
+Two families of component are **the** way to do their job — don't hand-roll a second one.
+
+**Tables — `components/DataTable.tsx`.** Every list view (expenses, reports, donors, donations) renders through it, so the green header row, column widths, empty state, row-click behaviour and loading skeleton stay identical. Columns are data: `{ key, header, width, align, cell, skeleton }`. Pass `selection` (see `reports/page.tsx`) for the leading checkbox column — the page keeps owning the selected ids, since that is what its bulk actions need. `ExpensesTable` is a thin wrapper that fixes the expense column set; add domain wrappers like that rather than re-deriving columns per page.
+
+**Loading — `Spinner` / `LoadingState` / `Skeleton` / `TableSkeletonRows`.** No more `<p>Loading…</p>`.
+
+- `LoadingState` for a region whose content has not arrived (`variant="section"` reserves height; `"inline"` for menus and dialog bodies). The label is the accessible name and is hidden unless `showLabel`.
+- `DataTable isLoading` for tables — skeleton rows keep the header and column widths on screen. Set `skeletonRows` to the page size so nothing resizes when data lands.
+- Chakra's `Button loading` prop for in-flight actions; it renders its own spinner.
+- `Spinner` is the primitive; it takes its colour from `currentColor` and only gets a `label` when nothing around it is already `role="status"`.
+
+The animations live in `globals.css` (`.branch-spinner`, `.branch-skeleton`, and their keyframes), not in the components — one timing curve for the whole app, and `FullPageSpinner` can render before any component library is mounted. Both honour `prefers-reduced-motion`.
+
 ## Conventions
 
 - Page/interactive components start with `'use client'`.
diff --git a/apps/frontend/src/app/components/DataTable.tsx b/apps/frontend/src/app/components/DataTable.tsx
new file mode 100644
index 00000000..b9f9357c
--- /dev/null
+++ b/apps/frontend/src/app/components/DataTable.tsx
@@ -0,0 +1,195 @@
+'use client';
+
+import type React from 'react';
+import { Checkbox, Table } from '@chakra-ui/react';
+import TableSkeletonRows, { type SkeletonColumn } from './TableSkeletonRows';
+
+export interface DataTableColumn<T> {
+  /** Stable identity for the column; doubles as the React key. */
+  key: string;
+  header: React.ReactNode;
+  /** Width for the `<colgroup>`; percentages keep the table fluid. */
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+  cell: (row: T) => React.ReactNode;
+  /** Shape of this column's loading placeholder — a pill, a short bar, etc. */
+  skeleton?: SkeletonColumn;
+}
+
+/**
+ * Row selection is driven from outside: the pages that support it already own
+ * the selected ids because that is what their bulk actions operate on.
+ */
+export interface DataTableSelection<T> {
+  isSelected: (row: T) => boolean;
+  onToggleRow: (row: T) => void;
+  allSelected: boolean;
+  someSelected: boolean;
+  onToggleAll: () => void;
+  /** Accessible name for the header checkbox, e.g. "Select all reports". */
+  label?: string;
+  disabled?: boolean;
+}
+
+interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  rows: T[];
+  rowKey: (row: T) => React.Key;
+  /** Replaces the body with skeleton rows, keeping the header and widths. */
+  isLoading?: boolean;
+  loadingLabel?: string;
+  /** Ideally the page size, so the table does not resize when data lands. */
+  skeletonRows?: number;
+  emptyMessage?: React.ReactNode;
+  onRowClick?: (row: T) => void;
+  selection?: DataTableSelection<T>;
+  variant?: 'line' | 'outline';
+}
+
+const CHECKBOX_CONTROL_CSS = {
+  backgroundColor: 'var(--color-core-white)',
+  borderColor: 'var(--color-core-green)',
+  '&[data-state="checked"]': {
+    backgroundColor: 'var(--color-primary-800)',
+    borderColor: 'var(--color-core-green)',
+  },
+};
+
+/**
+ * The app's one table. Every list view goes through here so the green header
+ * row, column sizing, empty state and loading skeleton stay identical
+ * everywhere — previously each page rebuilt all four by hand and they drifted.
+ *
+ * Columns are data, not markup: give each one a `cell` renderer and, where the
+ * default bar is wrong, a `skeleton` shape.
+ */
+export default function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  isLoading = false,
+  loadingLabel = 'Loading…',
+  skeletonRows = 5,
+  emptyMessage = 'Nothing to show yet.',
+  onRowClick,
+  selection,
+  variant,
+}: DataTableProps<T>) {
+  const columnCount = columns.length + (selection ? 1 : 0);
+  const hasWidths = columns.some((column) => column.width);
+
+  const skeletonColumns: SkeletonColumn[] = [
+    // The checkbox slot gets a square rather than a bar, so the loading table
+    // reads as the same shape as the loaded one.
+    ...(selection ? [{ width: '18px', height: 18 } as SkeletonColumn] : []),
+    ...columns.map((column) => ({
+      align: column.align,
+      ...column.skeleton,
+    })),
+  ];
+
+  return (
+    <Table.Root variant={variant} width="100%">
+      {hasWidths && (
+        <Table.ColumnGroup>
+          {selection && <Table.Column width="48px" />}
+          {columns.map((column) => (
+            <Table.Column key={column.key} width={column.width} />
+          ))}
+        </Table.ColumnGroup>
+      )}
+
+      <Table.Header>
+        <Table.Row backgroundColor="var(--color-primary-800)">
+          {selection && (
+            <Table.ColumnHeader width="48px" paddingY="12px">
+              <Checkbox.Root
+                checked={
+                  selection.allSelected ? true : selection.someSelected ? 'indeterminate' : false
+                }
+                onCheckedChange={selection.onToggleAll}
+                disabled={selection.disabled}
+                aria-label={selection.label ?? 'Select all rows'}
+              >
+                <Checkbox.HiddenInput />
+                <Checkbox.Control borderRadius="md" css={CHECKBOX_CONTROL_CSS} />
+              </Checkbox.Root>
+            </Table.ColumnHeader>
+          )}
+          {columns.map((column) => (
+            <Table.ColumnHeader
+              key={column.key}
+              color="var(--color-core-white)"
+              textAlign={column.align}
+            >
+              <h5>{column.header}</h5>
+            </Table.ColumnHeader>
+          ))}
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {isLoading ? (
+          <TableSkeletonRows
+            rows={skeletonRows}
+            columns={skeletonColumns}
+            label={loadingLabel}
+          />
+        ) : rows.length === 0 ? (
+          <Table.Row>
+            <Table.Cell
+              colSpan={columnCount}
+              textAlign="center"
+              paddingY="32px"
+              color="var(--color-black-500)"
+            >
+              {emptyMessage}
+            </Table.Cell>
+          </Table.Row>
+        ) : (
+          rows.map((row) => (
+            <Table.Row
+              key={rowKey(row)}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+              // Rows that act like buttons have to be reachable without a
+              // mouse; the target check keeps Enter on a nested control (a
+              // receipt link, a checkbox) from also opening the row.
+              tabIndex={onRowClick ? 0 : undefined}
+              onKeyDown={
+                onRowClick
+                  ? (event) => {
+                      if (event.target !== event.currentTarget) return;
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        onRowClick(row);
+                      }
+                    }
+                  : undefined
+              }
+              cursor={onRowClick ? 'pointer' : undefined}
+              _hover={onRowClick ? { backgroundColor: 'var(--color-primary-100)' } : undefined}
+            >
+              {selection && (
+                <Table.Cell onClick={(event) => event.stopPropagation()}>
+                  <Checkbox.Root
+                    checked={selection.isSelected(row)}
+                    onCheckedChange={() => selection.onToggleRow(row)}
+                    disabled={selection.disabled}
+                  >
+                    <Checkbox.HiddenInput />
+                    <Checkbox.Control borderRadius="md" css={CHECKBOX_CONTROL_CSS} />
+                  </Checkbox.Root>
+                </Table.Cell>
+              )}
+              {columns.map((column) => (
+                <Table.Cell key={column.key} textAlign={column.align}>
+                  {column.cell(row)}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))
+        )}
+      </Table.Body>
+    </Table.Root>
+  );
+}
diff --git a/apps/frontend/src/app/components/ExpensesTable.tsx b/apps/frontend/src/app/components/ExpensesTable.tsx
index 3f5c693c..3303a2b8 100644
--- a/apps/frontend/src/app/components/ExpensesTable.tsx
+++ b/apps/frontend/src/app/components/ExpensesTable.tsx
@@ -1,5 +1,7 @@
-import { Table } from '@chakra-ui/react';
+'use client';
+
 import { Expenditure } from '@/types';
+import DataTable, { type DataTableColumn } from './DataTable';
 import StatusBadge from './StatusBadge';
 
 interface ExpensesTableProps {
@@ -9,6 +11,17 @@ interface ExpensesTableProps {
   projectNames?: Record<number, string>;
   onViewReceipt?: (expenditure: Expenditure) => void;
   onRowClick?: (expenditure: Expenditure) => void;
+  /** Fills the body with skeleton rows, keeping the header and widths in place. */
+  isLoading?: boolean;
+  /** Set this to the page size so the table does not resize when data lands. */
+  skeletonRows?: number;
+}
+
+function formatAmount(amount: string) {
+  return `$${parseFloat(amount).toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
 }
 
 export default function ExpensesTable({
@@ -17,98 +30,107 @@ export default function ExpensesTable({
   projectNames = {},
   onViewReceipt,
   onRowClick,
+  isLoading = false,
+  skeletonRows = 5,
 }: ExpensesTableProps) {
-  const columnCount = showProject ? 7 : 6;
-
-  return (
-    <Table.Root>
-      <Table.ColumnGroup>
-        <Table.Column width={showProject ? '11.5%' : '14%'} />
-        <Table.Column width={showProject ? '15.3%' : '19%'} />
-        <Table.Column width={showProject ? '16.6%' : '21%'} />
-        {showProject && <Table.Column width="21.8%" />}
-        <Table.Column width={showProject ? '14%' : '18%'} />
-        <Table.Column width={showProject ? '11%' : '14%'} />
-        <Table.Column width={showProject ? '9.8%' : '14%'} />
-      </Table.ColumnGroup>
-
-      <Table.Header>
-        <Table.Row backgroundColor="var(--color-primary-800)">
-          <Table.ColumnHeader color="var(--color-core-white)"><h5>Expense ID</h5></Table.ColumnHeader>
-          <Table.ColumnHeader color="var(--color-core-white)"><h5>Date</h5></Table.ColumnHeader>
-          <Table.ColumnHeader color="var(--color-core-white)"><h5>Type of Expense</h5></Table.ColumnHeader>
-          {showProject && (
-            <Table.ColumnHeader color="var(--color-core-white)"><h5>Project</h5></Table.ColumnHeader>
-          )}
-          <Table.ColumnHeader color="var(--color-core-white)"><h5>Amount</h5></Table.ColumnHeader>
-          <Table.ColumnHeader color="var(--color-core-white)"><h5>Receipt</h5></Table.ColumnHeader>
-          <Table.ColumnHeader color="var(--color-core-white)"><h5>Status</h5></Table.ColumnHeader>
-        </Table.Row>
-      </Table.Header>
+  // Percentages are shared out among whichever columns are on, so dropping one
+  // widens the rest instead of leaving a gap at the end of the row.
+  const widths = showProject
+    ? { id: '11.5%', date: '15.3%', type: '16.6%', project: '21.8%', amount: '14%', receipt: '11%', status: '9.8%' }
+    : { id: '14%', date: '19%', type: '21%', project: '0', amount: '18%', receipt: '14%', status: '14%' };
 
-      <Table.Body>
-        {expenditures.length === 0 ? (
-          <Table.Row>
-            <Table.Cell colSpan={columnCount} style={{ textAlign: 'center', padding: '2rem' }}>
-              No expenditures found.
-            </Table.Cell>
-          </Table.Row>
+  const columns: DataTableColumn<Expenditure>[] = [
+    {
+      key: 'id',
+      header: 'Expense ID',
+      width: widths.id,
+      cell: (e) => `#${String(e.expenditure_id).padStart(6, '0')}`,
+      skeleton: { width: '80%' },
+    },
+    {
+      key: 'date',
+      header: 'Date',
+      width: widths.date,
+      cell: (e) =>
+        new Date(e.spent_on).toLocaleDateString('en-US', {
+          month: '2-digit',
+          day: '2-digit',
+          year: 'numeric',
+        }),
+      skeleton: { width: '75%' },
+    },
+    {
+      key: 'type',
+      header: 'Type of Expense',
+      width: widths.type,
+      cell: (e) => e.category ?? '—',
+    },
+    ...(showProject
+      ? [
+          {
+            key: 'project',
+            header: 'Project',
+            width: widths.project,
+            cell: (e: Expenditure) => projectNames[e.project_id] ?? '---',
+          },
+        ]
+      : []),
+    {
+      key: 'amount',
+      header: 'Amount',
+      width: widths.amount,
+      cell: (e) => formatAmount(e.amount),
+      skeleton: { width: '60%' },
+    },
+    {
+      key: 'receipt',
+      header: 'Receipt',
+      width: widths.receipt,
+      cell: (e) =>
+        e.receipt_url ? (
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              onViewReceipt?.(e);
+            }}
+            style={{
+              color: 'var(--color-primary-700)',
+              textDecoration: 'underline',
+              cursor: 'pointer',
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              font: 'inherit',
+            }}
+          >
+            View Receipt
+          </button>
         ) : (
-          expenditures.map((e) => (
-            <Table.Row
-              key={e.expenditure_id}
-              onClick={onRowClick ? () => onRowClick(e) : undefined}
-              style={onRowClick ? { cursor: 'pointer' } : undefined}
-            >
-              <Table.Cell>#{String(e.expenditure_id).padStart(6, '0')}</Table.Cell>
-              <Table.Cell>
-                {new Date(e.spent_on).toLocaleDateString('en-US', {
-                  month: '2-digit',
-                  day: '2-digit',
-                  year: 'numeric',
-                })}
-              </Table.Cell>
-              <Table.Cell>{e.category ?? '—'}</Table.Cell>
-              {showProject && (
-                <Table.Cell>{projectNames[e.project_id] ?? '---'}</Table.Cell>
-              )}
-              <Table.Cell>
-                ${parseFloat(e.amount).toLocaleString('en-US', {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                })}
-              </Table.Cell>
-              <Table.Cell>
-                {e.receipt_url ? (
-                  <button
-                    type="button"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      onViewReceipt?.(e);
-                    }}
-                    style={{
-                      color: 'var(--color-primary-700)',
-                      textDecoration: 'underline',
-                      cursor: 'pointer',
-                      background: 'none',
-                      border: 'none',
-                      padding: 0,
-                      font: 'inherit',
-                    }}
-                  >
-                    View Receipt
-                  </button>
-                ) : (
-                  '---'
-                )}
-              </Table.Cell>
-              <Table.Cell>
-                <StatusBadge status={e.status} />
-              </Table.Cell>
-            </Table.Row>
-          ))
-        )}
-      </Table.Body>
-    </Table.Root>
+          '---'
+        ),
+      skeleton: { width: '70%' },
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      width: widths.status,
+      cell: (e) => <StatusBadge status={e.status} />,
+      // Matches the pill the loaded row shows rather than a text bar.
+      skeleton: { width: '81px', height: 29, className: '!rounded-[14px]' },
+    },
+  ];
+
+  return (
+    <DataTable
+      columns={columns}
+      rows={expenditures}
+      rowKey={(e) => e.expenditure_id}
+      onRowClick={onRowClick}
+      isLoading={isLoading}
+      loadingLabel="Loading expenses…"
+      skeletonRows={skeletonRows}
+      emptyMessage="No expenditures found."
+    />
   );
 }
diff --git a/apps/frontend/src/app/components/FullPageSpinner.tsx b/apps/frontend/src/app/components/FullPageSpinner.tsx
index e9663b5d..26057840 100644
--- a/apps/frontend/src/app/components/FullPageSpinner.tsx
+++ b/apps/frontend/src/app/components/FullPageSpinner.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import Spinner from './Spinner';
+
 /**
  * Neutral full-viewport placeholder shown while the session resolves or a
  * redirect is in flight.
@@ -7,7 +9,8 @@
  * Deliberately reveals nothing about the app shell — the whole point of the
  * guard is that unauthenticated visitors never see it — and deliberately has no
  * component-library dependency, because it renders from AuthGate and the root
- * page, above anything that could be relied on to be mounted.
+ * page, above anything that could be relied on to be mounted. `Spinner` is
+ * plain markup over `globals.css`, which the root layout always loads.
  */
 export default function FullPageSpinner({
   label = 'Loading…',
@@ -25,19 +28,10 @@ export default function FullPageSpinner({
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: '#f9fafb',
+        color: '#2E6038',
       }}
     >
-      <style>{`@keyframes branch-spin { to { transform: rotate(360deg); } }`}</style>
-      <div
-        style={{
-          width: 40,
-          height: 40,
-          borderRadius: '50%',
-          border: '4px solid #d7e3d9',
-          borderTopColor: '#2E6038',
-          animation: 'branch-spin 0.8s linear infinite',
-        }}
-      />
+      <Spinner size="lg" />
     </div>
   );
 }
diff --git a/apps/frontend/src/app/components/LoadingState.tsx b/apps/frontend/src/app/components/LoadingState.tsx
new file mode 100644
index 00000000..aa2a010d
--- /dev/null
+++ b/apps/frontend/src/app/components/LoadingState.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import Spinner, { type SpinnerSize } from './Spinner';
+
+interface LoadingStateProps {
+  /**
+   * Announced to screen readers, and shown as text when `showLabel` is set.
+   * Say what is loading — several of these can be on screen at once.
+   */
+  label?: string;
+  /** Renders the label under the spinner. Off by default: the spinner says it. */
+  showLabel?: boolean;
+  size?: SpinnerSize;
+  /**
+   * `section` reserves vertical space so a page region does not collapse and
+   * then jolt when the data lands; `inline` hugs its content for tight spots
+   * such as a dropdown menu or a dialog body.
+   */
+  variant?: 'section' | 'inline';
+  className?: string;
+}
+
+/**
+ * The standard placeholder for a region whose content has not arrived yet:
+ * a centred spinner in place of the old "Loading…" paragraphs.
+ *
+ * For tables prefer `TableSkeletonRows`, which keeps the header and column
+ * widths on screen instead of blanking the whole grid.
+ */
+export default function LoadingState({
+  label = 'Loading…',
+  showLabel = false,
+  size = 'md',
+  variant = 'section',
+  className = '',
+}: LoadingStateProps) {
+  const spacing = variant === 'section' ? 'min-h-[240px] !py-10' : '!py-3';
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      aria-label={showLabel ? undefined : label}
+      className={`flex w-full flex-col items-center justify-center !gap-3 text-core-green ${spacing} ${className}`}
+    >
+      <Spinner size={size} />
+      {showLabel && <p className="!text-black-700">{label}</p>}
+    </div>
+  );
+}
diff --git a/apps/frontend/src/app/components/ReviewExpenseModal.tsx b/apps/frontend/src/app/components/ReviewExpenseModal.tsx
index cf8643ec..33ea27f7 100644
--- a/apps/frontend/src/app/components/ReviewExpenseModal.tsx
+++ b/apps/frontend/src/app/components/ReviewExpenseModal.tsx
@@ -13,6 +13,7 @@ import {
   type ExpenditureDetail,
   type ExpenditureStatus,
 } from '@/types';
+import LoadingState from './LoadingState';
 import StatusBadge from './StatusBadge';
 
 interface ReviewExpenseModalProps {
@@ -157,7 +158,7 @@ export default function ReviewExpenseModal({
             </Dialog.Header>
 
             <Dialog.Body>
-              {loading && <p>Loading expense...</p>}
+              {loading && <LoadingState label="Loading expense…" size="sm" variant="inline" />}
               {loadError && <p style={{ color: 'var(--color-error-red)' }}>{loadError}</p>}
 
               {!loading && !loadError && detail && (
diff --git a/apps/frontend/src/app/components/Skeleton.tsx b/apps/frontend/src/app/components/Skeleton.tsx
new file mode 100644
index 00000000..54e2af12
--- /dev/null
+++ b/apps/frontend/src/app/components/Skeleton.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+
+interface SkeletonProps {
+  /** Any CSS length; percentages let a bar track its cell. */
+  width?: string | number;
+  height?: string | number;
+  /** Offsets the shimmer so a stack of skeletons animates as a wave. */
+  delayMs?: number;
+  className?: string;
+}
+
+/**
+ * A shimmering placeholder bar. Purely decorative — it is `aria-hidden`, so
+ * whatever renders it owns the `role="status"` announcement.
+ */
+export default function Skeleton({
+  width = '100%',
+  height = 14,
+  delayMs = 0,
+  className = '',
+}: SkeletonProps) {
+  return (
+    <span
+      aria-hidden
+      className={`branch-skeleton block ${className}`}
+      style={
+        {
+          width,
+          height,
+          '--branch-skeleton-delay': `${delayMs}ms`,
+        } as CSSProperties
+      }
+    />
+  );
+}
diff --git a/apps/frontend/src/app/components/Spinner.tsx b/apps/frontend/src/app/components/Spinner.tsx
new file mode 100644
index 00000000..846d4c76
--- /dev/null
+++ b/apps/frontend/src/app/components/Spinner.tsx
@@ -0,0 +1,51 @@
+'use client';
+
+/**
+ * The app's one spinner. Every "something is in flight" affordance should end
+ * up here rather than rolling its own div or borrowing Chakra's, so the size
+ * ramp and timing stay consistent.
+ *
+ * Colour comes from `currentColor` — set a text colour on the parent (or via
+ * `className`) to put a spinner on a dark surface.
+ */
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/** Ring thickness scales with the diameter, otherwise small sizes read as blobs. */
+const SIZES: Record<SpinnerSize, { box: number; border: number }> = {
+  xs: { box: 14, border: 2 },
+  sm: { box: 20, border: 2 },
+  md: { box: 32, border: 3 },
+  lg: { box: 40, border: 4 },
+};
+
+interface SpinnerProps {
+  size?: SpinnerSize;
+  /**
+   * Accessible name. Provide it only when the spinner is the sole indication
+   * that something is loading — when it sits inside an element that is already
+   * `role="status"` (LoadingState, FullPageSpinner), leave it off so screen
+   * readers announce the region once instead of twice.
+   */
+  label?: string;
+  className?: string;
+}
+
+export default function Spinner({ size = 'md', label, className = '' }: SpinnerProps) {
+  const { box, border } = SIZES[size];
+
+  const ring = (
+    <span
+      aria-hidden
+      className={`branch-spinner ${label ? '' : className}`}
+      style={{ width: box, height: box, borderWidth: border }}
+    />
+  );
+
+  if (!label) return ring;
+
+  return (
+    <span role="status" aria-live="polite" aria-label={label} className={`inline-flex ${className}`}>
+      {ring}
+    </span>
+  );
+}
diff --git a/apps/frontend/src/app/components/TableSkeletonRows.tsx b/apps/frontend/src/app/components/TableSkeletonRows.tsx
new file mode 100644
index 00000000..7864a624
--- /dev/null
+++ b/apps/frontend/src/app/components/TableSkeletonRows.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { Table } from '@chakra-ui/react';
+import Skeleton from './Skeleton';
+
+export interface SkeletonColumn {
+  /**
+   * Width of the bar inside the cell. Percentages get a per-row jitter so the
+   * block reads like text rather than a bar chart; absolute lengths are left
+   * exactly as given, for fixed slots such as a checkbox or an icon.
+   */
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+  height?: number;
+  /** Extra classes on the bar, e.g. `!rounded-full` for a status pill. */
+  className?: string;
+}
+
+interface TableSkeletonRowsProps {
+  /** Ideally the page size, so the table does not resize when data lands. */
+  rows?: number;
+  /** A count for evenly-filled cells, or per-column shapes. */
+  columns: number | SkeletonColumn[];
+  label?: string;
+}
+
+/** Deterministic — `Math.random()` here would churn on every re-render. */
+const JITTER = [1, 0.82, 0.93, 0.71, 0.88, 0.78];
+
+/**
+ * Skeleton rows to drop inside a `Table.Body` while its data loads, so the
+ * header, column widths and page height stay put and the table fades in
+ * instead of popping.
+ *
+ * ```tsx
+ * <Table.Body>
+ *   {loading ? <TableSkeletonRows rows={10} columns={5} /> : rows.map(...)}
+ * </Table.Body>
+ * ```
+ */
+export default function TableSkeletonRows({
+  rows = 5,
+  columns,
+  label = 'Loading…',
+}: TableSkeletonRowsProps) {
+  const shape: SkeletonColumn[] =
+    typeof columns === 'number' ? Array.from({ length: columns }, () => ({})) : columns;
+
+  return (
+    <>
+      {Array.from({ length: rows }, (_, rowIndex) => (
+        <Table.Row key={rowIndex}>
+          {shape.map((column, columnIndex) => {
+            const width = column.width ?? '70%';
+            const jitter = JITTER[(rowIndex * 3 + columnIndex) % JITTER.length];
+            const align = column.align ?? 'left';
+
+            return (
+              <Table.Cell key={columnIndex} paddingY="14px">
+                {rowIndex === 0 && columnIndex === 0 && (
+                  <span role="status" aria-live="polite" className="sr-only">
+                    {label}
+                  </span>
+                )}
+                <span
+                  className="flex"
+                  style={{
+                    justifyContent:
+                      align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start',
+                  }}
+                >
+                  <Skeleton
+                    width={width.endsWith('%') ? `calc(${width} * ${jitter})` : width}
+                    height={column.height ?? 14}
+                    delayMs={rowIndex * 90}
+                    className={column.className}
+                  />
+                </span>
+              </Table.Cell>
+            );
+          })}
+        </Table.Row>
+      ))}
+    </>
+  );
+}
diff --git a/apps/frontend/src/app/dashboard/page.tsx b/apps/frontend/src/app/dashboard/page.tsx
index dfe5e999..f98d6c1f 100644
--- a/apps/frontend/src/app/dashboard/page.tsx
+++ b/apps/frontend/src/app/dashboard/page.tsx
@@ -8,6 +8,7 @@ import Header from '../components/Header';
 import ProjectCard from '../components/ProjectCard';
 import SummaryStatCard from '../components/SummaryStatCard';
 import ExpensesBarChart from '../components/ExpensesBarChart';
+import LoadingState from '../components/LoadingState';
 import { useApi } from '@/hooks/useApi';
 import type { DashboardResponse } from '@/types/dashboard';
 
@@ -53,7 +54,7 @@ export default function DashboardPage() {
       <main className="min-w-0 flex-1 bg-core-white">
         <Header />
         <div className="flex flex-col !gap-6 !px-4 !py-5 sm:!px-8">
-          {isLoading && <p>Loading dashboard…</p>}
+          {isLoading && <LoadingState label="Loading dashboard…" />}
           {error && <p className="text-error-red">{error}</p>}
 
           {!isLoading && !error && data && summary && (
diff --git a/apps/frontend/src/app/donations/page.tsx b/apps/frontend/src/app/donations/page.tsx
index 33c60627..31014556 100644
--- a/apps/frontend/src/app/donations/page.tsx
+++ b/apps/frontend/src/app/donations/page.tsx
@@ -1,12 +1,14 @@
 'use client'
 import React, { useState } from 'react';
 import NavBar from "../components/Navbar";
-import { HStack, Input, Button, Table, Dialog, Portal, CloseButton, Stack } from "@chakra-ui/react";
+import { HStack, Input, Button, Dialog, Portal, CloseButton, Stack } from "@chakra-ui/react";
 import TextInputField from '../components/TextInputField';
 import { CiFilter } from "react-icons/ci";
 import { LuArrowDownUp } from "react-icons/lu";
-import { FaPlus, FaAngleLeft, FaAngleRight } from "react-icons/fa";
+import { FaPlus } from "react-icons/fa";
 import DropdownSelector from '../components/DropdownSelector';
+import DataTable, { type DataTableColumn } from '../components/DataTable';
+import Pagination from '../components/Pagination';
 
 type Donation = {
     donor_id: number;
@@ -31,6 +33,31 @@ const mockDonations: Donation[] = [
     { donor_id: 10, date: '03/22/2024', project_name: 'After-School Arts', amount: 600 },
 ];
 
+const donationColumns: DataTableColumn<Donation>[] = [
+    {
+        key: 'date',
+        header: 'Date',
+        width: '15%',
+        cell: (donation) => donation.date ?? '—',
+        skeleton: { width: '70%' },
+    },
+    {
+        key: 'donor',
+        header: 'Donor ID',
+        width: '15%',
+        cell: (donation) => `#${String(donation.donor_id).padStart(6, '0')}`,
+        skeleton: { width: '80%' },
+    },
+    { key: 'project', header: 'Project Name', width: '55%', cell: (donation) => donation.project_name },
+    {
+        key: 'amount',
+        header: 'Amount',
+        width: '15%',
+        cell: (donation) => `$${donation.amount.toLocaleString()}`,
+        skeleton: { width: '55%' },
+    },
+];
+
 export default function DonationsPage() {
     const [currentPage, setCurrentPage] = useState(1);
     const rowsPerPage = 10;
@@ -41,13 +68,6 @@ export default function DonationsPage() {
         currentPage * rowsPerPage
     );
 
-    const getPageNumbers = () => {
-        if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
-        if (currentPage <= 3) return [1, 2, 3, '...', totalPages];
-        if (currentPage >= totalPages - 2) return [1, '...', totalPages - 2, totalPages - 1, totalPages];
-        return [1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages];
-    };
-
     const [showFilter, setShowFilter] = useState(false);
     const [selectedDonor, setSelectedDonor] = useState<string>('');
     const [showSort, setShowSort] = useState(false);
@@ -208,50 +228,18 @@ export default function DonationsPage() {
                         </Portal>
                     </Dialog.Root>
 
-                    <Table.Root>
-                        <Table.ColumnGroup>
-                            <Table.Column width="15%" />
-                            <Table.Column width="15%" />
-                            <Table.Column width="55%" />
-                            <Table.Column width="15%" />
-                        </Table.ColumnGroup>
-                        <Table.Header>
-                            <Table.Row backgroundColor={'var(--color-primary-800)'}>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Date</Table.ColumnHeader>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Donor ID</Table.ColumnHeader>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Project Name</Table.ColumnHeader>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Amount</Table.ColumnHeader>
-                            </Table.Row>
-                        </Table.Header>
-                        <Table.Body>
-                            {currentDonations.map((donation) => (
-                                <Table.Row key={donation.donor_id}>
-                                    <Table.Cell>{donation.date ?? '—'}</Table.Cell>
-                                    <Table.Cell>#{String(donation.donor_id).padStart(6, '0')}</Table.Cell>
-                                    <Table.Cell>{donation.project_name}</Table.Cell>
-                                    <Table.Cell>${donation.amount.toLocaleString()}</Table.Cell>
-                                </Table.Row>
-                            ))}
-                        </Table.Body>
-                    </Table.Root>
+                    <DataTable
+                        columns={donationColumns}
+                        rows={currentDonations}
+                        rowKey={(donation) => donation.donor_id}
+                        emptyMessage="No donations found."
+                    />
 
-                    <div style={{ marginTop: 'auto' }}>
-                        <HStack width="100%" justify="center" paddingTop="3%" paddingBottom="3%" gap="6">
-                            <FaAngleLeft
-                                onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
-                                style={{ cursor: currentPage === 1 ? 'not-allowed' : 'pointer', opacity: currentPage === 1 ? 0.3 : 1, color: 'var(--color-core-green)' }}
-                            />
-                            {getPageNumbers().map((page, index) => (
-                                page === '...'
-                                    ? <Button key={`ellipsis-${index}`} backgroundColor={'var(--color-core-white)'} color={'var(--color-core-green)'} border={'1px solid'} borderColor={'var(--color-core-green)'} cursor={'default'}> ... </Button>
-                                    : <Button key={page} onClick={() => setCurrentPage(page as number)} backgroundColor={currentPage === page ? 'var(--color-core-green)' : 'var(--color-core-white)'} color={currentPage === page ? 'var(--color-core-white)' : 'var(--color-core-green)'} border={'1px solid'} borderColor={'var(--color-core-green)'}>{page}</Button>
-                            ))}
-                            <FaAngleRight
-                                onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))}
-                                style={{ cursor: currentPage === totalPages ? 'not-allowed' : 'pointer', opacity: currentPage === totalPages ? 0.3 : 1, color: 'var(--color-core-green)' }}
-                            />
-                        </HStack>
-                    </div>
+                    <Pagination
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={setCurrentPage}
+                    />
                 </div>
             </main>
         </div>
diff --git a/apps/frontend/src/app/donors/page.tsx b/apps/frontend/src/app/donors/page.tsx
index 152d00ab..4014e291 100644
--- a/apps/frontend/src/app/donors/page.tsx
+++ b/apps/frontend/src/app/donors/page.tsx
@@ -1,12 +1,14 @@
 'use client'
 import React, { useState } from 'react';
 import NavBar from "../components/Navbar";
-import { HStack, Input, Button, Table, Dialog, Portal, CloseButton, Stack } from "@chakra-ui/react";
+import { HStack, Input, Button, Dialog, Portal, CloseButton, Stack } from "@chakra-ui/react";
 import TextInputField from '../components/TextInputField';
 import { CiFilter } from "react-icons/ci";
 import { LuArrowDownUp } from "react-icons/lu";
-import { FaPlus, FaAngleLeft, FaAngleRight } from "react-icons/fa";
+import { FaPlus } from "react-icons/fa";
 import DropdownSelector from '../components/DropdownSelector';
+import DataTable, { type DataTableColumn } from '../components/DataTable';
+import Pagination from '../components/Pagination';
 
 type Donor = {
     donor_id: number;
@@ -30,6 +32,31 @@ const mockDonors: Donor[] = [
     { donor_id: 10, organization: 'Coastal Care Foundation', contact_name: 'Nina Rossi', contact_email: 'nina@coastalcare.org', num_projects: 3, last_donation: '03/22/2024' },
 ];
 
+const donorColumns: DataTableColumn<Donor>[] = [
+    {
+        key: 'id',
+        header: 'Donor ID',
+        width: '15%',
+        cell: (donor) => `#${String(donor.donor_id).padStart(6, '0')}`,
+        skeleton: { width: '80%' },
+    },
+    { key: 'organization', header: 'Donor Name', width: '55%', cell: (donor) => donor.organization },
+    {
+        key: 'projects',
+        header: '# of Projects',
+        width: '15%',
+        cell: (donor) => donor.num_projects,
+        skeleton: { width: '35%' },
+    },
+    {
+        key: 'last_donation',
+        header: 'Last Donation',
+        width: '15%',
+        cell: (donor) => donor.last_donation ?? '—',
+        skeleton: { width: '70%' },
+    },
+];
+
 export default function DonorsPage() {
     const [currentPage, setCurrentPage] = useState(1);
     const rowsPerPage = 10;
@@ -40,13 +67,6 @@ export default function DonorsPage() {
         currentPage * rowsPerPage
     );
 
-    const getPageNumbers = () => {
-        if (totalPages <= 5) return Array.from({ length: totalPages }, (_, i) => i + 1);
-        if (currentPage <= 3) return [1, 2, 3, '...', totalPages];
-        if (currentPage >= totalPages - 2) return [1, '...', totalPages - 2, totalPages - 1, totalPages];
-        return [1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages];
-    };
-
     const [showFilter, setShowFilter] = useState(false);
     const [selectedDonor, setSelectedDonor] = useState<string>('');
     const donorNames = mockDonors.map(d => d.organization);
@@ -186,50 +206,18 @@ export default function DonorsPage() {
                         </Portal>
                     </Dialog.Root>
 
-                    <Table.Root>
-                        <Table.ColumnGroup>
-                            <Table.Column width="15%" />
-                            <Table.Column width="55%" />
-                            <Table.Column width="15%" />
-                            <Table.Column width="15%" />
-                        </Table.ColumnGroup>
-                        <Table.Header>
-                            <Table.Row backgroundColor={'var(--color-primary-800)'}>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Donor ID</Table.ColumnHeader>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Donor Name</Table.ColumnHeader>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}># of Projects</Table.ColumnHeader>
-                                <Table.ColumnHeader color={'var(--color-core-white)'}>Last Donation</Table.ColumnHeader>
-                            </Table.Row>
-                        </Table.Header>
-                        <Table.Body>
-                            {currentDonors.map((donor) => (
-                                <Table.Row key={donor.donor_id}>
-                                    <Table.Cell>#{String(donor.donor_id).padStart(6, '0')}</Table.Cell>
-                                    <Table.Cell>{donor.organization}</Table.Cell>
-                                    <Table.Cell>{donor.num_projects}</Table.Cell>
-                                    <Table.Cell>{donor.last_donation ?? '—'}</Table.Cell>
-                                </Table.Row>
-                            ))}
-                        </Table.Body>
-                    </Table.Root>
+                    <DataTable
+                        columns={donorColumns}
+                        rows={currentDonors}
+                        rowKey={(donor) => donor.donor_id}
+                        emptyMessage="No donors found."
+                    />
 
-                    <div style={{ marginTop: 'auto' }}>
-                        <HStack width="100%" justify="center" paddingTop="3%" paddingBottom="3%" gap="6">
-                            <FaAngleLeft
-                                onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
-                                style={{ cursor: currentPage === 1 ? 'not-allowed' : 'pointer', opacity: currentPage === 1 ? 0.3 : 1, color: 'var(--color-core-green)' }}
-                            />
-                            {getPageNumbers().map((page, index) => (
-                                page === '...'
-                                    ? <Button key={`ellipsis-${index}`} backgroundColor={'var(--color-core-white)'} color={'var(--color-core-green)'} border={'1px solid'} borderColor={'var(--color-core-green)'} cursor={'default'}> ... </Button>
-                                    : <Button key={page} onClick={() => setCurrentPage(page as number)} backgroundColor={currentPage === page ? 'var(--color-core-green)' : 'var(--color-core-white)'} color={currentPage === page ? 'var(--color-core-white)' : 'var(--color-core-green)'} border={'1px solid'} borderColor={'var(--color-core-green)'}>{page}</Button>
-                            ))}
-                            <FaAngleRight
-                                onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))}
-                                style={{ cursor: currentPage === totalPages ? 'not-allowed' : 'pointer', opacity: currentPage === totalPages ? 0.3 : 1, color: 'var(--color-core-green)' }}
-                            />
-                        </HStack>
-                    </div>
+                    <Pagination
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={setCurrentPage}
+                    />
                 </div>
             </main>
         </div>
diff --git a/apps/frontend/src/app/expenses/page.tsx b/apps/frontend/src/app/expenses/page.tsx
index e56dcda4..3fa0a44e 100644
--- a/apps/frontend/src/app/expenses/page.tsx
+++ b/apps/frontend/src/app/expenses/page.tsx
@@ -296,13 +296,14 @@ function ExpensePageContent() {
             </HStack>
           </HStack>
 
-          {/* Loading / Error */}
-          {loading && <p>Loading expenditures...</p>}
           {error && <p style={{ color: 'var(--color-error-red)' }}>{error}</p>}
 
-          {/* Table */}
-          {!loading && !error && (
+          {/* Table — the skeleton lives inside it, so the header and column
+              widths stay put while the rows load. */}
+          {!error && (
             <ExpensesTable
+              isLoading={loading}
+              skeletonRows={ROWS_PER_PAGE}
               expenditures={paginatedData}
               projectNames={projectNames}
               onViewReceipt={handleViewReceipt}
diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
index 52fcdd82..6eb303ba 100644
--- a/apps/frontend/src/app/globals.css
+++ b/apps/frontend/src/app/globals.css
@@ -103,4 +103,66 @@
     width: 40px;
     height: 100%;
     cursor: pointer;
-  }
\ No newline at end of file
+  }
+
+/* Loading primitives — the animations behind <Spinner> and <Skeleton>. They
+   live here rather than in the components so every loading affordance in the
+   app shares one timing curve, and so a spinner can render before any
+   component library is mounted (see FullPageSpinner). */
+
+@keyframes branch-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes branch-shimmer {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+/* Takes its colour from `currentColor`, so a spinner on a dark surface only
+   needs a text colour rather than its own variant. */
+.branch-spinner {
+  display: inline-block;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border-style: solid;
+  border-color: color-mix(in srgb, currentColor 22%, transparent);
+  border-top-color: currentColor;
+  animation: branch-spin 0.7s linear infinite;
+}
+
+.branch-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--color-black-100);
+  border-radius: 4px;
+}
+
+.branch-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--color-core-white) 70%, transparent),
+    transparent
+  );
+  animation: branch-shimmer 1.4s ease-in-out infinite;
+  /* Staggered per row so a table of skeletons reads as one wave. */
+  animation-delay: var(--branch-skeleton-delay, 0s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .branch-spinner {
+    animation-duration: 2.4s;
+  }
+
+  .branch-skeleton::after {
+    animation: none;
+  }
+}
\ No newline at end of file
diff --git a/apps/frontend/src/app/projects/[id]/ProjectDetailClient.tsx b/apps/frontend/src/app/projects/[id]/ProjectDetailClient.tsx
index 62c71009..7593b31e 100644
--- a/apps/frontend/src/app/projects/[id]/ProjectDetailClient.tsx
+++ b/apps/frontend/src/app/projects/[id]/ProjectDetailClient.tsx
@@ -5,6 +5,7 @@ import { FaEdit } from 'react-icons/fa';
 import { RxCaretRight } from 'react-icons/rx';
 import NavBar from '../../components/Navbar';
 import ExpensesTable from '../../components/ExpensesTable';
+import LoadingState from '../../components/LoadingState';
 import StaffCard from '../../components/StaffCard';
 import { useApi } from '@/hooks/useApi';
 import { Project, Expenditure, Member } from '@/types';
@@ -60,7 +61,7 @@ export default function ProjectPage() {
       <div className="flex min-h-screen">
         <NavBar />
         <div className="flex-1 flex items-center justify-center">
-          <p>Loading project...</p>
+          <LoadingState label="Loading project…" />
         </div>
       </div>
     );
diff --git a/apps/frontend/src/app/projects/page.tsx b/apps/frontend/src/app/projects/page.tsx
index 1034e880..d2b09f10 100644
--- a/apps/frontend/src/app/projects/page.tsx
+++ b/apps/frontend/src/app/projects/page.tsx
@@ -5,6 +5,7 @@ import Link from 'next/link';
 import NavBar from '../components/Navbar';
 import Header from '../components/Header';
 import ProjectCard from '../components/ProjectCard';
+import LoadingState from '../components/LoadingState';
 import { useApi } from '@/hooks/useApi';
 
 /**
@@ -65,7 +66,7 @@ export default function ProjectsListPage() {
             Projects
           </h1>
 
-          {isLoading && <p>Loading projects…</p>}
+          {isLoading && <LoadingState label="Loading projects…" />}
           {error && <p style={{ color: '#b91c1c' }}>{error}</p>}
           {!isLoading && !error && projects.length === 0 && (
             <p>No projects to show.</p>
diff --git a/apps/frontend/src/app/reports/page.tsx b/apps/frontend/src/app/reports/page.tsx
index 86454366..ad4d693c 100644
--- a/apps/frontend/src/app/reports/page.tsx
+++ b/apps/frontend/src/app/reports/page.tsx
@@ -8,13 +8,12 @@ import Pagination from '../components/Pagination';
 import {
   HStack,
   Button,
-  Table,
-  Checkbox,
   NativeSelect,
   Dialog,
   Portal,
   VStack,
 } from '@chakra-ui/react';
+import DataTable, { type DataTableColumn } from '../components/DataTable';
 import { useApi } from '@/hooks/useApi';
 import { type Project } from '@/lib/reports';
 import UploadReportModal from '../components/UploadReportModal';
@@ -220,6 +219,52 @@ function ReportsPageContent() {
         setIsUploadModalOpen(true);
     }
 
+    const reportColumns: DataTableColumn<Report>[] = [
+        {
+            key: 'date',
+            header: 'Date Created',
+            width: '18%',
+            cell: (report) => formatDate(report.date_created),
+            skeleton: { width: '70%' },
+        },
+        {
+            key: 'title',
+            header: 'Report Name',
+            width: '32%',
+            cell: (report) => (
+                <Button
+                    variant="plain"
+                    height="auto"
+                    minWidth="auto"
+                    padding="0"
+                    color="var(--color-core-green)"
+                    textDecoration="underline"
+                    onClick={() => handleDownload(report.report_id)}
+                    loading={downloadingId === report.report_id}
+                    loadingText={report.title || 'Untitled report'}
+                >
+                    {report.title || 'Untitled report'}
+                </Button>
+            ),
+        },
+        {
+            key: 'emails',
+            header: 'Emails',
+            width: '35%',
+            cell: (report) =>
+                report.emails && report.emails.length > 0 ? report.emails.join(', ') : '—',
+            skeleton: { width: '85%' },
+        },
+        {
+            key: 'format',
+            header: 'Format',
+            width: '15%',
+            align: 'right',
+            cell: (report) => getFormatLabel(report.object_url),
+            skeleton: { width: '45%' },
+        },
+    ];
+
     
     return (
         <div style={{ display: 'flex', minHeight: '100vh' }}>
@@ -297,106 +342,32 @@ function ReportsPageContent() {
                 </HStack>
               </HStack>
      
-              {/* Loading / Error */}
-              {loading && <p>Loading reports...</p>}
               {error && <p style={{ color: 'var(--color-error-red)' }}>{error}</p>}
               {actionError && (
                 <p style={{ color: 'var(--color-error-red)', paddingBottom: '12px' }}>{actionError}</p>
               )}
      
               {/* Reports tab content */}
-              {!loading && !error && activeTab === 'reports' && (
-                <Table.Root variant="outline" width="100%">
-                  <Table.Header>
-                    <Table.Row backgroundColor="var(--color-primary-800)">
-                      <Table.ColumnHeader width="48px" paddingY="12px">
-                        <Checkbox.Root
-                          checked={allSelected ? true : someSelected ? 'indeterminate' : false}
-                          onCheckedChange={toggleAll}
-                        >
-                          <Checkbox.HiddenInput />
-                          <Checkbox.Control
-                            borderRadius="md"
-                            css={{
-                                backgroundColor: 'var(--color-core-white)',
-                                borderColor: 'var(--color-core-green)',
-                                '&[data-state="checked"]': {
-                                  backgroundColor: 'var(--color-primary-800)',
-                                  borderColor: 'var(--color-core-green)',
-                                },
-                            }}
-                          />
-                        </Checkbox.Root>
-                      </Table.ColumnHeader>
-                      <Table.ColumnHeader color="var(--color-core-white)" fontWeight={600}>
-                        Date Created
-                      </Table.ColumnHeader>
-                      <Table.ColumnHeader color="var(--color-core-white)" fontWeight={600}>
-                        Report Name
-                      </Table.ColumnHeader>
-                      <Table.ColumnHeader color="var(--color-core-white)" fontWeight={600}>
-                        Emails
-                      </Table.ColumnHeader>
-                      <Table.ColumnHeader color="var(--color-core-white)" fontWeight={600} textAlign="right">
-                        Format
-                      </Table.ColumnHeader>
-                    </Table.Row>
-                  </Table.Header>
-                  <Table.Body>
-                    {reports.length === 0 && (
-                      <Table.Row>
-                        <Table.Cell colSpan={5} textAlign="center" paddingY="32px" color="var(--color-black-500)">
-                          No reports found.
-                        </Table.Cell>
-                      </Table.Row>
-                    )}
-                    {reports.map((report) => (
-                      <Table.Row key={report.report_id}>
-                        <Table.Cell>
-                          <Checkbox.Root
-                            checked={selectedIds.includes(report.report_id)}
-                            onCheckedChange={() => toggleOne(report.report_id)}
-                          >
-                            <Checkbox.HiddenInput />
-                            <Checkbox.Control
-                                borderRadius="md"
-                                css={{
-                                    backgroundColor: 'var(--color-core-white)',
-                                    borderColor: 'var(--color-core-green)',
-                                    '&[data-state="checked"]': {
-                                      backgroundColor: 'var(--color-primary-800)',
-                                      borderColor: 'var(--color-core-green)',
-                                    },
-                                }}
-                            />
-                          </Checkbox.Root>
-                        </Table.Cell>
-                        <Table.Cell>{formatDate(report.date_created)}</Table.Cell>
-                        <Table.Cell>
-                          <Button
-                            variant="plain"
-                            height="auto"
-                            minWidth="auto"
-                            padding="0"
-                            color="var(--color-core-green)"
-                            textDecoration="underline"
-                            onClick={() => handleDownload(report.report_id)}
-                            loading={downloadingId === report.report_id}
-                            loadingText={report.title || 'Untitled report'}
-                          >
-                            {report.title || 'Untitled report'}
-                          </Button>
-                        </Table.Cell>
-                        <Table.Cell>
-                          {report.emails && report.emails.length > 0 ? report.emails.join(', ') : '—'}
-                        </Table.Cell>
-                        <Table.Cell textAlign="right">
-                          {getFormatLabel(report.object_url)}
-                        </Table.Cell>
-                      </Table.Row>
-                    ))}
-                  </Table.Body>
-                </Table.Root>
+              {!error && activeTab === 'reports' && (
+                <DataTable
+                  variant="outline"
+                  columns={reportColumns}
+                  rows={reports}
+                  rowKey={(report) => report.report_id}
+                  isLoading={loading}
+                  loadingLabel="Loading reports…"
+                  skeletonRows={ROWS_PER_PAGE}
+                  emptyMessage="No reports found."
+                  selection={{
+                    label: 'Select all reports',
+                    isSelected: (report) => selectedIds.includes(report.report_id),
+                    onToggleRow: (report) => toggleOne(report.report_id),
+                    allSelected,
+                    someSelected,
+                    onToggleAll: toggleAll,
+                    disabled: loading,
+                  }}
+                />
               )}
      
               {/* Schedule tab content */}
diff --git a/apps/frontend/test/components/DataTable.test.tsx b/apps/frontend/test/components/DataTable.test.tsx
new file mode 100644
index 00000000..ca126b88
--- /dev/null
+++ b/apps/frontend/test/components/DataTable.test.tsx
@@ -0,0 +1,130 @@
+import userEvent from '@testing-library/user-event';
+import { render, screen, fireEvent, within } from '../utils';
+import DataTable, { type DataTableColumn } from '@/app/components/DataTable';
+
+type Row = { id: number; name: string; amount: string };
+
+const rows: Row[] = [
+  { id: 1, name: 'First', amount: '$10' },
+  { id: 2, name: 'Second', amount: '$20' },
+];
+
+const columns: DataTableColumn<Row>[] = [
+  { key: 'name', header: 'Name', width: '70%', cell: (row) => row.name },
+  { key: 'amount', header: 'Amount', width: '30%', align: 'right', cell: (row) => row.amount },
+];
+
+function renderTable(props: Partial<React.ComponentProps<typeof DataTable<Row>>> = {}) {
+  return render(
+    <DataTable columns={columns} rows={rows} rowKey={(row) => row.id} {...props} />,
+  );
+}
+
+describe('DataTable', () => {
+  it('renders a header and a row per record', () => {
+    renderTable();
+
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Amount')).toBeInTheDocument();
+    expect(screen.getByText('First')).toBeInTheDocument();
+    expect(screen.getByText('$20')).toBeInTheDocument();
+  });
+
+  it('shows the empty message when there are no rows', () => {
+    renderTable({ rows: [], emptyMessage: 'Nothing here.' });
+
+    expect(screen.getByText('Nothing here.')).toBeInTheDocument();
+  });
+
+  describe('when loading', () => {
+    it('keeps the header and replaces the rows with skeletons', () => {
+      renderTable({ isLoading: true, skeletonRows: 4, loadingLabel: 'Loading things…' });
+
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      expect(screen.queryByText('First')).not.toBeInTheDocument();
+      // Header row plus one row per skeleton.
+      expect(screen.getAllByRole('row')).toHaveLength(5);
+    });
+
+    it('announces itself once', () => {
+      renderTable({ isLoading: true, loadingLabel: 'Loading things…' });
+
+      expect(screen.getByRole('status')).toHaveTextContent('Loading things…');
+    });
+
+    it('does not fall back to the empty message', () => {
+      renderTable({ isLoading: true, rows: [], emptyMessage: 'Nothing here.' });
+
+      expect(screen.queryByText('Nothing here.')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('row interaction', () => {
+    it('calls onRowClick when a row is clicked', () => {
+      const onRowClick = jest.fn();
+      renderTable({ onRowClick });
+
+      fireEvent.click(screen.getByText('Second'));
+
+      expect(onRowClick).toHaveBeenCalledWith(rows[1]);
+    });
+
+    it('opens a row from the keyboard', () => {
+      const onRowClick = jest.fn();
+      renderTable({ onRowClick });
+
+      const row = screen.getByText('First').closest('tr') as HTMLElement;
+      fireEvent.keyDown(row, { key: 'Enter' });
+
+      expect(onRowClick).toHaveBeenCalledWith(rows[0]);
+    });
+
+    it('leaves rows unfocusable when they are not clickable', () => {
+      renderTable();
+
+      const row = screen.getByText('First').closest('tr') as HTMLElement;
+      expect(row).not.toHaveAttribute('tabindex');
+    });
+  });
+
+  describe('selection', () => {
+    const selection = {
+      label: 'Select all rows',
+      isSelected: (row: Row) => row.id === 1,
+      onToggleRow: jest.fn(),
+      allSelected: false,
+      someSelected: true,
+      onToggleAll: jest.fn(),
+    };
+
+    beforeEach(() => jest.clearAllMocks());
+
+    it('adds a checkbox column', () => {
+      renderTable({ selection });
+
+      expect(screen.getByLabelText('Select all rows')).toBeInTheDocument();
+    });
+
+    it('toggles a single row', async () => {
+      const user = userEvent.setup();
+      renderTable({ selection });
+
+      const row = screen.getByText('Second').closest('tr') as HTMLElement;
+      await user.click(within(row).getByRole('checkbox'));
+
+      expect(selection.onToggleRow).toHaveBeenCalledWith(rows[1]);
+    });
+
+    it('does not open the row when its checkbox is clicked', async () => {
+      const user = userEvent.setup();
+      const onRowClick = jest.fn();
+      renderTable({ selection, onRowClick });
+
+      const row = screen.getByText('First').closest('tr') as HTMLElement;
+      await user.click(within(row).getByRole('checkbox'));
+
+      expect(selection.onToggleRow).toHaveBeenCalledTimes(1);
+      expect(onRowClick).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/apps/frontend/test/components/LoadingState.test.tsx b/apps/frontend/test/components/LoadingState.test.tsx
new file mode 100644
index 00000000..1ea4eb43
--- /dev/null
+++ b/apps/frontend/test/components/LoadingState.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from '../utils';
+import LoadingState from '@/app/components/LoadingState';
+import Spinner from '@/app/components/Spinner';
+
+describe('LoadingState', () => {
+  it('names the region for screen readers without showing the text', () => {
+    render(<LoadingState label="Loading projects…" />);
+
+    expect(screen.getByRole('status', { name: 'Loading projects…' })).toBeInTheDocument();
+    expect(screen.queryByText('Loading projects…')).not.toBeInTheDocument();
+  });
+
+  it('can show the label as text', () => {
+    render(<LoadingState label="Loading projects…" showLabel />);
+
+    expect(screen.getByText('Loading projects…')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent('Loading projects…');
+  });
+});
+
+describe('Spinner', () => {
+  it('is decorative unless it is given a label', () => {
+    const { container } = render(<Spinner />);
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(container.querySelector('.branch-spinner')).toBeInTheDocument();
+  });
+
+  it('announces itself when it is the only loading cue', () => {
+    render(<Spinner label="Saving…" />);
+
+    expect(screen.getByRole('status', { name: 'Saving…' })).toBeInTheDocument();
+  });
+});
diff --git a/apps/frontend/test/components/ProjectPage.test.tsx b/apps/frontend/test/components/ProjectPage.test.tsx
index e033802f..1f039539 100644
--- a/apps/frontend/test/components/ProjectPage.test.tsx
+++ b/apps/frontend/test/components/ProjectPage.test.tsx
@@ -40,7 +40,7 @@ beforeEach(() => {
 describe('Project Page', () => {
     it('renders loading state initially', () => {
         render(<ProjectPage />);
-        expect(screen.getByText('Loading project...')).toBeInTheDocument();
+        expect(screen.getByRole('status', { name: 'Loading project…' })).toBeInTheDocument();
     });
 
     it('renders the project name as heading', async () => {