diff --git a/web/src/lib/components/data-table/data-table-card.svelte b/web/src/lib/components/data-table/data-table-card.svelte
index 1c1d7d2..8bbab8d 100644
--- a/web/src/lib/components/data-table/data-table-card.svelte
+++ b/web/src/lib/components/data-table/data-table-card.svelte
@@ -21,17 +21,17 @@
 
 <Card.Root class={cn('gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm', className)}>
 	{#if title}
-		<div class="border-b border-border bg-muted/40 px-4 py-3">
+		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<Card.Title class="text-base font-semibold">{title}</Card.Title>
 			{#if description}
 				<Card.Description class="text-xs sm:text-sm">{description}</Card.Description>
 			{/if}
-		</div>
+		</Card.Header>
 	{/if}
 	{#if toolbar}
 		{@render toolbar()}
 	{/if}
-	<div class="p-0">
+	<Card.Content class="p-0">
 		{@render children()}
-	</div>
+	</Card.Content>
 </Card.Root>
diff --git a/web/src/lib/components/fleet/fleet-overview-charts.svelte b/web/src/lib/components/fleet/fleet-overview-charts.svelte
index d980c17..927c078 100644
--- a/web/src/lib/components/fleet/fleet-overview-charts.svelte
+++ b/web/src/lib/components/fleet/fleet-overview-charts.svelte
@@ -141,7 +141,7 @@
 
 <div class="mb-6 grid gap-4 lg:grid-cols-2">
 	<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
-		<div class="border-b border-border bg-muted/40 px-4 py-3">
+		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<div class="flex items-center gap-2">
 				<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
 					<ServerIcon class="size-5" />
@@ -151,13 +151,13 @@
 					<Card.Description class="text-xs">OK vs degraded по fleet-status</Card.Description>
 				</div>
 			</div>
-		</div>
+		</Card.Header>
 		<Card.Content class="h-56 p-4">
 			<canvas bind:this={elDonut} class="max-h-full w-full"></canvas>
 		</Card.Content>
 	</Card.Root>
 	<Card.Root class="gap-0 py-0 overflow-hidden rounded-lg border border-border shadow-sm">
-		<div class="border-b border-border bg-muted/40 px-4 py-3">
+		<Card.Header class="border-b border-border bg-muted/40 px-4 py-3">
 			<div class="flex items-center gap-2">
 				<div class="flex size-9 items-center justify-center rounded-lg bg-muted text-muted-foreground">
 					<ChartNoAxesCombinedIcon class="size-5" />
@@ -167,7 +167,7 @@
 					<Card.Description class="text-xs">До 8 пользователей, MiB</Card.Description>
 				</div>
 			</div>
-		</div>
+		</Card.Header>
 		<Card.Content class="h-56 p-4">
 			<canvas bind:this={elBar} class="max-h-full w-full"></canvas>
 		</Card.Content>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index ec05a59..03d9954 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -563,7 +563,7 @@
 	{#snippet skeleton()}
 		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Card.Root class="border border-border shadow-sm">
+				<Card.Root class="gap-0 py-0 border border-border shadow-sm">
 					<Card.Header class="space-y-2 pb-2">
 						<Skeleton class="h-3 w-24" />
 						<Skeleton class="h-8 w-20" />
diff --git a/web/src/routes/incidents/+page.svelte b/web/src/routes/incidents/+page.svelte
index 2e5e23e..21c74a8 100644
--- a/web/src/routes/incidents/+page.svelte
+++ b/web/src/routes/incidents/+page.svelte
@@ -312,7 +312,7 @@
 	{#snippet skeleton()}
 		<div class="mb-4 grid gap-4 sm:grid-cols-3">
 			{#each Array.from({ length: 3 }) as _, i (i)}
-				<Card.Root>
+				<Card.Root class="gap-0 py-0">
 					<Card.Header class="pb-2">
 						<Skeleton class="h-4 w-20" />
 						<Skeleton class="mt-2 h-8 w-12" />
@@ -320,7 +320,7 @@
 				</Card.Root>
 			{/each}
 		</div>
-		<Card.Root>
+		<Card.Root class="gap-0 py-0">
 			<Card.Content class="space-y-2 p-4">
 				{#each Array.from({ length: 6 }) as _, i (i)}
 					<Skeleton class="h-12 w-full" />
diff --git a/web/src/routes/ips/+page.svelte b/web/src/routes/ips/+page.svelte
index 205d7dc..282624f 100644
--- a/web/src/routes/ips/+page.svelte
+++ b/web/src/routes/ips/+page.svelte
@@ -528,7 +528,7 @@
 >
 	{#snippet skeleton()}
 		<div class="space-y-4">
-			<Card.Root>
+			<Card.Root class="gap-0 py-0">
 				<Card.Header>
 					<Skeleton class="h-5 w-48" />
 					<Skeleton class="h-4 w-64" />
@@ -537,7 +537,7 @@
 					<Skeleton class="h-[420px] w-full rounded-md" />
 				</Card.Content>
 			</Card.Root>
-			<Card.Root>
+			<Card.Root class="gap-0 py-0">
 				<Card.Content class="space-y-2 p-4">
 					{#each Array.from({ length: 6 }) as _, i (i)}
 						<Skeleton class="h-10 w-full" />
diff --git a/web/src/routes/mihomo/+page.svelte b/web/src/routes/mihomo/+page.svelte
index 5096359..0868824 100644
--- a/web/src/routes/mihomo/+page.svelte
+++ b/web/src/routes/mihomo/+page.svelte
@@ -255,7 +255,7 @@
 				</KpiStatCard>
 			</div>
 
-			<Card.Root class="border-l-4 border-l-violet-500/40 shadow-sm">
+			<Card.Root class="gap-0 py-0 border-l-4 border-l-violet-500/40 shadow-sm">
 				<Card.Header class="pb-2">
 					<Card.Title class="text-base">Ноды</Card.Title>
 					<Card.Description>
@@ -351,7 +351,7 @@
 						<Card.Root
 							id="mihomo-proxies-{encodeURIComponent(r.alias)}"
 							data-size="sm"
-							class="bg-card/50 min-h-0 min-w-0 scroll-mt-20 gap-0 overflow-hidden pt-0 shadow-sm ring-1 ring-border/60"
+							class="bg-card/50 min-h-0 min-w-0 scroll-mt-20 gap-0 overflow-hidden py-0 shadow-sm ring-1 ring-border/60"
 						>
 							<Card.Header class="border-border/80 border-b px-3 pb-3 pt-3 sm:px-4">
 								<Card.Title class="font-mono text-sm font-semibold leading-none tracking-tight">
diff --git a/web/src/routes/servers/[alias]/+page.svelte b/web/src/routes/servers/[alias]/+page.svelte
index b4e87e5..5af8800 100644
--- a/web/src/routes/servers/[alias]/+page.svelte
+++ b/web/src/routes/servers/[alias]/+page.svelte
@@ -114,7 +114,7 @@
 	{#snippet skeleton()}
 		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
 			{#each Array.from({ length: 4 }) as _, i (i)}
-				<Card.Root class="border border-border shadow-sm">
+				<Card.Root class="gap-0 py-0 border border-border shadow-sm">
 					<Card.Header class="space-y-2 pb-2">
 						<Skeleton class="h-3 w-24" />
 						<Skeleton class="h-8 w-20" />
diff --git a/web/src/routes/servers/[alias]/mihomo/+page.svelte b/web/src/routes/servers/[alias]/mihomo/+page.svelte
index 84e830b..9aa3e95 100644
--- a/web/src/routes/servers/[alias]/mihomo/+page.svelte
+++ b/web/src/routes/servers/[alias]/mihomo/+page.svelte
@@ -514,7 +514,7 @@
 		<Skeleton class="mb-4 h-6 w-96 max-w-full" />
 		<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
+				<Card.Root class="gap-0 py-0 border-l-4 border-l-muted-foreground/30 shadow-sm">
 					<Card.Header class="pb-2">
 						<div class="flex gap-3">
 							<Skeleton class="size-10 shrink-0 rounded-lg" />
@@ -532,7 +532,7 @@
 		</div>
 		<div class="grid gap-4 lg:grid-cols-2">
 			{#each Array.from({ length: 6 }) as _, i (i)}
-				<Card.Root class="border-l-4 border-l-muted-foreground/30 shadow-sm">
+				<Card.Root class="gap-0 py-0 border-l-4 border-l-muted-foreground/30 shadow-sm">
 					<Card.Header class="pb-2">
 						<div class="flex gap-3">
 							<Skeleton class="size-10 shrink-0 rounded-lg" />
diff --git a/web/src/routes/users/+page.svelte b/web/src/routes/users/+page.svelte
index 9ed0986..dc3b1f3 100644
--- a/web/src/routes/users/+page.svelte
+++ b/web/src/routes/users/+page.svelte
@@ -366,7 +366,7 @@
 	isEmpty={isDataEmpty}
 >
 	{#snippet skeleton()}
-		<Card.Root>
+		<Card.Root class="gap-0 py-0">
 			<Card.Content class="space-y-2 p-4">
 				{#each Array.from({ length: 8 }) as _, i (i)}
 					<Skeleton class="h-10 w-full" />