diff --git a/app/(creator)/dashboard/page.tsx b/app/(creator)/dashboard/page.tsx
index 0c494bc..7d0b876 100644
--- a/app/(creator)/dashboard/page.tsx
+++ b/app/(creator)/dashboard/page.tsx
@@ -4,6 +4,7 @@ import { Plus } from "lucide-react";
 import { createFormAction } from "@/app/(creator)/actions";
 import { DashboardFormBrowser } from "@/components/dashboard-form-browser";
 import { EmptyState } from "@/components/empty-state";
+import { PageHeader } from "@/components/ui/page-header";
 import { Button } from "@/components/ui/button";
 import { getServerAuthSession } from "@/lib/auth";
 import { listFormsForWorkspace } from "@/lib/forms";
@@ -38,22 +39,21 @@ export default async function DashboardPage() {
 
   return forms.length === 0 ? (
     <div className="space-y-8">
-      <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-6 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <h1 className="font-display text-4xl leading-tight text-[var(--ink)]">
-            {workspaceLabel}
-          </h1>
-          <p className="max-w-2xl text-sm leading-6 text-[var(--muted)]">
-            {t("dashboard.description")}
-          </p>
-        </div>
-        <form action={createFormAction}>
-          <Button size="lg" type="submit">
-            <Plus className="size-4" />
-            {t("dashboard.newForm")}
-          </Button>
-        </form>
-      </section>
+      <PageHeader
+        title={workspaceLabel}
+        description={t("dashboard.description")}
+        descriptionClassName="max-w-2xl"
+        titleClassName="leading-tight"
+        className="pb-6"
+        actions={
+          <form action={createFormAction}>
+            <Button size="lg" type="submit">
+              <Plus className="size-4" />
+              {t("dashboard.newForm")}
+            </Button>
+          </form>
+        }
+      />
 
       <EmptyState
         eyebrow={t("dashboard.noFormsEyebrow")}
diff --git a/app/(creator)/forms/[id]/responses/[responseId]/page.tsx b/app/(creator)/forms/[id]/responses/[responseId]/page.tsx
index a393aee..541961c 100644
--- a/app/(creator)/forms/[id]/responses/[responseId]/page.tsx
+++ b/app/(creator)/forms/[id]/responses/[responseId]/page.tsx
@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/ui/page-header";
 import { Card } from "@/components/ui/card";
 import { AuthoredMarkdown } from "@/components/ui/authored-markdown";
 import { AGREEMENT_ANSWER_VALUES } from "@/lib/blocks";
@@ -59,27 +60,21 @@ export default async function ResponseDetailPage({
 
   return (
     <div className="space-y-6">
-      <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <h1 className="font-display text-4xl text-[var(--ink)]">
-            {t("responseDetail.title", {
-              number: response.submissionNumber,
-              date: formatDate(response.submittedAt, locale),
-            })}
-          </h1>
-          <p className="mt-2 text-xs font-medium uppercase text-[var(--muted)]">
-            {workspaceLabel}
-          </p>
-          <p className="mt-2 text-sm leading-6 text-[var(--muted)]">
-            {t("responseDetail.description")}
-          </p>
-        </div>
-        <Link href={`/forms/${id}/responses`}>
-          <Button variant="secondary">
-            {t("responseDetail.backToResponses")}
-          </Button>
-        </Link>
-      </section>
+      <PageHeader
+        title={t("responseDetail.title", {
+          number: response.submissionNumber,
+          date: formatDate(response.submittedAt, locale),
+        })}
+        metadata={workspaceLabel}
+        description={t("responseDetail.description")}
+        actions={
+          <Link href={`/forms/${id}/responses`}>
+            <Button variant="secondary">
+              {t("responseDetail.backToResponses")}
+            </Button>
+          </Link>
+        }
+      />
 
       <Card className="p-6">
         <div className="flex flex-wrap items-center gap-3">
diff --git a/app/(creator)/forms/[id]/responses/page.tsx b/app/(creator)/forms/[id]/responses/page.tsx
index 11997ce..decf297 100644
--- a/app/(creator)/forms/[id]/responses/page.tsx
+++ b/app/(creator)/forms/[id]/responses/page.tsx
@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
 
 import { EmptyState } from "@/components/empty-state";
 import { ResponseExportActions } from "@/components/response-export-actions";
+import { PageHeader } from "@/components/ui/page-header";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -99,22 +100,20 @@ export default async function ResponsesPage({
 
   return (
     <div className="space-y-5">
-      <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <h1 className="font-display text-4xl text-[var(--ink)]">
-            {form.title}
-          </h1>
-          <p className="mt-2 text-xs font-medium uppercase text-[var(--muted)]">
-            {workspaceLabel}
-          </p>
-        </div>
-        <div className="flex flex-wrap gap-3 lg:justify-end">
-          <Link href={`/forms/${form.id}/edit`}>
-            <Button variant="secondary">{t("responses.backToBuilder")}</Button>
-          </Link>
-          <ResponseExportActions formId={form.id} />
-        </div>
-      </section>
+      <PageHeader
+        title={form.title}
+        metadata={workspaceLabel}
+        actions={
+          <>
+            <Link href={`/forms/${form.id}/edit`}>
+              <Button variant="secondary">
+                {t("responses.backToBuilder")}
+              </Button>
+            </Link>
+            <ResponseExportActions formId={form.id} />
+          </>
+        }
+      />
 
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="inline-flex h-12 items-center gap-1 rounded-xl border border-[color:var(--line)] bg-[var(--surface-strong)] p-1">
diff --git a/components/dashboard-form-browser.tsx b/components/dashboard-form-browser.tsx
index f22045a..0db79b8 100644
--- a/components/dashboard-form-browser.tsx
+++ b/components/dashboard-form-browser.tsx
@@ -15,6 +15,7 @@ import { createFormAction } from "@/app/(creator)/actions";
 import { useI18n } from "@/components/i18n-provider";
 import { FormStatusBadge } from "@/components/form-status-badge";
 import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/ui/page-header";
 import { Card } from "@/components/ui/card";
 import type { FormListItem } from "@/lib/form-types";
 import { cn, formatDate } from "@/lib/utils";
@@ -123,54 +124,53 @@ export function DashboardFormBrowser({
 
   return (
     <div className="space-y-8">
-      <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-6 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <h1 className="font-display text-4xl leading-tight text-[var(--ink)]">
-            {workspaceLabel}
-          </h1>
-          <p className="max-w-2xl text-sm leading-6 text-[var(--muted)]">
-            {t("dashboard.description")}
-          </p>
-        </div>
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <div className="inline-flex h-12 items-center gap-1 rounded-xl border border-[color:var(--line)] bg-[var(--surface-strong)] p-1">
-            <button
-              type="button"
-              onClick={() => setDashboardView("grid")}
-              className={cn(
-                "inline-flex h-full items-center gap-2 rounded-lg px-3 text-sm font-medium transition",
-                view === "grid"
-                  ? "bg-[var(--ink)] text-[var(--bg)]"
-                  : "text-[var(--muted)] hover:bg-[var(--accent-soft)] hover:text-[var(--ink)]",
-              )}
-              aria-pressed={view === "grid"}
-            >
-              <LayoutGrid className="size-4" />
-              {t("dashboard.viewGrid")}
-            </button>
-            <button
-              type="button"
-              onClick={() => setDashboardView("table")}
-              className={cn(
-                "inline-flex h-full items-center gap-2 rounded-lg px-3 text-sm font-medium transition",
-                view === "table"
-                  ? "bg-[var(--ink)] text-[var(--bg)]"
-                  : "text-[var(--muted)] hover:bg-[var(--accent-soft)] hover:text-[var(--ink)]",
-              )}
-              aria-pressed={view === "table"}
-            >
-              <TableProperties className="size-4" />
-              {t("dashboard.viewTable")}
-            </button>
+      <PageHeader
+        title={workspaceLabel}
+        description={t("dashboard.description")}
+        descriptionClassName="max-w-2xl"
+        titleClassName="leading-tight"
+        className="pb-6"
+        actions={
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+            <div className="inline-flex h-12 items-center gap-1 rounded-xl border border-[color:var(--line)] bg-[var(--surface-strong)] p-1">
+              <button
+                type="button"
+                onClick={() => setDashboardView("grid")}
+                className={cn(
+                  "inline-flex h-full items-center gap-2 rounded-lg px-3 text-sm font-medium transition",
+                  view === "grid"
+                    ? "bg-[var(--ink)] text-[var(--bg)]"
+                    : "text-[var(--muted)] hover:bg-[var(--accent-soft)] hover:text-[var(--ink)]",
+                )}
+                aria-pressed={view === "grid"}
+              >
+                <LayoutGrid className="size-4" />
+                {t("dashboard.viewGrid")}
+              </button>
+              <button
+                type="button"
+                onClick={() => setDashboardView("table")}
+                className={cn(
+                  "inline-flex h-full items-center gap-2 rounded-lg px-3 text-sm font-medium transition",
+                  view === "table"
+                    ? "bg-[var(--ink)] text-[var(--bg)]"
+                    : "text-[var(--muted)] hover:bg-[var(--accent-soft)] hover:text-[var(--ink)]",
+                )}
+                aria-pressed={view === "table"}
+              >
+                <TableProperties className="size-4" />
+                {t("dashboard.viewTable")}
+              </button>
+            </div>
+            <form action={createFormAction}>
+              <Button size="lg" type="submit">
+                <Plus className="size-4" />
+                {t("dashboard.newForm")}
+              </Button>
+            </form>
           </div>
-          <form action={createFormAction}>
-            <Button size="lg" type="submit">
-              <Plus className="size-4" />
-              {t("dashboard.newForm")}
-            </Button>
-          </form>
-        </div>
-      </section>
+        }
+      />
 
       {view === "grid" ? (
         <section className="grid gap-5 lg:grid-cols-2">
diff --git a/components/organization-settings-panel.tsx b/components/organization-settings-panel.tsx
index 3d95619..4eeb352 100644
--- a/components/organization-settings-panel.tsx
+++ b/components/organization-settings-panel.tsx
@@ -15,6 +15,7 @@ import { DeleteOrganizationButton } from "@/components/delete-organization-butto
 import { useLocalToasts } from "@/components/use-local-toasts";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { PageHeader } from "@/components/ui/page-header";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -69,14 +70,11 @@ export function OrganizationSettingsPanel({
     <>
       <ToastViewport toasts={toasts} onDismiss={dismissToast} />
       <div>
-        <div>
-          <h1 className="font-display text-4xl text-[var(--ink)]">
-            {t("settings.organizations.title")}
-          </h1>
-          <p className="mt-3 max-w-3xl text-sm leading-6 text-[var(--muted)]">
-            {t("settings.organizations.description")}
-          </p>
-        </div>
+        <PageHeader
+          title={t("settings.organizations.title")}
+          description={t("settings.organizations.description")}
+          className="border-b-0 pb-0"
+        />
 
         <div className="mt-8 border-t border-[color:var(--line)] pt-8">
           <form
diff --git a/components/profile-settings-panel.tsx b/components/profile-settings-panel.tsx
index ce83d02..f56dd79 100644
--- a/components/profile-settings-panel.tsx
+++ b/components/profile-settings-panel.tsx
@@ -8,6 +8,7 @@ import { useI18n } from "@/components/i18n-provider";
 import { UserAvatar } from "@/components/user-avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { PageHeader } from "@/components/ui/page-header";
 import {
   Select,
   SelectContent,
@@ -44,14 +45,12 @@ export function ProfileSettingsPanel({
 
   return (
     <div>
-      <div>
-        <h1 className="font-display text-4xl text-[var(--ink)]">
-          {t("settings.profile.title")}
-        </h1>
-        <p className="mt-3 max-w-2xl text-sm leading-6 text-[var(--muted)]">
-          {t("settings.profile.description")}
-        </p>
-      </div>
+      <PageHeader
+        title={t("settings.profile.title")}
+        description={t("settings.profile.description")}
+        descriptionClassName="max-w-2xl"
+        className="border-b-0 pb-0"
+      />
 
       <form action={submitProfile} className="mt-8 space-y-8">
         <input type="hidden" name="returnSection" value="profile" />
diff --git a/components/settings-shell.tsx b/components/settings-shell.tsx
index c53caa5..a87ee82 100644
--- a/components/settings-shell.tsx
+++ b/components/settings-shell.tsx
@@ -8,6 +8,7 @@ import { useI18n } from "@/components/i18n-provider";
 import { OrganizationSettingsPanel } from "@/components/organization-settings-panel";
 import { ProfileSettingsPanel } from "@/components/profile-settings-panel";
 import { ThemeSettingsPanel } from "@/components/theme-settings-panel";
+import { PageHeader } from "@/components/ui/page-header";
 import { cn } from "@/lib/utils";
 import type {
   OrganizationSettingsSummary,
@@ -57,16 +58,11 @@ export function SettingsShell({
 
   return (
     <div className="space-y-6">
-      <section className="flex flex-col gap-4 border-b border-[color:var(--line)] pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div>
-          <h1 className="font-display text-4xl text-[var(--ink)]">
-            {t("settings.shell.title")}
-          </h1>
-          <p className="mt-2 max-w-2xl text-sm leading-6 text-[var(--muted)]">
-            {t("settings.shell.description")}
-          </p>
-        </div>
-      </section>
+      <PageHeader
+        title={t("settings.shell.title")}
+        description={t("settings.shell.description")}
+        descriptionClassName="max-w-2xl"
+      />
 
       <div className="grid gap-8 lg:grid-cols-[280px_minmax(0,1fr)] lg:items-start">
         <div className="space-y-2 border-b border-[color:var(--line)] pb-6 lg:border-b-0 lg:border-r lg:pb-0 lg:pr-8">
diff --git a/components/theme-settings-panel.tsx b/components/theme-settings-panel.tsx
index 2ce2eb2..f883d99 100644
--- a/components/theme-settings-panel.tsx
+++ b/components/theme-settings-panel.tsx
@@ -4,6 +4,7 @@ import { LaptopMinimal, MoonStar, SunMedium } from "lucide-react";
 
 import { useI18n } from "@/components/i18n-provider";
 import { useThemePreference } from "@/components/theme-provider";
+import { PageHeader } from "@/components/ui/page-header";
 import { cn } from "@/lib/utils";
 import type { ThemePreference } from "@/lib/theme";
 
@@ -31,14 +32,12 @@ export function ThemeSettingsPanel() {
 
   return (
     <div>
-      <div>
-        <h1 className="font-display text-4xl text-[var(--ink)]">
-          {t("settings.appearance.title")}
-        </h1>
-        <p className="mt-3 max-w-2xl text-sm leading-6 text-[var(--muted)]">
-          {t("settings.appearance.description")}
-        </p>
-      </div>
+      <PageHeader
+        title={t("settings.appearance.title")}
+        description={t("settings.appearance.description")}
+        descriptionClassName="max-w-2xl"
+        className="border-b-0 pb-0"
+      />
 
       <div className="mt-8 grid gap-4 md:grid-cols-3">
         {options.map((option) => {
diff --git a/components/ui/page-header.tsx b/components/ui/page-header.tsx
new file mode 100644
index 0000000..104445a
--- /dev/null
+++ b/components/ui/page-header.tsx
@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type PageHeaderProps = {
+  title: ReactNode;
+  description?: ReactNode;
+  metadata?: ReactNode;
+  actions?: ReactNode;
+  as?: "h1" | "h2";
+  className?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  metadataClassName?: string;
+  actionsClassName?: string;
+};
+
+export function PageHeader({
+  title,
+  description,
+  metadata,
+  actions,
+  as = "h1",
+  className,
+  titleClassName,
+  descriptionClassName,
+  metadataClassName,
+  actionsClassName,
+}: PageHeaderProps) {
+  const Title = as;
+
+  return (
+    <section
+      className={cn(
+        "flex flex-col gap-4 border-b border-[color:var(--line)] pb-5 lg:flex-row lg:items-end lg:justify-between",
+        className,
+      )}
+    >
+      <div>
+        <Title
+          className={cn(
+            "font-display text-4xl text-[var(--ink)]",
+            titleClassName,
+          )}
+        >
+          {title}
+        </Title>
+        {metadata ? (
+          <p
+            className={cn(
+              "mt-2 text-xs font-medium uppercase text-[var(--muted)]",
+              metadataClassName,
+            )}
+          >
+            {metadata}
+          </p>
+        ) : null}
+        {description ? (
+          <div
+            className={cn(
+              metadata ? "mt-2" : "mt-3",
+              "max-w-3xl text-sm leading-6 text-[var(--muted)]",
+              descriptionClassName,
+            )}
+          >
+            {description}
+          </div>
+        ) : null}
+      </div>
+      {actions ? (
+        <div
+          className={cn(
+            "flex flex-wrap gap-3 lg:justify-end",
+            actionsClassName,
+          )}
+        >
+          {actions}
+        </div>
+      ) : null}
+    </section>
+  );
+}