diff --git a/src/router/index.ts b/src/router/index.ts
index 665ee18..18e5973 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -49,6 +49,11 @@ const router = createRouter({
       name: 'editor',
       component: () => import('../views/EditorView.vue'),
     },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'not-found',
+      component: () => import('../views/NotFound.vue'),
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..4dac06a
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+    <div class="mb-8 relative">
+      <div class="text-9xl font-black text-gray-200 dark:text-gray-800 select-none">404</div>
+      <div class="absolute inset-0 flex items-center justify-center">
+        <div class="text-6xl">👻</div>
+      </div>
+    </div>
+    
+    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">Page not found</h1>
+    <p class="text-lg text-gray-600 dark:text-gray-400 max-w-md mb-8">
+      Oops! The page you're looking for doesn't exist or has been moved.
+    </p>
+    
+    <router-link 
+      to="/" 
+      class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-xl transition-all shadow-lg hover:shadow-indigo-500/30 flex items-center gap-2"
+    >
+      <i class="fas fa-home"></i>
+      <span>Go home</span>
+    </router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+// No script logic needed for this simple view
+</script>