diff --git a/frontend/error.vue b/frontend/error.vue
new file mode 100644
index 00000000..2235c703
--- /dev/null
+++ b/frontend/error.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import type { NuxtError } from "#app";
+  import { buttonVariants } from "@/components/ui/button";
+
+  const props = defineProps({
+    error: {
+      type: Object as () => NuxtError,
+      required: true,
+    },
+  });
+
+  console.log(props.error);
+</script>
+
+<template>
+  <main class="grid min-h-screen w-full place-items-center">
+    <h1 class="flex flex-col gap-5 text-center font-extrabold">
+      <span class="text-7xl">{{ error.statusCode }}.</span>
+      <span class="text-5xl"> {{ error.message }} </span>
+      <NuxtLink to="/" :class="buttonVariants({ size: 'lg' })"> Return Home </NuxtLink>
+    </h1>
+  </main>
+</template>
diff --git a/frontend/layouts/404.vue b/frontend/layouts/404.vue
deleted file mode 100644
index 31e31392..00000000
--- a/frontend/layouts/404.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <main class="grid min-h-screen w-full place-items-center">
-    <slot></slot>
-  </main>
-</template>
diff --git a/frontend/pages/[...all].vue b/frontend/pages/[...all].vue
deleted file mode 100644
index 9abc3a2a..00000000
--- a/frontend/pages/[...all].vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-  import { buttonVariants } from "@/components/ui/button";
-
-  useHead({
-    title: "404. Not Found",
-  });
-  definePageMeta({
-    layout: "404",
-  });
-</script>
-
-<template>
-  <h1 class="flex flex-col gap-5 text-center font-extrabold">
-    <span class="text-7xl">404.</span>
-    <span class="text-5xl"> Page Not Found </span>
-    <NuxtLink to="/" :class="buttonVariants({ size: 'lg' })"> Return Home </NuxtLink>
-  </h1>
-</template>