diff --git a/.env.example b/.env.example
index 9716867..b2d1f72 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1,15 @@
 # Your Google Cloud OAuth 2.0 Client ID
 VITE_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
+VITE_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
+VITE_FACE_OFFSET_X=0.0
+VITE_FACE_OFFSET_Y=-0.1
+
+# Crop scale multiplier based on face width
+# 1.0 = crop width equals face width, 2.0 = crop is 2x face width
+VITE_CROP_SCALE=2.5
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index a69ccc3..0e8ba3a 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -2,7 +2,11 @@
 - You are a helpful AI assistant that helps developers write code.
 - This code is written in Svelte 5
 - It's important to only use modern Svelte 5 syntax, runes, and features.
+    - Do not use $:, do not use eventDispatching as they are both deprecated
+    - User $effect, $state, $derived
+    - Pass fucntions as props instead od dispatching events
 - 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.
-- Remain consistent in styling and code structure.
\ No newline at end of file
+- Remain consistent in styling and code structure.
+- Avoid unncessary iterations. If problems is mostly solved, stop.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 86a51c0..4ed9931 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "esn-card-generator",
 			"version": "0.0.1",
 			"dependencies": {
+				"@tensorflow-models/blazeface": "^0.1.0",
 				"@tensorflow/tfjs": "^4.22.0",
 				"@tensorflow/tfjs-backend-webgl": "^4.22.0",
 				"@types/gapi": "^0.0.47",
@@ -1349,6 +1350,16 @@
 				"vite": "^5.2.0 || ^6 || ^7"
 			}
 		},
