diff --git a/layouts/error.vue b/layouts/error.vue
index c54ac3a..1b9944b 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1 +1,12 @@
-<template>error!</template>
+<script setup lang="ts">
+import Default from "./default.vue";
+</script>
+
+<template>
+  <Default>
+    <main class="flex flex-col grow">
+      <h1>404 - Not Found</h1>
+      <p>The page you are looking for cannot be found.</p>
+    </main>
+  </Default>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7f0b527..8c94d72 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,9 @@ export default defineNuxtConfig({
   sitemap: {
     hostname: process.env.BASE_URL || "https://eggworld.tk",
   },
+  generate: {
+    fallback: "404.html",
+  },
   tailwindcss: {},
   colorMode: {
     classSuffix: "",
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index 3448814..fd9a4da 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -49,6 +49,10 @@ const captionText =
       </template>
       <template #not-found>
         <h1>404 - Not Found</h1>
+        <p>
+          Thanks for dropping by! But the page you're looking for can't be
+          found.
+        </p>
       </template>
     </ContentRenderer>
   </div>