diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index 64f3007..7ac3553 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -12,6 +12,7 @@
 	import Save from '@lucide/svelte/icons/save';
 	import Plus from '@lucide/svelte/icons/plus';
 	import SettingsIcon from '@lucide/svelte/icons/settings';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
 
 	let token = $state('');
@@ -268,21 +269,13 @@
 	});
 </script>
 
-<div class="mx-auto max-w-5xl space-y-6">
-	<div class="flex items-start gap-3">
-		<div
-			class="bg-muted text-muted-foreground flex size-11 shrink-0 items-center justify-center rounded-xl"
-			aria-hidden="true"
-		>
-			<SettingsIcon class="size-6" />
-		</div>
-		<div class="min-w-0">
-			<h1 class="text-2xl font-semibold tracking-tight">Настройки</h1>
-			<p class="text-muted-foreground mt-1 text-sm">
-				Управление токеном доступа и глобальными параметрами control plane.
-			</p>
-		</div>
-	</div>
+<div class="mx-auto flex max-w-5xl flex-col gap-6">
+	<PageHeader
+		title="Настройки"
+		description="Управление токеном доступа и глобальными параметрами control plane."
+		icon={SettingsIcon}
+		iconClass="bg-muted text-muted-foreground"
+	/>
 
 	<Card>
 		<CardContent class="p-4 md:p-6">