diff --git a/web/package-lock.json b/web/package-lock.json
index 5bcdbfc3..4487a15b 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,7 +9,10 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@fortawesome/fontawesome-free": "^6.5.1",
+				"@threlte/core": "^7.1.0",
+				"@threlte/extras": "^8.7.5",
 				"@types/leaflet.awesome-markers": "^2.0.28",
+				"@types/three": "^0.161.2",
 				"crypto-random-string": "^5.0.0",
 				"date-fns": "^3.3.1",
 				"leaflet": "^1.9.4",
@@ -19,6 +22,7 @@
 				"nouislider": "^15.7.1",
 				"photoswipe": "^5.4.3",
 				"pocketbase": "^0.21.0",
+				"three": "^0.161.0",
 				"yup": "^1.3.3"
 			},
 			"devDependencies": {
@@ -55,7 +59,6 @@
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
 			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.0",
 				"@jridgewell/trace-mapping": "^0.3.9"
@@ -474,7 +477,6 @@
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
 			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.0.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -488,7 +490,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
 			"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -497,7 +498,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
 			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -505,14 +505,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-			"dev": true
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.22",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
 			"integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -842,6 +840,36 @@
 				"vite": "^5.0.0"
 			}
 		},
+		"node_modules/@threlte/core": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/@threlte/core/-/core-7.1.0.tgz",
+			"integrity": "sha512-Qshrrt1Bqu8B0rWuNtFqGJpbmxrFUBNYTHOJZ29Tiqy2kpmwYZfzVSPRoGUfJTqUtpfxGCrDU3S2etWnB0KsUA==",
+			"dependencies": {
+				"mitt": "^3.0.1"
+			},
+			"peerDependencies": {
+				"svelte": ">=4",
+				"three": ">=0.133"
+			}
+		},
+		"node_modules/@threlte/extras": {
+			"version": "8.7.5",
+			"resolved": "https://registry.npmjs.org/@threlte/extras/-/extras-8.7.5.tgz",
+			"integrity": "sha512-dhdkN9z7Yt/pd8tyaWEV49kIMnYDfH+WEX8ZRmYv0BKtIu3y+KJwOOSQXLo1VkzkT4q5El1bW4Bt/ZvDljKRMA==",
+			"dependencies": {
+				"three-mesh-bvh": "^0.7.1",
+				"troika-three-text": "^0.49.0"
+			},
+			"peerDependencies": {
+				"svelte": ">=4",
+				"three": ">=0.133"
+			},
+			"peerDependenciesMeta": {
+				"three-mesh-bvh": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -851,8 +879,7 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-			"dev": true
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
 		"node_modules/@types/geojson": {
 			"version": "7946.0.13",
@@ -890,6 +917,27 @@
 			"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
 			"dev": true
 		},
+		"node_modules/@types/stats.js": {
+			"version": "0.17.3",
+			"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+			"integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
+		},
+		"node_modules/@types/three": {
+			"version": "0.161.2",
+			"resolved": "https://registry.npmjs.org/@types/three/-/three-0.161.2.tgz",
+			"integrity": "sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==",
+			"dependencies": {
+				"@types/stats.js": "*",
+				"@types/webxr": "*",
+				"fflate": "~0.6.10",
+				"meshoptimizer": "~0.18.1"
+			}
+		},
+		"node_modules/@types/webxr": {
+			"version": "0.5.14",
+			"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.14.tgz",
+			"integrity": "sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA=="
+		},
 		"node_modules/@vitest/expect": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.2.1.tgz",
@@ -963,7 +1011,6 @@
 			"version": "8.11.3",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
 			"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -1033,7 +1080,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1088,7 +1134,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
 			"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1099,6 +1144,14 @@
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
 			"dev": true
 		},
+		"node_modules/bidi-js": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+			"integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+			"dependencies": {
+				"require-from-string": "^2.0.2"
+			}
+		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1279,7 +1332,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
 			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1",