+		"node_modules/@tensorflow-models/blazeface": {
+			"version": "0.1.0",
+			"resolved": "https://registry.npmjs.org/@tensorflow-models/blazeface/-/blazeface-0.1.0.tgz",
+			"integrity": "sha512-Qc5Wii8/OE5beC7XfehkhF9SEFLaPbVKnxxalV0T9JXsUynXqvLommc9Eko7b8zXKy4SJ1BtVlcX2cmCzQrn9A==",
+			"license": "Apache-2.0",
+			"peerDependencies": {
+				"@tensorflow/tfjs-converter": "^4.10.0",
+				"@tensorflow/tfjs-core": "^4.10.0"
+			}
+		},
 		"node_modules/@tensorflow/tfjs": {
 			"version": "4.22.0",
 			"resolved": "https://registry.npmjs.org/@tensorflow/tfjs/-/tfjs-4.22.0.tgz",
diff --git a/package.json b/package.json
index 829bc70..56af0b8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
 	"dependencies": {
 		"@tensorflow/tfjs": "^4.22.0",
 		"@tensorflow/tfjs-backend-webgl": "^4.22.0",
+		"@tensorflow-models/blazeface": "^0.1.0",
 		"@types/gapi": "^0.0.47",
 		"@types/gapi.client.drive": "^3.0.15",
 		"@types/gapi.client.sheets": "^4.0.20201031",
diff --git a/src/app.html b/src/app.html
index 1391f88..e810908 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<title>ESN Card Generator</title>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/src/lib/components/PhotoCard.svelte b/src/lib/components/PhotoCard.svelte
new file mode 100644
index 0000000..b380650
--- /dev/null
+++ b/src/lib/components/PhotoCard.svelte
@@ -0,0 +1,394 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
+  import PhotoCrop from './PhotoCrop.svelte';
+  import * as tf from '@tensorflow/tfjs';
+  import * as blazeface from '@tensorflow-models/blazeface';
+  
+  export let imageUrl: string;
+  export let personName: string;
+  export let isProcessing = false;
+  
+  const dispatch = createEventDispatcher<{
+    cropUpdated: { x: number; y: number; width: number; height: number };
+    faceDetectionStarted: void;
+    faceDetectionCompleted: { success: boolean; hasAutoDetectedCrop: boolean };
+  }>();
+  
+  let showCropEditor = false;
+  let autoDetectedCrop: { x: number; y: number; width: number; height: number } | null = null;
+  let currentCrop: { x: number; y: number; width: number; height: number } | null = null;
+  let isDetectingFace = false;
+  let faceDetectionError = false;
+  let detector: any = null;
+  let isModelLoading = false;
+  let isDownloadingModel = false;
+  
+  let photoElement: HTMLImageElement;
+  
+  onMount(async () => {
+    console.log('PhotoCard mounted, initializing face detection...');
+    await initializeFaceDetection();
+  });
+  
+  async function initializeFaceDetection() {
+    try {
+      isDownloadingModel = true;
+      console.log('Downloading BlazeFace model...');
+      
+      // Initialize TensorFlow.js with WebGL backend for better performance
+      await tf.setBackend('webgl');
+      await tf.ready();
+      console.log('TensorFlow.js WebGL backend initialized');
+      
+      isDownloadingModel = false;
+      isModelLoading = true;
+      console.log('Loading BlazeFace model...');
+      
+      // Load the BlazeFace model
+      detector = await blazeface.load();
+      
+      isModelLoading = false;
+      console.log('BlazeFace model loaded successfully with WebGL backend');
+    } catch (error) {
+      console.error('Failed to initialize BlazeFace with WebGL:', error);
+      console.log('Falling back to CPU backend...');
+      
+      try {
+        // Fallback to CPU if WebGL fails
+        await tf.setBackend('cpu');
+        await tf.ready();
+        console.log('TensorFlow.js CPU backend initialized as fallback');
+        
+        detector = await blazeface.load();
+        isModelLoading = false;
+        console.log('BlazeFace model loaded successfully with CPU backend');
+      } catch (fallbackError) {
+        console.error('Failed to initialize BlazeFace with CPU fallback:', fallbackError);
+        isDownloadingModel = false;
+        isModelLoading = false;
+        faceDetectionError = true;
+      }
+    }
+  }  // Simple face detection using BlazeFace
+  async function detectFaceWithMediaPipe() {
+    if (!photoElement || isDetectingFace || !detector) return;
+    
+    dispatch('faceDetectionStarted');
+    isDetectingFace = true;
+    faceDetectionError = false;
+    
+    try {
+      console.log('Detecting faces with BlazeFace...');
+      
+      // Detect faces in the image
+      const predictions = await detector.estimateFaces(photoElement, false);
+      
+      console.log(`BlazeFace found ${predictions.length} faces`);
+      
+      if (predictions.length > 0) {
+        // Find the face with the highest probability
+        let bestFace = predictions[0];
+        let highestProbability = predictions[0].probability ? predictions[0].probability[0] : 0;
+        
+        for (let i = 1; i < predictions.length; i++) {
+          const face = predictions[i];
+          const probability = face.probability ? face.probability[0] : 0;
+          if (probability > highestProbability) {
+            bestFace = face;
+            highestProbability = probability;
+          }
+        }
+        
+        console.log(`Selected face with probability: ${highestProbability}`);
+        
+        // Use the best detected face
+        const face = bestFace;
+        
+        // BlazeFace returns topLeft and bottomRight coordinates
+        // These coordinates are relative to the DISPLAYED image size, not natural size
+        let [x1, y1] = face.topLeft;
+        let [x2, y2] = face.bottomRight;
+        
+        console.log('BlazeFace detection (displayed coordinates):', { x1, y1, x2, y2 });
+        console.log('Image dimensions:', { 
+          natural: { width: photoElement.naturalWidth, height: photoElement.naturalHeight },
+          displayed: { width: photoElement.clientWidth, height: photoElement.clientHeight }
+        });
+        
+        // Calculate scale factors to convert from displayed to natural coordinates
+        const scaleX = photoElement.naturalWidth / photoElement.clientWidth;
+        const scaleY = photoElement.naturalHeight / photoElement.clientHeight;
+        
+        console.log('Scale factors:', { scaleX, scaleY });
+        
+        // Scale coordinates to natural image size
+        x1 = x1 * scaleX;
+        y1 = y1 * scaleY;
+        x2 = x2 * scaleX;
+        y2 = y2 * scaleY;
+        
+        let faceWidth = x2 - x1;
+        let faceHeight = y2 - y1;
+        
+        console.log('Scaled coordinates (natural size):', { x1, y1, x2, y2, faceWidth, faceHeight });
+        
+        // BlazeFace coordinates are relative to the input image size
+        // Verify coordinates are within bounds and reasonable
+        if (x1 < 0 || y1 < 0 || x2 > photoElement.naturalWidth || y2 > photoElement.naturalHeight) {
+          console.warn('BlazeFace coordinates out of bounds, clamping:', { x1, y1, x2, y2 });
+          // Clamp coordinates to image bounds
+          x1 = Math.max(0, x1);
+          y1 = Math.max(0, y1);
+          x2 = Math.min(photoElement.naturalWidth, x2);
+          y2 = Math.min(photoElement.naturalHeight, y2);
+          
+          // Recalculate dimensions
+          faceWidth = x2 - x1;
+          faceHeight = y2 - y1;
+          
+          console.log('Clamped coordinates:', { x1, y1, x2, y2, faceWidth, faceHeight });
+        }
+        
+        // Final validation - ensure we have a reasonable face size
+        if (faceWidth <= 0 || faceHeight <= 0) {
+          console.error('Invalid face dimensions after clamping');
+          throw new Error('Invalid face dimensions');
+        }
+        
+        // Recalculate face dimensions after any clamping
+        const finalFaceWidth = x2 - x1;
+        const finalFaceHeight = y2 - y1;
+        
+        // // Validate face size - reject if too small
+        // const faceArea = finalFaceWidth * finalFaceHeight;
+        // const imageArea = photoElement.naturalWidth * photoElement.naturalHeight;
+        // const faceRatio = faceArea / imageArea;
+        
+        // console.log('Face area ratio:', faceRatio);
+        
+        // // Only reject if smaller than 0.5% of image (very small noise)
+        // if (faceRatio < 0.005) {
+        //   console.log('Face rejected: too small');
+        //   throw new Error('Face too small');
+        // }
+        
+        // Create crop area with environment-based configuration
+        const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
+        const faceOffsetX = parseFloat(import.meta.env.VITE_FACE_OFFSET_X || '0.0');
+        const faceOffsetY = parseFloat(import.meta.env.VITE_FACE_OFFSET_Y || '-0.1');
+        const cropScale = parseFloat(import.meta.env.VITE_CROP_SCALE || '2.5');
+        
+        console.log('Crop configuration:', { cropRatio, faceOffsetX, faceOffsetY, cropScale });
+        
+        // Calculate face center
+        const faceCenterX = x1 + finalFaceWidth / 2;
+        const faceCenterY = y1 + finalFaceHeight / 2;
+        
+        // Calculate crop dimensions based on face width and scale
+        const cropWidth = finalFaceWidth * cropScale;
+        const cropHeight = cropWidth / cropRatio; // Maintain aspect ratio
+        
+        // Apply face offset to crop center (offset is percentage of crop dimensions)
+        const cropCenterX = faceCenterX + (cropWidth * faceOffsetX);
+        const cropCenterY = faceCenterY + (cropHeight * faceOffsetY);
+        
+        // Ensure crop fits within image bounds while maintaining aspect ratio
+        let finalCropWidth = cropWidth;
+        let finalCropHeight = cropHeight;
+        
+        // Check if crop exceeds image bounds and scale down proportionally if needed
+        const maxWidth = photoElement.naturalWidth;
+        const maxHeight = photoElement.naturalHeight;
+        
+        if (finalCropWidth > maxWidth || finalCropHeight > maxHeight) {
+          // Scale down to fit within bounds while maintaining ratio
+          const scaleToFitWidth = maxWidth / finalCropWidth;
+          const scaleToFitHeight = maxHeight / finalCropHeight;
+          const scaleToFit = Math.min(scaleToFitWidth, scaleToFitHeight);
+          
+          finalCropWidth = finalCropWidth * scaleToFit;
+          finalCropHeight = finalCropHeight * scaleToFit;
+          
+          console.log('Scaled crop to fit bounds:', { scaleToFit, finalCropWidth, finalCropHeight });
+        }
+        
+        // Calculate crop position (top-left corner) with properly sized crop
+        const cropCenterXAdjusted = faceCenterX + (finalCropWidth * faceOffsetX);
+        const cropCenterYAdjusted = faceCenterY + (finalCropHeight * faceOffsetY);
+        
+        const cropX = Math.max(0, Math.min(cropCenterXAdjusted - finalCropWidth / 2, photoElement.naturalWidth - finalCropWidth));
+        const cropY = Math.max(0, Math.min(cropCenterYAdjusted - finalCropHeight / 2, photoElement.naturalHeight - finalCropHeight));
+        
+        console.log('Crop calculation:', {
+          faceCenter: { x: faceCenterX, y: faceCenterY },
+          cropDimensions: { width: cropWidth, height: cropHeight },
+          cropCenter: { x: cropCenterX, y: cropCenterY },
+          finalCrop: { x: cropX, y: cropY, width: finalCropWidth, height: finalCropHeight },
+          aspectRatio: finalCropWidth / finalCropHeight
+        });
+        
+        autoDetectedCrop = {
+          x: Math.round(cropX),
+          y: Math.round(cropY),
+          width: Math.round(finalCropWidth),
+          height: Math.round(finalCropHeight)
+        };
+        
+        currentCrop = { ...autoDetectedCrop };
+        dispatch('cropUpdated', currentCrop);
+        dispatch('faceDetectionCompleted', { success: true, hasAutoDetectedCrop: true });
+        console.log('BlazeFace detection successful!', autoDetectedCrop);
+        return;
+      }
+      
+      // No faces detected
+      throw new Error('No faces detected by BlazeFace');
+      
+    } catch (error) {
+      console.error('BlazeFace detection failed:', error);
+      faceDetectionError = true;
+      dispatch('faceDetectionCompleted', { success: false, hasAutoDetectedCrop: false });
+      // Don't fall back to anything - just leave it as an error state
+    } finally {
+      isDetectingFace = false;
+    }
+  }
+  function openCropEditor() {
+    showCropEditor = true;
+  }
+  
+  function handleCropSave(e: CustomEvent<{ x: number; y: number; width: number; height: number }>) {
+    currentCrop = e.detail;
+    showCropEditor = false;
+    dispatch('cropUpdated', currentCrop);
+  }
+  
+  function handleCropCancel() {
+    showCropEditor = false;
+  }
+  
+  // Try face detection when image and detector are ready
+  $: if (imageUrl && photoElement && detector && !isDetectingFace && !autoDetectedCrop) {
+    detectFaceWithMediaPipe();
+  }
+</script>
+
+<div class="relative group">
+  <div class="relative overflow-hidden rounded-lg border-2 border-gray-200">
+    <img 
+      bind:this={photoElement}
+      src={imageUrl} 
+      alt={personName}
+      class="w-full h-full object-cover"
+      on:load={detectFaceWithMediaPipe}
+    />
+    
+    <!-- Small notification bars for all states -->
+    {#if isDownloadingModel}
+      <div class="absolute top-2 left-2 right-2 bg-blue-500/95 text-white px-3 py-2 rounded text-xs font-medium flex items-center space-x-2 shadow-lg">
+        <svg class="w-3 h-3 animate-spin" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
+          <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"/>
+        </svg>
+        <span>Downloading AI Model...</span>
+        <div class="flex-1 bg-white/20 rounded-full h-1 ml-2">
+          <div class="bg-white h-1 rounded-full animate-pulse" style="width: 30%"></div>
+        </div>
+      </div>
+    {:else if isModelLoading}
+      <div class="absolute top-2 left-2 right-2 bg-purple-500/95 text-white px-3 py-2 rounded text-xs font-medium flex items-center space-x-2 shadow-lg">
+        <svg class="w-3 h-3 animate-spin" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
+          <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"/>
+        </svg>
+        <span>Loading AI Model...</span>
+        <div class="flex-1 bg-white/20 rounded-full h-1 ml-2">
+          <div class="bg-white h-1 rounded-full animate-pulse" style="width: 60%"></div>
+        </div>
+      </div>
+    {:else if isDetectingFace}
+      <div class="absolute top-2 left-2 right-2 bg-green-500/95 text-white px-3 py-2 rounded text-xs font-medium flex items-center space-x-2 shadow-lg">
+        <svg class="w-3 h-3 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+        </svg>
+        <span>Detecting Face
+          <span class="inline-flex ml-1">
+            <span class="animate-pulse">.</span>
+            <span class="animate-pulse" style="animation-delay: 0.2s">.</span>
+            <span class="animate-pulse" style="animation-delay: 0.4s">.</span>
+          </span>
+        </span>
+        <div class="flex-1 bg-white/20 rounded-full h-1 ml-2">
+          <div class="bg-white h-1 rounded-full animate-pulse" style="width: 80%"></div>
+        </div>
+      </div>
+    {/if}
+    
+    {#if currentCrop}
+      <!-- Show crop preview overlay with proper masking -->
+      <div class="absolute inset-0 pointer-events-none">
+        <div class="relative w-full h-full">
+          <!-- Create mask using box-shadow to darken only non-crop areas -->
+          <div 
+            class="absolute border-2 border-blue-500 border-dashed"
+            style="left: {(currentCrop.x / photoElement?.naturalWidth) * 100}%; 
+                   top: {(currentCrop.y / photoElement?.naturalHeight) * 100}%; 
+                   width: {(currentCrop.width / photoElement?.naturalWidth) * 100}%; 
+                   height: {(currentCrop.height / photoElement?.naturalHeight) * 100}%;
+                   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);"
+          ></div>
+        </div>
+      </div>
+    {/if}
+    
+    <!-- Edit crop button -->
+    <button 
+      on:click={openCropEditor}
+      class="absolute top-2 right-2 bg-white bg-opacity-90 hover:bg-opacity-100 rounded-full p-2 shadow-lg transition-all duration-200 opacity-0 group-hover:opacity-100"
+      title="Edit crop area"
+    >
+      <svg class="w-4 h-4 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
+      </svg>
+    </button>
+    
+    <!-- Status indicators -->
+    <div class="absolute bottom-2 left-2 flex space-x-1">
+      {#if faceDetectionError}
+        <div class="bg-yellow-500 text-white px-2 py-1 rounded text-xs font-medium">
+          Manual crop
+        </div>
+      {:else if currentCrop && autoDetectedCrop && JSON.stringify(currentCrop) !== JSON.stringify(autoDetectedCrop)}
+        <div class="bg-blue-500 text-white px-2 py-1 rounded text-xs font-medium">
+          Custom crop
+        </div>
+      {:else if autoDetectedCrop}
+        <div class="bg-green-500 text-white px-2 py-1 rounded text-xs font-medium">
+          Auto-cropped
+        </div>
+      {/if}
+    </div>
+  </div>
+  
+  <div class="mt-2">
+    <p class="text-sm font-medium text-gray-900 truncate">{personName}</p>
+    {#if isProcessing}
+      <p class="text-xs text-gray-500">Processing...</p>
+    {:else if faceDetectionError}
+      <p class="text-xs text-yellow-600">Using center crop</p>
+    {:else if autoDetectedCrop}
+      <p class="text-xs text-green-600">Face detected</p>
+    {/if}
+  </div>
+</div>
+
+{#if showCropEditor}
+  <PhotoCrop 
+    {imageUrl}
+    {personName}
+    initialCrop={currentCrop}
+    on:save={handleCropSave}
+    on:cancel={handleCropCancel}
+  />
+{/if}
diff --git a/src/lib/components/PhotoCrop.svelte b/src/lib/components/PhotoCrop.svelte
new file mode 100644
index 0000000..a47c697
--- /dev/null
+++ b/src/lib/components/PhotoCrop.svelte
@@ -0,0 +1,360 @@
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+  
+  export let imageUrl: string;
+  export let personName: string;
+  export let initialCrop: { x: number; y: number; width: number; height: number } | null = null;
+  
+  const dispatch = createEventDispatcher<{
+    save: { x: number; y: number; width: number; height: number };
+    cancel: void;
+  }>();
+  
+  let canvas: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D;
+  let image: HTMLImageElement;
+  let isImageLoaded = false;
+  
+  // Crop rectangle state
+  let crop = {
+    x: 0,
+    y: 0,
+    width: 200,
+    height: 200
+  };
+  
+  // 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(import.meta.env.VITE_CROP_RATIO || '1.0');
+  
+  onMount(() => {
+    ctx = canvas.getContext('2d')!;
+    loadImage();
+  });
+  
+  async function loadImage() {
+    image = new Image();
+    image.onload = () => {
+      isImageLoaded = true;
+      
+      // Calculate canvas size to fit image while maintaining aspect ratio
+      const maxWidth = 600;
+      const maxHeight = 400;
+      const imageAspect = image.width / image.height;
+      
+      if (imageAspect > maxWidth / maxHeight) {
+        canvasWidth = maxWidth;
+        canvasHeight = maxWidth / imageAspect;
+      } else {
+        canvasHeight = maxHeight;
+        canvasWidth = maxHeight * imageAspect;
+      }
+      
+      canvas.width = canvasWidth;
+      canvas.height = canvasHeight;
+      
+      // Initialize crop rectangle
+      if (initialCrop) {
+        // Scale initial crop to canvas dimensions
+        const scaleX = canvasWidth / image.width;
+        const scaleY = canvasHeight / image.height;
+        crop = {
+          x: initialCrop.x * scaleX,
+          y: initialCrop.y * scaleY,
+          width: initialCrop.width * scaleX,
+          height: initialCrop.height * scaleY
+        };
+      } else {
+        // Default crop: centered with correct aspect ratio
+        const maxSize = Math.min(canvasWidth, canvasHeight) * 0.6;
+        const cropWidth = maxSize;
+        const cropHeight = cropWidth / cropRatio;
+        
+        // If height exceeds canvas, scale down proportionally
+        if (cropHeight > canvasHeight * 0.8) {
+          const scale = (canvasHeight * 0.8) / cropHeight;
+          crop = {
+            x: (canvasWidth - (cropWidth * scale)) / 2,
+            y: (canvasHeight - (cropHeight * scale)) / 2,
+            width: cropWidth * scale,
+            height: cropHeight * scale
+          };
+        } else {
+          crop = {
+            x: (canvasWidth - cropWidth) / 2,
+            y: (canvasHeight - cropHeight) / 2,
+            width: cropWidth,
+            height: cropHeight
+          };
+        }
+      }
+      
+      drawCanvas();
+    };
+    image.src = imageUrl;
+  }
+  
+  function drawCanvas() {
+    if (!ctx || !isImageLoaded) return;
+    
+    // Clear canvas
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+    
+    // Draw image
+    ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+    
+    // Draw overlay (darken non-crop area)
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    
+    // Clear crop area
+    ctx.globalCompositeOperation = 'destination-out';
+    ctx.fillRect(crop.x, crop.y, crop.width, crop.height);
+    ctx.globalCompositeOperation = 'source-over';
+    
+    // Draw crop rectangle border
+    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) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  }
+  
+  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 '';
+  }
+  
+  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)) {
+      isDragging = true;
+      dragStart = { x: pos.x - crop.x, y: pos.y - crop.y };
+    }
+  }
+  
+  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) {
+      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)) {
+        canvas.style.cursor = 'move';
+      } else {
+        canvas.style.cursor = 'default';
+      }
+    }
+  }
+  
+  function handleMouseUp() {
+    isDragging = false;
+    isResizing = false;
+    resizeHandle = '';
+    canvas.style.cursor = 'default';
+  }
+  
+  function handleSave() {
+    // Convert canvas coordinates back to image coordinates
+    const scaleX = image.width / canvasWidth;
+    const scaleY = image.height / canvasHeight;
+    
+    const imageCrop = {
+      x: Math.round(crop.x * scaleX),
+      y: Math.round(crop.y * scaleY),
+      width: Math.round(crop.width * scaleX),
+      height: Math.round(crop.height * scaleY)
+    };
+    
+    dispatch('save', imageCrop);
+  }
+  
+  function handleCancel() {
+    dispatch('cancel');
+  }
+</script>
+
+<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" on:click={handleCancel}>
+  <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4" on:click|stopPropagation>
+    <div class="p-6">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-lg font-semibold text-gray-900">
+          Crop Photo - {personName}
+        </h3>
+        
+        <button 
+          on:click={handleCancel}
+          class="text-gray-400 hover:text-gray-600"
+        >
+          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="flex flex-col items-center space-y-4">
+        <div class="border border-gray-300 rounded-lg overflow-hidden">
+          <canvas 
+            bind:this={canvas}
+            on:mousedown={handleMouseDown}
+            on:mousemove={handleMouseMove}
+            on:mouseup={handleMouseUp}
+            on:mouseleave={handleMouseUp}
+            class="block"
+          ></canvas>
+        </div>
+        
+        <p class="text-sm text-gray-600 text-center max-w-lg">
+          Drag the crop area to move it, or drag the corner handles to resize. 
+          The selected area will be used for the member card.
+          <br>
+          <span class="font-medium">Aspect Ratio: {cropRatio.toFixed(1)}:1 {cropRatio === 1.0 ? '(Square)' : cropRatio === 1.5 ? '(3:2)' : ''}</span>
+        </p>
+        
+        <div class="flex space-x-3">
+          <button 
+            on:click={handleCancel}
+            class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+          
+          <button 
+            on:click={handleSave}
+            class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700"
+          >
+            Save Crop
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/Wizard.svelte b/src/lib/components/Wizard.svelte
index d6bbc2f..13af3c4 100644
--- a/src/lib/components/Wizard.svelte
+++ b/src/lib/components/Wizard.svelte
@@ -4,20 +4,23 @@
   import StepSheetSearch from './wizard/StepSheetSearch.svelte';
   import StepColumnMap from './wizard/StepColumnMap.svelte';
   import StepRowFilter from './wizard/StepRowFilter.svelte';
