diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 04a1b87..b97ef84 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -27,18 +27,18 @@
           >
             <!-- Background sprites (dimmed for comparison) -->
             <template v-if="showAllSprites">
-              <template v-for="i in maxFrames()" :key="`bg-${i}`">
-                <template v-if="i !== currentFrameIndex && !hiddenFrames.includes(i)">
-                  <template v-for="layer in getVisibleLayers()" :key="`${layer.id}-${i}`">
+              <template v-for="i in maxFrames()" :key="`bg-${i - 1}`">
+                <template v-if="i - 1 !== currentFrameIndex && !hiddenFrames.includes(i - 1)">
+                  <template v-for="layer in getVisibleLayers()" :key="`${layer.id}-${i - 1}`">
                     <img
-                      v-if="layer.sprites[i]"
-                      :src="layer.sprites[i].url"
+                      v-if="layer.sprites[i - 1]"
+                      :src="layer.sprites[i - 1].url"
                       class="absolute pointer-events-none"
                       :style="{
-                        left: `${cellDimensions.negativeSpacing + layer.sprites[i].x}px`,
-                        top: `${cellDimensions.negativeSpacing + layer.sprites[i].y}px`,
-                        width: `${layer.sprites[i].width}px`,
-                        height: `${layer.sprites[i].height}px`,
+                        left: `${cellDimensions.negativeSpacing + layer.sprites[i - 1].x}px`,
+                        top: `${cellDimensions.negativeSpacing + layer.sprites[i - 1].y}px`,
+                        width: `${layer.sprites[i - 1].width}px`,
+                        height: `${layer.sprites[i - 1].height}px`,
                         opacity: '0.3',
                         imageRendering: settingsStore.pixelPerfect ? 'pixelated' : 'auto',
                       }"