diff --git a/src/views/exceptions/Forbidden.vue b/src/views/exceptions/Forbidden.vue
index 42dea41cc..542a6d078 100644
--- a/src/views/exceptions/Forbidden.vue
+++ b/src/views/exceptions/Forbidden.vue
@@ -1 +1,6 @@
-<template>403</template>
+<script setup lang="ts">
+import Exception from "./components/Exception.vue";
+</script>
+<template>
+  <Exception code="403" message="没有权限访问此页面" />
+</template>
diff --git a/src/views/exceptions/NotFound.vue b/src/views/exceptions/NotFound.vue
index 2300138bc..fd4fead90 100644
--- a/src/views/exceptions/NotFound.vue
+++ b/src/views/exceptions/NotFound.vue
@@ -1 +1,6 @@
-<template>404</template>
+<script setup lang="ts">
+import Exception from "./components/Exception.vue";
+</script>
+<template>
+  <Exception code="404" message="没有找到该页面" />
+</template>
diff --git a/src/views/exceptions/components/Exception.vue b/src/views/exceptions/components/Exception.vue
new file mode 100644
index 000000000..fe44ddc7b
--- /dev/null
+++ b/src/views/exceptions/components/Exception.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { VButton, VSpace } from "@halo-dev/components";
+import { useRouter } from "vue-router";
+withDefaults(
+  defineProps<{
+    code: number | string;
+    title?: string;
+    message?: string;
+  }>(),
+  {
+    title: undefined,
+    message: undefined,
+  }
+);
+
+const router = useRouter();
+</script>
+
+<template>
+  <div class="grid h-screen place-content-center bg-white px-4">
+    <div class="text-center">
+      <h1 class="text-8xl font-black text-gray-200">
+        {{ code }}
+      </h1>
+
+      <p class="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+        {{ title }}
+      </p>
+
+      <p class="mt-4 text-gray-500">{{ message }}</p>
+
+      <div class="mt-4">
+        <VSpace>
+          <VButton @click="router.back()"> 返回 </VButton>
+          <VButton type="secondary" :route="{ name: 'Dashboard' }">
+            仪表盘
+          </VButton>
+        </VSpace>
+      </div>
+    </div>
+  </div>
+</template>