diff --git a/src/components/Layout.astro b/src/components/Layout.astro
new file mode 100644
index 0000000..a819cdb
--- /dev/null
+++ b/src/components/Layout.astro
@@ -0,0 +1,53 @@
+---
+const pageTitle = "Introductie Sticky";
+---
+<!doctype html>
+<html lang="nl">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+        <link
+            rel="icon"
+            type="image/png"
+            href="/favicon-96x96.png"
+            sizes="96x96"
+        />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+        />
+        <meta name="apple-mobile-web-app-title" content="Introductie Sticky" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="generator" content={Astro.generator} />
+        <title>{pageTitle}</title>
+        <meta
+            name="description"
+            content="Informatiepagina voor de bachelorintroductie informatica en informatiekunde georganiseerd door studievereniging Sticky."
+        />
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        />
+    </head>
+    <body>
+        <slot />
+    </body>
+</html>
+
+<style is:global>
+    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900');
+
+    /* GLOBAL STYLES */
+
+    html,
+    body {
+        margin: 0;
+        width: 100%;
+        height: auto;
+        font-family: "Outfit", "Arial", "sans-serif";
+    }
+</style>
+
diff --git a/src/pages/404.astro b/src/pages/404.astro
new file mode 100644
index 0000000..e856254
--- /dev/null
+++ b/src/pages/404.astro
@@ -0,0 +1,99 @@
+---
+import Layout from "../components/Layout.astro";
+---
+
+<Layout pageTitle="404 - Pagina niet gevonden | Introductie Sticky">
+    <div class="error-container">
+        <h1 class="error-code">404</h1>
+        <h2 class="error-title">Oeps! Die pagina bestaat niet!</h2>
+        <p class="error-message">
+            Helaas bestaat de pagina die je probeert te bereiken niet, of is die verplaatst 😕.
+            Controleer of je de juiste URL hebt ingevoerd of ga terug naar de homepagina.
+        </p>
+        <a href="/" class="home-button">
+            <i class="fas fa-home icon"></i>Terug naar homepagina
+        </a>
+        <div class="error-footer">
+            <p>Heb je hulp nodig? <a href="/#contact">Neem contact op</a> met Sticky.</p>
+            <p>&copy; 2025 S.V. Sticky</p>
+        </div>
+    </div>
+</Layout>
+
+<style>
+    @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
+    
+    html, body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        font-family: "Outfit", "Arial", "sans-serif";
+        background-color: #f8f9fa;
+    }
+    
+    .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        min-height: 100vh;
+        padding: 0 2rem;
+    }
+    
+    .error-code {
+        font-size: clamp(6rem, 15vw, 10rem);
+        font-weight: 900;
+        margin: 0;
+        color: #197052;
+        line-height: 1;
+    }
+    
+    .error-title {
+        font-size: clamp(1.5rem, 4vw, 2.5rem);
+        margin-top: 0;
+        margin-bottom: 1.5rem;
+    }
+    
+    .error-message {
+        font-size: 1.2rem;
+        max-width: 600px;
+        margin-bottom: 2rem;
+    }
+    
+    .home-button {
+        background-color: #197052;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+        font-weight: 600;
+        cursor: pointer;
+        text-decoration: none;
+        transition: background-color 0.3s;
+    }
+    
+    .home-button:hover {
+        background-color: #145c44;
+    }
+    
+    .error-footer {
+        margin-top: 3rem;
+        font-size: 0.9rem;
+        color: #6c757d;
+    }
+    
+    .error-footer a {
+        color: #197052;
+        text-decoration: none;
+    }
+    
+    .error-footer a:hover {
+        text-decoration: underline;
+    }
+    
+    .icon {
+        margin-right: 0.5rem;
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8d22bcb..b6e6344 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,68 +9,25 @@ import Smallprint from "../components/Smallprint.astro";
 import Contact from "../components/Contact.astro";
 import Footer from "../components/Footer.astro";
 import FAQ from "../components/FAQ.astro";
+import Layout from "../components/Layout.astro";
 ---
 
-<!doctype html>
-<html lang="nl">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width" />
-        <link
-            rel="icon"
-            type="image/png"
-            href="/favicon-96x96.png"
-            sizes="96x96"
-        />
-        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-        <link rel="shortcut icon" href="/favicon.ico" />
-        <link
-            rel="apple-touch-icon"
-            sizes="180x180"
-            href="/apple-touch-icon.png"
-        />
-        <meta name="apple-mobile-web-app-title" content="Introductie Sticky" />
-        <link rel="manifest" href="/site.webmanifest" />
-        <meta name="generator" content={Astro.generator} />
-        <title>Introductie Sticky</title>
-        <meta
-            name="description"
-            content="Informatiepagina voor de bachelorintroductie informatica en informatiekunde georganiseerd door studievereniging Sticky."
-        />
-        <link
-            rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-        />
-    </head>
-    <body>
-        <Nav />
-        <Header />
-        <main>
-            <Information />
-            <Inschrijven />
-            <Theme />
-            <Association />
-            <FAQ />
-            <Contact />
-            <Smallprint />
-        </main>
-        <Footer />
-    </body>
-</html>
+<Layout>
+    <Nav />
+    <Header />
+    <main>
+        <Information />
+        <Inschrijven />
+        <Theme />
+        <Association />
+        <FAQ />
+        <Contact />
+        <Smallprint />
+    </main>
+    <Footer />
+</Layout>
 
 <style is:global>
-    @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
-
-    /* GLOBAL STYLES */
-
-    html,
-    body {
-        margin: 0;
-        width: 100%;
-        height: auto;
-        font-family: "Outfit", "Arial", "sans-serif";
-    }
-
     body::before {
         content: "";
         position: fixed;
@@ -114,7 +71,7 @@ import FAQ from "../components/FAQ.astro";
         > strong,
         > b {
             color: #197052;
-            /* color: #61518f */
+            font-weight: bold;
         }
     }
 
