diff --git a/biome.json b/biome.json
index ba1dd06..3281577 100644
--- a/biome.json
+++ b/biome.json
@@ -21,7 +21,8 @@
         "useSortedClasses": "error"
       },
       "a11y": {
-        "useKeyWithClickEvents": "off"
+        "useKeyWithClickEvents": "off",
+        "noLabelWithoutControl": "off"
       },
       "security": {
         "noDangerouslySetInnerHtml": "off"
diff --git a/bun.lockb b/bun.lockb
index 63468d5..9a2b4da 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
index dacb5ae..20cbd61 100644
--- a/components/ThemeSwitcher.tsx
+++ b/components/ThemeSwitcher.tsx
@@ -4,23 +4,28 @@ import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { cn } from "@/lib/utils"
-import { CheckCircleIcon } from "@heroicons/react/20/solid"
-import { Moon, Sun } from "lucide-react"
+import { CheckIcon, MinusIcon, Moon, Sun } from "lucide-react"
 import { useTranslations } from "next-intl"
 import { useTheme } from "next-themes"
+import { useId } from "react"
+import { RadioGroup, RadioGroupItem } from "./ui/radio-group"
+
+const items = [
+  { value: "light", label: "Light", image: "/ui-light.png" },
+  { value: "dark", label: "Dark", image: "/ui-dark.png" },
+  { value: "system", label: "System", image: "/ui-system.png" },
+]
 
 export function ModeToggle() {
   const { setTheme, theme } = useTheme()
   const t = useTranslations("ThemeSwitcher")
 
-  const handleSelect = (e: Event, newTheme: string) => {
-    e.preventDefault()
+  const handleSelect = (newTheme: string) => {
     setTheme(newTheme)
   }
+  const id = useId()
 
   return (
     <DropdownMenu>
@@ -35,31 +40,40 @@ export function ModeToggle() {
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
-        <DropdownMenuItem
-          className={cn("rounded-b-[5px]", {
-            "gap-3 bg-muted font-semibold": theme === "light",
-          })}
-          onSelect={(e) => handleSelect(e, "light")}
-        >
-          {t("Light")} {theme === "light" && <CheckCircleIcon className="size-4" />}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className={cn("rounded-[5px]", {
-            "gap-3 bg-muted font-semibold": theme === "dark",
-          })}
-          onSelect={(e) => handleSelect(e, "dark")}
-        >
-          {t("Dark")} {theme === "dark" && <CheckCircleIcon className="size-4" />}
-        </DropdownMenuItem>
-        <DropdownMenuItem
-          className={cn("rounded-t-[5px]", {
-            "gap-3 bg-muted font-semibold": theme === "system",
-          })}
-          onSelect={(e) => handleSelect(e, "system")}
-        >
-          {t("System")} {theme === "system" && <CheckCircleIcon className="size-4" />}
-        </DropdownMenuItem>
+      <DropdownMenuContent className="px-3 pt-3 pb-2" align="end">
+        <fieldset className="space-y-4">
+          <RadioGroup className="flex gap-3" defaultValue={theme} onValueChange={handleSelect}>
+            {items.map((item) => (
+              <label key={`${id}-${item.value}`}>
+                <RadioGroupItem
+                  id={`${id}-${item.value}`}
+                  value={item.value}
+                  className="peer sr-only after:absolute after:inset-0"
+                />
+                <img
+                  src={item.image}
+                  alt={item.label}
+                  width={88}
+                  height={70}
+                  className="relative cursor-pointer overflow-hidden rounded-[8px] border border-neutral-300 shadow-xs outline-none transition-[color,box-shadow] peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-50 dark:border-neutral-700"
+                />
+                <span className="group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70">
+                  <CheckIcon
+                    size={16}
+                    className="group-peer-data-[state=unchecked]:hidden"
+                    aria-hidden="true"
+                  />
+                  <MinusIcon
+                    size={16}
+                    className="group-peer-data-[state=checked]:hidden"
+                    aria-hidden="true"
+                  />
+                  <span className="font-medium text-xs">{t(item.label)}</span>
+                </span>
+              </label>
+            ))}
+          </RadioGroup>
+        </fieldset>
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..e2dbb20
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import type * as React from "react"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "aspect-square size-4 shrink-0 rounded-full border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center text-current">
+        <svg
+          role="img"
+          aria-label="Radio indicator"
+          width="6"
+          height="6"
+          viewBox="0 0 6 6"
+          fill="currentcolor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="3" cy="3" r="3" />
+        </svg>
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/i18n-metadata.ts b/i18n-metadata.ts
index 16a1daf..de87343 100644
--- a/i18n-metadata.ts
+++ b/i18n-metadata.ts
@@ -4,7 +4,7 @@ import getEnv from "./lib/env-entry"
 export const localeItems = [
   { code: "en", name: "English" },
   { code: "ja", name: "日本語" },
-  { code: "zh-t", name: "中文繁體" },
+  { code: "zh-TW", name: "中文繁體" },
   { code: "zh", name: "中文简体" },
 ]
 
diff --git a/messages/zh-t.json b/messages/zh-TW.json
similarity index 100%
rename from messages/zh-t.json
rename to messages/zh-TW.json
diff --git a/package.json b/package.json
index 6254379..b909349 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-navigation-menu": "^1.2.5",
     "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
diff --git a/public/ui-dark.png b/public/ui-dark.png
new file mode 100644
index 0000000..a67fcc0
Binary files /dev/null and b/public/ui-dark.png differ
diff --git a/public/ui-light.png b/public/ui-light.png
new file mode 100644
index 0000000..dbe35ba
Binary files /dev/null and b/public/ui-light.png differ
diff --git a/public/ui-system.png b/public/ui-system.png
new file mode 100644
index 0000000..693820b
Binary files /dev/null and b/public/ui-system.png differ