diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
index 4e6bf4b81..0c2dfe7fb 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/OnboardingWizard.svelte
@@ -54,10 +54,10 @@
 </script>
 
 <!-- Backdrop -->
-<div class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4">
-	<!-- Modal Container -->
+<div class="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
+	<!-- Modal Container - uses surface-elevated-2 for proper elevation hierarchy -->
 	<div
-		class="bg-background rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+		class="bg-surface-elevated-2 rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] flex flex-col overflow-hidden animate-in fade-in zoom-in-95 duration-200 border border-border"
 	>
 		<!-- Header with progress -->
 		<header class="border-b px-5 py-4 flex-shrink-0">
diff --git a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
index fd3f71120..d44f26615 100644
--- a/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
+++ b/apps/manacore/apps/web/src/lib/components/onboarding/steps/WelcomeStep.svelte
@@ -18,9 +18,9 @@
 		- alles an einem Ort.
 	</p>
 
-	<!-- Feature highlights -->
+	<!-- Feature highlights - using surface-elevated-1 (one level below the modal) -->
 	<div class="space-y-2 text-left">
-		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
+		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
 			<div
 				class="h-8 w-8 rounded-md bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0"
 			>
@@ -44,7 +44,7 @@
 			</div>
 		</div>
 
-		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
+		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
 			<div
 				class="h-8 w-8 rounded-md bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
 			>
@@ -68,7 +68,7 @@
 			</div>
 		</div>
 
-		<div class="p-3 rounded-lg bg-card border flex items-start gap-3">
+		<div class="p-3 rounded-lg bg-surface-elevated-1 border flex items-start gap-3">
 			<div
 				class="h-8 w-8 rounded-md bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0"
 			>