diff --git a/src/components/ZoomControls.svelte b/src/components/ZoomControls.svelte
new file mode 100644
index 0000000..761d4a2
--- /dev/null
+++ b/src/components/ZoomControls.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+    import {
+        ZoomInOutline,
+        ZoomOutOutline,
+        RefreshOutline,
+    } from "flowbite-svelte-icons";
+
+    let {
+        scale,
+        onZoomIn,
+        onZoomOut,
+        resetZoom,
+    }: {
+        scale: number;
+        onZoomIn: () => void;
+        onZoomOut: () => void;
+        resetZoom: () => void;
+    } = $props();
+
+    $inspect(scale);
+</script>
+
+<div class="controls">
+    <span class="zoom-level">{(scale * 100).toFixed(0)}%</span>
+    <button class="control-button" onclick={onZoomIn}>
+        <ZoomInOutline />
+    </button>
+    <button class="control-button" onclick={onZoomOut}>
+        <ZoomOutOutline />
+    </button>
+    <button class="control-button" onclick={resetZoom}>
+        <RefreshOutline />
+    </button>
+</div>
+
+<style lang="postcss">
+    .controls {
+        @apply bg-forge-prim border-forge-bound border flex flex-row;
+        position: absolute;
+        top: 0;
+        right: 0;
+        justify-content: flex-end;
+        z-index: 1;
+    }
+
+    .control-button {
+        @apply bg-forge-prim p-1 rounded-sm hover:bg-forge-acc m-1;
+        cursor: pointer;
+    }
+
+    .zoom-level {
+        display: inline-flex;
+        align-items: center;
+        padding: 0 8px;
+    }
+</style>