diff --git a/src/layouts/err404.astro b/src/layouts/err404.astro
new file mode 100644
index 0000000..70cb6b0
--- /dev/null
+++ b/src/layouts/err404.astro
@@ -0,0 +1,35 @@
+--- 
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description">
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/assets/branding/obo-icon.png" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
+<style is:global>
+	:root {
+		--accent: 136, 58, 234;
+		--accent-light: 224, 204, 250;
+		--accent-dark: 49, 10, 101;
+		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+	}
+	html {
+		font-family: system-ui, sans-serif;
+		background: #13151A;
+		background-size: 224px;
+	}
+</style>
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..4ab7402
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,33 @@
+---
+import Layout from '../layouts/err404.astro';
+import Card from '../components/Card.astro';
+---
+
+<Layout title="Error 404">
+	<main>
+        <marquee behavior="alternate" scrollamount="30">
+            <marquee behavior="alternate" scrollamount="30" direction="down">
+                <img src="assets/404/404.png">
+            </marquee>
+        </marquee>
+    </main>
+</Layout>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        -webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+    }
+    body{
+        width: 100%;
+        height: 100vh;
+        background-image: url('assets/404/crt.gif');
+        -webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+    }
+    marquee{
+        height: 100vh;
+    }
+    </style>
\ No newline at end of file
