From abd4f49c4d4e18db205a2948fdca0889b937fe78 Mon Sep 17 00:00:00 2001
From: Craun718 <3653544699@qq.com>
Date: Thu, 11 Jun 2026 00:26:50 +0800
Subject: [PATCH] feat(ui): add chinese localization

---
 packages/ui/src/components/bottom-bar.tsx     |  20 +-
 packages/ui/src/components/config-editor.tsx  |  12 +-
 .../src/components/instance-editor-modal.tsx  | 109 ++++----
 packages/ui/src/components/login-modal.tsx    |  39 ++-
 packages/ui/src/components/sidebar.tsx        |  16 +-
 packages/ui/src/lib/i18n.tsx                  |  98 +++++++
 packages/ui/src/lib/locales/en.ts             | 198 ++++++++++++++
 packages/ui/src/lib/locales/zh.ts             | 194 ++++++++++++++
 packages/ui/src/main.tsx                      |   7 +-
 packages/ui/src/models/auth.ts                |  27 +-
 packages/ui/src/models/instance.ts            |  24 +-
 packages/ui/src/models/settings.ts            |   3 +-
 packages/ui/src/pages/home.tsx                |   6 +-
 packages/ui/src/pages/instances/create.tsx    | 117 +++++----
 packages/ui/src/pages/instances/index.tsx     |  47 ++--
 packages/ui/src/pages/settings.tsx            | 243 +++++++++++-------
 16 files changed, 876 insertions(+), 284 deletions(-)
 create mode 100644 packages/ui/src/lib/i18n.tsx
 create mode 100644 packages/ui/src/lib/locales/en.ts
 create mode 100644 packages/ui/src/lib/locales/zh.ts

diff --git a/packages/ui/src/components/bottom-bar.tsx b/packages/ui/src/components/bottom-bar.tsx
index f73ace46..ad5beb09 100644
--- a/packages/ui/src/components/bottom-bar.tsx
+++ b/packages/ui/src/components/bottom-bar.tsx
@@ -1,6 +1,7 @@
 import { Play, User, XIcon } from "lucide-react";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
+import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/models/auth";
 import { useGameStore } from "@/models/game";
@@ -18,6 +19,7 @@ import {
 import { Spinner } from "./ui/spinner";
 
 export function BottomBar() {
+  const { t } = useI18n();
   const account = useAuthStore((state) => state.account);
 
   const { instances, activeInstance, setActiveInstance } = useInstanceStore();
@@ -48,15 +50,15 @@ export function BottomBar() {
         await setActiveInstance(nextInstance);
       } catch (error) {
         console.error("Failed to activate instance:", error);
-        toast.error(`Failed to activate instance: ${String(error)}`);
+        toast.error(t("bottom.activateFailed", { error: String(error) }));
       }
     },
-    [activeInstance?.id, instances, setActiveInstance],
+    [activeInstance?.id, instances, setActiveInstance, t],
   );
 
   const handleStartGame = async () => {
     if (!activeInstance) {
-      toast.info("Please select an instance first!");
+      toast.info(t("bottom.selectInstanceFirst"));
       return;
     }
 
@@ -77,7 +79,7 @@ export function BottomBar() {
           size="lg"
           onClick={() => setShowLoginModal(true)}
         >
-          <User /> Login
+          <User /> {t("bottom.login")}
         </Button>
       );
     }
@@ -90,7 +92,7 @@ export function BottomBar() {
           disabled={stoppingInstanceId !== null}
         >
           {stoppingInstanceId ? <Spinner /> : <XIcon />}
-          Close
+          {t("bottom.close")}
         </Button>
       );
     }
@@ -106,7 +108,7 @@ export function BottomBar() {
         disabled={launchingInstanceId === activeInstance?.id}
       >
         {launchingInstanceId === activeInstance?.id ? <Spinner /> : <Play />}
-        Start
+        {t("bottom.start")}
       </Button>
     );
   };
@@ -133,8 +135,8 @@ export function BottomBar() {
                 <SelectValue
                   placeholder={
                     instances.length === 0
-                      ? "No instances available"
-                      : "Please select an instance"
+                      ? t("bottom.noInstances")
+                      : t("bottom.selectInstance")
                   }
                 />
               </SelectTrigger>
@@ -145,7 +147,7 @@ export function BottomBar() {
                       <div className="flex min-w-0 flex-col">
                         <span className="truncate">{instance.name}</span>
                         <span className="text-muted-foreground truncate text-[11px]">
-                          {instance.versionId ?? "No version selected"}
+                          {instance.versionId ?? t("bottom.noVersion")}
                         </span>
                       </div>
                     </SelectItem>
diff --git a/packages/ui/src/components/config-editor.tsx b/packages/ui/src/components/config-editor.tsx
index 129b8f72..b76570c6 100644
--- a/packages/ui/src/components/config-editor.tsx
+++ b/packages/ui/src/components/config-editor.tsx
@@ -1,6 +1,7 @@
 import type React from "react";
 import { useEffect, useState } from "react";
 import { type ZodType, z } from "zod";
+import { useI18n } from "@/lib/i18n";
 import { useSettingsStore } from "@/models/settings";
 import type { LauncherConfig } from "@/types";
 import { Button } from "./ui/button";
@@ -43,6 +44,7 @@ export interface ConfigEditorProps
 }
 
 export function ConfigEditor({ onOpenChange, ...props }: ConfigEditorProps) {
+  const { t } = useI18n();
   const settings = useSettingsStore();
 
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -76,10 +78,8 @@ export function ConfigEditor({ onOpenChange, ...props }: ConfigEditorProps) {
     <Dialog onOpenChange={onOpenChange} {...props}>
       <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Edit Configuration</DialogTitle>
-          <DialogDescription>
-            Edit the raw JSON configuration file.
-          </DialogDescription>
+          <DialogTitle>{t("config.title")}</DialogTitle>
+          <DialogDescription>{t("config.desc")}</DialogDescription>
         </DialogHeader>
 
         <Textarea
@@ -98,11 +98,11 @@ export function ConfigEditor({ onOpenChange, ...props }: ConfigEditorProps) {
             onClick={() => onOpenChange?.(false)}
             disabled={isSaving}
           >
-            Cancel
+            {t("common.cancel")}
           </Button>
           <Button onClick={handleSave} disabled={isSaving}>
             {isSaving && <Spinner />}
-            Save Changes
+            {t("common.saveChanges")}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/packages/ui/src/components/instance-editor-modal.tsx b/packages/ui/src/components/instance-editor-modal.tsx
index 105d7e96..949ce711 100644
--- a/packages/ui/src/components/instance-editor-modal.tsx
+++ b/packages/ui/src/components/instance-editor-modal.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
+import { useI18n } from "@/lib/i18n";
 import { useInstanceStore } from "@/models/instance";
 import { useSettingsStore } from "@/models/settings";
 import type { FileInfo } from "../types/bindings/core";
@@ -30,6 +31,7 @@ type Props = {
 };
 
 export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
+  const { t, locale } = useI18n();
   const instancesStore = useInstanceStore();
   const { config } = useSettingsStore();
 
@@ -100,13 +102,13 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
         setFileList(files);
       } catch (err) {
         console.error("Failed to load files:", err);
-        toast.error(`Failed to load files: ${String(err)}`);
+        toast.error(t("editor.loadFilesFailed", { error: String(err) }));
         setFileList([]);
       } finally {
         setLoadingFiles(false);
       }
     },
-    [instance],
+    [instance, t],
   );
 
   useEffect(() => {
@@ -126,9 +128,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
 
   async function deleteFile(filePath: string) {
     if (
-      !confirm(
-        `Are you sure you want to delete "${filePath.split("/").pop()}"?`,
-      )
+      !confirm(t("editor.deleteConfirm", { name: filePath.split("/").pop() }))
     ) {
       return;
     }
@@ -137,10 +137,10 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
       await deleteInstanceFile(filePath);
       // refresh the currently selected folder
       await loadFileList(selectedFileFolder);
-      toast.success("Deleted");
+      toast.success(t("editor.deleted"));
     } catch (err) {
       console.error("Failed to delete file:", err);
-      toast.error(`Failed to delete file: ${String(err)}`);
+      toast.error(t("editor.deleteFileFailed", { error: String(err) }));
     } finally {
       setDeletingPath(null);
     }
@@ -151,14 +151,14 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
       await openFileExplorer(filePath);
     } catch (err) {
       console.error("Failed to open in explorer:", err);
-      toast.error(`Failed to open file explorer: ${String(err)}`);
+      toast.error(t("editor.openExplorerFailed", { error: String(err) }));
     }
   }
 
   async function saveChanges() {
     if (!instance) return;
     if (!editName.trim()) {
-      setErrorMessage("Instance name cannot be empty");
+      setErrorMessage(t("editor.emptyName"));
       return;
     }
     setSaving(true);
@@ -178,12 +178,12 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
       };
 
       await instancesStore.update(updatedInstance as Instance);
-      toast.success("Instance saved");
+      toast.success(t("editor.saved"));
       onOpenChange(false);
     } catch (err) {
       console.error("Failed to save instance:", err);
       setErrorMessage(String(err));
-      toast.error(`Failed to save instance: ${String(err)}`);
+      toast.error(t("editor.saveFailed", { error: String(err) }));
     } finally {
       setSaving(false);
     }
@@ -208,7 +208,9 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
     const n = toNumber(tsBig);
     // tsrs bindings often use seconds for createdAt/lastPlayed; if value looks like seconds use *1000
     const maybeMs = n > 1e12 ? n : n * 1000;