@@ -1370,7 +1422,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -1442,7 +1493,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1564,7 +1614,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -1617,6 +1666,11 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.6.10",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+			"integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg=="
+		},
 		"node_modules/fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1888,7 +1942,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -2002,8 +2055,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
 		},
 		"node_modules/loupe": {
 			"version": "2.3.7",
@@ -2027,7 +2079,6 @@
 			"version": "0.30.5",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
 			"integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
@@ -2038,8 +2089,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"dev": true
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
 		},
 		"node_modules/meilisearch": {
 			"version": "0.37.0",
@@ -2064,6 +2114,11 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/meshoptimizer": {
+			"version": "0.18.1",
+			"resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+			"integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw=="
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.5",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -2128,6 +2183,11 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/mitt": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+			"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+		},
 		"node_modules/mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@@ -2408,7 +2468,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -2717,6 +2776,14 @@
 				"node": ">=8.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",
+			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/resolve": {
 			"version": "1.22.8",
 			"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -2922,7 +2989,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3155,7 +3221,6 @@
 			"version": "4.2.9",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.9.tgz",
 			"integrity": "sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3343,6 +3408,19 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/three": {
+			"version": "0.161.0",
+			"resolved": "https://registry.npmjs.org/three/-/three-0.161.0.tgz",
+			"integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw=="
+		},
+		"node_modules/three-mesh-bvh": {
+			"version": "0.7.2",
+			"resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.7.2.tgz",
+			"integrity": "sha512-HKRGZDKIUwwjL2mApYIAN8AYA5WAfFvc50PY8TL/9aGWzrRN1WLfPKAvTjv35F8PdPZzTmzHotCvIMFEN9FUSw==",
+			"peerDependencies": {
+				"three": ">= 0.151.0"
+			}
+		},
 		"node_modules/tiny-case": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
@@ -3413,6 +3491,33 @@
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
 			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
 		},
+		"node_modules/troika-three-text": {
+			"version": "0.49.0",
+			"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.49.0.tgz",
+			"integrity": "sha512-sn9BNC6eIX8OO3iAkPwjecJ7Pn21Ve8P1UNFMNeQzXx759rrqS4i4pSZs7FLMYdWyCKVXBFGimBySFwRKLjq/Q==",
+			"dependencies": {
+				"bidi-js": "^1.0.2",
+				"troika-three-utils": "^0.49.0",
+				"troika-worker-utils": "^0.49.0",
+				"webgl-sdf-generator": "1.1.1"
+			},
+			"peerDependencies": {
+				"three": ">=0.125.0"
+			}
+		},
+		"node_modules/troika-three-utils": {
+			"version": "0.49.0",
+			"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.49.0.tgz",
+			"integrity": "sha512-umitFL4cT+Fm/uONmaQEq4oZlyRHWwVClaS6ZrdcueRvwc2w+cpNQ47LlJKJswpqtMFWbEhOLy0TekmcPZOdYA==",
+			"peerDependencies": {
+				"three": ">=0.125.0"
+			}
+		},
+		"node_modules/troika-worker-utils": {
+			"version": "0.49.0",
+			"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.49.0.tgz",
+			"integrity": "sha512-1xZHoJrG0HFfCvT/iyN41DvI/nRykiBtHqFkGaGgJwq5iXfIZFBiPPEHFpPpgyKM3Oo5ITHXP5wM2TNQszYdVg=="
+		},
 		"node_modules/ts-interface-checker": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -3671,6 +3776,11 @@
 				}
 			}
 		},
+		"node_modules/webgl-sdf-generator": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+			"integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA=="
+		},
 		"node_modules/webidl-conversions": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/web/package.json b/web/package.json
index 31da8b41..4f3777d7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -32,7 +32,10 @@
 	"type": "module",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.5.1",
+		"@threlte/core": "^7.1.0",
+		"@threlte/extras": "^8.7.5",
 		"@types/leaflet.awesome-markers": "^2.0.28",
+		"@types/three": "^0.161.2",
 		"crypto-random-string": "^5.0.0",
 		"date-fns": "^3.3.1",
 		"leaflet": "^1.9.4",
@@ -42,6 +45,7 @@
 		"nouislider": "^15.7.1",
 		"photoswipe": "^5.4.3",
 		"pocketbase": "^0.21.0",
+		"three": "^0.161.0",
 		"yup": "^1.3.3"
 	}
 }
diff --git a/web/src/lib/components/base/search.svelte b/web/src/lib/components/base/search.svelte
index 295e1e80..9f0789d2 100644
--- a/web/src/lib/components/base/search.svelte
+++ b/web/src/lib/components/base/search.svelte
@@ -55,11 +55,11 @@
 
 <div class="relative text-gray-600">
     <span class="absolute top-1/2 -translate-y-1/2 left-0 pl-4">
