diff --git a/packages/desktop/src/app/app.tsx b/packages/desktop/src/app/app.tsx
index dcbbcf7f..3c13362d 100644
--- a/packages/desktop/src/app/app.tsx
+++ b/packages/desktop/src/app/app.tsx
@@ -20,6 +20,7 @@ import TemplateModal from "./components/template-modal";
 import WorkspacePicker from "./components/workspace-picker";
 import CreateWorkspaceModal from "./components/create-workspace-modal";
 import McpAuthModal from "./components/mcp-auth-modal";
+import LanguagePickerModal from "./components/language-picker-modal";
 import OnboardingView from "./pages/onboarding";
 import DashboardView from "./pages/dashboard";
 import SessionView from "./pages/session";
@@ -67,7 +68,7 @@ import {
   groupMessageParts,
   isTauriRuntime,
 } from "./utils";
-import { currentLocale, setLocale, t, type Language } from "../i18n";
+import { currentLocale, setLocale, t, type Language, initLocale } from "../i18n";
 import {
   isWindowsPlatform,
   lastUserModelFromMessages,
@@ -129,6 +130,7 @@ export default function App() {
   const [rememberModeChoice, setRememberModeChoice] = createSignal(false);
   const [tab, setTab] = createSignal<DashboardTab>("home");
   const [themeMode, setThemeMode] = createSignal<ThemeMode>(getInitialThemeMode());
+  const [languagePickerOpen, setLanguagePickerOpen] = createSignal(false);
 
   const [engineSource, setEngineSource] = createSignal<"path" | "sidecar">(
     isTauriRuntime() ? "sidecar" : "path"
@@ -767,6 +769,19 @@ export default function App() {
     setModelPickerOpen(true);
   }
 
+  function openLanguagePicker() {
+    setLanguagePickerOpen(true);
+  }
+
+  function closeLanguagePicker() {
+    setLanguagePickerOpen(false);
+  }
+
+  function handleLanguageSelect(language: Language) {
+    setLocale(language);
+    setLanguagePickerOpen(false);
+  }
+
   function applyModelSelection(next: ModelRef) {
     if (modelPickerTarget() === "default") {
       setDefaultModel(next);
@@ -1177,6 +1192,9 @@ export default function App() {
 
 
   onMount(async () => {
+    // Initialize i18n locale from localStorage
+    initLocale();
+
     const modePref = readModePreference();
     if (modePref) {
       setRememberModeChoice(true);
@@ -1712,6 +1730,11 @@ export default function App() {
     onResetStartupPreference: () => clearModePreference(),
     themeMode: themeMode(),
     setThemeMode,
+    currentLanguage: currentLocale(),
+    languagePickerOpen: languagePickerOpen(),
+    openLanguagePicker,
+    closeLanguagePicker,
+    handleLanguageSelect,
     pendingPermissions: pendingPermissions(),
     events: events(),
     safeStringify,
@@ -1873,6 +1896,13 @@ export default function App() {
         onScopeChange={setTemplateDraftScope}
       />
 
+      <LanguagePickerModal
+        open={languagePickerOpen()}
+        currentLanguage={currentLocale()}
+        onSelect={handleLanguageSelect}
+        onClose={closeLanguagePicker}
+      />
+
       <WorkspacePicker
         open={workspaceStore.workspacePickerOpen()}
         workspaces={workspaceStore.filteredWorkspaces()}
diff --git a/packages/desktop/src/app/components/language-picker-modal.tsx b/packages/desktop/src/app/components/language-picker-modal.tsx
index 2eb58683..2bb2fc57 100644
--- a/packages/desktop/src/app/components/language-picker-modal.tsx
+++ b/packages/desktop/src/app/components/language-picker-modal.tsx
@@ -1,6 +1,7 @@
 import { For, Show } from "solid-js";
-import { CheckCircle2, Circle } from "lucide-solid";
+import { CheckCircle2, Circle, X } from "lucide-solid";
 import { LANGUAGE_OPTIONS, type Language, t, currentLocale } from "../../i18n";
+import Button from "./button";
 
 export type LanguagePickerModalProps = {
   open: boolean;
@@ -10,55 +11,68 @@ export type LanguagePickerModalProps = {
 };
 
 export default function LanguagePickerModal(props: LanguagePickerModalProps) {
+  // Use reactive translation that updates when locale changes
   const translate = (key: string) => t(key, currentLocale());
 
   return (
     <Show when={props.open}>
-      <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-        <div class="bg-zinc-900 rounded-2xl p-6 w-full max-w-md border border-zinc-800 shadow-xl">
-          <h3 class="text-lg font-medium text-white mb-4">{translate("settings.language")}</h3>
+      <div class="fixed inset-0 z-50 bg-gray-1/60 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="bg-gray-2 border border-gray-6/70 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden">
+          <div class="p-6">
+            <div class="flex items-start justify-between gap-4 mb-5">
+              <div>
+                <h3 class="text-lg font-semibold text-gray-12">{translate("settings.language")}</h3>
+                <p class="text-sm text-gray-11 mt-1">{translate("settings.language.description")}</p>
+              </div>
+              <Button variant="ghost" class="!p-2 rounded-full" onClick={props.onClose}>
+                <X size={16} />
+              </Button>
+            </div>
 
-          <div class="space-y-2">
-            <For each={LANGUAGE_OPTIONS}>
-              {(option) => (
-                <button
-                  class={`w-full p-3 rounded-xl text-left transition-all ${
-                    props.currentLanguage === option.value
-                      ? "bg-zinc-800 text-white border-2 border-zinc-700"
-                      : "bg-zinc-950 text-zinc-400 hover:bg-zinc-900 border-2 border-transparent"
-                  }`}
-                  onClick={() => {
-                    props.onSelect(option.value);
-                    props.onClose();
-                  }}
-                >
-                  <div class="flex items-center justify-between gap-2">
-                    <div class="flex-1">
-                      <div class="font-medium text-sm">{option.nativeName}</div>
-                      <Show when={option.label !== option.nativeName}>
-                        <div class="text-xs text-zinc-500 mt-0.5">{option.label}</div>
-                      </Show>
-                    </div>
-                    <div class="text-zinc-500">
-                      <Show
-                        when={props.currentLanguage === option.value}
-                        fallback={<Circle size={14} />}
-                      >
-                        <CheckCircle2 size={14} class="text-emerald-400" />
-                      </Show>
-                    </div>
-                  </div>
-                </button>
-              )}
-            </For>
-          </div>
+            <div class="space-y-2">
+              <For each={LANGUAGE_OPTIONS}>
+                {(option) => {
+                  const isActive = () => props.currentLanguage === option.value;
+                  
+                  return (
+                    <button
+                      class={`w-full text-left rounded-xl border px-4 py-3 transition-colors ${
+                        isActive()
+                          ? "border-gray-6/20 bg-gray-12/5"
+                          : "border-gray-6/70 bg-gray-1/40 hover:bg-gray-1/60"
+                      }`}
+                      onClick={() => {
+                        props.onSelect(option.value);
+                      }}
+                    >
+                      <div class="flex items-center justify-between gap-3">
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium text-sm text-gray-12">{option.nativeName}</div>
+                          <Show when={option.label !== option.nativeName}>
+                            <div class="text-xs text-gray-10 mt-0.5">{option.label}</div>
+                          </Show>
+                        </div>
+                        <div class="text-gray-10 shrink-0">
+                          <Show
+                            when={isActive()}
+                            fallback={<Circle size={14} />}
+                          >
+                            <CheckCircle2 size={14} class="text-green-11" />
+                          </Show>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                }}
+              </For>
+            </div>
 
-          <button
-            class="mt-4 w-full py-2 text-sm text-zinc-500 hover:text-white transition-colors"
-            onClick={props.onClose}
-          >
-            {translate("common.cancel")}
-          </button>
+            <div class="mt-5 flex justify-end">
+              <Button variant="outline" onClick={props.onClose}>
+                {translate("common.cancel")}
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
     </Show>
diff --git a/packages/desktop/src/app/pages/dashboard.tsx b/packages/desktop/src/app/pages/dashboard.tsx
index 6d88c2cd..7a153da6 100644
--- a/packages/desktop/src/app/pages/dashboard.tsx
+++ b/packages/desktop/src/app/pages/dashboard.tsx
@@ -10,7 +10,9 @@ import type {
 } from "../types";
 import type { McpDirectoryInfo } from "../constants";
 import type { WorkspaceInfo } from "../lib/tauri";
+import type { Language } from "../../i18n";
 import { formatRelativeTime } from "../utils";
+import { t, currentLocale } from "../../i18n";
 
 import Button from "../components/button";
 import OpenWorkLogo from "../components/openwork-logo";
@@ -144,6 +146,11 @@ export type DashboardViewProps = {
   toggleUpdateAutoCheck: () => void;
   themeMode: "light" | "dark" | "system";
   setThemeMode: (value: "light" | "dark" | "system") => void;
+  currentLanguage: Language;
+  languagePickerOpen: boolean;
+  openLanguagePicker: () => void;
+  closeLanguagePicker: () => void;
+  handleLanguageSelect: (language: Language) => void;
   updateStatus: {
     state: string;
     lastCheckedAt?: number | null;
@@ -189,22 +196,25 @@ export type DashboardViewProps = {
 };
 
 export default function DashboardView(props: DashboardViewProps) {
+  const translate = (key: string) => t(key, currentLocale());
+
   const title = createMemo(() => {
+    const locale = currentLocale();
     switch (props.tab) {
       case "sessions":
-        return "Sessions";
+        return t("nav.sessions", locale);
       case "templates":
-        return "Templates";
+        return t("nav.templates", locale);
       case "skills":
-        return "Skills";
+        return t("nav.skills", locale);
       case "plugins":
-        return "Plugins";
+        return t("nav.plugins", locale);
       case "mcp":
-        return "MCPs";
+        return t("nav.mcp", locale);
       case "settings":
-        return "Settings";
+        return t("nav.settings", locale);
       default:
-        return "Dashboard";
+        return t("nav.dashboard", locale);
     }
   });
 
@@ -273,8 +283,8 @@ export default function DashboardView(props: DashboardViewProps) {
     });
   });
 
-  const navItem = (t: DashboardTab, label: any, icon: any) => {
-    const active = () => props.tab === t;
+  const navItem = (tab: DashboardTab, label: any, icon: any) => {
+    const active = () => props.tab === tab;
     return (
       <button
         class={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${
@@ -282,7 +292,7 @@ export default function DashboardView(props: DashboardViewProps) {
             ? "bg-gray-2 text-gray-12"
             : "text-gray-10 hover:text-gray-12 hover:bg-gray-2/50"
         }`}
-        onClick={() => props.setTab(t)}
+        onClick={() => props.setTab(tab)}
       >
         {icon}
         {label}
@@ -302,32 +312,32 @@ export default function DashboardView(props: DashboardViewProps) {
           </div>
 
           <nav class="space-y-1">
-            {navItem("home", "Dashboard", <Command size={18} />)}
-            {navItem("sessions", "Sessions", <Play size={18} />)}
-            {navItem("templates", "Templates", <FileText size={18} />)}
-            {navItem("skills", "Skills", <Package size={18} />)}
-            {navItem("plugins", "Plugins", <Cpu size={18} />)}
+            {navItem("home", t("nav.dashboard", currentLocale()), <Command size={18} />)}
+            {navItem("sessions", t("nav.sessions", currentLocale()), <Play size={18} />)}
+            {navItem("templates", t("nav.templates", currentLocale()), <FileText size={18} />)}
+            {navItem("skills", t("nav.skills", currentLocale()), <Package size={18} />)}
+            {navItem("plugins", t("nav.plugins", currentLocale()), <Cpu size={18} />)}
             {navItem(
               "mcp",
               <span class="inline-flex items-center gap-2">
-                MCPs
+                {t("nav.mcp", currentLocale())}
                 <span class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full bg-amber-7/20 text-amber-12">
                   Alpha
                 </span>
               </span>,
               <Server size={18} />,
             )}
-            {navItem("settings", "Settings", <Settings size={18} />)}
+            {navItem("settings", t("nav.settings", currentLocale()), <Settings size={18} />)}
           </nav>
         </div>
 
         <div class="space-y-4">
           <div class="px-3 py-3 rounded-xl bg-gray-2/50 border border-gray-6">
             <div class="flex items-center gap-2 text-xs font-medium text-gray-11 mb-2">
-              Connection
+              {translate("dashboard.connection")}
               <Show when={props.developerMode}>
                 <span class="text-gray-7">
-                  {props.mode === "host" ? "Local Engine" : "Client Mode"}
+                  {props.mode === "host" ? translate("dashboard.local_engine") : translate("dashboard.client_mode")}
                 </span>
               </Show>
             </div>
@@ -344,7 +354,7 @@ export default function DashboardView(props: DashboardViewProps) {
                   props.clientConnected ? "text-green-11" : "text-gray-10"
                 }`}
               >
-                {props.clientConnected ? "Connected" : "Not connected"}
+                {props.clientConnected ? translate("dashboard.connected") : translate("dashboard.not_connected")}
               </span>
             </div>
             <Show when={props.developerMode}>
@@ -361,7 +371,7 @@ export default function DashboardView(props: DashboardViewProps) {
               disabled={props.busy}
               class="w-full"
             >
-              Connect
+              {translate("dashboard.connect")}
             </Button>
           </Show>
 
@@ -372,7 +382,7 @@ export default function DashboardView(props: DashboardViewProps) {
               disabled={props.busy}
               class="w-full"
             >
-              Stop & Disconnect
+              {translate("dashboard.stop_disconnect")}
             </Button>
           </Show>
 
@@ -383,7 +393,7 @@ export default function DashboardView(props: DashboardViewProps) {
               disabled={props.busy}
               class="w-full"
             >
-              Disconnect
+              {translate("dashboard.disconnect")}
             </Button>
           </Show>
         </div>
@@ -418,10 +428,10 @@ export default function DashboardView(props: DashboardViewProps) {
                   props.createSessionAndOpen();
                 }}
                 disabled={props.newTaskDisabled}
-                title={props.newTaskDisabled ? props.busyHint ?? "Busy" : ""}
+                title={props.newTaskDisabled ? props.busyHint ?? translate("dashboard.busy") : ""}
               >
                 <Play size={16} />
-                New Task
+                {translate("dashboard.new_task")}
               </Button>
             </Show>
 
@@ -443,7 +453,7 @@ export default function DashboardView(props: DashboardViewProps) {
                 disabled={props.busy}
               >
                 <Plus size={16} />
-                New
+                {translate("common.new")}
               </Button>
             </Show>
           </div>
@@ -457,23 +467,22 @@ export default function DashboardView(props: DashboardViewProps) {
                   <div class="bg-gray-1 rounded-[22px] p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-6">
                     <div class="space-y-2 text-center md:text-left">
                       <h2 class="text-2xl font-semibold text-gray-12">
-                        What should we do today?
+                        {translate("dashboard.hero_title")}
                       </h2>
                       <p class="text-gray-11">
-                        Describe an outcome. OpenWork will run it and keep an
-                        audit trail.
+                        {translate("dashboard.hero_description")}
                       </p>
                     </div>
                     <Button
                       onClick={props.createSessionAndOpen}
                       disabled={props.newTaskDisabled}
                       title={
-                        props.newTaskDisabled ? props.busyHint ?? "Busy" : ""
+                        props.newTaskDisabled ? props.busyHint ?? translate("dashboard.busy") : ""
                       }
                       class="w-full md:w-auto py-3 px-6 text-base"
                     >
                       <Play size={18} />
-                      New Task
+                      {translate("dashboard.new_task")}
                     </Button>
                   </div>
                 </div>
@@ -482,13 +491,13 @@ export default function DashboardView(props: DashboardViewProps) {
               <section>
                 <div class="flex items-center justify-between mb-4">
                   <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider">
-                    Quick Start Templates
+                    {translate("dashboard.quick_start_templates")}
                   </h3>
                   <button
                     class="text-sm text-gray-10 hover:text-gray-12"
                     onClick={() => props.setTab("templates")}
                   >
-                    View all
+                    {translate("dashboard.view_all")}
                   </button>
                 </div>
 
@@ -496,7 +505,7 @@ export default function DashboardView(props: DashboardViewProps) {
                   when={quickTemplates().length}
                   fallback={
                     <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-6 text-sm text-gray-10">
-                      No templates yet. Starter templates will appear here.
+                      {translate("dashboard.no_templates")}
                     </div>
                   }
                 >
@@ -512,7 +521,7 @@ export default function DashboardView(props: DashboardViewProps) {
                           </div>
                           <h4 class="font-medium text-gray-12 mb-1">{t.title}</h4>
                           <p class="text-sm text-gray-10">
-                            {t.description || "Run a saved workflow"}
+                            {t.description || translate("dashboard.run_workflow")}
                           </p>
                         </button>
                       )}
@@ -523,7 +532,7 @@ export default function DashboardView(props: DashboardViewProps) {
 
               <section>
                 <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider mb-4">
-                  Recent Sessions
+                  {translate("dashboard.recent_sessions")}
                 </h3>
 
                 <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl overflow-hidden">
@@ -561,7 +570,7 @@ export default function DashboardView(props: DashboardViewProps) {
                                 }
                               >
                                 <span class="text-[11px] px-2 py-0.5 rounded-full border border-gray-7/60 text-gray-10">
-                                  this workspace
+                                  {translate("dashboard.this_workspace")}
                                 </span>
                               </Show>
                             </div>
@@ -570,7 +579,7 @@ export default function DashboardView(props: DashboardViewProps) {
                         <div class="flex items-center gap-4">
                           <span class="text-xs px-2 py-0.5 rounded-full border border-gray-7/60 text-gray-11 flex items-center gap-1.5">
                             <span class="w-1.5 h-1.5 rounded-full bg-current" />
-                            {props.sessionStatusById[s.id] ?? "idle"}
+                            {translate(`status.${props.sessionStatusById[s.id] ?? "idle"}`)}
                           </span>
                         </div>
                       </button>
@@ -579,7 +588,7 @@ export default function DashboardView(props: DashboardViewProps) {
 
                   <Show when={!props.sessions.length}>
                     <div class="p-6 text-sm text-gray-10">
-                      No sessions yet.
+                      {translate("dashboard.no_sessions")}
                     </div>
                   </Show>
                 </div>
@@ -589,7 +598,7 @@ export default function DashboardView(props: DashboardViewProps) {
             <Match when={props.tab === "sessions"}>
               <section>
                 <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider mb-4">
-                  Recent Sessions
+                  {translate("dashboard.recent_sessions")}
                 </h3>
 
                 <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl overflow-hidden">
@@ -627,7 +636,7 @@ export default function DashboardView(props: DashboardViewProps) {
                                 }
                               >
                                 <span class="text-[11px] px-2 py-0.5 rounded-full border border-gray-7/60 text-gray-10">
-                                  this workspace
+                                  {translate("dashboard.this_workspace")}
                                 </span>
                               </Show>
                             </div>
@@ -636,7 +645,7 @@ export default function DashboardView(props: DashboardViewProps) {
                         <div class="flex items-center gap-4">
                           <span class="text-xs px-2 py-0.5 rounded-full border border-gray-7/60 text-gray-11 flex items-center gap-1.5">
                             <span class="w-1.5 h-1.5 rounded-full bg-current" />
-                            {props.sessionStatusById[s.id] ?? "idle"}
+                            {translate(`status.${props.sessionStatusById[s.id] ?? "idle"}`)}
                           </span>
                         </div>
                       </button>
@@ -645,7 +654,7 @@ export default function DashboardView(props: DashboardViewProps) {
 
                   <Show when={!props.sessions.length}>
                     <div class="p-6 text-sm text-gray-10">
-                      No sessions yet.
+                      {translate("dashboard.no_sessions")}
                     </div>
                   </Show>
                 </div>
@@ -748,6 +757,11 @@ export default function DashboardView(props: DashboardViewProps) {
                   toggleUpdateAutoCheck={props.toggleUpdateAutoCheck}
                   themeMode={props.themeMode}
                   setThemeMode={props.setThemeMode}
+                  currentLanguage={props.currentLanguage}
+                  languagePickerOpen={props.languagePickerOpen}
+                  openLanguagePicker={props.openLanguagePicker}
+                  closeLanguagePicker={props.closeLanguagePicker}
+                  handleLanguageSelect={props.handleLanguageSelect}
                   updateStatus={props.updateStatus}
                   updateEnv={props.updateEnv}
                   appVersion={props.appVersion}
@@ -821,7 +835,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("home")}
             >
               <Command size={18} />
-              Home
+              {t("nav.home", currentLocale())}
             </button>
             <button
               class={`flex flex-col items-center gap-1 text-xs ${
@@ -830,7 +844,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("sessions")}
             >
               <Play size={18} />
-              Runs
+              {t("nav.sessions", currentLocale())}
             </button>
             <button
               class={`flex flex-col items-center gap-1 text-xs ${
@@ -839,7 +853,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("templates")}
             >
               <FileText size={18} />
-              Templates
+              {t("nav.templates", currentLocale())}
             </button>
             <button
               class={`flex flex-col items-center gap-1 text-xs ${
@@ -848,7 +862,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("skills")}
             >
               <Package size={18} />
-              Skills
+              {t("nav.skills", currentLocale())}
             </button>
             <button
               class={`flex flex-col items-center gap-1 text-xs ${
@@ -857,7 +871,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("plugins")}
             >
               <Cpu size={18} />
-              Plugins
+              {t("nav.plugins", currentLocale())}
             </button>
             <button
               class={`flex flex-col items-center gap-1 text-xs ${
@@ -866,7 +880,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("mcp")}
             >
               <Server size={18} />
-              MCPs
+              {t("nav.mcp", currentLocale())}
             </button>
             <button
               class={`flex flex-col items-center gap-1 text-xs ${
@@ -875,7 +889,7 @@ export default function DashboardView(props: DashboardViewProps) {
               onClick={() => props.setTab("settings")}
             >
               <Settings size={18} />
-              Settings
+              {t("nav.settings", currentLocale())}
             </button>
           </div>
         </nav>
diff --git a/packages/desktop/src/app/pages/plugins.tsx b/packages/desktop/src/app/pages/plugins.tsx
index c843fb26..8deb7535 100644
--- a/packages/desktop/src/app/pages/plugins.tsx
+++ b/packages/desktop/src/app/pages/plugins.tsx
@@ -6,6 +6,7 @@ import { isTauriRuntime } from "../utils";
 import Button from "../components/button";
 import TextInput from "../components/text-input";
 import { Cpu } from "lucide-solid";
+import { t, currentLocale } from "../../i18n";
 
 export type PluginsViewProps = {
   busy: boolean;
@@ -41,13 +42,15 @@ export type PluginsViewProps = {
 };
 
 export default function PluginsView(props: PluginsViewProps) {
+  const translate = (key: string) => t(key, currentLocale());
+
   return (
     <section class="space-y-6">
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
         <div class="flex items-start justify-between gap-4">
           <div class="space-y-1">
-            <div class="text-sm font-medium text-gray-12">OpenCode plugins</div>
-            <div class="text-xs text-gray-10">Manage `opencode.json` for your project or global OpenCode plugins.</div>
+            <div class="text-sm font-medium text-gray-12">{translate("plugins.title")}</div>
+            <div class="text-xs text-gray-10">{translate("plugins.description")}</div>
           </div>
           <div class="flex items-center gap-2">
             <button
@@ -61,7 +64,7 @@ export default function PluginsView(props: PluginsViewProps) {
                 props.refreshPlugins("project");
               }}
             >
-              Project
+              {translate("plugins.scope_project")}
             </button>
             <button
               class={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
@@ -74,21 +77,21 @@ export default function PluginsView(props: PluginsViewProps) {
                 props.refreshPlugins("global");
               }}
             >
-              Global
+              {translate("plugins.scope_global")}
             </button>
             <Button variant="ghost" onClick={() => props.refreshPlugins()}>
-              Refresh
+              {translate("plugins.refresh")}
             </Button>
           </div>
         </div>
 
         <div class="flex flex-col gap-1 text-xs text-gray-10">
-          <div>Config</div>
-          <div class="text-gray-7 font-mono truncate">{props.pluginConfigPath ?? "Not loaded yet"}</div>
+          <div>{translate("plugins.config")}</div>
+          <div class="text-gray-7 font-mono truncate">{props.pluginConfigPath ?? translate("plugins.not_loaded")}</div>
         </div>
 
         <div class="space-y-3">
-          <div class="text-xs font-medium text-gray-11 uppercase tracking-wider">Suggested plugins</div>
+          <div class="text-xs font-medium text-gray-11 uppercase tracking-wider">{translate("plugins.suggested")}</div>
           <div class="grid gap-3">
             <For each={props.suggestedPlugins}>
               {(plugin) => {
@@ -112,7 +115,7 @@ export default function PluginsView(props: PluginsViewProps) {
                             variant="ghost"
                             onClick={() => props.setActivePluginGuide(isGuideOpen() ? null : plugin.packageName)}
                           >
-                            {isGuideOpen() ? "Hide setup" : "Setup"}
+                            {isGuideOpen() ? translate("plugins.hide_setup") : translate("plugins.setup")}
                           </Button>
                         </Show>
                         <Button
@@ -125,7 +128,7 @@ export default function PluginsView(props: PluginsViewProps) {
                             (props.pluginScope === "project" && !props.activeWorkspaceRoot.trim())
                           }
                         >
-                          {isInstalled() ? "Added" : "Add"}
+                          {isInstalled() ? translate("plugins.added") : translate("plugins.add")}
                         </Button>
                       </div>
                     </div>
@@ -190,7 +193,7 @@ export default function PluginsView(props: PluginsViewProps) {
               {(pluginName) => (
                 <div class="flex items-center justify-between rounded-xl border border-gray-6/60 bg-gray-1/40 px-4 py-2.5">
                   <div class="text-sm text-gray-12 font-mono">{pluginName}</div>
-                  <div class="text-[10px] uppercase tracking-wide text-gray-10">Enabled</div>
+                  <div class="text-[10px] uppercase tracking-wide text-gray-10">{translate("plugins.enabled")}</div>
                 </div>
               )}
             </For>
@@ -201,11 +204,11 @@ export default function PluginsView(props: PluginsViewProps) {
           <div class="flex flex-col md:flex-row gap-3">
             <div class="flex-1">
               <TextInput
-                label="Add plugin"
-                placeholder="opencode-wakatime"
+                label={translate("plugins.add_label")}
+                placeholder={translate("plugins.placeholder")}
                 value={props.pluginInput}
                 onInput={(e) => props.setPluginInput(e.currentTarget.value)}
-                hint="Add npm package names, e.g. opencode-wakatime"
+                hint={translate("plugins.add_hint")}
               />
             </div>
             <Button
@@ -214,7 +217,7 @@ export default function PluginsView(props: PluginsViewProps) {
               disabled={props.busy || !props.pluginInput.trim()}
               class="md:mt-6"
             >
-              Add
+              {translate("plugins.add")}
             </Button>
           </div>
           <Show when={props.pluginStatus}>
diff --git a/packages/desktop/src/app/pages/session.tsx b/packages/desktop/src/app/pages/session.tsx
index 2a315668..163dad97 100644
--- a/packages/desktop/src/app/pages/session.tsx
+++ b/packages/desktop/src/app/pages/session.tsx
@@ -29,6 +29,7 @@ import Button from "../components/button";
 import PartView from "../components/part-view";
 import WorkspaceChip from "../components/workspace-chip";
 import { isTauriRuntime, isWindowsPlatform } from "../utils";
+import { t, currentLocale } from "../../i18n";
 
 export type SessionViewProps = {
   selectedSessionId: string | null;
@@ -84,6 +85,8 @@ export type SessionViewProps = {
 };
 
 export default function SessionView(props: SessionViewProps) {
+  const translate = (key: string) => t(key, currentLocale());
+
   let messagesEndEl: HTMLDivElement | undefined;
 
   createEffect(() => {
@@ -132,9 +135,9 @@ export default function SessionView(props: SessionViewProps) {
       promptInputEl.scrollHeight > maxPromptHeight ? "auto" : "hidden";
   };
 
-  const artifactActionLabel = () => (isWindowsPlatform() ? "Open" : "Reveal");
+  const artifactActionLabel = () => (isWindowsPlatform() ? translate("session.open") : translate("session.reveal"));
 
-  const artifactActionToast = () => (isWindowsPlatform() ? "Opened in default app." : "Revealed in file manager.");
+  const artifactActionToast = () => (isWindowsPlatform() ? translate("session.opened_toast") : translate("session.revealed_toast"));
 
   const resolveArtifactPath = (artifact: ArtifactItem) => {
     const rawPath = artifact.path?.trim();
@@ -273,7 +276,7 @@ export default function SessionView(props: SessionViewProps) {
   });
 
   const showAnticipatoryCursor = createMemo(() => {
-    if (props.busyLabel !== "Running" && props.sessionStatus !== "running") return false;
+    if (props.busyLabel !== translate("status.running") && props.sessionStatus !== "running") return false;
     return !hasAssistantTextAfterLastUser();
   });
 
@@ -408,14 +411,14 @@ export default function SessionView(props: SessionViewProps) {
       fallback={
         <div class="min-h-screen flex items-center justify-center bg-gray-1 text-gray-12 p-6">
           <div class="text-center space-y-4">
-            <div class="text-lg font-medium">No session selected</div>
+            <div class="text-lg font-medium">{translate("session.no_selected")}</div>
             <Button
               onClick={() => {
                 props.setView("dashboard");
                 props.setTab("sessions");
               }}
             >
-              Back to dashboard
+              {translate("session.back_to_dashboard")}
             </Button>
           </div>
         </div>
@@ -468,12 +471,12 @@ export default function SessionView(props: SessionViewProps) {
                 disabled={props.newTaskDisabled}
               >
                 <Plus size={16} />
-                New task
+                {translate("dashboard.new_task")}
               </button>
             </div>
 
             <div class="flex-1 overflow-y-auto px-4 py-4">
-              <div class="text-xs text-gray-10 uppercase tracking-wide mb-3">Recents</div>
+              <div class="text-xs text-gray-10 uppercase tracking-wide mb-3">{translate("session.recents")}</div>
               <div class="space-y-2">
                 <For each={props.sessions.slice(0, 8)}>
                   {(session) => (
@@ -509,9 +512,9 @@ export default function SessionView(props: SessionViewProps) {
                   <div class="w-16 h-16 bg-gray-2 rounded-3xl mx-auto flex items-center justify-center border border-gray-6">
                     <Zap class="text-gray-7" />
                   </div>
-                  <h3 class="text-xl font-medium">Ready to work</h3>
+                  <h3 class="text-xl font-medium">{translate("session.ready_to_work_title")}</h3>
                   <p class="text-gray-10 text-sm max-w-xs mx-auto">
-                    Describe a task. I'll show progress and ask for permissions when needed.
+                    {translate("session.ready_to_work_description")}
                   </p>
                 </div>
               </Show>
@@ -625,7 +628,7 @@ export default function SessionView(props: SessionViewProps) {
                           </For>
                           <Show when={messageArtifacts().length}>
                             <div class={`mt-4 space-y-2 ${isUser() ? "text-gray-12" : ""}`.trim()}>
-                              <div class="text-[11px] uppercase tracking-wide text-gray-9">Artifacts</div>
+                              <div class="text-[11px] uppercase tracking-wide text-gray-9">{translate("session.artifacts")}</div>
                               <For each={messageArtifacts()}>
                                 {(artifact) => (
                                   <div class="rounded-2xl border border-gray-6 bg-gray-1/60 px-4 py-3 flex items-center justify-between">
@@ -635,7 +638,7 @@ export default function SessionView(props: SessionViewProps) {
                                       </div>
                                       <div>
                                         <div class="text-sm text-gray-12">{artifact.name}</div>
-                                        <div class="text-xs text-gray-10">Document</div>
+                                        <div class="text-xs text-gray-10">{translate("session.document_label")}</div>
                                       </div>
                                     </div>
                                     <Button variant="outline" class="text-xs" onClick={() => handleOpenArtifact(artifact)}>
@@ -701,7 +704,7 @@ export default function SessionView(props: SessionViewProps) {
                     class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12"
                     onClick={() => toggleSidebar("progress")}
                   >
-                    <span>Progress</span>
+                    <span>{translate("session.progress")}</span>
                     <ChevronDown
                       size={16}
                       class={`transition-transform ${props.expandedSidebarSections.progress ? "rotate-180" : ""}`.trim()}
@@ -735,7 +738,7 @@ export default function SessionView(props: SessionViewProps) {
                   class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12"
                   onClick={() => toggleSidebar("artifacts")}
                 >
-                  <span>Artifacts</span>
+                  <span>{translate("session.artifacts")}</span>
                   <ChevronDown
                     size={16}
                     class={`transition-transform ${props.expandedSidebarSections.artifacts ? "rotate-180" : ""}`.trim()}
@@ -769,7 +772,7 @@ export default function SessionView(props: SessionViewProps) {
                   class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12"
                   onClick={() => toggleSidebar("context")}
                 >
-                  <span>Context</span>
+                  <span>{translate("session.context")}</span>
                   <ChevronDown
                     size={16}
                     class={`transition-transform ${props.expandedSidebarSections.context ? "rotate-180" : ""}`.trim()}
@@ -780,14 +783,14 @@ export default function SessionView(props: SessionViewProps) {
                     <Show when={props.activePlugins.length || props.activePluginStatus}>
                       <div>
                         <div class="flex items-center justify-between text-xs text-gray-10">
-                          <span>Active plugins</span>
+                          <span>{translate("session.active_plugins_label")}</span>
                           <span>{props.activePlugins.length}</span>
                         </div>
                         <div class="mt-2 space-y-2">
                           <Show
                             when={props.activePlugins.length}
                             fallback={
-                              <div class="text-xs text-gray-7">{props.activePluginStatus ?? "No plugins loaded."}</div>
+                              <div class="text-xs text-gray-7">{props.activePluginStatus ?? translate("session.no_plugins")}</div>
                             }
                           >
                             <For each={props.activePlugins}>
@@ -805,7 +808,7 @@ export default function SessionView(props: SessionViewProps) {
 
                     <div>
                       <div class="flex items-center justify-between text-xs text-gray-10">
-                        <span>Selected folders</span>
+                        <span>{translate("session.selected_folders_label")}</span>
                         <span>{props.authorizedDirs.length}</span>
                       </div>
                       <div class="mt-2 space-y-2">
@@ -821,11 +824,11 @@ export default function SessionView(props: SessionViewProps) {
                     </div>
 
                     <div>
-                      <div class="text-xs text-gray-10">Working files</div>
+                      <div class="text-xs text-gray-10">{translate("session.working_files_label")}</div>
                       <div class="mt-2 space-y-2">
                         <Show
                           when={props.workingFiles.length}
-                          fallback={<div class="text-xs text-gray-7">None yet.</div>}
+                          fallback={<div class="text-xs text-gray-7">{translate("session.none_yet_label")}</div>}
                         >
                           <For each={props.workingFiles}>
                             {(file) => (
@@ -929,7 +932,7 @@ export default function SessionView(props: SessionViewProps) {
                         syncPromptHeight();
                       }}
                       onKeyDown={handlePromptKeyDown}
-                      placeholder="Ask OpenWork..."
+                      placeholder={translate("session.placeholder")}
                       class="flex-1 bg-transparent border-none p-0 text-gray-12 placeholder-gray-6 focus:ring-0 text-[15px] leading-relaxed resize-none min-h-[24px] max-h-[160px]"
                     />
 
@@ -937,7 +940,7 @@ export default function SessionView(props: SessionViewProps) {
                       disabled={!props.prompt.trim() || props.busy}
                       onClick={handlePrimaryAction}
                       class="p-1.5 bg-gray-12 text-gray-1 rounded-lg hover:scale-105 active:scale-95 transition-all disabled:opacity-0 disabled:scale-75 shadow-lg shrink-0"
-                      title="Run"
+                      title={translate("session.run")}
                     >
                       <ArrowRight size={18} />
                     </button>
@@ -991,9 +994,8 @@ export default function SessionView(props: SessionViewProps) {
                       }
                       disabled={props.permissionReplyBusy}
                     >
-
-                    Deny
-                  </Button>
+                      {translate("session.deny")}
+                    </Button>
                   <div class="grid grid-cols-2 gap-2">
                     <Button
                       variant="secondary"
@@ -1001,7 +1003,7 @@ export default function SessionView(props: SessionViewProps) {
                       onClick={() => props.activePermission && props.respondPermission(props.activePermission.id, "once")}
                       disabled={props.permissionReplyBusy}
                     >
-                      Once
+                      {translate("session.once")}
                     </Button>
                     <Button
                       variant="primary"
@@ -1012,7 +1014,7 @@ export default function SessionView(props: SessionViewProps) {
                       }
                       disabled={props.permissionReplyBusy}
                     >
-                      Allow for session
+                      {translate("session.allow_for_session")}
                     </Button>
                   </div>
                 </div>
diff --git a/packages/desktop/src/app/pages/settings.tsx b/packages/desktop/src/app/pages/settings.tsx
index 96429bfe..9b3753bc 100644
--- a/packages/desktop/src/app/pages/settings.tsx
+++ b/packages/desktop/src/app/pages/settings.tsx
@@ -3,7 +3,9 @@ import { Match, Show, Switch } from "solid-js";
 import { formatBytes, formatRelativeTime, isTauriRuntime } from "../utils";
 
 import Button from "../components/button";
-import { HardDrive, RefreshCcw, Shield, Smartphone } from "lucide-solid";
+import { HardDrive, Languages, RefreshCcw, Shield, Smartphone } from "lucide-solid";
+import { currentLocale, t, type Language } from "../../i18n";
+import LanguagePickerModal from "../components/language-picker-modal";
 
 export type SettingsViewProps = {
   mode: "host" | "client" | null;
@@ -29,6 +31,11 @@ export type SettingsViewProps = {
   setDemoSequence: (value: "cold-open" | "scheduler" | "summaries" | "groceries") => void;
   themeMode: "light" | "dark" | "system";
   setThemeMode: (value: "light" | "dark" | "system") => void;
+  currentLanguage: Language;
+  languagePickerOpen: boolean;
+  openLanguagePicker: () => void;
+  closeLanguagePicker: () => void;
+  handleLanguageSelect: (language: Language) => void;
   updateAutoCheck: boolean;
   toggleUpdateAutoCheck: () => void;
   updateStatus: {
@@ -64,6 +71,8 @@ export type SettingsViewProps = {
 };
 
 export default function SettingsView(props: SettingsViewProps) {
+  const translate = (key: string) => t(key, currentLocale());
+  
   const updateState = () => props.updateStatus?.state ?? "idle";
   const updateNotes = () => props.updateStatus?.notes ?? null;
   const updateVersion = () => props.updateStatus?.version ?? null;
@@ -76,13 +85,13 @@ export default function SettingsView(props: SettingsViewProps) {
   const notionStatusLabel = () => {
     switch (props.notionStatus) {
       case "connected":
-        return "Connected";
+        return translate("settings.notion_connected");
       case "connecting":
-        return "Reload required";
+        return translate("settings.reload_required");
       case "error":
-        return "Connection failed";
+        return translate("settings.connection_failed");
       default:
-        return "Not connected";
+        return translate("settings.notion_not_connected");
     }
   };
 
@@ -103,50 +112,50 @@ export default function SettingsView(props: SettingsViewProps) {
   return (
     <section class="space-y-6">
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-3">
-        <div class="text-sm font-medium text-gray-12">Connection</div>
+        <div class="text-sm font-medium text-gray-12">{translate("settings.connection_title")}</div>
         <div class="text-xs text-gray-10">{props.headerStatus}</div>
         <div class="text-xs text-gray-7 font-mono">{props.baseUrl}</div>
         <div class="pt-2 flex flex-wrap gap-2">
           <Button variant="secondary" onClick={props.toggleDeveloperMode}>
             <Shield size={16} />
-            {props.developerMode ? "Disable Developer Mode" : "Enable Developer Mode"}
+            {props.developerMode ? translate("settings.disable_developer_mode") : translate("settings.enable_developer_mode")}
           </Button>
           <Show when={props.mode === "host"}>
             <Button variant="danger" onClick={props.stopHost} disabled={props.busy}>
-              Stop engine
+              {translate("settings.stop_engine")}
             </Button>
           </Show>
           <Show when={props.mode === "client"}>
             <Button variant="outline" onClick={props.stopHost} disabled={props.busy}>
-              Disconnect
+              {translate("settings.disconnect")}
             </Button>
           </Show>
         </div>
 
         <Show when={isTauriRuntime() && props.mode === "host"}>
           <div class="pt-4 border-t border-gray-6/60 space-y-3">
-            <div class="text-xs text-gray-10">Engine source</div>
+            <div class="text-xs text-gray-10">{translate("settings.engine_source_label")}</div>
             <div class="grid grid-cols-2 gap-2">
               <Button
                 variant={props.engineSource === "path" ? "secondary" : "outline"}
                 onClick={() => props.setEngineSource("path")}
                 disabled={props.busy}
               >
-                PATH
+                {translate("settings.engine_path")}
               </Button>
               <Button
                 variant={props.engineSource === "sidecar" ? "secondary" : "outline"}
                 onClick={() => props.setEngineSource("sidecar")}
                 disabled={props.busy || props.isWindows}
-                title={props.isWindows ? "Sidecar is not supported on Windows yet" : ""}
+                title={props.isWindows ? translate("settings.sidecar_unsupported_windows") : ""}
               >
-                Sidecar
+                {translate("settings.engine_sidecar")}
               </Button>
             </div>
             <div class="text-[11px] text-gray-7">
-              PATH uses your installed OpenCode (default). Sidecar will use a bundled binary when available.
+              {translate("settings.engine_source_hint")}
               <Show when={props.isWindows}>
-                <span class="text-gray-10"> Sidecar is currently unavailable on Windows.</span>
+                <span class="text-gray-10"> {translate("settings.sidecar_unavailable")}</span>
               </Show>
             </div>
           </div>
@@ -156,8 +165,8 @@ export default function SettingsView(props: SettingsViewProps) {
 
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
         <div>
-          <div class="text-sm font-medium text-gray-12">Model</div>
-          <div class="text-xs text-gray-10">Defaults + thinking controls for runs.</div>
+          <div class="text-sm font-medium text-gray-12">{translate("settings.model_title")}</div>
+          <div class="text-xs text-gray-10">{translate("settings.model_hint")}</div>
         </div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
@@ -171,14 +180,14 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={props.openDefaultModelPicker}
             disabled={props.busy}
           >
-            Change
+            {translate("common.change")}
           </Button>
         </div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
           <div class="min-w-0">
-            <div class="text-sm text-gray-12">Thinking</div>
-            <div class="text-xs text-gray-7">Show thinking parts (Developer mode only).</div>
+            <div class="text-sm text-gray-12">{translate("settings.thinking_label")}</div>
+            <div class="text-xs text-gray-7">{translate("settings.thinking_hint")}</div>
           </div>
           <Button
             variant="outline"
@@ -186,13 +195,13 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={props.toggleShowThinking}
             disabled={props.busy}
           >
-            {props.showThinking ? "On" : "Off"}
+            {props.showThinking ? translate("common.on") : translate("common.off")}
           </Button>
         </div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
           <div class="min-w-0">
-            <div class="text-sm text-gray-12">Model variant</div>
+            <div class="text-sm text-gray-12">{translate("settings.model_variant_label")}</div>
             <div class="text-xs text-gray-7 font-mono truncate">{props.modelVariantLabel}</div>
           </div>
           <Button
@@ -201,15 +210,15 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={props.editModelVariant}
             disabled={props.busy}
           >
-            Edit
+            {translate("common.edit")}
           </Button>
         </div>
       </div>
 
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
         <div>
-          <div class="text-sm font-medium text-gray-12">Appearance</div>
-          <div class="text-xs text-gray-10">Match the system or force light/dark mode.</div>
+          <div class="text-sm font-medium text-gray-12">{translate("settings.appearance_title")}</div>
+          <div class="text-xs text-gray-10">{translate("settings.appearance_hint")}</div>
         </div>
 
         <div class="flex flex-wrap gap-2">
@@ -219,7 +228,7 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setThemeMode("system")}
             disabled={props.busy}
           >
-            System
+            {translate("settings.theme_system")}
           </Button>
           <Button
             variant={props.themeMode === "light" ? "secondary" : "outline"}
@@ -227,7 +236,7 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setThemeMode("light")}
             disabled={props.busy}
           >
-            Light
+            {translate("settings.theme_light")}
           </Button>
           <Button
             variant={props.themeMode === "dark" ? "secondary" : "outline"}
@@ -235,25 +244,61 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setThemeMode("dark")}
             disabled={props.busy}
           >
-            Dark
+            {translate("settings.theme_dark")}
           </Button>
         </div>
 
         <div class="text-xs text-gray-7">
-          System mode follows your OS preference automatically.
+          {translate("settings.theme_system_hint")}
         </div>
       </div>
 
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
         <div>
-          <div class="text-sm font-medium text-gray-12">Demo mode</div>
-          <div class="text-xs text-gray-10">Lightweight scripted states for recording and review.</div>
+          <div class="text-sm font-medium text-gray-12">{translate("settings.language")}</div>
+          <div class="text-xs text-gray-10">{translate("settings.language.description")}</div>
+        </div>
+
+        <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
+          <div class="min-w-0 flex items-center gap-3">
+            <Languages size={18} class="text-gray-11" />
+            <div>
+              <div class="text-sm text-gray-12">
+                {props.currentLanguage === "en" ? "English" : "简体中文"}
+              </div>
+              <div class="text-xs text-gray-7">
+                {props.currentLanguage === "en" ? "English" : "Simplified Chinese"}
+              </div>
+            </div>
+          </div>
+          <Button
+            variant="outline"
+            class="text-xs h-8 py-0 px-3 shrink-0"
+            onClick={props.openLanguagePicker}
+            disabled={props.busy}
+          >
+            {translate("settings.change")}
+          </Button>
+        </div>
+      </div>
+
+      <LanguagePickerModal
+        open={props.languagePickerOpen}
+        currentLanguage={props.currentLanguage}
+        onSelect={props.handleLanguageSelect}
+        onClose={props.closeLanguagePicker}
+      />
+
+      <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
+        <div>
+          <div class="text-sm font-medium text-gray-12">{translate("settings.demo_mode_title")}</div>
+          <div class="text-xs text-gray-10">{translate("settings.demo_mode_hint")}</div>
         </div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
           <div class="min-w-0">
-            <div class="text-sm text-gray-12">Enable demo mode</div>
-            <div class="text-xs text-gray-7">Replaces live data with demo sequences.</div>
+            <div class="text-sm text-gray-12">{translate("settings.enable_demo_mode_label")}</div>
+            <div class="text-xs text-gray-7">{translate("settings.enable_demo_mode_hint")}</div>
           </div>
           <Button
             variant={props.demoMode ? "secondary" : "outline"}
@@ -261,7 +306,7 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={props.toggleDemoMode}
             disabled={props.busy}
           >
-            {props.demoMode ? "On" : "Off"}
+            {props.demoMode ? translate("common.on") : translate("common.off")}
           </Button>
         </div>
 
@@ -272,7 +317,7 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setDemoSequence("cold-open")}
             disabled={props.busy || !props.demoMode}
           >
-            Cold open
+            {translate("settings.demo_cold_open")}
           </Button>
           <Button
             variant={props.demoSequence === "scheduler" ? "secondary" : "outline"}
@@ -280,7 +325,7 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setDemoSequence("scheduler")}
             disabled={props.busy || !props.demoMode}
           >
-            Scheduler
+            {translate("settings.demo_scheduler")}
           </Button>
           <Button
             variant={props.demoSequence === "summaries" ? "secondary" : "outline"}
@@ -288,7 +333,7 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setDemoSequence("summaries")}
             disabled={props.busy || !props.demoMode}
           >
-            Summaries
+            {translate("settings.demo_summaries")}
           </Button>
           <Button
             variant={props.demoSequence === "groceries" ? "secondary" : "outline"}
@@ -296,20 +341,20 @@ export default function SettingsView(props: SettingsViewProps) {
             onClick={() => props.setDemoSequence("groceries")}
             disabled={props.busy || !props.demoMode}
           >
-            Groceries
+            {translate("settings.demo_groceries")}
           </Button>
         </div>
 
         <div class="text-xs text-gray-7">
-          Demo sequences swap in scripted sessions, artifacts, and workspace context.
+          {translate("settings.demo_sequences_hint")}
         </div>
       </div>
 
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-3">
         <div class="flex items-start justify-between gap-4">
           <div>
-            <div class="text-sm font-medium text-gray-12">Updates</div>
-            <div class="text-xs text-gray-10">Keep OpenWork up to date.</div>
+            <div class="text-sm font-medium text-gray-12">{translate("settings.updates_title")}</div>
+            <div class="text-xs text-gray-10">{translate("settings.updates_hint")}</div>
           </div>
           <div class="text-xs text-gray-7 font-mono">{props.appVersion ? `v${props.appVersion}` : ""}</div>
         </div>
@@ -323,8 +368,8 @@ export default function SettingsView(props: SettingsViewProps) {
                 <>
                   <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6">
                     <div class="space-y-0.5">
-                      <div class="text-sm text-gray-12">Automatic checks</div>
-                      <div class="text-xs text-gray-7">Once per day (quiet)</div>
+                      <div class="text-sm text-gray-12">{translate("settings.automatic_checks_label")}</div>
+                      <div class="text-xs text-gray-7">{translate("settings.automatic_checks_hint")}</div>
                     </div>
                     <button
                       class={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
@@ -334,7 +379,7 @@ export default function SettingsView(props: SettingsViewProps) {
                       }`}
                       onClick={props.toggleUpdateAutoCheck}
                     >
-                      {props.updateAutoCheck ? "On" : "Off"}
+                      {props.updateAutoCheck ? translate("common.on") : translate("common.off")}
                     </button>
                   </div>
 
@@ -342,21 +387,21 @@ export default function SettingsView(props: SettingsViewProps) {
                     <div class="space-y-0.5">
                       <div class="text-sm text-gray-12">
                         <Switch>
-                          <Match when={updateState() === "checking"}>Checking...</Match>
-                          <Match when={updateState() === "available"}>Update available: v{updateVersion()}</Match>
-                          <Match when={updateState() === "downloading"}>Downloading...</Match>
-                          <Match when={updateState() === "ready"}>Ready to install: v{updateVersion()}</Match>
-                          <Match when={updateState() === "error"}>Update check failed</Match>
-                          <Match when={true}>Up to date</Match>
+                          <Match when={updateState() === "checking"}>{translate("settings.update_checking")}</Match>
+                          <Match when={updateState() === "available"}>{translate("settings.update_available")} v{updateVersion()}</Match>
+                          <Match when={updateState() === "downloading"}>{translate("settings.update_downloading")}</Match>
+                          <Match when={updateState() === "ready"}>{translate("settings.update_ready")} v{updateVersion()}</Match>
+                          <Match when={updateState() === "error"}>{translate("settings.update_error")}</Match>
+                          <Match when={true}>{translate("settings.update_uptodate")}</Match>
                         </Switch>
                       </div>
                       <Show when={updateState() === "idle" && updateLastCheckedAt()}>
                         <div class="text-xs text-gray-7">
-                          Last checked {formatRelativeTime(updateLastCheckedAt() as number)}
+                          {translate("settings.last_checked_time", { time: formatRelativeTime(updateLastCheckedAt() as number) })}
                         </div>
                       </Show>
                       <Show when={updateState() === "available" && updateDate()}>
-                        <div class="text-xs text-gray-7">Published {updateDate()}</div>
+                        <div class="text-xs text-gray-7">{translate("settings.published_date", { date: updateDate() })}</div>
                       </Show>
                       <Show when={updateState() === "downloading"}>
                         <div class="text-xs text-gray-7">
@@ -378,7 +423,7 @@ export default function SettingsView(props: SettingsViewProps) {
                         onClick={props.checkForUpdates}
                         disabled={props.busy || updateState() === "checking" || updateState() === "downloading"}
                       >
-                        Check
+                        {translate("settings.check_update")}
                       </Button>
 
                       <Show when={updateState() === "available"}>
@@ -388,7 +433,7 @@ export default function SettingsView(props: SettingsViewProps) {
                           onClick={props.downloadUpdate}
                           disabled={props.busy || updateState() === "downloading"}
                         >
-                          Download
+                          {translate("settings.download_update")}
                         </Button>
                       </Show>
 
@@ -398,9 +443,9 @@ export default function SettingsView(props: SettingsViewProps) {
                           class="text-xs h-8 py-0 px-3"
                           onClick={props.installUpdateAndRestart}
                           disabled={props.busy || props.anyActiveRuns}
-                          title={props.anyActiveRuns ? "Stop active runs to update" : ""}
+                          title={props.anyActiveRuns ? translate("settings.stop_runs_to_update") : ""}
                         >
-                          Install & Restart
+                          {translate("settings.install_update")}
                         </Button>
                       </Show>
                     </div>
@@ -415,19 +460,19 @@ export default function SettingsView(props: SettingsViewProps) {
               }
             >
               <div class="rounded-xl bg-gray-1/20 border border-gray-6 p-3 text-sm text-gray-11">
-                {props.updateEnv?.reason ?? "Updates are not supported in this environment."}
+                {props.updateEnv?.reason ?? translate("settings.updates_not_supported")}
               </div>
             </Show>
           }
         >
           <div class="rounded-xl bg-gray-1/20 border border-gray-6 p-3 text-sm text-gray-11">
-            Updates are only available in the desktop app.
+            {translate("settings.updates_desktop_only")}
           </div>
         </Show>
       </div>
 
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-3">
-        <div class="text-sm font-medium text-gray-12">Startup</div>
+        <div class="text-sm font-medium text-gray-12">{translate("settings.startup_title")}</div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6">
           <div class="flex items-center gap-3">
@@ -440,76 +485,76 @@ export default function SettingsView(props: SettingsViewProps) {
                 <HardDrive size={18} />
               </Show>
             </div>
-            <span class="capitalize text-sm font-medium text-gray-12">{props.mode} mode</span>
+            <span class="capitalize text-sm font-medium text-gray-12">{props.mode} {translate("settings.mode_suffix")}</span>
           </div>
           <Button variant="outline" class="text-xs h-8 py-0 px-3" onClick={props.stopHost} disabled={props.busy}>
-            Switch
+            {translate("settings.switch_mode")}
           </Button>
         </div>
 
         <Button variant="secondary" class="w-full justify-between group" onClick={props.onResetStartupPreference}>
-          <span class="text-gray-11">Reset default startup mode</span>
+          <span class="text-gray-11">{translate("settings.reset_startup_label")}</span>
           <RefreshCcw size={14} class="text-gray-10 group-hover:rotate-180 transition-transform" />
         </Button>
 
         <p class="text-xs text-gray-7">
-          This clears your saved preference and shows mode selection on next launch.
+          {translate("settings.reset_startup_hint")}
         </p>
       </div>
 
       <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 space-y-4">
         <div>
-          <div class="text-sm font-medium text-gray-12">Advanced</div>
-          <div class="text-xs text-gray-10">Reset OpenWork local state to retest onboarding.</div>
+          <div class="text-sm font-medium text-gray-12">{translate("settings.advanced_title")}</div>
+          <div class="text-xs text-gray-10">{translate("settings.advanced_hint")}</div>
         </div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
           <div class="min-w-0">
-            <div class="text-sm text-gray-12">Reset onboarding</div>
-            <div class="text-xs text-gray-7">Clears OpenWork preferences and restarts the app.</div>
+            <div class="text-sm text-gray-12">{translate("settings.reset_onboarding_label")}</div>
+            <div class="text-xs text-gray-7">{translate("settings.reset_onboarding_hint")}</div>
           </div>
           <Button
             variant="outline"
             class="text-xs h-8 py-0 px-3 shrink-0"
             onClick={() => props.openResetModal("onboarding")}
             disabled={props.busy || props.resetModalBusy || props.anyActiveRuns}
-            title={props.anyActiveRuns ? "Stop active runs to reset" : ""}
+            title={props.anyActiveRuns ? translate("settings.stop_runs_to_reset") : ""}
           >
-            Reset
+            {translate("settings.reset")}
           </Button>
         </div>
 
         <div class="flex items-center justify-between bg-gray-1 p-3 rounded-xl border border-gray-6 gap-3">
           <div class="min-w-0">
-            <div class="text-sm text-gray-12">Reset app data</div>
-            <div class="text-xs text-gray-7">More aggressive. Clears OpenWork cache + app data.</div>
+            <div class="text-sm text-gray-12">{translate("settings.reset_app_data_label")}</div>
+            <div class="text-xs text-gray-7">{translate("settings.reset_app_data_hint")}</div>
           </div>
           <Button
             variant="danger"
             class="text-xs h-8 py-0 px-3 shrink-0"
             onClick={() => props.openResetModal("all")}
             disabled={props.busy || props.resetModalBusy || props.anyActiveRuns}
-            title={props.anyActiveRuns ? "Stop active runs to reset" : ""}
+            title={props.anyActiveRuns ? translate("settings.stop_runs_to_reset") : ""}
           >
-            Reset
+            {translate("settings.reset")}
           </Button>
         </div>
 
         <div class="text-xs text-gray-7">
-          Requires typing <span class="font-mono text-gray-11">RESET</span> and will restart the app.
+          {translate("settings.reset_requires_hint")}
         </div>
       </div>
 
       <Show when={props.developerMode}>
         <section>
-          <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider mb-4">Developer</h3>
+          <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider mb-4">{translate("settings.developer_title")}</h3>
 
           <div class="space-y-4">
             <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-4 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
               <div class="min-w-0">
-                <div class="text-sm text-gray-12">OpenCode cache</div>
+                <div class="text-sm text-gray-12">{translate("settings.opencode_cache_label")}</div>
                 <div class="text-xs text-gray-7">
-                  Repairs cached data used to start the engine. Safe to run.
+                  {translate("settings.opencode_cache_hint")}
                 </div>
                 <Show when={props.cacheRepairResult}>
                   <div class="text-xs text-gray-11 mt-2">{props.cacheRepairResult}</div>
@@ -520,21 +565,21 @@ export default function SettingsView(props: SettingsViewProps) {
                 class="text-xs h-8 py-0 px-3 shrink-0"
                 onClick={props.repairOpencodeCache}
                 disabled={props.cacheRepairBusy || !isTauriRuntime()}
-                title={isTauriRuntime() ? "" : "Cache repair requires the desktop app"}
+                title={isTauriRuntime() ? "" : translate("settings.cache_repair_requires_desktop")}
               >
-                {props.cacheRepairBusy ? "Repairing cache" : "Repair cache"}
+                {props.cacheRepairBusy ? translate("settings.repairing_cache") : translate("settings.repair_cache")}
               </Button>
             </div>
 
             <div class="grid md:grid-cols-2 gap-4">
               <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-4">
-                <div class="text-xs text-gray-10 mb-2">Pending permissions</div>
+                <div class="text-xs text-gray-10 mb-2">{translate("settings.pending_permissions_label")}</div>
                 <pre class="text-xs text-gray-12 whitespace-pre-wrap break-words max-h-64 overflow-auto">
                   {props.safeStringify(props.pendingPermissions)}
                 </pre>
               </div>
               <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-4">
-                <div class="text-xs text-gray-10 mb-2">Recent events</div>
+                <div class="text-xs text-gray-10 mb-2">{translate("settings.recent_events_label")}</div>
                 <pre class="text-xs text-gray-12 whitespace-pre-wrap break-words max-h-64 overflow-auto">
                   {props.safeStringify(props.events)}
                 </pre>
diff --git a/packages/desktop/src/app/pages/templates.tsx b/packages/desktop/src/app/pages/templates.tsx
index 08d8dd4f..1091e916 100644
--- a/packages/desktop/src/app/pages/templates.tsx
+++ b/packages/desktop/src/app/pages/templates.tsx
@@ -5,6 +5,7 @@ import { formatRelativeTime } from "../utils";
 
 import Button from "../components/button";
 import { FileText, Play, Plus, Trash2 } from "lucide-solid";
+import { t, currentLocale } from "../../i18n";
 
 export type TemplatesViewProps = {
   busy: boolean;
@@ -21,6 +22,8 @@ export type TemplatesViewProps = {
 };
 
 export default function TemplatesView(props: TemplatesViewProps) {
+  const translate = (key: string) => t(key, currentLocale());
+
   const openNewTemplate = () => {
     const reset = props.resetTemplateDraft;
     if (reset) {
@@ -37,10 +40,10 @@ export default function TemplatesView(props: TemplatesViewProps) {
   return (
     <section class="space-y-4">
       <div class="flex items-center justify-between">
-        <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider">Templates</h3>
+        <h3 class="text-sm font-medium text-gray-11 uppercase tracking-wider">{translate("templates.title")}</h3>
         <Button variant="secondary" onClick={openNewTemplate} disabled={props.busy}>
           <Plus size={16} />
-          New
+          {translate("templates.new")}
         </Button>
       </div>
 
@@ -48,14 +51,14 @@ export default function TemplatesView(props: TemplatesViewProps) {
         when={props.workspaceTemplates.length || props.globalTemplates.length}
         fallback={
           <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-6 text-sm text-gray-10">
-            Starter templates will appear here. Create one or save from a session.
+            {translate("templates.empty_state")}
           </div>
         }
       >
         <div class="space-y-6">
           <Show when={props.workspaceTemplates.length}>
             <div class="space-y-3">
-              <div class="text-xs font-semibold text-gray-10 uppercase tracking-wider">Workspace</div>
+              <div class="text-xs font-semibold text-gray-10 uppercase tracking-wider">{translate("templates.workspace")}</div>
               <For each={props.workspaceTemplates}>
                 {(t) => (
                   <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 flex items-start justify-between gap-4">
@@ -70,7 +73,7 @@ export default function TemplatesView(props: TemplatesViewProps) {
                     <div class="shrink-0 flex gap-2">
                       <Button variant="secondary" onClick={() => props.runTemplate(t)} disabled={props.busy}>
                         <Play size={16} />
-                        Run
+                        {translate("templates.run")}
                       </Button>
                       <Button variant="danger" onClick={() => props.deleteTemplate(t.id)} disabled={props.busy}>
                         <Trash2 size={16} />
@@ -84,7 +87,7 @@ export default function TemplatesView(props: TemplatesViewProps) {
 
           <Show when={props.globalTemplates.length}>
             <div class="space-y-3">
-              <div class="text-xs font-semibold text-gray-10 uppercase tracking-wider">Global</div>
+              <div class="text-xs font-semibold text-gray-10 uppercase tracking-wider">{translate("templates.global")}</div>
               <For each={props.globalTemplates}>
                 {(t) => (
                   <div class="bg-gray-2/30 border border-gray-6/50 rounded-2xl p-5 flex items-start justify-between gap-4">
@@ -99,7 +102,7 @@ export default function TemplatesView(props: TemplatesViewProps) {
                     <div class="shrink-0 flex gap-2">
                       <Button variant="secondary" onClick={() => props.runTemplate(t)} disabled={props.busy}>
                         <Play size={16} />
-                        Run
+                        {translate("templates.run")}
                       </Button>
                       <Button variant="danger" onClick={() => props.deleteTemplate(t.id)} disabled={props.busy}>
                         <Trash2 size={16} />
diff --git a/packages/desktop/src/i18n/locales/en.ts b/packages/desktop/src/i18n/locales/en.ts
index 24fed0eb..e0d50a95 100644
--- a/packages/desktop/src/i18n/locales/en.ts
+++ b/packages/desktop/src/i18n/locales/en.ts
@@ -128,6 +128,7 @@ export default {
   "session.model_standard": "Standard",
   "session.run_button_title": "Run",
   // ==================== Templates ====================
+  "templates.title": "Templates",
   "templates.new": "New",
   "templates.empty_state": "Starter templates will appear here. Create one or save from a session.",
   "templates.workspace": "Workspace",
@@ -565,6 +566,16 @@ export default {
   "onboarding.authorize_folder": "Authorize folder",
   "onboarding.choose_workspace_folder": "Choose workspace folder",
 
+  // ==================== Navigation ====================
+  "nav.home": "Home",
+  "nav.dashboard": "Dashboard",
+  "nav.sessions": "Sessions",
+  "nav.templates": "Templates",
+  "nav.skills": "Skills",
+  "nav.plugins": "Plugins",
+  "nav.mcp": "MCPs",
+  "nav.settings": "Settings",
+
   // ==================== Common ====================
   "common.alpha": "Alpha",
   "common.change": "Change",
@@ -593,6 +604,8 @@ export default {
   "status.running": "Running",
   "status.live": "Live",
   "status.connecting": "Connecting",
+  "status.completed": "Completed",
+  "status.failed": "Failed",
   "status.creating_workspace": "Creating workspace",
   "status.deleting_template": "Deleting template",
   "status.saving_workspace_template": "Saving workspace template",
diff --git a/packages/desktop/src/i18n/locales/zh.ts b/packages/desktop/src/i18n/locales/zh.ts
index dbd54589..547bd44b 100644
--- a/packages/desktop/src/i18n/locales/zh.ts
+++ b/packages/desktop/src/i18n/locales/zh.ts
@@ -61,7 +61,7 @@ export default {
 
   // ==================== Session ====================
   "session.no_selected": "未选择会话",
-  "session.back_to_dashboard": "返回仪表盘",
+  "session.back_to_dashboard": "返回首页",
   "session.new_task": "新建任务",
   "session.recents": "最近",
   "session.recents_notice": "这些任务在本地运行，不会跨设备同步。",
@@ -129,6 +129,7 @@ export default {
   "session.run_button_title": "运行",
 
   // ==================== Templates ====================
+  "templates.title": "模板",
   "templates.new": "新建",
   "templates.empty_state": "初始模板将显示在这里。创建一个或从会话保存。",
   "templates.workspace": "工作区",
@@ -158,16 +159,16 @@ export default {
   "skills.no_matches": "没有匹配的精选包。尝试不同的搜索。",
   "skills.install_package": "安装",
   "skills.registry_notice": "发布到 OpenPackage 注册表（`opkg push`）目前需要身份验证。计划添加注册表搜索和精选列表同步。",
-  "skills.installed": "已安装的 skills",
-  "skills.no_skills": "在 `.opencode/skill` 中未检测到 skills。",
+  "skills.installed": "已安装的 Skills",
+  "skills.no_skills": "在 `.opencode/skill` 中未检测到 Skills。",
   "skills.source_placeholder": "github:anthropics/claude-code",
-  "skills.notion_crm_title": "Notion CRM 增强技能",
+  "skills.notion_crm_title": "Notion CRM 增强 Skills",
   "skills.notion_crm_description": "为联系人、管道和跟进添加增强工作流。",
-  "skills.notion_crm_card_description": "使用现成的技能丰富 Notion CRM 数据。",
-  "skills.connect_host_to_load": "连接到主机以加载 skills。",
+  "skills.notion_crm_card_description": "使用现成的 Skills 丰富 Notion CRM 数据。",
+  "skills.connect_host_to_load": "连接到主机以加载 Skills。",
   "skills.pick_workspace_first": "先选择一个工作区文件夹。",
-  "skills.no_skills_found": "还没有找到 skills。",
-  "skills.failed_to_load": "加载 skills 失败",
+  "skills.no_skills_found": "还没有找到 Skills。",
+  "skills.failed_to_load": "加载 Skills 失败",
   "skills.plugin_management_host_only": "插件管理仅在主机模式下可用。",
   "skills.plugins_host_only": "插件仅在主机模式下可用。",
   "skills.pick_project_for_plugins": "选择项目文件夹以管理项目插件。",
@@ -186,8 +187,8 @@ export default {
   "skills.installing_opackage": "正在安装 OpenPackage...",
   "skills.install_complete": "已安装。",
   "skills.curated_list_notice": "这是一个精选列表，还不是 OpenPackage。复制链接或关注 PRD 以了解计划的注册表搜索集成。",
-  "skills.import_host_only": "Skill 导入仅在主机模式下可用。",
-  "skills.select_skill_folder": "选择 skill 文件夹",
+  "skills.import_host_only": "Skills 导入仅在主机模式下可用。",
+  "skills.select_skill_folder": "选择 skills 文件夹",
   "skills.import_failed": "导入失败（{status}）",
   "skills.imported": "已导入。",
   "skills.unknown_error": "未知错误",
@@ -572,6 +573,16 @@ export default {
   "onboarding.authorize_folder": "授权文件夹",
   "onboarding.choose_workspace_folder": "选择工作区文件夹",
 
+  // ==================== Navigation ====================
+  "nav.home": "首页",
+  "nav.dashboard": "首页",
+  "nav.sessions": "会话",
+  "nav.templates": "模板",
+  "nav.skills": "Skills",
+  "nav.plugins": "插件",
+  "nav.mcp": "MCPs",
+  "nav.settings": "设置",
+
   // ==================== Common ====================
   "common.alpha": "测试版",
   "common.change": "更改",
@@ -600,6 +611,8 @@ export default {
   "status.running": "运行中",
   "status.live": "实时",
   "status.connecting": "正在连接",
+  "status.completed": "已完成",
+  "status.failed": "失败",
   "status.creating_workspace": "正在创建工作区",
   "status.deleting_template": "正在删除模板",
   "status.saving_workspace_template": "正在保存工作区模板",
diff --git a/src/app/components/language-picker-modal.tsx b/src/app/components/language-picker-modal.tsx
new file mode 100644
index 00000000..2bb2fc57
--- /dev/null
+++ b/src/app/components/language-picker-modal.tsx
@@ -0,0 +1,80 @@
+import { For, Show } from "solid-js";
+import { CheckCircle2, Circle, X } from "lucide-solid";
+import { LANGUAGE_OPTIONS, type Language, t, currentLocale } from "../../i18n";
+import Button from "./button";
+
+export type LanguagePickerModalProps = {
+  open: boolean;
+  currentLanguage: Language;
+  onSelect: (language: Language) => void;
+  onClose: () => void;
+};
+
+export default function LanguagePickerModal(props: LanguagePickerModalProps) {
+  // Use reactive translation that updates when locale changes
+  const translate = (key: string) => t(key, currentLocale());
+
+  return (
+    <Show when={props.open}>
+      <div class="fixed inset-0 z-50 bg-gray-1/60 backdrop-blur-sm flex items-center justify-center p-4">
+        <div class="bg-gray-2 border border-gray-6/70 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden">
+          <div class="p-6">
+            <div class="flex items-start justify-between gap-4 mb-5">
+              <div>
+                <h3 class="text-lg font-semibold text-gray-12">{translate("settings.language")}</h3>
+                <p class="text-sm text-gray-11 mt-1">{translate("settings.language.description")}</p>
+              </div>
+              <Button variant="ghost" class="!p-2 rounded-full" onClick={props.onClose}>
+                <X size={16} />
+              </Button>
+            </div>
+
+            <div class="space-y-2">
+              <For each={LANGUAGE_OPTIONS}>
+                {(option) => {
+                  const isActive = () => props.currentLanguage === option.value;
+                  
+                  return (
+                    <button
+                      class={`w-full text-left rounded-xl border px-4 py-3 transition-colors ${
+                        isActive()
+                          ? "border-gray-6/20 bg-gray-12/5"
+                          : "border-gray-6/70 bg-gray-1/40 hover:bg-gray-1/60"
+                      }`}
+                      onClick={() => {
+                        props.onSelect(option.value);
+                      }}
+                    >
+                      <div class="flex items-center justify-between gap-3">
+                        <div class="flex-1 min-w-0">
+                          <div class="font-medium text-sm text-gray-12">{option.nativeName}</div>
+                          <Show when={option.label !== option.nativeName}>
+                            <div class="text-xs text-gray-10 mt-0.5">{option.label}</div>
+                          </Show>
+                        </div>
+                        <div class="text-gray-10 shrink-0">
+                          <Show
+                            when={isActive()}
+                            fallback={<Circle size={14} />}
+                          >
+                            <CheckCircle2 size={14} class="text-green-11" />
+                          </Show>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                }}
+              </For>
+            </div>
+
+            <div class="mt-5 flex justify-end">
+              <Button variant="outline" onClick={props.onClose}>
+                {translate("common.cancel")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+}