diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx
index 2d056832bff..fcac611aa85 100644
--- a/site/src/components/SettingsHeader/SettingsHeader.tsx
+++ b/site/src/components/SettingsHeader/SettingsHeader.tsx
@@ -97,7 +97,7 @@ export const SettingsHeaderDescription: FC<SettingsHeaderDescriptionProps> = ({
 	return (
 		<p
 			className={cn(
-				"m-0 text-content-secondary font-medium leading-normal",
+				"m-0 text-content-secondary font-medium leading-6",
 				className,
 			)}
 		>
diff --git a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index dce55b3def7..1308d694d0c 100644
--- a/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -48,7 +48,7 @@ export const AppearanceSettingsPageView: FC<
 	const getFieldHelpers = getFormHelpers(form);
 
 	return (
-		<div className="flex flex-col gap-8">
+		<div>
 			<SettingsHeader
 				actions={
 					<SettingsHeaderDocsLink href={docs("/admin/setup/appearance")} />
@@ -73,7 +73,7 @@ export const AppearanceSettingsPageView: FC<
 					canViewPremium={canViewPremium}
 				/>
 			) : (
-				<>
+				<div className="flex flex-col gap-8">
 					<VerticalForm
 						onSubmit={form.handleSubmit}
 						aria-label="Appearance settings"
@@ -122,7 +122,7 @@ export const AppearanceSettingsPageView: FC<
 							onSaveAppearance({ announcement_banners: announcementBanners })
 						}
 					/>
-				</>
+				</div>
 			)}
 		</div>
 	);
diff --git a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
index 9b8c35fa2d6..4a9bdd449d1 100644
--- a/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
+++ b/site/src/pages/DeploymentSettingsPage/IdpOrgSyncPage/IdpOrgSyncPage.tsx
@@ -9,7 +9,12 @@ import {
 } from "#/api/queries/idpsync";
 import { Loader } from "#/components/Loader/Loader";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
-import { SettingsHeaderDocsLink } from "#/components/SettingsHeader/SettingsHeader";
+import {
+	SettingsHeader,
+	SettingsHeaderDescription,
+	SettingsHeaderDocsLink,
+	SettingsHeaderTitle,
+} from "#/components/SettingsHeader/SettingsHeader";
 import { useAuthenticated } from "#/hooks/useAuthenticated";
 import { useDashboard } from "#/modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility";
@@ -63,22 +68,23 @@ const IdpOrgSyncPage: FC = () => {
 		<>
 			<title>{pageTitle("Organization IdP Sync")}</title>
 
-			<div className="flex flex-col gap-12">
-				<header className="flex flex-row items-baseline justify-between">
-					<div className="flex flex-col gap-2">
-						<h1 className="text-3xl m-0">Organization IdP Sync</h1>
-						<p className="flex flex-row gap-1 text-sm text-content-secondary font-medium m-0">
-							Automatically assign users to an organization based on their IdP
-							claims.
-						</p>
-					</div>
-					<div className="flex flex-row gap-2 items-center">
-						<SettingsHeaderDocsLink
-							href={docs("/admin/users/idp-sync#organization-sync")}
-						/>
-						<ExportPolicyButton syncSettings={settingsQuery.data} />
-					</div>
-				</header>
+			<div>
+				<SettingsHeader
+					actions={
+						<div className="flex flex-row gap-2 items-center">
+							<SettingsHeaderDocsLink
+								href={docs("/admin/users/idp-sync#organization-sync")}
+							/>
+							<ExportPolicyButton syncSettings={settingsQuery.data} />
+						</div>
+					}
+				>
+					<SettingsHeaderTitle>Organization IdP Sync</SettingsHeaderTitle>
+					<SettingsHeaderDescription>
+						Automatically assign users to an organization based on their IdP
+						claims.
+					</SettingsHeaderDescription>
+				</SettingsHeader>
 				{!isIdpSyncEnabled ? (
 					<PaywallPremium
 						message="IdP Organization Sync"
diff --git a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
index 13e51bf326f..b4d2b7fa4f2 100644
--- a/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
+++ b/site/src/pages/OrganizationSettingsPage/IdpSyncPage/IdpSyncPage.tsx
@@ -14,7 +14,12 @@ import {
 import { organizationRoles } from "#/api/queries/roles";
 import { EmptyState } from "#/components/EmptyState/EmptyState";
 import { PaywallPremium } from "#/components/Paywall/PaywallPremium";
-import { SettingsHeaderDocsLink } from "#/components/SettingsHeader/SettingsHeader";
+import {
+	SettingsHeader,
+	SettingsHeaderDescription,
+	SettingsHeaderDocsLink,
+	SettingsHeaderTitle,
+} from "#/components/SettingsHeader/SettingsHeader";
 import { useAuthenticated } from "#/hooks/useAuthenticated";
 import { useFeatureVisibility } from "#/modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "#/modules/management/OrganizationSettingsLayout";
@@ -118,75 +123,74 @@ const IdpSyncPage: FC = () => {
 		<div className="w-full max-w-screen-2xl pb-10">
 			{title}
 
-			<div className="flex flex-col gap-12">
-				<header className="flex flex-row items-baseline justify-between">
-					<div className="flex flex-col gap-2">
-						<h1 className="text-3xl m-0">IdP Sync</h1>
-						<p className="flex flex-row gap-1 text-sm text-content-secondary font-medium m-0">
-							Automatically assign groups or roles to a user based on their IdP
-							claims.
-						</p>
-					</div>
+			<SettingsHeader
+				actions={
 					<SettingsHeaderDocsLink href={docs("/admin/users/idp-sync")} />
-				</header>
-				{!isIdpSyncEnabled ? (
-					<PaywallPremium
-						message="IdP Sync"
-						description="Auto-sync groups & roles from your IdP."
-						features={[
-							"Sync groups & roles automatically",
-							"Configured per organization",
-							"No manual user assignment",
-							"Works with your OIDC provider",
-						]}
-						canViewPremium={permissions.viewAllLicenses}
-					/>
-				) : (
-					<IdpSyncPageView
-						tab={tab}
-						groupSyncSettings={groupIdpSyncSettingsQuery.data}
-						roleSyncSettings={roleIdpSyncSettingsQuery.data}
-						claimFieldValues={fieldValuesQuery.data}
-						groups={groupsQuery.data}
-						groupsMap={groupsMap}
-						roles={rolesQuery.data}
-						organization={organization}
-						onGroupSyncFieldChange={setGroupField}
-						onRoleSyncFieldChange={setRoleField}
-						error={error}
-						onSubmitGroupSyncSettings={async (data) => {
-							const mutation = patchGroupSyncSettingsMutation.mutateAsync(data);
-							toast.promise(mutation, {
-								loading: "Updating IdP group sync settings...",
-								success: "IdP group sync settings updated.",
-								error: (error) => ({
-									message: getErrorMessage(
-										error,
-										"Failed to update IdP group sync settings.",
-									),
+				}
+			>
+				<SettingsHeaderTitle>IdP Sync</SettingsHeaderTitle>
+				<SettingsHeaderDescription>
+					Automatically assign groups or roles to a user based on their IdP
+					claims.
+				</SettingsHeaderDescription>
+			</SettingsHeader>
+			{!isIdpSyncEnabled ? (
+				<PaywallPremium
+					message="IdP Sync"
+					description="Auto-sync groups & roles from your IdP."
+					features={[
+						"Sync groups & roles automatically",
+						"Configured per organization",
+						"No manual user assignment",
+						"Works with your OIDC provider",
+					]}
+					canViewPremium={permissions.viewAllLicenses}
+				/>
+			) : (
+				<IdpSyncPageView
+					tab={tab}
+					groupSyncSettings={groupIdpSyncSettingsQuery.data}
+					roleSyncSettings={roleIdpSyncSettingsQuery.data}
+					claimFieldValues={fieldValuesQuery.data}
+					groups={groupsQuery.data}
+					groupsMap={groupsMap}
+					roles={rolesQuery.data}
+					organization={organization}
+					onGroupSyncFieldChange={setGroupField}
+					onRoleSyncFieldChange={setRoleField}
+					error={error}
+					onSubmitGroupSyncSettings={async (data) => {
+						const mutation = patchGroupSyncSettingsMutation.mutateAsync(data);
+						toast.promise(mutation, {
+							loading: "Updating IdP group sync settings...",
+							success: "IdP group sync settings updated.",
+							error: (error) => ({
+								message: getErrorMessage(
+									error,
+									"Failed to update IdP group sync settings.",
+								),
+								description: getErrorDetail(error),
+							}),
+						});
+					}}
+					onSubmitRoleSyncSettings={async (data) => {
+						try {
+							await patchRoleSyncSettingsMutation.mutateAsync(data);
+							toast.success("IdP Role sync settings updated.");
+						} catch (error) {
+							toast.error(
+								getErrorMessage(
+									error,
+									"Failed to update IdP role sync settings.",
+								),
+								{
 									description: getErrorDetail(error),
-								}),
-							});
-						}}
-						onSubmitRoleSyncSettings={async (data) => {
-							try {
-								await patchRoleSyncSettingsMutation.mutateAsync(data);
-								toast.success("IdP Role sync settings updated.");
-							} catch (error) {
-								toast.error(
-									getErrorMessage(
-										error,
-										"Failed to update IdP role sync settings.",
-									),
-									{
-										description: getErrorDetail(error),
-									},
-								);
-							}
-						}}
-					/>
-				)}
-			</div>
+								},
+							);
+						}
+					}}
+				/>
+			)}
 		</div>
 	);
 };
diff --git a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
index 235d5b4da60..661c347a65d 100644
--- a/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
+++ b/site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx
@@ -45,7 +45,7 @@ export const WorkspaceProxyView: FC<WorkspaceProxyViewProps> = ({
 	permissions,
 }) => {
 	return (
-		<div className="flex flex-col gap-4">
+		<div>
 			<SettingsHeader
 				actions={
 					<SettingsHeaderDocsLink
@@ -73,7 +73,7 @@ export const WorkspaceProxyView: FC<WorkspaceProxyViewProps> = ({
 					canViewPremium={permissions.viewAllLicenses}
 				/>
 			) : (
-				<>
+				<div className="flex flex-col gap-4">
 					{Boolean(getWorkspaceProxiesError) && (
 						<ErrorAlert error={getWorkspaceProxiesError} />
 					)}
@@ -96,7 +96,7 @@ export const WorkspaceProxyView: FC<WorkspaceProxyViewProps> = ({
 							/>
 						</TableBody>
 					</Table>
-				</>
+				</div>
 			)}
 		</div>
 	);