-        <i class="fa fa-search" class:text-2xl={large}></i>
+        <i class="fa fa-search" class:text-xl={large}></i>
     </span>
     {#if value.length > 0}
         <button
-            class="absolute top-1/2 -translate-y-1/2 right-0 h-6 w-6 mr-4 hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
+            class="absolute top-1/2 -translate-y-1/2 right-12 h-6 w-6 mr-4 hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
             on:click={clear}
             in:fade={{ duration: 150 }}
             out:fade={{ duration: 150 }}
@@ -71,7 +71,9 @@
         type="search"
         name="q"
         autocomplete="off"
-        extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px] rounded-xl' : 'pl-10'}"
+        extraClasses="{large
+            ? 'pl-12 text-xl min-w-80 w-[33vw] max-w-[532px] rounded-xl'
+            : 'pl-10'}"
         {placeholder}
         bind:value
         on:input={onSearchType}
diff --git a/web/src/lib/components/earth.svelte b/web/src/lib/components/earth.svelte
new file mode 100644
index 00000000..9ccf347b
--- /dev/null
+++ b/web/src/lib/components/earth.svelte
@@ -0,0 +1,675 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@2.0.1 static/models/earth.glb
+-->
+
+<script lang="ts">
+  import { DirectionalLight, Group, PointLight } from "three";
+  import { T, forwardEventHandlers } from "@threlte/core";
+  import { useGltf } from "@threlte/extras";
+
+  export const ref = new Group();
+
+  export let rotation: number = 0;
+
+  const gltf = useGltf("/models/earth.glb");
+
+  const component = forwardEventHandlers();
+</script>
+
+<T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
+  {#await gltf}
+    <slot name="fallback" />
+  {:then gltf}
+    <!-- Clouds -->
+    <T.Group rotation={[-rotation / 2, rotation / 2, 0]}>
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere002.geometry}
+        material={gltf.materials.Material}
+        position={[-0.94, 0.95, -0.12]}
+        rotation={[2.48, -0.48, 2.24]}
+        scale={0.65}
+        castShadow
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere003.geometry}
+        material={gltf.materials.Material}
+        position={[-0.02, 0.15, 1.33]}
+        rotation={[-1.67, 0.46, 3.13]}
+        scale={0.65}
+        castShadow
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere004.geometry}
+        material={gltf.materials.Material}
+        position={[0.58, 1.05, -0.6]}
+        rotation={[2.96, -0.61, -2.59]}
+        scale={0.65}
+        castShadow
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere005.geometry}
+        material={gltf.materials.Material}
+        position={[-1.18, -0.32, 0.56]}
+        rotation={[-0.57, 0.25, 2.01]}
+        scale={0.65}
+        castShadow
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere006.geometry}
+        material={gltf.materials.Material}
+        position={[0.03, 1.31, -0.54]}
+        rotation={[2.98, -1.09, -2.9]}
+        scale={0.9}
+        castShadow
+      />
+    </T.Group>
+    <!-- /Clouds -->
+    <!-- Airplane -->
+    <T.Group rotation={[0, rotation, rotation]}>
+      <T.Group position={[0, 1.2, 0]} rotation={[0, 0, 0]} scale={0.78}>
+        <T.Mesh
+          geometry={gltf.nodes.Plane005_1.geometry}
+          material={gltf.materials["Material.006"]}
+          castShadow
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane005_2.geometry}
+          material={gltf.materials["Material.007"]}
+          castShadow
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane005_3.geometry}
+          material={gltf.materials["Material.008"]}
+          castShadow
+        />
+      </T.Group>
+    </T.Group>
+
+    <!-- /Airplane -->
+    <!-- Sun -->
+    <T.Mesh
+      geometry={gltf.nodes.Icosphere007.geometry}
+      material={gltf.materials["Material.009"]}
+      position={[0.5, 2, -0.5]}
+      scale={0.88}
+    >
+      <T.PointLight position={[2, 0, 0]} color="#f4de51" intensity={4.5}
+      ></T.PointLight>
+
+      <T.DirectionalLight color="#f4de51" intensity={2.5} castShadow
+      ></T.DirectionalLight>
+    </T.Mesh>
+    <!-- /Sun -->
+    <T.Group scale={1} rotation.y={rotation}>
+      <!-- Earth -->
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere_1.geometry}
+        material={gltf.materials["Material.003"]}
+        receiveShadow
+      />
+      <!-- /Earth -->
+      <!-- Water -->
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere001.geometry}
+        material={gltf.materials["Material.002"]}
+        receiveShadow
+      />
+      <!-- /Water -->
+      <!-- Trees -->
+      <T.Mesh
+        geometry={gltf.nodes.Icosphere_2.geometry}
+        material={gltf.materials["Material.004"]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.36, 0.96, 0.03]}
+        rotation={[0.09, -0.02, -0.4]}
+        scale={0.7}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane001.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.32, 0.98, -0.03]}
+        rotation={[-0.08, 0.05, -0.4]}
+        scale={0.68}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane002.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.2, 1.01, -0.05]}
+        rotation={[-0.08, 0.06, -0.13]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane003.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.21, 1.01, 0.04]}
+        rotation={[0.1, 0.03, -0.13]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane004.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.29, 0.98, 0.12]}
+        rotation={[0.18, 0.02, -0.24]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane005.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.26, 0.99, -0.12]}
+        rotation={[-0.15, 0.1, -0.24]}
+        scale={0.51}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane006.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.39, 0.95, 0.12]}
+        rotation={[0.11, 0.01, -0.4]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane007.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.16, 1, 0.19]}
+        rotation={[0.17, -0.01, -0.24]}
+        scale={0.51}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane008.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.81, 0.69, 0.31]}
+        rotation={[0.38, -0.13, -0.82]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane009.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.84, 0.6, 0.39]}
+        rotation={[0.38, -0.13, -0.82]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane010.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.88, 0.61, 0.28]}
+        rotation={[0.26, 0, -0.85]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane011.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.79, 0.61, -0.5]}
+        rotation={[-0.07, 0.4, -0.91]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane012.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.72, 0.68, -0.51]}
+        rotation={[-0.16, 0.49, -0.75]}
+        scale={0.51}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane013.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.72, 0.61, -0.6]}
+        rotation={[-0.3, 0.6, -0.74]}
+        scale={0.61}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane014.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.8, 0.65, -0.42]}
+        rotation={[-0.08, 0.39, -0.9]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane015.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.81, 0.53, -0.56]}
+        rotation={[-0.2, 0.55, -1.08]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane016.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.32, -0.47, 0.96]}
+        rotation={[1.65, -0.8, -0.42]}
+        scale={0.53}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane017.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.42, -0.49, 0.91]}
+        rotation={[1.61, -0.78, -0.62]}
+        scale={0.59}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane018.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.29, -0.59, 0.92]}
+        rotation={[1.87, -0.86, -0.21]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane019.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.34, -0.54, 0.92]}
+        rotation={[1.61, -0.78, -0.62]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane020.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.2, -0.55, 0.95]}
+        rotation={[1.87, -0.86, -0.21]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane021.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.33, -0.65, 0.85]}
+        rotation={[1.79, -0.84, -0.61]}
+        scale={0.74}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane022.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.39, -0.58, 0.87]}
+        rotation={[1.63, -0.76, -0.6]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane023.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.46, -0.58, 0.84]}
+        rotation={[1.63, -0.76, -0.6]}
+        scale={0.62}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane024.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.22, -0.72, 0.82]}
+        rotation={[2.02, -0.9, -0.38]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane025.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.11, 0.28, -0.99]}
+        rotation={[-1.19, 1.03, -0.03]}
+        scale={0.61}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane026.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.02, 0.28, -0.99]}
+        rotation={[-1.19, 1.03, -0.03]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane027.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.06, 0.14, -1.02]}
+        rotation={[-1.4, 1.03, 0]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane028.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.11, 0.14, -1.01]}
+        rotation={[-1.23, 1.02, -0.3]}
+        scale={0.5}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane029.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.02, 0.16, -1.02]}
+        rotation={[-1.4, 1.03, 0]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane030.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.23, 0.23, -0.98]}
+        rotation={[-1.85, 0.96, 0.56]}
+        scale={0.69}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane031.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.11, 0.24, -1]}
+        rotation={[-1.4, 1.03, 0]}
+        scale={0.64}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane032.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.19, 0.14, -1]}
+        rotation={[-1.72, 1.01, 0.3]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane033.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.07, 0.02, -1.03]}
+        rotation={[-1.72, 1.01, 0.3]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane034.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.06, 0.02, -1.03]}
+        rotation={[-1.24, 1.01, -0.29]}
+        scale={0.67}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane035.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.03, -0.12, -1.02]}
+        rotation={[-1.75, 1.05, 0]}
+        scale={0.36}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane036.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.2, -0.04, -1.01]}
+        rotation={[-1.92, 1.03, 0.31]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane037.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.3, 0.05, -0.99]}
+        rotation={[-1.93, 1.03, 0.63]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane038.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.37, 0.18, -0.94]}
+        rotation={[-1.93, 1.03, 0.63]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane039.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.48, 0.32, -0.86]}
+        rotation={[-2.14, 0.89, 1.11]}
+        scale={0.62}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane040.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.62, 0.08, -0.82]}
+        rotation={[-2.2, 0.81, 1]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane041.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.53, 0.2, -0.86]}
+        rotation={[-2.2, 0.81, 1]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane042.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.45, 0, -0.93]}
+        rotation={[-2.12, 0.88, 0.79]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane043.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.37, -0.11, -0.96]}
+        rotation={[-2.14, 0.87, 0.49]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane044.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.26, -0.18, -0.98]}
+        rotation={[-2.14, 0.87, 0.49]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane045.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.47, 0.96, 0.41]}
+        rotation={[0.36, -0.12, -0.52]}
+        scale={0.71}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane046.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.32, 0.93, 0.58]}
+        rotation={[0.43, -0.15, -0.35]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane047.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.49, 0.89, 0.52]}
+        rotation={[0.43, -0.15, -0.35]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane048.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.3, 0.85, 0.69]}
+        rotation={[0.59, -0.2, -0.3]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane049.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[0.61, 0.87, 0.41]}
+        rotation={[0.37, -0.1, -0.52]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane050.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.33, 0.77, 0.61]}
+        rotation={[0.6, 0.15, 0.19]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane051.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.48, 0.76, 0.5]}
+        rotation={[0.28, 0.45, 0.54]}
+        scale={0.51}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane052.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.37, 0.79, 0.56]}
+        rotation={[0.32, 0.5, 0.36]}
+        scale={0.61}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane053.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.37, 0.75, 0.62]}
+        rotation={[0.79, 0.08, 0.23]}
+        scale={0.82}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane054.geometry}
+        material={gltf.materials["Material.005"]}
+        position={[-0.23, 0.76, 0.66]}
+        rotation={[0.59, 0.18, 0.19]}
+        scale={0.82}
+      />
+      <!-- /Trees -->
+      <!-- Houses -->
+      <T.Group
+        position={[0.45, 0.74, 0.74]}
+        rotation={[0.73, -0.16, -0.41]}
+        scale={1.08}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[-0.34, 0.68, 0.7]}
+        rotation={[0.85, -0.17, 0.24]}
+        scale={0.81}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.83, 0.55, -0.5]}
+        rotation={[-1.49, -0.47, -1.12]}
+        scale={0.69}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.4, 0.94, -0.09]}
+        rotation={[-1.02, -1.08, -0.99]}
+        scale={0.69}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.39, -0.42, 0.96]}
+        rotation={[-0.88, -0.78, -2.72]}
+        scale={0.69}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.81, 0.53, 0.55]}
+        rotation={[0.32, -0.49, -1.02]}
+        scale={0.69}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.88, 0.51, 0.43]}
+        rotation={[-0.21, -0.54, -1.21]}
+        scale={0.69}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.86, 0.43, 0.54]}
+        rotation={[0.32, -0.49, -1.02]}
+        scale={0.69}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.77, 0.45, 0.66]}
+        rotation={[0.68, -0.25, -0.89]}
+        scale={0.75}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_1.geometry}
+          material={gltf.materials.Material}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane002_2.geometry}
+          material={gltf.materials["Material.007"]}
+        />
+      </T.Group>
+      <!-- /Houses -->
+      <!-- Boats -->
+      <T.Group
+        position={[-0.15, 0.97, 0.21]}
+        rotation={[0.18, 0.81, 0.13]}
+        scale={0.79}
+        castShadow
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane003_1.geometry}
+          material={gltf.materials["Material.009"]}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane003_2.geometry}
+          material={gltf.materials.Material}
+        />
+      </T.Group>
+      <T.Group
+        position={[0.85, -0.51, -0.16]}
+        rotation={[-0.62, 0.4, -1.85]}
+        scale={0.75}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Plane003_1.geometry}
+          material={gltf.materials["Material.009"]}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Plane003_2.geometry}
+          material={gltf.materials.Material}
+        />
+      </T.Group>
+      <!-- /Boats -->
+    </T.Group>
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
+
+  <slot {ref} />
+</T>
diff --git a/web/src/lib/components/scene.svelte b/web/src/lib/components/scene.svelte
new file mode 100644
index 00000000..37a1b79c
--- /dev/null
+++ b/web/src/lib/components/scene.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { T, useTask } from "@threlte/core";
+    import Earth from "./earth.svelte";
+
+    let rotation = 0;
+    useTask((delta) => {
+        rotation += delta/4;
+    });
+</script>
+
+<T.PerspectiveCamera
+    makeDefault
+    position={[5, 2, 0]}
+    on:create={({ ref }) => {
+        ref.lookAt(0, 0, -0.5);
+    }}
+/>
+
+<T.AmbientLight color="0xffffff" intensity={1.1} />
+
+<Earth rotation={rotation}></Earth>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index ec084f33..b5213e9c 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -4,14 +4,15 @@
         type SearchItem,
     } from "$lib/components/base/search.svelte";
     import CategoryCard from "$lib/components/category_card.svelte";