+  import StepGallery from './wizard/StepGallery.svelte';
   // Additional steps to be added as they are implemented
 
   const steps = [
     StepAuth,
     StepSheetSearch,
     StepColumnMap,
-    StepRowFilter
+    StepRowFilter,
+    StepGallery
   ];
 
   const stepTitles = [
     'Authenticate',
     'Select Sheet',
     'Map Columns',
-    'Filter Rows'
+    'Filter Rows',
+    'Review Photos'
   ];
 
   function goToPreviousStep() {
diff --git a/src/lib/components/wizard/StepGallery.svelte b/src/lib/components/wizard/StepGallery.svelte
index 9696c76..ebb43bc 100644
--- a/src/lib/components/wizard/StepGallery.svelte
+++ b/src/lib/components/wizard/StepGallery.svelte
@@ -1,4 +1,402 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { columnMapping, filteredSheetData, currentStep } from '$lib/stores';
+  import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
+  import PhotoCard from '../PhotoCard.svelte';
+  
+  interface PhotoInfo {
+    name: string;
+    url: string;
+    status: 'loading' | 'success' | 'error';
+    objectUrl?: string;
+    retryCount: number;
+    cropData?: { x: number; y: number; width: number; height: number };
+    faceDetectionStatus?: 'pending' | 'processing' | 'completed' | 'failed';
+  }
+  
+  let photos: PhotoInfo[] = [];
+  let isProcessing = false;
+  let processedCount = 0;
+  let totalCount = 0;
+  let faceDetectionInProgress = false;
+  let faceDetectionCount = { started: 0, completed: 0 };
+  
+  // Process photos when component mounts
+  onMount(() => {
+    console.log('StepGallery mounted, processing photos...');
+    if ($filteredSheetData.length > 0 && $columnMapping.pictureUrl !== undefined) {
+      console.log('Processing photos for gallery step');
+      processPhotos();
+    } else {
+      console.log('No data to process:', {
+        dataLength: $filteredSheetData.length,
+        pictureUrlMapping: $columnMapping.pictureUrl
+      });
+    }
+  });
+  
+  async function processPhotos() {
+    if (isProcessing) return;
+    
+    console.log('Starting processPhotos...');
+    isProcessing = true;
+    processedCount = 0;
+    
+    // Get valid and included rows from filteredSheetData
+    const validRows = $filteredSheetData.filter(row => row._isValid);
+    console.log(`Found ${validRows.length} valid rows`);
+    
+    // Get unique photos to process
+    const photoUrls = new Set<string>();
+    const photoMap = new Map<string, any[]>(); // url -> row data
+    
+    validRows.forEach((row: any) => {
+      const photoUrl = row.pictureUrl;
+      
+      if (photoUrl && photoUrl.trim()) {
+        photoUrls.add(photoUrl.trim());
+        if (!photoMap.has(photoUrl.trim())) {
+          photoMap.set(photoUrl.trim(), []);
+        }
+        photoMap.get(photoUrl.trim())!.push(row);
+      }
+    });
+    
+    console.log(`Found ${photoUrls.size} unique photo URLs`);
+    totalCount = photoUrls.size;
+    
+    // Initialize photos array
+    photos = Array.from(photoUrls).map(url => ({
+      name: photoMap.get(url)![0].name + ' ' + photoMap.get(url)![0].surname, // Use first person's name for display
+      url,
+      status: 'loading' as const,
+      retryCount: 0,
+      faceDetectionStatus: 'pending' as const
+    }));
+    
+    // Process each photo
+    for (let i = 0; i < photos.length; i++) {
+      await loadPhoto(i);
+      processedCount++;
+    }
+    
+    isProcessing = false;
+  }
+  
+  async function loadPhoto(index: number, isRetry = false) {
+    const photo = photos[index];
+    
+    if (!isRetry) {
+      photo.status = 'loading';
+      photos = [...photos]; // Trigger reactivity
+    }
+    
+    try {
+      let objectUrl: string;
+      
+      if (isGoogleDriveUrl(photo.url)) {
+        // Download from Google Drive
+        console.log(`Downloading from Google Drive: ${photo.name}`);
+        const blob = await downloadDriveImage(photo.url);
+        objectUrl = createImageObjectUrl(blob);
+      } else {
+        // Use direct URL
+        objectUrl = photo.url;
+      }
+      
+      // Test if 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);
+          reject(new Error('Failed to load image'));
+        };
+        img.src = objectUrl;
+      });
+      
+      photo.objectUrl = objectUrl;
+      photo.status = 'success';
+      console.log(`Photo loaded successfully: ${photo.name}`);
+    } catch (error) {
+      console.error(`Failed to load photo for ${photo.name}:`, error);
+      photo.status = 'error';
+    }
+    
+    photos = [...photos]; // Trigger reactivity
+  }
+  
+  async function retryPhoto(index: number) {
+    const photo = photos[index];
+    
+    if (photo.retryCount >= 3) {
+      return; // Max retries reached
+    }
+    
+    photo.retryCount++;
+    await loadPhoto(index, true);
+  }
+  
+  function handleCropUpdate(index: number, cropData: { x: number; y: number; width: number; height: number }) {
+    photos[index].cropData = cropData;
+    photos = [...photos]; // Trigger reactivity
+  }
+  
+  function handleFaceDetectionStarted(index: number) {
+    photos[index].faceDetectionStatus = 'processing';
+    faceDetectionCount.started++;
+    faceDetectionInProgress = true;
+    photos = [...photos]; // Trigger reactivity
+    console.log(`Face detection started for photo ${index + 1}, total started: ${faceDetectionCount.started}`);
+  }
+  
+  function handleFaceDetectionCompleted(index: number, detail: { success: boolean; hasAutoDetectedCrop: boolean }) {
+    photos[index].faceDetectionStatus = detail.success ? 'completed' : 'failed';
+    faceDetectionCount.completed++;
+    
+    console.log(`Face detection completed for photo ${index + 1}, total completed: ${faceDetectionCount.completed}`);
+    
+    // Check if all face detections are complete
+    if (faceDetectionCount.completed >= faceDetectionCount.started) {
+      faceDetectionInProgress = false;
+      console.log('All face detections completed');
+    }
+    
+    photos = [...photos]; // Trigger reactivity
+  }
+  
+  function canProceed() {
+    const hasPhotos = photos.length > 0;
+    const allLoaded = photos.every(photo => photo.status === 'success');
+    const allCropped = photos.every(photo => photo.cropData);
+    const faceDetectionComplete = !faceDetectionInProgress;
+    
+    return hasPhotos && allLoaded && allCropped && faceDetectionComplete;
+  }
+  
+  // Cleanup object URLs when component is destroyed
+  function cleanupObjectUrls() {
+    photos.forEach(photo => {
+      if (photo.objectUrl && photo.objectUrl.startsWith('blob:')) {
+        URL.revokeObjectURL(photo.objectUrl);
+      }
+    });
+  }
+  
+  // Cleanup on unmount or when photos change
+  $: {
+    // This will run when photos array changes
+    if (photos.length === 0) {
+      cleanupObjectUrls();
+    }
+  }
+</script>
+
 <div class="p-6">
