diff --git a/ui/localization/messages/en.json b/ui/localization/messages/en.json
index 94c50ad1..70d7fc11 100644
--- a/ui/localization/messages/en.json
+++ b/ui/localization/messages/en.json
@@ -591,5 +591,13 @@
   "advanced_troubleshooting_mode_title": "Troubleshooting Mode",
   "advanced_update_ssh_key_button": "Update SSH Key",
   "advanced_usb_emulation_description": "Control the USB emulation state",
-  "advanced_usb_emulation_title": "USB Emulation"
+  "advanced_usb_emulation_title": "USB Emulation",
+  
+  "appearance_description": "Choose your preferred color theme",
+  "appearance_page_description": "Customize the look and feel of your JetKVM interface",
+  "appearance_theme_dark": "Dark",
+  "appearance_theme_light": "Light",
+  "appearance_theme_system": "System",
+  "appearance_theme": "Theme",
+  "appearance_title": "Appearance"
 }
\ No newline at end of file
diff --git a/ui/src/routes/devices.$id.settings.appearance.tsx b/ui/src/routes/devices.$id.settings.appearance.tsx
index 9f7ec01e..c5ad9e2f 100644
--- a/ui/src/routes/devices.$id.settings.appearance.tsx
+++ b/ui/src/routes/devices.$id.settings.appearance.tsx
@@ -1,9 +1,9 @@
 import { useCallback, useState } from "react";
 
+import { SelectMenuBasic } from "@components/SelectMenuBasic";
 import { SettingsItem } from "@components/SettingsItem";
-
-import { SettingsPageHeader } from "../components/SettingsPageheader";
-import { SelectMenuBasic } from "../components/SelectMenuBasic";
+import { SettingsPageHeader } from "@components/SettingsPageheader";
+import { m } from "@localizations/messages.js";
 
 export default function SettingsAppearanceRoute() {
   const [currentTheme, setCurrentTheme] = useState(() => {
@@ -28,22 +28,24 @@ export default function SettingsAppearanceRoute() {
     }
   }, []);
 
+  const themeOptions = [
+    { value: "system", label: m.appearance_theme_system() },
+    { value: "light", label: m.appearance_theme_light() },
+    { value: "dark", label: m.appearance_theme_dark() },
+  ];
+
   return (
     <div className="space-y-4">
       <SettingsPageHeader
-        title="Appearance"
-        description="Customize the look and feel of your JetKVM interface"
+        title={m.appearance_title()}
+        description={m.appearance_page_description()}
       />
-      <SettingsItem title="Theme" description="Choose your preferred color theme">
+      <SettingsItem title={m.appearance_theme()} description={m.appearance_description()}>
         <SelectMenuBasic
           size="SM"
           label=""
           value={currentTheme}
-          options={[
-            { value: "system", label: "System" },
-            { value: "light", label: "Light" },
-            { value: "dark", label: "Dark" },
-          ]}
+          options={themeOptions}
           onChange={e => {
             setCurrentTheme(e.target.value);
             handleThemeChange(e.target.value);