-    return new Date(maybeMs).toLocaleDateString();
+    return new Date(maybeMs).toLocaleDateString(
+      locale === "zh" ? "zh-CN" : "en-US",
+    );
   }
 
   return (
@@ -217,7 +219,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
         <DialogHeader>
           <div className="flex items-center justify-between gap-4">
             <div>
-              <DialogTitle>Edit Instance</DialogTitle>
+              <DialogTitle>{t("editor.title")}</DialogTitle>
               <DialogDescription>{instance?.name ?? ""}</DialogDescription>
             </div>
             <div className="flex items-center gap-2">
@@ -226,7 +228,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                 onClick={() => onOpenChange(false)}
                 disabled={saving}
                 className="p-2 rounded hover:bg-zinc-800 text-zinc-400"
-                aria-label="Close"
+                aria-label={t("common.close")}
               >
                 <X />
               </button>
@@ -237,10 +239,10 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
         {/* Tab Navigation */}
         <div className="flex gap-1 px-6 pt-2 border-b border-zinc-700">
           {[
-            { id: "info", label: "Info" },
-            { id: "version", label: "Version" },
-            { id: "files", label: "Files" },
-            { id: "settings", label: "Settings" },
+            { id: "info", label: t("editor.tab.info") },
+            { id: "version", label: t("editor.tab.version") },
+            { id: "files", label: t("editor.tab.files") },
+            { id: "settings", label: t("editor.tab.settings") },
           ].map((tab) => (
             <button
               type="button"
@@ -270,7 +272,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   htmlFor="instance-name-edit"
                   className="block text-sm font-medium mb-2"
                 >
-                  Instance Name
+                  {t("editor.instanceName")}
                 </label>
                 <Input
                   id="instance-name-edit"
@@ -285,7 +287,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   htmlFor="instance-notes-edit"
                   className="block text-sm font-medium mb-2"
                 >
-                  Notes
+                  {t("editor.notes")}
                 </label>
                 <Textarea
                   id="instance-notes-edit"
@@ -298,21 +300,21 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
 
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div className="p-3 bg-zinc-800 rounded-lg">
-                  <p className="text-zinc-400">Created</p>
+                  <p className="text-zinc-400">{t("editor.created")}</p>
                   <p className="text-white font-medium">
                     {instance?.createdAt ? formatDate(instance.createdAt) : "-"}
                   </p>
                 </div>
                 <div className="p-3 bg-zinc-800 rounded-lg">
-                  <p className="text-zinc-400">Last Played</p>
+                  <p className="text-zinc-400">{t("editor.lastPlayed")}</p>
                   <p className="text-white font-medium">
                     {instance?.lastPlayed
                       ? formatDate(instance.lastPlayed)
-                      : "Never"}
+                      : t("editor.never")}
                   </p>
                 </div>
                 <div className="p-3 bg-zinc-800 rounded-lg">
-                  <p className="text-zinc-400">Game Directory</p>
+                  <p className="text-zinc-400">{t("editor.gameDir")}</p>
                   <p
                     className="text-white font-medium text-xs truncate"
                     title={instance?.gameDir ?? ""}
@@ -323,9 +325,9 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   </p>
                 </div>
                 <div className="p-3 bg-zinc-800 rounded-lg">
-                  <p className="text-zinc-400">Current Version</p>
+                  <p className="text-zinc-400">{t("editor.currentVersion")}</p>
                   <p className="text-white font-medium">
-                    {instance?.versionId ?? "None"}
+                    {instance?.versionId ?? t("common.none")}
                   </p>
                 </div>
               </div>
@@ -337,33 +339,30 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
               {instance?.versionId ? (
                 <div className="p-4 bg-indigo-500/10 border border-indigo-500/30 rounded-lg">
                   <p className="text-sm text-indigo-400">
-                    Currently playing:{" "}
-                    <span className="font-medium">{instance.versionId}</span>
-                    {instance.modLoader && (
-                      <>
-                        {" "}
-                        with{" "}
-                        <span className="capitalize">{instance.modLoader}</span>
-                        {instance.modLoaderVersion
+                    {t("editor.currentlyPlaying", {
+                      version: instance.versionId,
+                    })}
+                    {instance.modLoader &&
+                      t("editor.withLoader", {
+                        loader: instance.modLoader,
+                        version: instance.modLoaderVersion
                           ? ` ${instance.modLoaderVersion}`
-                          : ""}
-                      </>
-                    )}
+                          : "",
+                      })}
                   </p>
                 </div>
               ) : (
                 <div className="text-sm text-zinc-400">
-                  No version selected for this instance
+                  {t("editor.noVersion")}
                 </div>
               )}
 
               <div>
                 <p className="text-sm font-medium mb-2">
-                  Change Version / Mod Loader
+                  {t("editor.changeVersion")}
                 </p>
                 <p className="text-xs text-zinc-400">
-                  Use the Versions page to install new game versions or mod
-                  loaders, then set them here.
+                  {t("editor.changeVersionDesc")}
                 </p>
               </div>
             </div>
@@ -399,11 +398,11 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
               {loadingFiles ? (
                 <div className="flex items-center gap-2 text-zinc-400 py-8 justify-center">
                   <Loader2 className="animate-spin" />
-                  Loading files...
+                  {t("editor.loadingFiles")}
                 </div>
               ) : fileList.length === 0 ? (
                 <div className="text-center py-8 text-zinc-500">
-                  No files in this folder
+                  {t("editor.emptyFolder")}
                 </div>
               ) : (
                 <div className="space-y-2">
@@ -418,7 +417,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                         </p>
                         <p className="text-xs text-zinc-400">
                           {file.isDirectory
-                            ? "Folder"
+                            ? t("editor.directory")
                             : formatFileSize(file.size)}{" "}
                           • {formatDate(file.modified)}
                         </p>
@@ -427,7 +426,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                         <button
                           type="button"
                           onClick={() => openInExplorer(file.path)}
-                          title="Open in explorer"
+                          title={t("editor.openFolder")}
                           className="p-2 rounded-lg hover:bg-zinc-600 text-zinc-400 hover:text-white transition-colors"
                         >
                           <Folder />
@@ -436,7 +435,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                           type="button"
                           onClick={() => deleteFile(file.path)}
                           disabled={deletingPath === file.path}
-                          title="Delete"
+                          title={t("common.delete")}
                           className="p-2 rounded-lg hover:bg-red-600/20 text-red-400 hover:text-red-300 transition-colors disabled:opacity-50"
                         >
                           {deletingPath === file.path ? (
@@ -460,7 +459,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   htmlFor="min-memory-edit"
                   className="block text-sm font-medium mb-2"
                 >
-                  Minimum Memory (MB)
+                  {t("editor.minMemory")}
                 </label>
                 <Input
                   id="min-memory-edit"
@@ -470,7 +469,9 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   disabled={saving}
                 />
                 <p className="text-xs text-zinc-400 mt-1">
-                  Default: {config?.minMemory} MB
+                  {t("editor.defaultMemory", {
+                    value: config?.minMemory ?? 0,
+                  })}
                 </p>
               </div>
 
@@ -479,7 +480,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   htmlFor="max-memory-edit"
                   className="block text-sm font-medium mb-2"
                 >
-                  Maximum Memory (MB)
+                  {t("editor.maxMemory")}
                 </label>
                 <Input
                   id="max-memory-edit"
@@ -489,7 +490,9 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   disabled={saving}
                 />
                 <p className="text-xs text-zinc-400 mt-1">
-                  Default: {config?.maxMemory} MB
+                  {t("editor.defaultMemory", {
+                    value: config?.maxMemory ?? 0,
+                  })}
                 </p>
               </div>
 
@@ -498,7 +501,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   htmlFor="jvm-args-edit"
                   className="block text-sm font-medium mb-2"
                 >
-                  JVM Arguments (Advanced)
+                  {t("editor.jvmArgs")}
                 </label>
                 <Textarea
                   id="jvm-args-edit"
@@ -526,7 +529,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                   onOpenChange(false);
                 }}
               >
-                Cancel
+                {t("common.cancel")}
               </Button>
               <Button onClick={saveChanges} disabled={saving}>
                 {saving ? (
@@ -534,7 +537,7 @@ export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
                 ) : (
                   <Save className="mr-2" />
                 )}
-                Save
+                {t("common.saveChanges")}
               </Button>
             </div>
           </div>
diff --git a/packages/ui/src/components/login-modal.tsx b/packages/ui/src/components/login-modal.tsx
index 49596da6..e8ed6d0d 100644
--- a/packages/ui/src/components/login-modal.tsx
+++ b/packages/ui/src/components/login-modal.tsx
@@ -1,6 +1,7 @@
 import { Mail, User } from "lucide-react";
 import { useCallback, useState } from "react";
 import { toast } from "sonner";
+import { useI18n } from "@/lib/i18n";
 import { useAuthStore } from "@/models/auth";
 import { Button } from "./ui/button";
 import {
@@ -27,6 +28,7 @@ export interface LoginModalProps
 }
 
 export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
+  const { t } = useI18n();
   const authStore = useAuthStore();
 
   const [offlineUsername, setOfflineUsername] = useState<string>("");
@@ -51,7 +53,7 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
     setIsLoggingIn(true);
     try {
       await authStore.loginOffline(offlineUsername);
-      toast.success("Logged in offline successfully");
+      toast.success(t("login.offlineSuccess"));
       onOpenChange?.(false);
     } catch (error) {
       const err = error as Error;
@@ -60,23 +62,21 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
     } finally {
       setIsLoggingIn(false);
     }
-  }, [authStore, offlineUsername, onOpenChange]);
+  }, [authStore, offlineUsername, onOpenChange, t]);
 
   return (
     <Dialog onOpenChange={onOpenChange} {...props}>
       <DialogContent className="md:max-w-md">
         <DialogHeader>
-          <DialogTitle>Login</DialogTitle>
-          <DialogDescription>
-            Login to your Minecraft account or play offline
-          </DialogDescription>
+          <DialogTitle>{t("login.title")}</DialogTitle>
+          <DialogDescription>{t("login.desc")}</DialogDescription>
         </DialogHeader>
         <div className="p-4 w-full overflow-hidden">
           {!authStore.loginMode && (
             <div className="flex flex-col space-y-4">
               <Button size="lg" onClick={handleMicrosoftLogin}>
                 <Mail />
-                Login with Microsoft
+                {t("login.microsoft")}
               </Button>
               <Button
                 variant="secondary"
@@ -84,7 +84,7 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
                 size="lg"
               >
                 <User />
-                Login Offline
+                {t("login.offline")}
               </Button>
             </div>
           )}
@@ -98,18 +98,21 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
                     navigator.clipboard?.writeText(
                       authStore.deviceCode?.userCode,
                     );
-                    toast.success("Copied to clipboard");
+                    toast.success(t("login.copySuccess"));
                   }
                 }}
               >
                 {authStore.deviceCode?.userCode}
               </button>
               <span className="text-muted-foreground w-full overflow-hidden text-ellipsis">
-                To sign in, use a web browser to open the page{" "}
+                {t("login.instructions", {
+                  url: authStore.deviceCode?.verificationUri ?? "",
+                  code: authStore.deviceCode?.userCode ?? "",
+                  seconds: Number(authStore.deviceCode?.expiresIn ?? 0),
+                })}{" "}
                 <a href={authStore.deviceCode?.verificationUri}>
                   {authStore.deviceCode?.verificationUri}
                 </a>{" "}
-                and enter the code{" "}
                 <code
                   className="font-semibold cursor-pointer"
                   onClick={() => {
@@ -128,9 +131,7 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
                   }}
                 >
                   {authStore.deviceCode?.userCode}
-                </code>{" "}
-                to authenticate, this code will be expired in{" "}
-                {authStore.deviceCode?.expiresIn} seconds.
+                </code>
               </span>
               <FieldError>{errorMessage}</FieldError>
             </div>
