diff --git a/package-lock.json b/package-lock.json
index fea1fcb..9a6d8b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,12 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@beyonk/svelte-mapbox": "^8.1.4",
+				"html5-qrcode": "^2.3.0",
 				"mapbox-gl": "^2.10.0",
+				"qr-scanner": "^1.4.1",
+				"qrcode-scanner-svelte": "^1.0.0",
+				"scan-qr-svelte": "^0.0.3",
+				"svelte-qr-scanner": "^1.1.0",
 				"svelte-routing": "^1.6.0",
 				"yallist": "^4.0.0"
 			},
@@ -204,6 +209,11 @@
 			"integrity": "sha512-HzNRZtp4eepNitP+BD6k2L6DROIDG4Q0fm4x+dwfsr6LGmROENnok75VGw40628xf+iR24WeMFcHuuBDUAzzsQ==",
 			"dev": true
 		},
+		"node_modules/@types/offscreencanvas": {
+			"version": "2019.7.0",
+			"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz",
+			"integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg=="
+		},
 		"node_modules/@types/pug": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -303,6 +313,30 @@
 				"postcss": "^8.1.0"
 			}
 		},
+		"node_modules/babel-polyfill": {
+			"version": "6.26.0",
+			"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+			"integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+			"dependencies": {
+				"babel-runtime": "^6.26.0",
+				"core-js": "^2.5.0",
+				"regenerator-runtime": "^0.10.5"
+			}
+		},
+		"node_modules/babel-runtime": {
+			"version": "6.26.0",
+			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+			"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+			"dependencies": {
+				"core-js": "^2.4.0",
+				"regenerator-runtime": "^0.11.0"
+			}
+		},
+		"node_modules/babel-runtime/node_modules/regenerator-runtime": {
+			"version": "0.11.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+			"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+		},
 		"node_modules/balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -441,6 +475,13 @@
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"node_modules/core-js": {
+			"version": "2.6.12",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+			"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+			"deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+			"hasInstallScript": true
+		},
 		"node_modules/csscolorparser": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
@@ -992,6 +1033,24 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/fsm-as-promised": {
+			"version": "0.13.2",
+			"resolved": "https://registry.npmjs.org/fsm-as-promised/-/fsm-as-promised-0.13.2.tgz",
+			"integrity": "sha512-1tjwtVOEzqygbG3vHbfaQ4XJql5H0Zv2hMm7Mx1DndCeyTYjHNwgklsrC8fTHUslB0eHMSg9HBMV5QZodJpAcg==",
+			"dependencies": {
+				"es6-promise": "^4.0.2",
+				"lodash": "^4.16.2",
+				"stampit": "^3.0.1"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/fsm-as-promised/node_modules/es6-promise": {
+			"version": "4.2.8",
+			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+			"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+		},
 		"node_modules/function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -1074,6 +1133,11 @@
 				"node": ">= 0.4.0"
 			}
 		},
+		"node_modules/html5-qrcode": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.0.tgz",
+			"integrity": "sha512-uMUxak0YHgInAwdQAttkuJkGq3qvXgaQEq39CubSr2Xsrk6QDwx8lGKprqRLh4JOw6Rd+x5flQ2oHJjhDRvwNQ=="
+		},
 		"node_modules/ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -1115,6 +1179,17 @@
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 			"dev": true
 		},
+		"node_modules/instascan": {
+			"version": "1.0.0",
+			"resolved": "git+ssh://git@github.com/schmich/instascan.git#b0f9519f2dd2a6661e67066d6ed678e621dd5ce2",
+			"license": "MIT",
+			"dependencies": {
+				"babel-polyfill": "^6.9.1",
+				"fsm-as-promised": "^0.13.0",
+				"visibilityjs": "^1.2.3",
+				"webrtc-adapter": "^1.4.0"
+			}
+		},
 		"node_modules/is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1169,6 +1244,11 @@
 				"node": ">=0.12.0"
 			}
 		},
+		"node_modules/jsqr": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+			"integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+		},
 		"node_modules/kdbush": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
@@ -1192,6 +1272,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
 		"node_modules/lower-case": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -1575,6 +1660,22 @@
 			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
 			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
 		},
