diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 6a3f764..33ba2a6 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -124,8 +124,10 @@
         // processedBlob so the server upload carries real images (PUBLISH-40).
         const calIdx = s.calibrationIndex;
         const apply = results?.batchApply;
+        // slab_photos.id is a global primary key, so the id must be unique
+        // across slabs - key it on the slab id, not just the index/size.
         const photos = s.batch.map((source, i) => ({
-          id: `cap-${i}-${source.blob.size}`,
+          id: `cap-${d.id}-${i}`,
           seq: i + 1,
           isCalibration: i === calIdx,
           url: URL.createObjectURL(source.blob),
@@ -144,7 +146,7 @@
         // encode failed (known separate defect) — the lineup just shows no overlay.
         if (results?.overlayPng && calIdx != null) {
           const overlay = {
-            id: `overlay-${calIdx}-${results.overlayPng.size}`,
+            id: `overlay-${d.id}-${calIdx}`,
             seq: calIdx + 2,
             isCalibration: false,
             url: URL.createObjectURL(results.overlayPng),