Update splash

Fix date issues
Resize photos and make thicker borders on text
2025-11-18 13:37:32 +01:00 · 2025-11-18 13:32:55 +01:00 · 2025-10-28 18:19:38 +01:00 · 2025-09-17 21:47:37 +02:00 · 2025-09-08 16:04:50 +02:00 · 2025-09-08 15:45:36 +02:00
36 changed files with 1438 additions and 874 deletions
--- a/.env.example
+++ b/.env.example
@@ -2,8 +2,6 @@
 PUBLIC_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID_HERE"

 # Face Detection Crop Configuration
-# Crop aspect ratio (width:height) - e.g., 1.0 for square, 1.5 for 3:2 ratio
-PUBLIC_CROP_RATIO=1.0

 # Face offset from center (as percentage of crop dimensions)
 # Positive values move the face toward bottom-right, negative toward top-left
--- a/.gitea/workflows/release.yml
+++ b/.gitea/workflows/release.yml
@@ -37,6 +37,9 @@ jobs:
          push: true
          tags: "${{ vars.DOCKER_IMAGE }}:latest,${{ vars.DOCKER_IMAGE }}:${{ steps.date.outputs.date }}"
          platforms: linux/amd64
+          build-args: |
+            PUBLIC_GIT_REF=${{ env.GITHUB_SHA }}
+            PUBLIC_BUILD_DATE=${{ steps.date.outputs.date }}
          cache-to: "mode=max,image-manifest=true,oci-mediatypes=true,type=registry,ref=${{ vars.DOCKER_IMAGE }}:cache"
          cache-from: "mode=max,image-manifest=true,oci-mediatypes=true,type=registry,ref=${{ vars.DOCKER_IMAGE }}:cache"
          labels: |
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -7,7 +7,7 @@
    - Pass fucntions as props instead od dispatching events
    - Mixing old (on:click) and new syntaxes for event handling is not allowed. Use only the onclick syntax
    - when setting state entity, simply od variable = newValue, do not use setState or similar methods like $state.
-    - USe $props instead of export let!
+    - USe $props instead of "export let"!
 - Use styling from ".github/styling.md" for any UI components.
 - Refer to the ".github/core-instructions.md" for the overall structure of the application.
 - Generate ".github/done.md" file to see what is done and what is not. Check it when you start and finish a task.
@@ -15,4 +15,5 @@
 - Avoid unncessary iterations. If problems is mostly solved, stop.
 - Split big components into subcomponents. Always create smaller subcomponents for better context management later.
 - Do not do what you're not being asked. Stick to scope of my request.
- Do not edit stores.ts ! Unless is explicitly allow you to.
+- Do not edit stores.ts ! Unless is explicitly allow you to.
+- Focus only on files that are relevant. Do not venture to fix other things.
--- a/.github/styling.md
+++ b/.github/styling.md
@@ -89,7 +89,7 @@ This document outlines the design system and styling conventions used in the app

 ### Container Pattern
 ```html
-<div class="container mx-auto max-w-2xl bg-white p-4">
+<div class="container mx-auto max-w-5xl bg-white p-4">
  <!-- Content -->
 </div>
 ```