@@ -138,10 +139,8 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
           {authStore.loginMode === "offline" && (
             <FieldGroup>
               <Field>
-                <FieldLabel>Username</FieldLabel>
-                <FieldDescription>
-                  Enter a username to play offline
-                </FieldDescription>
+                <FieldLabel>{t("login.username")}</FieldLabel>
+                <FieldDescription>{t("login.usernameDesc")}</FieldDescription>
                 <Input
                   value={offlineUsername}
                   onChange={(e) => {
@@ -174,11 +173,11 @@ export function LoginModal({ onOpenChange, ...props }: LoginModalProps) {
               }
             }}
           >
-            Cancel
+            {t("common.cancel")}
           </Button>
           {authStore.loginMode === "offline" && (
             <Button onClick={handleOfflineLogin} disabled={isLoggingIn}>
-              Login
+              {t("bottom.login")}
             </Button>
           )}
         </DialogFooter>
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx
index e6152741..d807e2e4 100644
--- a/packages/ui/src/components/sidebar.tsx
+++ b/packages/ui/src/components/sidebar.tsx
@@ -1,5 +1,6 @@
 import { Folder, Home, LogOutIcon, Settings } from "lucide-react";
 import { useLocation, useNavigate } from "react-router";
+import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/models/auth";
 import { Button } from "./ui/button";
@@ -44,6 +45,7 @@ function NavItem({ Icon, label, to }: NavItemProps) {
 
 export function Sidebar() {
   const authStore = useAuthStore();
+  const { t } = useI18n();
 
   const renderUserAvatar = () => {
     return (
@@ -58,7 +60,9 @@ export function Sidebar() {
               {authStore.account?.username}
             </p>
             <p className="text-xs text-zinc-400">
-              {authStore.account?.type === "microsoft" ? "Online" : "Offline"}
+              {authStore.account?.type === "microsoft"
+                ? t("sidebar.online")
+                : t("sidebar.offline")}
             </p>
           </div>
         </div>
@@ -174,9 +178,9 @@ export function Sidebar() {
       </div>
 
       <nav className="w-full flex flex-col space-y-1 px-3 items-center">
-        <NavItem Icon={Home} label="Overview" to="/" />
-        <NavItem Icon={Folder} label="Instances" to="/instances" />
-        <NavItem Icon={Settings} label="Settings" to="/settings" />
+        <NavItem Icon={Home} label={t("sidebar.overview")} to="/" />
+        <NavItem Icon={Folder} label={t("sidebar.instances")} to="/instances" />
+        <NavItem Icon={Settings} label={t("sidebar.settings")} to="/settings" />
       </nav>
 
       <div className="w-full lg:px-3 flex-1 flex flex-col justify-end">
@@ -186,7 +190,7 @@ export function Sidebar() {
             nativeButton={false}
             className="w-full"
           >
-            Open
+            {t("common.open")}
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" side="right" sideOffset={20}>
             <DropdownMenuGroup>
@@ -195,7 +199,7 @@ export function Sidebar() {
                 onClick={authStore.logout}
               >
                 <LogOutIcon />
-                Logout
+                {t("sidebar.logout")}
               </DropdownMenuItem>
             </DropdownMenuGroup>
           </DropdownMenuContent>
diff --git a/packages/ui/src/lib/i18n.tsx b/packages/ui/src/lib/i18n.tsx
new file mode 100644
index 00000000..b4b9bd85
--- /dev/null
+++ b/packages/ui/src/lib/i18n.tsx
@@ -0,0 +1,98 @@
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { enMessages } from "./locales/en";
+import { zhMessages } from "./locales/zh";
+
+export type Locale = "en" | "zh";
+
+const STORAGE_KEY = "dropout.locale";
+
+const dictionaries = {
+  en: enMessages,
+  zh: zhMessages,
+} as const;
+
+type MessageKey = keyof typeof enMessages;
+
+function normalizeLocale(locale?: string | null): Locale | null {
+  if (!locale) return null;
+  const normalized = locale.toLowerCase();
+  if (normalized.startsWith("zh")) return "zh";
+  if (normalized.startsWith("en")) return "en";
+  return null;
+}
+
+function detectLocale(): Locale {
+  if (typeof navigator !== "undefined") {
+    return normalizeLocale(navigator.language) ?? "en";
+  }
+  return "en";
+}
+
+export function getStoredLocale(): Locale {
+  if (typeof window === "undefined") return "en";
+  const locale = normalizeLocale(window.localStorage.getItem(STORAGE_KEY));
+  if (locale) return locale;
+  return detectLocale();
+}
+
+export function setStoredLocale(locale: Locale) {
+  if (typeof window !== "undefined") {
+    window.localStorage.setItem(STORAGE_KEY, locale);
+  }
+}
+
+export function translate(
+  key: MessageKey,
+  params?: Record<string, string | number | null | undefined>,
+  locale = getStoredLocale(),
+) {
+  const template = dictionaries[locale][key] ?? dictionaries.en[key] ?? key;
+  if (!params) return template;
+  return template.replace(/\{(\w+)\}/g, (_, token: string) =>
+    String(params[token] ?? ""),
+  );
+}
+
+type I18nContextValue = {
+  locale: Locale;
+  setLocale: (locale: Locale) => void;
+  t: typeof translate;
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function LanguageProvider({ children }: { children: ReactNode }) {
+  const [locale, setLocaleState] = useState<Locale>(getStoredLocale);
+
+  useEffect(() => {
+    document.documentElement.lang = locale === "zh" ? "zh-CN" : "en";
+    setStoredLocale(locale);
+  }, [locale]);
+
+  return (
+    <I18nContext.Provider
+      value={{
+        locale,
+        setLocale: setLocaleState,
+        t: (key, params, requestedLocale) =>
+          translate(key, params, requestedLocale ?? locale),
+      }}
+    >
+      {children}
+    </I18nContext.Provider>
+  );
+}
+
+export function useI18n() {
+  const context = useContext(I18nContext);
+  if (!context) {
+    throw new Error("useI18n must be used within LanguageProvider");
+  }
+  return context;
+}
diff --git a/packages/ui/src/lib/locales/en.ts b/packages/ui/src/lib/locales/en.ts
new file mode 100644
index 00000000..2b80764a
--- /dev/null
+++ b/packages/ui/src/lib/locales/en.ts
@@ -0,0 +1,198 @@
+export const enMessages = {
+  "common.cancel": "Cancel",
+  "common.close": "Close",
+  "common.continue": "Continue",
+  "common.create": "Create",
+  "common.creating": "Creating",
+  "common.delete": "Delete",
+  "common.duplicate": "Duplicate",
+  "common.edit": "Edit",
+  "common.files": "Files",
+  "common.info": "Info",
+  "common.loading": "Loading...",
+  "common.next": "Next",
+  "common.none": "None",
+  "common.open": "Open",
+  "common.previous": "Previous",
+  "common.refresh": "Refresh",
+  "common.retry": "Retry",
+  "common.saveChanges": "Save Changes",
+  "common.settings": "Settings",
+  "common.version": "Version",
+  "lang.english": "English",
+  "lang.chinese": "Chinese",
+  "home.status": "Launcher Active",
+  "home.ready": "> Ready to launch session.",
+  "sidebar.overview": "Overview",
+  "sidebar.instances": "Instances",
+  "sidebar.settings": "Settings",
+  "sidebar.online": "Online",
+  "sidebar.offline": "Offline",
+  "sidebar.logout": "Logout",
+  "bottom.login": "Login",
+  "bottom.close": "Close",
+  "bottom.start": "Start",
+  "bottom.noInstances": "No instances available",
+  "bottom.selectInstance": "Please select an instance",
+  "bottom.noVersion": "No version selected",
+  "bottom.selectInstanceFirst": "Please select an instance first!",
+  "bottom.activateFailed": "Failed to activate instance: {error}",
+  "settings.title": "Settings",
+  "settings.openJson": "Open JSON",
+  "settings.tab.general": "General",
+  "settings.tab.java": "Java",
+  "settings.tab.appearance": "Appearance",
+  "settings.tab.advanced": "Advanced",
+  "settings.general.title": "General",
+  "settings.window.title": "Window Options",
+  "settings.window.desc": "May not work on some platforms like Linux Niri.",
+  "settings.window.width": "Window Default Width",
+  "settings.window.height": "Window Default Height",
+  "settings.window.gpu": "GPU Acceleration",
+  "settings.window.gpuDesc": "Enable GPU acceleration for the interface.",
+  "settings.network.title": "Network Options",
+  "settings.network.threads": "Download Threads",
+  "settings.java.title": "Java Installations",
+  "settings.java.path": "Java Path",
+  "settings.java.installs": "Java Installations",
+  "settings.appearance.title": "Appearance",
+  "settings.appearance.theme": "Theme",
+  "settings.appearance.themeDesc": "Select your preferred theme.",
+  "settings.appearance.themePlaceholder": "Please select a preferred theme",
+  "settings.appearance.language": "Language",
+  "settings.appearance.languageDesc": "Choose the launcher display language.",
+  "settings.theme.system": "System",
+  "settings.theme.light": "Light",
+  "settings.theme.dark": "Dark",
+  "settings.advanced.title": "Advanced",
+  "settings.advanced.options": "Advanced Options",
+  "settings.advanced.sharedCaches": "Use Shared Caches",
+  "settings.advanced.sharedCachesDesc":
+    "Share downloaded assets between instances.",
+  "settings.advanced.legacyStorage": "Keep Legacy Per-Instance Storage",
+  "settings.advanced.legacyStorageDesc":
+    "Maintain separate cache folders for compatibility.",
+  "settings.refreshFailed": "Failed to refresh settings: {error}",
+  "settings.javaCatalogFailed": "Failed to refresh Java catalogs: {error}",
+  "settings.loadFailed": "Failed to load settings",
+  "instances.title": "Instances",
+  "instances.import": "Import",
+  "instances.importing": "Importing...",
+  "instances.repair": "Repair Index",
+  "instances.repairing": "Repairing...",
+  "instances.create": "Create Instance",
+  "instances.emptyTitle": "No instances yet",
+  "instances.emptyDesc": "Create your first instance to get started",
+  "instances.noVersion": "No version selected",
+  "instances.setActiveFailed": "Error setting active instance",
+  "instances.noVersionInstalled": "No version selected or installed",
+  "instances.loginFirst": "Please login first",
+  "instances.startFailed": "Error starting game",
+  "instances.deleteTitle": "Delete Instance",
+  "instances.deleteDesc":
+    'Are you sure you want to delete "{name}"? This action cannot be undone.',
+  "instances.duplicateTitle": "Duplicate Instance",
+  "instances.duplicateDesc": "Provide a name for the duplicated instance.",
+  "instances.newName": "New instance name",
+  "create.title": "Create Instance",
+  "create.subtitle": "Create a new Minecraft instance.",
+  "create.step.version": "Version",
+  "create.step.instance": "Instance",
+  "create.versions": "Versions",
+  "create.searchVersions": "Search versions...",
+  "create.type": "Type",
+  "create.filterType": "Filter by type",
+  "create.allVersions": "All Versions",
+  "create.releaseVersions": "Release Versions",
+  "create.snapshotVersions": "Snapshot Versions",
+  "create.oldAlphaVersions": "Old Alpha Versions",
+  "create.oldBetaVersions": "Old Beta Versions",
+  "create.loadingVersions": "Loading versions...",
+  "create.versionRequired": "Version is required",
+  "create.instanceNameRequired": "Instance name is required",
+  "create.notesMax": "Notes must be at most 100 characters",
+  "create.loadVersionsFailed": "Failed to load versions: {error}",
+  "create.versionIdMissing": "Version ID is not set",
+  "create.loadForgeFailed": "Failed to load Forge versions: {error}",
+  "create.loadFabricFailed": "Failed to load Fabric versions: {error}",
+  "create.instanceName": "Instance Name",
+  "create.instanceNotes": "Instance Notes",
+  "create.loadingForge": "Loading Forge versions...",
+  "create.loadingFabric": "Loading Fabric versions...",
+  "create.forMinecraft": "for Minecraft {version}",
+  "create.selectVersionFirst": "Please select a version first",
+  "create.selectFabricFirst": "Please select a Fabric loader version",
+  "create.selectForgeFirst": "Please select a Forge loader version",
+  "create.unsupportedModLoader": "Unsupported mod loader",
+  "create.failed": "Failed to create instance",
+  "create.cancelTitle": "Are you absolutely sure?",
+  "create.cancelDesc": "All your progress will be lost.",
+  "login.title": "Login",
+  "login.desc": "Login to your Minecraft account or play offline",
+  "login.microsoft": "Login with Microsoft",
+  "login.offline": "Login Offline",
+  "login.offlineSuccess": "Logged in offline successfully",
+  "login.copySuccess": "Copied to clipboard",
+  "login.instructions":
+    "To sign in, open {url} in a browser and enter code {code}. This code expires in {seconds} seconds.",
+  "login.username": "Username",
+  "login.usernameDesc": "Enter a username to play offline",
+  "editor.title": "Edit Instance",
+  "editor.tab.info": "Info",
+  "editor.tab.version": "Version",
+  "editor.tab.files": "Files",
+  "editor.tab.settings": "Settings",
+  "editor.instanceName": "Instance Name",
+  "editor.notes": "Notes",
+  "editor.created": "Created",
+  "editor.lastPlayed": "Last Played",
+  "editor.never": "Never",
+  "editor.gameDir": "Game Directory",
+  "editor.currentVersion": "Current Version",
+  "editor.currentlyPlaying": "Currently playing: {version}",
+  "editor.withLoader": " with {loader}{version}",
+  "editor.noVersion": "No version selected for this instance",
+  "editor.changeVersion": "Change Version / Mod Loader",
+  "editor.changeVersionDesc":
+    "Use the Versions page to install new game versions or mod loaders, then set them here.",
+  "editor.loadingFiles": "Loading files...",
+  "editor.emptyFolder": "No files in this folder",
+  "editor.directory": "Directory",
+  "editor.modified": "Modified",
+  "editor.openFolder": "Open Folder",
+  "editor.minMemory": "Minimum Memory (MB)",
+  "editor.maxMemory": "Maximum Memory (MB)",
+  "editor.defaultMemory": "Default: {value} MB",
+  "editor.jvmArgs": "JVM Arguments (Advanced)",
+  "editor.deleteConfirm": 'Are you sure you want to delete "{name}"?',
+  "editor.deleted": "Deleted",
+  "editor.loadFilesFailed": "Failed to load files: {error}",
+  "editor.deleteFileFailed": "Failed to delete file: {error}",
+  "editor.openExplorerFailed": "Failed to open file explorer: {error}",
+  "editor.emptyName": "Instance name cannot be empty",
+  "editor.saved": "Instance saved",
+  "editor.saveFailed": "Failed to save instance: {error}",
+  "config.title": "Edit Configuration",
+  "config.desc": "Edit the raw JSON configuration file.",
+  "auth.waiting": "Waiting for authorization...",
+  "auth.listenFailed": "Failed to attach auth-progress listener",
+  "auth.startFailed": "Failed to start login: {error}",
+  "auth.microsoftFailed": "Failed to start Microsoft login: {error}",
+  "auth.success": "Login successful",
+  "auth.slowDown": "Microsoft asked to slow down polling...",
+  "auth.failed": "Login failed: {error}",
+  "auth.pollFailed": "Microsoft login failed: {error}",
+  "auth.usernameEmpty": "Username cannot be empty",
+  "auth.offlineFailed": "Failed to login offline",
+  "auth.logoutFailed": "Failed to logout",
+  "store.instancesLoadFailed": "Error loading instances",
+  "store.instanceCreated": 'Instance "{name}" created successfully',
+  "store.instanceDeleted": "Instance deleted successfully",
+  "store.instanceUpdated": "Instance updated successfully",
+  "store.instanceUpdateFailed": "Error updating instance",
+  "store.instanceDuplicated": 'Instance duplicated as "{name}"',
+  "store.instanceExported": "Instance exported successfully",
+  "store.instanceImported": 'Instance "{name}" imported successfully',
+  "store.repairCompleted":
+    "Repair completed: restored {restored}, removed {removed}",
+} as const;
diff --git a/packages/ui/src/lib/locales/zh.ts b/packages/ui/src/lib/locales/zh.ts
new file mode 100644
index 00000000..5ee9b622
--- /dev/null
+++ b/packages/ui/src/lib/locales/zh.ts
@@ -0,0 +1,194 @@
+export const zhMessages = {
+  "common.cancel": "取消",
+  "common.close": "关闭",
+  "common.continue": "继续",
+  "common.create": "创建",
+  "common.creating": "创建中",
+  "common.delete": "删除",
+  "common.duplicate": "复制",
+  "common.edit": "编辑",
+  "common.files": "文件",
+  "common.info": "信息",
+  "common.loading": "加载中...",
+  "common.next": "下一步",
+  "common.none": "无",
+  "common.open": "打开",
+  "common.previous": "上一步",
+  "common.refresh": "刷新",
+  "common.retry": "重试",
+  "common.saveChanges": "保存更改",
+  "common.settings": "设置",
+  "common.version": "版本",
+  "lang.english": "English",
+  "lang.chinese": "中文",
+  "home.status": "启动器已就绪",
+  "home.ready": "> 已准备启动游戏会话。",
+  "sidebar.overview": "概览",
+  "sidebar.instances": "实例",
+  "sidebar.settings": "设置",
+  "sidebar.online": "在线",
+  "sidebar.offline": "离线",
+  "sidebar.logout": "退出登录",
+  "bottom.login": "登录",
+  "bottom.close": "关闭",
+  "bottom.start": "启动",
+  "bottom.noInstances": "暂无可用实例",
+  "bottom.selectInstance": "请选择一个实例",
+  "bottom.noVersion": "未选择版本",
+  "bottom.selectInstanceFirst": "请先选择一个实例",
+  "bottom.activateFailed": "激活实例失败：{error}",
+  "settings.title": "设置",
+  "settings.openJson": "打开 JSON",
+  "settings.tab.general": "通用",
+  "settings.tab.java": "Java",
+  "settings.tab.appearance": "外观",
+  "settings.tab.advanced": "高级",
+  "settings.general.title": "通用",
+  "settings.window.title": "窗口选项",
+  "settings.window.desc": "在 Linux Niri 等平台上可能无法生效。",
+  "settings.window.width": "窗口默认宽度",
+  "settings.window.height": "窗口默认高度",
+  "settings.window.gpu": "GPU 加速",
+  "settings.window.gpuDesc": "为界面启用 GPU 加速。",
+  "settings.network.title": "网络选项",
+  "settings.network.threads": "下载线程数",
+  "settings.java.title": "Java 安装",
+  "settings.java.path": "Java 路径",
+  "settings.java.installs": "Java 安装列表",
+  "settings.appearance.title": "外观",
+  "settings.appearance.theme": "主题",
+  "settings.appearance.themeDesc": "选择你偏好的主题。",
+  "settings.appearance.themePlaceholder": "请选择一个主题",
+  "settings.appearance.language": "语言",
+  "settings.appearance.languageDesc": "选择启动器显示语言。",
+  "settings.theme.system": "跟随系统",
+  "settings.theme.light": "浅色",
+  "settings.theme.dark": "深色",
+  "settings.advanced.title": "高级",
+  "settings.advanced.options": "高级选项",
+  "settings.advanced.sharedCaches": "使用共享缓存",
+  "settings.advanced.sharedCachesDesc": "在实例之间共享已下载资源。",
+  "settings.advanced.legacyStorage": "保留旧版实例独立存储",
+  "settings.advanced.legacyStorageDesc": "为兼容性保留独立缓存目录。",
+  "settings.refreshFailed": "刷新设置失败：{error}",
+  "settings.javaCatalogFailed": "刷新 Java 列表失败：{error}",
+  "settings.loadFailed": "加载设置失败",
+  "instances.title": "实例",
+  "instances.import": "导入",
+  "instances.importing": "导入中...",
+  "instances.repair": "修复索引",
+  "instances.repairing": "修复中...",
+  "instances.create": "创建实例",
+  "instances.emptyTitle": "还没有实例",
+  "instances.emptyDesc": "创建你的第一个实例以开始使用",
+  "instances.noVersion": "未选择版本",
+  "instances.setActiveFailed": "设置活动实例失败",
+  "instances.noVersionInstalled": "未选择或未安装版本",
+  "instances.loginFirst": "请先登录",
+  "instances.startFailed": "启动游戏失败",
+  "instances.deleteTitle": "删除实例",
+  "instances.deleteDesc": "确定要删除“{name}”吗？此操作无法撤销。",
+  "instances.duplicateTitle": "复制实例",
+  "instances.duplicateDesc": "为复制出的实例提供一个名称。",
+  "instances.newName": "新实例名称",
+  "create.title": "创建实例",
+  "create.subtitle": "创建一个新的 Minecraft 实例。",
+  "create.step.version": "版本",
+  "create.step.instance": "实例",
+  "create.versions": "版本",
+  "create.searchVersions": "搜索版本...",
+  "create.type": "类型",
+  "create.filterType": "按类型筛选",
+  "create.allVersions": "全部版本",
+  "create.releaseVersions": "正式版",
+  "create.snapshotVersions": "快照版",
+  "create.oldAlphaVersions": "旧 Alpha 版",
+  "create.oldBetaVersions": "旧 Beta 版",
+  "create.loadingVersions": "正在加载版本...",
+  "create.versionRequired": "必须选择版本",
+  "create.instanceNameRequired": "实例名称不能为空",
+  "create.notesMax": "备注最多 100 个字符",
+  "create.loadVersionsFailed": "加载版本失败：{error}",
+  "create.versionIdMissing": "版本 ID 未设置",
+  "create.loadForgeFailed": "加载 Forge 版本失败：{error}",
+  "create.loadFabricFailed": "加载 Fabric 版本失败：{error}",
+  "create.instanceName": "实例名称",
+  "create.instanceNotes": "实例备注",
+  "create.loadingForge": "正在加载 Forge 版本...",
+  "create.loadingFabric": "正在加载 Fabric 版本...",
+  "create.forMinecraft": "适用于 Minecraft {version}",
+  "create.selectVersionFirst": "请先选择一个版本",
+  "create.selectFabricFirst": "请选择 Fabric 加载器版本",
+  "create.selectForgeFirst": "请选择 Forge 加载器版本",
+  "create.unsupportedModLoader": "不支持的 Mod 加载器",
+  "create.failed": "创建实例失败",
+  "create.cancelTitle": "确定要退出吗？",
+  "create.cancelDesc": "当前进度将会丢失。",
+  "login.title": "登录",
+  "login.desc": "登录你的 Minecraft 账号，或以离线模式游玩",
+  "login.microsoft": "使用 Microsoft 登录",
+  "login.offline": "离线登录",
+  "login.offlineSuccess": "离线登录成功",
+  "login.copySuccess": "已复制到剪贴板",
+  "login.instructions":
+    "请在浏览器中打开 {url}，并输入代码 {code} 完成登录。该代码将在 {seconds} 秒后过期。",
+  "login.username": "用户名",
+  "login.usernameDesc": "输入一个用户名以离线游玩",
+  "editor.title": "编辑实例",
+  "editor.tab.info": "信息",
+  "editor.tab.version": "版本",
+  "editor.tab.files": "文件",
+  "editor.tab.settings": "设置",
+  "editor.instanceName": "实例名称",
+  "editor.notes": "备注",
+  "editor.created": "创建时间",
+  "editor.lastPlayed": "上次游玩",
+  "editor.never": "从未",
+  "editor.gameDir": "游戏目录",
+  "editor.currentVersion": "当前版本",
+  "editor.currentlyPlaying": "当前使用版本：{version}",
+  "editor.withLoader": "，加载器：{loader}{version}",
+  "editor.noVersion": "该实例尚未选择版本",
+  "editor.changeVersion": "更改版本 / Mod 加载器",
+  "editor.changeVersionDesc":
+    "请前往版本页面安装新的游戏版本或 Mod 加载器，然后再在这里设置。",
+  "editor.loadingFiles": "正在加载文件...",
+  "editor.emptyFolder": "此文件夹为空",
+  "editor.directory": "文件夹",
+  "editor.modified": "修改时间",
+  "editor.openFolder": "打开文件夹",
+  "editor.minMemory": "最小内存 (MB)",
+  "editor.maxMemory": "最大内存 (MB)",
+  "editor.defaultMemory": "默认值：{value} MB",
+  "editor.jvmArgs": "JVM 参数（高级）",
+  "editor.deleteConfirm": "确定要删除“{name}”吗？",
+  "editor.deleted": "已删除",
+  "editor.loadFilesFailed": "加载文件失败：{error}",
+  "editor.deleteFileFailed": "删除文件失败：{error}",
+  "editor.openExplorerFailed": "打开文件管理器失败：{error}",
+  "editor.emptyName": "实例名称不能为空",
+  "editor.saved": "实例已保存",
+  "editor.saveFailed": "保存实例失败：{error}",
+  "config.title": "编辑配置",
+  "config.desc": "编辑原始 JSON 配置文件。",
+  "auth.waiting": "等待授权中...",
+  "auth.listenFailed": "附加登录进度监听失败",
+  "auth.startFailed": "启动登录失败：{error}",
+  "auth.microsoftFailed": "启动 Microsoft 登录失败：{error}",
+  "auth.success": "登录成功",
+  "auth.slowDown": "Microsoft 要求降低轮询频率...",
+  "auth.failed": "登录失败：{error}",
+  "auth.pollFailed": "Microsoft 登录失败：{error}",
+  "auth.usernameEmpty": "用户名不能为空",
+  "auth.offlineFailed": "离线登录失败",
+  "auth.logoutFailed": "退出登录失败",
+  "store.instancesLoadFailed": "加载实例失败",
+  "store.instanceCreated": "实例“{name}”创建成功",
+  "store.instanceDeleted": "实例已删除",
+  "store.instanceUpdated": "实例已更新",
+  "store.instanceUpdateFailed": "更新实例失败",
+  "store.instanceDuplicated": "实例已复制为“{name}”",
+  "store.instanceExported": "实例导出成功",
+  "store.instanceImported": "实例“{name}”导入成功",
+  "store.repairCompleted": "修复完成：恢复 {restored} 个，移除 {removed} 个",
+} as const;
diff --git a/packages/ui/src/main.tsx b/packages/ui/src/main.tsx
index 912fea86..947b247e 100644
--- a/packages/ui/src/main.tsx
+++ b/packages/ui/src/main.tsx
@@ -3,12 +3,15 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import { RouterProvider } from "react-router";
 import { Toaster } from "./components/ui/sonner";
+import { LanguageProvider } from "./lib/i18n";
 import router from "./pages/routes";
 
 const root = createRoot(document.getElementById("root") as HTMLElement);
 root.render(
   <StrictMode>
-    <RouterProvider router={router} />
-    <Toaster position="top-right" richColors />
+    <LanguageProvider>
+      <RouterProvider router={router} />
+      <Toaster position="top-right" richColors />
+    </LanguageProvider>
   </StrictMode>,
 );
diff --git a/packages/ui/src/models/auth.ts b/packages/ui/src/models/auth.ts
index d64b67a0..c83d9385 100644
--- a/packages/ui/src/models/auth.ts
+++ b/packages/ui/src/models/auth.ts
@@ -11,6 +11,7 @@ import {
   logout,
   startMicrosoftLogin,
 } from "@/client";
+import { translate } from "@/lib/i18n";
 import type { Account, DeviceCodeResponse } from "@/types";
 
 function getAuthErrorMessage(error: unknown): string {
@@ -59,7 +60,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   loginOnline: async (onSuccess) => {
     const { _pollLoginStatus } = get();
 
-    set({ statusMessage: "Waiting for authorization..." });
+    set({ statusMessage: translate("auth.waiting") });
 
     try {
       const unlisten = await listen("auth-progress", (event) => {
@@ -69,7 +70,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       });
     } catch (error) {
       console.warn("Failed to attch auth-progress listener:", error);
-      toast.warning("Failed to attch auth-progress listener");
+      toast.warning(translate("auth.listenFailed"));
     }
 
     try {
@@ -90,16 +91,16 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       set({
         _pollingInterval: interval,
         deviceCode,
-        statusMessage: deviceCode.message ?? "Waiting for authorization...",
+        statusMessage: deviceCode.message ?? translate("auth.waiting"),
       });
     } catch (error) {
       const message = getAuthErrorMessage(error);
       console.error("Failed to start Microsoft login:", error);
       set({
         loginMode: null,
-        statusMessage: `Failed to start login: ${message}`,
+        statusMessage: translate("auth.startFailed", { error: message }),
       });
-      toast.error(`Failed to start Microsoft login: ${message}`);
+      toast.error(translate("auth.microsoftFailed", { error: message }));
     }
   },
   _pollLoginStatus: async (deviceCode, onSuccess) => {
@@ -119,18 +120,18 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         deviceCode: null,
         _pollingInterval: null,
         _progressUnlisten: null,
-        statusMessage: "Login successful",
+        statusMessage: translate("auth.success"),
       });
     } catch (error: unknown) {
       const message = getAuthErrorMessage(error);
 
       if (message.includes("authorization_pending")) {
-        set({ statusMessage: "Waiting for authorization..." });
+        set({ statusMessage: translate("auth.waiting") });
         return;
       }
 
       if (message.includes("slow_down")) {
-        set({ statusMessage: "Microsoft asked to slow down polling..." });
+        set({ statusMessage: translate("auth.slowDown") });
         return;
       }
 
@@ -142,11 +143,11 @@ export const useAuthStore = create<AuthState>((set, get) => ({
         deviceCode: null,
         _pollingInterval: null,
         _progressUnlisten: null,
-        statusMessage: `Login failed: ${message}`,
+        statusMessage: translate("auth.failed", { error: message }),
       });
 
       console.error("Failed to poll login status:", error);
-      toast.error(`Microsoft login failed: ${message}`);
+      toast.error(translate("auth.pollFailed", { error: message }));
     } finally {
       mutex.release();
     }
@@ -169,7 +170,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
   loginOffline: async (username: string) => {
     const trimmedUsername = username.trim();
     if (trimmedUsername.length === 0) {
-      throw new Error("Username cannot be empty");
+      throw new Error(translate("auth.usernameEmpty"));
     }
 
     try {
@@ -177,7 +178,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       set({ account, loginMode: "offline" });
     } catch (error) {
       console.error("Failed to login offline:", error);
-      toast.error("Failed to login offline");
+      toast.error(translate("auth.offlineFailed"));
     }
   },
   logout: async () => {
@@ -186,7 +187,7 @@ export const useAuthStore = create<AuthState>((set, get) => ({
       set({ account: null });
     } catch (error) {
       console.error("Failed to logout:", error);
-      toast.error("Failed to logout");
+      toast.error(translate("auth.logoutFailed"));
     }
   },
 }));
diff --git a/packages/ui/src/models/instance.ts b/packages/ui/src/models/instance.ts
index 8c108c15..63ce248d 100644
--- a/packages/ui/src/models/instance.ts
+++ b/packages/ui/src/models/instance.ts
@@ -13,6 +13,7 @@ import {
   setActiveInstance as setActiveInstanceCommand,
   updateInstance,
 } from "@/client";
+import { translate } from "@/lib/i18n";
 import type { Instance } from "@/types";
 
 interface InstanceState {
@@ -58,7 +59,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
       set({ instances, activeInstance });
     } catch (e) {
       console.error("Failed to load instances:", e);
-      toast.error("Error loading instances");
+      toast.error(translate("store.instancesLoadFailed"));
     }
   },
 
@@ -67,7 +68,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
     const instance = await createInstance(name);
     await setActiveInstanceCommand(instance.id);
     await refresh();
-    toast.success(`Instance "${name}" created successfully`);
+    toast.success(translate("store.instanceCreated", { name }));
     return instance;
   },
 
@@ -77,7 +78,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
       await deleteInstance(id);
       await refresh();
 
-      toast.success("Instance deleted successfully");
+      toast.success(translate("store.instanceDeleted"));
     } catch (e) {
       console.error("Failed to delete instance:", e);
       toast.error(String(e));
@@ -89,10 +90,10 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
     try {
       await updateInstance(instance);
       await refresh();
-      toast.success("Instance updated successfully");
+      toast.success(translate("store.instanceUpdated"));
     } catch (e) {
       console.error("Failed to update instance:", e);
-      toast.error("Error updating instance");
+      toast.error(translate("store.instanceUpdateFailed"));
     }
   },
 
@@ -107,7 +108,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
       const instance = await duplicateInstance(id, newName);
       await setActiveInstanceCommand(instance.id);
       await refresh();
-      toast.success(`Instance duplicated as "${newName}"`);
+      toast.success(translate("store.instanceDuplicated", { name: newName }));
       return instance;
     } catch (e) {
       console.error("Failed to duplicate instance:", e);
@@ -119,7 +120,7 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
   exportArchive: async (id, archivePath) => {
     try {
       await exportInstance(id, archivePath);
-      toast.success("Instance exported successfully");
+      toast.success(translate("store.instanceExported"));
     } catch (e) {
       console.error("Failed to export instance:", e);
       toast.error(String(e));
@@ -132,7 +133,9 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
       const instance = await importInstance(archivePath, newName);
       await setActiveInstanceCommand(instance.id);
       await refresh();
-      toast.success(`Instance "${instance.name}" imported successfully`);
+      toast.success(
+        translate("store.instanceImported", { name: instance.name }),
+      );
       return instance;
     } catch (e) {
       console.error("Failed to import instance:", e);
@@ -147,7 +150,10 @@ export const useInstanceStore = create<InstanceState>((set, get) => ({
       const result = await repairInstances();
       await refresh();
       toast.success(
-        `Repair completed: restored ${result.restoredInstances}, removed ${result.removedStaleEntries}`,
+        translate("store.repairCompleted", {
+          restored: result.restoredInstances,
+          removed: result.removedStaleEntries,
+        }),
       );
     } catch (e) {
       console.error("Failed to repair instances:", e);
diff --git a/packages/ui/src/models/settings.ts b/packages/ui/src/models/settings.ts
index 9f4119c1..14cf1261 100644
--- a/packages/ui/src/models/settings.ts
+++ b/packages/ui/src/models/settings.ts
@@ -1,6 +1,7 @@
 import { toast } from "sonner";
 import { create } from "zustand/react";
 import { getConfigPath, getSettings, saveSettings } from "@/client";
+import { translate } from "@/lib/i18n";
 import type { LauncherConfig } from "@/types";
 
 export interface SettingsState {
@@ -55,7 +56,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
       applyTheme(settings.theme);
     } catch (error) {
       console.error("Failed to load settings:", error);
-      toast.error("Failed to load settings");
+      toast.error(translate("settings.loadFailed"));
     }
   },
   save: async () => {
diff --git a/packages/ui/src/pages/home.tsx b/packages/ui/src/pages/home.tsx
index dc1413de..b32d8206 100644
--- a/packages/ui/src/pages/home.tsx
+++ b/packages/ui/src/pages/home.tsx
@@ -1,8 +1,10 @@
 import { useState } from "react";
 import { BottomBar } from "@/components/bottom-bar";
 import { useSaturnEffect } from "@/components/particle-background";
+import { useI18n } from "@/lib/i18n";
 
 export function HomePage() {
+  const { t } = useI18n();
   const [mouseX, setMouseX] = useState(0);
   const [mouseY, setMouseY] = useState(0);
   const saturn = useSaturnEffect();
@@ -73,7 +75,7 @@ export function HomePage() {
           <div className="flex items-center gap-3 mb-6">
             <div className="h-px w-12 bg-white/50"></div>
             <span className="text-xs font-mono font-bold tracking-[0.2em] text-white/50 uppercase">
-              Launcher Active
+              {t("home.status")}
             </span>
           </div>
 
@@ -91,7 +93,7 @@ export function HomePage() {
         {/* Action Area */}
         <div className="mt-8 flex gap-4">
           <div className="text-zinc-500 text-sm font-mono">
-            &gt; Ready to launch session.
+            {t("home.ready")}
           </div>
         </div>
 
diff --git a/packages/ui/src/pages/instances/create.tsx b/packages/ui/src/pages/instances/create.tsx
index 57efea25..9e76847d 100644
--- a/packages/ui/src/pages/instances/create.tsx
+++ b/packages/ui/src/pages/instances/create.tsx
@@ -69,15 +69,17 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
+import { translate, useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 import { useInstanceStore } from "@/models/instance";
 import type { FabricLoaderEntry, ForgeVersion, Version } from "@/types";
 
 const versionSchema = z.object({
-  versionId: z.string("Version is required"),
+  versionId: z.string(translate("create.versionRequired")),
 });
 
 function VersionComponent() {
+  const { t, locale } = useI18n();
   const {
     control,
     formState: { errors },
@@ -99,12 +101,12 @@ function VersionComponent() {
       setVersions(versions);
     } catch (e) {
       console.error("Failed to load versions:", e);
-      setErrorMessage(`Failed to load versions: ${String(e)}`);
+      setErrorMessage(t("create.loadVersionsFailed", { error: String(e) }));
       return;
     } finally {
       setIsLoading(false);
     }
-  }, []);
+  }, [t]);
   useEffect(() => {
     if (!versions) loadVersions();
   }, [versions, loadVersions]);
@@ -127,47 +129,57 @@ function VersionComponent() {
     <div className="flex flex-col min-h-0 h-full overflow-hidden">
       <div className="flex flex-row items-center mb-4 space-x-2">
         <div className="flex flex-row space-x-2 w-full">
-          <FieldLabel className="text-nowrap">Versions</FieldLabel>
+          <FieldLabel className="text-nowrap">
+            {t("create.versions")}
+          </FieldLabel>
           <Input
-            placeholder="Search versions..."
+            placeholder={t("create.searchVersions")}
             value={versionSearch}
             onChange={(e) => setVersionSearch(e.target.value)}
           />
         </div>
         <div className="flex flex-row space-x-2">
-          <FieldLabel className="text-nowrap">Type</FieldLabel>
+          <FieldLabel className="text-nowrap">{t("create.type")}</FieldLabel>
           <Select
             value={versionFilter}
             onValueChange={(value) => setVersionFilter(value)}
           >
             <SelectTrigger>
-              <SelectValue placeholder="Filter by type" />
+              <SelectValue placeholder={t("create.filterType")} />
             </SelectTrigger>
             <SelectContent alignItemWithTrigger={false}>
-              <SelectItem value="all">All Versions</SelectItem>
-              <SelectItem value="release">Release Versions</SelectItem>
-              <SelectItem value="snapshot">Snapshot Versions</SelectItem>
-              <SelectItem value="old_alpha">Old Alpha Versions</SelectItem>
-              <SelectItem value="old_beta">Old Beta Versions</SelectItem>
+              <SelectItem value="all">{t("create.allVersions")}</SelectItem>
+              <SelectItem value="release">
+                {t("create.releaseVersions")}
+              </SelectItem>
+              <SelectItem value="snapshot">
+                {t("create.snapshotVersions")}
+              </SelectItem>
+              <SelectItem value="old_alpha">
+                {t("create.oldAlphaVersions")}
+              </SelectItem>
+              <SelectItem value="old_beta">
+                {t("create.oldBetaVersions")}
+              </SelectItem>
             </SelectContent>
           </Select>
         </div>
         <Button onClick={loadVersions} disabled={isLoading}>
-          Refresh
+          {t("common.refresh")}
         </Button>
       </div>
       {errorMessage && (
         <div className="size-full flex flex-col items-center justify-center space-y-2">
           <p className="text-red-500">{errorMessage}</p>
           <Button variant="outline" onClick={loadVersions}>
-            Retry
+            {t("common.retry")}
           </Button>
         </div>
       )}
       {isLoading && !errorMessage ? (
         <div className="size-full flex flex-col items-center justify-center">
           <Spinner />
-          <p>Loading versions...</p>
+          <p>{t("create.loadingVersions")}</p>
         </div>
       ) : (
         <div className="flex-1 overflow-hidden">
@@ -190,7 +202,9 @@ function VersionComponent() {
                             <Badge variant="outline">{version.type}</Badge>
                           </FieldTitle>
                           <FieldDescription>
-                            {new Date(version.releaseTime).toLocaleString()}
+                            {new Date(version.releaseTime).toLocaleString(
+                              locale === "zh" ? "zh-CN" : "en-US",
+                            )}
                           </FieldDescription>
                         </FieldContent>
                         <div className="flex flex-row space-x-2 items-center">
@@ -222,13 +236,14 @@ function VersionComponent() {
 }
 
 const instanceSchema = z.object({
-  name: z.string().min(1, "Instance name is required"),
-  notes: z.string().max(100, "Notes must be at most 100 characters").optional(),
+  name: z.string().min(1, translate("create.instanceNameRequired")),
+  notes: z.string().max(100, translate("create.notesMax")).optional(),
   modLoader: z.enum(["fabric", "forge"]).optional(),
   modLoaderVersion: z.string().optional(),
 });
 
 function InstanceComponent() {
+  const { t } = useI18n();
   const {
     control,
     register,
@@ -248,32 +263,32 @@ function InstanceComponent() {
   const [isLoadingFabric, setIsLoadingFabric] = useState(false);
   const loadForgeVersions = useCallback(async () => {
     if (forgeVersions) return;
-    if (!versionId) return toast.error("Version ID is not set");
+    if (!versionId) return toast.error(t("create.versionIdMissing"));
     setIsLoadingForge(true);
     try {
       const versions = await getForgeVersionsForGame(versionId);
       setForgeVersions(versions);
     } catch (e) {
       console.error("Failed to load Forge versions:", e);
-      toast.error(`Failed to load Forge versions: ${String(e)}`);
+      toast.error(t("create.loadForgeFailed", { error: String(e) }));
     } finally {
       setIsLoadingForge(false);
     }
-  }, [versionId, forgeVersions]);
+  }, [versionId, forgeVersions, t]);
   const loadFabricVersions = useCallback(async () => {
     if (fabricVersions) return;
-    if (!versionId) return toast.error("Version ID is not set");
+    if (!versionId) return toast.error(t("create.versionIdMissing"));
     setIsLoadingFabric(true);
     try {
       const versions = await getFabricLoadersForVersion(versionId);
       setFabricVersions(versions);
     } catch (e) {
       console.error("Failed to load Fabric versions:", e);
-      toast.error(`Failed to load Fabric versions: ${String(e)}`);
+      toast.error(t("create.loadFabricFailed", { error: String(e) }));
     } finally {
       setIsLoadingFabric(false);
     }
-  }, [versionId, fabricVersions]);
+  }, [versionId, fabricVersions, t]);
 
   const modLoaderField = register("modLoader");
   const modLoaderVersionField = register("modLoaderVersion");
@@ -285,14 +300,14 @@ function InstanceComponent() {
           <FieldSet className="w-full">
             <Field orientation="horizontal">
               <FieldLabel htmlFor="name" className="text-nowrap" required>
-                Instance Name
+                {t("create.instanceName")}
               </FieldLabel>
               <Input {...register("name")} aria-invalid={!!errors.name} />
               {errors.name && <FieldError errors={[errors.name]} />}
             </Field>
             <Field>
               <FieldLabel htmlFor="notes" className="text-nowrap">
-                Instance Notes
+                {t("create.instanceNotes")}
               </FieldLabel>
               <Textarea
                 className="resize-none min-h-0"
@@ -360,7 +375,7 @@ function InstanceComponent() {
               {isLoadingForge ? (
                 <div className="h-full flex flex-col items-center justify-center">
                   <Spinner />
-                  <p>Loading Forge versions...</p>
+                  <p>{t("create.loadingForge")}</p>
                 </div>
               ) : (
                 <div className="h-full flex flex-col">
@@ -387,7 +402,9 @@ function InstanceComponent() {
                         }}
                       >
                         Forge {version.version} for Minecraft{" "}
-                        {version.minecraftVersion}
+                        {t("create.forMinecraft", {
+                          version: version.minecraftVersion,
+                        })}
                       </Button>
                       {idx !== forgeVersions.length - 1 && <Separator />}
                     </React.Fragment>
@@ -452,7 +469,7 @@ function InstanceComponent() {
               {isLoadingFabric ? (
                 <div className="h-full flex flex-col items-center justify-center">
                   <Spinner />
-                  <p>Loading Fabric versions...</p>
+                  <p>{t("create.loadingFabric")}</p>
                 </div>
               ) : (
                 <div className="h-full flex flex-col">
@@ -479,7 +496,9 @@ function InstanceComponent() {
                         }}
                       >
                         Fabric {version.loader.version} for Minecraft{" "}
-                        {version.intermediary.version}
+                        {t("create.forMinecraft", {
+                          version: version.intermediary.version,
+                        })}
                       </Button>
                       {idx !== fabricVersions.length - 1 && <Separator />}
                     </React.Fragment>
@@ -500,19 +519,20 @@ export const useVersionId = () => useContext(VersionIdContext);
 const { useStepper, Stepper } = defineStepper(
   {
     id: "version",
-    title: "Version",
+    title: translate("create.step.version"),
     Component: VersionComponent,
     schema: versionSchema,
   },
   {
     id: "instance",
-    title: "Instance",
+    title: translate("create.step.instance"),
     Component: InstanceComponent,
     schema: instanceSchema,
   },
 );
 
 export function CreateInstancePage() {
+  const { t } = useI18n();
   const stepper = useStepper();
   const schema = stepper.state.current.data.schema;
   const form = useForm<z.infer<typeof schema>>({
@@ -551,7 +571,7 @@ export function CreateInstancePage() {
           setInstanceMeta(data as z.infer<typeof instanceSchema>);
       }
 
-      if (!versionId) return toast.error("Please select a version first");
+      if (!versionId) return toast.error(t("create.selectVersionFirst"));
 
       setIsCreating(true);
 
@@ -567,7 +587,7 @@ export function CreateInstancePage() {
         switch (instanceMeta.modLoader) {
           case "fabric":
             if (!instanceMeta.modLoaderVersion) {
-              toast.error("Please select a Fabric loader version");
+              toast.error(t("create.selectFabricFirst"));
               return;
             }
             await installFabric(
@@ -578,7 +598,7 @@ export function CreateInstancePage() {
             break;
           case "forge":
             if (!instanceMeta.modLoaderVersion) {
-              toast.error("Please select a Forge loader version");
+              toast.error(t("create.selectForgeFirst"));
               return;
             }
             await installForge(
@@ -588,19 +608,19 @@ export function CreateInstancePage() {
             );
             break;
           default:
-            toast.error("Unsupported mod loader");
+            toast.error(t("create.unsupportedModLoader"));
             break;
         }
 
         navigate("/instances");
       } catch (error) {
         console.error(error);
-        toast.error("Failed to create instance");
+        toast.error(t("create.failed"));
       } finally {
         setIsCreating(false);
       }
     },
-    [stepper, instanceStore.create, versionId, navigate],
+    [stepper, instanceStore.create, versionId, navigate, t],
   );
 
   return (
@@ -663,7 +683,7 @@ export function CreateInstancePage() {
                 disabled={isCreating}
                 {...domProps}
               >
-                Previous
+                {t("common.previous")}
               </Button>
             )}
           />
@@ -672,14 +692,14 @@ export function CreateInstancePage() {
               {isCreating ? (
                 <>
                   <Spinner />
-                  Creating
+                  {t("common.creating")}
                 </>
               ) : (
-                "Create"
+                t("common.create")
               )}
             </Button>
           ) : (
-            <Button type="submit">Next</Button>
+            <Button type="submit">{t("common.next")}</Button>
           )}
         </div>
       </form>
@@ -688,6 +708,7 @@ export function CreateInstancePage() {
 }
 
 function PageWrapper() {
+  const { t } = useI18n();
   const navigate = useNavigate();
   const [showCancelDialog, setShowCancelDialog] = useState(false);
 
@@ -710,10 +731,10 @@ function PageWrapper() {
               >
                 <ArrowLeftIcon />
               </Button>
-              <h1 className="text-2xl font-bold">Create Instance</h1>
+              <h1 className="text-2xl font-bold">{t("create.title")}</h1>
             </div>
             <p className="text-sm text-muted-foreground">
-              Create a new Minecraft instance.
+              {t("create.subtitle")}
             </p>
             <CreateInstancePage />
           </>
@@ -723,18 +744,18 @@ function PageWrapper() {
       <AlertDialog open={showCancelDialog} onOpenChange={setShowCancelDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+            <AlertDialogTitle>{t("create.cancelTitle")}</AlertDialogTitle>
             <AlertDialogDescription>
-              All your progress will be lost.
+              {t("create.cancelDesc")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               variant="destructive"
               onClick={() => navigate(-1)}
             >
-              Continue
+              {t("common.continue")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/packages/ui/src/pages/instances/index.tsx b/packages/ui/src/pages/instances/index.tsx
index e6cd7341..1327f7c0 100644
--- a/packages/ui/src/pages/instances/index.tsx
+++ b/packages/ui/src/pages/instances/index.tsx
@@ -24,6 +24,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { useI18n } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/models/auth";
 import { useGameStore } from "@/models/game";
@@ -31,6 +32,7 @@ import { useInstanceStore } from "@/models/instance";
 import type { Instance } from "@/types";
 
 export function InstancesPage() {
+  const { t } = useI18n();
   const instancesStore = useInstanceStore();
   const navigate = useNavigate();
 
@@ -81,7 +83,7 @@ export function InstancesPage() {
 
   const openDuplicate = (instance: Instance) => {
     setSelectedInstance(instance);
-    setDuplicateName(`${instance.name} (Copy)`);
+    setDuplicateName(`${instance.name} Copy`);
     setShowDuplicateModal(true);
   };
 
@@ -151,7 +153,7 @@ export function InstancesPage() {
     <div className="h-full flex flex-col gap-4 p-6 overflow-y-auto">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-          Instances
+          {t("instances.title")}
         </h1>
         <div className="flex flex-row space-x-2">
           <Button
@@ -160,7 +162,7 @@ export function InstancesPage() {
             onClick={handleImport}
             disabled={isImporting}
           >
-            {isImporting ? "Importing..." : "Import"}
+            {isImporting ? t("instances.importing") : t("instances.import")}
           </Button>
           <Button
             type="button"
@@ -168,7 +170,7 @@ export function InstancesPage() {
             onClick={handleRepair}
             disabled={repairing}
           >
-            {repairing ? "Repairing..." : "Repair Index"}
+            {repairing ? t("instances.repairing") : t("instances.repair")}
           </Button>
           <Button
             type="button"
@@ -176,7 +178,7 @@ export function InstancesPage() {
             className="px-4 py-2 transition-colors"
           >
             <Plus size={18} />
-            Create Instance
+            {t("instances.create")}
           </Button>
         </div>
       </div>
@@ -184,8 +186,8 @@ export function InstancesPage() {
       {instancesStore.instances.length === 0 ? (
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center text-gray-500 dark:text-gray-400">
-            <p className="text-lg mb-2">No instances yet</p>
-            <p className="text-sm">Create your first instance to get started</p>
+            <p className="text-lg mb-2">{t("instances.emptyTitle")}</p>
+            <p className="text-sm">{t("instances.emptyDesc")}</p>
           </div>
         </div>
       ) : (
@@ -206,7 +208,7 @@ export function InstancesPage() {
                       await instancesStore.setActiveInstance(instance);
                     } catch (e) {
                       console.error("Failed to set active instance:", e);
-                      toast.error("Error setting active instance");
+                      toast.error(t("instances.setActiveFailed"));
                     }
                   }
                 }}
@@ -245,7 +247,7 @@ export function InstancesPage() {
                         </p>
                       ) : (
                         <p className="text-sm text-muted-foreground">
-                          No version selected
+                          {t("instances.noVersion")}
                         </p>
                       )}
                     </div>
@@ -266,7 +268,7 @@ export function InstancesPage() {
                               "Failed to set active instance:",
                               error,
                             );
-                            toast.error("Error setting active instance");
+                            toast.error(t("instances.setActiveFailed"));
                             return;
                           }
 
@@ -276,12 +278,12 @@ export function InstancesPage() {
                           }
 
                           if (!instance.versionId) {
-                            toast.error("No version selected or installed");
+                            toast.error(t("instances.noVersionInstalled"));
                             return;
                           }
 
                           if (!account) {
-                            toast.info("Please login first");
+                            toast.info(t("instances.loginFirst"));
                             return;
                           }
 
@@ -289,7 +291,7 @@ export function InstancesPage() {
                             await startGame(instance.id, instance.versionId);
                           } catch (error) {
                             console.error("Failed to start game:", error);
-                            toast.error("Error starting game");
+                            toast.error(t("instances.startFailed"));
                           }
                         }}
                         disabled={
@@ -387,10 +389,9 @@ export function InstancesPage() {
       <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Delete Instance</DialogTitle>
+            <DialogTitle>{t("instances.deleteTitle")}</DialogTitle>
             <DialogDescription>
-              Are you sure you want to delete "{selectedInstance?.name}"? This
-              action cannot be undone.
+              {t("instances.deleteDesc", { name: selectedInstance?.name })}
             </DialogDescription>
           </DialogHeader>
 
@@ -403,14 +404,14 @@ export function InstancesPage() {
                 setSelectedInstance(null);
               }}
             >
-              Cancel
+              {t("common.cancel")}
             </Button>
             <Button
               type="button"
               onClick={confirmDelete}
               className="bg-red-600 text-white hover:bg-red-500"
             >
-              Delete
+              {t("common.delete")}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -420,9 +421,9 @@ export function InstancesPage() {
       <Dialog open={showDuplicateModal} onOpenChange={setShowDuplicateModal}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Duplicate Instance</DialogTitle>
+            <DialogTitle>{t("instances.duplicateTitle")}</DialogTitle>
             <DialogDescription>
-              Provide a name for the duplicated instance.
+              {t("instances.duplicateDesc")}
             </DialogDescription>
           </DialogHeader>
 
@@ -430,7 +431,7 @@ export function InstancesPage() {
             <Input
               value={duplicateName}
               onChange={(e) => setDuplicateName(e.target.value)}
-              placeholder="New instance name"
+              placeholder={t("instances.newName")}
               onKeyDown={(e) => e.key === "Enter" && confirmDuplicate()}
             />
           </div>
@@ -445,14 +446,14 @@ export function InstancesPage() {
                 setDuplicateName("");
               }}
             >
-              Cancel
+              {t("common.cancel")}
             </Button>
             <Button
               type="button"
               onClick={confirmDuplicate}
               disabled={!duplicateName.trim()}
             >
-              Duplicate
+              {t("common.duplicate")}
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/packages/ui/src/pages/settings.tsx b/packages/ui/src/pages/settings.tsx
index 9387e236..d191c4a2 100644
--- a/packages/ui/src/pages/settings.tsx
+++ b/packages/ui/src/pages/settings.tsx
@@ -31,12 +31,14 @@ import {
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useI18n } from "@/lib/i18n";
 import { useJavaStore } from "@/models/java";
 import { useSettingsStore } from "@/models/settings";
 
-export type SettingsTab = "general" | "appearance" | "advanced";
+export type SettingsTab = "general" | "java" | "appearance" | "advanced";
 
 export function SettingsPage() {
+  const { locale, setLocale, t } = useI18n();
   const { config, ...settings } = useSettingsStore();
   const javaStore = useJavaStore();
   const [showConfigEditor, setShowConfigEditor] = useState<boolean>(false);
@@ -48,14 +50,14 @@ export function SettingsPage() {
         await settings.refresh();
       } catch (error) {
         console.error(error);
-        toast.error(`Failed to refresh settings: ${error}`);
+        toast.error(t("settings.refreshFailed", { error: String(error) }));
       }
       try {
         await javaStore.refreshInstallations();
         if (!javaStore.catalog) await javaStore.refresh();
       } catch (error) {
         console.error(error);
-        toast.error(`Failed to refresh java catalogs: ${error}`);
+        toast.error(t("settings.javaCatalogFailed", { error: String(error) }));
       }
     };
     refresh();
@@ -64,6 +66,7 @@ export function SettingsPage() {
     javaStore.refresh,
     javaStore.refreshInstallations,
     javaStore.catalog,
+    t,
   ]);
 
   const renderScrollArea = () => {
@@ -79,20 +82,22 @@ export function SettingsPage() {
         <TabsContent value="general" className="size-full">
           <Card className="size-full">
             <CardHeader>
-              <CardTitle className="font-bold text-xl">General</CardTitle>
+              <CardTitle className="font-bold text-xl">
+                {t("settings.general.title")}
+              </CardTitle>
             </CardHeader>
             <CardContent>
               <FieldGroup>
                 <FieldSet>
-                  <FieldLegend>Window Options</FieldLegend>
+                  <FieldLegend>{t("settings.window.title")}</FieldLegend>
                   <FieldDescription>
-                    May not work on some platforms like Linux Niri.
+                    {t("settings.window.desc")}
                   </FieldDescription>
                   <FieldGroup>
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <Field>
                         <FieldLabel htmlFor="width">
-                          Window Default Width
+                          {t("settings.window.width")}
                         </FieldLabel>
                         <Input
                           type="number"
@@ -112,7 +117,7 @@ export function SettingsPage() {
                       </Field>
                       <Field>
                         <FieldLabel htmlFor="height">
-                          Window Default Height
+                          {t("settings.window.height")}
                         </FieldLabel>
                         <Input
                           type="number"
@@ -134,10 +139,10 @@ export function SettingsPage() {
                     <Field className="flex flex-row items-center justify-between">
                       <FieldContent>
                         <FieldLabel htmlFor="gpu-acceleration">
-                          GPU Acceleration
+                          {t("settings.window.gpu")}
                         </FieldLabel>
                         <FieldDescription>
-                          Enable GPU acceleration for the interface.
+                          {t("settings.window.gpuDesc")}
                         </FieldDescription>
                       </FieldContent>
                       <Switch
@@ -153,9 +158,11 @@ export function SettingsPage() {
                   </FieldGroup>
                 </FieldSet>
                 <FieldSet>
-                  <FieldLegend>Network Options</FieldLegend>
+                  <FieldLegend>{t("settings.network.title")}</FieldLegend>
                   <Field>
-                    <Label htmlFor="download-threads">Download Threads</Label>
+                    <Label htmlFor="download-threads">
+                      {t("settings.network.threads")}
+                    </Label>
                     <Input
                       type="number"
                       name="download-threads"
@@ -181,90 +188,96 @@ export function SettingsPage() {
           <Card className="size-full">
             <CardHeader>
               <CardTitle className="font-bold text-xl">
-                Java Installations
+                {t("settings.java.title")}
               </CardTitle>
-              <CardContent>
-                <FieldGroup>
-                  <Field>
-                    <FieldLabel htmlFor="java-path">Java Path</FieldLabel>
-                    <Input
-                      type="text"
-                      name="java-path"
-                      value={config?.javaPath}
-                      onChange={(e) => {
+            </CardHeader>
+            <CardContent>
+              <FieldGroup>
+                <Field>
+                  <FieldLabel htmlFor="java-path">
+                    {t("settings.java.path")}
+                  </FieldLabel>
+                  <Input
+                    type="text"
+                    name="java-path"
+                    value={config?.javaPath}
+                    onChange={(e) => {
+                      settings.merge({
+                        javaPath: e.target.value,
+                      });
+                    }}
+                    onBlur={() => {
+                      settings.save();
+                    }}
+                  />
+                </Field>
+                <FieldSet>
+                  <FieldLegend>{t("settings.java.installs")}</FieldLegend>
+                  {javaStore.installations ? (
+                    <RadioGroup
+                      value={config.javaPath}
+                      onValueChange={(value) => {
                         settings.merge({
-                          javaPath: e.target.value,
+                          javaPath: value,
                         });
-                      }}
-                      onBlur={() => {
                         settings.save();
                       }}
-                    />
-                  </Field>
-                  <FieldSet>
-                    <FieldLegend>Java Installations</FieldLegend>
-                    {javaStore.installations ? (
-                      <RadioGroup
-                        value={config.javaPath}
-                        onValueChange={(value) => {
-                          settings.merge({
-                            javaPath: value,
-                          });
-                          settings.save();
-                        }}
-                      >
-                        {javaStore.installations?.map((installation) => (
-                          <FieldLabel
-                            key={installation.path}
-                            htmlFor={installation.path}
-                          >
-                            <Field orientation="horizontal">
-                              <FieldContent>
-                                <FieldTitle>
-                                  {installation.vendor} ({installation.version})
-                                </FieldTitle>
-                                <FieldDescription>
-                                  {installation.path}
-                                </FieldDescription>
-                              </FieldContent>
-                              <RadioGroupItem
-                                value={installation.path}
-                                id={installation.path}
-                              />
-                            </Field>
-                          </FieldLabel>
-                        ))}
-                      </RadioGroup>
-                    ) : (
-                      <div className="flex justify-center items-center h-30">
-                        <Spinner />
-                      </div>
-                    )}
-                  </FieldSet>
-                </FieldGroup>
-              </CardContent>
-            </CardHeader>
+                    >
+                      {javaStore.installations?.map((installation) => (
+                        <FieldLabel
+                          key={installation.path}
+                          htmlFor={installation.path}
+                        >
+                          <Field orientation="horizontal">
+                            <FieldContent>
+                              <FieldTitle>
+                                {installation.vendor} ({installation.version})
+                              </FieldTitle>
+                              <FieldDescription>
+                                {installation.path}
+                              </FieldDescription>
+                            </FieldContent>
+                            <RadioGroupItem
+                              value={installation.path}
+                              id={installation.path}
+                            />
+                          </Field>
+                        </FieldLabel>
+                      ))}
+                    </RadioGroup>
+                  ) : (
+                    <div className="flex justify-center items-center h-30">
+                      <Spinner />
+                    </div>
+                  )}
+                </FieldSet>
+              </FieldGroup>
+            </CardContent>
           </Card>
         </TabsContent>
         <TabsContent value="appearance" className="size-full">
           <Card className="size-full">
             <CardHeader>
-              <CardTitle className="font-bold text-xl">Appearance</CardTitle>
+              <CardTitle className="font-bold text-xl">
+                {t("settings.appearance.title")}
+              </CardTitle>
             </CardHeader>
             <CardContent>
               <FieldGroup>
                 <Field className="flex flex-row">
                   <FieldContent>
-                    <FieldLabel htmlFor="theme">Theme</FieldLabel>
+                    <FieldLabel htmlFor="theme">
+                      {t("settings.appearance.theme")}
+                    </FieldLabel>
                     <FieldDescription>
-                      Select your prefered theme.
+                      {t("settings.appearance.themeDesc")}
                     </FieldDescription>
                   </FieldContent>
                   <Select
                     items={[
-                      { label: "Dark", value: "dark" },
-                      { label: "Light", value: "light" },
-                      { label: "System", value: "system" },
+                      { label: t("settings.theme.dark"), value: "dark" },
+                      { label: t("settings.theme.light"), value: "light" },
+                      { label: t("settings.theme.system"), value: "system" },
                     ]}
                     value={config.theme}
                     onValueChange={async (value) => {
@@ -280,13 +293,53 @@ export function SettingsPage() {
                     }}
                   >
                     <SelectTrigger className="w-full max-w-48">
-                      <SelectValue placeholder="Please select a prefered theme" />
+                      <SelectValue
+                        placeholder={t("settings.appearance.themePlaceholder")}
+                      />
                     </SelectTrigger>
                     <SelectContent alignItemWithTrigger={false}>
                       <SelectGroup>
-                        <SelectItem value="system">System</SelectItem>
-                        <SelectItem value="light">Light</SelectItem>
-                        <SelectItem value="dark">Dark</SelectItem>
+                        <SelectItem value="system">
+                          {t("settings.theme.system")}
+                        </SelectItem>
+                        <SelectItem value="light">
+                          {t("settings.theme.light")}
+                        </SelectItem>
+                        <SelectItem value="dark">
+                          {t("settings.theme.dark")}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field className="flex flex-row">
+                  <FieldContent>
+                    <FieldLabel htmlFor="language">
+                      {t("settings.appearance.language")}
+                    </FieldLabel>
+                    <FieldDescription>
+                      {t("settings.appearance.languageDesc")}
+                    </FieldDescription>
+                  </FieldContent>
+                  <Select
+                    items={[
+                      { label: t("lang.chinese"), value: "zh" },
+                      { label: t("lang.english"), value: "en" },
+                    ]}
+                    value={locale}
+                    onValueChange={(value) => {
+                      if (value === "zh" || value === "en") {
+                        setLocale(value);
+                      }
+                    }}
+                  >
+                    <SelectTrigger className="w-full max-w-48">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent alignItemWithTrigger={false}>
+                      <SelectGroup>
+                        <SelectItem value="zh">{t("lang.chinese")}</SelectItem>
+                        <SelectItem value="en">{t("lang.english")}</SelectItem>
                       </SelectGroup>
                     </SelectContent>
                   </Select>
@@ -298,20 +351,22 @@ export function SettingsPage() {
         <TabsContent value="advanced" className="size-full">
           <Card className="size-full">
             <CardHeader>
-              <CardTitle className="font-bold text-xl">Advanced</CardTitle>
+              <CardTitle className="font-bold text-xl">
+                {t("settings.advanced.title")}
+              </CardTitle>
             </CardHeader>
             <CardContent>
               <FieldGroup>
                 <FieldSet>
-                  <FieldLegend>Advanced Options</FieldLegend>
+                  <FieldLegend>{t("settings.advanced.options")}</FieldLegend>
                   <FieldGroup>
                     <Field className="flex flex-row items-center justify-between">
                       <FieldContent>
                         <FieldLabel htmlFor="use-shared-caches">
-                          Use Shared Caches
+                          {t("settings.advanced.sharedCaches")}
                         </FieldLabel>
                         <FieldDescription>
-                          Share downloaded assets between instances.
+                          {t("settings.advanced.sharedCachesDesc")}
                         </FieldDescription>
                       </FieldContent>
                       <Switch
@@ -328,10 +383,10 @@ export function SettingsPage() {
                     <Field className="flex flex-row items-center justify-between">
                       <FieldContent>
                         <FieldLabel htmlFor="keep-per-instance-storage">
-                          Keep Legacy Per-Instance Storage
+                          {t("settings.advanced.legacyStorage")}
                         </FieldLabel>
                         <FieldDescription>
-                          Maintain separate cache folders for compatibility.
+                          {t("settings.advanced.legacyStorageDesc")}
                         </FieldDescription>
                       </FieldContent>
                       <Switch
@@ -358,7 +413,7 @@ export function SettingsPage() {
     <div className="size-full flex flex-col p-6 space-y-6">
       <div className="flex items-center justify-between">
         <h2 className="text-3xl font-black bg-clip-text text-transparent bg-linear-to-r dark:from-white dark:to-white/60 from-gray-900 to-gray-600">
-          Settings
+          {t("settings.title")}
         </h2>
 
         <Button
@@ -367,7 +422,7 @@ export function SettingsPage() {
           onClick={() => setShowConfigEditor(true)}
         >
           <FileJsonIcon />
-          <span className="hidden sm:inline">Open JSON</span>
+          <span className="hidden sm:inline">{t("settings.openJson")}</span>
         </Button>
       </div>
 
@@ -377,10 +432,14 @@ export function SettingsPage() {
         className="size-full flex flex-col gap-6"
       >
         <TabsList>
-          <TabsTrigger value="general">General</TabsTrigger>
-          <TabsTrigger value="java">Java</TabsTrigger>
-          <TabsTrigger value="appearance">Appearance</TabsTrigger>
-          <TabsTrigger value="advanced">Advanced</TabsTrigger>
+          <TabsTrigger value="general">{t("settings.tab.general")}</TabsTrigger>
+          <TabsTrigger value="java">{t("settings.tab.java")}</TabsTrigger>
+          <TabsTrigger value="appearance">
+            {t("settings.tab.appearance")}
+          </TabsTrigger>
+          <TabsTrigger value="advanced">
+            {t("settings.tab.advanced")}
+          </TabsTrigger>
         </TabsList>
         {renderScrollArea()}
       </Tabs>