diff --git a/frontend/src/lib/assets/silhouette.png b/frontend/src/lib/assets/silhouette.png
new file mode 100644
index 0000000..0c232bc
Binary files /dev/null and b/frontend/src/lib/assets/silhouette.png differ
diff --git a/frontend/src/lib/components/visual/AlignmentIndicator.svelte b/frontend/src/lib/components/visual/AlignmentIndicator.svelte
index e46caba..9e92d78 100644
--- a/frontend/src/lib/components/visual/AlignmentIndicator.svelte
+++ b/frontend/src/lib/components/visual/AlignmentIndicator.svelte
@@ -1,63 +1,14 @@
 <script>
-  /**
-   * Visual indicator for alignment settings showing head position and scale.
-   * Displays an anatomically proportioned face with eyes positioned according to eye_distance.
-   *
-   * The eye_distance parameter controls zoom level:
-   * - Smaller values (0.1): zoomed out, head appears smaller, shows more neck
-   * - Larger values (0.5): zoomed in, head appears larger, tighter crop
-   *
-   * Proportions match the processing pipeline (alignment.rs):
-   * - Eye positions calculated with FACE_CENTER_BELOW_EYES = 0.5
-   * - Face center (hairline-to-chin midpoint + neck) positioned at frame center
-   * - This creates a vertical offset showing more neck than forehead
-   * - Inter-pupillary distance (IPD) is ~37% of face width
-   */
+  import silhouetteUrl from '../../assets/silhouette.png';
+
   let { eyeDistance = 0.3 } = $props();
 
-  // Frame dimensions (square output image)
   const frameSize = 120;
 
-  // Calculate eye positions using the same formulas as alignment.rs
-  const FACE_CENTER_BELOW_EYES = 0.5;
-
-  const leftEyeX = $derived((1.0 - eyeDistance) / 2.0);
-  const rightEyeX = $derived(1.0 - leftEyeX);
-  const eyeY = $derived(0.5 - eyeDistance * FACE_CENTER_BELOW_EYES);
-
-  // Convert to pixel coordinates
-  const leftEyePos = $derived({ x: leftEyeX * frameSize, y: eyeY * frameSize });
-  const rightEyePos = $derived({ x: rightEyeX * frameSize, y: eyeY * frameSize });
-
-  // Calculate eye distance in pixels
-  const eyeDistancePx = $derived(eyeDistance * frameSize);
-
-  // Calculate eye center point
-  const eyeCenterX = $derived((leftEyePos.x + rightEyePos.x) / 2);
-  const eyeCenterY = $derived(eyeY * frameSize);
-
-  // Face proportions based on inter-pupillary distance (IPD)
-  // Per crop_utils.rs, IPD is ~0.37 of face width
-  // Face center (hairline-to-chin midpoint + neck) is 0.5 * IPD below eyes
-
-  // Anatomical proportions relative to IPD:
-  // - Eyes to top of head (forehead): ~0.5 IPD
-  // - Eyes to face center: 0.5 IPD (by definition)
-  // - Face center to bottom (lower face + neck): ~0.5 IPD
-  // Total head height: ~1.5 IPD
-  const foreheadHeight = $derived(eyeDistancePx * 0.5);
-  const lowerFaceHeight = $derived(eyeDistancePx * 1.0);
-
-  // Head ellipse dimensions (head is taller than wide)
-  const headCenter = $derived({
-    x: eyeCenterX,
-    y: eyeCenterY + (lowerFaceHeight - foreheadHeight) / 2
-  });
-  const headWidth = $derived(eyeDistancePx * 1.35);  // Width relative to IPD
-  const headHeight = $derived(eyeDistancePx * 1.85);  // Height > width (ratio ~1.37)
-
-  // Eye rendering parameters (scale with IPD)
-  const eyeRadius = $derived(Math.max(2.5, eyeDistancePx * 0.12));
+  // Scale the silouhette so it fills the frame proportionally to eyeDistance
+  const imgSize = $derived(eyeDistance * frameSize * (1 / 0.12));  // Eye distance approximated to around 12% of the width.
+  const imgX = $derived((frameSize - imgSize) / 2);
+  const imgY = $derived(((frameSize * 1.4) - imgSize) / 2);  // slight offset to show more neck
 </script>
 
 <svg
@@ -76,50 +27,14 @@
     stroke="none"
   />
 
-  <!-- Head ellipse (face shape) -->
-  <ellipse
-    cx={headCenter.x}
-    cy={headCenter.y}
-    rx={headWidth}
-    ry={headHeight}
-    fill="none"
-    stroke="white"
-    stroke-width="2"
-    class="head"
-  />
-
-  <!-- Left eye -->
-  <circle
-    cx={leftEyePos.x}
-    cy={leftEyePos.y}
-    r={eyeRadius}
-    fill="none"
-    stroke="white"
-    stroke-width="2"
-    class="eye"
-  />
-
-  <!-- Right eye -->
-  <circle
-    cx={rightEyePos.x}
-    cy={rightEyePos.y}
-    r={eyeRadius}
-    fill="none"
-    stroke="white"
-    stroke-width="2"
-    class="eye"
-  />
-
-  <!-- Simple mouth curve (positioned between eyes and chin) -->
-  <path
-    d="M {eyeCenterX - eyeDistancePx * 0.35} {eyeCenterY + eyeDistancePx * 0.65}
-       Q {eyeCenterX} {eyeCenterY + eyeDistancePx * 0.75},
-         {eyeCenterX + eyeDistancePx * 0.35} {eyeCenterY + eyeDistancePx * 0.65}"
-    fill="none"
-    stroke="white"
-    stroke-width="2"
-    stroke-linecap="round"
-    class="mouth"
+  <!-- Silhouette image scaled to head bounding box -->
+  <image
+    href={silhouetteUrl}
+    x={imgX}
+    y={imgY}
+    width={imgSize}
+    height={imgSize}
+    class="silhouette"
   />
 </svg>
 
@@ -129,9 +44,8 @@
     height: 80px;
   }
 
-  .head,
-  .eye,
-  .mouth {
+  .silhouette {
+    filter: invert(1);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
 </style>