diff --git a/package-lock.json b/package-lock.json
index 5433e67..7fa7358 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
 		"": {
 			"name": "z-reader",
 			"version": "0.0.1",
+			"dependencies": {
+				"panzoom": "^9.4.3"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^2.0.0",
 				"@sveltejs/kit": "^1.20.4",
@@ -919,6 +922,14 @@
 				"url": "https://github.com/sponsors/epoberezkin"
 			}
 		},
+		"node_modules/amator": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+			"integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+			"dependencies": {
+				"bezier-easing": "^2.0.3"
+			}
+		},
 		"node_modules/ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -995,6 +1006,11 @@
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
+		"node_modules/bezier-easing": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+			"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2169,6 +2185,11 @@
 			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
 			"dev": true
 		},
+		"node_modules/ngraph.events": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz",
+			"integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ=="
+		},
 		"node_modules/normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2234,6 +2255,16 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/panzoom": {
+			"version": "9.4.3",
+			"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
+			"integrity": "sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==",
+			"dependencies": {
+				"amator": "^1.1.0",
+				"ngraph.events": "^1.2.2",
+				"wheel": "^1.0.0"
+			}
+		},
 		"node_modules/parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3120,6 +3151,11 @@
 				}
 			}
 		},
+		"node_modules/wheel": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+			"integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
+		},
 		"node_modules/which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3687,6 +3723,14 @@
 				"uri-js": "^4.2.2"
 			}
 		},
+		"amator": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/amator/-/amator-1.1.0.tgz",
+			"integrity": "sha512-V5+aH8pe+Z3u/UG3L3pG3BaFQGXAyXHVQDroRwjPHdh08bcUEchAVsU1MCuJSCaU5o60wTK6KaE6te5memzgYw==",
+			"requires": {
+				"bezier-easing": "^2.0.3"
+			}
+		},
 		"ansi-regex": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3748,6 +3792,11 @@
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
+		"bezier-easing": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz",
+			"integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="
+		},
 		"binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -4623,6 +4672,11 @@
 			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
 			"dev": true
 		},
+		"ngraph.events": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/ngraph.events/-/ngraph.events-1.2.2.tgz",
+			"integrity": "sha512-JsUbEOzANskax+WSYiAPETemLWYXmixuPAlmZmhIbIj6FH/WDgEGCGnRwUQBK0GjOnVm8Ui+e5IJ+5VZ4e32eQ=="
+		},
 		"normalize-path": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4670,6 +4724,16 @@
 				"p-limit": "^3.0.2"
 			}
 		},
+		"panzoom": {
+			"version": "9.4.3",
+			"resolved": "https://registry.npmjs.org/panzoom/-/panzoom-9.4.3.tgz",
+			"integrity": "sha512-xaxCpElcRbQsUtIdwlrZA90P90+BHip4Vda2BC8MEb4tkI05PmR6cKECdqUCZ85ZvBHjpI9htJrZBxV5Gp/q/w==",
+			"requires": {
+				"amator": "^1.1.0",
+				"ngraph.events": "^1.2.2",
+				"wheel": "^1.0.0"
+			}
+		},
 		"parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5193,6 +5257,11 @@
 			"dev": true,
 			"requires": {}
 		},
+		"wheel": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/wheel/-/wheel-1.0.0.tgz",
+			"integrity": "sha512-XiCMHibOiqalCQ+BaNSwRoZ9FDTAvOsXxGHXChBugewDj7HC8VBIER71dEOiRH1fSdLbRCQzngKTSiZ06ZQzeA=="
+		},
 		"which": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 454f024..03c44fa 100644
--- a/package.json
+++ b/package.json
@@ -27,5 +27,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"panzoom": "^9.4.3"
+	}
 }
diff --git a/src/lib/assets/000a.jpg b/src/lib/assets/000a.jpg
new file mode 100644
index 0000000..5f52b73
Binary files /dev/null and b/src/lib/assets/000a.jpg differ
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 856f2b6..0000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5982b0a..91ea0d5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +1,40 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+	import img from '$lib/assets/000a.jpg';
+	import Button from '$lib/components/Button.svelte';
+	import panzoom from 'panzoom';
+	import type { PanZoom } from 'panzoom';
+	import { writable } from 'svelte/store';
+
+	export const pz = writable<PanZoom | undefined>(undefined);
+
+	function initPanzoom(node: any) {
+		pz.set(
+			panzoom(node, {
+				bounds: false,
+				maxZoom: 10,
+				minZoom: 0.1,
+				zoomDoubleClickSpeed: 1,
+				enableTextSelection: true,
+				beforeMouseDown: (e) => {
+					const nodeName = (e.target as HTMLElement).nodeName;
+					return nodeName === 'P';
+				},
+				beforeWheel: (e) => e.altKey,
+				onTouch: (e) => e.touches.length > 1
+			})
+		);
+	}
+
+	function test() {
+		$pz?.moveTo(0, 0);
+	}
+</script>
+
+<div>
+	<Button variant="primary" on:click={test}>Click</Button>
+
+	<div id="container" use:initPanzoom>
+		<p draggable="false">my selectable tex</p>
+		<img draggable="false" src={img} alt="a" />
+	</div>
+</div>