diff --git a/bun.lockb b/bun.lockb
index 98a943b..d37f33e 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/canvas/CanvasRenderer.vue b/components/canvas/CanvasRenderer.vue
index 3f1f5c8..a19981d 100644
--- a/components/canvas/CanvasRenderer.vue
+++ b/components/canvas/CanvasRenderer.vue
@@ -234,12 +234,23 @@ dark:border-dark-cyan
 dark:border-dark-purple
 
 */
+
+const dragHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
+    dispX.value += x / zoom.value;
+    dispY.value += y / zoom.value;
+}
+const pinchHandler = ({ offset: [z] }: { offset: number[] }) => { 
+    zoom.value = clamp(z, minZoom.value, 3);
+}
+const wheelHandler = ({ delta: [x, y] }: { delta: number[] }) => { 
+    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
+}
 </script>
 
 <template>
     <Suspense>
-        <template #default>
-            <div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart="onTouchStart"
+        <template #default> <!-- @pointerdown="onPointerDown" @touchstart="onTouchStart" -->
+            <div id="canvas" v-drag="dragHandler" v-pinch="pinchHandler" v-wheel="wheelHandler"
                 @dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
                 :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
                 <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ebef86d..3423692 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,7 +5,7 @@ export default defineNuxtConfig({
     "@nuxtjs/color-mode",
     "nuxt-security",
     "@nuxtjs/tailwindcss",
-    "@vueuse/nuxt"
+    "@vueuse/nuxt",
   ],
   runtimeConfig: {
     dbFile: 'db.sqlite',
diff --git a/package.json b/package.json
index 90ad7e6..b53cd4b 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@types/bun": "^1.1.8",
     "@types/diff": "^5.2.2",
+    "@vueuse/gesture": "^2.0.0",
     "@vueuse/nuxt": "^11.0.3",
     "hast-util-to-html": "^9.0.2",
     "nuxt": "^3.13.1",
diff --git a/plugins/vueuse.gesture.ts b/plugins/vueuse.gesture.ts
new file mode 100644
index 0000000..07d3788
--- /dev/null
+++ b/plugins/vueuse.gesture.ts
@@ -0,0 +1,5 @@
+import { GesturePlugin } from '@vueuse/gesture'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(GesturePlugin)
+})
\ No newline at end of file