+    import Scene from "$lib/components/scene.svelte";
     import TrailCard from "$lib/components/trail/trail_card.svelte";
     import { ms } from "$lib/meilisearch";
     import { categories } from "$lib/stores/category_store";
-    import {
-        trails
-    } from "$lib/stores/trail_store";
+    import { trails } from "$lib/stores/trail_store";
     import { currentUser } from "$lib/stores/user_store";
     import { country_codes } from "$lib/util/country_code_util";
+    import { Canvas, } from "@threlte/core";
+
 
     let searchDropdownItems: SearchItem[] = [];
 
@@ -56,14 +57,28 @@
     }
 </script>
 
-<section class="hero flex justify-center items-center" style="height: 50vh">
-    <Search
-        on:update={(e) => search(e.detail)}
-        on:click={(e) => handleSearchClick(e.detail)}
-        large={true}
-        placeholder="Search trails..."
-        items={searchDropdownItems}
-    ></Search>
+<section class="hero grid grid-cols-2" style="height: calc(100vh - 112px)">
+    <div class="flex flex-col justify-center gap-8 max-w-md mx-auto -mt-24">
+        <h2 class="text-7xl font-bold">
+            Welcome to <span class="-tracking-[0.075em]">wanderer</span>
+        </h2>
+        <h5>
+            Explore diverse trails, save your favorites, and experience the
+            beauty of nature. Find your next adventure!
+        </h5>
+        <Search
+            on:update={(e) => search(e.detail)}
+            on:click={(e) => handleSearchClick(e.detail)}
+            large={true}
+            placeholder="Search trails..."
+            items={searchDropdownItems}
+        ></Search>
+    </div>
+    <div>
+        <Canvas>
+            <Scene></Scene>
+        </Canvas>
+    </div>
 </section>
 <section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0">
     <h2 class="text-5xl md:text-6xl font-bold text-primary">
@@ -75,10 +90,7 @@
     >
         {#each $trails as trail}
             <a href="/trail/view/{trail.id}">
-                <TrailCard
-                    {trail}
-                    mode="edit"
-                ></TrailCard></a
+                <TrailCard {trail} mode="edit"></TrailCard></a
             >
         {/each}
     </div>
@@ -96,10 +108,4 @@
 </section>
 
 <style>
-    .hero {
-        background-image: url("/imgs/hero.jpg");
-        background-position: bottom;
-        background-size: cover;
-        background-repeat: no-repeat;
-    }
 </style>
diff --git a/web/static/models/earth.glb b/web/static/models/earth.glb
new file mode 100644
index 00000000..dd39486d
Binary files /dev/null and b/web/static/models/earth.glb differ
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 37b6a84b..d946c525 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -5,5 +5,8 @@ export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	ssr: {
+		noExternal: ['three']
 	}
 });