diff --git a/src/components/catalogs/CatalogCard.tsx b/src/components/catalogs/CatalogCard.tsx
index a5ba02c..f7d3bb9 100644
--- a/src/components/catalogs/CatalogCard.tsx
+++ b/src/components/catalogs/CatalogCard.tsx
@@ -2,15 +2,14 @@ import classNames from "classnames";
 import { Children, ReactElement, ReactNode, useState } from "react";
 import { MdCode, MdKeyboardArrowDown } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
-import { useAnchoredElement } from "../../hooks/useAnchoredElement";
 import { SqlQueryEmbed } from "../catalog/SqlQueryEmbed";
 import { Button } from "../core/Button";
-import { CardActionsMenu, CatalogCardAction } from "../ui/CardActionsMenu";
-import { CardAnchorLink } from "../ui/CardAnchorLink";
 import { AppTooltip } from "../ui/AppTooltip";
+import { Card, CardAction, Field } from "../ui/Card";
 import { originalDataCatalogLink } from "./catalogActions";
 
-export type { CatalogCardAction };
+export type { CardAction as CatalogCardAction };
+export { Field };
 
 export function getSourceLink(bibcode: string): string {
   return `https://ui.adsabs.harvard.edu/abs/${bibcode}/abstract`;
@@ -31,14 +30,13 @@ export function CatalogCard({
 }: {
   title: string;
   children: ReactNode;
-  actions?: CatalogCardAction[];
+  actions?: CardAction[];
   originalDataSql?: string;
   anchorId?: string;
   className?: string;
   variant?: "fields" | "block";
 }): ReactElement {
   const navigate = useNavigate();
-  const { ref, highlighted } = useAnchoredElement(anchorId ?? "");
   const [originalDataOpen, setOriginalDataOpen] = useState(false);
   const [originalDataMounted, setOriginalDataMounted] = useState(false);
 
@@ -55,99 +53,75 @@ export function CatalogCard({
     setOriginalDataOpen(true);
   }
 
-  const cardActions = actions ?? [];
-  const hasActions = cardActions.length > 0;
-  const hasHeaderControls = hasActions || Boolean(originalDataSql);
-
-  return (
-    <div
-      ref={anchorId ? ref : undefined}
-      id={anchorId}
-      className={classNames(
-        "rounded-lg border border-border bg-surface p-3",
-        anchorId && highlighted && "card-anchor-highlight",
-        className,
-      )}
+  const headerControls = originalDataSql ? (
+    <Button
+      type="button"
+      className="!p-1.5 cursor-pointer"
+      onClick={toggleOriginalData}
+      aria-label={
+        originalDataOpen ? "Hide original data" : "View original data"
+      }
+      aria-expanded={originalDataOpen}
     >
+      <MdKeyboardArrowDown
+        className={classNames(
+          "size-5 text-muted transition-transform duration-300 ease-in-out motion-reduce:transition-none",
+          originalDataOpen && "rotate-180",
+        )}
+        aria-hidden
+      />
+    </Button>
+  ) : null;
+
+  const afterChildren =
+    originalDataSql && originalDataMounted ? (
       <div
-        className={
-          hasHeaderControls || anchorId
-            ? "group/card flex items-start justify-between gap-2 mb-2"
-            : "mb-2"
-        }
+        className={classNames(
+          "grid transition-[grid-template-rows] duration-300 ease-in-out motion-reduce:transition-none",
+          originalDataOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        )}
       >
-        <h3 className="text-base font-semibold min-w-0 flex items-center gap-1.5">
-          {title}
-          {anchorId && <CardAnchorLink anchorId={anchorId} />}
-        </h3>
-        {hasHeaderControls ? (
-          <div className="flex shrink-0 items-center gap-0.5">
-            {originalDataSql ? (
-              <Button
-                type="button"
-                className="!p-1.5 cursor-pointer"
-                onClick={toggleOriginalData}
-                aria-label={
-                  originalDataOpen ? "Hide original data" : "View original data"
-                }
-                aria-expanded={originalDataOpen}
-              >
-                <MdKeyboardArrowDown
-                  className={classNames(
-                    "size-5 text-muted transition-transform duration-300 ease-in-out motion-reduce:transition-none",
-                    originalDataOpen && "rotate-180",
-                  )}
-                  aria-hidden
-                />
-              </Button>
-            ) : null}
-            {hasActions ? <CardActionsMenu actions={cardActions} /> : null}
-          </div>
-        ) : null}
-      </div>
-      {variant === "fields" ? (
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-base">
-          {children}
-        </dl>
-      ) : (
-        children
-      )}
-      {originalDataSql && originalDataMounted ? (
-        <div
-          className={classNames(
-            "grid transition-[grid-template-rows] duration-300 ease-in-out motion-reduce:transition-none",
-            originalDataOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
-          )}
-        >
-          <div className="min-h-0 overflow-hidden">
-            <div
-              className={classNames(
-                "transition-opacity duration-300 ease-in-out motion-reduce:transition-none",
-                originalDataOpen ? "opacity-100" : "opacity-0",
-              )}
-            >
-              <div className="mt-3 flex flex-col gap-3 border-t border-border pt-3">
-                <SqlQueryEmbed key={originalDataSql} sql={originalDataSql} />
-                <div className="flex justify-end">
-                  <AppTooltip content="Open in data catalog">
-                    <Button
-                      type="button"
-                      className="!p-1.5 cursor-pointer"
-                      onClick={() =>
-                        navigate(originalDataCatalogLink(originalDataSql))
-                      }
-                      aria-label="Open in data catalog"
-                    >
-                      <MdCode className="size-5 text-muted" aria-hidden />
-                    </Button>
-                  </AppTooltip>
-                </div>
+        <div className="min-h-0 overflow-hidden">
+          <div
+            className={classNames(
+              "transition-opacity duration-300 ease-in-out motion-reduce:transition-none",
+              originalDataOpen ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <div className="mt-3 flex flex-col gap-3 border-t border-border pt-3">
+              <SqlQueryEmbed key={originalDataSql} sql={originalDataSql} />
+              <div className="flex justify-end">
+                <AppTooltip content="Open in data catalog">
+                  <Button
+                    type="button"
+                    className="!p-1.5 cursor-pointer"
+                    onClick={() =>
+                      navigate(originalDataCatalogLink(originalDataSql))
+                    }
+                    aria-label="Open in data catalog"
+                  >
+                    <MdCode className="size-5 text-muted" aria-hidden />
+                  </Button>
+                </AppTooltip>
               </div>
             </div>
           </div>
         </div>
-      ) : null}
-    </div>
+      </div>
+    ) : null;
+
+  return (
+    <Card
+      title={title}
+      actions={actions}
+      headerControls={headerControls}
+      afterChildren={afterChildren}
+      anchorId={anchorId}
+      className={className}
+      variant={variant}
+    >
+      {children}
+    </Card>
   );
 }
 
@@ -155,21 +129,6 @@ export function CatalogNoData(): ReactElement {
   return <p className="col-span-2 text-muted text-base">No data available.</p>;
 }
 
-export function Field({
-  label,
-  children,
-}: {
-  label: ReactNode;
-  children: ReactNode;
-}): ReactElement {
-  return (
-    <>
-      <dt className="text-muted">{label}</dt>
-      <dd>{children}</dd>
-    </>
-  );
-}
-
 export function CatalogDetailSection({
   title,
   children,
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..b6b2fce
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,87 @@
+import classNames from "classnames";
+import { ReactElement, ReactNode } from "react";
+import { useAnchoredElement } from "../../hooks/useAnchoredElement";
+import { CardActionsMenu, CardAction } from "./CardActionsMenu";
+import { CardAnchorLink } from "./CardAnchorLink";
+
+export type { CardAction };
+
+export function Card({
+  title,
+  children,
+  actions,
+  headerControls,
+  afterChildren,
+  anchorId,
+  className,
+  variant = "fields",
+}: {
+  title: string;
+  children: ReactNode;
+  actions?: CardAction[];
+  headerControls?: ReactNode;
+  afterChildren?: ReactNode;
+  anchorId?: string;
+  className?: string;
+  variant?: "fields" | "block";
+}): ReactElement {
+  const { ref, highlighted } = useAnchoredElement(anchorId ?? "");
+  const cardActions = actions ?? [];
+  const hasActions = cardActions.length > 0;
+  const hasHeaderControls =
+    hasActions || Boolean(headerControls) || Boolean(anchorId);
+
+  return (
+    <div
+      ref={anchorId ? ref : undefined}
+      id={anchorId}
+      className={classNames(
+        "rounded-lg border border-border bg-surface p-3",
+        anchorId && highlighted && "card-anchor-highlight",
+        className,
+      )}
+    >
+      <div
+        className={
+          hasHeaderControls
+            ? "group/card flex items-start justify-between gap-2 mb-2"
+            : "mb-2"
+        }
+      >
+        <h3 className="text-base font-semibold min-w-0 flex items-center gap-1.5">
+          {title}
+          {anchorId && <CardAnchorLink anchorId={anchorId} />}
+        </h3>
+        {hasHeaderControls ? (
+          <div className="flex shrink-0 items-center gap-0.5">
+            {headerControls}
+            {hasActions ? <CardActionsMenu actions={cardActions} /> : null}
+          </div>
+        ) : null}
+      </div>
+      {variant === "fields" ? (
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-base">
+          {children}
+        </dl>
+      ) : (
+        children
+      )}
+      {afterChildren}
+    </div>
+  );
+}
+
+export function Field({
+  label,
+  children,
+}: {
+  label: ReactNode;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <>
+      <dt className="text-muted">{label}</dt>
+      <dd>{children}</dd>
+    </>
+  );
+}
diff --git a/src/components/ui/CardActionsMenu.tsx b/src/components/ui/CardActionsMenu.tsx
index 97a56e3..4e41f64 100644
--- a/src/components/ui/CardActionsMenu.tsx
+++ b/src/components/ui/CardActionsMenu.tsx
@@ -4,18 +4,18 @@ import { MdMoreVert } from "react-icons/md";
 import classNames from "classnames";
 import { Button } from "../core/Button";
 
-type CatalogCardActionCommon = {
+type CardActionCommon = {
   title: string;
   description?: string;
   icon?: IconType;
 };
 
-export type CatalogCardAction =
-  | (CatalogCardActionCommon & { href: string; onClick?: never })
-  | (CatalogCardActionCommon & { onClick: () => void; href?: never });
+export type CardAction =
+  | (CardActionCommon & { href: string; onClick?: never })
+  | (CardActionCommon & { onClick: () => void; href?: never });
 
 interface CardActionsMenuProps {
-  actions: CatalogCardAction[];
+  actions: CardAction[];
 }
 
 const menuItemClassName =
@@ -24,7 +24,7 @@ const menuItemClassName =
 function ActionMenuItemContent({
   action,
 }: {
-  action: CatalogCardAction;
+  action: CardAction;
 }): ReactElement {
   const Icon = action.icon;
 
@@ -77,7 +77,7 @@ export function CardActionsMenu({
     return () => document.removeEventListener("mousedown", handlePointerDown);
   }, [open]);
 
-  function runAction(action: CatalogCardAction): void {
+  function runAction(action: CardAction): void {
     if ("onClick" in action && action.onClick) {
       action.onClick();
     }
diff --git a/src/pages/TableDetails.tsx b/src/pages/TableDetails.tsx
index 7701c81..8c9f8fa 100644
--- a/src/pages/TableDetails.tsx
+++ b/src/pages/TableDetails.tsx
@@ -1,10 +1,10 @@
+import classNames from "classnames";
 import { KeyboardEvent, ReactElement, useEffect, useState } from "react";
 import {
   Bibliography,
-  CrossmatchTriageStatus,
   DataType,
   GetTableResponse,
-  TableCrossmatchResultStatus,
+  TableProgress,
 } from "../clients/admin/types.gen";
 import { getTable, patchTable } from "../clients/admin/sdk.gen";
 import { useNavigate, useParams } from "react-router-dom";
@@ -14,12 +14,13 @@ import {
   Column,
   CommonTable,
 } from "../components/ui/CommonTable";
-import { Button } from "../components/core/Button";
 import { CopyButton } from "../components/ui/CopyButton";
-import { Badge, BadgeType } from "../components/ui/Badge";
+import { Badge } from "../components/ui/Badge";
 import { Link } from "../components/core/Link";
 import { Loading } from "../components/core/Loading";
+import { Card, CardAction, Field } from "../components/ui/Card";
 import { ErrorPage } from "../components/ui/ErrorPage";
+import { Hint } from "../components/ui/Hint";
 import { useDataFetching } from "../hooks/useDataFetching";
 import { adminClient } from "../clients/config";
 import { isLoggedIn } from "../auth/token";
@@ -44,36 +45,36 @@ function asDataType(value: unknown): DataType {
 }
 
 function renderBibliography(bib: Bibliography): ReactElement {
-  let authors = "";
-
-  if (bib.authors.length >= 1) {
-    authors += bib.authors[0];
-  }
-  if (bib.authors.length >= 2) {
-    authors += " et al.";
-  }
-
-  authors += ` ${bib.year}`;
-
-  const targetLink =
-    "https://ui.adsabs.harvard.edu/abs/" + bib.bibcode + "/abstract";
+  const targetLink = `https://ui.adsabs.harvard.edu/abs/${bib.bibcode}/abstract`;
 
   return (
-    <CopyButton textToCopy={bib.bibcode}>
-      <div>
-        <Link href={targetLink} external>
-          {bib.bibcode}
-        </Link>{" "}
-        | {authors}: "{bib.title}"
-      </div>
-    </CopyButton>
+    <div className="flex items-center gap-2">
+      <Link href={targetLink} external>
+        {bib.bibcode}
+      </Link>
+      <Hint
+        hintContent={
+          <span>
+            "{bib.title}". {bib.authors.join(", ")}. {bib.year}
+          </span>
+        }
+        className="gap-1"
+      />
+    </div>
   );
 }
 
 function renderTime(time: string): string {
-  const dt = new Date(time as string);
-
-  return dt.toString();
+  const dt = new Date(time);
+
+  return dt.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short",
+  });
 }
 
 function renderUCD(ucd: CellPrimitive): ReactElement {
@@ -106,6 +107,7 @@ interface TableMetaProps {
   tableName: string;
   table: GetTableResponse;
   onAfterPatch: () => void;
+  className?: string;
 }
 
 function TableMeta(props: TableMetaProps): ReactElement {
@@ -113,7 +115,8 @@ function TableMeta(props: TableMetaProps): ReactElement {
   const canEdit = isLoggedIn();
   const [editingName, setEditingName] = useState(false);
   const [editingDescription, setEditingDescription] = useState(false);
-  const showEditPencils = canEdit && !editingName && !editingDescription;
+  const showNameEdit = canEdit && !editingDescription;
+  const showSlugEdit = canEdit && !editingName;
   const [draftName, setDraftName] = useState(props.tableName);
   const [draftDescription, setDraftDescription] = useState(
     props.table.description,
@@ -252,9 +255,7 @@ function TableMeta(props: TableMetaProps): ReactElement {
     );
   }
 
-  const columns = [{ name: "Parameter" }, { name: "Value" }];
-
-  const datatypeValue: CellPrimitive = canEdit ? (
+  const datatypeControl = canEdit ? (
     <select
       value={asDataType(props.table.meta.datatype)}
       onChange={(event) => void commitDatatype(event.target.value as DataType)}
@@ -271,169 +272,245 @@ function TableMeta(props: TableMetaProps): ReactElement {
     String(props.table.meta.datatype)
   );
 
-  const values: Record<string, CellPrimitive>[] = [
-    {
-      Parameter: "Table ID",
-      Value: props.table.id,
-    },
-    {
-      Parameter: "Source paper",
-      Value: renderBibliography(props.table.bibliography),
-    },
-    {
-      Parameter: "Number of records",
-      Value: props.table.rows_num,
-    },
-    {
-      Parameter: "Type of data",
-      Value: datatypeValue,
-    },
-    {
-      Parameter: "Modification time",
-      Value: renderTime(props.table.meta.modification_dt as string),
-    },
-  ];
-
   return (
-    <CommonTable columns={columns} data={values} className="pb-5">
-      <div className="flex items-start gap-2 mb-2">
-        {editingDescription ? (
-          <input
-            type="text"
-            value={draftDescription}
-            onChange={(event) => setDraftDescription(event.target.value)}
-            onKeyDown={handleDescriptionKeyDown}
-            disabled={savingField === "description"}
-            className="text-2xl font-bold bg-transparent border border-border rounded px-2 py-0.5 flex-1 min-w-0 text-primary"
-            autoFocus
-          />
-        ) : (
-          <h2 className="text-2xl font-bold flex-1 min-w-0">
-            {props.table.description}
-          </h2>
-        )}
-        {showEditPencils && (
-          <button
-            type="button"
-            aria-label="Edit table description"
-            className="shrink-0 p-1 rounded text-muted hover:text-primary cursor-pointer"
-            onClick={() => {
-              setPatchError(null);
-              setEditingDescription(true);
-            }}
-          >
-            <MdEdit className="w-5 h-5" />
-          </button>
-        )}
-      </div>
-      <div className="flex items-center gap-2">
-        {editingName ? (
-          <input
-            type="text"
-            value={draftName}
-            onChange={(event) => setDraftName(event.target.value)}
-            onKeyDown={handleNameKeyDown}
-            disabled={savingField === "name"}
-            className="text-subtle font-mono bg-transparent border border-border rounded px-2 py-0.5 flex-1 min-w-0"
-            autoFocus
-          />
-        ) : (
-          <p className="text-subtle font-mono flex-1 min-w-0 break-all">
-            {props.tableName}
-          </p>
-        )}
-        {showEditPencils && (
-          <button
-            type="button"
-            aria-label="Edit table name"
-            className="shrink-0 p-1 rounded text-muted hover:text-primary cursor-pointer"
-            onClick={() => {
-              setPatchError(null);
-              setEditingName(true);
-            }}
-          >
-            <MdEdit className="w-5 h-5" />
-          </button>
-        )}
-      </div>
+    <Card title="Overview" variant="fields" className={props.className}>
+      <Field label="Table name">
+        <div className="flex items-center gap-2 min-w-0">
+          {editingDescription ? (
+            <input
+              type="text"
+              value={draftDescription}
+              onChange={(event) => setDraftDescription(event.target.value)}
+              onKeyDown={handleDescriptionKeyDown}
+              disabled={savingField === "description"}
+              className="bg-transparent border border-border rounded px-2 py-0.5 flex-1 min-w-0 text-primary"
+              autoFocus
+            />
+          ) : (
+            <span className="min-w-0">{props.table.description}</span>
+          )}
+          {showNameEdit && (
+            <button
+              type="button"
+              aria-label="Edit table name"
+              className="shrink-0 p-1 rounded text-muted hover:text-primary cursor-pointer"
+              onClick={() => {
+                setPatchError(null);
+                setEditingDescription(true);
+              }}
+            >
+              <MdEdit className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      </Field>
+      <Field label="Slug">
+        <div className="flex items-center gap-2 min-w-0">
+          {editingName ? (
+            <input
+              type="text"
+              value={draftName}
+              onChange={(event) => setDraftName(event.target.value)}
+              onKeyDown={handleNameKeyDown}
+              disabled={savingField === "name"}
+              className="font-mono bg-transparent border border-border rounded px-2 py-0.5 flex-1 min-w-0"
+              autoFocus
+            />
+          ) : (
+            <span className="font-mono min-w-0 break-all">
+              {props.tableName}
+            </span>
+          )}
+          {showSlugEdit && (
+            <button
+              type="button"
+              aria-label="Edit table slug"
+              className="shrink-0 p-1 rounded text-muted hover:text-primary cursor-pointer"
+              onClick={() => {
+                setPatchError(null);
+                setEditingName(true);
+              }}
+            >
+              <MdEdit className="w-4 h-4" />
+            </button>
+          )}
+        </div>
+      </Field>
+      <Field label="Table ID">{props.table.id}</Field>
+      <Field label="Source paper">
+        {renderBibliography(props.table.bibliography)}
+      </Field>
+      <Field label="Type of data">{datatypeControl}</Field>
+      <Field label="Modification time">
+        {renderTime(props.table.meta.modification_dt as string)}
+      </Field>
       {patchError ? (
-        <p className="text-sm text-danger mt-2">{patchError}</p>
+        <>
+          <dt className="sr-only">Error</dt>
+          <dd className="col-span-2 text-sm text-danger">{patchError}</dd>
+        </>
       ) : null}
-    </CommonTable>
+    </Card>
   );
 }
 
-interface CrossmatchStatsProps {
-  table: GetTableResponse;
-  tableName: string;
-  navigate: (path: string) => void;
+function formatPercent(marked: number, total: number): string {
+  if (total <= 0) {
+    return "";
+  }
+  return `${Math.floor((marked / total) * 100)}%`;
 }
 
-function CrossmatchStats(props: CrossmatchStatsProps): ReactElement {
-  const columns: Column[] = [{ name: "Status" }, { name: "Count" }];
+function formatProgressValue(count: number, total: number): ReactElement {
+  const percent = formatPercent(count, total);
+  if (!percent) {
+    return <>{count}</>;
+  }
 
-  const values: Record<string, CellPrimitive>[] = [];
+  return (
+    <>
+      {count} <span className="text-muted">({percent})</span>
+    </>
+  );
+}
 
-  if (!props.table.crossmatch) {
-    return <div></div>;
-  }
+function catalogProgressTabClassName(isActive: boolean): string {
+  return classNames(
+    "w-full text-left px-2 py-1 text-xs font-medium border-l-2 transition-colors truncate",
+    isActive
+      ? "border-accent text-primary"
+      : "border-transparent text-muted hover:text-primary hover:border-border",
+  );
+}
 
-  const triageLabels: Record<CrossmatchTriageStatus, string> = {
-    unprocessed: "Unprocessed",
-    pending: "Pending",
-    resolved: "Resolved",
-  };
-  const resultLabels: Record<TableCrossmatchResultStatus, string> = {
-    not_started: "Not started",
-    in_progress: "In progress",
-    done: "Done",
-  };
-  const resultBadgeTypes: Record<TableCrossmatchResultStatus, BadgeType> = {
-    not_started: "info",
-    in_progress: "warning",
-    done: "success",
-  };
-  const triageOrder: CrossmatchTriageStatus[] = [
-    "unprocessed",
-    "pending",
-    "resolved",
-  ];
+function TableProgressSummaryCard({
+  progress,
+  tableName,
+  hasCrossmatch,
+  navigate,
+  className,
+}: {
+  progress: TableProgress;
+  tableName: string;
+  hasCrossmatch: boolean;
+  navigate: (path: string) => void;
+  className?: string;
+}): ReactElement {
+  const actions: CardAction[] = hasCrossmatch
+    ? [
+        {
+          title: "View crossmatch results",
+          onClick: () => {
+            navigate(
+              `/crossmatch?table_name=${encodeURIComponent(tableName)}&triage_status=pending`,
+            );
+          },
+        },
+      ]
+    : [];
 
-  triageOrder.forEach((status) => {
-    const count = props.table.crossmatch.statuses[status] ?? 0;
-    if (count <= 0) {
-      return;
-    }
-    values.push({
-      Status: triageLabels[status],
-      Count: count,
-    });
-  });
+  return (
+    <Card
+      title="Progress"
+      variant="fields"
+      className={className}
+      actions={actions}
+    >
+      <Field label="Total records">{progress.total_records}</Field>
+      <Field label="Waiting for cross-identification">
+        {formatProgressValue(progress.unprocessed, progress.total_records)}
+      </Field>
+      <Field label="Waiting for manual check">
+        {formatProgressValue(progress.pending_triage, progress.total_records)}
+      </Field>
+      <Field label="Waiting for submission">
+        {formatProgressValue(
+          progress.resolved_unsubmitted,
+          progress.total_records,
+        )}
+      </Field>
+      <Field label="Submitted">
+        {formatProgressValue(progress.submitted, progress.total_records)}
+      </Field>
+    </Card>
+  );
+}
 
-  function handleViewCrossmatchResults(event: React.MouseEvent): void {
-    const url = `/crossmatch?table_name=${encodeURIComponent(props.tableName)}&triage_status=pending`;
+function CatalogProgressCard({
+  catalogs,
+  totalRecords,
+  className,
+}: {
+  catalogs: TableProgress["catalogs"];
+  totalRecords: number;
+  className?: string;
+}): ReactElement {
+  const catalogEntries = Object.entries(catalogs);
+  const [selectedCatalog, setSelectedCatalog] = useState(
+    catalogEntries[0]?.[0] ?? "",
+  );
 
-    if (event.ctrlKey || event.metaKey) {
-      window.open(url, "_blank");
-    } else {
-      props.navigate(url);
+  useEffect(() => {
+    if (
+      catalogEntries.length > 0 &&
+      !catalogEntries.some(([name]) => name === selectedCatalog)
+    ) {
+      setSelectedCatalog(catalogEntries[0][0]);
     }
-  }
+  }, [catalogEntries, selectedCatalog]);
+
+  const selectedProgress = catalogs[selectedCatalog];
 
   return (
-    <CommonTable columns={columns} data={values} className="pb-5">
-      <div className="flex justify-between items-center">
-        <div className="flex items-center gap-2">
-          <h2 className="text-2xl font-bold">Crossmatch</h2>
-          <Badge type={resultBadgeTypes[props.table.crossmatch.result]}>
-            {resultLabels[props.table.crossmatch.result]}
-          </Badge>
-        </div>
-        <Button onClick={handleViewCrossmatchResults}>
-          View crossmatch results
-        </Button>
+    <Card title="Catalog progress" variant="block" className={className}>
+      <div className="flex items-start gap-3">
+        <nav
+          className="flex flex-col gap-0.5 shrink-0 w-max border-r border-border pr-2"
+          role="tablist"
+        >
+          {catalogEntries.map(([catalogName, catalogProgress]) => {
+            const markedPercent = formatPercent(
+              catalogProgress.structured,
+              totalRecords,
+            );
+
+            return (
+              <button
+                key={catalogName}
+                type="button"
+                role="tab"
+                aria-selected={catalogName === selectedCatalog}
+                className={catalogProgressTabClassName(
+                  catalogName === selectedCatalog,
+                )}
+                onClick={() => setSelectedCatalog(catalogName)}
+              >
+                {catalogName}
+                {markedPercent ? (
+                  <span className="text-muted"> ({markedPercent})</span>
+                ) : null}
+              </button>
+            );
+          })}
+        </nav>
+        {selectedProgress ? (
+          <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-base min-w-0 flex-1 content-start">
+            <Field label="Marked">
+              {formatProgressValue(selectedProgress.structured, totalRecords)}
+            </Field>
+            <Field label="Aggregated">
+              {formatProgressValue(selectedProgress.in_layer2, totalRecords)}
+            </Field>
+            <Field label="Waiting for aggregation">
+              {formatProgressValue(
+                selectedProgress.layer2_pending,
+                totalRecords,
+              )}
+            </Field>
+          </dl>
+        ) : null}
       </div>
-    </CommonTable>
+    </Card>
   );
 }
 
@@ -483,9 +560,9 @@ function ColumnInfo(props: ColumnInfoProps): ReactElement {
   });
 
   return (
-    <CommonTable columns={columns} data={values}>
-      <h2 className="text-2xl font-bold">Column information</h2>
-    </CommonTable>
+    <Card title="Column information" variant="block">
+      <CommonTable columns={columns} data={values} />
+    </Card>
   );
 }
 
@@ -523,19 +600,35 @@ export function TableDetailsPage(): ReactElement {
     if (error) return <ErrorPage message={error} />;
     if (payload) {
       return (
-        <>
-          <TableMeta
-            tableName={tableName ?? ""}
-            table={payload}
-            onAfterPatch={() => setRefreshKey((key) => key + 1)}
-          />
-          <CrossmatchStats
-            table={payload}
-            tableName={tableName ?? ""}
-            navigate={navigate}
-          />
+        <div className="space-y-5">
+          <div className="grid grid-cols-1 lg:grid-cols-6 gap-5">
+            <TableMeta
+              tableName={tableName ?? ""}
+              table={payload}
+              onAfterPatch={() => setRefreshKey((key) => key + 1)}
+              className="lg:col-span-6"
+            />
+            <TableProgressSummaryCard
+              progress={payload.progress}
+              tableName={tableName ?? ""}
+              hasCrossmatch={Boolean(payload.crossmatch)}
+              navigate={navigate}
+              className={
+                Object.keys(payload.progress.catalogs).length > 0
+                  ? "lg:col-span-3"
+                  : "lg:col-span-6"
+              }
+            />
+            {Object.keys(payload.progress.catalogs).length > 0 ? (
+              <CatalogProgressCard
+                catalogs={payload.progress.catalogs}
+                totalRecords={payload.progress.total_records}
+                className="lg:col-span-3"
+              />
+            ) : null}
+          </div>
           <ColumnInfo table={payload} />
-        </>
+        </div>
       );
     }