diff --git a/src/lib/components/wizard/StepCardDetails.svelte b/src/lib/components/wizard/StepCardDetails.svelte
index e51d727..4e60613 100644
--- a/src/lib/components/wizard/StepCardDetails.svelte
+++ b/src/lib/components/wizard/StepCardDetails.svelte
@@ -1,25 +1,34 @@
 <script lang="ts">
 	import { currentStep, cardDetails } from '$lib/stores';
 	import Navigator from './subcomponents/Navigator.svelte';
+	import { onMount } from 'svelte';
 
-	// Initialize from localStorage if available, otherwise from the store
-	let homeSection = $state(
-		(typeof window !== 'undefined' && window.localStorage.getItem('homeSection')) ||
-			$cardDetails.homeSection
-	);
-	let validityStart = $state($cardDetails.validityStart || new Date().toISOString().split('T')[0]);
+	let homeSection = $state('');
+	let validityStart = $state('');
 
-	// Persist homeSection to localStorage whenever it changes
-	$effect(() => {
-		if (typeof window !== 'undefined') {
-			localStorage.setItem('homeSection', homeSection);
+	onMount(() => {
+		validityStart = new Date().toISOString().split('T')[0];
+
+		try {
+			const savedHomeSection = localStorage.getItem('homeSection');
+			if (savedHomeSection) {
+				homeSection = savedHomeSection;
+			}
+		} catch (error) {
+			console.error('Failed to access localStorage on mount:', error);
 		}
 	});
 
 	let canProceed = $derived(homeSection.trim() !== '' && validityStart.trim() !== '');
 
 	function handleContinue() {
-		cardDetails.set({ homeSection, validityStart });
+		try {
+			localStorage.setItem('homeSection', homeSection);
+		} catch (error) {
+			console.error('Failed to save to localStorage:', error);
+		}
+		$cardDetails = { homeSection, validityStart };
+		$currentStep++;
 	}
 </script>
 
@@ -33,7 +42,7 @@
 
 	<div class="space-y-6">
 		<div>
-			<label for="homeSection" class="block text-sm font-medium text-gray-700 mb-2">
+			<label for="homeSection" class="mb-2 block text-sm font-medium text-gray-700">
 				Home Section
 			</label>
 			<input
@@ -46,7 +55,7 @@
 		</div>
 
 		<div>
-			<label for="validityStart" class="block text-sm font-medium text-gray-700 mb-2">
+			<label for="validityStart" class="mb-2 block text-sm font-medium text-gray-700">
 				Card Validity Start Date
 			</label>
 			<input
@@ -55,18 +64,20 @@
 				bind:value={validityStart}
 				class="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
 			/>
-			<p class="mt-2 text-xs text-gray-500">Default date is today, but future date can be selected.</p>
+			<p class="mt-2 text-xs text-gray-500">
+				Default date is today, but future date can be selected.
+			</p>
 		</div>
 	</div>
-    
-<div class="mt-10">
-    <Navigator
-	canProceed={canProceed}
-	currentStep={currentStep}
-	onForward={handleContinue}
-	textBack="Back to Row Filtering"
-	textForwardEnabled="Continue to Photo Review"
-	textForwardDisabled="Please fill out all fields"
-/>
-</div>
+
+	<div class="mt-10">
+		<Navigator
+			{canProceed}
+			{currentStep}
+			onForward={handleContinue}
+			textBack="Back to Row Filtering"
+			textForwardEnabled="Continue to Photo Review"
+			textForwardDisabled="Please fill out all fields"
+		/>
+	</div>
 </div>