diff --git a/README.md b/README.md
index 6e089df..fc2c7aa 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,8 @@ Modular data conversion tools (for developers)
 
 ## TODO:
 
-- [ ] zooming
+- [X] zooming
+- [ ] fix zooming font size
 - [ ] controls explanation
 - [ ] typed values
 - [ ] implicit type conversion
diff --git a/controllers/input-controller.js b/controllers/input-controller.js
index 2504606..6ca094b 100644
--- a/controllers/input-controller.js
+++ b/controllers/input-controller.js
@@ -57,6 +57,8 @@ document.addEventListener("mousemove", (e) => {
 	Mouse.updatePosition(e.clientX, e.clientY);
 
 	let delta = Mouse.getDelta();
+	delta.x *= 1/Camera.zoom;
+	delta.y *= 1/Camera.zoom;
 
 	if (draggingBox != null) {
 		draggingBox.x += delta.x;
@@ -66,18 +68,24 @@ document.addEventListener("mousemove", (e) => {
 	}
 
 	if (draggingCamera) {
-		Camera.x -= delta.x;
-		Camera.y -= delta.y;
-
-		Box.updateAllPositions();
-
-		document.getElementById("canvas").style.backgroundPosition = (-Camera.x) + "px " + (-Camera.y) + "px";
-
+		Camera.movePosition(-delta.x, -delta.y);
 		e.preventDefault();
-
 	}
 });
 
+document.addEventListener("wheel", (e) => {
+	let lastZoom = Camera.zoom;
+	Camera.zoom = Math.min(1, Math.max(0.25, Camera.zoom - e.deltaY / 2000));
+
+	document.body.style.setProperty("--zoom", Camera.zoom);
+
+	Camera.movePosition(
+		(Mouse.position.x / lastZoom - Mouse.position.x / Camera.zoom),
+		(Mouse.position.y / lastZoom - Mouse.position.y / Camera.zoom),
+	);
+	
+});
+
 function isPointInRect(px, py, rx, ry, rw, rh) {
 	return px >= rx && px <= rx + rw && py >= ry && py <= ry + rh;
 }
\ No newline at end of file
diff --git a/elements/Camera.js b/elements/Camera.js
index f730c10..b27ca12 100644
--- a/elements/Camera.js
+++ b/elements/Camera.js
@@ -1,4 +1,17 @@
 class Camera {
 	static x = 0;
 	static y = 0;
+	static zoom = 1;
+
+	static setPosition(x, y) {
+		this.x = x;
+		this.y = y;
+		Box.updateAllPositions();
+
+		document.getElementById("canvas").style.backgroundPosition = (-Camera.x) + "px " + (-Camera.y) + "px";
+	}
+
+	static movePosition(x, y) {
+		this.setPosition(this.x + x, this.y + y);
+	}
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 9edcea0..30e1377 100644
--- a/style.css
+++ b/style.css
@@ -27,6 +27,7 @@ body {
 	flex-direction: column;
 	align-items: stretch;
 	justify-content: flex-start;
+	--zoom: 1;
 }
 
 #canvas {
@@ -38,6 +39,7 @@ body {
 	background-image: url("icons/background.svg");
 	background-size: 80px 80px;
 	z-index: 0;
+	zoom: var(--zoom);
 }
 
 #playground {
@@ -48,6 +50,8 @@ body {
 	width: 100%;
 	height: 100%;
 	overflow: none;
+	zoom: var(--zoom);
+	font-size: calc(1em * var(--zoom));
 }
 
 
@@ -110,6 +114,7 @@ input, textarea, select, button {
 	background-color: #25252577;
 	padding: 5px;
 	border: 1px solid #111;
+	font-size: inherit;
 }
 
 button:hover, select:hover {