diff --git a/components.json b/components.json
new file mode 100644
index 0000000..71ab3bf
--- /dev/null
+++ b/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "font": "roboto",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/style.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "registries": {}
+}
diff --git a/package-lock.json b/package-lock.json
index 857936f..2ff7793 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,13 @@
       "dependencies": {
         "@headlessui/vue": "^1.7.23",
         "@vueuse/core": "^14.2.1",
+        "@zumer/snapdom": "^2.8.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "lucide-vue-next": "^1.0.0",
         "pinia": "^3.0.4",
+        "reka-ui": "^2.9.6",
+        "tailwind-merge": "^3.5.0",
         "vue": "^3.5.31",
         "vue-i18n": "^11.3.2",
         "vue-router": "^5.0.4",
@@ -38,6 +43,7 @@
         "prettier": "3.8.1",
         "sharp": "^0.34.5",
         "tailwindcss": "^4.2.2",
+        "tw-animate-css": "^1.4.0",
         "typescript": "~6.0.0",
         "vite": "^7.3.2",
         "vite-plugin-vue-devtools": "^8.1.1",
@@ -1193,6 +1199,68 @@
         }
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
+      "integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6",
+        "@floating-ui/utils": "^0.2.11",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@headlessui/vue": {
       "version": "1.7.23",
       "license": "MIT",