+		"node_modules/qr-scanner": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/qr-scanner/-/qr-scanner-1.4.1.tgz",
+			"integrity": "sha512-xiR90NONHTfTwaFgW/ihlqjGMIZg6ExHDOvGQRba1TvV+WVw7GoDArIOt21e+RO+9WiO4AJJq+mwc5f4BnGH3w==",
+			"dependencies": {
+				"@types/offscreencanvas": "^2019.6.4"
+			}
+		},
+		"node_modules/qrcode-scanner-svelte": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/qrcode-scanner-svelte/-/qrcode-scanner-svelte-1.0.0.tgz",
+			"integrity": "sha512-teI93sQETcRUxDbeoLfn25aEan78v/eVewTB5+SbGAOH6cRk/Wasqwlvr+5g0ca9PeNzG4f3I4LUZlKG7OEouA==",
+			"dependencies": {
+				"jsqr": "^1.4.0"
+			}
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1633,6 +1734,11 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.10.5",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+			"integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+		},
 		"node_modules/resolve": {
 			"version": "1.22.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -1752,6 +1858,32 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/scan-qr-svelte": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/scan-qr-svelte/-/scan-qr-svelte-0.0.3.tgz",
+			"integrity": "sha512-S1JVi24g6wlkIoPqWXsFkdMbOPuEZfNtAoIA8ZAsACtlkL8I+foCL5gksxo4gBprtMjvlT1NCrnas90QhadkNg==",
+			"dependencies": {
+				"svelte2tsx": "^0.5.6"
+			}
+		},
+		"node_modules/scan-qr-svelte/node_modules/svelte2tsx": {
+			"version": "0.5.20",
+			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.5.20.tgz",
+			"integrity": "sha512-yNHmN/uoAnJ7d1XqVohiNA6TMFOxibHyEddUAHVt1PiLXtbwAJF3WaGYlg8QbOdoXzOVsVNCAlqRUIdULUm+OA==",
+			"dependencies": {
+				"dedent-js": "^1.0.1",
+				"pascal-case": "^3.1.1"
+			},
+			"peerDependencies": {
+				"svelte": "^3.24",
+				"typescript": "^4.1.2"
+			}
+		},
+		"node_modules/sdp": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/sdp/-/sdp-1.5.4.tgz",
+			"integrity": "sha512-9x0+fpJHW2bbqtIktmL+H9m+BswgurPVPhWrur4cCZPDWDSsdGYvRBaKhDXlnNCD1b/Xi8cOTG2u703CTQuwgg=="
+		},
 		"node_modules/sorcery": {
 			"version": "0.10.0",
 			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -1782,6 +1914,11 @@
 			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
 			"dev": true
 		},
+		"node_modules/stampit": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/stampit/-/stampit-3.2.1.tgz",
+			"integrity": "sha512-2QXR/GWaz3qgLUvyTjIyvWLdT9iGC8rjZdyAt2IduajSCJUusehWJ1QAKmXdXWhJSofYJyCNZHCmp5yETiV4CA=="
+		},
 		"node_modules/strip-indent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -1909,6 +2046,14 @@
 				"sourcemap-codec": "^1.4.8"
 			}
 		},
+		"node_modules/svelte-qr-scanner": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-qr-scanner/-/svelte-qr-scanner-1.1.0.tgz",
+			"integrity": "sha512-8ybSBhGxceNpfCZYgEcoDsX8QVd59X+GhTw7+gUNRYE9qTXPqb7zFMRElLLozd3NTTSf6r3RCG87YKlN0na0DQ==",
+			"dependencies": {
+				"instascan": "git+https://github.com/schmich/instascan.git"
+			}
+		},
 		"node_modules/svelte-routing": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.6.0.tgz",
@@ -2090,6 +2235,11 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/visibilityjs": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.8.tgz",
+			"integrity": "sha512-Y+aL3OUX88b+/VSmkmC2ApuLbf0grzbNLpCfIDSw3BzTU6PqcPsdgIOaw8b+eZoy+DdQqnVN3y/Evow9vQq9Ig=="
+		},
 		"node_modules/vite": {
 			"version": "3.1.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.6.tgz",
@@ -2141,6 +2291,17 @@
 				"pbf": "^3.2.1"
 			}
 		},
+		"node_modules/webrtc-adapter": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-1.4.0.tgz",
+			"integrity": "sha512-QY3cFbkvUW9kSim9XzzKr7jl1zdfxh7ii9j67kZz+Jc/HsKOXcC+mEmovbTID3QthyZCiYsWz2Qs6aUwxEDa/w==",
+			"dependencies": {
+				"sdp": "^1.0.0"
+			},
+			"engines": {
+				"npm": "~3.0.0"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -2299,6 +2460,11 @@
 			"integrity": "sha512-HzNRZtp4eepNitP+BD6k2L6DROIDG4Q0fm4x+dwfsr6LGmROENnok75VGw40628xf+iR24WeMFcHuuBDUAzzsQ==",
 			"dev": true
 		},
+		"@types/offscreencanvas": {
+			"version": "2019.7.0",
+			"resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.0.tgz",
+			"integrity": "sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg=="
+		},
 		"@types/pug": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -2367,6 +2533,32 @@
 				"postcss-value-parser": "^4.2.0"
 			}
 		},
+		"babel-polyfill": {
+			"version": "6.26.0",
+			"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+			"integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+			"requires": {
+				"babel-runtime": "^6.26.0",
+				"core-js": "^2.5.0",
+				"regenerator-runtime": "^0.10.5"
+			}
+		},
+		"babel-runtime": {
+			"version": "6.26.0",
+			"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+			"integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+			"requires": {
+				"core-js": "^2.4.0",
+				"regenerator-runtime": "^0.11.0"
+			},
+			"dependencies": {
+				"regenerator-runtime": {
+					"version": "0.11.1",
+					"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+					"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+				}
+			}
+		},
 		"balanced-match": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2456,6 +2648,11 @@
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"core-js": {
+			"version": "2.6.12",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+			"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+		},
 		"csscolorparser": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
@@ -2771,6 +2968,23 @@
 			"dev": true,
 			"optional": true
 		},
+		"fsm-as-promised": {
+			"version": "0.13.2",
+			"resolved": "https://registry.npmjs.org/fsm-as-promised/-/fsm-as-promised-0.13.2.tgz",
+			"integrity": "sha512-1tjwtVOEzqygbG3vHbfaQ4XJql5H0Zv2hMm7Mx1DndCeyTYjHNwgklsrC8fTHUslB0eHMSg9HBMV5QZodJpAcg==",
+			"requires": {
+				"es6-promise": "^4.0.2",
+				"lodash": "^4.16.2",
+				"stampit": "^3.0.1"
+			},
+			"dependencies": {
+				"es6-promise": {
+					"version": "4.2.8",
+					"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+					"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+				}
+			}
+		},
 		"function-bind": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@@ -2835,6 +3049,11 @@
 				"function-bind": "^1.1.1"
 			}
 		},
+		"html5-qrcode": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/html5-qrcode/-/html5-qrcode-2.3.0.tgz",
+			"integrity": "sha512-uMUxak0YHgInAwdQAttkuJkGq3qvXgaQEq39CubSr2Xsrk6QDwx8lGKprqRLh4JOw6Rd+x5flQ2oHJjhDRvwNQ=="
+		},
 		"ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -2862,6 +3081,16 @@
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 			"dev": true
 		},
+		"instascan": {
+			"version": "git+ssh://git@github.com/schmich/instascan.git#b0f9519f2dd2a6661e67066d6ed678e621dd5ce2",
+			"from": "instascan@git+https://github.com/schmich/instascan.git",
+			"requires": {
+				"babel-polyfill": "^6.9.1",
+				"fsm-as-promised": "^0.13.0",
+				"visibilityjs": "^1.2.3",
+				"webrtc-adapter": "^1.4.0"
+			}
+		},
 		"is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2901,6 +3130,11 @@
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 			"dev": true
 		},
+		"jsqr": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+			"integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+		},
 		"kdbush": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
@@ -2918,6 +3152,11 @@
 			"integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
 			"dev": true
 		},
+		"lodash": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+		},
 		"lower-case": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -3192,6 +3431,22 @@
 			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
 			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
 		},
