diff --git a/package.json b/package.json
index 5ff3ef6..eb1bdb1 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "lucide-svelte": "^0.440.0",
     "mode-watcher": "^0.4.1",
     "svelte-headless-table": "^0.18.2",
+    "svelte-radix": "^1.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ce1298..82c2a74 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       svelte-headless-table:
         specifier: ^0.18.2
         version: 0.18.2(svelte@4.2.19)
+      svelte-radix:
+        specifier: ^1.1.1
+        version: 1.1.1(svelte@4.2.19)
       tailwind-merge:
         specifier: ^2.5.2
         version: 2.5.2
@@ -2403,6 +2406,11 @@ packages:
       typescript:
         optional: true
 
+  svelte-radix@1.1.1:
+    resolution: {integrity: sha512-TCbV7fzlJ2aEUB0nu2EodVA+r1eYj526IYpmGUTV32Z0bIrCUvx3K8xX3tcxR5dDFA5ZBU1Hxr4RYC4TDFEQ4A==}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.1
+
   svelte-render@2.0.1:
     resolution: {integrity: sha512-RpB0SurwXm4xhjvHHtjeqMmvd645FURb79GFOotScOSqnKK5vpqBgoBPGC0pp+E/eZgDSQ9rRAdn/+N4ys1mXQ==}
     peerDependencies:
@@ -4938,6 +4946,10 @@ snapshots:
       postcss-load-config: 4.0.2(postcss@8.4.45)
       typescript: 5.6.2
 
+  svelte-radix@1.1.1(svelte@4.2.19):
+    dependencies:
+      svelte: 4.2.19
+
   svelte-render@2.0.1(svelte@4.2.19):
     dependencies:
       svelte: 4.2.19
diff --git a/src/entrypoints/options/App.svelte b/src/entrypoints/options/App.svelte
index f5cacc5..8b78336 100644
--- a/src/entrypoints/options/App.svelte
+++ b/src/entrypoints/options/App.svelte
@@ -9,18 +9,21 @@
   import Dataset from './components/Dataset.svelte'
   import Form from './components/Form.svelte'
   import { StarIcon } from 'lucide-svelte'
+  import DarkMode from './components/DarkMode.svelte'
+  import { Button } from '$lib/components/ui/button'
 </script>
 
 <Card class="container my-8">
   <CardHeader>
     <CardTitle class="flex items-center gap-2">
-      <span class="text-xl font-bold">Redirector</span>
-      <a
-        href="https://github.com/rxliuli/redirector"
-        target="_blank"
-        class="ml-auto"
-      >
-        <StarIcon class="w-4 h-4 text-yellow-500" />
+      <span class="text-xl font-bold mr-auto">Redirector</span>
+      <DarkMode />
+      <a href="https://github.com/rxliuli/redirector" target="_blank">
+        <Button variant="outline" size="icon">
+          <StarIcon
+            class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all text-yellow-500"
+          />
+        </Button>
       </a>
     </CardTitle>
   </CardHeader>
diff --git a/src/entrypoints/options/components/DarkMode.svelte b/src/entrypoints/options/components/DarkMode.svelte
new file mode 100644
index 0000000..1c48c7e
--- /dev/null
+++ b/src/entrypoints/options/components/DarkMode.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Sun from 'svelte-radix/Sun.svelte'
+  import Moon from 'svelte-radix/Moon.svelte'
+  import { toggleMode } from 'mode-watcher'
+  import { Button } from '$lib/components/ui/button/index.js'
+</script>
+
+<Button on:click={toggleMode} variant="outline" size="icon">
+  <Sun
+    class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+  />
+  <Moon
+    class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+  />
+  <span class="sr-only">Toggle theme</span>
+</Button>