@@ -1740,6 +1808,24 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.1.tgz",
+      "integrity": "sha512-6IedsVWXyq4P9Tj+TxuU8WGWM70hYLl12nbYU8jkikVpa6WXapFazPUcHUMDMoWftIDE2ILDkFFte6W2nFCkRQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.6.tgz",
+      "integrity": "sha512-iFgmQaXHE0vytNfpLZWOC2mEJCBRzcUxt53Xf/yCXG93lRvqas237i3r7X4RKMwO3txiyZD4mQjKAByFv6UGSQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@intlify/core-base": {
       "version": "11.3.2",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.3.2.tgz",
@@ -2580,6 +2666,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.21.tgz",
+      "integrity": "sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.2.2",
       "dev": true,
@@ -2913,6 +3008,8 @@
     },
     "node_modules/@types/node": {
       "version": "24.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.2.tgz",
+      "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3627,6 +3724,8 @@
     },
     "node_modules/@vueuse/core": {
       "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
+      "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
@@ -3657,6 +3756,15 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/@zumer/snapdom": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@zumer/snapdom/-/snapdom-2.8.0.tgz",
+      "integrity": "sha512-NhztgFDNfOkFt8Ox9PIJ1IwggyMui5UDazysOgZD7FSGL0G7H8U+J3ft0iecxAS8daj5aC62i3blaTk7s2GcpA==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*"
+      ]
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "dev": true,
@@ -3733,6 +3841,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "dev": true,
@@ -3916,6 +4036,27 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "dev": true,
@@ -4086,6 +4227,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.7.tgz",
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
+      "license": "MIT"
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "dev": true,
@@ -5298,6 +5445,8 @@
     },
     "node_modules/lucide-vue-next": {
       "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-1.0.0.tgz",
+      "integrity": "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==",
       "license": "ISC",
       "peerDependencies": {
         "vue": ">=3.0.1"
@@ -5549,7 +5698,6 @@
     },
     "node_modules/ohash": {
       "version": "2.0.11",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/open": {
@@ -5904,6 +6052,31 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/reka-ui": {
+      "version": "2.9.6",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.6.tgz",
+      "integrity": "sha512-K6bL457owpvWONc7hsjFxo3HDC9s6IzhRqShW0w9JSKelPGfRbkHD558UQTn/NH1cvrXVHygKyC7fExFmRketg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.13",
+        "@floating-ui/vue": "^1.1.6",
+        "@internationalized/date": "^3.5.0",
+        "@internationalized/number": "^3.5.0",
+        "@tanstack/vue-virtual": "^3.12.0",
+        "@vueuse/core": "^14.1.0",
+        "@vueuse/shared": "^14.1.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.5",
+        "ohash": "^2.0.11"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/zernonia"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.4.0"
+      }
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "dev": true,
@@ -6258,6 +6431,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+      "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.2.2",
       "dev": true,
@@ -6407,9 +6590,17 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
       "dev": true,
-      "license": "0BSD",
-      "optional": true
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
     },
     "node_modules/type-check": {
       "version": "0.4.0",
diff --git a/package.json b/package.json
index 6153d09..f3dc17f 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,13 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@vueuse/core": "^14.2.1",
+    "@zumer/snapdom": "^2.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-vue-next": "^1.0.0",
     "pinia": "^3.0.4",
+    "reka-ui": "^2.9.6",
+    "tailwind-merge": "^3.5.0",
     "vue": "^3.5.31",
     "vue-i18n": "^11.3.2",
     "vue-router": "^5.0.4",
@@ -40,6 +45,7 @@
     "prettier": "3.8.1",
     "sharp": "^0.34.5",
     "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.0",
     "vite": "^7.3.2",
     "vite-plugin-vue-devtools": "^8.1.1",
diff --git a/scripts/check-i18n.mjs b/scripts/check-i18n.mjs
index 78fb804..412f6f7 100644
--- a/scripts/check-i18n.mjs
+++ b/scripts/check-i18n.mjs
@@ -7,13 +7,13 @@ const jiti = createJiti(import.meta.url)
 const LOCALE_PAIRS = [
   {
     name: 'text',
-    zhPath: resolve('src/locales/text/zh-CN.ts'),
-    enPath: resolve('src/locales/text/en-US.ts'),
+    zhPath: resolve('src/i18n/locales/text/zh-CN.ts'),
+    enPath: resolve('src/i18n/locales/text/en-US.ts'),
   },
   {
     name: 'questions',
-    zhPath: resolve('src/locales/questions/zh-CN.ts'),
-    enPath: resolve('src/locales/questions/en-US.ts'),
+    zhPath: resolve('src/i18n/locales/questions/zh-CN.ts'),
+    enPath: resolve('src/i18n/locales/questions/en-US.ts'),
   },
 ]
 
diff --git a/src/App.vue b/src/App.vue
index 1f962ec..533dc05 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import AppToaster from '@/components/AppToaster.vue'
+import AppToaster from '@/views/_components/AppToaster.vue'
 </script>
 
 <template>
diff --git a/src/components/RadarChart.vue b/src/components/RadarChart.vue
deleted file mode 100644
index 7ab4349..0000000
--- a/src/components/RadarChart.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import type { PetStats } from '@/types'
-
-const props = withDefaults(
-  defineProps<{
-    stats: PetStats
-    maxValue?: number
-    size?: number
-  }>(),
-  {
-    maxValue: 140,
-    size: 320,
-  },
-)
-
-const labels = ['HP', 'ATK', 'DEF', 'SpA', 'SpD', 'SPD'] as const
-const values = computed<number[]>(() => [
-  props.stats.hp,
-  props.stats.atk,
-  props.stats.def,
-  props.stats.spAtk,
-  props.stats.spDef,
-  props.stats.speed,
-])
-
-const center = computed<number>(() => props.size / 2)
-const radius = computed<number>(() => props.size * 0.36)
-const angleStep = (Math.PI * 2) / labels.length
-
-const toPoint = (ratio: number, index: number): { x: number; y: number } => {
-  const angle = -Math.PI / 2 + angleStep * index
-  return {
-    x: center.value + Math.cos(angle) * radius.value * ratio,
-    y: center.value + Math.sin(angle) * radius.value * ratio,
-  }
-}
-
-const rings = computed<number[]>(() => [0.2, 0.4, 0.6, 0.8, 1])
-const ringPolygons = computed<string[]>(() =>
-  rings.value.map((ring) => labels.map((_, index) => toPoint(ring, index)).map((point) => `${point.x},${point.y}`).join(' ')),
-)
-
-const axes = computed<{ from: { x: number; y: number }; to: { x: number; y: number } }[]>(() =>
-  labels.map((_, index) => ({
-    from: { x: center.value, y: center.value },
-    to: toPoint(1, index),
-  })),
-)
-
-const statPolygon = computed<string>(() =>
-  values.value
-    .map((value, index) => toPoint(Math.max(0, Math.min(1, value / props.maxValue)), index))
-    .map((point) => `${point.x},${point.y}`)
-    .join(' '),
-)
-
-const labelPoints = computed<{ text: string; x: number; y: number }[]>(() =>
-  labels.map((text, index) => {
-    const point = toPoint(1.12, index)
-    return { text, x: point.x, y: point.y }
-  }),
-)
-</script>
-
-<template>
-  <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" class="h-auto w-full">
-    <defs>
-      <linearGradient id="roco-radar-stroke" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#f3ddb5" />
-        <stop offset="100%" stop-color="#d78631" />
-      </linearGradient>
-      <linearGradient id="roco-radar-fill" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="rgba(238,190,126,0.55)" />
-        <stop offset="100%" stop-color="rgba(118,87,62,0.4)" />
-      </linearGradient>
-    </defs>
-
-    <polygon
-      v-for="(polygon, index) in ringPolygons"
-      :key="index"
-      :points="polygon"
-      fill="none"
-      stroke="rgba(230,188,128,0.3)"
-      stroke-width="1"
-    />
-
-    <line
-      v-for="(axis, index) in axes"
-      :key="index"
-      :x1="axis.from.x"
-      :y1="axis.from.y"
-      :x2="axis.to.x"
-      :y2="axis.to.y"
-      stroke="rgba(230,188,128,0.26)"
-      stroke-width="1"
-    />
-
-    <circle :cx="center" :cy="center" r="4" fill="#f4d29a" />
-
-    <polygon
-      :points="statPolygon"
-      fill="url(#roco-radar-fill)"
-      stroke="url(#roco-radar-stroke)"
-      stroke-width="2.5"
-      stroke-linejoin="round"
-    />
-
-    <text
-      v-for="label in labelPoints"
-      :key="label.text"
-      :x="label.x"
-      :y="label.y"
-      text-anchor="middle"
-      dominant-baseline="middle"
-      fill="#f2dfc2"
-      font-size="13"
-      font-weight="700"
-      letter-spacing="0.08em"
-    >
-      {{ label.text }}
-    </text>
-  </svg>
-</template>
diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000..d894dfe
--- /dev/null
+++ b/src/components/ui/badge/Badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
new file mode 100644
index 0000000..bbc0dfa
--- /dev/null
+++ b/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
new file mode 100644
index 0000000..3763470
--- /dev/null
+++ b/src/components/ui/button/Button.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { ButtonVariants } from "."
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "."
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants["variant"]
+  size?: ButtonVariants["size"]
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: "button",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
new file mode 100644
index 0000000..26e2c55
--- /dev/null
+++ b/src/components/ui/button/index.ts
@@ -0,0 +1,38 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Button } from "./Button.vue"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+        "icon": "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..f5a0707
--- /dev/null
+++ b/src/components/ui/card/Card.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardAction.vue b/src/components/ui/card/CardAction.vue
new file mode 100644
index 0000000..c91638b
--- /dev/null
+++ b/src/components/ui/card/CardAction.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardContent.vue b/src/components/ui/card/CardContent.vue
new file mode 100644
index 0000000..dfbc552
--- /dev/null
+++ b/src/components/ui/card/CardContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardDescription.vue b/src/components/ui/card/CardDescription.vue
new file mode 100644
index 0000000..71c1b8d
--- /dev/null
+++ b/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/src/components/ui/card/CardFooter.vue b/src/components/ui/card/CardFooter.vue
new file mode 100644
index 0000000..9e3739e
--- /dev/null
+++ b/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardHeader.vue b/src/components/ui/card/CardHeader.vue
new file mode 100644
index 0000000..4fe4da4
--- /dev/null
+++ b/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue
new file mode 100644
index 0000000..5f479e7
--- /dev/null
+++ b/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
new file mode 100644
index 0000000..1627758
--- /dev/null
+++ b/src/components/ui/card/index.ts
@@ -0,0 +1,7 @@
+export { default as Card } from "./Card.vue"
+export { default as CardAction } from "./CardAction.vue"
+export { default as CardContent } from "./CardContent.vue"
+export { default as CardDescription } from "./CardDescription.vue"
+export { default as CardFooter } from "./CardFooter.vue"
+export { default as CardHeader } from "./CardHeader.vue"
+export { default as CardTitle } from "./CardTitle.vue"
diff --git a/src/components/ui/dialog/Dialog.vue b/src/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..ade5260
--- /dev/null
+++ b/src/components/ui/dialog/Dialog.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
diff --git a/src/components/ui/dialog/DialogClose.vue b/src/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..c5fae04
--- /dev/null
+++ b/src/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..7f86b47
--- /dev/null
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes["class"], showCloseButton?: boolean }>(), {
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="dialog-close"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/src/components/ui/dialog/DialogDescription.vue b/src/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..f52e655
--- /dev/null
+++ b/src/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/src/components/ui/dialog/DialogFooter.vue b/src/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..c7500a9
--- /dev/null
+++ b/src/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { DialogClose } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { Button } from '@/components/ui/button'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  showCloseButton?: boolean
+}>(), {
+  showCloseButton: false,
+})
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+    <DialogClose v-if="showCloseButton" as-child>
+      <Button variant="outline">
+        Close
+      </Button>
+    </DialogClose>
+  </div>
+</template>
diff --git a/src/components/ui/dialog/DialogHeader.vue b/src/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..bfc3c64
--- /dev/null
+++ b/src/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/dialog/DialogOverlay.vue b/src/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..7790077
--- /dev/null
+++ b/src/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
diff --git a/src/components/ui/dialog/DialogScrollContent.vue b/src/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..f2475db
--- /dev/null
+++ b/src/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/src/components/ui/dialog/DialogTitle.vue b/src/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..860f01a
--- /dev/null
+++ b/src/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/src/components/ui/dialog/DialogTrigger.vue b/src/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..49667e9
--- /dev/null
+++ b/src/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/src/components/ui/dialog/index.ts b/src/components/ui/dialog/index.ts
new file mode 100644
index 0000000..6768b09
--- /dev/null
+++ b/src/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"
diff --git a/src/components/ui/progress/Progress.vue b/src/components/ui/progress/Progress.vue
new file mode 100644
index 0000000..5532af7
--- /dev/null
+++ b/src/components/ui/progress/Progress.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/src/components/ui/progress/index.ts b/src/components/ui/progress/index.ts
new file mode 100644
index 0000000..8598b96
--- /dev/null
+++ b/src/components/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"
diff --git a/src/components/ui/separator/Separator.vue b/src/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..78d60ec
--- /dev/null
+++ b/src/components/ui/separator/Separator.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Separator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes["class"] }
+>(), {
+  orientation: "horizontal",
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>
diff --git a/src/components/ui/separator/index.ts b/src/components/ui/separator/index.ts
new file mode 100644
index 0000000..4407287
--- /dev/null
+++ b/src/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue"
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index d86df57..ed17e24 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,9 +1,9 @@
 import { createI18n } from 'vue-i18n'
 
-import enUSQuestions from '@/locales/questions/en-US'
-import zhCNQuestions from '@/locales/questions/zh-CN'
-import enUSText from '@/locales/text/en-US'
-import zhCNText from '@/locales/text/zh-CN'
+import enUSQuestions from '@/i18n/locales/questions/en-US'
+import zhCNQuestions from '@/i18n/locales/questions/zh-CN'
+import enUSText from '@/i18n/locales/text/en-US'
+import zhCNText from '@/i18n/locales/text/zh-CN'
 
 export const i18n = createI18n({
   legacy: false,
diff --git a/src/locales/questions/en-US.ts b/src/i18n/locales/questions/en-US.ts
similarity index 100%
rename from src/locales/questions/en-US.ts
rename to src/i18n/locales/questions/en-US.ts
diff --git a/src/locales/questions/zh-CN.ts b/src/i18n/locales/questions/zh-CN.ts
similarity index 100%
rename from src/locales/questions/zh-CN.ts
rename to src/i18n/locales/questions/zh-CN.ts
diff --git a/src/locales/text/en-US.ts b/src/i18n/locales/text/en-US.ts
similarity index 89%
rename from src/locales/text/en-US.ts
rename to src/i18n/locales/text/en-US.ts
index 8b63edf..b59a887 100644
--- a/src/locales/text/en-US.ts
+++ b/src/i18n/locales/text/en-US.ts
@@ -1,21 +1,29 @@
 const enUSText = {
   quiz: {
-    badgeTitle: 'Roco Personality Mirror',
+    badgeTitle: 'Roco Kingdom Spirit Partner Test',
     progressLabel: 'Question {current} / {total}',
+    previous: 'Previous',
   },
   result: {
     completed: 'Assessment Complete',
     restart: 'Restart Quiz',
-    portraitSource: 'Artwork source: Roco Kingdom World WIKI Bestiary',
+    portraitSource: 'Artwork source: Roco Kingdom World BiliBili WIKI',
+    spiritPartnerLabel: 'Spirit Partner',
     personality: 'Nature',
     habitat: 'Habitat',
     viewWiki: 'View Wiki',
+    shareResultImage: 'Share Result Image',
+    shareLink: 'Share Link',
+    downloadImage: 'Download Image',
+    downloadSoon: 'Image download will be available soon.',
+    downloadSuccess: 'Image downloaded successfully.',
+    downloadFailed: 'Download failed. Please try again.',
     shareToMoments: 'Share to Moments (Copy Link)',
     githubStar: 'Enjoyed it? Give us a Star on GitHub',
     copySuccess: 'Share text and link copied.',
     copyFailed: 'Copy failed. Please copy the URL manually.',
     entertainmentNotice: 'Questions and personality insights are AI-generated. Results are for entertainment only.',
-    shareText: 'I got {mbti} in Roco Personality Mirror, and my spirit partner is {petName}! Try it here:',
+    shareText: 'My spirit partner in Roco Kingdom is {petName}! Try it here:',
     personalities: ['Adamant', 'Bold', 'Calm', 'Jolly', 'Relaxed', 'Careful', 'Brave', 'Gentle'],
   },
   fallbackPet: {
diff --git a/src/locales/text/zh-CN.ts b/src/i18n/locales/text/zh-CN.ts
similarity index 90%
rename from src/locales/text/zh-CN.ts
rename to src/i18n/locales/text/zh-CN.ts
index b81a84a..ad0ea29 100644
--- a/src/locales/text/zh-CN.ts
+++ b/src/i18n/locales/text/zh-CN.ts
@@ -1,21 +1,29 @@
 const zhCNText = {
   quiz: {
-    badgeTitle: '洛克世界人格镜像',
+    badgeTitle: '洛克王国本命测试',
     progressLabel: '第 {current} / {total} 题',
+    previous: '上一题',
   },
   result: {
     completed: '鉴定完成',
     restart: '重新测试',
-    portraitSource: '立绘来源：洛克王国世界 WIKI 精灵图鉴词条',
+    portraitSource: '立绘来源：洛克王国世界 BiliBili WIKI 图鉴',
+    spiritPartnerLabel: '本命精灵',
     personality: '性格',
     habitat: '栖息地',
     viewWiki: '查看 Wiki 资料',
+    shareResultImage: '分享结果图片',
+    shareLink: '分享链接',
+    downloadImage: '下载图片',
+    downloadSoon: '下载图片功能即将上线',
+    downloadSuccess: '图片下载成功',
+    downloadFailed: '下载失败，请稍后重试',
     shareToMoments: '分享到朋友圈（复制链接）',
     githubStar: '觉得不错？来 GitHub 点个 Star',
     copySuccess: '已复制分享文案与链接',
     copyFailed: '复制失败，请手动复制地址栏链接',
     entertainmentNotice: '题目与人格分析皆由AI生成，测试结果仅供娱乐。',
-    shareText: '我在洛克世界人格镜像测出了 {mbti}，本命精灵是 {petName}！你也快来试试吧：',
+    shareText: '我在洛克王国的本命精灵是 {petName}！你也快来试试吧：',
     personalities: ['固执', '大胆', '冷静', '开朗', '悠闲', '慎重', '勇敢', '温和'],
   },
   fallbackPet: {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..c66a9d9
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index fa9925e..56c108c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,12 +7,12 @@ const router = createRouter({
     {
       path: '/',
       name: 'quiz',
-      component: () => import('@/views/Quiz.vue'),
+      component: () => import('@/views/quiz/Quiz.vue'),
     },
     {
       path: '/result',
       name: 'result',
-      component: () => import('@/views/Result.vue'),
+      component: () => import('@/views/result/Overview.vue'),
     },
   ],
 })
diff --git a/src/stores/quiz.ts b/src/stores/quiz.ts
index 826c5c0..e4e1334 100644
--- a/src/stores/quiz.ts
+++ b/src/stores/quiz.ts
@@ -1,10 +1,18 @@
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 
+import { petByMbti, pets } from '@/data/pets'
 import { questions } from '@/data/questions'
-import type { Dimension, Question } from '@/types'
+import type { Dimension, Question, RocoPet } from '@/types'
 
 const dimensions: Dimension[] = ['E', 'I', 'S', 'N', 'T', 'F', 'J', 'P']
+const QUIZ_STORAGE_KEY = 'rbti:quiz-state'
+
+type QuizSnapshot = {
+  currentIndex: number
+  scores: Record<Dimension, number>
+  selectedOptions: Array<number>
+}
 
 const createInitialScores = (): Record<Dimension, number> => ({
   E: 0,
@@ -17,9 +25,79 @@ const createInitialScores = (): Record<Dimension, number> => ({
   P: 0,
 })
 
+const createInitialSelectedOptions = (): Array<number> => questions.map(() => -1)
+
+const isValidScores = (value: unknown): value is Record<Dimension, number> => {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+
+  return dimensions.every((dimension) => Number.isFinite((value as Record<string, unknown>)[dimension]))
+}
+
+const isValidSelectedOptions = (value: unknown): value is Array<number> => {
+  if (!Array.isArray(value) || value.length !== questions.length) {
+    return false
+  }
+
+  return value.every((optionIndex, index) => {
+    if (!Number.isInteger(optionIndex)) {
+      return false
+    }
+    return optionIndex >= -1 && optionIndex < questions[index]!.options.length
+  })
+}
+
+const loadSnapshot = (): QuizSnapshot | null => {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  try {
+    const raw = localStorage.getItem(QUIZ_STORAGE_KEY)
+    if (!raw) {
+      return null
+    }
+
+    const parsed = JSON.parse(raw) as Partial<QuizSnapshot>
+    if (!Number.isInteger(parsed.currentIndex)) {
+      return null
+    }
+    if (parsed.currentIndex! < 0 || parsed.currentIndex! > questions.length) {
+      return null
+    }
+    if (!isValidScores(parsed.scores) || !isValidSelectedOptions(parsed.selectedOptions)) {
+      return null
+    }
+
+    return {
+      currentIndex: parsed.currentIndex!,
+      scores: parsed.scores,
+      selectedOptions: parsed.selectedOptions,
+    }
+  } catch {
+    return null
+  }
+}
+
 export const useQuizStore = defineStore('quiz', () => {
-  const currentIndex = ref(0)
-  const scores = ref<Record<Dimension, number>>(createInitialScores())
+  const snapshot = loadSnapshot()
+  const currentIndex = ref(snapshot?.currentIndex ?? 0)
+  const scores = ref<Record<Dimension, number>>(snapshot?.scores ?? createInitialScores())
+  const selectedOptions = ref<Array<number>>(snapshot?.selectedOptions ?? createInitialSelectedOptions())
+
+  const persistSnapshot = (): void => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    const data: QuizSnapshot = {
+      currentIndex: currentIndex.value,
+      scores: scores.value,
+      selectedOptions: selectedOptions.value,
+    }
+    localStorage.setItem(QUIZ_STORAGE_KEY, JSON.stringify(data))
+  }
 
   const totalQuestions = questions.length
   const currentQuestion = computed<Question | null>(() => questions[currentIndex.value] ?? null)
@@ -32,6 +110,7 @@ export const useQuizStore = defineStore('quiz', () => {
 
     return `${choose('E', 'I')}${choose('S', 'N')}${choose('T', 'F')}${choose('J', 'P')}`
   })
+  const matchedPet = computed<RocoPet>(() => petByMbti[finalMbti.value] ?? pets[0]!)
 
   const applyWeights = (weights: Partial<Record<Dimension, number>>): void => {
     for (const key of dimensions) {
@@ -42,6 +121,15 @@ export const useQuizStore = defineStore('quiz', () => {
     }
   }
 
+  const revertWeights = (weights: Partial<Record<Dimension, number>>): void => {
+    for (const key of dimensions) {
+      const delta = weights[key] ?? 0
+      if (delta !== 0) {
+        scores.value[key] -= delta
+      }
+    }
+  }
+
   const answerQuestion = (optionIndex: number): void => {
     if (isCompleted.value) {
       return
@@ -57,13 +145,45 @@ export const useQuizStore = defineStore('quiz', () => {
       return
     }
 
+    const previousOptionIndex = selectedOptions.value[currentIndex.value] ?? -1
+    if (previousOptionIndex >= 0) {
+      const previousOption = question.options[previousOptionIndex]
+      if (previousOption) {
+        revertWeights(previousOption.weights)
+      }
+    }
+
     applyWeights(option.weights)
+    selectedOptions.value[currentIndex.value] = optionIndex
     currentIndex.value += 1
+    persistSnapshot()
+  }
+
+  const previousQuestion = (): void => {
+    if (currentIndex.value <= 0) {
+      return
+    }
+
+    const previousIndex = currentIndex.value - 1
+    const question = questions[previousIndex]
+    const selectedOptionIndex = selectedOptions.value[previousIndex] ?? -1
+    if (question && selectedOptionIndex >= 0) {
+      const selectedOption = question.options[selectedOptionIndex]
+      if (selectedOption) {
+        revertWeights(selectedOption.weights)
+      }
+      selectedOptions.value[previousIndex] = -1
+    }
+
+    currentIndex.value = previousIndex
+    persistSnapshot()
   }
 
   const restart = (): void => {
     currentIndex.value = 0
     scores.value = createInitialScores()
+    selectedOptions.value = createInitialSelectedOptions()
+    persistSnapshot()
   }
 
   return {
@@ -74,7 +194,9 @@ export const useQuizStore = defineStore('quiz', () => {
     scores,
     isCompleted,
     finalMbti,
+    matchedPet,
     answerQuestion,
+    previousQuestion,
     restart,
   }
 })
diff --git a/src/style.css b/src/style.css
index cef8675..a53915f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,25 +1,69 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+
 @import 'tailwindcss';
 
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
 :root {
   font-family: 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', sans-serif;
-  color: #c1c1c1;
+  --color-text-base: #c1c1c1;
+  color: var(--color-text-base);
   background-color: rgba(243, 239, 227, 0.95);
-  --roco-orange: #d8872f;
-  --roco-orange-strong: #f1a64c;
-  --roco-black: #12100f;
-  --roco-brown: #8b6c4f;
-  --roco-eggshell: #f3ebd8;
-  --theme-page-bg: rgba(243, 239, 227, 0.95);
-  --theme-surface: #292b2e;
-  --theme-surface-hover: #33363a;
-  --theme-border: #3f4348;
-  --theme-title: #ffc65f;
-  --theme-text: #c1c1c1;
-  --theme-text-muted: #a8a8a8;
-  --theme-success: #9bd691;
-  --theme-danger: #e08980;
-  --theme-shadow: 0 14px 35px rgba(0, 0, 0, 0.32);
-  --theme-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.24);
+  --color-bg-light: rgba(243, 239, 227, 0.95);
+  --color-bg-dark: #292b2e;
+  --color-text-accent: #ffc65f;
+  --color-border-light: #cbbfa9;
+  --color-border-light-muted: #d8d1c3;
+  --color-border-dark-strong: #141414;
+  --color-border-dark-muted: #4a4d52;
+  --color-border-accent: #f0cc61;
+  --color-bg-light-hover: #f7f2e7;
+  --color-text-light: #f2f2f2;
+  --color-text-dark: #1f1f1f;
+  --color-text-dark-muted: #6a6670;
+  --color-text-dark-strong: #111111;
+  --color-text-accent-warm: #8c7232;
+  --color-progress-track-warm: #ddd8cd;
+  --color-progress-fill-warm-start: #f0cc61;
+  --color-progress-fill-warm-mid: #f4d978;
+  --color-progress-fill-warm-end: #f6e4a6;
+  --shadow-warm-card: 0 14px 35px rgba(112, 95, 67, 0.14);
+  --shadow-warm-glow: 0 0 14px rgba(240, 204, 97, 0.3);
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
 }
 
 * {
@@ -29,86 +73,174 @@
 body {
   margin: 0;
   min-height: 100vh;
-  background: var(--theme-page-bg);
+  background: var(--color-bg-light);
 }
 
 #app {
   min-height: 100vh;
 }
 
-/* a {
-  color: var(--theme-title);
-} */
+@layer components {
+  .bg-light {
+    background-color: var(--color-bg-light);
+  }
 
-/* h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--theme-title);
-} */
+  .bg-dark {
+    background-color: var(--color-bg-dark);
+  }
 
-@layer components {
-  .tw-page-bg {
-    background-color: var(--theme-page-bg);
+  .border-light {
+    border-color: var(--color-border-light);
   }
 
-  .tw-surface {
-    background-color: var(--theme-surface);
-    border-color: var(--theme-border);
+  .border-dark-hover:hover {
+    border-color: var(--color-border-dark-strong);
   }
 
-  .tw-surface-hover:hover {
-    background-color: var(--theme-surface-hover);
-    border-color: var(--theme-title);
+  .bg-light-hover:hover {
+    background-color: transparent !important;
   }
 
-  .tw-surface-border {
-    border-color: var(--theme-border);
+  .text-dark {
+    color: var(--color-text-dark);
   }
 
-  .tw-title {
-    color: var(--theme-title);
+  .text-accent-warm {
+    color: var(--color-text-accent-warm);
   }
 
-  .tw-text {
-    color: var(--theme-text);
+  .text-light {
+    color: var(--color-text-light);
   }
 
-  .tw-text-muted {
-    color: var(--theme-text-muted);
+  .border-dark-muted {
+    border-color: var(--color-border-dark-muted);
   }
 
-  .tw-link {
-    color: var(--theme-title);
+  .text-brand-accent {
+    color: var(--color-text-accent);
   }
 
-  .tw-elevated {
-    box-shadow: var(--theme-shadow);
+  .shadow-warm {
+    box-shadow: var(--shadow-warm-card);
   }
 
-  .tw-elevated-soft {
-    box-shadow: var(--theme-shadow-soft);
+  .panel-light-md {
+    border-color: transparent;
+    box-shadow: none;
   }
 
-  .tw-progress-track {
-    background-color: #1f2124;
+  .border-light-muted {
+    border-color: var(--color-border-light-muted);
   }
 
-  .tw-progress-fill {
-    background-image: linear-gradient(to right, #ffc65f, #f9be53, #e9ad45);
+  .text-dark-muted {
+    color: var(--color-text-dark-muted);
   }
 
-  .tw-status-success {
-    color: var(--theme-success);
+  .border-accent-hover:hover {
+    border-color: var(--color-border-accent);
   }
 
-  .tw-status-danger {
-    color: var(--theme-danger);
+  .border-accent-enabled-hover:enabled:hover {
+    border-color: var(--color-border-accent);
   }
 
-  .tw-active-glow:active {
-    box-shadow: 0 0 18px rgba(255, 198, 95, 0.22);
+  .text-dark-strong-enabled-hover:enabled:hover {
+    color: var(--color-text-dark-strong);
+  }
+
+  .shadow-warm-glow-active:active {
+    box-shadow: var(--shadow-warm-glow);
+  }
+
+  @media (min-width: 768px) {
+    .panel-light-md {
+      border-color: var(--color-border-light-muted);
+      box-shadow: var(--shadow-warm-card);
+    }
+  }
+
+}
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }
diff --git a/src/views/Quiz.vue b/src/views/Quiz.vue
deleted file mode 100644
index 5c5d0b9..0000000
--- a/src/views/Quiz.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import { useTransition } from '@vueuse/core'
-import { Sparkles } from 'lucide-vue-next'
-import { useI18n } from 'vue-i18n'
-
-import { useQuizStore } from '@/stores/quiz'
-
-defineOptions({
-  name: 'QuizView',
-})
-
-const quizStore = useQuizStore()
-const router = useRouter()
-const { t } = useI18n()
-
-const direction = ref<'next' | 'prev'>('next')
-const progressSource = computed<number>(() => quizStore.progress)
-const animatedProgress = useTransition(progressSource, { duration: 360 })
-
-watch(
-  () => quizStore.isCompleted,
-  (completed) => {
-    if (completed) {
-      void router.push('/result')
-    }
-  },
-)
-
-const answer = (optionIndex: number): void => {
-  direction.value = 'next'
-  quizStore.answerQuestion(optionIndex)
-}
-
-const transitionName = computed<string>(() =>
-  direction.value === 'next' ? 'slide-forward' : 'slide-backward',
-)
-</script>
-
-<template>
-  <main
-    class="tw-page-bg flex min-h-dvh items-center overflow-hidden px-3 py-4 pb-[calc(env(safe-area-inset-bottom)+1rem)] sm:px-4 md:px-8 md:py-8"
-  >
-    <div class="mx-auto flex w-full max-w-5xl flex-col justify-center">
-      <section
-        class="relative rounded-3xl border border-transparent bg-[rgba(243,239,227,0.95)] p-4 shadow-none backdrop-blur-xl sm:p-5 md:border-[#d8d1c3] md:p-10 md:shadow-[0_14px_35px_rgba(112,95,67,0.14)]"
-      >
-        <div class="pointer-events-none absolute inset-0 hidden rounded-3xl border border-[#ece6d9] md:block" />
-        <header class="mb-5 md:mb-6">
-          <p
-            class="mb-3 inline-flex items-center gap-2 rounded-full border border-[#f2df9f] bg-[#f7e9b8] px-3 py-1 text-xs font-semibold tracking-[0.08em] text-[#8c7232]"
-          >
-            <Sparkles class="h-4 w-4" />
-            {{ t('quiz.badgeTitle') }}
-          </p>
-          <div class="mb-3 h-2 rounded-full bg-[#ddd8cd]">
-            <div
-              class="h-full rounded-full bg-gradient-to-r from-[#f0cc61] via-[#f4d978] to-[#f6e4a6]"
-              :style="{ width: `${animatedProgress}%` }"
-            />
-          </div>
-          <p class="text-sm text-[#6a6670]">
-            {{ t('quiz.progressLabel', { current: quizStore.currentIndex + 1, total: quizStore.totalQuestions }) }}
-          </p>
-        </header>
-
-        <Transition :name="transitionName" mode="out-in">
-          <article v-if="quizStore.currentQuestion" :key="quizStore.currentQuestion.id" class="space-y-6">
-            <h1 class="text-xl font-bold leading-relaxed text-[#8c7232] sm:text-2xl md:text-3xl">
-              {{ t(quizStore.currentQuestion.textKey) }}
-            </h1>
-
-            <div class="space-y-3">
-              <button
-                v-for="(option, optionIndex) in quizStore.currentQuestion.options"
-                :key="option.textKey"
-                type="button"
-                class="answer-option group w-full rounded-2xl border border-[#d8d1c3] bg-[rgba(243,239,227,0.95)] px-4 py-3.5 text-left text-[0.95rem] text-[#2f2f2f] transition duration-150 hover:border-[#f0cc61] hover:bg-[#f7f2e7] active:scale-[0.98] active:shadow-[0_0_14px_rgba(240,204,97,0.3)] sm:px-5 sm:py-4 sm:text-base"
-                @click="answer(optionIndex)"
-              >
-                <span class="answer-option-label block font-medium tracking-wide">{{ t(option.textKey) }}</span>
-              </button>
-            </div>
-          </article>
-        </Transition>
-      </section>
-    </div>
-  </main>
-</template>
-
-<style scoped>
-.slide-forward-enter-active,
-.slide-forward-leave-active,
-.slide-backward-enter-active,
-.slide-backward-leave-active {
-  transition: all 0.28s ease;
-}
-
-.slide-forward-enter-from,
-.slide-backward-leave-to {
-  transform: translateX(48px);
-  opacity: 0;
-}
-
-.slide-forward-leave-to,
-.slide-backward-enter-from {
-  transform: translateX(-48px);
-  opacity: 0;
-}
-
-.answer-option:hover .answer-option-label,
-.answer-option:active .answer-option-label {
-  color: #111111;
-}
-</style>
diff --git a/src/views/Result.vue b/src/views/Result.vue
deleted file mode 100644
index 2b642e2..0000000
--- a/src/views/Result.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { Copy, Info, RefreshCcw, Star } from 'lucide-vue-next'
-import { toast } from 'vue-sonner'
-import { useI18n } from 'vue-i18n'
-
-import { petByMbti, pets } from '@/data/pets'
-import { useQuizStore } from '@/stores/quiz'
-import type { RocoPet } from '@/types'
-
-defineOptions({
-  name: 'ResultView',
-})
-
-const quizStore = useQuizStore()
-const router = useRouter()
-const { t, tm } = useI18n()
-
-const repositoryUrl = 'https://github.com/Bainianzzz/RBTI'
-
-const resultMbti = computed<string>(() => quizStore.finalMbti)
-const pet = computed<RocoPet>(() => petByMbti[resultMbti.value] ?? pets[0]!)
-const petName = computed<string>(() => t(pet.value.nameKey))
-const petTitle = computed<string>(() => t(pet.value.titleKey))
-const petDescription = computed<string>(() => t(pet.value.descriptionKey))
-const petHabitat = computed<string>(() => t(pet.value.habitatKey))
-const personalities = computed<string[]>(() => {
-  const values = tm('result.personalities')
-  return Array.isArray(values) ? values.map((item) => String(item)) : []
-})
-
-const randomPersonality = computed<string>(() => {
-  const hash = [...resultMbti.value].reduce((accumulator, char) => accumulator + char.charCodeAt(0), 0)
-  return personalities.value[hash % personalities.value.length] ?? ''
-})
-
-const shareText = computed<string>(
-  () => t('result.shareText', { mbti: resultMbti.value, petName: petName.value }),
-)
-
-const shareToMoments = async (): Promise<void> => {
-  try {
-    const shareUrl = `${window.location.origin}`
-    await navigator.clipboard.writeText(`${shareText.value} ${shareUrl}/RBTI`)
-    toast.success(t('result.copySuccess'))
-  } catch {
-    toast.error(t('result.copyFailed'))
-  }
-}
-
-const restart = async (): Promise<void> => {
-  quizStore.restart()
-  await router.push('/')
-}
-</script>
-
-<template>
-  <main
-    class="tw-page-bg flex flex-col min-h-dvh items-center justify-center"
-  >
-    <section
-      class="mx-auto max-w-5xl rounded-3xl border border-[#d6cebf] bg-[rgba(243,239,227,0.95)] p-4 shadow-[0_14px_35px_rgba(112,95,67,0.14)] backdrop-blur-xl sm:p-5 md:w-full md:p-8"
-    >
-      <header class="mb-6 flex flex-wrap items-center justify-between gap-3">
-        <div>
-          <p class="mt-1 text-2xl font-extrabold tracking-[0.16em] text-[#1f1f1f] md:text-2xl md:tracking-[0.2em]">
-            {{ t('result.completed') }}
-          </p>
-        </div>
-        <button
-          type="button"
-          class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-[#d6cebf] bg-[rgba(243,239,227,0.95)] px-4 py-2 text-sm text-[#1f1f1f] transition hover:border-[#1f1f1f] hover:bg-[#f7f2e7] sm:w-auto"
-          @click="restart"
-        >
-          <RefreshCcw class="h-4 w-4" />
-          {{ t('result.restart') }}
-        </button>
-      </header>
-
-      <div class="grid gap-4 sm:gap-6 md:grid-cols-[1.2fr_1fr] bg-[#292b2e] rounded-4xl">
-        <aside class="rounded-2xl bg-[#f2f2f2] p-1 sm:p-2">
-          <img
-            :src="pet.imageUrl"
-            :alt="petName"
-            loading="lazy"
-            decoding="async"
-            class="mx-auto max-h-72 w-auto max-w-full shrink-0"
-          />
-          <p class="mt-2 text-center text-xs text-[#3b3832]">{{ t('result.portraitSource') }}</p>
-        </aside>
-
-        <article class="rounded-2xl bg-[#292b2e] p-5">
-          <div class="flex flex-wrap items-baseline gap-x-3 gap-y-2">
-            <h2 class="text-2xl font-semibold text-[#f2f2f2]">{{ petName }}</h2>
-            <span class="rounded-full border border-[#4a4d52] bg-[#292b2e] px-3 py-1 text-xs tracking-widest text-[#f2f2f2]">
-              {{ petTitle }}
-            </span>
-            <span class="rounded-full border border-[#4a4d52] bg-[#292b2e] px-3 py-1 text-xs tracking-widest text-[#f2f2f2]">
-              {{ t('result.personality') }}：{{ randomPersonality }}
-            </span>
-          </div>
-          <p class="mt-4 text-sm leading-7 text-[#f2f2f2]">{{ petDescription }}</p>
-          <p class="mt-3 text-sm text-[#f2f2f2]">{{ t('result.habitat') }}：{{ petHabitat }}</p>
-          <a
-            :href="pet.wikiUrl"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="mt-4 inline-flex text-sm text-[var(--theme-title)] underline-offset-4 hover:underline"
-          >
-            {{ t('result.viewWiki') }}
-          </a>
-        </article>
-      </div>
-
-      <div class="mt-4 p-0 sm:mt-6">
-        <div class="grid gap-3 sm:grid-cols-2">
-          <button
-            type="button"
-            class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-[#d6cebf] bg-[rgba(243,239,227,0.95)] px-4 py-3.5 text-sm text-[#1f1f1f] transition hover:border-[#1f1f1f] hover:bg-[#f7f2e7] active:scale-[0.98]"
-            @click="shareToMoments"
-          >
-            <Copy class="h-4 w-4" />
-            {{ t('result.shareToMoments') }}
-          </button>
-          <a
-            :href="repositoryUrl"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-[#d6cebf] bg-[rgba(243,239,227,0.95)] px-4 py-3.5 text-sm text-[#8c7232] transition hover:border-[#1f1f1f] hover:bg-[#f7f2e7]"
-          >
-            <Star class="h-4 w-4" />
-            {{ t('result.githubStar') }}
-          </a>
-        </div>
-      </div>
-    </section>
-    <p class="flex flex-row gap-1 mt-4 items-center justify-center text-center text-sm text-gray-500">
-      <Info class="h-4 w-4" />
-      {{ t('result.entertainmentNotice') }}
-    </p>
-  </main>
-</template>
diff --git a/src/components/AppToaster.vue b/src/views/_components/AppToaster.vue
similarity index 100%
rename from src/components/AppToaster.vue
rename to src/views/_components/AppToaster.vue
diff --git a/src/views/quiz/Quiz.vue b/src/views/quiz/Quiz.vue
new file mode 100644
index 0000000..b1267a0
--- /dev/null
+++ b/src/views/quiz/Quiz.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useTransition } from '@vueuse/core'
+import { ArrowLeft, Sparkles } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import QuizProgressBar from '@/views/quiz/_components/QuizProgressBar.vue'
+import { useQuizStore } from '@/stores/quiz.ts'
+
+defineOptions({
+  name: 'QuizView',
+})
+
+const quizStore = useQuizStore()
+const router = useRouter()
+const { t } = useI18n()
+
+const direction = ref<'next' | 'prev'>('next')
+const progressSource = computed<number>(() => quizStore.progress)
+const animatedProgress = useTransition(progressSource, { duration: 360 })
+
+watch(
+  () => quizStore.isCompleted,
+  (completed) => {
+    if (completed) {
+      void router.push('/result')
+    }
+  },
+)
+
+const answer = (optionIndex: number): void => {
+  direction.value = 'next'
+  quizStore.answerQuestion(optionIndex)
+}
+
+const goToPreviousQuestion = (): void => {
+  if (quizStore.currentIndex <= 0) {
+    return
+  }
+  direction.value = 'prev'
+  quizStore.previousQuestion()
+}
+
+const transitionName = computed<string>(() =>
+  direction.value === 'next' ? 'slide-forward' : 'slide-backward',
+)
+
+const progressCurrent = computed<number>(() =>
+  Math.min(quizStore.currentIndex + 1, quizStore.totalQuestions),
+)
+
+const canGoBack = computed<boolean>(() => quizStore.currentIndex > 0)
+</script>
+
+<template>
+  <main
+    class="bg-light flex min-h-dvh items-center overflow-hidden px-3 py-4 pb-[calc(env(safe-area-inset-bottom)+1rem)] sm:px-4 md:px-8 md:py-8"
+  >
+    <div class="mx-auto flex w-full max-w-5xl flex-col justify-center">
+      <div class="bg-light relative rounded-3xl border-0 p-4 shadow-none backdrop-blur-xl sm:p-5 md:border md:border-light-muted md:p-10 md:shadow-[var(--shadow-warm-card)]">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          class="bg-light border-light-muted text-dark-muted border-accent-enabled-hover text-dark-strong-enabled-hover absolute right-4 top-4 z-10 gap-1.5 rounded-full md:right-6 md:top-6"
+          :disabled="!canGoBack"
+          @click="goToPreviousQuestion"
+        >
+          <ArrowLeft aria-hidden="true" class="h-4 w-4" />
+          <span>{{ t('quiz.previous') }}</span>
+        </Button>
+        <div class="pointer-events-none absolute inset-0 hidden rounded-3xl border border-[#ece6d9] md:block" />
+
+        <div class="mb-0 space-y-3">
+          <Badge class="w-fit gap-2 border border-[#f2df9f] bg-[#f7e9b8] px-3 py-1 text-xs font-semibold tracking-[0.08em] text-[#8c7232]">
+            <Sparkles class="h-4 w-4" />
+            {{ t('quiz.badgeTitle') }}
+          </Badge>
+          <QuizProgressBar :value="animatedProgress" />
+          <p class="text-dark-muted text-sm">
+            {{ t('quiz.progressLabel', { current: progressCurrent, total: quizStore.totalQuestions }) }}
+          </p>
+        </div>
+
+        <div class="pt-5 md:pt-6">
+          <Transition :name="transitionName" mode="out-in">
+            <article v-if="quizStore.currentQuestion" :key="quizStore.currentQuestion.id" class="space-y-6">
+              <h1 class="text-xl font-bold leading-relaxed text-[#8c7232] sm:text-2xl md:text-3xl">
+                {{ t(quizStore.currentQuestion.textKey) }}
+              </h1>
+
+              <div class="space-y-3">
+                <Button
+                  v-for="(option, optionIndex) in quizStore.currentQuestion.options"
+                  :key="option.textKey"
+                  type="button"
+                  variant="outline"
+                  class="bg-light border-light-muted border-accent-hover shadow-warm-glow-active h-auto w-full justify-start rounded-2xl px-4 py-3.5 text-left text-[0.95rem] whitespace-normal break-words leading-relaxed text-[#2f2f2f] transition duration-150 hover:bg-[#f7f2e7] active:scale-[0.98] sm:px-5 sm:py-4 sm:text-base"
+                  @click="answer(optionIndex)"
+                >
+                  <span class="block font-medium tracking-wide text-inherit">{{ t(option.textKey) }}</span>
+                </Button>
+              </div>
+            </article>
+          </Transition>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.slide-forward-enter-active,
+.slide-forward-leave-active,
+.slide-backward-enter-active,
+.slide-backward-leave-active {
+  transition: all 0.28s ease;
+}
+
+.slide-forward-enter-from,
+.slide-backward-leave-to {
+  transform: translateX(48px);
+  opacity: 0;
+}
+
+.slide-forward-leave-to,
+.slide-backward-enter-from {
+  transform: translateX(-48px);
+  opacity: 0;
+}
+
+</style>
diff --git a/src/views/quiz/_components/QuizProgressBar.vue b/src/views/quiz/_components/QuizProgressBar.vue
new file mode 100644
index 0000000..f344383
--- /dev/null
+++ b/src/views/quiz/_components/QuizProgressBar.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  value: number
+}>()
+</script>
+
+<template>
+  <div class="quiz-progress-track h-2 rounded-full">
+    <div
+      class="quiz-progress-fill h-full rounded-full"
+      :style="{ width: `${value}%` }"
+    />
+  </div>
+</template>
+
+<style scoped>
+.quiz-progress-track {
+  background-color: var(--color-progress-track-warm);
+}
+
+.quiz-progress-fill {
+  background-image: linear-gradient(
+    to right,
+    var(--color-progress-fill-warm-start),
+    var(--color-progress-fill-warm-mid),
+    var(--color-progress-fill-warm-end)
+  );
+}
+</style>
diff --git a/src/views/result/Overview.vue b/src/views/result/Overview.vue
new file mode 100644
index 0000000..7dbd329
--- /dev/null
+++ b/src/views/result/Overview.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { Info, RefreshCcw, Star } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { useQuizStore } from '@/stores/quiz.ts'
+import ResultShareCard from '@/views/result/_components/ResultShareCard.vue'
+import ShareResultDialog from '@/views/result/_components/ShareResultDialog.vue'
+
+defineOptions({
+  name: 'ResultView',
+})
+
+const quizStore = useQuizStore()
+const router = useRouter()
+const { t } = useI18n()
+
+const repositoryUrl = 'https://github.com/Bainianzzz/RBTI'
+
+const restart = async (): Promise<void> => {
+  quizStore.restart()
+  await router.push('/')
+}
+</script>
+
+<template>
+  <main
+    class="bg-light flex min-h-dvh flex-col items-center justify-center"
+  >
+    <section
+      class="bg-light md:border md:border-light md:shadow-warm mx-auto w-full max-w-5xl space-y-6 rounded-3xl p-4 backdrop-blur-xl sm:space-y-7 sm:p-5 md:p-8"
+    >
+      <header class="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <p class="mt-1 text-2xl font-extrabold tracking-[0.16em] text-[#1f1f1f] md:tracking-[0.2em]">
+            {{ t('result.completed') }}
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          class="border-light bg-light text-dark border-dark-hover bg-light-hover w-full rounded-xl text-sm sm:w-auto"
+          @click="restart"
+        >
+          <RefreshCcw class="h-4 w-4" />
+          {{ t('result.restart') }}
+        </Button>
+      </header>
+
+      <div id="result-share-card">
+        <ResultShareCard />
+      </div>
+
+      <Separator class="bg-[#d8d1c3]" />
+
+      <div class="w-full">
+        <div class="grid w-full gap-3 sm:grid-cols-2">
+          <ShareResultDialog />
+          <Button
+            as-child
+            variant="outline"
+            class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition"
+          >
+            <a
+              :href="repositoryUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Star class="h-4 w-4" />
+              {{ t('result.githubStar') }}
+            </a>
+          </Button>
+        </div>
+      </div>
+    </section>
+
+    <p class="flex flex-row gap-1 mt-4 items-center justify-center text-center text-sm text-gray-500">
+      <Info class="h-4 w-4" />
+      {{ t('result.entertainmentNotice') }}
+    </p>
+  </main>
+</template>
diff --git a/src/views/result/_components/ResultShareCard.vue b/src/views/result/_components/ResultShareCard.vue
new file mode 100644
index 0000000..79d66f1
--- /dev/null
+++ b/src/views/result/_components/ResultShareCard.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { Badge } from '@/components/ui/badge'
+import { useQuizStore } from '@/stores/quiz.ts'
+
+const props = defineProps<{ exportMode?: boolean }>()
+
+const quizStore = useQuizStore()
+const { t, tm } = useI18n()
+
+const pet = computed(() => quizStore.matchedPet)
+const petName = computed<string>(() => t(pet.value.nameKey))
+const petDescription = computed<string>(() => t(pet.value.descriptionKey))
+const petHabitat = computed<string>(() => t(pet.value.habitatKey))
+const personalities = computed<string[]>(() => {
+  const values = tm('result.personalities')
+  return Array.isArray(values) ? values.map((item) => String(item)) : []
+})
+const randomPersonality = computed<string>(() => {
+  const hash = [...quizStore.finalMbti].reduce((accumulator, char) => accumulator + char.charCodeAt(0), 0)
+  return personalities.value[hash % personalities.value.length] ?? ''
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'grid rounded-3xl bg-[#292b2e] opacity-100',
+      props.exportMode ? 'gap-4 grid-cols-1' : 'gap-4 sm:gap-6 md:grid-cols-[1.2fr_1fr]',
+    ]"
+  >
+    <aside :class="['rounded-2xl bg-[#f2f2f2]', props.exportMode ? 'p-1' : 'p-1 sm:p-2']">
+      <img
+        :src="pet.imageUrl"
+        :alt="petName"
+        :loading="props.exportMode ? 'eager' : 'lazy'"
+        decoding="async"
+        class="mx-auto max-h-72 w-auto max-w-full shrink-0"
+      />
+      <p class="mt-2 text-center text-xs text-[#3b3832]">{{ t('result.portraitSource') }}</p>
+    </aside>
+
+    <article class="rounded-2xl bg-[#292b2e] p-5 opacity-100">
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <h2 class="text-light text-2xl font-semibold">{{ t('result.spiritPartnerLabel') }}: {{ petName }}</h2>
+        <Badge class="border-dark-muted bg-[#292b2e] text-light rounded-full border px-3 py-1 text-xs tracking-widest">
+          {{ t('result.personality') }}: {{ randomPersonality }}
+        </Badge>
+      </div>
+      <p class="text-light mt-4 text-sm leading-7">{{ petDescription }}</p>
+      <p
+        v-if="!props.exportMode"
+        class="text-light mt-3 text-sm"
+      >
+        {{ t('result.habitat') }}：{{ petHabitat }}
+      </p>
+      <a
+        v-if="!props.exportMode"
+        :href="pet.wikiUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-brand-accent mt-4 inline-flex text-sm underline-offset-4 hover:underline !text-brand-accent visited:!text-brand-accent hover:!text-brand-accent active:!text-brand-accent"
+      >
+        {{ t('result.viewWiki') }}
+      </a>
+    </article>
+  </div>
+</template>
diff --git a/src/views/result/_components/ShareResultDialog.vue b/src/views/result/_components/ShareResultDialog.vue
new file mode 100644
index 0000000..3a435d7
--- /dev/null
+++ b/src/views/result/_components/ShareResultDialog.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Copy, Download } from 'lucide-vue-next'
+import { toast } from 'vue-sonner'
+import { useI18n } from 'vue-i18n'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { useQuizStore } from '@/stores/quiz.ts'
+
+import ResultShareCard from './ResultShareCard.vue'
+import { downloadResultShareCardImage, RESULT_SHARE_CARD_EXPORT_ID } from './utils'
+
+const quizStore = useQuizStore()
+const { t } = useI18n()
+
+const petName = computed<string>(() => t(quizStore.matchedPet.nameKey))
+const shareText = computed<string>(
+  () => t('result.shareText', { petName: petName.value }),
+)
+
+const shareLink = async (): Promise<void> => {
+  try {
+    const shareUrl = `${window.location.origin}`
+    await navigator.clipboard.writeText(`${shareText.value} ${shareUrl}/RBTI`)
+    toast.success(t('result.copySuccess'))
+  } catch {
+    toast.error(t('result.copyFailed'))
+  }
+}
+
+const downloadShareImage = async (): Promise<void> => {
+  const didDownload = await downloadResultShareCardImage(quizStore.finalMbti)
+  if (didDownload) {
+    toast.success(t('result.downloadSuccess'))
+  } else {
+    toast.error(t('result.downloadFailed'))
+  }
+}
+</script>
+
+<template>
+  <div
+    :id="RESULT_SHARE_CARD_EXPORT_ID"
+    class="pointer-events-none fixed top-0 left-[-10000px] z-[-1] w-[390px]"
+    aria-hidden="true"
+  >
+    <ResultShareCard :export-mode="true" />
+  </div>
+
+  <div class="grid w-full gap-3 md:hidden">
+    <Button
+      type="button"
+      variant="outline"
+      class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition"
+      @click="downloadShareImage"
+    >
+      <Download class="h-4 w-4" />
+      {{ t('result.downloadImage') }}
+    </Button>
+    <Button
+      type="button"
+      variant="outline"
+      class="border-light bg-light text-dark border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition active:scale-[0.98]"
+      @click="shareLink"
+    >
+      <Copy class="h-4 w-4" />
+      {{ t('result.shareLink') }}
+    </Button>
+  </div>
+
+  <div class="hidden md:block">
+    <Dialog>
+      <DialogTrigger as-child>
+        <Button
+          type="button"
+          variant="outline"
+          class="border-light bg-light text-dark border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition active:scale-[0.98]"
+        >
+          <Copy class="h-4 w-4" />
+          {{ t('result.shareResultImage') }}
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        :show-close-button="true"
+        class="bg-light border-light shadow-warm w-[96vw] max-w-[min(96vw,1400px)] max-h-[92vh] space-y-6 overflow-y-auto rounded-2xl border p-5 md:p-10 lg:p-12"
+      >
+        <DialogHeader>
+          <DialogTitle class="text-dark text-lg font-semibold md:text-xl">
+            {{ t('result.shareResultImage') }}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div class="mx-auto w-full max-w-[1280px]">
+          <ResultShareCard />
+        </div>
+
+        <div class="grid w-full gap-3 sm:grid-cols-2">
+          <Button
+            type="button"
+            variant="outline"
+            class="border-light bg-light text-dark border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition active:scale-[0.98]"
+            @click="shareLink"
+          >
+            <Copy class="h-4 w-4" />
+            {{ t('result.shareLink') }}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            class="border-light bg-light text-accent-warm border-dark-hover bg-light-hover h-auto w-full rounded-xl py-3.5 text-sm transition"
+            @click="downloadShareImage"
+          >
+            <Download class="h-4 w-4" />
+            {{ t('result.downloadImage') }}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
+</template>
diff --git a/src/views/result/_components/utils.ts b/src/views/result/_components/utils.ts
new file mode 100644
index 0000000..ff0ef98
--- /dev/null
+++ b/src/views/result/_components/utils.ts
@@ -0,0 +1,39 @@
+import { snapdom } from '@zumer/snapdom'
+
+export const RESULT_SHARE_CARD_EXPORT_ID = 'result-share-card-export'
+const EXPORT_SCALE = 2
+
+const waitForImages = async (container: HTMLElement): Promise<void> => {
+  const images = Array.from(container.querySelectorAll('img'))
+  await Promise.all(
+    images.map(async (image) => {
+      if (image.complete) {
+        return
+      }
+      await new Promise<void>((resolve) => {
+        image.addEventListener('load', () => resolve(), { once: true })
+        image.addEventListener('error', () => resolve(), { once: true })
+      })
+    }),
+  )
+}
+
+export const downloadResultShareCardImage = async (mbti: string): Promise<boolean> => {
+  const shareCard = document.getElementById(RESULT_SHARE_CARD_EXPORT_ID)
+  if (!shareCard) {
+    return false
+  }
+
+  try {
+    await waitForImages(shareCard)
+    const fileName = `rbti-result-${mbti.toLowerCase() || 'unknown'}.png`
+    const capture = await snapdom(shareCard, { scale: EXPORT_SCALE })
+    await capture.download({
+      type: 'png',
+      filename: fileName,
+    })
+    return true
+  } catch {
+    return false
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
index c0f2d86..8074db3 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -6,7 +6,7 @@
     // Extra safety for array and object lookups, but may have false positives.
     "noUncheckedIndexedAccess": true,
 
-    // Path mapping for cleaner imports.
+    // Path mapping for cleaner imports (paths are resolved from this config file).
     "paths": {
       "@/*": ["./src/*"]
     },
diff --git a/tsconfig.json b/tsconfig.json
index 100cf6a..a3e245f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,5 +10,10 @@
     {
       "path": "./tsconfig.vitest.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }