diff --git a/package-lock.json b/package-lock.json
index e47e435..70fea4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
 				"prettier": "^3.2.2",
 				"prettier-plugin-svelte": "^3.1.2",
 				"prettier-plugin-tailwindcss": "^0.5.11",
+				"qrcode": "^1.5.3",
 				"svelte": "^4.2.7",
 				"tailwindcss": "^3.4.1",
 				"three": "^0.160.0",
@@ -1050,6 +1051,15 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/camelcase": {
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+			"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/camelcase-css": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1127,6 +1137,87 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/cliui": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+			"integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+			"dev": true,
+			"dependencies": {
+				"string-width": "^4.2.0",
+				"strip-ansi": "^6.0.0",
+				"wrap-ansi": "^6.2.0"
+			}
+		},
+		"node_modules/cliui/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/ansi-styles": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+			"dev": true,
+			"dependencies": {
+				"color-convert": "^2.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
+			}
+		},
+		"node_modules/cliui/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/cliui/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/cliui/node_modules/wrap-ansi": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+			"integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+			"dev": true,
+			"dependencies": {
+				"ansi-styles": "^4.0.0",
+				"string-width": "^4.1.0",
+				"strip-ansi": "^6.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/code-red": {
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -1270,6 +1361,15 @@
 				}
 			}
 		},
+		"node_modules/decamelize": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+			"integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -1300,6 +1400,12 @@
 			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
 			"dev": true
 		},
+		"node_modules/dijkstrajs": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+			"integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+			"dev": true
+		},
 		"node_modules/dlv": {
 			"version": "1.1.3",
 			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -1324,6 +1430,12 @@
 			"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
 			"dev": true
 		},
+		"node_modules/encode-utf8": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/encode-utf8/-/encode-utf8-1.0.3.tgz",
+			"integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==",
+			"dev": true
+		},
 		"node_modules/esbuild": {
 			"version": "0.19.11",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz",
@@ -1441,6 +1553,19 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/find-up": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+			"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+			"dev": true,
+			"dependencies": {
+				"locate-path": "^5.0.0",
+				"path-exists": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/foreground-child": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -1493,6 +1618,15 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/get-caller-file": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+			"integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+			"dev": true,
+			"engines": {
+				"node": "6.* || 8.* || >= 10.*"
+			}
+		},
 		"node_modules/glob": {
 			"version": "10.3.10",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
@@ -1696,6 +1830,18 @@
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
 			"dev": true
 		},
+		"node_modules/locate-path": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+			"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+			"dev": true,
+			"dependencies": {
+				"p-locate": "^4.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/lru-cache": {
 			"version": "10.1.0",
 			"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.1.0.tgz",
@@ -1870,6 +2016,51 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/p-limit": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+			"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+			"dev": true,
+			"dependencies": {
+				"p-try": "^2.0.0"
+			},
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/p-locate": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+			"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+			"dev": true,
+			"dependencies": {
+				"p-limit": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/p-try": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+			"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/path-exists": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/path-key": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
@@ -1948,6 +2139,15 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/pngjs": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+			"integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+			"dev": true,
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.4.33",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -2188,6 +2388,24 @@
 				}
 			}
 		},
+		"node_modules/qrcode": {
+			"version": "1.5.3",
+			"resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.3.tgz",
+			"integrity": "sha512-puyri6ApkEHYiVl4CFzo1tDkAZ+ATcnbJrJ6RiBM1Fhctdn/ix9MTE3hRph33omisEbC/2fcfemsseiKgBPKZg==",
+			"dev": true,
+			"dependencies": {
+				"dijkstrajs": "^1.0.1",
+				"encode-utf8": "^1.0.3",
+				"pngjs": "^5.0.0",
+				"yargs": "^15.3.1"
+			},
+			"bin": {
+				"qrcode": "bin/qrcode"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2229,6 +2447,15 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/require-directory": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+			"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/require-from-string": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -2238,6 +2465,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/require-main-filename": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+			"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+			"dev": true
+		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -2332,6 +2565,12 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/set-blocking": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+			"integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+			"dev": true
+		},
 		"node_modules/set-cookie-parser": {
 			"version": "2.6.0",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
@@ -2728,9 +2967,9 @@
 			"dev": true
 		},
 		"node_modules/vite": {
-			"version": "5.0.11",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
-			"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
+			"version": "5.0.12",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
+			"integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
 			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.19.3",
@@ -2817,6 +3056,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/which-module": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+			"integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+			"dev": true
+		},
 		"node_modules/wrap-ansi": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
@@ -2908,6 +3153,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/y18n": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+			"integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+			"dev": true
+		},
 		"node_modules/yaml": {
 			"version": "2.3.4",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",
@@ -2916,6 +3167,82 @@
 			"engines": {
 				"node": ">= 14"
 			}
+		},
+		"node_modules/yargs": {
+			"version": "15.4.1",
+			"resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+			"integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+			"dev": true,
+			"dependencies": {
+				"cliui": "^6.0.0",
+				"decamelize": "^1.2.0",
+				"find-up": "^4.1.0",
+				"get-caller-file": "^2.0.1",
+				"require-directory": "^2.1.1",
+				"require-main-filename": "^2.0.0",
+				"set-blocking": "^2.0.0",
+				"string-width": "^4.2.0",
+				"which-module": "^2.0.0",
+				"y18n": "^4.0.0",
+				"yargs-parser": "^18.1.2"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs-parser": {
+			"version": "18.1.3",
+			"resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+			"integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+			"dev": true,
+			"dependencies": {
+				"camelcase": "^5.0.0",
+				"decamelize": "^1.2.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/yargs/node_modules/ansi-regex": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs/node_modules/emoji-regex": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+			"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+			"dev": true
+		},
+		"node_modules/yargs/node_modules/string-width": {
+			"version": "4.2.3",
+			"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+			"integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+			"dev": true,
+			"dependencies": {
+				"emoji-regex": "^8.0.0",
+				"is-fullwidth-code-point": "^3.0.0",
+				"strip-ansi": "^6.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
+		"node_modules/yargs/node_modules/strip-ansi": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+			"dev": true,
+			"dependencies": {
+				"ansi-regex": "^5.0.1"
+			},
+			"engines": {
+				"node": ">=8"
+			}
 		}
 	}
 }
diff --git a/package.json b/package.json
index d1ed457..7e27b07 100644
--- a/package.json
+++ b/package.json
@@ -17,13 +17,14 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@threlte/core": "^7.0.12",
 		"@threlte/extras": "^8.2.1",
-		"camera-controls": "^2.7.3",
 		"autoprefixer": "^10.4.16",
+		"camera-controls": "^2.7.3",
 		"daisyui": "^4.6.0",
 		"postcss": "^8.4.33",
 		"prettier": "^3.2.2",
 		"prettier-plugin-svelte": "^3.1.2",
 		"prettier-plugin-tailwindcss": "^0.5.11",
+		"qrcode": "^1.5.3",
 		"svelte": "^4.2.7",
 		"tailwindcss": "^3.4.1",
 		"three": "^0.160.0",
diff --git a/src/lib/booking/booking.svelte b/src/lib/booking/booking.svelte
new file mode 100644
index 0000000..307c46d
--- /dev/null
+++ b/src/lib/booking/booking.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { itemData } from '$lib/appstore.js';
+	import Bookingscreen from '$lib/booking/bookingscreen.svelte';
+	import QRcode from '$lib/qrcode.svelte';
+
+	export function* range(start, end, step = 1) {
+		for (let i = start; i <= end; i += step) {
+			yield i;
+		}
+	}
+
+	const openHour = 10;
+	const closeHour = 21;
+	const confirmQRtext = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
+
+	export let id;
+
+	let selectedHour = null;
+	function selectHour(e, hour) {
+		selectedHour = hour;
+		console.log(hour);
+	}
+
+	let date = new Date();
+	$: serviceData = $itemData[id];
+</script>
+
+{#if id in $itemData}
+	{#if selectedHour === null}
+		<!-- Hour select screen -->
+		<Bookingscreen hourMode={true} {serviceData} {date}>
+			<div class="flex flex-wrap gap-2 align-middle">
+				<!-- Fake available hours -->
+				{#each range(openHour, closeHour, 1) as currHour}
+					<div
+						class="btn min-w-20 shadow-sm"
+						on:click={() => selectHour(Event, currHour)}
+						on:keypress={() => selectHour(Event, currHour)}
+						role="button"
+						tabindex="0"
+					>
+						{currHour}h
+					</div>
+				{/each}
+			</div>
+		</Bookingscreen>
+	{:else}
+		<!-- Finish booking on app screen -->
+		<Bookingscreen confirmMode={true} {serviceData} {date}>
+			<h2 class="font-light">Scan to confirm your appointment</h2>
+			<QRcode text={confirmQRtext}></QRcode>
+		</Bookingscreen>
+	{/if}
+{:else}
+	<p>Error: {id} does not exist</p>
+{/if}
diff --git a/src/lib/booking/bookingscreen.svelte b/src/lib/booking/bookingscreen.svelte
new file mode 100644
index 0000000..7f8dc93
--- /dev/null
+++ b/src/lib/booking/bookingscreen.svelte
@@ -0,0 +1,31 @@
+<script>
+	import Icon from '@iconify/svelte';
+
+	const hideClass = 'opacity-60';
+
+	export let serviceData;
+	export let date;
+	export let dayMode = false;
+	export let hourMode = false;
+	export let confirmMode = false;
+</script>
+
+<div class="flex w-full flex-col items-center align-middle">
+	<h1 class="mb-6 text-xl sm:text-2xl">
+		Your {serviceData.name} apointment
+	</h1>
+	<div class="text-md breadcrumbs mb-8 rounded-full px-6 shadow-xl outline outline-2">
+		<ul>
+			<li class={dayMode ? 'underline' : hideClass}>
+				<Icon icon="mdi:calendar"></Icon>{date.toLocaleString('en-us', {
+					weekday: 'short'
+				})}.{date.getDate()}
+			</li>
+			<li class={hourMode ? 'underline' : hideClass}><Icon icon="mdi:clock"></Icon>Hour</li>
+			<li class={confirmMode ? 'underline' : hideClass}>
+				<Icon icon="mdi:check-bold"></Icon>Finish
+			</li>
+		</ul>
+	</div>
+	<slot />
+</div>
diff --git a/src/lib/productinfo.svelte b/src/lib/productinfo.svelte
index 97190ca..6d632ad 100644
--- a/src/lib/productinfo.svelte
+++ b/src/lib/productinfo.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { itemData } from '$lib/appstore.js';
+	import Booking from '$lib/booking/booking.svelte';
 
 	export let id; // ID of the product to display infos of
 
@@ -10,7 +11,7 @@
 	{#if $itemData[id].categories.includes('product')}
 		<iframe class="h-full w-full" title="Sephora website" src={sephoraProductUrl + id + '.html'} />
 	{:else}
-		Imagine a super cool appointment booking page here please
+		<Booking {id} />
 	{/if}
 {:else}
 	<p>Error: {id} does not exist</p>
diff --git a/src/lib/qrcode.svelte b/src/lib/qrcode.svelte
new file mode 100644
index 0000000..5b5cde4
--- /dev/null
+++ b/src/lib/qrcode.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { onMount } from 'svelte';
+	import QRCode from 'qrcode';
+
+	export let text;
+	export let errorCorrectionLevel = 'H';
+
+	let canvas;
+
+	onMount(() => {
+		QRCode.toCanvas(canvas, text, { errorCorrectionLevel: { errorCorrectionLevel } });
+	});
+</script>
+
+<canvas bind:this={canvas}></canvas>