diff --git a/src/lib/components/Wizard.svelte b/src/lib/components/Wizard.svelte
index b31a992..3cf2402 100644
--- a/src/lib/components/Wizard.svelte
+++ b/src/lib/components/Wizard.svelte
@@ -10,18 +10,6 @@
 	import StepGallery from './wizard/StepGallery.svelte';
 	import StepGenerate from './wizard/StepGenerate.svelte';
 
-	const stepComponents = {
-		splash: Splash,
-		auth: StepAuth,
-		search: StepSheetSearch,
-		mapping: StepColumnMap,
-		validation: StepRowFilter,
-		'card-details': StepCardDetails,
-		'card-select': StepCardSelect,
-		gallery: StepGallery,
-		generate: StepGenerate
-	};
-
 	const stepTitles = {
 		splash: 'Welcome',
 		auth: 'Authenticate',
@@ -35,7 +23,6 @@
 	};
 
 	let currentTitle = $derived(stepTitles[$currentStepName]);
-	let currentComponent = $derived(stepComponents[$currentStepName]);
 	let currentStepIndex = $derived(stepNames.indexOf($currentStepName));
 </script>
 
@@ -65,7 +52,25 @@
 
 		<!-- Step content -->
 		<div class="bg-white rounded-lg shadow-sm">
-			<svelte:component this={currentComponent} />
+			{#if $currentStepName === 'splash'}
+				<Splash />
+			{:else if $currentStepName === 'auth'}
+				<StepAuth />
+			{:else if $currentStepName === 'search'}
+				<StepSheetSearch />
+			{:else if $currentStepName === 'mapping'}
+				<StepColumnMap />
+			{:else if $currentStepName === 'validation'}
+				<StepRowFilter />
+			{:else if $currentStepName === 'card-details'}
+				<StepCardDetails />
+			{:else if $currentStepName === 'card-select'}
+				<StepCardSelect />
+			{:else if $currentStepName === 'gallery'}
+				<StepGallery />
+			{:else if $currentStepName === 'generate'}
+				<StepGenerate />
+			{/if}
 		</div>
 	</div>
 </div>