diff --git a/src/app.css b/src/app.css
index 7124280..f41d9fe 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+.abs-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..8967df7
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { Button } from '$lib/components/ui/button';
+  import BrokenHeart from 'lucide-svelte/icons/heart-crack';
+  import * as Card from '$lib/components/ui/card';
+</script>
+
+<main class="relative size-full">
+  <Card.Root class="md:w-1/4 w-1/2 h-1/2 abs-center flex flex-col">
+    <Card.Header class="h-fit">
+      <Card.Title class="text-center">{page.status} - {page.error?.message}</Card.Title>
+    </Card.Header>
+    <Card.Content class="relative grow">
+      <BrokenHeart class="size-1/2 abs-center" />
+    </Card.Content>
+    <Card.Footer class="h-fit">
+      <Button href="/" variant="secondary" class="mx-auto">Go Home</Button>
+    </Card.Footer>
+  </Card.Root>
+</main>