diff --git a/src/components/MainContent.vue b/src/components/MainContent.vue
index 56f9424..cdbeae4 100644
--- a/src/components/MainContent.vue
+++ b/src/components/MainContent.vue
@@ -6,252 +6,392 @@
           <i class="fas fa-th-large text-blue-500"></i>
           <span>Spritesheet</span>
         </div>
-      </div>
-      <div class="p-6">
-        <div class="relative overflow-auto bg-gray-700 rounded border border-gray-600">
-          <canvas ref="canvasEl" class="block mx-auto"></canvas>
+        <div class="text-sm text-gray-400">
+          <span>Zoom: {{ Math.round(store.zoomLevel.value * 100) }}%</span>
+        </div>
+      </div>
+      <div class="p-6">
+        <div ref="containerEl" class="relative overflow-auto bg-gray-700 rounded border border-gray-600 h-96"
+             :class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }">
+          <canvas
+            ref="canvasEl"
+            class="block"
+            :style="{
+              transform: `scale(${store.zoomLevel.value})`,
+              transformOrigin: 'top left',
+              width: zoomedWidth + 'px',
+              height: zoomedHeight + 'px'
+            }"
+          ></canvas>
         </div>
       </div>
-    </div>
-
-    <!-- Tooltip -->
-    <div v-if="isTooltipVisible" :style="tooltipStyle" class="absolute bg-gray-700 text-gray-200 px-3 py-2 rounded text-xs z-50 pointer-events-none shadow-md border border-gray-600">
-      {{ tooltipText }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-  import { useSpritesheetStore } from '../composables/useSpritesheetStore';
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
+import { useSpritesheetStore } from '../composables/useSpritesheetStore';
 
-  const store = useSpritesheetStore();
-  const canvasEl = ref<HTMLCanvasElement | null>(null);
+const store = useSpritesheetStore();
+const canvasEl = ref<HTMLCanvasElement | null>(null);
+const containerEl = ref<HTMLDivElement | null>(null);
 
-  // Tooltip state
-  const isTooltipVisible = ref(false);
-  const tooltipText = ref('');
-  const tooltipPosition = ref({ x: 0, y: 0 });
+// Panning state
+const isPanning = ref(false);
+const isAltPressed = ref(false);
+const isMiddleMouseDown = ref(false);
+const lastPosition = ref({ x: 0, y: 0 });
 
-  const tooltipStyle = computed(() => ({
-    left: `${tooltipPosition.value.x + 15}px`,
-    top: `${tooltipPosition.value.y + 15}px`,
-  }));
+// Tooltip state
+const isTooltipVisible = ref(false);
+const tooltipText = ref('');
+const tooltipPosition = ref({ x: 0, y: 0 });
 
-  const setupCheckerboardPattern = () => {
-    if (!canvasEl.value) {
-      console.error('MainContent: Canvas element not available for checkerboard pattern');
-      return;
-    }
+// Responsive canvas sizing
+const containerWidth = ref(0);
+const containerHeight = ref(0);
+const baseCanvasWidth = ref(0);
+const baseCanvasHeight = ref(0);
 
-    try {
-      // This will be done with CSS using Tailwind's bg utilities
-      canvasEl.value.style.backgroundImage = `
+// Computed properties for zoomed dimensions
+const zoomedWidth = computed(() => {
+  return baseCanvasWidth.value * store.zoomLevel.value;
+});
+
+const zoomedHeight = computed(() => {
+  return baseCanvasHeight.value * store.zoomLevel.value;
+});
+
+const tooltipStyle = computed(() => ({
+  left: `${tooltipPosition.value.x + 15}px`,
+  top: `${tooltipPosition.value.y + 15}px`,
+}));
+
+// Watch for zoom changes to update the container scroll position
+watch(() => store.zoomLevel.value, (newZoom, oldZoom) => {
+  if (!containerEl.value) return;
+
+  // Adjust scroll position to keep the center point consistent when zooming
+  const centerX = containerEl.value.scrollLeft + containerEl.value.clientWidth / 2;
+  const centerY = containerEl.value.scrollTop + containerEl.value.clientHeight / 2;
+
+  // Calculate new scroll position based on new zoom level
+  const scaleChange = newZoom / oldZoom;
+  containerEl.value.scrollLeft = centerX * scaleChange - containerEl.value.clientWidth / 2;
+  containerEl.value.scrollTop = centerY * scaleChange - containerEl.value.clientHeight / 2;
+
+  // Re-render the canvas with the new zoom level
+  updateCanvasSize();
+  store.renderSpritesheetPreview();
+});
+
+const setupCheckerboardPattern = () => {
+  if (!canvasEl.value) return;
+
+  canvasEl.value.style.backgroundImage = `
       linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
       linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
       linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
       linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
     `;
-      canvasEl.value.style.backgroundSize = '20px 20px';
-      canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
-    } catch (error) {
-      console.error('MainContent: Error setting up checkerboard pattern:', error);
+  canvasEl.value.style.backgroundSize = '20px 20px';
+  canvasEl.value.style.backgroundPosition = '0 0, 0 10px, 10px -10px, -10px 0px';
+};
+
+const updateCanvasSize = () => {
+  if (!canvasEl.value || !containerEl.value) return;
+
+  // Get the container dimensions
+  containerWidth.value = containerEl.value.clientWidth;
+  containerHeight.value = containerEl.value.clientHeight;
+
+  // Set the base canvas size to fill the container
+  // These are the "unzoomed" dimensions
+  baseCanvasWidth.value = Math.max(containerWidth.value,
+    store.cellSize.width * Math.ceil(containerWidth.value / store.cellSize.width));
+  baseCanvasHeight.value = Math.max(containerHeight.value,
+    store.cellSize.height * Math.ceil(containerHeight.value / store.cellSize.height));
+
+  // Update the actual canvas element size
+  canvasEl.value.width = baseCanvasWidth.value;
+  canvasEl.value.height = baseCanvasHeight.value;
+
+  // Trigger a re-render
+  store.renderSpritesheetPreview();
+};
+
+const handleMouseDown = (e: MouseEvent) => {
+  if (!canvasEl.value || store.sprites.value.length === 0) return;
+
+  const rect = canvasEl.value.getBoundingClientRect();
+  // Adjust coordinates based on zoom level
+  const x = (e.clientX - rect.left) / store.zoomLevel.value;
+  const y = (e.clientY - rect.top) / store.zoomLevel.value;
+
+  // Find which sprite was clicked
+  for (let i = store.sprites.value.length - 1; i >= 0; i--) {
+    const sprite = store.sprites.value[i];
+    if (x >= sprite.x && x <= sprite.x + store.cellSize.width && y >= sprite.y && y <= sprite.y + store.cellSize.height) {
+      store.draggedSprite.value = sprite;
+      store.dragOffset.x = x - sprite.x;
+      store.dragOffset.y = y - sprite.y;
+      break;
     }
-  };
+  }
+};
 
-  const handleMouseDown = (e: MouseEvent) => {
-    if (!canvasEl.value || store.sprites.value.length === 0) return;
+const handleMouseMove = (e: MouseEvent) => {
+  // Don't process sprite movement or tooltips while panning
+  if (isPanning.value) return;
 
-    const rect = canvasEl.value.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+  if (!canvasEl.value) return;
 
-    // Find which sprite was clicked
-    for (let i = store.sprites.value.length - 1; i >= 0; i--) {
-      const sprite = store.sprites.value[i];
-      if (x >= sprite.x && x <= sprite.x + store.cellSize.width && y >= sprite.y && y <= sprite.y + store.cellSize.height) {
-        store.draggedSprite.value = sprite;
-        store.dragOffset.x = x - sprite.x;
-        store.dragOffset.y = y - sprite.y;
-        break;
-      }
-    }
-  };
+  const rect = canvasEl.value.getBoundingClientRect();
+  // Adjust coordinates for zoom
+  const x = (e.clientX - rect.left) / store.zoomLevel.value;
+  const y = (e.clientY - rect.top) / store.zoomLevel.value;
 
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!canvasEl.value) return;
+  // Update tooltip
+  const cellX = Math.floor(x / store.cellSize.width);
+  const cellY = Math.floor(y / store.cellSize.height);
 
-    const rect = canvasEl.value.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
-
-    // Update tooltip
-    const cellX = Math.floor(x / store.cellSize.width);
-    const cellY = Math.floor(y / store.cellSize.height);
-
-    if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width && cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
-      isTooltipVisible.value = true;
-      tooltipText.value = `Cell: (${cellX}, ${cellY})`;
-      // Use pageX and pageY instead of clientX and clientY
-      tooltipPosition.value.x = e.pageX;
-      tooltipPosition.value.y = e.pageY;
-    } else {
-      isTooltipVisible.value = false;
-    }
-
-    // Move the sprite if we're dragging one
-    if (store.draggedSprite.value) {
-      if (store.isShiftPressed.value) {
-        // Free positioning within the cell bounds when shift is pressed
-        // First determine which cell we're in
-        const cellX = Math.floor(store.draggedSprite.value.x / store.cellSize.width);
-        const cellY = Math.floor(store.draggedSprite.value.y / store.cellSize.height);
-
-        // Calculate new position with constraints to stay within the cell
-        const newX = x - store.dragOffset.x;
-        const newY = y - store.dragOffset.y;
-
-        // Calculate cell boundaries
-        const cellLeft = cellX * store.cellSize.width;
-        const cellTop = cellY * store.cellSize.height;
-        const cellRight = cellLeft + store.cellSize.width - store.draggedSprite.value.img.width;
-        const cellBottom = cellTop + store.cellSize.height - store.draggedSprite.value.img.height;
-
-        // Constrain position to stay within the cell
-        store.draggedSprite.value.x = Math.max(cellLeft, Math.min(newX, cellRight));
-        store.draggedSprite.value.y = Math.max(cellTop, Math.min(newY, cellBottom));
-
-        // Trigger a re-render
-        store.renderSpritesheetPreview();
-      } else {
-        // Calculate new position based on grid cells (snap to grid)
-        const newCellX = Math.floor((x - store.dragOffset.x) / store.cellSize.width);
-        const newCellY = Math.floor((y - store.dragOffset.y) / store.cellSize.height);
-
-        // Make sure we stay within bounds
-        if (canvasEl.value) {
-          const maxCellX = Math.floor(canvasEl.value.width / store.cellSize.width) - 1;
-          const maxCellY = Math.floor(canvasEl.value.height / store.cellSize.height) - 1;
-
-          const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX));
-          const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY));
-
-          store.draggedSprite.value.x = boundedCellX * store.cellSize.width;
-          store.draggedSprite.value.y = boundedCellY * store.cellSize.height;
-
-          // Trigger a re-render
-          store.renderSpritesheetPreview();
-        }
-      }
-    }
-  };
-
-  const handleMouseUp = () => {
-    store.draggedSprite.value = null;
-  };
-
-  const handleMouseOut = () => {
+  if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width &&
+    cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
+    isTooltipVisible.value = true;
+    tooltipText.value = `Cell: (${cellX}, ${cellY})`;
+    tooltipPosition.value.x = e.pageX;
+    tooltipPosition.value.y = e.pageY;
+  } else {
     isTooltipVisible.value = false;
-    store.draggedSprite.value = null;
-  };
+  }
 
-  const handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key === 'Shift') {
-      store.isShiftPressed.value = true;
-    }
-  };
+  // Move the sprite if we're dragging one
+  if (store.draggedSprite.value) {
+    if (store.isShiftPressed.value) {
+      // Free positioning within the cell bounds when shift is pressed
+      const cellX = Math.floor(store.draggedSprite.value.x / store.cellSize.width);
+      const cellY = Math.floor(store.draggedSprite.value.y / store.cellSize.height);
 
-  const handleKeyUp = (e: KeyboardEvent) => {
-    if (e.key === 'Shift') {
-      store.isShiftPressed.value = false;
-    }
-  };
+      // Calculate new position with constraints to stay within the cell
+      const newX = x - store.dragOffset.x;
+      const newY = y - store.dragOffset.y;
 
-  const setupCanvasEvents = () => {
-    if (!canvasEl.value) {
-      console.error('MainContent: Canvas element not available for event setup');
-      return;
+      // Calculate cell boundaries
+      const cellLeft = cellX * store.cellSize.width;
+      const cellTop = cellY * store.cellSize.height;
+      const cellRight = cellLeft + store.cellSize.width - store.draggedSprite.value.img.width;
+      const cellBottom = cellTop + store.cellSize.height - store.draggedSprite.value.img.height;
+
+      // Constrain position to stay within the cell
+      store.draggedSprite.value.x = Math.max(cellLeft, Math.min(newX, cellRight));
+      store.draggedSprite.value.y = Math.max(cellTop, Math.min(newY, cellBottom));
+    } else {
+      // Calculate new position based on grid cells (snap to grid)
+      const newCellX = Math.floor((x - store.dragOffset.x) / store.cellSize.width);
+      const newCellY = Math.floor((y - store.dragOffset.y) / store.cellSize.height);
+
+      // Make sure we stay within bounds
+      if (canvasEl.value) {
+        const maxCellX = Math.floor(canvasEl.value.width / store.cellSize.width) - 1;
+        const maxCellY = Math.floor(canvasEl.value.height / store.cellSize.height) - 1;
+
+        const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX));
+        const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY));
+
+        store.draggedSprite.value.x = boundedCellX * store.cellSize.width;
+        store.draggedSprite.value.y = boundedCellY * store.cellSize.height;
+      }
     }
 
-    try {
-      canvasEl.value.addEventListener('mousedown', handleMouseDown);
-      canvasEl.value.addEventListener('mousemove', handleMouseMove);
-      canvasEl.value.addEventListener('mouseup', handleMouseUp);
-      canvasEl.value.addEventListener('mouseout', handleMouseOut);
-    } catch (error) {
-      console.error('MainContent: Error setting up canvas events:', error);
+    // Trigger a re-render
+    store.renderSpritesheetPreview();
+  }
+};
+
+const handleMouseUp = () => {
+  store.draggedSprite.value = null;
+};
+
+const handleMouseOut = () => {
+  isTooltipVisible.value = false;
+  store.draggedSprite.value = null;
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Shift') {
+    store.isShiftPressed.value = true;
+  }
+
+  if (e.key === 'Alt') {
+    e.preventDefault(); // Prevent browser from focusing address bar
+    isAltPressed.value = true;
+  }
+
+  // Add keyboard shortcuts for zooming
+  if (e.ctrlKey || e.metaKey) {
+    if (e.key === '=' || e.key === '+') {
+      e.preventDefault();
+      store.zoomIn();
+    } else if (e.key === '-') {
+      e.preventDefault();
+      store.zoomOut();
+    } else if (e.key === '0') {
+      e.preventDefault();
+      store.resetZoom();
     }
-  };
+  }
+};
 
-  onMounted(() => {
-    // Initialize canvas immediately
-    initializeCanvas();
+const handleKeyUp = (e: KeyboardEvent) => {
+  if (e.key === 'Shift') {
+    store.isShiftPressed.value = false;
+  }
 
-    // Also set up a MutationObserver to ensure the canvas is properly initialized
-    // even if there are DOM changes
-    const observer = new MutationObserver(mutations => {
-      initializeCanvas();
+  if (e.key === 'Alt') {
+    isAltPressed.value = false;
+  }
+};
+
+const handleCanvasMouseDown = (e: MouseEvent) => {
+  // Middle mouse button or Alt + left click for panning
+  if (e.button === 1 || (e.button === 0 && isAltPressed.value)) {
+    e.preventDefault();
+    isPanning.value = true;
+    lastPosition.value = { x: e.clientX, y: e.clientY };
+  } else {
+    // Regular sprite dragging
+    handleMouseDown(e);
+  }
+};
+
+const handleCanvasMouseMove = (e: MouseEvent) => {
+  if (isPanning.value && containerEl.value) {
+    e.preventDefault();
+    const dx = e.clientX - lastPosition.value.x;
+    const dy = e.clientY - lastPosition.value.y;
+
+    // Scroll the container in the opposite direction of the mouse movement
+    containerEl.value.scrollLeft -= dx;
+    containerEl.value.scrollTop -= dy;
+
+    // Update the last position for the next movement
+    lastPosition.value = { x: e.clientX, y: e.clientY };
+  } else {
+    // Handle regular mouse move for sprites and tooltip
+    handleMouseMove(e);
+  }
+};
+
+const handleCanvasMouseUp = () => {
+  isPanning.value = false;
+  handleMouseUp();
+};
+
+const handleCanvasMouseLeave = () => {
+  isPanning.value = false;
+  handleMouseOut();
+};
+
+const preventContextMenu = (e: MouseEvent) => {
+  e.preventDefault();
+};
+
+const setupCanvasEvents = () => {
+  if (!canvasEl.value) return;
+
+  // Set up mouse events for the canvas
+  canvasEl.value.addEventListener('mousedown', handleCanvasMouseDown);
+  canvasEl.value.addEventListener('mousemove', handleCanvasMouseMove);
+  canvasEl.value.addEventListener('mouseup', handleCanvasMouseUp);
+  canvasEl.value.addEventListener('mouseleave', handleCanvasMouseLeave);
+  canvasEl.value.addEventListener('contextmenu', preventContextMenu);
+};
+
+// Handle window resize to update canvas dimensions
+const handleResize = () => {
+  updateCanvasSize();
+};
+
+onMounted(async () => {
+  // Set up global event listeners
+  window.addEventListener('keydown', handleKeyDown);
+  window.addEventListener('keyup', handleKeyUp);
+  window.addEventListener('resize', handleResize);
+
+  // Initialize the canvas
+  await nextTick();
+  initializeCanvas();
+
+  // Observe container size changes
+  if ('ResizeObserver' in window) {
+    const resizeObserver = new ResizeObserver(() => {
+      updateCanvasSize();
     });
 
-    // Start observing the document with the configured parameters
-    observer.observe(document.body, { childList: true, subtree: true });
+    if (containerEl.value) {
+      resizeObserver.observe(containerEl.value);
+    }
+  }
+});
 
-    // Clean up the observer after a short time
-    setTimeout(() => {
-      observer.disconnect();
-    }, 2000);
-  });
+const initializeCanvas = () => {
+  if (!canvasEl.value || !containerEl.value) return;
 
-  const initializeCanvas = () => {
-    if (!canvasEl.value) {
-      console.error('MainContent: Canvas element not found');
+  try {
+    const context = canvasEl.value.getContext('2d');
+    if (!context) {
+      console.error('Failed to get 2D context from canvas');
       return;
     }
 
-    try {
-      // Get the 2D context
-      const context = canvasEl.value.getContext('2d');
-      if (!context) {
-        console.error('MainContent: Failed to get 2D context from canvas');
-        return;
-      }
+    // Set canvas and context in the store
+    store.canvas.value = canvasEl.value;
+    store.ctx.value = context;
 
-      // Set the store references
-      store.canvas.value = canvasEl.value;
-      store.ctx.value = context;
+    // Set up the checkerboard pattern
+    setupCheckerboardPattern();
 
-      // Initialize canvas size
-      canvasEl.value.width = 400;
-      canvasEl.value.height = 300;
+    // Set up canvas mouse events
+    setupCanvasEvents();
 
-      // Setup the canvas
-      setupCheckerboardPattern();
-      setupCanvasEvents();
+    // Set the initial canvas size based on container
+    updateCanvasSize();
 
-      // Setup keyboard events for modifiers
-      window.addEventListener('keydown', handleKeyDown);
-      window.addEventListener('keyup', handleKeyUp);
-
-      // Check if we have sprites that need rendering
-      if (store.sprites.value.length > 0) {
-        store.updateCellSize();
-        store.autoArrangeSprites();
-        store.renderSpritesheetPreview();
-      }
-    } catch (error) {
-      console.error('MainContent: Error initializing canvas:', error);
+    // Update sprites if there are any loaded
+    if (store.sprites.value.length > 0) {
+      store.updateCellSize();
+      store.autoArrangeSprites();
+      store.renderSpritesheetPreview();
     }
-  };
+  } catch (error) {
+    console.error('Error initializing canvas:', error);
+  }
+};
 
-  onBeforeUnmount(() => {
-    window.removeEventListener('keydown', handleKeyDown);
-    window.removeEventListener('keyup', handleKeyUp);
+onBeforeUnmount(() => {
+  // Remove global event listeners
+  window.removeEventListener('keydown', handleKeyDown);
+  window.removeEventListener('keyup', handleKeyUp);
+  window.removeEventListener('resize', handleResize);
 
-    if (canvasEl.value) {
-      canvasEl.value.removeEventListener('mousedown', handleMouseDown);
-      canvasEl.value.removeEventListener('mousemove', handleMouseMove);
-      canvasEl.value.removeEventListener('mouseup', handleMouseUp);
-      canvasEl.value.removeEventListener('mouseout', handleMouseOut);
-    }
-  });
+  // Remove canvas event listeners
+  if (canvasEl.value) {
+    canvasEl.value.removeEventListener('mousedown', handleCanvasMouseDown);
+    canvasEl.value.removeEventListener('mousemove', handleCanvasMouseMove);
+    canvasEl.value.removeEventListener('mouseup', handleCanvasMouseUp);
+    canvasEl.value.removeEventListener('mouseleave', handleCanvasMouseLeave);
+    canvasEl.value.removeEventListener('contextmenu', preventContextMenu);
+  }
+});
 </script>
+
+<style scoped>
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 28f9dff..b7e4424 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -50,7 +50,22 @@
           </button>
         </div>
 
+        <!-- Zoom Controls -->
+        <div class="flex flex-wrap gap-3 mb-6">
+          <div class="text-sm font-medium text-gray-300 mb-2 w-full">Zoom Controls</div>
+          <button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
+            <i class="fas fa-search-plus"></i> Zoom In
+          </button>
+          <button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
+            <i class="fas fa-search-minus"></i> Zoom Out
+          </button>
+          <button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
+            <i class="fas fa-sync-alt"></i> Reset Zoom
+          </button>
+        </div>
+
         <div class="flex flex-wrap gap-3 mt-4">
+          <div class="text-sm font-medium text-gray-300 mb-2 w-full">Keyboard Shortcuts</div>
           <div class="flex items-center gap-2 text-sm text-gray-400">
             <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Shift</kbd>
             <span>Fine-tune position</span>
@@ -63,6 +78,30 @@
             <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Esc</kbd>
             <span>Close preview</span>
           </div>
+          <div class="flex items-center gap-2 text-sm text-gray-400">
+            <div class="flex items-center">
+              <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Ctrl</kbd>
+              <span class="mx-1">+</span>
+              <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">+</kbd>
+            </div>
+            <span>Zoom in</span>
+          </div>
+          <div class="flex items-center gap-2 text-sm text-gray-400">
+            <div class="flex items-center">
+              <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Ctrl</kbd>
+              <span class="mx-1">+</span>
+              <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">-</kbd>
+            </div>
+            <span>Zoom out</span>
+          </div>
+          <div class="flex items-center gap-2 text-sm text-gray-400">
+            <div class="flex items-center">
+              <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Ctrl</kbd>
+              <span class="mx-1">+</span>
+              <kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">0</kbd>
+            </div>
+            <span>Reset zoom</span>
+          </div>
         </div>
       </div>
     </div>
@@ -104,5 +143,5 @@
   };
 
   // Expose store methods directly
-  const { autoArrangeSprites, downloadSpritesheet } = store;
+  const { autoArrangeSprites, downloadSpritesheet, zoomIn, zoomOut, resetZoom } = store;
 </script>
diff --git a/src/composables/useSpritesheetStore.ts b/src/composables/useSpritesheetStore.ts
index 8870169..32ca1e2 100644
--- a/src/composables/useSpritesheetStore.ts
+++ b/src/composables/useSpritesheetStore.ts
@@ -37,6 +37,7 @@ const draggedSprite = ref<Sprite | null>(null);
 const dragOffset = reactive({ x: 0, y: 0 });
 const isShiftPressed = ref(false);
 const isModalOpen = ref(false);
+const zoomLevel = ref(1); // Default zoom level (1 = 100%)
 
 export function useSpritesheetStore() {
   const animation = reactive<AnimationState>({
@@ -143,6 +144,11 @@ export function useSpritesheetStore() {
 
       canvas.value.width = newWidth;
       canvas.value.height = newHeight;
+      
+      // Emit an event to update the wrapper dimensions
+      window.dispatchEvent(new CustomEvent('canvas-size-updated', {
+        detail: { width: newWidth, height: newHeight }
+      }));
     } catch (error) {
       console.error('Store: Error updating canvas size:', error);
     }
@@ -206,6 +212,10 @@ export function useSpritesheetStore() {
       // Clear the canvas
       ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
 
+      // Apply zoom transformation
+      ctx.value.save();
+      ctx.value.scale(zoomLevel.value, zoomLevel.value);
+
       if (showGrid) {
         drawGrid();
       }
@@ -226,7 +236,10 @@ export function useSpritesheetStore() {
             // If image isn't loaded yet, set an onload handler
             sprite.img.onload = () => {
               if (ctx.value && canvas.value) {
+                ctx.value.save();
+                ctx.value.scale(zoomLevel.value, zoomLevel.value);
                 ctx.value.drawImage(sprite.img, sprite.x, sprite.y);
+                ctx.value.restore();
               }
             };
           }
@@ -234,6 +247,9 @@ export function useSpritesheetStore() {
           console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);
         }
       });
+
+      // Restore the canvas state
+      ctx.value.restore();
     } catch (error) {
       console.error('Store: Error rendering spritesheet preview:', error);
     }
@@ -243,21 +259,25 @@ export function useSpritesheetStore() {
     if (!ctx.value || !canvas.value) return;
 
     ctx.value.strokeStyle = '#333';
-    ctx.value.lineWidth = 1;
+    ctx.value.lineWidth = 1 / zoomLevel.value; // Adjust line width based on zoom level
+
+    // Calculate the visible area based on zoom level
+    const visibleWidth = canvas.value.width / zoomLevel.value;
+    const visibleHeight = canvas.value.height / zoomLevel.value;
 
     // Draw vertical lines
-    for (let x = 0; x <= canvas.value.width; x += cellSize.width) {
+    for (let x = 0; x <= visibleWidth; x += cellSize.width) {
       ctx.value.beginPath();
       ctx.value.moveTo(x, 0);
-      ctx.value.lineTo(x, canvas.value.height);
+      ctx.value.lineTo(x, visibleHeight);
       ctx.value.stroke();
     }
 
     // Draw horizontal lines
-    for (let y = 0; y <= canvas.value.height; y += cellSize.height) {
+    for (let y = 0; y <= visibleHeight; y += cellSize.height) {
       ctx.value.beginPath();
       ctx.value.moveTo(0, y);
-      ctx.value.lineTo(canvas.value.width, y);
+      ctx.value.lineTo(visibleWidth, y);
       ctx.value.stroke();
     }
   }
@@ -411,6 +431,27 @@ export function useSpritesheetStore() {
     }, 3000);
   }
 
+  function zoomIn() {
+    // Increase zoom level by 0.1, max 3.0 (300%)
+    zoomLevel.value = Math.min(3.0, zoomLevel.value + 0.1);
+    renderSpritesheetPreview();
+    showNotification(`Zoom: ${Math.round(zoomLevel.value * 100)}%`);
+  }
+
+  function zoomOut() {
+    // Decrease zoom level by 0.1, min 0.5 (50%)
+    zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.1);
+    renderSpritesheetPreview();
+    showNotification(`Zoom: ${Math.round(zoomLevel.value * 100)}%`);
+  }
+
+  function resetZoom() {
+    // Reset to default zoom level (100%)
+    zoomLevel.value = 1;
+    renderSpritesheetPreview();
+    showNotification('Zoom reset to 100%');
+  }
+
   return {
     sprites,
     canvas,
@@ -423,6 +464,7 @@ export function useSpritesheetStore() {
     isModalOpen,
     animation,
     notification,
+    zoomLevel,
     addSprites,
     updateCellSize,
     updateCanvasSize,
@@ -436,5 +478,8 @@ export function useSpritesheetStore() {
     stopAnimation,
     renderAnimationFrame,
     showNotification,
+    zoomIn,
+    zoomOut,
+    resetZoom,
   };
 }