diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ea50e53..5409ac2 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -19,7 +19,11 @@
 				<BreadCrumb items={$breadcrumbStore} />
 			</div>
 		</header>
-		<div class="w-full overflow-y-auto px-6 py-2" style="scrollbar-width: thin;" id="main">
+		<div
+			class="w-full overflow-y-auto px-6 py-2"
+			style="scrollbar-width: thin; scrollbar-gutter: stable !important;"
+			id="main"
+		>
 			<slot />
 		</div>
 	</Sidebar.Inset>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index e766c03..92ca4c5 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -105,29 +105,29 @@
 	const videoChartConfig = {
 		videos: {
 			label: '视频数量',
-			color: 'var(--color-slate-700)'
+			color: 'var(--primary)'
 		}
 	} satisfies Chart.ChartConfig;
 
 	const memoryChartConfig = {
 		used: {
 			label: '整体占用',
-			color: 'var(--color-slate-700)'
+			color: 'var(--primary)'
 		},
 		process: {
 			label: '程序占用',
-			color: 'var(--color-slate-950)'
+			color: 'oklch(from var(--primary) calc(l * 0.6) c h)'
 		}
 	} satisfies Chart.ChartConfig;
 
 	const cpuChartConfig = {
 		used: {
 			label: '整体占用',
-			color: 'var(--color-slate-700)'
+			color: 'var(--primary)'
 		},
 		process: {
 			label: '程序占用',
-			color: 'var(--color-slate-950)'
+			color: 'oklch(from var(--primary) calc(l * 0.6) c h)'
 		}
 	} satisfies Chart.ChartConfig;