diff --git a/backend/src/app.py b/backend/src/app.py
index deebd8d..a309c2c 100644
--- a/backend/src/app.py
+++ b/backend/src/app.py
@@ -3,7 +3,7 @@ from typing import Any
 import dotenv
 from flask import Flask, Response, jsonify, request
 from flask_cors import CORS
-from flask_socketio import SocketIO, emit
+from flask_socketio import SocketIO, emit, join_room, leave_room
 
 from .connect import get_connection
 from .qrcode_gen import generate_qr
@@ -17,9 +17,10 @@ dotenv.load_dotenv()
 
 app = Flask(__name__)
 app.config["SECRET_KEY"] = "your_secret_key"
-socketio = SocketIO(app)
+socketio = SocketIO(app, cors_allowed_origins="*", path="/ws")
 CORS(app)
 
+
 db_conn = get_connection()
 state = State(app, socketio, db_conn.cursor())
 init_db(state.db)
@@ -54,6 +55,30 @@ def ws_broadcast(event: str, *, room_id: int | None = None, data: Any) -> None:
     emit(event, final, broadcast=True, namespace="/")
 
 
+@socketio.on("connect")
+def handle_connection():
+    print("somebody connected to socket.io", flush=True)
+
+
+@socketio.on("disconnect")
+def handle_disconnection():
+    print("somebody disconnected from socket.io", flush=True)
+
+
+@socketio.on("join_room")
+def on_join(data):
+    room = data["id"]
+    join_room(room)
+    print(f"somebody joined {room=}", flush=True)
+
+
+@socketio.on("leave_room")
+def on_leave(data):
+    room = data["id"]
+    leave_room(room)
+    print(f"somebody left {room=}", flush=True)
+
+
 @app.get("/api/join")
 def join():
     room_id = request.args.get("room")
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b3ecdec..fb2a61f 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,10 @@
 		"": {
 			"name": "frontend",
 			"version": "0.0.1",
+			"dependencies": {
+				"socket.io": "^4.8.1",
+				"socket.io-client": "^4.8.1"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^6.0.0",
 				"@sveltejs/kit": "^2.22.0",
@@ -817,6 +821,12 @@
 				"win32"
 			]
 		},
+		"node_modules/@socket.io/component-emitter": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+			"integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+			"license": "MIT"
+		},
 		"node_modules/@sveltejs/acorn-typescript": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
@@ -1193,6 +1203,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/cors": {
+			"version": "2.8.19",
+			"resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+			"integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -1200,6 +1219,28 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/node": {
+			"version": "24.1.0",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
+			"integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==",
+			"license": "MIT",
+			"dependencies": {
+				"undici-types": "~7.8.0"
+			}
+		},
+		"node_modules/accepts": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+			"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-types": "~2.1.34",
+				"negotiator": "0.6.3"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -1233,6 +1274,15 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/base64id": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
+			"integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==",
+			"license": "MIT",
+			"engines": {
+				"node": "^4.5.0 || >= 5.9"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -1279,6 +1329,19 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/cors": {
+			"version": "2.8.5",
+			"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+			"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+			"license": "MIT",
+			"dependencies": {
+				"object-assign": "^4",
+				"vary": "^1"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.4.1",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -1324,6 +1387,91 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/engine.io": {
+			"version": "6.6.4",
+			"resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz",
+			"integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/cors": "^2.8.12",
+				"@types/node": ">=10.0.0",
+				"accepts": "~1.3.4",
+				"base64id": "2.0.0",
+				"cookie": "~0.7.2",
+				"cors": "~2.8.5",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.17.1"
+			},
+			"engines": {
+				"node": ">=10.2.0"
+			}
+		},
+		"node_modules/engine.io-client": {
+			"version": "6.6.3",
+			"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+			"integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1",
+				"engine.io-parser": "~5.2.1",
+				"ws": "~8.17.1",
+				"xmlhttprequest-ssl": "~2.1.1"
+			}
+		},
+		"node_modules/engine.io-client/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/engine.io-parser": {
+			"version": "5.2.3",
+			"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+			"integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/engine.io/node_modules/cookie": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+			"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/engine.io/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/enhanced-resolve": {
 			"version": "5.18.2",
 			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
@@ -1720,6 +1868,27 @@
 				"@jridgewell/sourcemap-codec": "^1.5.0"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/minipass": {
 			"version": "7.1.2",
 			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
@@ -1783,7 +1952,6 @@
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/nanoid": {
@@ -1805,6 +1973,24 @@
 				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 			}
 		},
+		"node_modules/negotiator": {
+			"version": "0.6.3",
+			"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+			"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/object-assign": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+			"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -2057,6 +2243,130 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/socket.io": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/socket.io/-/socket.io-4.8.1.tgz",
+			"integrity": "sha512-oZ7iUCxph8WYRHHcjBEc9unw3adt5CmSNlppj/5Q4k2RIrhl8Z5yY2Xr4j9zj0+wzVZ0bxmYoGSzKJnRl6A4yg==",
+			"license": "MIT",
+			"dependencies": {
+				"accepts": "~1.3.4",
+				"base64id": "~2.0.0",
+				"cors": "~2.8.5",
+				"debug": "~4.3.2",
+				"engine.io": "~6.6.0",
+				"socket.io-adapter": "~2.5.2",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.2.0"
+			}
+		},
+		"node_modules/socket.io-adapter": {
+			"version": "2.5.5",
+			"resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz",
+			"integrity": "sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "~4.3.4",
+				"ws": "~8.17.1"
+			}
+		},
+		"node_modules/socket.io-adapter/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-client": {
+			"version": "4.8.1",
+			"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+			"integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.2",
+				"engine.io-client": "~6.6.1",
+				"socket.io-parser": "~4.2.4"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-client/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io-parser": {
+			"version": "4.2.4",
+			"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+			"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+			"license": "MIT",
+			"dependencies": {
+				"@socket.io/component-emitter": "~3.1.0",
+				"debug": "~4.3.1"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/socket.io-parser/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/socket.io/node_modules/debug": {
+			"version": "4.3.7",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+			"integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2193,6 +2503,21 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "7.8.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+			"integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+			"license": "MIT"
+		},
+		"node_modules/vary": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+			"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/vite": {
 			"version": "7.0.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.6.tgz",
@@ -2288,6 +2613,35 @@
 				}
 			}
 		},
+		"node_modules/ws": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+			"integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"bufferutil": "^4.0.1",
+				"utf-8-validate": ">=5.0.2"
+			},
+			"peerDependenciesMeta": {
+				"bufferutil": {
+					"optional": true
+				},
+				"utf-8-validate": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/xmlhttprequest-ssl": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+			"integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/yallist": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index cee9931..1ea43b9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,5 +26,9 @@
 		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"socket.io": "^4.8.1",
+		"socket.io-client": "^4.8.1"
 	}
 }
diff --git a/frontend/src/routes/zesty/wsio/+page.svelte b/frontend/src/routes/zesty/wsio/+page.svelte
new file mode 100644
index 0000000..32b44d5
--- /dev/null
+++ b/frontend/src/routes/zesty/wsio/+page.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { io } from "socket.io-client"
+    const socket = io("/", { path: "/ws" })
+    socket.on("connect", () => {
+        console.log("successfully connected to socket.io server")
+        socket.emit("join_room", { id: "gang" })
+    })
+</script>
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index eccff34..3548199 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,6 +10,11 @@ export default defineConfig({
                 target: "http://backend:5000",
                 changeOrigin: false,
                 secure: false
+            },
+            '/ws': {
+                target: "http://backend:5000",
+                changeOrigin: false,
+                secure: false
             }
         }
     }