diff --git a/website/src/locales/en.json b/website/src/locales/en.json
index b7d5ceb3..05c64095 100644
--- a/website/src/locales/en.json
+++ b/website/src/locales/en.json
@@ -430,5 +430,6 @@
         "code": "Integration code"
     },
     "webgl2_required": "WebGL 2 is required to display the map.",
-    "enable_webgl2": "Learn how to enable WebGL 2 in your browser"
+    "enable_webgl2": "Learn how to enable WebGL 2 in your browser",
+    "page_not_found": "page not found"
 }
\ No newline at end of file
diff --git a/website/src/routes/+layout.svelte b/website/src/routes/+layout.svelte
index 7f8c73ec..43184c38 100644
--- a/website/src/routes/+layout.svelte
+++ b/website/src/routes/+layout.svelte
@@ -1,5 +1,36 @@
 <script lang="ts">
 	import '../app.pcss';
+	import { ModeWatcher } from 'mode-watcher';
+	import { isLoading, locale, _ } from 'svelte-i18n';
+	import { page } from '$app/stores';
+	import Head from '$lib/components/Head.svelte';
+	import Nav from '$lib/components/Nav.svelte';
+	import Footer from '$lib/components/Footer.svelte';
+
+	$: if ($page.params.language === '' && $locale !== 'en') {
+		locale.set('en');
+	} else if ($page.params.language && $locale !== $page.params.language) {
+		locale.set($page.params.language.replace('/', ''));
+	}
+
+	const appRoutes = ['/[...language]/app', '/[...language]/embed'];
+
+	$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
 </script>
 
-<slot />
+<Head />
+<ModeWatcher />
+
+<div class="flex flex-col min-h-screen">
+	{#if !$isLoading}
+		{#if showNavAndFooter}
+			<Nav />
+		{/if}
+		<main class="grow flex flex-col">
+			<slot />
+		</main>
+		{#if showNavAndFooter}
+			<Footer />
+		{/if}
+	{/if}
+</div>
diff --git a/website/src/routes/404/+page.svelte b/website/src/routes/404/+page.svelte
new file mode 100644
index 00000000..15bbd123
--- /dev/null
+++ b/website/src/routes/404/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import Logo from '$lib/components/Logo.svelte';
+	import { getURLForLanguage } from '$lib/utils';
+	import { Home, Map, BookOpenText } from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+</script>
+
+<div class="grow px-12 my-12 flex flex-col items-center justify-center gap-6">
+	<p class="text-7xl font-black">404</p>
+	<p class="text-xl -mt-6">{$_('page_not_found')}</p>
+	<Logo class="h-40 my-3 animate-spin" style="animation-duration: 20000ms" iconOnly={true} />
+	<div class="w-full flex flex-row flex-wrap gap-3 justify-center">
+		<Button href={getURLForLanguage($locale, '/')} class="text-base w-1/4 min-w-fit rounded-full">
+			<Home size="18" class="mr-1.5" />
+			{$_('homepage.home')}
+		</Button>
+		<Button
+			href={getURLForLanguage($locale, '/app')}
+			class="text-base w-1/4 min-w-fit rounded-full"
+		>
+			<Map size="18" class="mr-1.5" />
+			{$_('homepage.app')}
+		</Button>
+		<Button
+			href={getURLForLanguage($locale, '/help')}
+			class="text-base w-1/4 min-w-fit rounded-full"
+		>
+			<BookOpenText size="18" class="mr-1.5" />
+			<span>{$_('menu.help')}</span>
+		</Button>
+	</div>
+</div>
diff --git a/website/src/routes/[...language]/+layout.svelte b/website/src/routes/[...language]/+layout.svelte
deleted file mode 100644
index 222fdedb..00000000
--- a/website/src/routes/[...language]/+layout.svelte
+++ /dev/null
@@ -1,33 +0,0 @@
-<script lang="ts">
-	import { ModeWatcher } from 'mode-watcher';
-	import { isLoading, locale, _ } from 'svelte-i18n';
-	import { page } from '$app/stores';
-	import Head from '$lib/components/Head.svelte';
-	import Nav from '$lib/components/Nav.svelte';
-	import Footer from '$lib/components/Footer.svelte';
-
-	$: if ($page.params.language === '' && $locale !== 'en') {
-		locale.set('en');
-	} else if ($page.params.language && $locale !== $page.params.language) {
-		locale.set($page.params.language.replace('/', ''));
-	}
-
-	const appRoutes = ['/[...language]/app', '/[...language]/embed'];
-
-	$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
-</script>
-
-<Head />
-<ModeWatcher />
-
-{#if !$isLoading}
-	{#if showNavAndFooter}
-		<Nav />
-	{/if}
-	<main>
-		<slot />
-	</main>
-	{#if showNavAndFooter}
-		<Footer />
-	{/if}
-{/if}
diff --git a/website/svelte.config.js b/website/svelte.config.js
index b10db9d7..7602e473 100644
--- a/website/svelte.config.js
+++ b/website/svelte.config.js
@@ -15,7 +15,7 @@ const config = {
         adapter: adapter({
             pages: 'build',
             assets: 'build',
-            fallback: 'index.html',
+            fallback: '404.html',
             precompress: false,
             strict: true
         }),