+		"qr-scanner": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/qr-scanner/-/qr-scanner-1.4.1.tgz",
+			"integrity": "sha512-xiR90NONHTfTwaFgW/ihlqjGMIZg6ExHDOvGQRba1TvV+WVw7GoDArIOt21e+RO+9WiO4AJJq+mwc5f4BnGH3w==",
+			"requires": {
+				"@types/offscreencanvas": "^2019.6.4"
+			}
+		},
+		"qrcode-scanner-svelte": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/qrcode-scanner-svelte/-/qrcode-scanner-svelte-1.0.0.tgz",
+			"integrity": "sha512-teI93sQETcRUxDbeoLfn25aEan78v/eVewTB5+SbGAOH6cRk/Wasqwlvr+5g0ca9PeNzG4f3I4LUZlKG7OEouA==",
+			"requires": {
+				"jsqr": "^1.4.0"
+			}
+		},
 		"queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3227,6 +3482,11 @@
 				"picomatch": "^2.2.1"
 			}
 		},
+		"regenerator-runtime": {
+			"version": "0.10.5",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+			"integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+		},
 		"resolve": {
 			"version": "1.22.1",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -3307,6 +3567,30 @@
 				"source-map-js": ">=0.6.2 <2.0.0"
 			}
 		},
+		"scan-qr-svelte": {
+			"version": "0.0.3",
+			"resolved": "https://registry.npmjs.org/scan-qr-svelte/-/scan-qr-svelte-0.0.3.tgz",
+			"integrity": "sha512-S1JVi24g6wlkIoPqWXsFkdMbOPuEZfNtAoIA8ZAsACtlkL8I+foCL5gksxo4gBprtMjvlT1NCrnas90QhadkNg==",
+			"requires": {
+				"svelte2tsx": "^0.5.6"
+			},
+			"dependencies": {
+				"svelte2tsx": {
+					"version": "0.5.20",
+					"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.5.20.tgz",
+					"integrity": "sha512-yNHmN/uoAnJ7d1XqVohiNA6TMFOxibHyEddUAHVt1PiLXtbwAJF3WaGYlg8QbOdoXzOVsVNCAlqRUIdULUm+OA==",
+					"requires": {
+						"dedent-js": "^1.0.1",
+						"pascal-case": "^3.1.1"
+					}
+				}
+			}
+		},
+		"sdp": {
+			"version": "1.5.4",
+			"resolved": "https://registry.npmjs.org/sdp/-/sdp-1.5.4.tgz",
+			"integrity": "sha512-9x0+fpJHW2bbqtIktmL+H9m+BswgurPVPhWrur4cCZPDWDSsdGYvRBaKhDXlnNCD1b/Xi8cOTG2u703CTQuwgg=="
+		},
 		"sorcery": {
 			"version": "0.10.0",
 			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -3331,6 +3615,11 @@
 			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
 			"dev": true
 		},
+		"stampit": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/stampit/-/stampit-3.2.1.tgz",
+			"integrity": "sha512-2QXR/GWaz3qgLUvyTjIyvWLdT9iGC8rjZdyAt2IduajSCJUusehWJ1QAKmXdXWhJSofYJyCNZHCmp5yETiV4CA=="
+		},
 		"strip-indent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -3391,6 +3680,14 @@
 				}
 			}
 		},
+		"svelte-qr-scanner": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-qr-scanner/-/svelte-qr-scanner-1.1.0.tgz",
+			"integrity": "sha512-8ybSBhGxceNpfCZYgEcoDsX8QVd59X+GhTw7+gUNRYE9qTXPqb7zFMRElLLozd3NTTSf6r3RCG87YKlN0na0DQ==",
+			"requires": {
+				"instascan": "git+https://github.com/schmich/instascan.git"
+			}
+		},
 		"svelte-routing": {
 			"version": "1.6.0",
 			"resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.6.0.tgz",
@@ -3506,6 +3803,11 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"visibilityjs": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/visibilityjs/-/visibilityjs-1.2.8.tgz",
+			"integrity": "sha512-Y+aL3OUX88b+/VSmkmC2ApuLbf0grzbNLpCfIDSw3BzTU6PqcPsdgIOaw8b+eZoy+DdQqnVN3y/Evow9vQq9Ig=="
+		},
 		"vite": {
 			"version": "3.1.6",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.1.6.tgz",
@@ -3529,6 +3831,14 @@
 				"pbf": "^3.2.1"
 			}
 		},