@@ -225,7 +225,7 @@ This document outlines the design system and styling conventions used in the app
 ### Top Navigation
 ```html
 <nav class="border-b border-gray-300 bg-gray-50 p-4 text-gray-900">
-  <div class="container mx-auto max-w-2xl">
+  <div class="container mx-auto max-w-5xl">
    <div class="flex items-center justify-between">
      <a href="/" class="text-lg font-bold">App Name</a>
      <ul class="flex space-x-4">
--- a/6
+++ b/6
@@ -9,6 +9,12 @@ RUN npm prune --production


 FROM node:22-alpine
+
+ARG PUBLIC_GIT_REF
+ARG PUBLIC_BUILD_DATE
+ENV PUBLIC_GIT_REF=$PUBLIC_GIT_REF
+ENV PUBLIC_BUILD_DATE=$PUBLIC_BUILD_DATE
+
 USER node:node
 WORKDIR /app
 COPY --from=builder --chown=node:node /app/build build/
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "card-forge",
 	"private": true,
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
--- a/src/lib/cards/esncard_2026.ts
+++ b/src/lib/cards/esncard_2026.ts
@@ -0,0 +1,31 @@
+import type { Card } from './types';
+
+// User-configurable settings for PDF generation
+export const ESNCard2026: Card = {
+	name: 'ESNcard 2026',
+	image: '/cards/2026.webp',
+	textCard: {
+		width: 50, // mm
+		height: 35 // mm
+	},
+	photoCard: {
+		width: 32, // mm
+		height: 45 // mm
+	},
+	photo: {
+		width: 28, // mm
+		height: 38 // mm
+	},
+	textFields: {
+		name: { x: 3, y: 5, size: 9 },
+		nationality: { x: 3, y: 14, size: 9 },
+		birthday: { x: 33, y: 14, size: 9 },
+		studiesAt: { x: 3, y: 23, size: 9 },
+		esnSection: { x: 3, y: 32, size: 9 },
+		validityStart: { x: 33, y: 32, size: 9 }
+	},
+	photoFields: {
+		photo: { x: 2, y: 2, width: 28, height: 38 },
+		name: { x: 2, y: 42, size: 7 }
+	}
+};
--- a/src/lib/cards/esncard_anniversary.ts
+++ b/src/lib/cards/esncard_anniversary.ts
@@ -0,0 +1,31 @@
+import type { Card } from './types';
+
+// User-configurable settings for PDF generation
+export const ESNCardAnniversary: Card = {
+	name: 'ESNcard Anniversary',
+	image: '/cards/esncard_anniversary.png',
+	textCard: {
+		width: 45, // mm
+		height: 30 // mm
+	},
+	photoCard: {
+		width: 29, // mm
+		height: 41 // mm
+	},
+	photo: {
+		width: 27, // mm
+		height: 37 // mm
+	},
+	textFields: {
+		name: { x: 2, y: 4, size: 8 },
+		nationality: { x: 2, y: 12, size: 8 },
+		birthday: { x: 30, y: 12, size: 8 },
+		studiesAt: { x: 2, y: 20, size: 8 },
+		esnSection: { x: 2, y: 28, size: 8 },
+		validityStart: { x: 30, y: 28, size: 8 }
+	},
+	photoFields: {
+		photo: { x: 2, y: 2, width: 26, height: 36 },
+		name: { x: 2, y: 40, size: 6 }
+	}
+};
--- a/src/lib/cards/index.ts
+++ b/src/lib/cards/index.ts
@@ -0,0 +1,5 @@
+import { ESNCardAnniversary } from './esncard_anniversary';
+// import { ESNCard2026 } from './esncard_2026';
+import type { Card } from './types';
+
+export const cardTypes: Card[] = [ESNCardAnniversary];
--- a/src/lib/cards/types/index.ts
+++ b/src/lib/cards/types/index.ts
@@ -0,0 +1,46 @@
+export interface CardDimensions {
+	width: number; // mm
+	height: number; // mm
+}
+
+export interface PhotoDimensions {
+	width: number; // mm
+	height: number; // mm
+}
+
+export interface TextPosition {
+	x: number; // mm, relative to cell top-left
+	y: number; // mm, relative to cell top-left
+	size: number; // font size in points
+}
+
+export interface PhotoPosition {
+	x: number; // mm, relative to cell top-left
+	y: number; // mm, relative to cell top-left
+	width: number; // mm
+	height: number; // mm
+}
+
+export interface TextFieldLayout {
+	name: TextPosition;
+	nationality: TextPosition;
+	birthday: TextPosition;
+	studiesAt: TextPosition;
+	esnSection: TextPosition;
+	validityStart: TextPosition;
+}
+
+export interface PhotoFieldLayout {
+	photo: PhotoPosition;
+	name: TextPosition;
+}
+
+export interface Card {
+	name: string;
+	image: string;
+	textCard: CardDimensions;
+	photoCard: CardDimensions;
+	photo: PhotoDimensions;
+	textFields: TextFieldLayout;
+	photoFields: PhotoFieldLayout;
+}
--- a/src/lib/components/Splash.svelte
+++ b/src/lib/components/Splash.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
 	import { currentStep } from '$lib/stores.js';
 	import FeatureList from './splash/FeatureList.svelte';
+	import { env } from '$env/dynamic/public';
+
+	const buildDate = env.PUBLIC_BUILD_DATE;
+	const gitRef = env.PUBLIC_GIT_REF ? env.PUBLIC_GIT_REF.substring(0, 7) : '';
+

 	function startWizard() {
 		currentStep.set(1); // Move to auth step
 	}
 </script>

-<div class="flex min-h-screen items-center justify-center bg-gray-100 p-4">
+<div class="flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4">
 	<div
-		class="container mx-auto max-w-4xl rounded-lg border border-gray-200 bg-white/90 p-10 text-center shadow-xl"
+		class="container mx-auto max-w-5xl rounded-lg border border-gray-200 bg-white/90 p-10 text-center shadow-xl"
 	>
-		<div class="mb-10 flex flex-col items-center">
+		<div class="mb-4 flex flex-col items-center">
 			<!-- Animated ESN Logo -->
 			<div
 				class="mx-auto mb-6 flex h-40 w-40 items-center justify-center rounded-full bg-gradient-to-tr from-blue-400 via-purple-400 to-pink-400"
@@ -23,39 +28,45 @@
 			>
 				Card Forge
 			</h1>
-			<p class="mb-4 text-xl leading-relaxed font-medium text-gray-700">
+			<p class="mb-4 text-xl font-medium leading-relaxed text-gray-700">
 				Transform your Google Sheets into professional ESNcards with photos.
 			</p>
 			<p class="mb-4 text-lg leading-relaxed text-gray-600">
-				<span class="font-semibold text-black-800"
-					>Privacy-first</span
-				>: all processing happens in your browser.
+				<span class="font-semibold text-black-800">Privacy-first</span>: all processing happens in
+				your browser.
 			</p>
-			<div class="mb-6">
-				<a
-					href="https://youtube.com"
-					target="_blank"
-					class="inline-flex items-center gap-2 rounded-lg bg-pink-100 px-4 py-2 font-semibold text-pink-700 transition-colors hover:bg-pink-200"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="currentColor"
-						viewBox="0 0 24 24"
-						><path
-							d="M23.498 6.186a2.998 2.998 0 0 0-2.115-2.117C19.073 3.5 12 3.5 12 3.5s-7.073 0-9.383.569A2.998 2.998 0 0 0 .502 6.186C0 8.497 0 12 0 12s0 3.503.502 5.814a2.998 2.998 0 0 0 2.115 2.117C4.927 20.5 12 20.5 12 20.5s7.073 0 9.383-.569a2.998 2.998 0 0 0 2.115-2.117C24 15.503 24 12 24 12s0-3.503-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
-						/></svg
-					>
-					Watch how Card Forge works
-				</a>
-			</div>
-			<FeatureList class="mb-8" />
+			<FeatureList class="mb-6" />
+		</div>
+		<div class="flex flex-col items-center justify-center gap-4 sm:flex-row">
+			<a
+				href="https://youtube.com"
+				target="_blank"
+				class="flex w-64 items-center justify-center gap-2 rounded-lg bg-pink-400 px-8 py-3 text-lg font-bold text-white shadow-lg transition-transform hover:scale-105 hover:bg-pink-400"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					fill="currentColor"
+					viewBox="0 0 24 24"
+					><path
+						d="M23.498 6.186a2.998 2.998 0 0 0-2.115-2.117C19.073 3.5 12 3.5 12 3.5s-7.073 0-9.383.569A2.998 2.998 0 0 0 .502 6.186C0 8.497 0 12 0 12s0 3.503.502 5.814a2.998 2.998 0 0 0 2.115 2.117C4.927 20.5 12 20.5 12 20.5s7.073 0 9.383-.569a2.998 2.998 0 0 0 2.115-2.117C24 15.503 24 12 24 12s0-3.503-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+					/></svg
+				>
+				Watch Tutorial
+			</a>
+			<button
+				onclick={startWizard}
+				class="w-64 rounded-lg bg-blue-600 px-8 py-3 text-lg font-bold text-white shadow-lg transition-transform hover:scale-105 hover:bg-blue-700"
+			>
+				Start Creating Cards
+			</button>
 		</div>
-		<button
-			onclick={startWizard}
-			class="rounded-lg bg-blue-600 bg-gradient-to-r px-10 py-4 text-lg font-bold text-white shadow-lg transition-transform hover:scale-105"
-		>
-			Start Creating Cards
-		</button>
 	</div>
+	<footer class="mt-4 text-center">
+		{#if buildDate && gitRef}
+			<p class="text-xs text-gray-400">
+				Build: {gitRef} {buildDate}
+			</p>
+		{/if}
+	</footer>
 </div>
--- a/src/lib/components/Wizard.svelte
+++ b/src/lib/components/Wizard.svelte
@@ -1,59 +1,76 @@
 <script lang="ts">
-  import { currentStep } from '$lib/stores.js';
-  import StepAuth from './wizard/StepAuth.svelte';
-  import StepSheetSearch from './wizard/StepSheetSearch.svelte';
-  import StepColumnMap from './wizard/StepColumnMap.svelte';
-  import StepRowFilter from './wizard/StepRowFilter.svelte';
-  import StepCardDetails from './wizard/StepCardDetails.svelte';
-  import StepGallery from './wizard/StepGallery.svelte';
-  import StepGenerate from './wizard/StepGenerate.svelte';
+	import { currentStep, steps as stepNames, currentStepName } from '$lib/stores';
+	import Splash from './Splash.svelte';
+	import StepAuth from './wizard/StepAuth.svelte';
+	import StepSheetSearch from './wizard/StepSheetSearch.svelte';
+	import StepColumnMap from './wizard/StepColumnMap.svelte';
+	import StepRowFilter from './wizard/StepRowFilter.svelte';
+	import StepCardDetails from './wizard/StepCardDetails.svelte';
+	import StepCardSelect from './wizard/StepCardSelect.svelte';
+	import StepGallery from './wizard/StepGallery.svelte';
+	import StepGenerate from './wizard/StepGenerate.svelte';

-  const steps = [
-    StepAuth,
-    StepSheetSearch,
-    StepColumnMap,
-    StepRowFilter,
-    StepCardDetails,
-    StepGallery,
-    StepGenerate
-  ];
+	const stepTitles = {
+		splash: 'Welcome',
+		auth: 'Authenticate',
+		search: 'Select Sheet',
+		mapping: 'Map Columns',
+		validation: 'Filter Rows',
+		'card-details': 'Enter Card Details',
+		'card-select': 'Select Card Type',
+		gallery: 'Preview Gallery',
+		generate: 'Generate Cards'
+	};

-  const stepTitles = [
-    'Authenticate',
-    'Select Sheet',
-    'Map Columns',
-    'Filter Rows',
-    'Enter Card Details',
-    'Preview Gallery',
-    'Generate Cards'
-  ];
+	let currentTitle = $derived(stepTitles[$currentStepName]);
+	let currentStepIndex = $derived(stepNames.indexOf($currentStepName));
 </script>

 <div class="bg-gray-100 min-h-screen p-4">
-  <div class="container mx-auto max-w-4xl pb-10">
-    <!-- Progress indicator -->
-    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
-      <div class="flex items-center justify-between mb-4">
-        <h1 class="text-2xl font-bold text-gray-800">
-          {stepTitles[$currentStep - 1]}
-        </h1>
-        <span class="text-sm text-gray-500">
-          Step {$currentStep} of {steps.length}
-        </span>
-      </div>
-      
-      <!-- Progress bar -->
-      <div class="w-full bg-gray-200 rounded-full h-2">
-        <div 
-          class="bg-blue-600 h-2 rounded-full transition-all duration-300"
-          style="width: {($currentStep / steps.length) * 100}%"
-        ></div>
-      </div>
-    </div>
+	<div class="container mx-auto max-w-5xl pb-10">
+		{#if $currentStepName !== 'splash'}
+			<!-- Progress indicator -->
+			<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
+				<div class="flex items-center justify-between mb-4">
+					<h1 class="text-2xl font-bold text-gray-800">
+						{currentTitle}
+					</h1>
+					<span class="text-sm text-gray-500">
+						Step {currentStepIndex} of {stepNames.length - 1}
+					</span>
+				</div>

-    <!-- Step content -->
-    <div class="bg-white rounded-lg shadow-sm">
-      <svelte:component this={steps[$currentStep - 1]} />
-    </div>  
-  </div>
+				<!-- Progress bar -->
+				<div class="w-full bg-gray-200 rounded-full h-2">
+					<div
+						class="bg-blue-600 h-2 rounded-full transition-all duration-300"
+						style="width: {(currentStepIndex / (stepNames.length - 1)) * 100}%"
+					></div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Step content -->
+		<div class="bg-white rounded-lg shadow-sm">
+			{#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>
--- a/src/lib/components/wizard/StepAuth.svelte
+++ b/src/lib/components/wizard/StepAuth.svelte
@@ -1,7 +1,26 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { currentStep } from '$lib/stores.js';
-	import { isSignedIn, handleSignIn, handleSignOut, isGoogleApiReady } from '$lib/google';
+	import {
+		isSignedIn,
+		handleSignOut,
+		requestTokenFromUser,
+		isGoogleApiReady,
+		initGoogleClients
+	} from '$lib/google';
 	import Navigator from './subcomponents/Navigator.svelte';
+
+	onMount(() => {
+		if (!$isGoogleApiReady) {
+			initGoogleClients(() => {
+				// This callback is called when the Google clients are ready.
+			});
+		}
+	});
+
+	function handleSignIn() {
+		requestTokenFromUser();
+	}
 </script>

 <div class="p-6">
@@ -42,7 +61,15 @@
 		<div
 			class="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-gray-50 p-8"
 		>
-			{#if $isSignedIn}
+			{#if !$isGoogleApiReady}
+				<!-- Loading state -->
+				<div class="flex items-center justify-center gap-2">
+					<div
+						class="h-6 w-6 animate-spin rounded-full border-2 border-blue-600 border-t-transparent"
+					></div>
+					<span class="text-sm text-gray-600">Loading Google services...</span>
+				</div>
+			{:else if $isSignedIn}
 				<!-- Authenticated state -->
 				<div class="text-center">
 					<div class="flex items-center justify-center gap-2">
@@ -79,34 +106,9 @@
 					</p>
 					<button
 						onclick={handleSignIn}
-						disabled={!$isGoogleApiReady}
 						class="flex w-full items-center justify-center rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400"
 					>
-						{#if $isGoogleApiReady}
-							Sign In with Google
-						{:else}
-							<svg
-								class="mr-2 h-5 w-5 animate-spin text-white"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-							>
-								<circle
-									class="opacity-25"
-									cx="12"
-									cy="12"
-									r="10"
-									stroke="currentColor"
-									stroke-width="4"
-								></circle>
-								<path
-									class="opacity-75"
-									fill="currentColor"
-									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-								></path>
-							</svg>
-							Loading Google API...
-						{/if}
+						Sign In with Google
 					</button>
 				</div>
 			{/if}
--- a/src/lib/components/wizard/StepCardDetails.svelte
+++ b/src/lib/components/wizard/StepCardDetails.svelte
@@ -3,31 +3,38 @@
 	import Navigator from './subcomponents/Navigator.svelte';
 	import { onMount } from 'svelte';

-	let homeSection = $state('');
+	let esnSection = $state('');
+	let studiesAt = $state('');
 	let validityStart = $state('');

 	onMount(() => {
 		validityStart = new Date().toISOString().split('T')[0];

 		try {
-			const savedHomeSection = localStorage.getItem('homeSection');
-			if (savedHomeSection) {
-				homeSection = savedHomeSection;
+			const savedesnSection = localStorage.getItem('esnSection');
+			if (savedesnSection) {
+				esnSection = savedesnSection;
+			}
+			const savedStudiesAt = localStorage.getItem('studiesAt');
+			if (savedStudiesAt) {
+				studiesAt = savedStudiesAt;
 			}
 		} catch (error) {
 			console.error('Failed to access localStorage on mount:', error);
 		}
 	});

-	let canProceed = $derived(homeSection.trim() !== '' && validityStart.trim() !== '');
+	let canProceed = $derived(esnSection.trim() !== '' && studiesAt.trim() !== '' && validityStart.trim() !== '');

 	function handleContinue() {
 		try {
-			localStorage.setItem('homeSection', homeSection);
+			localStorage.setItem('esnSection', esnSection);
+			localStorage.setItem('studiesAt', studiesAt);
 		} catch (error) {
 			console.error('Failed to save to localStorage:', error);
 		}
-		$cardDetails = { homeSection, validityStart };
+		// Include new field; spread in case store has more fields defined elsewhere
+		$cardDetails = { ...$cardDetails, esnSection, studiesAt, validityStart } as any;
 	}
 </script>

@@ -41,18 +48,31 @@

 	<div class="space-y-6">
 		<div>
-			<label for="homeSection" class="mb-2 block text-sm font-medium text-gray-700">
-				Home Section
+			<label for="esnSection" class="mb-2 block text-sm font-medium text-gray-700">
+				ESN Section
 			</label>
 			<input
-				id="homeSection"
+				id="esnSection"
 				type="text"
-				bind:value={homeSection}
+				bind:value={esnSection}
 				placeholder="e.g., ESN VUT Brno"
 				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"
 			/>
 		</div>

+		<div>
+			<label for="studiesAt" class="mb-2 block text-sm font-medium text-gray-700">
+				Studies At
+			</label>
+			<input
+				id="studiesAt"
+				type="text"
+				bind:value={studiesAt}
+				placeholder="e.g., Brno University of Technology"
+				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"
+			/>
+		</div>
+
 		<div>
 			<label for="validityStart" class="mb-2 block text-sm font-medium text-gray-700">
 				Card Validity Start Date
@@ -74,8 +94,8 @@
 			{canProceed}
 			{currentStep}
 			onForward={handleContinue}
-			textBack="Back to Row Filtering"
-			textForwardEnabled="Continue to Photo Review"
+			textBack="Back to Row Selection"
+			textForwardEnabled="Continue to Card Selection"
 			textForwardDisabled="Please fill out all fields"
 		/>
 	</div>
--- a/src/lib/components/wizard/StepCardSelect.svelte
+++ b/src/lib/components/wizard/StepCardSelect.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { currentStep, selectedCard } from '$lib/stores';
+	import { cardTypes } from '$lib/cards';
+	import type { Card } from '$lib/cards/types';
+	import Navigator from './subcomponents/Navigator.svelte';
+
+	let selected: Card | null = $state(null);
+
+	onMount(() => {
+		const savedCardName = localStorage.getItem('selectedCardName');
+		if (savedCardName) {
+			const foundCard = cardTypes.find((c) => c.name === savedCardName);
+			if (foundCard) {
+				selected = foundCard;
+				selectedCard.set(foundCard);
+			}
+		}
+	});
+
+	function selectCard(card: Card) {
+		selected = card;
+		selectedCard.set(card);
+		localStorage.setItem('selectedCardName', card.name);
+	}
+
+	function onNext() {
+		if (selected) {
+			currentStep.set($currentStep + 1);
+		}
+	}
+
+	function onBack() {
+		currentStep.set($currentStep - 1);
+	}
+</script>
+
+<div class="p-6">
+	<div class="max-w-5xl mx-auto">
+		<div class="mb-6">
+			<h2 class="text-xl font-semibold text-gray-900 mb-2">Select Card Type</h2>
+			<p class="text-sm text-gray-700 mb-4">
+				Choose the type of card you want to generate. This will determine the layout and dimensions of the final PDFs.
+			</p>
+		</div>
+
+		<!-- Card Type Selector -->
+		<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
+			{#each cardTypes as card (card.name)}
+				<button
+					class="relative rounded-lg border-2 p-2 transition-all duration-200"
+					class:border-blue-600={selected?.name === card.name}
+					class:border-gray-200={selected?.name !== card.name}
+					class:shadow-lg={selected?.name === card.name}
+					onclick={() => selectCard(card)}
+				>
+					<img src={card.image} alt={card.name} class="w-full h-auto rounded-md mb-2" />
+					<p class="text-sm font-medium text-center text-gray-800">{card.name}</p>
+					{#if selected?.name === card.name}
+						<div
+							class="absolute top-2 right-2 bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center"
+						>
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								></path>
+							</svg>
+						</div>
+					{/if}
+				</button>
+			{/each}
+		</div>
+
+		<Navigator onForward={onNext} onBack={onBack} nextDisabled={!selected} />
+	</div>
+</div>
--- a/src/lib/components/wizard/StepColumnMap.svelte
+++ b/src/lib/components/wizard/StepColumnMap.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
-	import { selectedSheet, currentStep, columnMapping } from '$lib/stores';
+	import {
+		selectedSheet,
+		currentStep,
+		columnMapping,
+	} from '$lib/stores';
+	import { userEmail } from '$lib/google';
+	import { hashString } from '$lib/utils';
 	import type { ColumnMappingType, SheetInfoType } from '$lib/stores';
-	import { getSheetNames, getSheetData } from '$lib/google';
+	import { getSheetNames, getSheetData, ensureToken } from '$lib/google';
 	import { onMount } from 'svelte';
 	import Navigator from './subcomponents/Navigator.svelte';

@@ -18,7 +24,6 @@
 	let savedSheetInfo = $state<SheetInfoType | null>(null);
 	let mappedIndices = $state<ColumnMappingType>({
 		name: -1,
-		surname: -1,
 		nationality: -1,
 		birthday: -1,
 		pictureUrl: -1,
@@ -27,21 +32,30 @@
 	});

 	const requiredFields = [
-		{ key: 'name', label: 'First Name', required: true },
-		{ key: 'surname', label: 'Last Name', required: true },
+		{ key: 'name', label: 'Full Name', required: true },
 		{ key: 'nationality', label: 'Nationality', required: true },
 		{ key: 'birthday', label: 'Birthday', required: true },
 		{ key: 'pictureUrl', label: 'Photo URL', required: true },
 		{ key: 'alreadyPrinted', label: 'Already Printed', required: false }
 	];

+	async function getRecentSheetsKey() {
+		const email = $userEmail;
+		if (email) {
+			return `recentSheets_${await hashString(email)}`;
+		}
+		return 'recentSheets_anonymous';
+	}
+
 	// Load available sheets when component mounts
 	onMount(async () => {
+		ensureToken();
 		if ($selectedSheet) {
 			console.log('Selected sheet on mount:', $selectedSheet);

 			// Check if we already have saved mapping data
-			const recentSheetsData = localStorage.getItem('recent-sheets');
+			const key = await getRecentSheetsKey();
+			const recentSheetsData = localStorage.getItem(key);

 			if (recentSheetsData) {
 				try {
@@ -62,7 +76,6 @@
 								// Set the mapped indices from saved data
 								mappedIndices = {
 									name: savedSheet.columnMapping.name,
-									surname: savedSheet.columnMapping.surname,
 									nationality: savedSheet.columnMapping.nationality,
 									birthday: savedSheet.columnMapping.birthday,
 									pictureUrl: savedSheet.columnMapping.pictureUrl,
@@ -120,7 +133,6 @@
 		previewData = [];
 		mappedIndices = {
 			name: -1,
-			surname: -1,
 			nationality: -1,
 			birthday: -1,
 			pictureUrl: -1,
@@ -162,7 +174,7 @@
 				autoMapColumns();

 				// Check if we have saved column mapping for this sheet
-				loadSavedColumnMapping();
+				await loadSavedColumnMapping();
 			} else {
 				error = 'The selected sheet appears to be empty.';
 				console.warn('Sheet is empty');
@@ -179,7 +191,6 @@
 		// Reset mappings
 		mappedIndices = {
 			name: -1,
-			surname: -1,
 			nationality: -1,
 			birthday: -1,
 			pictureUrl: -1,
@@ -189,8 +200,7 @@

 		// Auto-mapping patterns
 		const patterns: Record<keyof Omit<ColumnMappingType, 'sheetName'>, RegExp> = {
-			name: /first[\s_-]*name|name|given[\s_-]*name|vorname/i,
-			surname: /last[\s_-]*name|surname|family[\s_-]*name|nachname/i,
+			name: /full[\s_-]*name|name/i,
 			nationality: /nationality|country|nation/i,
 			birthday: /birth|date[\s_-]*of[\s_-]*birth|birthday|dob/i,
 			pictureUrl: /photo|picture|image|url|avatar/i,
@@ -238,15 +248,15 @@
 		updateMappingStatus();
 	}

-	function loadSavedColumnMapping() {
+	async function loadSavedColumnMapping() {
 		if (!$selectedSheet || !selectedSheetName) {
 			console.log('Cannot load saved column mapping: missing selectedSheet or selectedSheetName');
 			return;
 		}

 		try {
-			const recentSheetsKey = 'recent-sheets';
-			const existingData = localStorage.getItem(recentSheetsKey);
+			const key = await getRecentSheetsKey();
+			const existingData = localStorage.getItem(key);

 			if (existingData) {
 				const recentSheets = JSON.parse(existingData);
@@ -260,7 +270,6 @@
 					// Override auto-mapping with saved mapping
 					mappedIndices = {
 						name: savedSheet.columnMapping.name ?? -1,
-						surname: savedSheet.columnMapping.surname ?? -1,
 						nationality: savedSheet.columnMapping.nationality ?? -1,
 						birthday: savedSheet.columnMapping.birthday ?? -1,
 						pictureUrl: savedSheet.columnMapping.pictureUrl ?? -1,
@@ -284,7 +293,6 @@
 		if (!mappedIndices) {
 			mappedIndices = {
 				name: -1,
-				surname: -1,
 				nationality: -1,
 				birthday: -1,
 				pictureUrl: -1,
@@ -304,7 +312,6 @@
 		// Only check required fields for completion
 		const requiredIndices = {
 			name: mappedIndices.name,
-			surname: mappedIndices.surname,
 			nationality: mappedIndices.nationality,
 			birthday: mappedIndices.birthday,
 			pictureUrl: mappedIndices.pictureUrl,
@@ -317,7 +324,6 @@
 		// Update the column mapping store
 		columnMapping.set({
 			name: mappedIndices.name,
-			surname: mappedIndices.surname,
 			nationality: mappedIndices.nationality,
 			birthday: mappedIndices.birthday,
 			pictureUrl: mappedIndices.pictureUrl,
@@ -326,13 +332,13 @@
 		});
 	}

-	function handleContinue() {
+	async function handleContinue() {
 		if (!mappingComplete || !$selectedSheet || !selectedSheetName) return;

 		// Save column mapping to localStorage for the selected sheet
 		try {
-			const recentSheetsKey = 'recent-sheets';
-			const existingData = localStorage.getItem(recentSheetsKey);
+			const key = await getRecentSheetsKey();
+			const existingData = localStorage.getItem(key);
 			let recentSheets = existingData ? JSON.parse(existingData) : [];

 			// Find the current sheet in recent sheets and update its column mapping
@@ -342,7 +348,6 @@

 			const columnMappingData = {
 				name: mappedIndices.name,
-				surname: mappedIndices.surname,
 				nationality: mappedIndices.nationality,
 				birthday: mappedIndices.birthday,
 				pictureUrl: mappedIndices.pictureUrl,
@@ -354,9 +359,6 @@
 				// Update existing entry
 				recentSheets[sheetIndex].columnMapping = columnMappingData;
 				recentSheets[sheetIndex].lastUsed = new Date().toISOString();
-
-				// Ensure we have consistent property names
-				recentSheets[sheetIndex].id = recentSheets[sheetIndex].id || recentSheets[sheetIndex].id;
 			} else {
 				// Add new entry
 				const newEntry = {
@@ -374,7 +376,7 @@
 				}
 			}

-			localStorage.setItem(recentSheetsKey, JSON.stringify(recentSheets));
+			localStorage.setItem(key, JSON.stringify(recentSheets));
 		} catch (err) {
 			console.error('Failed to save column mapping to localStorage:', err);
 		}
@@ -433,7 +435,7 @@
 					>
 						<path
 							fill-rule="evenodd"
-							d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+							d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-4 4a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
 							clip-rule="evenodd"
 						/>
 					</svg>
@@ -733,7 +735,7 @@
 		{currentStep}
 		textBack="Back to Sheet Selection"
 		textForwardDisabled="Select a column mapping"
-		textForwardEnabled="Continue"
+		textForwardEnabled="Continue to Row Selection"
 		onForward={handleContinue}
 	/>
 </div>
--- a/src/lib/components/wizard/StepGallery.svelte
+++ b/src/lib/components/wizard/StepGallery.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
-	import { columnMapping, sheetData, currentStep, pictures, cropRects } from '$lib/stores';
-	import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
+	import { columnMapping, sheetData, currentStep, pictures, cropRects, selectedCard } from '$lib/stores';
+	import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl, ensureToken } from '$lib/google';
 	import Navigator from './subcomponents/Navigator.svelte';
 	import PhotoCard from './subcomponents/PhotoCard.svelte';
 	import * as tf from '@tensorflow/tfjs';
@@ -39,21 +39,47 @@
 				console.log('BlazeFace model loaded');
 			})();
 		}
+
 		return detectorPromise;
 	}

+// Create a downscaled JPEG preview to reduce memory usage for UI rendering
+async function createPreviewBlob(original: Blob, maxSide = 1200, quality = 0.85): Promise<Blob> {
+	try {
+		const bitmap = await createImageBitmap(original);
+		let { width, height } = bitmap;
+		const maxDim = Math.max(width, height);
+		// If image is already at or below the threshold, keep it as-is
+		if (maxDim <= maxSide) {
+			bitmap.close();
+			return original;
+		}
+		const scale = Math.min(1, maxSide / maxDim);
+		const targetW = Math.max(1, Math.round(width * scale));
+		const targetH = Math.max(1, Math.round(height * scale));
+
+		const canvas = document.createElement('canvas');
+		canvas.width = targetW;
+		canvas.height = targetH;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) throw new Error('Canvas 2D context unavailable');
+		ctx.drawImage(bitmap, 0, 0, targetW, targetH);
+		bitmap.close();
+
+		const blob = await new Promise<Blob>((resolve, reject) =>
+			canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob failed'))), 'image/jpeg', quality)
+		);
+		return blob;
+	} catch (e) {
+		// Fallback to original if downscale fails
+		return original;
+	}
+}
+
 	// Force memory cleanup
 	async function forceMemoryCleanup() {
 		await tf.nextFrame(); // Wait for any pending GPU operations
 		
-		// Log memory state without aggressive cleanup
-		const memInfo = tf.memory();
-		console.log('Memory status:', {
-			tensors: memInfo.numTensors,
-			dataBuffers: memInfo.numDataBuffers,
-			bytes: memInfo.numBytes
-		});
-		
 		// Only run garbage collection if available, don't dispose variables
 		if (typeof window !== 'undefined' && 'gc' in window) {
 			(window as any).gc();
@@ -75,7 +101,7 @@
 		}

 		// Initialize queues with more conservative concurrency
-		downloadQueue = new PQueue({ concurrency: 3 }); // Reduced from 5
+		downloadQueue = new PQueue({ concurrency: 4 }); // Reduced from 5
 		faceDetectionQueue = new PQueue({ concurrency: 1 }); // Keep at 1 for memory safety

 		// When both queues are idle, we're done
@@ -114,7 +140,7 @@
 		console.log(`Found ${totalCount} unique photo URLs to process.`);

 		photos = Array.from(photoUrls).map((url) => ({
-			name: photoMap.get(url)![0].name + ' ' + photoMap.get(url)![0].surname,
+			name: photoMap.get(url)![0].name,
 			url,
 			status: 'loading' as const,
 			retryCount: 0,
@@ -129,6 +155,7 @@

 	// Initialize detector and process photos
 	onMount(() => {
+		ensureToken();
 		initializeDetector(); // Start loading model
 		if ($sheetData.length > 0 && $columnMapping.pictureUrl !== undefined) {
 			console.log('Processing photos for gallery step');
@@ -150,7 +177,6 @@

 			if (isGoogleDriveUrl(photo.url)) {
 				// Download from Google Drive
-				console.log(`Downloading from Google Drive: ${photo.name}`);
 				blob = await downloadDriveImage(photo.url);
 			} else {
 				// For direct URLs, convert to blob
@@ -164,7 +190,6 @@
 				blob.type === 'image/heif' ||
 				photo.url.toLowerCase().endsWith('.heic')
 			) {
-				console.log(`HEIC detected for ${photo.name}. Starting conversion in background.`);
 				photo.status = 'loading'; // Visually indicate something is happening
 				// Don't await this, let it run in the background
 				convertHeicPhoto(index, blob);
@@ -184,8 +209,6 @@
 	async function convertHeicPhoto(index: number, blob: Blob) {
 		const photo = photos[index];
 		try {
-			console.log(`Converting HEIC with heic-convert for ${photo.name}...`);
-
 			// Dynamically import the browser-specific version of the library
 			const { default: convert } = await import('heic-convert/browser');

@@ -196,9 +219,10 @@
 				quality: 0.9
 			});

-			const convertedBlob = new Blob([outputBuffer], { type: 'image/jpeg' });
-
-			console.log(`Successfully converted HEIC for ${photo.name}`);
+			const buffer = outputBuffer instanceof Uint8Array
+				? outputBuffer.buffer.slice(outputBuffer.byteOffset, outputBuffer.byteOffset + outputBuffer.byteLength)
+				: outputBuffer;
+			const convertedBlob = new Blob([buffer as ArrayBuffer], { type: 'image/jpeg' });

 			// Now that it's converted, process it like any other image
 			await processLoadedBlob(index, convertedBlob);
@@ -213,27 +237,30 @@
 	async function processLoadedBlob(index: number, blob: Blob) {
 		const photo = photos[index];
 		try {
-			const objectUrl = createImageObjectUrl(blob);
+		// Downsize once and use this for storage, preview, and detection
+		const resizedBlob = await createPreviewBlob(blob, 1600, 0.85);
+		await set(photo.url, resizedBlob);
+		const objectUrl = createImageObjectUrl(resizedBlob);

-			// Test if image loads properly
+		// Test if downsized image loads properly
 			await new Promise<void>((resolve, reject) => {
 				const img = new Image();
 				img.onload = () => resolve();
 				img.onerror = (error) => {
-					console.error(`Failed to load image for ${photo.name}:`, error);
+			console.error(`Failed to load downsized image for ${photo.name}:`, error);
 					reject(new Error('Failed to load image'));
 				};
 				img.src = objectUrl;
 			});

+			// Revoke any previous preview URL to avoid leaks
+			if (photo.objectUrl && photo.objectUrl.startsWith('blob:') && photo.objectUrl !== objectUrl) {
+				URL.revokeObjectURL(photo.objectUrl);
+			}
+
 			photo.objectUrl = objectUrl;
 			photo.status = 'success';
-			console.log(`Photo loaded successfully: ${photo.name}`);

-			// Save blob to IndexedDB instead of the store
-			await set(photo.url, blob);
-
-			// Save to pictures store, but without the blob to save memory
 			pictures.update((pics) => ({
 				...pics,
 				[photo.url]: {
@@ -245,8 +272,8 @@
 				}
 			}));

-			// Add face detection to its queue
-			faceDetectionQueue.add(() => detectFaceForPhoto(index));
+	// Add face detection to its queue using the downsized image shown in UI
+	faceDetectionQueue.add(() => detectFaceForPhoto(index));
 		} catch (error) {
 			console.error(`Failed to process blob for ${photo.name}:`, error);
 			photo.status = 'error';
@@ -269,37 +296,52 @@
 			photo.faceDetectionStatus = 'processing';
 			const img = new Image();
 			img.crossOrigin = 'anonymous';
-			img.src = photo.objectUrl!;
+	// Use the downsized UI image to keep coordinates aligned
+	img.src = photo.objectUrl!;
 			await new Promise((r, e) => {
 				img.onload = r;
 				img.onerror = e;
 			});

-			// Create tensor and manually dispose it after use
-			imageTensor = tf.browser.fromPixels(img);
-			const predictions = await detector.estimateFaces(imageTensor, false);
+		// Create tensor; run estimation (avoid tf.tidy here to not dispose returned tensors prematurely)
+		imageTensor = tf.browser.fromPixels(img);
+		const predictions: any[] = await detector.estimateFaces(imageTensor, false);

 			if (predictions.length > 0) {
-				const getProbability = (p: number | tf.Tensor) =>
-					typeof p === 'number' ? p : p.dataSync()[0];
+				const tensorToNumArray = (v: any): number[] => {
+					if (Array.isArray(v)) return v as number[];
+					if (typeof v === 'number') return [v];
+					if (v && typeof v.dataSync === 'function') {
+						const arr = Array.from(v.dataSync() as Float32Array);
+						if (typeof v.dispose === 'function') v.dispose();
+						return arr as number[];
+					}
+					return [];
+				};
+				const getProbability = (p: any) => tensorToNumArray(p)[0] ?? 0;

 				const face = predictions.sort(
 					(a, b) => getProbability(b.probability!) - getProbability(a.probability!)
 				)[0];

-				const topLeft = face.topLeft as [number, number];
-				const bottomRight = face.bottomRight as [number, number];
+				const topLeftArr = tensorToNumArray(face.topLeft);
+				const bottomRightArr = tensorToNumArray(face.bottomRight);
+				const topLeft = [topLeftArr[0], topLeftArr[1]] as [number, number];
+				const bottomRight = [bottomRightArr[0], bottomRightArr[1]] as [number, number];

 				let [x1, y1] = topLeft;
 				let [x2, y2] = bottomRight;
-				const scaleX = img.naturalWidth / img.width;
-				const scaleY = img.naturalHeight / img.height;
+				// Use natural sizes; detection ran on original if provided
+				const scaleX = 1;
+				const scaleY = 1;
 				const faceWidth = (x2 - x1) * scaleX;
 				const faceHeight = (y2 - y1) * scaleY;
 				const faceCenterX = (x1 + (x2 - x1) / 2) * scaleX;
 				const faceCenterY = (y1 + (y2 - y1) / 2) * scaleY;

-				const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
+				// Use the photo card aspect ratio from the selected card
+				const photoDimensions = $selectedCard!.photo;
+				const cropRatio = photoDimensions.width / photoDimensions.height;
 				const offsetX = parseFloat(env.PUBLIC_FACE_OFFSET_X || '0.0');
 				const offsetY = parseFloat(env.PUBLIC_FACE_OFFSET_Y || '0.0');
 				const cropScale = parseFloat(env.PUBLIC_CROP_SCALE || '2.5');
@@ -425,6 +467,11 @@
 				faceDetectionQueue.clear();
 			}
 			cleanupObjectUrls();
+			// Dispose the detector model if possible to release GPU/CPU memory
+			if (detector && typeof (detector as any).dispose === 'function') {
+				(detector as any).dispose();
+			}
+			detector = undefined;
 		};
 	});
 </script>
@@ -534,6 +581,7 @@
 				{#each photos as photo, index}
 					<PhotoCard
 						{photo}
+						photoDimensions={$selectedCard!.photo}
 						onCropUpdated={(e) => handleCropUpdate(index, e)}
 						onRetry={() => retryPhoto(index)}
 					/>
@@ -546,8 +594,8 @@
 	<Navigator
 		canProceed={canProceed()}
 		{currentStep}
-		textBack="Back to Row Filter"
-		textForwardDisabled="Waiting from photos"
+		textBack="Back to Card Selection"
+		textForwardDisabled="Waiting for photos"
 		textForwardEnabled={`Generate ${photos.filter((p) => p.status === 'success' && p.cropData).length} Cards`}
 	/>
 </div>
--- a/src/lib/components/wizard/StepGenerate.svelte
+++ b/src/lib/components/wizard/StepGenerate.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { sheetData, currentStep, pictures, cropRects } from '$lib/stores';
-	import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
+	import { sheetData, currentStep, pictures, cropRects, cardDetails, selectedCard } from '$lib/stores';
+	import type { Card } from '$lib/cards/types';
+	import { PDFDocument, StandardFonts, rgb, type PDFPage } from 'pdf-lib';
 	import * as fontkit from 'fontkit';
 	import { clear } from 'idb-keyval';
 	import {
@@ -13,13 +14,9 @@
 		getImageBlob,
 		MM_TO_PT
 	} from '$lib/pdfLayout';
-	import {
-		PAGE_SETTINGS,
-		TEXT_CARD_DIMENSIONS,
-		PHOTO_CARD_DIMENSIONS,
-		TEXT_FIELD_LAYOUT,
-		PHOTO_FIELD_LAYOUT
-	} from '$lib/pdfSettings';
+	import { PAGE_SETTINGS } from '$lib/pdfSettings';
+	import type { PageSettings } from '$lib/pdfSettings';
+	import Navigator from './subcomponents/Navigator.svelte';

 	type FileGenerationState = 'idle' | 'generating' | 'done' | 'error';

@@ -70,13 +67,10 @@
 	}

 	onMount(() => {
+		handleGenerateAll();
 		// Add event listener for page unload
 		window.addEventListener('beforeunload', handleBeforeUnload);

-		// Start generation automatically when the component mounts
-		handleGenerate('esncards_text.pdf');
-		handleGenerate('esncards_photos.pdf');
-
 		// Cleanup function when component unmounts
 		return () => {
 			window.removeEventListener('beforeunload', handleBeforeUnload);
@@ -84,6 +78,22 @@
 		};
 	});

+	async function handleGenerateAll() {
+		if (!$selectedCard) return;
+
+		// Reset file states and revoke old URLs
+		files.forEach((f) => {
+			if (f.url) URL.revokeObjectURL(f.url);
+		});
+		files = JSON.parse(JSON.stringify(initialFiles));
+
+		// Generate both
+		await handleGenerate('esncards_text.pdf');
+		await handleGenerate('esncards_photos.pdf');
+	}
+
+	const generationStarted = $derived(files.some((f) => f.state !== 'idle'));
+
 	// Load Roboto font
 	async function loadRobotoFont() {
 		try {
@@ -109,6 +119,107 @@
 		return `${year}-${month}-${day}-${hours}-${minutes}`;
 	}

+	// Draw a very wide 'H' (10 cm length) at the top and left margins as registration marks
+	function drawHMarks(page: PDFPage, font: any, pageSettings: PageSettings) {
+		const color = rgb(0, 0, 0); // pure black
+		const lengthPt = 100 * MM_TO_PT; // 10 cm
+		const tickLenPt = 2 * MM_TO_PT; // 2 mm tick
+		const strokePt = 0.7; // visual thickness
+
+		// Top margin center
+		const centerTopX = (pageSettings.pageWidth / 2) * MM_TO_PT;
+		const centerTopY = (pageSettings.pageHeight - pageSettings.margin / 2) * MM_TO_PT;
+		const leftTopX = centerTopX - lengthPt / 2;
+		const rightTopX = centerTopX + lengthPt / 2;
+
+		// Horizontal bar (top)
+		page.drawRectangle({
+			x: leftTopX,
+			y: centerTopY - strokePt / 2,
+			width: lengthPt,
+			height: strokePt,
+			color
+		});
+		// Left vertical tick (top)
+		page.drawRectangle({
+			x: leftTopX - strokePt / 2,
+			y: centerTopY - tickLenPt / 2,
+			width: strokePt,
+			height: tickLenPt,
+			color
+		});
+		// Right vertical tick (top)
+		page.drawRectangle({
+			x: rightTopX - strokePt / 2,
+			y: centerTopY - tickLenPt / 2,
+			width: strokePt,
+			height: tickLenPt,
+			color
+		});
+
+		// Label under the top bar, centered
+		const label = 'Print gauge - if not 10 cm long, the page is not printed correctly!';
+		const labelSize = 7;
+		const labelWidth = font.widthOfTextAtSize(label, labelSize);
+		const labelX = centerTopX - labelWidth / 2; // center horizontally
+		const labelY = centerTopY - 3 * MM_TO_PT; // ~3mm below the bar
+		page.drawText(label, {
+			x: labelX,
+			y: labelY,
+			size: labelSize,
+			font,
+			color
+		});
+
+		// Left margin center (vertical bar)
+		const centerLeftX = (pageSettings.margin / 2) * MM_TO_PT;
+		const centerLeftY = (pageSettings.pageHeight / 2) * MM_TO_PT;
+
+		// Vertical bar (left)
+		page.drawRectangle({
+			x: centerLeftX - strokePt / 2,
+			y: centerLeftY - lengthPt / 2,
+			width: strokePt,
+			height: lengthPt,
+			color
+		});
+		// Top horizontal tick (left)
+		page.drawRectangle({
+			x: centerLeftX - tickLenPt / 2,
+			y: centerLeftY + lengthPt / 2 - strokePt / 2,
+			width: tickLenPt,
+			height: strokePt,
+			color
+		});
+		// Bottom horizontal tick (left)
+		page.drawRectangle({
+			x: centerLeftX - tickLenPt / 2,
+			y: centerLeftY - lengthPt / 2 - strokePt / 2,
+			width: tickLenPt,
+			height: strokePt,
+			color
+		});
+	}
+
+	// Format a YYYY-MM-DD string into "DD   MM   YY"
+	function formatDateDDMMYY(value: string): string {
+		if (!value) return '';
+		const trimmed = value.trim();
+
+		// Expects YYYY-MM-DD and splits it
+		const parts = trimmed.split('-');
+		if (parts.length === 3) {
+			const [y, mo, d] = parts;
+			if (y.length === 4 && mo.length === 2 && d.length === 2) {
+				return `${d}   ${mo}   ${y.slice(-2)}`;
+			}
+		}
+
+		// Fallback for any other format that might slip through
+		console.warn(`Unexpected date format received in formatDateDDMMYY: "${trimmed}"`);
+		return trimmed;
+	}
+
 	// Crop image using canvas
 	async function cropImage(
 		imageBlob: Blob,
@@ -177,7 +288,12 @@
 			const pdfBytes =
 				fileName === 'esncards_text.pdf' ? await generateTextPDF() : await generatePhotoPDF();

-			const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+			// Convert Uint8Array to ArrayBuffer slice to satisfy BlobPart typing
+			const arrayBuffer = pdfBytes.buffer.slice(
+				pdfBytes.byteOffset,
+				pdfBytes.byteOffset + pdfBytes.byteLength
+			);
+			const blob = new Blob([arrayBuffer as ArrayBuffer], { type: 'application/pdf' });

 			// Revoke old URL if it exists
 			if (fileToUpdate.url) {
@@ -191,13 +307,6 @@
 			const timestamp = getTimestamp();
 			const baseName = fileName.replace('.pdf', '');
 			fileToUpdate.downloadName = `${baseName}_${timestamp}.pdf`;
-
-			// Check if both PDFs are done, then clear sensitive data
-			const allDone = files.every((f) => f.state === 'done' || f.state === 'error');
-			if (allDone) {
-				console.log('All PDFs generated, clearing sensitive data...');
-				await clearSensitiveData();
-			}
 		} catch (error: any) {
 			console.error(`PDF generation failed for ${fileName}:`, error);
 			fileToUpdate.state = 'error';
@@ -206,6 +315,9 @@
 	}

 	async function generateTextPDF() {
+		const card = $selectedCard;
+		if (!card) throw new Error('No card type selected');
+
 		const pdfDoc = await PDFDocument.create();
 		pdfDoc.registerFontkit(fontkit);

@@ -218,8 +330,8 @@
 			PAGE_SETTINGS.pageWidth,
 			PAGE_SETTINGS.pageHeight,
 			PAGE_SETTINGS.margin,
-			TEXT_CARD_DIMENSIONS.width,
-			TEXT_CARD_DIMENSIONS.height
+			card.textCard.width,
+			card.textCard.height
 		);
 		const pageDimsPt = {
 			width: PAGE_SETTINGS.pageWidth * MM_TO_PT,
@@ -227,10 +339,15 @@
 		};

 		let page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+		drawHMarks(page, font, PAGE_SETTINGS);
 		let currentRow = 0;
 		let currentCol = 0;

 		const validRows = $sheetData.filter((row) => row._valid);
+		const details = $cardDetails;
+		const studiesAtAll = details?.studiesAt ?? '';
+		const esnSectionAll = details?.esnSection ?? '';
+		const validityStartAll = details?.validityStart ?? '';

 		for (let i = 0; i < validRows.length; i++) {
 			const row = validRows[i];
@@ -241,44 +358,86 @@

 			// Get field values
 			const name = row.name;
-			const surname = row.surname;
 			const nationality = row.nationality;
 			const birthday = row.birthday;
+			const studiesAt = studiesAtAll;
+			const esnSection = esnSectionAll;
+			const validityStart = validityStartAll;
+			const birthdayFmt = formatDateDDMMYY(birthday);
+			const validityStartFmt = formatDateDDMMYY(validityStart);

-			// Draw name
+			// Row 1: Name
 			const namePos = getAbsolutePositionPt(
 				cellX_mm,
 				cellY_mm,
 				PAGE_SETTINGS.pageHeight,
-				TEXT_FIELD_LAYOUT.name
+				card.textFields.name
 			);
-			page.drawText(`${name} ${surname}`, {
+			page.drawText(`${name}`, {
 				...namePos,
 				font,
 				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
 			});

-			// Draw nationality
+			// Row 2 left: Nationality
 			const natPos = getAbsolutePositionPt(
 				cellX_mm,
 				cellY_mm,
 				PAGE_SETTINGS.pageHeight,
-				TEXT_FIELD_LAYOUT.nationality
+				card.textFields.nationality
 			);
-			page.drawText(`Nationality: ${nationality}`, {
+			page.drawText(`${nationality}`, {
 				...natPos,
 				font,
 				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
 			});

-			// Draw birthday
+			// Row 2 right: Date of birth
 			const bdayPos = getAbsolutePositionPt(
 				cellX_mm,
 				cellY_mm,
 				PAGE_SETTINGS.pageHeight,
-				TEXT_FIELD_LAYOUT.birthday
+				card.textFields.birthday
 			);
-			page.drawText(`Birthday: ${birthday}`, {
+			// Row 3: Studies at
+			const studiesPos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				card.textFields.studiesAt
+			);
+			page.drawText(`${studiesAt}`, {
+				...studiesPos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+
+			// Row 4 left: ESN Section
+			const sectionPos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				card.textFields.esnSection
+			);
+			page.drawText(`${esnSection}`, {
+				...sectionPos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+
+			// Row 4 right: Valid from
+			const validPos = getAbsolutePositionPt(
+				cellX_mm,
+				cellY_mm,
+				PAGE_SETTINGS.pageHeight,
+				card.textFields.validityStart
+			);
+			page.drawText(`${validityStartFmt}`, {
+				...validPos,
+				font,
+				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
+			});
+			page.drawText(`${birthdayFmt}`, {
 				...bdayPos,
 				font,
 				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
@@ -301,6 +460,7 @@
 				currentRow++;
 				if (currentRow >= gridLayout.rows) {
 					page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+					drawHMarks(page, font, PAGE_SETTINGS);
 					currentRow = 0;
 				}
 			}
@@ -310,6 +470,9 @@
 	}

 	async function generatePhotoPDF() {
+		const card = $selectedCard;
+		if (!card) throw new Error('No card type selected');
+
 		const pdfDoc = await PDFDocument.create();
 		pdfDoc.registerFontkit(fontkit);

@@ -322,8 +485,8 @@
 			PAGE_SETTINGS.pageWidth,
 			PAGE_SETTINGS.pageHeight,
 			PAGE_SETTINGS.margin,
-			PHOTO_CARD_DIMENSIONS.width,
-			PHOTO_CARD_DIMENSIONS.height
+			card.photoCard.width,
+			card.photoCard.height
 		);
 		const pageDimsPt = {
 			width: PAGE_SETTINGS.pageWidth * MM_TO_PT,
@@ -331,6 +494,7 @@
 		};

 		let page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+		drawHMarks(page, font, PAGE_SETTINGS);
 		let currentRow = 0;
 		let currentCol = 0;

@@ -348,7 +512,7 @@
 				cellX_mm,
 				cellY_mm,
 				PAGE_SETTINGS.pageHeight,
-				PHOTO_FIELD_LAYOUT.photo
+				card.photoFields.photo
 			);

 			const pictureUrl = row.pictureUrl;
@@ -413,14 +577,13 @@

 			// Draw name
 			const name = row.name;
-			const surname = row.surname;
 			const namePos = getAbsolutePositionPt(
 				cellX_mm,
 				cellY_mm,
 				PAGE_SETTINGS.pageHeight,
-				PHOTO_FIELD_LAYOUT.name
+				card.photoFields.name
 			);
-			page.drawText(`${name} ${surname}`, {
+			page.drawText(`${name}`, {
 				...namePos,
 				font,
 				color: rgb(TEXT_CONFIG.color.r, TEXT_CONFIG.color.g, TEXT_CONFIG.color.b)
@@ -433,6 +596,7 @@
 				currentRow++;
 				if (currentRow >= gridLayout.rows) {
 					page = pdfDoc.addPage([pageDimsPt.width, pageDimsPt.height]);
+					drawHMarks(page, font, PAGE_SETTINGS);
 					currentRow = 0;
 				}
 			}
@@ -475,150 +639,129 @@
 </script>

 <div class="p-6">
-	<div class="max-w-4xl mx-auto">
+	<div class="max-w-5xl mx-auto">
 		<div class="mb-6">
-			<h2 class="text-xl font-semibold text-gray-900 mb-2">
-				Generating PDFs
-			</h2>
-			
+			<h2 class="text-xl font-semibold text-gray-900 mb-2">Generating PDFs...</h2>
 			<p class="text-sm text-gray-700 mb-4">
-				Create two PDF documents: one with text data and one with photos.
+				Your PDF documents are being created. Please wait a moment.
 			</p>
 		</div>

-		<!-- Summary -->
-		<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-4">
-			<h3 class="text-sm font-medium text-gray-700 mb-3">Generation Summary</h3>
-
-			<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
-				<div class="text-center">
-					<div class="text-2xl font-bold text-gray-900">
-						{$sheetData.filter((row) => row._valid).length}
+		{#if files.some((f) => f.state === 'generating')}
+			<div class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
+				<div class="flex items-center justify-between">
+					<div class="flex items-center">
+						<div
+							class="mr-3 h-5 w-5 animate-spin rounded-full border-2 border-blue-600 border-t-transparent"
+						></div>
+						<span class="text-sm text-blue-800"> Processing... </span>
 					</div>
-					<div class="text-gray-600">Records to Process</div>
-				</div>
-
-				<div class="text-center">
-					<div class="text-2xl font-bold text-blue-600">{files.length}</div>
-					<div class="text-gray-600">PDFs to Generate</div>
-				</div>
-
-				<div class="text-center">
-					<div class="text-2xl font-bold text-green-600">
-						{files.filter((f) => f.state === 'done').length}
-					</div>
-					<div class="text-gray-600">Files Ready</div>
 				</div>
 			</div>
-		</div>
+		{/if}

-		<!-- Generated Files -->
-		<div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
-			<div class="p-4 border-b border-gray-200">
-				<h3 class="text-lg font-medium text-gray-900">Available Downloads</h3>
-			</div>
+		{#if generationStarted}
+			<!-- Generated Files -->
+			<div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
+				<div class="p-4 border-b border-gray-200">
+					<h3 class="text-lg font-medium text-gray-900">Available Downloads</h3>
+				</div>

-			<div class="divide-y divide-gray-200">
-				{#each files as file (file.name)}
-					<div class="p-4 flex items-center justify-between">
-						<div class="flex items-center">
-							{#if file.displayName === 'Text PDF'}
-								<svg
-									class="w-8 h-8 text-red-600 mr-3"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								>
-									<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-									<polyline points="14 2 14 8 20 8"></polyline>
-									<line x1="12" y1="18" x2="12" y2="12"></line>
-									<line x1="9" y1="12" x2="15" y2="12"></line>
-								</svg>
-							{:else if file.displayName === 'Photos PDF'}
-								<svg
-									class="w-8 h-8 text-red-600 mr-3"
-									viewBox="0 0 24 24"
-									fill="none"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								>
-									<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-									<polyline points="14 2 14 8 20 8"></polyline>
-									<circle cx="12" cy="13" r="2"></circle>
-									<path d="M15 17.5c-1.5-1-4.5-1-6 0"></path>
-								</svg>
-							{/if}
-							<div>
-								<h4 class="text-sm font-medium text-gray-900">{file.displayName}</h4>
-								{#if file.state === 'done' && file.size}
-									<p class="text-xs text-gray-500">{formatFileSize(file.size)}</p>
-								{:else if file.state === 'error'}
-									<p class="text-xs text-red-500">Error: {file.error}</p>
+				<div class="divide-y divide-gray-200">
+					{#each files as file (file.name)}
+						<div class="p-4 flex items-center justify-between">
+							<div class="flex items-center">
+								{#if file.displayName === 'Text PDF'}
+									<svg
+										class="w-8 h-8 text-red-600 mr-3"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+										<polyline points="14 2 14 8 20 8"></polyline>
+										<line x1="12" y1="18" x2="12" y2="12"></line>
+										<line x1="9" y1="12" x2="15" y2="12"></line>
+									</svg>
+								{:else if file.displayName === 'Photos PDF'}
+									<svg
+										class="w-8 h-8 text-red-600 mr-3"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+										<polyline points="14 2 14 8 20 8"></polyline>
+										<circle cx="12" cy="13" r="2"></circle>
+										<path d="M15 17.5c-1.5-1-4.5-1-6 0"></path>
+									</svg>
 								{/if}
-							</div>
-						</div>
-
-						{#if file.state === 'idle'}
-							<button
-								onclick={() => handleGenerate(file.name)}
-								class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
-							>
-								Generate
-							</button>
-						{:else if file.state === 'generating'}
-							<button
-								disabled
-								class="px-4 py-2 bg-gray-400 text-white rounded-md text-sm font-medium cursor-wait"
-							>
-								<div class="flex items-center">
-									<div
-										class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"
-									></div>
-									Generating...
+								<div>
+									<h4 class="text-sm font-medium text-gray-900">{file.displayName}</h4>
+									{#if file.state === 'done' && file.size}
+										<p class="text-xs text-gray-500">{formatFileSize(file.size)}</p>
+									{:else if file.state === 'error'}
+										<p class="text-xs text-red-500">Error: {file.error}</p>
+									{:else if file.state === 'generating'}
+										<p class="text-xs text-gray-500">Generating...</p>
+									{:else if file.state === 'idle'}
+										<p class="text-xs text-gray-500">Waiting...</p>
+									{/if}
 								</div>
-							</button>
-						{:else if file.state === 'done'}
-							<button
-								onclick={() => downloadFile(file)}
-								class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
-							>
-								Download
-							</button>
-						{:else if file.state === 'error'}
-							<button
-								onclick={() => handleGenerate(file.name)}
-								class="px-4 py-2 bg-red-600 text-white rounded-md text-sm font-medium hover:bg-red-700"
-							>
-								Retry
-							</button>
-						{/if}
-					</div>
-				{/each}
+							</div>
+
+							{#if file.state === 'idle'}
+								<div class="px-4 py-2 text-gray-500 text-sm">Waiting...</div>
+							{:else if file.state === 'generating'}
+								<button
+									disabled
+									aria-label="Generating..."
+									class="px-4 py-2 bg-gray-400 text-white rounded-md text-sm font-medium cursor-wait"
+								>
+									<div class="flex items-center justify-center">
+										<div
+											class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+										></div>
+									</div>
+								</button>
+							{:else if file.state === 'done'}
+								<button
+									onclick={() => downloadFile(file)}
+									class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"
+								>
+									Download
+								</button>
+							{:else if file.state === 'error'}
+								<button
+									onclick={() => handleGenerate(file.name)}
+									class="px-4 py-2 bg-red-600 text-white rounded-md text-sm font-medium hover:bg-red-700"
+								>
+									Retry
+								</button>
+							{/if}
+						</div>
+					{/each}
+				</div>
 			</div>
-		</div>
+		{/if}

 		<!-- Navigation -->
-		<div class="flex justify-between">
-			<button
-				onclick={() => currentStep.set(6)}
-				class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
-			>
-				← Back to Gallery
-			</button>
-
-			{#if files.some((f) => f.state === 'done' || f.state === 'error')}
-				<button
-					onclick={resetAndStartOver}
-					class="px-4 py-2 bg-green-600 text-white rounded-lg font-medium hover:bg-green-700"
-				>
-					Start Over
-				</button>
-			{/if}
+		<div class="mt-10">
+			<Navigator
+				{currentStep}
+				onForward={resetAndStartOver}
+				canProceed={files.some((f) => f.state === 'done' || f.state === 'error')}
+				textBack="Back to Gallery"
+				textForwardEnabled="Start Over"
+				textForwardDisabled="Generate PDFs to Continue"
+				hideForwardUntilProceedable={true}
+			/>
 		</div>
 	</div>
 </div>
--- a/src/lib/components/wizard/StepRowFilter.svelte
+++ b/src/lib/components/wizard/StepRowFilter.svelte
@@ -6,10 +6,11 @@
 		currentStep,
 	} from '$lib/stores';
 	import type { RowData } from '$lib/stores';
-	import { getSheetData } from '$lib/google';
+	import { getSheetData, ensureToken } from '$lib/google';
 	import { v4 as uuid } from 'uuid';
 	import Navigator from './subcomponents/Navigator.svelte';
 	import { onMount } from 'svelte';
+	import { parseAndFormatDate } from '$lib/utils/date';

 	let isLoading = $state(true);
 	let error = $state<string | null>(null);
@@ -17,6 +18,9 @@

 	let sortColumn = $state<keyof RowData | null>(null);
 	let sortDirection = $state<'asc' | 'desc'>('asc');
+	let lastCheckedId: string | null = $state(null);
+
+	const ROW_LIMIT = 200;

 	// Fetch and process data from the Google Sheet
 	async function fetchAndProcessData() {
@@ -48,10 +52,12 @@
 			const processedData = dataRows
 				.map((row, index): RowData | null => {
 					const name = mapping.name !== -1 ? row[mapping.name] || '' : '';
-					const surname = mapping.surname !== -1 ? row[mapping.surname] || '' : '';
 					const pictureUrl = mapping.pictureUrl !== -1 ? row[mapping.pictureUrl] || '' : '';

-					if (!name && !surname && !pictureUrl) {
+					const birthdayRaw = mapping.birthday !== -1 ? row[mapping.birthday] : '';
+					const birthday = parseAndFormatDate(birthdayRaw);
+
+					if (!name && !pictureUrl) {
 						return null; // Skip entirely empty rows
 					}

@@ -60,19 +66,18 @@
 							? (row[mapping.alreadyPrinted] || '').toLowerCase() === 'true'
 							: false;

-					const isValid = !!(name && surname && pictureUrl);
+					const isValid = !!(name && pictureUrl);

 					return {
 						id: uuid(),
 						name,
-						surname,
 						nationality: mapping.nationality !== -1 ? row[mapping.nationality] || '' : '',
-						birthday: mapping.birthday !== -1 ? row[mapping.birthday] || '' : '',
+						birthday,
 						pictureUrl,
 						alreadyPrinted,
-						_rowIndex: index + 2, // Sheet rows are 1-based, plus header
+						_rowIndex: index + 1,
 						_valid: isValid,
-						_checked: isValid && !alreadyPrinted
+						_checked: false
 					};
 				})
 				.filter((row): row is RowData => row !== null);
@@ -85,30 +90,69 @@
 		} finally {
 			isLoading = false;
 		}
-	}	// Run on component mount
+	}
+
+	function handleRowClick(event: MouseEvent, clickedId: string) {
+		const clickedRow = rows.find((r) => r.id === clickedId);
+		if (!clickedRow || !clickedRow._valid) return;
+
+		// Handle shift-clicking for range selection
+		if (event.shiftKey && lastCheckedId) {
+			const lastIndex = displayData.findIndex((r) => r.id === lastCheckedId);
+			const currentIndex = displayData.findIndex((r) => r.id === clickedId);
+
+			if (lastIndex !== -1 && currentIndex !== -1) {
+				const start = Math.min(lastIndex, currentIndex);
+				const end = Math.max(lastIndex, currentIndex);
+				const isChecked = !clickedRow._checked; // The state to apply to the range
+
+				for (let i = start; i <= end; i++) {
+					const rowToSelect = displayData[i];
+					if (rowToSelect && rowToSelect._valid) {
+						// Prevent checking more than the limit
+						if (isChecked && selectedCount >= ROW_LIMIT && !rowToSelect._checked) {
+							continue;
+						}
+						rowToSelect._checked = isChecked;
+					}
+				}
+			}
+		} else {
+			// Normal click, just toggle the state
+			if (!clickedRow._checked && selectedCount >= ROW_LIMIT) {
+				// Do not allow checking more than the limit
+			} else {
+				clickedRow._checked = !clickedRow._checked;
+			}
+		}
+
+		// Update the last checked ID for the next shift-click
+		lastCheckedId = clickedId;
+	}
+
+	// Run on component mount
 	onMount(() => {
+		ensureToken();
 		fetchAndProcessData();
 	});

-	// Function to toggle a single row's checked state
-	function toggleRow(id: string) {
-		const row = rows.find((r) => r.id === id);
-		if (row && row._valid) {
-			row._checked = !row._checked;
-		}
-		console.log("toggleRow", id, row?._checked);
-	}
-
-	// Function to toggle all valid rows
+	// Function to toggle select-all: selects first 200 eligible items in current view
 	function toggleSelectAll(event: Event) {
 		const target = event.target as HTMLInputElement;
 		const shouldCheck = target.checked;

-		rows.forEach((row) => {
-			if (row._valid && !row.alreadyPrinted) {
-				row._checked = shouldCheck;
-			}
-		});
+		// Determine eligible rows in the current display order
+		const eligible = displayData.filter((r) => r._valid && !r.alreadyPrinted);
+		const firstBatch = eligible.slice(0, ROW_LIMIT);
+
+		if (shouldCheck) {
+			// Check only the first batch, uncheck the rest
+			rows.forEach((row) => (row._checked = false));
+			firstBatch.forEach((row) => (row._checked = true));
+		} else {
+			// Uncheck all
+			rows.forEach((row) => (row._checked = false));
+		}
 	}

 	// Function to handle sorting
@@ -142,11 +186,12 @@
 		});
 	});

-	// Derived state to determine if the "Select All" checkbox should be checked
+	// Derived state: master checkbox reflects if first 200 eligible items in current view are selected
 	const allValidRowsSelected = $derived.by(() => {
-		const validRows = rows.filter((row) => row._valid && !row.alreadyPrinted);
-		if (validRows.length === 0) return false;
-		return validRows.every((row) => row._checked);
+		const eligible = displayData.filter((r) => r._valid && !r.alreadyPrinted);
+		const firstBatch = eligible.slice(0, ROW_LIMIT);
+		if (firstBatch.length === 0) return false;
+		return firstBatch.every((row) => row._checked);
 	});

 	const selectedCount = $derived(rows.filter((row) => row._checked).length);
@@ -161,54 +206,62 @@
 		<div>
 			<h2 class="mb-2 text-xl font-semibold text-gray-900">Filter and Select Rows</h2>
 			<p class="text-sm text-gray-700">
-				Review your data and select which rows to include. Invalid or already printed rows are
-				disabled.
+				Review your data and select which rows to include. Select a batch of max 200 items by using
+				the top checkbox.
+			</p>
+			<p class="mt-1 text-sm text-gray-700">
+				Tip: Hold <kbd
+					class="rounded-md border border-gray-400 bg-gray-200 px-1.5 py-0.5 text-xs font-semibold"
+					>Shift</kbd
+				> and click two checkboxes to select a range of rows.
+			</p>
+			<p class="mt-1 text-sm text-gray-700">
+				Already printed or invalid data is marked in the status column.
 			</p>
-			{#if $selectedSheet?.id}
-				<p class="mt-1 text-sm text-gray-500">
-					Need to make changes?
-					<a
-						href={`https://docs.google.com/spreadsheets/d/${$selectedSheet.id}/edit`}
-						target="_blank"
-						rel="noopener noreferrer"
-						class="text-blue-600 underline hover:text-blue-800"
-					>
-						Open Google Sheet
-					</a>
-				</p>
-			{/if}
 		</div>
