diff --git a/web/src/routes/projects/+page.svelte b/web/src/routes/projects/+page.svelte
index ee773d4..cd73784 100644
--- a/web/src/routes/projects/+page.svelte
+++ b/web/src/routes/projects/+page.svelte
@@ -141,7 +141,7 @@
 
 	<!-- Add project form -->
 	{#if showAddForm}
-		<div class="rounded-xl border border-[var(--color-brand-200)] bg-[var(--color-brand-50)]/30 p-6 animate-scale-in">
+		<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 animate-scale-in">
 			<h2 class="text-lg font-semibold text-[var(--text-primary)]">{$t('projects.newProject')}</h2>
 
 			{#if formError}
diff --git a/web/src/routes/projects/[id]/+page.svelte b/web/src/routes/projects/[id]/+page.svelte
index 70bab3a..f783029 100644
--- a/web/src/routes/projects/[id]/+page.svelte
+++ b/web/src/routes/projects/[id]/+page.svelte
@@ -9,6 +9,7 @@
 	import Skeleton from '$lib/components/Skeleton.svelte';
 	import { IconTrash, IconKey, IconHardDrive, IconDeploy, IconChevronRight, IconClock, IconTag, IconLoader, IconPlus, IconEdit, IconCheck, IconX } from '$lib/components/icons';
 	import FormField from '$lib/components/FormField.svelte';
+	import ToggleSwitch from '$lib/components/ToggleSwitch.svelte';
 	import { toasts } from '$lib/stores/toast';
 	import { t } from '$lib/i18n';
 
@@ -336,16 +337,13 @@
 			</div>
 
 			{#if showAddStage}
-				<div class="mt-3 rounded-xl border border-[var(--color-brand-200)] bg-[var(--color-brand-50)]/30 p-4 animate-scale-in">
+				<div class="mt-3 rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-4 animate-scale-in">
 					<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
 						<FormField label="Name *" name="stageName" bind:value={stageName} placeholder="dev" />
 						<FormField label="Tag Pattern" name="stagePattern" bind:value={stageTagPattern} placeholder="dev-*" helpText="Glob pattern (e.g., dev-*, v*)" />
 						<FormField label="Max Instances" name="stageMax" type="number" bind:value={stageMaxInstances} />
-						<div class="flex items-end pb-1">
-							<label class="flex items-center gap-2 text-sm text-[var(--text-primary)]">
-								<input type="checkbox" bind:checked={stageAutoDeploy} class="rounded" />
-								Auto Deploy
-							</label>
+						<div class="flex items-end pb-2">
+							<ToggleSwitch bind:checked={stageAutoDeploy} label="Auto Deploy" />
 						</div>
 					</div>
 					<div class="mt-3 flex justify-end">
diff --git a/web/src/routes/settings/registries/+page.svelte b/web/src/routes/settings/registries/+page.svelte
index 1a1f032..9753819 100644
--- a/web/src/routes/settings/registries/+page.svelte
+++ b/web/src/routes/settings/registries/+page.svelte
@@ -110,7 +110,7 @@
 	</div>
 
 	{#if showForm}
-		<div class="rounded-xl border border-[var(--color-brand-200)] bg-[var(--color-brand-50)]/30 p-6 animate-scale-in">
+		<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] p-6 animate-scale-in">
 			<h3 class="mb-4 text-sm font-semibold text-[var(--text-primary)]">
 				{editingId ? $t('settingsRegistries.editRegistry') : $t('settingsRegistries.addNewRegistry')}
 			</h3>