-  <h2 class="text-xl font-semibold text-gray-900">Review Photos</h2>
-  <p class="text-sm text-gray-700">Photo gallery and review functionality will be implemented here.</p>
+  <div class="max-w-6xl mx-auto">
+    <div class="mb-6">
+      <h2 class="text-xl font-semibold text-gray-900 mb-2">
+        Review & Crop Photos
+      </h2>
+      
+      <p class="text-sm text-gray-700 mb-4">
+        Photos are automatically cropped using face detection. Click the pen icon to manually adjust the crop area.
+      </p>
+    </div>
+
+    <!-- Processing Status -->
+    {#if isProcessing}
+      <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mr-3"></div>
+            <span class="text-sm text-blue-800">
+              Processing photos...
+            </span>
+          </div>
+          <span class="text-sm text-blue-600">
+            {processedCount} / {totalCount}
+          </span>
+        </div>
+        
+        {#if totalCount > 0}
+          <div class="mt-3 w-full bg-blue-200 rounded-full h-2">
+            <div 
+              class="bg-blue-600 h-2 rounded-full transition-all duration-300" 
+              style="width: {(processedCount / totalCount) * 100}%"
+            ></div>
+          </div>
+        {/if}
+      </div>
+    {:else if faceDetectionInProgress}
+      <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <div class="w-5 h-5 border-2 border-green-600 border-t-transparent rounded-full animate-spin mr-3"></div>
+            <span class="text-sm text-green-800">
+              Detecting faces and auto-cropping...
+            </span>
+          </div>
+          <span class="text-sm text-green-600">
+            {faceDetectionCount.completed} / {faceDetectionCount.started}
+          </span>
+        </div>
+        
+        {#if faceDetectionCount.started > 0}
+          <div class="mt-3 w-full bg-green-200 rounded-full h-2">
+            <div 
+              class="bg-green-600 h-2 rounded-full transition-all duration-300" 
+              style="width: {(faceDetectionCount.completed / faceDetectionCount.started) * 100}%"
+            ></div>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Summary Stats -->
+    {#if !isProcessing && !faceDetectionInProgress && photos.length > 0}
+      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
+        <h3 class="text-sm font-medium text-gray-700 mb-3">Processing Summary</h3>
+        
+        <div class="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
+          <div class="text-center">
+            <div class="text-2xl font-bold text-gray-900">{photos.length}</div>
+            <div class="text-gray-600">Total Photos</div>
+          </div>
+          
+          <div class="text-center">
+            <div class="text-2xl font-bold text-green-600">
+              {photos.filter(p => p.status === 'success').length}
+            </div>
+            <div class="text-gray-600">Loaded</div>
+          </div>
+          
+          <div class="text-center">
+            <div class="text-2xl font-bold text-blue-600">
+              {photos.filter(p => p.faceDetectionStatus === 'completed').length}
+            </div>
+            <div class="text-gray-600">Auto-cropped</div>
+          </div>
+          
+          <div class="text-center">
+            <div class="text-2xl font-bold text-purple-600">
+              {photos.filter(p => p.cropData).length}
+            </div>
+            <div class="text-gray-600">Ready</div>
+          </div>
+          
+          <div class="text-center">
+            <div class="text-2xl font-bold text-red-600">
+              {photos.filter(p => p.status === 'error').length}
+            </div>
+            <div class="text-gray-600">Failed</div>
+          </div>
+        </div>
+
+        {#if photos.filter(p => p.status === 'error').length > 0}
+          <div class="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded">
+            <p class="text-sm text-yellow-800">
+              <strong>Note:</strong> Cards will only be generated for photos that load successfully.
+            </p>
+          </div>
+        {/if}
+        
+        {#if !canProceed() && photos.filter(p => p.status === 'success').length > 0}
+          <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
+            <p class="text-sm text-blue-800">
+              <strong>Tip:</strong> All photos need to be cropped before proceeding. Face detection runs automatically.
+            </p>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <!-- Photo Grid -->
+    <div class="bg-white border border-gray-200 rounded-lg overflow-hidden mb-6">
+      {#if photos.length === 0 && !isProcessing}
+        <div class="text-center py-12">
+          <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 002 2z"/>
+          </svg>
+          <h3 class="mt-2 text-sm font-medium text-gray-900">No photos found</h3>
+          <p class="mt-1 text-sm text-gray-500">
+            Go back to check your column mapping and selected rows.
+          </p>
+        </div>
+      {:else}
+        <div class="p-6">
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {#each photos as photo, index}
+              {#if photo.status === 'loading'}
+                <div class="border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm">
+                  <div class="aspect-square bg-gray-100 flex items-center justify-center">
+                    <div class="flex flex-col items-center">
+                      <div class="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin mb-2"></div>
+                      <span class="text-xs text-gray-600">Loading...</span>
+                    </div>
+                  </div>
+                  <div class="p-3">
+                    <h4 class="font-medium text-sm text-gray-900 truncate">{photo.name}</h4>
+                    <span class="text-xs text-blue-600">Processing photo...</span>
+                  </div>
+                </div>
+              {:else if photo.status === 'success' && photo.objectUrl}
+                <PhotoCard
+                  imageUrl={photo.objectUrl}
+                  personName={photo.name}
+                  isProcessing={false}
+                  on:cropUpdated={(e) => handleCropUpdate(index, e.detail)}
+                  on:faceDetectionStarted={() => handleFaceDetectionStarted(index)}
+                  on:faceDetectionCompleted={(e) => handleFaceDetectionCompleted(index, e.detail)}
+                />
+              {:else if photo.status === 'error'}
+                <div class="border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm">
+                  <div class="aspect-square bg-gray-100 flex items-center justify-center">
+                    <div class="flex flex-col items-center text-center p-4">
+                      <svg class="w-12 h-12 text-red-400 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                      </svg>
+                      <span class="text-xs text-red-600 mb-2">Failed to load</span>
+                      <button 
+                        class="text-xs text-blue-600 hover:text-blue-800 underline"
+                        on:click={() => retryPhoto(index)}
+                        disabled={photo.retryCount >= 3}
+                      >
+                        {photo.retryCount >= 3 ? 'Max retries' : 'Retry'}
+                      </button>
+                    </div>
+                  </div>
+                  <div class="p-3">
+                    <h4 class="font-medium text-sm text-gray-900 truncate">{photo.name}</h4>
+                    <span class="text-xs text-red-600">Failed to load</span>
+                  </div>
+                </div>
+              {/if}
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Navigation -->
+    <div class="flex justify-between">
+      <button
+        on:click={() => currentStep.set(3)}
+        class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
+      >
+        ← Back to Row Filter
+      </button>
+      
+      <button
+        on:click={() => currentStep.set(5)}
+        disabled={!canProceed()}
+        class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
+      >
+        {canProceed() 
+          ? `Generate ${photos.filter(p => p.status === 'success' && p.cropData).length} Cards →` 
+          : 'Waiting for photos to load and crop'}
+      </button>
+    </div>
+  </div>
 </div>
+
diff --git a/src/lib/components/wizard/StepRowFilter.svelte b/src/lib/components/wizard/StepRowFilter.svelte
index d3c0527..dcf74f8 100644
--- a/src/lib/components/wizard/StepRowFilter.svelte
+++ b/src/lib/components/wizard/StepRowFilter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { selectedSheet, columnMapping, rawSheetData, filteredSheetData, currentStep } from '$lib/stores';
+  import { selectedSheet, columnMapping, rawSheetData, filteredSheetData, currentStep, sheetData } from '$lib/stores';
+  import type { RowData } from '$lib/stores';
   import { onMount } from 'svelte';
 
   let searchTerm = '';
@@ -41,6 +42,7 @@
   }
 
   onMount(() => {
+    console.log('StepRowFilter mounted');
     processSheetData();
   });
 
diff --git a/src/lib/components/wizard/StepSheetSearch.svelte b/src/lib/components/wizard/StepSheetSearch.svelte
index 94feff7..9283fd3 100644
--- a/src/lib/components/wizard/StepSheetSearch.svelte
+++ b/src/lib/components/wizard/StepSheetSearch.svelte
@@ -55,34 +55,6 @@
       recentSheets = [];
     }
   }
-  
-  function saveToRecentSheets(sheet) {
-    // Create a copy of the sheet object with just the properties we need
-    const sheetToSave = {
-      id: sheet.id,
-      name: sheet.name,
-      url: sheet.webViewLink || sheet.url,
-      iconLink: sheet.iconLink
-    };
-    
-    // Remove this sheet if it already exists in the list
-    recentSheets = recentSheets.filter(s => s.id !== sheetToSave.id);
-    
-    // Add the sheet to the beginning of the list
-    recentSheets = [sheetToSave, ...recentSheets];
-    
-    // Keep only up to 3 recent sheets
-    if (recentSheets.length > 3) {
-      recentSheets = recentSheets.slice(0, 3);
-    }
-    
-    // Save to localStorage
-    try {
-      localStorage.setItem(RECENT_SHEETS_KEY, JSON.stringify(recentSheets));
-    } catch (err) {
-      console.error('Error saving recent sheets:', err);
-    }
-  }
 
   function handleSelectSheet(sheet) {
     const sheetData = {
@@ -92,7 +64,6 @@
     };
     
     selectedSheet.set(sheetData);
-    saveToRecentSheets(sheet);
   }
 
   function handleContinue() {
diff --git a/src/lib/google.ts b/src/lib/google.ts
index acf9bdd..f284486 100644
--- a/src/lib/google.ts
+++ b/src/lib/google.ts
@@ -126,3 +126,80 @@ export async function getSheetData(spreadsheetId: string, range: string) {
     });
     return response.result.values || [];
 }
+
+// Extract Google Drive file ID from various URL formats
+export function extractDriveFileId(url: string): string | null {
+  if (!url) return null;
+  
+  // Handle different Google Drive URL formats
+  const patterns = [
+    /\/file\/d\/([a-zA-Z0-9-_]+)/,           // https://drive.google.com/file/d/FILE_ID/view
+    /id=([a-zA-Z0-9-_]+)/,                   // https://drive.google.com/open?id=FILE_ID
+    /\/d\/([a-zA-Z0-9-_]+)/,                 // https://drive.google.com/uc?id=FILE_ID&export=download
+    /^([a-zA-Z0-9-_]{25,})$/                 // Direct file ID
+  ];
+  
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) {
+      return match[1];
+    }
+  }
+  
+  return null;
+}
+
+// Check if URL is a Google Drive URL
+export function isGoogleDriveUrl(url: string): boolean {
+  return url.includes('drive.google.com') || url.includes('googleapis.com');
+}
+
+// Download image from Google Drive using the API
+export async function downloadDriveImage(url: string): Promise<Blob> {
+  const fileId = extractDriveFileId(url);
+  
+  if (!fileId) {
+    throw new Error('Could not extract file ID from Google Drive URL');
+  }
+  
+  if (!gapi.client.drive) {
+    throw new Error('Google Drive API not loaded');
+  }
+  
+  try {
+    // Get file metadata first to check if it exists and is accessible
+    const metadata = await gapi.client.drive.files.get({
+      fileId: fileId,
+      fields: 'id,name,mimeType,size'
+    });
+    
+    if (!metadata.result.mimeType?.startsWith('image/')) {
+      throw new Error('File is not an image');
+    }
+    
+    // Download the file content
+    const response = await gapi.client.drive.files.get({
+      fileId: fileId,
+      alt: 'media'
+    });
+    
+    // The response body is already binary data, convert to blob
+    const binaryString = response.body;
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    
+    return new Blob([bytes], { type: metadata.result.mimeType });
+    
+  } catch (error) {
+    console.error('Error downloading from Google Drive:', error);
+    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    throw new Error(`Failed to download image from Google Drive: ${errorMessage}`);
+  }
+}
+
+// Create an object URL from image data for display
+export function createImageObjectUrl(blob: Blob): string {
+  return URL.createObjectURL(blob);
+}
