diff --git a/web/nginx.conf b/web/nginx.conf
index 7e34938..8b81cf9 100644
--- a/web/nginx.conf
+++ b/web/nginx.conf
@@ -34,6 +34,7 @@ server {
     }
 
     location / {
+        # If no filepath matches to the requested, 404s will be handled by Svelte
         try_files $uri $uri/ /index.html;
 
         # Cache static assets
@@ -42,7 +43,4 @@ server {
             add_header Cache-Control "public, no-transform";
         }
     }
-
-    # Route 404 errors to front page
-    error_page 404 /;
 }
\ No newline at end of file
diff --git a/web/src/app.css b/web/src/app.css
index 6d7d61c..fb19003 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -101,6 +101,22 @@
 }
 
 @layer components {
+	/* * * * * * * * * */
+	/*   Error pages   */
+	/* * * * * * * * * */
+
+	.error-page-container {
+		@apply flex h-screen w-full flex-col items-center justify-center align-middle;
+	}
+
+	.error-page-emoji {
+		@apply pb-3 text-6xl;
+	}
+
+	.error-page-title {
+		@apply font-copernicus text-2xl;
+	}
+
 	/* * * * * * * * * * * * */
 	/*   Loading animation   */
 	/* * * * * * * * * * * * */
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
new file mode 100644
index 0000000..468b9a7
--- /dev/null
+++ b/web/src/routes/+error.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { page } from "$app/state"
+</script>
+
+<div class="error-page-container">
+	<p class="error-page-emoji">🫠</p>
+	<h1 class="error-page-title">{page.status} {page.error?.message}</h1>
+</div>