diff --git a/project.inlang/messages/de.json b/project.inlang/messages/de.json
index 470f01e..ded6413 100644
--- a/project.inlang/messages/de.json
+++ b/project.inlang/messages/de.json
@@ -279,5 +279,13 @@
 	"locales": {
 		"en": "Englisch",
 		"de": "Deutsch"
+	},
+	"errorPages": {
+		"title": "Da ist was schiefgelaufen",
+		"descriptions": {
+			"500": "Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es später erneut.",
+			"404": "Die Seite, die Du suchst, existiert nicht."
+		},
+		"action": "Zur Startseite"
 	}
 }
diff --git a/project.inlang/messages/en.json b/project.inlang/messages/en.json
index d615a54..70b1536 100644
--- a/project.inlang/messages/en.json
+++ b/project.inlang/messages/en.json
@@ -288,5 +288,13 @@
 	"locales": {
 		"en": "English",
 		"de": "German"
+	},
+	"errorPages": {
+		"title": "Something went wrong",
+		"descriptions": {
+			"500": "An unexpected error occurred. Please try again later.",
+			"404": "The page you are looking for does not exist."
+		},
+		"action": "Go to Homepage"
 	}
 }
diff --git a/src/lib/components/templates/empty-state/center-state.svelte b/src/lib/components/templates/empty-state/center-state.svelte
index 1aada94..f13008b 100644
--- a/src/lib/components/templates/empty-state/center-state.svelte
+++ b/src/lib/components/templates/empty-state/center-state.svelte
@@ -20,12 +20,14 @@
   let {
     class: className = "",
     Icon,
+    iconBadge,
     headline,
     description,
     size,
   }: {
     class?: string;
     Icon: Component;
+    iconBadge?: string;
     headline: string;
     description: string;
     size?: VariantProps<typeof variants>["size"];
@@ -40,7 +42,18 @@
     className,
   )}
 >
-  <Icon class={cn(variants({ size }))} strokeWidth={1} />
+  <div class="relative">
+    {#if iconBadge}
+      <div
+        class="bg-secondary border-primary absolute top-1/2 left-1/2 ml-4 rounded-md border-2 px-2 pb-0.5"
+      >
+        <Text style="xs" class="font-mono font-medium">
+          {iconBadge}
+        </Text>
+      </div>
+    {/if}
+    <Icon class={cn(variants({ size }))} strokeWidth={1} />
+  </div>
   <Headline level={isSmaller ? "h3" : "h1"} style={isSmaller ? "h3" : "h2"}>
     {headline}
   </Headline>
diff --git a/src/lib/const/routes.ts b/src/lib/const/routes.ts
index 0932258..962b72d 100644
--- a/src/lib/const/routes.ts
+++ b/src/lib/const/routes.ts
@@ -1,4 +1,5 @@
 export const ROUTES = {
+  MAIN: "/",
   SETUP: {
     MAIN: "/setup",
     CREATE_ADMIN_ACCOUNT: "/setup/create-admin-account",
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..eb9dbea
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { page } from "$app/state";
+  import { CenteredCard } from "$lib/components/layouts";
+  import { m } from "$i18n/messages";
+  import { CenterState } from "$lib/components/templates/empty-state";
+  import { PageWithClaim } from "$lib/components/ui/page";
+  import { CircleX } from "@lucide/svelte/icons";
+  import { ROUTES } from "$lib/const/routes";
+  import { Button } from "$lib/components/ui/button";
+
+  let description = "";
+  switch (page.status) {
+    case 404:
+      description = m["errorPages.descriptions.404"]();
+      break;
+    default:
+      description = m["errorPages.descriptions.500"]();
+      break;
+  }
+</script>
+
+<PageWithClaim isWithLanguageSwitch>
+  <CenteredCard.Root>
+    <CenteredCard.Main>
+      <CenterState
+        Icon={CircleX}
+        headline={m["errorPages.title"]()}
+        iconBadge={page.status.toString()}
+        {description}
+      />
+    </CenteredCard.Main>
+    <CenteredCard.Action>
+      <Button size="lg" class="w-full" href={ROUTES.MAIN}>
+        {m["errorPages.action"]()}
+      </Button>
+    </CenteredCard.Action>
+  </CenteredCard.Root>
+</PageWithClaim>
diff --git a/src/routes/(pages)/+layout.server.ts b/src/routes/+layout.server.ts
similarity index 100%
rename from src/routes/(pages)/+layout.server.ts
rename to src/routes/+layout.server.ts
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/+layout.svelte
similarity index 96%
rename from src/routes/(pages)/+layout.svelte
rename to src/routes/+layout.svelte
index 33391c3..1e94dd7 100644
--- a/src/routes/(pages)/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
   import { browser } from "$app/environment";
   import { Toaster } from "$lib/components/ui/sonner/index.js";
   import { ModeWatcher, setMode } from "mode-watcher";
-  import "../../app.css";
+  import "../app.css";
   import { setLocale } from "$i18n/runtime";
 
   let { data, children } = $props();