+		"webrtc-adapter": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-1.4.0.tgz",
+			"integrity": "sha512-QY3cFbkvUW9kSim9XzzKr7jl1zdfxh7ii9j67kZz+Jc/HsKOXcC+mEmovbTID3QthyZCiYsWz2Qs6aUwxEDa/w==",
+			"requires": {
+				"sdp": "^1.0.0"
+			}
+		},
 		"wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 222e1c9..0bd3dad 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,12 @@
 	},
 	"dependencies": {
 		"@beyonk/svelte-mapbox": "^8.1.4",
+		"html5-qrcode": "^2.3.0",
 		"mapbox-gl": "^2.10.0",
+		"qr-scanner": "^1.4.1",
+		"qrcode-scanner-svelte": "^1.0.0",
+		"scan-qr-svelte": "^0.0.3",
+		"svelte-qr-scanner": "^1.1.0",
 		"svelte-routing": "^1.6.0",
 		"yallist": "^4.0.0"
 	}
diff --git a/src/App.svelte b/src/App.svelte
index 2147c34..51383c1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,4 +1,5 @@
 <script>
+	import QrReader from './routes/qrReader.svelte'
 	import { Router, link, Route } from 'svelte-routing'
 	import './main.scss'
 
@@ -18,6 +19,8 @@
 		<Route path="/" component={Index} />
 		<Route path="/error" component={Error} />
 
+		<Route path="/scaner" component={QrReader} />
+
 		<Route path="/:gameurl" let:params>
 			<Game gameurl={params.gameurl} />
 		</Route>