-		<button
-			onclick={fetchAndProcessData}
-			class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-wait disabled:opacity-50"
-			disabled={isLoading}
-		>
-			{#if isLoading}
-				<svg
-					class="-ml-1 mr-2 h-5 w-5 animate-spin text-gray-500"
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
+		<div class="flex flex-col space-y-2">
+			{#if $selectedSheet?.id}
+				<a
+					href={`https://docs.google.com/spreadsheets/d/${$selectedSheet.id}/edit`}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
 				>
-					<circle
-						class="opacity-25"
-						cx="12"
-						cy="12"
-						r="10"
-						stroke="currentColor"
-						stroke-width="4"
-					></circle>
-					<path
-						class="opacity-75"
-						fill="currentColor"
-						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-					></path>
-				</svg>
-				Refreshing...
-			{:else}
-				Refresh Data
+					Open Sheet
+				</a>
 			{/if}
-		</button>
+			<button
+				onclick={fetchAndProcessData}
+				class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-wait disabled:opacity-50"
+				disabled={isLoading}
+			>
+				{#if isLoading}
+					<svg
+						class="-ml-1 mr-2 h-5 w-5 animate-spin text-gray-500"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<circle
+							class="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							stroke-width="4"
+						></circle>
+						<path
+							class="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+						></path>
+					</svg>
+					Refreshing...
+				{:else}
+					Refresh Data
+				{/if}
+			</button>
+		</div>
 	</div>

 	{#if isLoading}
@@ -265,11 +318,7 @@
 							>
 							<th
 								class="cursor-pointer px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600 hover:bg-gray-100"
-								onclick={() => sortBy('name')}>Name</th
-							>
-							<th
-								class="cursor-pointer px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600 hover:bg-gray-100"
-								onclick={() => sortBy('surname')}>Surname</th
+								onclick={() => sortBy('name')}>Full Name</th
 							>
 							<th
 								class="cursor-pointer px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-600 hover:bg-gray-100"
@@ -306,13 +355,12 @@
 										type="checkbox"
 										class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-200"
 										checked={row._checked}
-										disabled={!row._valid}
-										onchange={() => toggleRow(row.id)}
+										disabled={!row._valid || (selectedCount >= ROW_LIMIT && !row._checked)}
+										onclick={(e) => handleRowClick(e, row.id)}
 									/>
 								</td>
 								<td class="whitespace-nowrap px-4 py-3 text-sm">{row._rowIndex}</td>
 								<td class="whitespace-nowrap px-4 py-3 text-sm">{row.name}</td>
-								<td class="whitespace-nowrap px-4 py-3 text-sm">{row.surname}</td>
 								<td class="whitespace-nowrap px-4 py-3 text-sm">{row.nationality}</td>
 								<td class="whitespace-nowrap px-4 py-3 text-sm">{row.birthday}</td>
 								<td class="whitespace-nowrap px-4 py-3 text-sm">
@@ -364,7 +412,7 @@
 			currentStep={currentStep}
 			onForward={handleContinue}
 			textBack="Back to Column Mapping"
-			textForwardEnabled="Continue ({selectedCount} selected)"
+			textForwardEnabled="Continue to Card Details"
 			textForwardDisabled="Select at least one valid row"
 		/>
 	</div>
--- a/src/lib/components/wizard/StepSheetSearch.svelte
+++ b/src/lib/components/wizard/StepSheetSearch.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { selectedSheet, currentStep } from '$lib/stores';
 	import type { SheetInfoType } from '$lib/stores';
-	import { searchSheets } from '$lib/google';
+	import { searchSheets, ensureToken, userEmail } from '$lib/google';
+	import { hashString } from '$lib/utils';
 	import { onMount } from 'svelte';
 	import Navigator from './subcomponents/Navigator.svelte';

@@ -12,9 +13,16 @@
 	let hasSearched = $state(false);
 	let recentSheets = $state<any[]>([]);

-	const RECENT_SHEETS_KEY = 'recent-sheets';
+	async function getRecentSheetsKey() {
+		const email = $userEmail;
+		if (email) {
+			return `recentSheets_${await hashString(email)}`;
+		}
+		return 'recentSheets_anonymous';
+	}

 	onMount(() => {
+		ensureToken();
 		loadRecentSheets();
 	});

@@ -36,16 +44,18 @@
 		}
 	}

-	function loadRecentSheets() {
+	async function loadRecentSheets() {
 		try {
-			const saved = localStorage.getItem(RECENT_SHEETS_KEY);
+			const key = await getRecentSheetsKey();
+			const saved = localStorage.getItem(key);
 			if (saved) {
 				recentSheets = JSON.parse(saved);
 			}
 		} catch (err) {
 			console.error('Error loading recent sheets:', err);
 			// If there's an error, clear the stored value
-			localStorage.removeItem(RECENT_SHEETS_KEY);
+			const key = await getRecentSheetsKey();
+			localStorage.removeItem(key);
 			recentSheets = [];
 		}
 	}
@@ -256,6 +266,6 @@
 		{currentStep}
 		textBack="Back to Auth"
 		textForwardDisabled="Select a sheet"
-		textForwardEnabled="Continue"
+		textForwardEnabled="Continue to Column Mapping"
 	/>
 </div>
--- a/src/lib/components/wizard/subcomponents/Navigator.svelte
+++ b/src/lib/components/wizard/subcomponents/Navigator.svelte
@@ -1,56 +1,61 @@
 <script lang="ts">
 	let {
-		canProceed,
+		canProceed = true,
 		currentStep,
-		textBack,
-		textForwardDisabled,
-		textForwardEnabled,
+		textBack = 'Back',
+		textForwardDisabled = 'Next',
+		textForwardEnabled = 'Next',
 		onBack,
-		onForward
+		onForward,
+		nextDisabled = false
 	} = $props<{
-		canProceed: boolean;
-		currentStep: any;
-		textBack: string;
-		textForwardDisabled: string;
-		textForwardEnabled: string;
-		onBack?: () => void | null;
-		onForward?: () => void | null;
+		canProceed?: boolean;
+		currentStep?: any;
+		textBack?: string;
+		textForwardDisabled?: string;
+		textForwardEnabled?: string;
+		onBack?: () => void;
+		onForward?: () => void;
+		nextDisabled?: boolean;
 	}>();

 	async function handleBack() {
 		if (onBack) {
-			// Allow custom back logic if provided
 			await onBack();
+		} else if (currentStep) {
+			currentStep.set($currentStep - 1);
 		}
-		currentStep.set($currentStep - 1);
 	}

 	async function handleForward() {
 		if (onForward) {
-			// Allow custom forward logic if provided
 			await onForward();
 		}
-		currentStep.set($currentStep + 1);
+		if (currentStep) {
+			currentStep.set($currentStep + 1);
+		}
 	}
 </script>

 <div class="flex flex-col gap-3 sm:flex-row sm:justify-between">
-	<button
-		onclick={handleBack}
-		class="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2 font-medium text-gray-700 hover:bg-gray-300 sm:w-auto"
-	>
-		<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-		</svg>
-		<span>{textBack}</span>
-	</button>
+	{#if onBack || currentStep}
+		<button
+			onclick={handleBack}
+			class="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-2 font-medium text-gray-700 hover:bg-gray-300 sm:w-auto"
+		>
+			<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+			</svg>
+			<span>{textBack}</span>
+		</button>
+	{/if}

 	<button
 		onclick={handleForward}
-		disabled={!canProceed}
+		disabled={!canProceed || nextDisabled}
 		class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-gray-400 sm:w-auto"
 	>
-		<span>{canProceed ? textForwardEnabled : textForwardDisabled}</span>
+		<span>{canProceed && !nextDisabled ? textForwardEnabled : textForwardDisabled}</span>
 		<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
 		</svg>
--- a/src/lib/components/wizard/subcomponents/PhotoCard.svelte
+++ b/src/lib/components/wizard/subcomponents/PhotoCard.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+	import type { PhotoDimensions } from '$lib/cards/types';
 	import PhotoCrop from './PhotoCrop.svelte';

-	let { photo, onCropUpdated, onRetry } = $props<{
+	let { photo, onCropUpdated, onRetry, photoDimensions } = $props<{
 		photo: {
 			name: string;
 			url: string;
@@ -13,6 +14,7 @@
 		};
 		onCropUpdated: (detail: any) => void;
 		onRetry: () => void;
+		photoDimensions: PhotoDimensions;
 	}>();

 	let showCropper = $state(false);
@@ -108,8 +110,8 @@
 			{/if}
 		</div>

-		<div class="p-3 flex items-center justify-between">
-			<div>
+		<div class="esnSection p-3 flex items-center justify-between gap-2">
+			<div class="min-w-0 flex-1">
 				<h4 class="font-medium text-sm text-gray-900 truncate">{photo.name}</h4>
 				{#if photo.faceDetectionStatus === 'completed'}
 					<span class="text-xs text-green-600">Face detected</span>
@@ -125,7 +127,7 @@
 			</div>
 			<button
 				onclick={() => (showCropper = true)}
-				class="p-1 text-gray-500 hover:text-blue-600"
+				class="p-1 text-gray-500 hover:text-blue-600 shrink-0"
 				title="Edit Crop"
 				aria-label="Edit Crop"
 			>
@@ -145,6 +147,7 @@
 				imageUrl={photo.objectUrl}
 				personName={photo.name}
 				initialCropData={photo.cropData}
+				{photoDimensions}
 				onClose={() => (showCropper = false)}
 				onCropUpdated={handleCropUpdated}
 			/>
--- a/src/lib/components/wizard/subcomponents/PhotoCrop.svelte
+++ b/src/lib/components/wizard/subcomponents/PhotoCrop.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { env } from '$env/dynamic/public';
+	import type { PhotoDimensions } from '$lib/cards/types';

-	let { imageUrl, personName, initialCropData, onCropUpdated, onClose } = $props<{
+	let {
+		imageUrl,
+		personName,
+		initialCropData,
+		onCropUpdated,
+		onClose,
+		photoDimensions
+	} = $props<{
 		imageUrl: string;
 		personName: string;
 		initialCropData?: { x: number; y: number; width: number; height: number };
@@ -10,6 +17,7 @@
 			cropData: { x: number; y: number; width: number; height: number };
 		}) => void;
 		onClose: () => void;
+		photoDimensions: PhotoDimensions;
 	}>();

 	let canvas: HTMLCanvasElement;
@@ -27,16 +35,14 @@

 	// Interaction state
 	let isDragging = false;
-	let isResizing = false;
 	let dragStart = { x: 0, y: 0 };
-	let resizeHandle = '';

 	// Canvas dimensions
 	let canvasWidth = 600;
 	let canvasHeight = 400;

-	// Get crop ratio from environment
-	const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
+	// Use the photo card aspect ratio from the selected card's dimensions
+	const cropRatio = photoDimensions.width / photoDimensions.height;

 	onMount(() => {
 		ctx = canvas.getContext('2d')!;
@@ -127,25 +133,6 @@
 		ctx.strokeStyle = '#3b82f6';
 		ctx.lineWidth = 2;
 		ctx.strokeRect(crop.x, crop.y, crop.width, crop.height);
-
-		// Draw resize handles
-		const handleSize = 12; // Increased from 8 for easier grabbing
-		ctx.fillStyle = '#3b82f6';
-		ctx.strokeStyle = '#ffffff';
-		ctx.lineWidth = 1;
-
-		// Corner handles with white borders for better visibility
-		const handles = [
-			{ x: crop.x - handleSize/2, y: crop.y - handleSize/2, cursor: 'nw-resize' },
-			{ x: crop.x + crop.width - handleSize/2, y: crop.y - handleSize/2, cursor: 'ne-resize' },
-			{ x: crop.x - handleSize/2, y: crop.y + crop.height - handleSize/2, cursor: 'sw-resize' },
-			{ x: crop.x + crop.width - handleSize/2, y: crop.y + crop.height - handleSize/2, cursor: 'se-resize' },
-		];
-
-		handles.forEach(handle => {
-			ctx.fillRect(handle.x, handle.y, handleSize, handleSize);
-			ctx.strokeRect(handle.x, handle.y, handleSize, handleSize);
-		});
 	}

 	function getMousePos(e: MouseEvent) {
@@ -157,31 +144,12 @@
 	}

 	function isInCropArea(x: number, y: number) {
-		return x >= crop.x && x <= crop.x + crop.width && 
-			   y >= crop.y && y <= crop.y + crop.height;
-	}
-
-	function getResizeHandle(x: number, y: number) {
-		const handleSize = 12; // Match the drawing size
-		const tolerance = handleSize;
-		
-		if (Math.abs(x - crop.x) <= tolerance && Math.abs(y - crop.y) <= tolerance) return 'nw';
-		if (Math.abs(x - (crop.x + crop.width)) <= tolerance && Math.abs(y - crop.y) <= tolerance) return 'ne';
-		if (Math.abs(x - crop.x) <= tolerance && Math.abs(y - (crop.y + crop.height)) <= tolerance) return 'sw';
-		if (Math.abs(x - (crop.x + crop.width)) <= tolerance && Math.abs(y - (crop.y + crop.height)) <= tolerance) return 'se';
-		
-		return '';
+		return x >= crop.x && x <= crop.x + crop.width && y >= crop.y && y <= crop.y + crop.height;
 	}

 	function handleMouseDown(e: MouseEvent) {
 		const pos = getMousePos(e);
-		const handle = getResizeHandle(pos.x, pos.y);
-		
-		if (handle) {
-			isResizing = true;
-			resizeHandle = handle;
-			dragStart = pos;
-		} else if (isInCropArea(pos.x, pos.y)) {
+		if (isInCropArea(pos.x, pos.y)) {
 			isDragging = true;
 			dragStart = { x: pos.x - crop.x, y: pos.y - crop.y };
 		}
@@ -189,87 +157,14 @@

 	function handleMouseMove(e: MouseEvent) {
 		const pos = getMousePos(e);
-		
-		if (isResizing) {
-			const dx = pos.x - dragStart.x;
-			const dy = pos.y - dragStart.y;
-			
-			const newCrop = { ...crop };
-			
-			// Use primary axis movement for more predictable resizing
-			switch (resizeHandle) {
-				case 'nw':
-					// Use the dominant movement direction
-					const primaryDelta = Math.abs(dx) > Math.abs(dy) ? dx : dy * cropRatio;
-					const newWidth = Math.max(20, crop.width - primaryDelta);
-					const newHeight = newWidth / cropRatio;
-					
-					newCrop.x = Math.max(0, crop.x + crop.width - newWidth);
-					newCrop.y = Math.max(0, crop.y + crop.height - newHeight);
-					newCrop.width = newWidth;
-					newCrop.height = newHeight;
-					break;
-					
-				case 'ne':
-					// For NE, primarily follow horizontal movement
-					const newWidthNE = Math.max(20, crop.width + dx);
-					const newHeightNE = newWidthNE / cropRatio;
-					
-					newCrop.width = newWidthNE;
-					newCrop.height = newHeightNE;
-					newCrop.y = Math.max(0, crop.y + crop.height - newHeightNE);
-					break;
-					
-				case 'sw':
-					// For SW, primarily follow horizontal movement  
-					const newWidthSW = Math.max(20, crop.width - dx);
-					const newHeightSW = newWidthSW / cropRatio;
-					
-					newCrop.x = Math.max(0, crop.x + crop.width - newWidthSW);
-					newCrop.width = newWidthSW;
-					newCrop.height = newHeightSW;
-					break;
-					
-				case 'se':
-					// For SE, primarily follow horizontal movement
-					const newWidthSE = Math.max(20, crop.width + dx);
-					const newHeightSE = newWidthSE / cropRatio;
-					
-					newCrop.width = newWidthSE;
-					newCrop.height = newHeightSE;
-					break;
-			}
-			
-			// Ensure crop stays within canvas bounds
-			if (newCrop.x + newCrop.width > canvasWidth) {
-				newCrop.width = canvasWidth - newCrop.x;
-				newCrop.height = newCrop.width / cropRatio;
-			}
-			if (newCrop.y + newCrop.height > canvasHeight) {
-				newCrop.height = canvasHeight - newCrop.y;
-				newCrop.width = newCrop.height * cropRatio;
-			}
-			
-			// Adjust position if crop extends beyond bounds after resizing
-			if (newCrop.x + newCrop.width > canvasWidth) {
-				newCrop.x = canvasWidth - newCrop.width;
-			}
-			if (newCrop.y + newCrop.height > canvasHeight) {
-				newCrop.y = canvasHeight - newCrop.height;
-			}
-			
-			crop = newCrop;
-			drawCanvas();
-		} else if (isDragging) {
+
+		if (isDragging) {
 			crop.x = Math.max(0, Math.min(canvasWidth - crop.width, pos.x - dragStart.x));
 			crop.y = Math.max(0, Math.min(canvasHeight - crop.height, pos.y - dragStart.y));
 			drawCanvas();
 		} else {
 			// Update cursor based on hover state
-			const handle = getResizeHandle(pos.x, pos.y);
-			if (handle) {
-				canvas.style.cursor = handle + '-resize';
-			} else if (isInCropArea(pos.x, pos.y)) {
+			if (isInCropArea(pos.x, pos.y)) {
 				canvas.style.cursor = 'move';
 			} else {
 				canvas.style.cursor = 'default';
@@ -279,11 +174,39 @@

 	function handleMouseUp() {
 		isDragging = false;
-		isResizing = false;
-		resizeHandle = '';
 		canvas.style.cursor = 'default';
 	}

+	function zoom(factor: number) {
+		const center = {
+			x: crop.x + crop.width / 2,
+			y: crop.y + crop.height / 2
+		};
+
+		let newWidth = crop.width * factor;
+		let newHeight = newWidth / cropRatio;
+
+		// Clamp to min/max size
+		newWidth = Math.max(20, Math.min(canvasWidth, newWidth));
+		newHeight = newWidth / cropRatio;
+
+		if (newHeight > canvasHeight) {
+			newHeight = canvasHeight;
+			newWidth = newHeight * cropRatio;
+		}
+
+		crop.width = newWidth;
+		crop.height = newHeight;
+		crop.x = center.x - newWidth / 2;
+		crop.y = center.y - newHeight / 2;
+
+		// Ensure it stays within bounds after zooming
+		crop.x = Math.max(0, Math.min(canvasWidth - crop.width, crop.x));
+		crop.y = Math.max(0, Math.min(canvasHeight - crop.height, crop.y));
+
+		drawCanvas();
+	}
+
 	function handleSave() {
 		// Scale crop rectangle back to original image dimensions
 		const scaleX = image.width / canvasWidth;
@@ -344,16 +267,52 @@
 				</button>
 			</div>

-			<div class="mb-4 p-2 rounded-md text-center">
+			<div class="relative mb-4 p-2 rounded-md text-center">
 				<canvas
 					bind:this={canvas}
 					onmousedown={handleMouseDown}
 					onmousemove={handleMouseMove}
 					onmouseup={handleMouseUp}
 					onmouseleave={handleMouseUp}
-					class="mx-auto cursor-move"
+					class="mx-auto"
 					style="max-width: 100%; height: auto;"
 				></canvas>
+				<div class="absolute bottom-4 right-4 flex space-x-2">
+					<button
+						onclick={() => zoom(1 / 1.1)}
+						class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-700 bg-opacity-50 text-white hover:bg-opacity-75"
+						aria-label="Zoom out"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="h-6 w-6"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+					<button
+						onclick={() => zoom(1.1)}
+						class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-700 bg-opacity-50 text-white hover:bg-opacity-75"
+						aria-label="Zoom in"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="h-6 w-6"
+						>
+							<path
+								d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
+							/>
+						</svg>
+					</button>
+				</div>
 			</div>

 			<div class="flex justify-end space-x-3">
--- a/src/lib/google.ts
+++ b/src/lib/google.ts
@@ -1,129 +1,205 @@
-import { writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
 import { env } from '$env/dynamic/public';

-export const isGoogleApiReady = writable(false);
+// Store state: undefined = not yet known, null = failed/logged out, string = token
+export const accessToken = writable<string | null | undefined>(undefined);
 export const isSignedIn = writable(false);
+export const isGoogleApiReady = writable(false); // To track GAPI client readiness
+export const userEmail = writable<string | null>(null);

 let tokenClient: google.accounts.oauth2.TokenClient;
+let gapiInited = false;
+let gsiInited = false;

-const TOKEN_KEY = 'google_oauth_token';
-export function initGoogleClient(callback: () => void) {
-  const script = document.createElement('script');
-  script.src = 'https://apis.google.com/js/api.js';
-  script.onload = () => {
-    gapi.load('client', async () => {
-      await gapi.client.init({
-        discoveryDocs: [
-          'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest',
-          'https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest',
-        ],
-      });
-      isGoogleApiReady.set(true);
-      // Restore token from storage if available
-      const saved = localStorage.getItem(TOKEN_KEY);
-      if (saved) {
-        try {
-          const data = JSON.parse(saved);
-          if (data.access_token && data.expires_at && data.expires_at > Date.now()) {
-            gapi.client.setToken({ access_token: data.access_token });
-            isSignedIn.set(true);
-          } else {
-            localStorage.removeItem(TOKEN_KEY);
-          }
-        } catch {
-          localStorage.removeItem(TOKEN_KEY);
-        }
-      }
-      callback();
-    });
-  };
-  document.body.appendChild(script);
-
-  const scriptGsi = document.createElement('script');
-  scriptGsi.src = 'https://accounts.google.com/gsi/client';
-  scriptGsi.onload = () => {
-    const clientId = env.PUBLIC_GOOGLE_CLIENT_ID;
-    if (!clientId) {
-      console.error('PUBLIC_GOOGLE_CLIENT_ID is not set in the environment.');
-      return;
-    }
-    tokenClient = google.accounts.oauth2.initTokenClient({
-      client_id: clientId,
-      scope: 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/spreadsheets.readonly',
-      callback: (tokenResponse) => {
-        if (tokenResponse?.access_token) {
-          // Set token in gapi client
-          gapi.client.setToken({ access_token: tokenResponse.access_token });
-          isSignedIn.set(true);
-          // Persist token with expiration
-          const expiresInSeconds = tokenResponse.expires_in
-            ? Number(tokenResponse.expires_in)
-            : 0;
-          const expiresInMs = expiresInSeconds * 1000;
-          const record = {
-            access_token: tokenResponse.access_token,
-            expires_at: expiresInMs ? Date.now() + expiresInMs : Date.now() + 3600 * 1000
-          };
-          localStorage.setItem(TOKEN_KEY, JSON.stringify(record));
-        }
-      },
-    });
-  };
-  document.body.appendChild(scriptGsi);
-}
-
-export function handleSignIn() {
-  if (gapi.client.getToken() === null) {
-    tokenClient.requestAccessToken({ prompt: 'consent' });
-  } else {
-    tokenClient.requestAccessToken({ prompt: '' });
-  }
-}
-
-export function handleSignOut() {
-	const savedToken = localStorage.getItem(TOKEN_KEY);
-	if (savedToken) {
-		try {
-			const tokenData = JSON.parse(savedToken);
-			if (tokenData.access_token) {
-				google.accounts.oauth2.revoke(tokenData.access_token, () => {
-					console.log('User token revoked.');
-				});
-			}
-		} catch (e) {
-			console.error('Error parsing token from localStorage', e);
-		}
+// This function ensures both GAPI (for Sheets/Drive APIs) and GSI (for auth) are loaded in the correct order.
+export function initGoogleClients(callback: () => void) {
+	// If everything is already initialized, just run the callback.
+	if (gapiInited && gsiInited) {
+		isGoogleApiReady.set(true); // Ensure it's set if called again
+		callback();
+		return;
 	}

-	// Disables automatic sign-in on the next page load.
-	google.accounts.id.disableAutoSelect();
+	// 1. Load GAPI script for Sheets/Drive APIs first.
+	if (!gapiInited) {
+		const gapiScript = document.createElement('script');
+		gapiScript.src = 'https://apis.google.com/js/api.js';
+		gapiScript.async = true;
+		gapiScript.defer = true;
+		document.head.appendChild(gapiScript);
+		gapiScript.onload = () => {
+			gapi.load('client', () => {
+				gapi.client
+					.init({
+						discoveryDocs: [
+							'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest',
+							'https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest'
+						]
+					})
+					.then(() => {
+						gapiInited = true;
+						// Now that GAPI is ready, initialize the GSI client.
+						initGsiClient(callback);
+					});
+			});
+		};
+	} else {
+		// GAPI is already ready, just ensure GSI is initialized.
+		initGsiClient(callback);
+	}
+}

-	// Clear gapi client token
-	gapi.client.setToken(null);
+/**
+ * Fetches user's email and stores it.
+ */
+async function fetchUserInfo(token: string) {
+	try {
+		const response = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+			headers: {
+				Authorization: `Bearer ${token}`
+			}
+		});
+		if (!response.ok) {
+			throw new Error('Failed to fetch user info');
+		}
+		const profile = await response.json();
+		userEmail.set(profile.email);
+	} catch (error) {
+		console.error('Error fetching user info:', error);
+		userEmail.set(null);
+	}
+}

-	// Clear token from localStorage
-	localStorage.removeItem(TOKEN_KEY);
+// 2. Load GSI script for Auth. This should only be called after GAPI is ready.
+function initGsiClient(callback: () => void) {
+	if (gsiInited) {
+		callback();
+		return;
+	}
+	const gsiScript = document.createElement('script');
+	gsiScript.src = 'https://accounts.google.com/gsi/client';
+	gsiScript.async = true;
+	gsiScript.defer = true;
+	document.head.appendChild(gsiScript);
+	gsiScript.onload = () => {
+		gsiInited = true;
+		tokenClient = google.accounts.oauth2.initTokenClient({
+			client_id: env.PUBLIC_GOOGLE_CLIENT_ID,
+			scope:
+				'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/spreadsheets.readonly https://www.googleapis.com/auth/userinfo.email',
+			callback: (tokenResponse) => {
+				// This callback handles responses from all token requests.
+				if (tokenResponse.error) {
+					console.error('Google token error:', tokenResponse.error);
+					accessToken.set(null);
+					isSignedIn.set(false);
+					if (gapiInited) gapi.client.setToken(null);
+				} else if (tokenResponse.access_token) {
+					const token = tokenResponse.access_token;
+					accessToken.set(token);
+					isSignedIn.set(true);
+					// Also set the token for the GAPI client
+					if (gapiInited) gapi.client.setToken({ access_token: token });
+					fetchUserInfo(token);
+				}
+			}
+		});
+		isGoogleApiReady.set(true);
+		callback();
+	};
+}

-	// Update signed in state
+/**
+ * Tries to get a token silently.
+ * This is for background tasks and on-load checks.
+ * It will not show a consent prompt to the user.
+ */
+export function ensureToken(): Promise<string> {
+	return new Promise((res, rej) => {
+		initGoogleClients(() => {
+			const currentToken = get(accessToken);
+			// If we already have a valid token, resolve immediately.
+			if (currentToken) {
+				res(currentToken);
+				return;
+			}
+
+			let unsubscribe: () => void;
+			unsubscribe = accessToken.subscribe((t) => {
+				// undefined means we are still waiting for the initial token request.
+				if (t) { // Got a token.
+					if (unsubscribe) unsubscribe();
+					res(t);
+				} else if (t === null) { // Got an explicit null, meaning auth failed.
+					if (unsubscribe) unsubscribe();
+					rej(new Error('Failed to retrieve access token. The user may need to sign in.'));
+				}
+			});
+
+			// If no token, request one silently.
+			// The result is handled by the callback in initGsiClient, which updates the store and resolves the promise.
+			if (get(accessToken) === undefined) {
+				tokenClient.requestAccessToken({ prompt: '' });
+			}
+		});
+	});
+}
+
+/**
+ * Prompts the user for consent to grant a token.
+ * This should be called when a user clicks a "Sign In" button.
+ */
+export function requestTokenFromUser() {
+	initGoogleClients(() => {
+		if (tokenClient) {
+			tokenClient.requestAccessToken({ prompt: 'consent' });
+		} else {
+			console.error("requestTokenFromUser called before Google client was initialized.");
+		}
+	});
+}
+
+/**
+ * Signs the user out, revokes the token, and clears all local state.
+ */
+export function handleSignOut() {
+	const token = get(accessToken);
+	if (token && gsiInited) {
+		google.accounts.oauth2.revoke(token, () => {
+			console.log('User token revoked.');
+		});
+	}
+
+	// Clear all tokens and states
+	if (gapiInited) {
+		gapi.client.setToken(null);
+	}
+	accessToken.set(null);
 	isSignedIn.set(false);
+	userEmail.set(null);

 	console.log('User signed out.');
 }

 export async function searchSheets(query: string) {
-  if (!gapi.client.drive) {
+  await ensureToken(); // Ensure we are authenticated before making a call
+  if (!gapi.client || !gapi.client.drive) {
    throw new Error('Google Drive API not loaded');
  }
  const response = await gapi.client.drive.files.list({
    q: `mimeType='application/vnd.google-apps.spreadsheet' and name contains '${query}'`,
    fields: 'files(id, name, iconLink, webViewLink)',
    pageSize: 20,
+    supportsAllDrives: true,
+    includeItemsFromAllDrives: true,
+    corpora: 'allDrives'
  });
  return response.result.files || [];
 }

 export async function getSheetNames(spreadsheetId: string) {
-  if (!gapi.client.sheets) {
+  await ensureToken();
+  if (!gapi.client || !gapi.client.sheets) {
    throw new Error('Google Sheets API not loaded');
  }
  const response = await gapi.client.sheets.spreadsheets.get({
@@ -139,7 +215,8 @@ export async function getSheetNames(spreadsheetId: string) {
 }

 export async function getSheetData(spreadsheetId: string, range: string) {
-    if (!gapi.client.sheets) {
+    await ensureToken();
+    if (!gapi.client || !gapi.client.sheets) {
        throw new Error('Google Sheets API not loaded');
    }
    const response = await gapi.client.sheets.spreadsheets.values.get({
@@ -178,13 +255,14 @@ export function isGoogleDriveUrl(url: string): boolean {

 // Download image from Google Drive using the API
 export async function downloadDriveImage(url: string): Promise<Blob> {
+  await ensureToken();
  const fileId = extractDriveFileId(url);
  
  if (!fileId) {
    throw new Error('Could not extract file ID from Google Drive URL');
  }
  
-  if (!gapi.client.drive) {
+  if (!gapi.client || !gapi.client.drive) {
    throw new Error('Google Drive API not loaded');
  }
  
--- a/src/lib/pdfLayout.ts
+++ b/src/lib/pdfLayout.ts
@@ -1,11 +1,3 @@
-// PDF Layout Configuration Module
-// Centralized configuration for PDF generation layouts, using millimeters.
-
-import {
-	PHOTO_DIMENSIONS,
-	TEXT_FIELD_LAYOUT,
-	PHOTO_FIELD_LAYOUT
-} from './pdfSettings';
 import { get } from 'idb-keyval';

 // Conversion factor from millimeters to points (1 inch = 72 points, 1 inch = 25.4 mm)
@@ -84,8 +76,8 @@ export function getAbsolutePhotoDimensionsPt(

 // Border configuration
 export const BORDER_CONFIG = {
-	color: { r: 0.8, g: 0.8, b: 0.8 },
-	width: 1 // in points
+	color: { r: 0, g: 0, b: 0 },
+	width: 0.5 // in points
 };

 // Text configuration
--- a/src/lib/pdfSettings.ts
+++ b/src/lib/pdfSettings.ts
@@ -6,91 +6,9 @@ export interface PageSettings {
 	margin: number; // mm
 }

-export interface CardDimensions {
-	width: number; // mm
-	height: number; // mm
-}
-
 // A4 Page dimensions in millimeters
 export const PAGE_SETTINGS: PageSettings = {
 	pageWidth: 210,
 	pageHeight: 297,
-	margin: 10
-};
-
-// Dimensions for a single card in the text PDF.
-// These dimensions will be used to calculate how many cards can fit on a page.
-export const TEXT_CARD_DIMENSIONS: CardDimensions = {
-	width: 63,
-	height: 40
-};
-
-// Dimensions for a single card in the photo PDF.
-export const PHOTO_CARD_DIMENSIONS: CardDimensions = {
-	width: 25,
-	height: 35
-};
-
-// Photo dimensions within the photo card
-export const PHOTO_DIMENSIONS = {
-	width: 20, // mm
-	height: 35 // mm
-};
-
-export interface TextPosition {
-	x: number; // mm, relative to cell top-left
-	y: number; // mm, relative to cell top-left
-	size: number; // font size in points
-}
-
-export interface PhotoPosition {
-	x: number; // mm, relative to cell top-left
-	y: number; // mm, relative to cell top-left
-	width: number; // mm
-	height: number; // mm
-}
-
-export interface TextFieldLayout {
-	name: TextPosition;
-	nationality: TextPosition;
-	birthday: TextPosition;
-}
-
-export interface PhotoFieldLayout {
-	photo: PhotoPosition;
-	name: TextPosition;
-}
-
-// Text PDF Field Positions (in mm, relative to cell top-left)
-export const TEXT_FIELD_LAYOUT: TextFieldLayout = {
-	name: {
-		x: 2,
-		y: 5,
-		size: 10 // font size in points
-	},
-	nationality: {
-		x: 2,
-		y: 10,
-		size: 10
-	},
-	birthday: {
-		x: 2,
-		y: 15,
-		size: 10
-	}
-};
-
-// Photo PDF Field Positions (in mm, relative to cell top-left)
-export const PHOTO_FIELD_LAYOUT: PhotoFieldLayout = {
-	photo: {
-		x: 2, // 2mm from left of cell
-		y: 2, // 2mm from top of cell
-		width: PHOTO_DIMENSIONS.width,
-		height: PHOTO_DIMENSIONS.height
-	},
-	name: {
-		x: 2, // 2mm from left of cell
-		y: PHOTO_DIMENSIONS.height + 0, // Below the photo + 5mm gap
-		size: 5 // font size in points
-	}
+	margin: 15
 };
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -12,72 +12,69 @@ export const session = writable<{

 // Data structure column mapping
 export interface ColumnMappingType {
-  name: number;
-  surname: number;
-  nationality: number;
-  birthday: number;
-  pictureUrl: number;
-  alreadyPrinted: number;
-  sheetName: string;
+	name: number;
+	nationality: number;
+	birthday: number;
+	pictureUrl: number;
+	alreadyPrinted: number;
+	sheetName: string;
 }

 // Data structure for a row in the sheet
 export interface RowData {
-  id: string; // Unique identifier
-  name: string;
-  surname: string;
-  nationality: string;
-  birthday: string;
-  pictureUrl: string;
-  alreadyPrinted: boolean;
-  _rowIndex: number;
-  _checked: boolean;
-  _valid: boolean;
+	id: string; // Unique identifier
+	name: string;
+	nationality: string;
+	birthday: string;
+	pictureUrl: string;
+	alreadyPrinted: boolean;
+	_rowIndex: number;
+	_checked: boolean;
+	_valid: boolean;
 }

 // Picture storage and metadata
 export interface PictureBlobInfoType {
-  id: string;
-  url: string;
-  downloaded: boolean;
-  faceDetected: boolean;
-  faceCount: number;
+	id: string;
+	url: string;
+	downloaded: boolean;
+	faceDetected: boolean;
+	faceCount: number;
 }

 // CropType rectangles for each photo
 export interface CropType {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
 }

 // Google Sheets list for search
 export interface SheetInfoType {
-  id: string;
-  name: string;
-  webViewLink: string;
+	id: string;
+	name: string;
+	webViewLink: string;
 }

 // Card details type
 export interface CardDetailsType {
-  homeSection: string;
-  validityStart: string;
+	esnSection: string;
+	studiesAt: string;
+	validityStart: string;
 }



 // Column mapping configuration
-export const columnMapping = writable<ColumnMappingType>(
-  {
-    name: -1,
-    surname: -1,
-    nationality: -1,
-    birthday: -1,
-    pictureUrl: -1,
-    alreadyPrinted: -1,
-    sheetName: ''
-  });
+export const columnMapping = writable<ColumnMappingType>({
+	name: -1,
+	nationality: -1,
+	birthday: -1,
+	pictureUrl: -1,
+	alreadyPrinted: -1,
+	sheetName: ''
+});

 // Store to hold the processed sheet data
 export const sheetData = writable<RowData[]>([]);
@@ -94,37 +91,43 @@ export const selectedSheet = writable<SheetInfoType>({ id: '', name: '', webView
 // Card details for generation
 export const cardDetails = writable<CardDetailsType | null>(null);

+// Selected card type for generation
+import type { Card } from '$lib/cards/types';
+export const selectedCard = writable<Card | null>(null);
+
 // Wizard state management
 export const currentStep = writable<number>(0);

 export const steps = [
-  'splash',
-  'auth',
-  'search',
-  'mapping',
-  'validation',
-  'gallery',
-  'generate'
+	'splash',
+	'auth',
+	'search',
+	'mapping',
+	'validation',
+	'card-details',
+	'card-select',
+	'gallery',
+	'generate'
 ] as const;

 export type WizardStep = typeof steps[number];

 export const currentStepName = derived(
-  currentStep,
-  ($currentStep) => steps[$currentStep]
+	currentStep,
+	($currentStep) => steps[$currentStep]
 );

 // Progress tracking
 export interface ProgressState {
-  stage: string;
-  current: number;
-  total: number;
-  message: string;
+	stage: string;
+	current: number;
+	total: number;
+	message: string;
 }

 export const progress = writable<ProgressState>({
-  stage: '',
-  current: 0,
-  total: 0,
-  message: ''
+	stage: '',
+	current: 0,
+	total: 0,
+	message: ''
 });
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,13 @@
+/**
+ * Hashes a string using the SHA-256 algorithm.
+ * @param input The string to hash.
+ * @returns A promise that resolves to the hex-encoded hash string.
+ */
+export async function hashString(input: string): Promise<string> {
+	const encoder = new TextEncoder();
+	const data = encoder.encode(input);
+	const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+	const hashArray = Array.from(new Uint8Array(hashBuffer));
+	const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+	return hashHex;
+}
--- a/src/lib/utils/date.ts
+++ b/src/lib/utils/date.ts
@@ -0,0 +1,68 @@
+/**
+ * Parses a date string from various common formats and returns it in YYYY-MM-DD format.
+ * Handles ISO (YYYY-MM-DD), European (DD.MM.YYYY), and US (MM/DD/YYYY) formats,
+ * as well as Excel-style serial numbers.
+ * @param value The date string to parse.
+ * @returns The formatted date string or the original value if parsing fails.
+ */
+export function parseAndFormatDate(value: string | number | undefined): string {
+	if (value === undefined || value === null || value === '') return '';
+
+	const trimmed = value.toString().trim();
+	if (!trimmed) return '';
+
+	let date: Date | null = null;
+
+	// 1. Try direct parsing (handles ISO 8601 like YYYY-MM-DD)
+	const directParse = new Date(trimmed);
+	if (!isNaN(directParse.getTime()) && trimmed.match(/^\d{4}/)) {
+		date = directParse;
+	}
+
+	// 2. Regex for MM/DD/YYYY or MM.DD.YYYY or MM-DD-YYYY (common in Google Forms)
+	if (!date) {
+		const mdyMatch = trimmed.match(/^(\d{1,2})[./-](\d{1,2})[./-](\d{2,4})$/);
+		if (mdyMatch) {
+			const [, m, d, y] = mdyMatch;
+			// Basic validation to avoid mixing up DMY and MDY for ambiguous dates like 01/02/2023
+			// If the first part is > 12, it's likely a day (DMY), so we'll let the next block handle it.
+			if (parseInt(m) <= 12) {
+				const year = y.length === 2 ? parseInt(`20${y}`) : parseInt(y);
+				date = new Date(year, parseInt(m) - 1, parseInt(d));
+			}
+		}
+	}
+
+	// 3. Regex for DD/MM/YYYY or DD.MM.YYYY or DD-MM-YYYY
+	if (!date) {
+		const dmyMatch = trimmed.match(/^(\d{1,2})[./-](\d{1,2})[./-](\d{2,4})$/);
+		if (dmyMatch) {
+			const [, d, m, y] = dmyMatch;
+			const year = y.length === 2 ? parseInt(`20${y}`) : parseInt(y);
+			// Month is 0-indexed in JS
+			date = new Date(year, parseInt(m) - 1, parseInt(d));
+		}
+	}
+
+	// 4. Handle Excel serial date number (days since 1900-01-01, with Excel's leap year bug)
+	if (!date && /^\d{5}$/.test(trimmed)) {
+		const serial = parseInt(trimmed, 10);
+		// Excel's epoch starts on day 1, which it considers 1900-01-01.
+		// JS Date epoch is 1970-01-01.
+		// Days between 1900-01-01 and 1970-01-01 is 25569.
+		// Excel incorrectly thinks 1900 was a leap year, so we subtract 1 for dates after Feb 1900.
+		const excelEpochDiff = serial > 60 ? 25567 : 25568;
+		const utcMilliseconds = (serial - excelEpochDiff) * 86400 * 1000;
+		date = new Date(utcMilliseconds);
+	}
+
+	// If we have a valid date, format it. Otherwise, return original.
+	if (date && !isNaN(date.getTime())) {
+		const year = date.getFullYear();
+		const month = (date.getMonth() + 1).toString().padStart(2, '0');
+		const day = date.getDate().toString().padStart(2, '0');
+		return `${year}-${month}-${day}`;
+	}
+
+	return trimmed; // Fallback
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
  import { onMount } from 'svelte';
-  import { initGoogleClient } from '$lib/google';
+  import { initGoogleClients } from '$lib/google';
 	import '../app.css';

 	let { children } = $props();

  onMount(() => {
-    initGoogleClient(() => {
-      // You can add any logic here to run after the client is initialized
+    initGoogleClients(() => {
      console.log('Google API client initialized');
    });
  });
--- a/src/routes/.layout.server.ts
+++ b/src/routes/.layout.server.ts
@@ -0,0 +1 @@
+export const ssr = false;
--- a/src/service-worker.ts
+++ b/src/service-worker.ts
@@ -16,7 +16,8 @@ self.addEventListener('install', (event) => {
 		await cache.addAll(ASSETS);
 	}

-	event.waitUntil(addFilesToCache());
+	// Precache and activate this SW immediately so new versions take control
+	event.waitUntil(Promise.all([addFilesToCache(), self.skipWaiting()]))
 });

 self.addEventListener('activate', (event) => {
@@ -27,7 +28,11 @@ self.addEventListener('activate', (event) => {
 		}
 	}

-	event.waitUntil(deleteOldCaches());
+	// Clean old caches and take control of existing clients immediately
+	event.waitUntil((async () => {
+		await deleteOldCaches();
+		await self.clients.claim();
+	})());
 });

 self.addEventListener('fetch', (event) => {
@@ -64,7 +69,9 @@ self.addEventListener('fetch', (event) => {
 				throw new Error('invalid response from fetch');
 			}

-			if (response.status === 200) {
+
+			// Only cache successful same-origin GET responses at runtime
+			if (response.status === 200 && url.origin === self.location.origin) {
 				cache.put(event.request, response.clone());
 			}

--- a/src/types/heic-convert-browser.d.ts
+++ b/src/types/heic-convert-browser.d.ts
@@ -0,0 +1,4 @@
+declare module 'heic-convert/browser' {
+  const convert: (options: { buffer: Uint8Array; format: 'JPEG' | 'PNG'; quality?: number }) => Promise<ArrayBuffer | Uint8Array>;
+  export default convert;
+}
--- a/static/cards/2026.webp
+++ b/static/cards/2026.webp
--- a/static/cards/esncard_anniversary.png
+++ b/static/cards/esncard_anniversary.png
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -3,10 +3,23 @@ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://svelte.dev/docs/kit/integrations
-	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-	kit: { adapter: adapter() }
+	kit: { adapter: adapter() },
+	csp: {
+		mode: 'hash',
+		directives: {
+			'default-src': ["'self'"],
+			'script-src': ["'self'"],
+			'style-src': ["'self'"],
+			'img-src': ["'self'", 'data:'],
+			'connect-src': ["'self'", 'https://www.googleapis.com'],
+			'font-src': ["'self'"],
+			'object-src': ["'none'"],
+			'frame-ancestors': ["'none'"],
+			'base-uri': ["'self'"],
+			'form-action': ["'self'"]
+		},
+	}
 };

 export default config;
Author	SHA1	Message	Date
Roman Krček	b90265110f	Update splash All checks were successful Build Docker image / build (push) Successful in 1m43s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 30s Details	2025-11-18 13:37:32 +01:00
Roman Krček	97460c018c	Fix date issues All checks were successful Build Docker image / build (push) Successful in 3m2s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 43s Details	2025-11-18 13:32:55 +01:00
Roman Krček	74910e3346	Resize photos and make thicker borders on text All checks were successful Build Docker image / build (push) Successful in 3m53s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 29s Details	2025-10-28 18:19:38 +01:00
Roman Krček	20b21de69e	Fix deprecated methods	2025-09-17 21:47:37 +02:00
Roman Krček	68e4d0b77b	Add loader for google services All checks were successful Build Docker image / build (push) Successful in 8m8s Details Build Docker image / deploy (push) Successful in 4s Details Build Docker image / verify (push) Successful in 30s Details	2025-09-08 16:04:50 +02:00
Roman Krček	e43101648b	Recent sheets per user	2025-09-08 15:45:36 +02:00
Roman Krček	c6c3bbc024	Fix manual resizing	2025-09-08 15:19:05 +02:00
Roman Krček	d845021f7e	Allow to search all drives	2025-09-07 22:37:10 +02:00
Roman Krček	dcba02260a	Add button to sheet and shift selector	2025-09-07 22:15:03 +02:00
Roman Krček	9de5646519	Change to just full name	2025-09-07 22:03:21 +02:00
Roman Krček	2b3371e67f	Remove 2026 made-up card to not confuse people All checks were successful Build Docker image / build (push) Successful in 4m37s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 53s Details	2025-08-12 08:51:30 +02:00
Roman Krček	a9dc5888e6	Added card types All checks were successful Build Docker image / build (push) Successful in 2m5s Details Build Docker image / deploy (push) Successful in 4s Details Build Docker image / verify (push) Successful in 46s Details	2025-08-11 18:30:07 +02:00
Roman Krček	1a2329b6c1	Fine-tuning the layout All checks were successful Build Docker image / build (push) Successful in 1m43s Details Build Docker image / deploy (push) Successful in 4s Details Build Docker image / verify (push) Successful in 1m32s Details	2025-08-11 17:28:32 +02:00
Roman Krček	82395afa6e	Better caching All checks were successful Build Docker image / build (push) Successful in 2m20s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 36s Details	2025-08-11 16:47:08 +02:00
Roman Krček	be7bdc551a	Performace optimization All checks were successful Build Docker image / build (push) Successful in 1m40s Details Build Docker image / deploy (push) Successful in 4s Details Build Docker image / verify (push) Successful in 35s Details	2025-08-11 16:42:55 +02:00
Roman Krček	44de5d9ad6	Proper sizing in the layout All checks were successful Build Docker image / build (push) Successful in 3m19s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 49s Details	2025-08-11 16:13:53 +02:00
Roman Krček	f5c2063586	Added row limiting All checks were successful Build Docker image / build (push) Successful in 3m22s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 48s Details	2025-08-08 09:25:25 +02:00
Roman Krček	667c18a746	Fixed mistaken git ref All checks were successful Build Docker image / build (push) Successful in 1m35s Details Build Docker image / deploy (push) Successful in 3s Details Build Docker image / verify (push) Successful in 34s Details	2025-08-07 16:48:12 +02:00
Roman Krček	7276e9ff89	Added build information All checks were successful Build Docker image / build (push) Successful in 1m37s Details Build Docker image / deploy (push) Successful in 4s Details Build Docker image / verify (push) Successful in 31s Details	2025-08-07 16:44:01 +02:00
Roman Krček	99ab5cfb4f	Reduce verbosity of sensitive data	2025-08-07 16:34:36 +02:00
Roman Krček	6f7843405c	Better navigation All checks were successful Build Docker image / build (push) Successful in 3m21s Details Build Docker image / deploy (push) Successful in 8s Details Build Docker image / verify (push) Successful in 1m35s Details	2025-08-07 16:30:46 +02:00
Roman Krček	c95f96594f	Security handening	2025-08-07 16:28:07 +02:00