diff --git a/src/lib/Components/QR/InfoBar.svelte b/src/lib/Components/QR/InfoBar.svelte
new file mode 100644
index 0000000..60a687e
--- /dev/null
+++ b/src/lib/Components/QR/InfoBar.svelte
@@ -0,0 +1,16 @@
+<script>
+	let className = ''
+	export { className as class }
+</script>
+
+<div class={'h-[80px] w-[450px] max-w-[90%] p-6 bg-[#282828] flex flex-wrap flex-col m-3 gap-[5px] rounded-[30px] ' + className}>
+	<button on:click class="h-full w-auto">
+		<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<rect width="24.2192" height="6.08178" rx="3.04089" transform="matrix(0.716773 -0.697307 -0.716773 -0.697307 4.35938 21.1992)" fill="#4263EB" />
+			<rect width="24.3271" height="6.0548" rx="3.0274" transform="matrix(-0.716773 -0.697307 -0.716773 0.697307 21.791 29.7002)" fill="#4263EB" />
+		</svg>
+	</button>
+	<span class="text-[#8A8A8A] flex text-center items-center h-full w-[85%]">
+		<slot />
+	</span>
+</div>
diff --git a/src/lib/Components/QR/QRinput.svelte b/src/lib/Components/QR/QRinput.svelte
new file mode 100644
index 0000000..61d62ca
--- /dev/null
+++ b/src/lib/Components/QR/QRinput.svelte
@@ -0,0 +1,35 @@
+<script>
+</script>
+
+<div class="w-full h-full flex relative overflow-hidden">
+	<div class="h-full w-full absolute flex justify-center gap-8 flex-wrap flex-col items-center bg-[#3A3A3A] p-[12.5%]">
+		<div class="h-[40vh] w-[40vh] max-w-full rounded-[20px] bg-white flex justify-center items-center">
+			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+				<mask id="mask0_1505_2457" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
+					<path fill-rule="evenodd" clip-rule="evenodd" d="M2.00049 2H21.9601V21.9498H2.00049V2Z" fill="white" />
+				</mask>
+				<g mask="url(#mask0_1505_2457)">
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						d="M7.65049 3.5C5.12949 3.5 3.50049 5.227 3.50049 7.899V16.051C3.50049 18.724 5.12949 20.45 7.65049 20.45H16.3005C18.8275 20.45 20.4605 18.724 20.4605 16.051V7.899C20.4605 5.227 18.8275 3.5 16.3005 3.5H7.65049ZM16.3005 21.95H7.65049C4.27049 21.95 2.00049 19.579 2.00049 16.051V7.899C2.00049 4.371 4.27049 2 7.65049 2H16.3005C19.6855 2 21.9605 4.371 21.9605 7.899V16.051C21.9605 19.579 19.6855 21.95 16.3005 21.95Z"
+						fill="#61646B"
+					/>
+				</g>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M5.28126 17.1799C5.09526 17.1799 4.91026 17.1119 4.76526 16.9739C4.46426 16.6899 4.45226 16.2139 4.73726 15.9149L6.26526 14.3019C7.07426 13.4429 8.43926 13.4009 9.30226 14.2109L10.2603 15.1829C10.5273 15.4529 10.9613 15.4579 11.2293 15.1939C11.3303 15.0749 13.5083 12.4299 13.5083 12.4299C13.9223 11.9279 14.5063 11.6179 15.1553 11.5539C15.8053 11.4969 16.4363 11.6859 16.9393 12.0989C16.9823 12.1339 17.0213 12.1679 19.2173 14.4229C19.5063 14.7189 19.5013 15.1939 19.2043 15.4829C18.9083 15.7739 18.4323 15.7649 18.1433 15.4689C18.1433 15.4689 16.0943 13.3659 15.9483 13.2239C15.7933 13.0969 15.5443 13.0229 15.2993 13.0469C15.0503 13.0719 14.8263 13.1909 14.6673 13.3839C12.3433 16.2029 12.3153 16.2299 12.2773 16.2669C11.4193 17.1089 10.0343 17.0949 9.19126 16.2349C9.19126 16.2349 8.26126 15.2909 8.24526 15.2719C8.01426 15.0579 7.60226 15.0719 7.35526 15.3329L5.82526 16.9459C5.67726 17.1019 5.47926 17.1799 5.28126 17.1799Z"
+					fill="#61646B"
+				/>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M8.55769 8.12891C8.00469 8.12891 7.55469 8.57891 7.55469 9.13291C7.55469 9.68691 8.00469 10.1379 8.55869 10.1379C9.11269 10.1379 9.56369 9.68691 9.56369 9.13291C9.56369 8.57991 9.11269 8.12991 8.55769 8.12891ZM8.55869 11.6379C7.17769 11.6379 6.05469 10.5139 6.05469 9.13291C6.05469 7.75191 7.17769 6.62891 8.55869 6.62891C9.94069 6.62991 11.0637 7.75391 11.0637 9.13291C11.0637 10.5139 9.93969 11.6379 8.55869 11.6379Z"
+					fill="#61646B"
+				/>
+			</svg>
+		</div>
+		<input type="text" placeholder="The code" class="block p-3 border rounded-[15px] w-full" />
+	</div>
+</div>
diff --git a/src/lib/Components/QR/QRscanner.svelte b/src/lib/Components/QR/QRscanner.svelte
new file mode 100644
index 0000000..4125118
--- /dev/null
+++ b/src/lib/Components/QR/QRscanner.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { Html5Qrcode } from 'html5-qrcode'
+	import { createEventDispatcher, onMount } from 'svelte'
+	const dispatch = createEventDispatcher()
+
+	onMount(() => {
+		const height = document.getElementById('reader').offsetHeight
+		const width = document.getElementById('reader').offsetWidth
+
+		const html5QrCode = new Html5Qrcode('reader')
+		const config = {
+			fps: 10,
+			qrbox: { width: 300, height: 700 },
+			height: window.innerHeight,
+			width: window.innerWidth,
+			aspectRatio: width / height,
+		}
+		// @ts-ignore
+		html5QrCode.start({ facingMode: 'environment' }, config, (text, result) => {
+			html5QrCode.stop()
+			dispatch('scan', {
+				text,
+				result,
+			})
+		})
+	})
+	let className = ''
+	export { className as class }
+</script>
+
+<div class={'w-full h-full flex relative overflow-hidden ' + className}>
+	<div id="reader" class="w-full h-full flex justify-center items-center overflow-hidden" />
+	<div class="h-full w-full absolute">
+		<slot />
+	</div>
+</div>
+
+<style>
+</style>
diff --git a/src/lib/Components/QR/ScanFrame.svelte b/src/lib/Components/QR/ScanFrame.svelte
new file mode 100644
index 0000000..eb52860
--- /dev/null
+++ b/src/lib/Components/QR/ScanFrame.svelte
@@ -0,0 +1,17 @@
+<script>
+</script>
+
+<div class="absolute overflow-hidden w-[75%] h-1/2 z-20">
+	<svg class="absolute top-0 left-0" width="100" height="100" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M5 120C5 120 5.00003 77.9998 5 60C4.99994 27.9998 31 4.99984 60 5C81.5 5.00012 120 5 120 5" stroke="#4263EB" stroke-width="10" stroke-linecap="round" />
+	</svg>
+	<svg class="absolute top-0 right-0" width="100" height="100" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M120 120C120 120 120 77.9998 120 60C120 27.9998 94 4.99984 65 5C43.5 5.00012 5 5 5 5" stroke="#4263EB" stroke-width="10" stroke-linecap="round" />
+	</svg>
+	<svg class="absolute bottom-0 left-0" width="100" height="100" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M5 5C5 5 5.00003 47.0002 5 65C4.99994 97.0002 31 120 60 120C81.5 120 120 120 120 120" stroke="#4263EB" stroke-width="10" stroke-linecap="round" />
+	</svg>
+	<svg class="absolute bottom-0 right-0" width="100" height="100" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path d="M120 5C120 5 120 47.0002 120 65C120 97.0002 94 120 65 120C43.5 120 5 120 5 120" stroke="#4263EB" stroke-width="10" stroke-linecap="round" />
+	</svg>
+</div>
diff --git a/src/lib/Components/QR/SwitchBar.svelte b/src/lib/Components/QR/SwitchBar.svelte
new file mode 100644
index 0000000..f81dcdf
--- /dev/null
+++ b/src/lib/Components/QR/SwitchBar.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	let className = ''
+	export { className as class }
+	const dispatch = createEventDispatcher()
+
+	export let switched = 'scan'
+	$: dispatch('switch', switched)
+</script>
+
+{#if switched === 'scan'}
+	<div class={'h-[70px] w-[340px] max-w-full bg-[#282828] p-[8px] flex flex-wrap flex-col gap-[8px] rounded-[30px] ' + className}>
+		<button class="rounded-[20px] bg-[#4263EB] text-white h-full"> Scan QR </button>
+		<button on:click={() => (switched = 'input')} class="rounded-[20px] bg-[#282828] text-[#8A8A8A]  h-full"> Type in code </button>
+	</div>
+{:else if switched === 'input'}
+	<div class={'h-[70px] w-[340px] max-w-full bg-[#282828] p-[8px] flex flex-wrap flex-col gap-[8px] rounded-[30px] ' + className}>
+		<button on:click={() => (switched = 'scan')} class="rounded-[20px] bg-[#282828] text-[#8A8A8A] h-full"> Scan QR </button>
+		<button class="rounded-[20px] bg-[#4263EB] text-white h-full"> Type in code </button>
+	</div>
+{/if}
diff --git a/src/routes/qrReader.svelte b/src/routes/qrReader.svelte
new file mode 100644
index 0000000..c71becd
--- /dev/null
+++ b/src/routes/qrReader.svelte
@@ -0,0 +1,30 @@
+<script>
+	import ScanFrame from '../lib/Components/QR/ScanFrame.svelte'
+	import InfoBar from '../lib/Components/QR/InfoBar.svelte'
+	import QRscanner from '../lib/Components/QR/QRscanner.svelte'
+	import SwitchBar from '../lib/Components/QR/SwitchBar.svelte'
+	import QRinput from '../lib/Components/QR/QRinput.svelte'
+	import { navigate } from 'svelte-routing'
+
+	let switched = 'scan'
+</script>
+
+{#if switched === 'scan'}
+	<InfoBar class="mt-[40px] top-0 absolute z-10" on:click={() => navigate(-1)}>Scan our QR code or type in code to load the experience</InfoBar>
+	<QRscanner on:scan={(e) => console.log(e.detail)}>
+		<div class="h-full w-full absolute flex justify-center gap-4 flex-wrap flex-row items-center">
+			<ScanFrame />
+		</div>
+	</QRscanner>
+{:else if switched === 'input'}
+	<InfoBar class="mt-[40px] top-0 absolute z-10" on:click={() => navigate(-1)}>Type code or type in code to load the experience</InfoBar>
+	<QRinput />
+{/if}
+
+<SwitchBar {switched} on:switch={(e) => (switched = e.detail)} class="mb-[30px] absolute bottom-0 z-10" />
+
+<style>
+	:global(#qr-shaded-region) {
+		display: none !important;
+	}
+</style>