diff --git a/apps/ui-tars/src/renderer/src/components/AlertDialog/delSessionDialog.tsx b/apps/ui-tars/src/renderer/src/components/AlertDialog/delSessionDialog.tsx
index 57959c187c..b70c6b5ff9 100644
--- a/apps/ui-tars/src/renderer/src/components/AlertDialog/delSessionDialog.tsx
+++ b/apps/ui-tars/src/renderer/src/components/AlertDialog/delSessionDialog.tsx
@@ -12,6 +12,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@renderer/components/ui/alert-dialog';
+import { useI18n } from '../../i18n';
 
 interface DeleteSessionDialogProps {
   open: boolean;
@@ -24,23 +25,24 @@ export function DeleteSessionDialog({
   onOpenChange,
   onConfirm,
 }: DeleteSessionDialogProps) {
+  const { t } = useI18n();
+
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Delete Session</AlertDialogTitle>
+          <AlertDialogTitle>{t('deleteSession')}</AlertDialogTitle>
           <AlertDialogDescription>
-            The current session is running. Navigating away will forcibly stop
-            the session. Do you still want to proceed?
+            {t('deleteSessionDescription')}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
           <AlertDialogAction
             className="bg-red-500 hover:bg-red-600"
             onClick={onConfirm}
           >
-            Delete
+            {t('delete')}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
diff --git a/apps/ui-tars/src/renderer/src/components/AlertDialog/freeTrialDialog.tsx b/apps/ui-tars/src/renderer/src/components/AlertDialog/freeTrialDialog.tsx
index 0554d6d578..f452e9284e 100644
--- a/apps/ui-tars/src/renderer/src/components/AlertDialog/freeTrialDialog.tsx
+++ b/apps/ui-tars/src/renderer/src/components/AlertDialog/freeTrialDialog.tsx
@@ -15,6 +15,7 @@ import {
 } from '@renderer/components/ui/alert-dialog';
 import { Checkbox } from '@renderer/components/ui/checkbox';
 import { Label } from '@renderer/components/ui/label';
+import { useI18n } from '../../i18n';
 
 interface FreeTrialDialog {
   open: boolean;
@@ -24,6 +25,7 @@ interface FreeTrialDialog {
 
 export const FreeTrialDialog = memo(
   ({ open, onOpenChange, onConfirm }: FreeTrialDialog) => {
+    const { t } = useI18n();
     const [dontShowAgain, setDontShowAgain] = useState(false);
 
     const onCheck = (status: boolean) => {
@@ -41,41 +43,29 @@ export const FreeTrialDialog = memo(
       <AlertDialog open={open} onOpenChange={onOpenChange}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Free Trial Service Agreement</AlertDialogTitle>
+            <AlertDialogTitle>{t('freeTrialAgreement')}</AlertDialogTitle>
             <AlertDialogDescription className="hidden" />
             <div className="text-muted-foreground text-sm">
-              <p>
-                As part of our research, we offer a 30-minute free trial of our
-                cloud service powered by Volcano Engine, where you can
-                experience UI-TARS with remote computer and browser operations
-                without purchasing model service and computing resources.
-              </p>
-              <p className="my-4">
-                <b>
-                  By agreeing to use this service, your data will be transmitted
-                  to the servers. Please note that.
-                </b>{' '}
-                In compliance with relevant regulations, you should avoid
-                entering any sensitive personal information. All records on the
-                servers will be exclusively used for academic research purposes
-                and will not be utilized for any other activities.
-              </p>
+              <p>{t('freeTrialIntro')}</p>
               <p className="my-4">
-                Thank you for your support of the UI-TARS research project!
+                <b>{t('freeTrialDataNotice')}</b> {t('freeTrialDataCompliance')}
               </p>
+              <p className="my-4">{t('freeTrialThanks')}</p>
               <div className="flex items-center gap-2 mb-4 text-foreground">
                 <Checkbox
                   id="free"
                   checked={dontShowAgain}
                   onCheckedChange={onCheck}
                 />
-                <Label htmlFor="free">I agree. Don't show this again</Label>
+                <Label htmlFor="free">{t('freeTrialDontShow')}</Label>
               </div>
             </div>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={onClick}>Agree</AlertDialogAction>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={onClick}>
+              {t('agree')}
+            </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
diff --git a/apps/ui-tars/src/renderer/src/components/AlertDialog/navDialog.tsx b/apps/ui-tars/src/renderer/src/components/AlertDialog/navDialog.tsx
index 1c33a8c45f..85b1b832fe 100644
--- a/apps/ui-tars/src/renderer/src/components/AlertDialog/navDialog.tsx
+++ b/apps/ui-tars/src/renderer/src/components/AlertDialog/navDialog.tsx
@@ -14,6 +14,7 @@ import {
   AlertDialogTitle,
 } from '@renderer/components/ui/alert-dialog';
 import { memo } from 'react';
+import { useI18n } from '../../i18n';
 
 interface NavDialogStore {
   isOpen: boolean;
@@ -37,23 +38,24 @@ export const useNavDialog = create<NavDialogStore>((set) => ({
 
 export const NavDialog = memo(
   ({ open, onOpenChange, onConfirm }: NavDialogProps) => {
+    const { t } = useI18n();
+
     return (
       <AlertDialog open={open} onOpenChange={onOpenChange}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Navigation Alert</AlertDialogTitle>
+            <AlertDialogTitle>{t('navigationAlert')}</AlertDialogTitle>
             <AlertDialogDescription>
-              The current instance is running. Navigating away will forcibly
-              stop the instance. Do you still want to proceed?
+              {t('navigationAlertDescription')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-red-500 hover:bg-red-600"
               onClick={onConfirm}
             >
-              Confirm
+              {t('confirm')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/apps/ui-tars/src/renderer/src/components/AlertDialog/terminateDialog.tsx b/apps/ui-tars/src/renderer/src/components/AlertDialog/terminateDialog.tsx
index d822d362b3..2aa7ca79b8 100644
--- a/apps/ui-tars/src/renderer/src/components/AlertDialog/terminateDialog.tsx
+++ b/apps/ui-tars/src/renderer/src/components/AlertDialog/terminateDialog.tsx
@@ -13,6 +13,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@renderer/components/ui/alert-dialog';
+import { useI18n } from '../../i18n';
 
 interface TerminateDialogProps {
   open: boolean;
@@ -22,25 +23,24 @@ interface TerminateDialogProps {
 
 export const TerminateDialog = memo(
   ({ open, onOpenChange, onConfirm }: TerminateDialogProps) => {
+    const { t } = useI18n();
+
     return (
       <AlertDialog open={open} onOpenChange={onOpenChange}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>
-              Terminate the current instance ?
-            </AlertDialogTitle>
+            <AlertDialogTitle>{t('terminateCurrentInstance')}</AlertDialogTitle>
             <AlertDialogDescription>
-              After termination, the current remote instance will be reclaimed,
-              and the task will be paused
+              {t('terminateDescription')}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
             <AlertDialogAction
               className="bg-red-500 hover:bg-red-600"
               onClick={onConfirm}
             >
-              Terminate
+              {t('terminate')}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/apps/ui-tars/src/renderer/src/components/ChatInput/index.tsx b/apps/ui-tars/src/renderer/src/components/ChatInput/index.tsx
index 3958821fa9..a5849653de 100644
--- a/apps/ui-tars/src/renderer/src/components/ChatInput/index.tsx
+++ b/apps/ui-tars/src/renderer/src/components/ChatInput/index.tsx
@@ -26,6 +26,7 @@ import { useSession } from '@renderer/hooks/useSession';
 
 import { Operator } from '@main/store/types';
 import { useSetting } from '../../hooks/useSetting';
+import { useI18n } from '../../i18n';
 
 const ChatInput = ({
   operator,
@@ -38,6 +39,7 @@ const ChatInput = ({
   disabled: boolean;
   checkBeforeRun?: () => Promise<boolean>;
 }) => {
+  const { t } = useI18n();
   const {
     status,
     instructions: savedInstructions,
@@ -187,10 +189,7 @@ const ChatInput = ({
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p className="whitespace-pre-line">
-                send last instructions when you done for ui-tars&apos;s
-                &apos;CALL_USER&apos;
-              </p>
+              <p className="whitespace-pre-line">{t('callUserTooltip')}</p>
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
@@ -221,7 +220,7 @@ const ChatInput = ({
                 ? `${savedInstructions}`
                 : running && lastHumanMessage && messages?.length > 1
                   ? lastHumanMessage
-                  : 'What can I do for you today?'
+                  : t('chatPlaceholder')
             }
             className="min-h-[120px] rounded-2xl resize-none px-4 pb-16" // 调整内边距
             value={localInstructions}
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/category/chat.tsx b/apps/ui-tars/src/renderer/src/components/Settings/category/chat.tsx
index 3a64eed484..681f50719e 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/category/chat.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/category/chat.tsx
@@ -25,6 +25,7 @@ import {
   SelectValue,
 } from '@renderer/components/ui/select';
 import { Input } from '@renderer/components/ui/input';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   language: z.enum(['en', 'zh']),
@@ -33,6 +34,7 @@ const formSchema = z.object({
 });
 
 export function ChatSettings() {
+  const { t } = useI18n();
   const { settings, updateSetting } = useSetting();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -97,17 +99,15 @@ export function ChatSettings() {
             render={({ field }) => {
               return (
                 <FormItem>
-                  <FormLabel>Language</FormLabel>
-                  <FormDescription>
-                    Control the language used in LLM conversations
-                  </FormDescription>
+                  <FormLabel>{t('language')}</FormLabel>
+                  <FormDescription>{t('languageDescription')}</FormDescription>
                   <Select onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger>
-                      <SelectValue placeholder="Select language" />
+                      <SelectValue placeholder={t('selectLanguage')} />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="en">English</SelectItem>
-                      <SelectItem value="zh">中文</SelectItem>
+                      <SelectItem value="en">{t('english')}</SelectItem>
+                      <SelectItem value="zh">{t('chinese')}</SelectItem>
                     </SelectContent>
                   </Select>
                 </FormItem>
@@ -121,10 +121,8 @@ export function ChatSettings() {
               // console.log('field', field);
               return (
                 <FormItem>
-                  <FormLabel>Max Loop</FormLabel>
-                  <FormDescription>
-                    Enter a number between 25-200
-                  </FormDescription>
+                  <FormLabel>{t('maxLoop')}</FormLabel>
+                  <FormDescription>{t('maxLoopDescription')}</FormDescription>
                   <FormControl>
                     <Input
                       type="number"
@@ -143,12 +141,12 @@ export function ChatSettings() {
             name="loopIntervalInMs"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Loop Wait Time (ms)</FormLabel>
-                <FormDescription>Enter a number between 0-3000</FormDescription>
+                <FormLabel>{t('loopWaitTime')}</FormLabel>
+                <FormDescription>{t('loopWaitDescription')}</FormDescription>
                 <FormControl>
                   <Input
                     type="number"
-                    placeholder="Enter a number between 0-3000"
+                    placeholder={t('loopWaitDescription')}
                     {...field}
                     value={field.value === 0 ? '' : field.value}
                     onChange={(e) => field.onChange(Number(e.target.value))}
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/category/general.tsx b/apps/ui-tars/src/renderer/src/components/Settings/category/general.tsx
index 404cd70f31..445dfaa65f 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/category/general.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/category/general.tsx
@@ -5,8 +5,10 @@ import { api } from '@/renderer/src/api';
 import { toast } from 'sonner';
 
 import { REPO_OWNER, REPO_NAME } from '@main/shared/constants';
+import { useI18n } from '../../../i18n';
 
 export const GeneralSettings = () => {
+  const { t } = useI18n();
   const [updateLoading, setUpdateLoading] = useState(false);
   const [updateDetail, setUpdateDetail] = useState<{
     currentVersion: string;
@@ -28,10 +30,12 @@ export const GeneralSettings = () => {
         });
         return;
       } else if (!detail.isPackaged) {
-        toast.info('Unpackaged version does not support update check!');
+        toast.info(t('unpackagedNoUpdate'));
       } else {
-        toast.success('No update available', {
-          description: `current version: ${detail.currentVersion} is the latest version`,
+        toast.success(t('noUpdateAvailable'), {
+          description: t('currentVersionLatest', {
+            version: detail.currentVersion,
+          }),
           position: 'top-right',
           richColors: true,
         });
@@ -54,7 +58,7 @@ export const GeneralSettings = () => {
         <RefreshCcw
           className={`h-4 w-4 mr-2 ${updateLoading ? 'animate-spin' : ''}`}
         />
-        {updateLoading ? 'Checking...' : 'Check Updates'}
+        {updateLoading ? t('checking') : t('checkUpdates')}
       </Button>
       {updateDetail?.version && (
         <div className="text-sm text-gray-500">
@@ -63,7 +67,7 @@ export const GeneralSettings = () => {
       )}
       {updateDetail?.link && (
         <div className="text-sm text-gray-500">
-          Release Notes:{' '}
+          {t('releaseNotes')}{' '}
           <a
             href={updateDetail.link}
             target="_blank"
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/category/localBrowser.tsx b/apps/ui-tars/src/renderer/src/components/Settings/category/localBrowser.tsx
index 33206be069..ccfe247f36 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/category/localBrowser.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/category/localBrowser.tsx
@@ -28,12 +28,14 @@ import { SearchEngineForSettings } from '@/main/store/types';
 import googleIcon from '@resources/icons/google-color.svg?url';
 import bingIcon from '@resources/icons/bing-color.svg?url';
 import baiduIcon from '@resources/icons/baidu-color.svg?url';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   searchEngineForBrowser: z.nativeEnum(SearchEngineForSettings),
 });
 
 export function LocalBrowserSettings() {
+  const { t } = useI18n();
   const { settings, updateSetting } = useSetting();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -82,11 +84,11 @@ export function LocalBrowserSettings() {
             name="searchEngineForBrowser"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Default Search Engine:</FormLabel>
+                <FormLabel>{t('defaultSearchEngine')}</FormLabel>
                 <Select onValueChange={field.onChange} value={field.value}>
                   <FormControl>
                     <SelectTrigger className="w-[124px]">
-                      <SelectValue placeholder="Select a search engine" />
+                      <SelectValue placeholder={t('selectSearchEngine')} />
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/category/report.tsx b/apps/ui-tars/src/renderer/src/components/Settings/category/report.tsx
index 3f65b7e3e6..699dbc992e 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/category/report.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/category/report.tsx
@@ -17,6 +17,7 @@ import {
   FormMessage,
 } from '@renderer/components/ui/form';
 import { Input } from '@renderer/components/ui/input';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   reportStorageBaseUrl: z.string().optional(),
@@ -28,6 +29,7 @@ export interface VLMSettingsRef {
 }
 
 export function ReportSettings() {
+  const { t } = useI18n();
   const { settings, updateSetting } = useSetting();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -85,7 +87,7 @@ export function ReportSettings() {
             name="reportStorageBaseUrl"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Report Storage Base URL</FormLabel>
+                <FormLabel>{t('reportStorageBaseUrl')}</FormLabel>
                 <FormControl>
                   <Input
                     placeholder="https://your-report-storage-endpoint.com/upload"
@@ -102,7 +104,7 @@ export function ReportSettings() {
             name="utioBaseUrl"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>UTIO Base URL</FormLabel>
+                <FormLabel>{t('utioBaseUrl')}</FormLabel>
                 <FormControl>
                   <Input
                     placeholder="https://your-utio-endpoint.com/collect"
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/category/vlm.tsx b/apps/ui-tars/src/renderer/src/components/Settings/category/vlm.tsx
index f13351cacb..b636e10371 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/category/vlm.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/category/vlm.tsx
@@ -34,6 +34,7 @@ import { cn } from '@renderer/utils';
 
 import { PresetImport, PresetBanner } from './preset';
 import { api } from '@/renderer/src/api';
+import { useI18n } from '../../../i18n';
 
 const formSchema = z.object({
   vlmProvider: z.nativeEnum(VLMProviderV2, {
@@ -60,6 +61,7 @@ export function VLMSettings({
   autoSave = false,
   className,
 }: VLMSettingsProps) {
+  const { t } = useI18n();
   const { settings, updateSetting, updatePresetFromRemote } = useSetting();
   const [isPresetModalOpen, setPresetModalOpen] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -184,9 +186,8 @@ export function VLMSettings({
       await updatePresetFromRemote();
       // toast.success('Preset updated successfully');
     } catch (error) {
-      toast.error('Failed to update preset', {
-        description:
-          error instanceof Error ? error.message : 'Unknown error occurred',
+      toast.error(t('presetUpdateFailed'), {
+        description: error instanceof Error ? error.message : t('unknownError'),
       });
     }
   };
@@ -196,7 +197,7 @@ export function VLMSettings({
     e.stopPropagation();
 
     await window.electron.setting.resetPreset();
-    toast.success('Reset to manual mode successfully', {
+    toast.success(t('presetReset'), {
       duration: 1500,
     });
   };
@@ -207,6 +208,7 @@ export function VLMSettings({
         setIsCheckingResponseApi(true);
         const modelConfig = {
           baseUrl: newBaseUrl,
+          // secretlint-disable-next-line @secretlint/secretlint-rule-pattern
           apiKey: newApiKey,
           modelName: newModelName,
         };
@@ -216,9 +218,7 @@ export function VLMSettings({
           !modelConfig.apiKey ||
           !modelConfig.modelName
         ) {
-          toast.error(
-            'Please fill in all required fields before enabling Response API',
-          );
+          toast.error(t('fillRequiredBeforeResponses'));
           setIsCheckingResponseApi(false);
           return;
         }
@@ -244,7 +244,7 @@ export function VLMSettings({
     console.log('onSubmit', values);
 
     updateSetting({ ...settings, ...values });
-    toast.success('Settings saved successfully');
+    toast.success(t('settingsSaved'));
   };
 
   useImperativeHandle(ref, () => ({
@@ -274,7 +274,7 @@ export function VLMSettings({
         <form className={cn('space-y-8 px-[1px]', className)}>
           {!isRemoteAutoUpdatedPreset && (
             <Button type="button" variant="outline" onClick={handlePresetModal}>
-              Import Preset Config
+              {t('importPresetConfig')}
             </Button>
           )}
           {isRemoteAutoUpdatedPreset && (
@@ -293,14 +293,14 @@ export function VLMSettings({
             render={({ field }) => {
               return (
                 <FormItem>
-                  <FormLabel>VLM Provider</FormLabel>
+                  <FormLabel>{t('vlmProvider')}</FormLabel>
                   <Select
                     disabled={isRemoteAutoUpdatedPreset}
                     onValueChange={field.onChange}
                     value={field.value}
                   >
                     <SelectTrigger className="w-full bg-white">
-                      <SelectValue placeholder="Select VLM provider" />
+                      <SelectValue placeholder={t('selectVlmProvider')} />
                     </SelectTrigger>
                     <SelectContent>
                       {Object.values(VLMProviderV2).map((provider) => (
@@ -321,11 +321,11 @@ export function VLMSettings({
             name="vlmBaseUrl"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>VLM Base URL</FormLabel>
+                <FormLabel>{t('vlmBaseUrl')}</FormLabel>
                 <FormControl>
                   <Input
                     className="bg-white"
-                    placeholder="Enter VLM Base URL"
+                    placeholder={t('enterVlmBaseUrl')}
                     {...field}
                     disabled={isRemoteAutoUpdatedPreset}
                   />
@@ -340,13 +340,13 @@ export function VLMSettings({
             name="vlmApiKey"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>VLM API Key</FormLabel>
+                <FormLabel>{t('vlmApiKey')}</FormLabel>
                 <FormControl>
                   <div className="relative">
                     <Input
                       type={showPassword ? 'text' : 'password'}
                       className="bg-white"
-                      placeholder="Enter VLM API_Key"
+                      placeholder={t('enterVlmApiKey')}
                       {...field}
                       disabled={isRemoteAutoUpdatedPreset}
                     />
@@ -375,11 +375,11 @@ export function VLMSettings({
             name="vlmModelName"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>VLM Model Name</FormLabel>
+                <FormLabel>{t('vlmModelName')}</FormLabel>
                 <FormControl>
                   <Input
                     className="bg-white"
-                    placeholder="Enter VLM Model Name"
+                    placeholder={t('enterVlmModelName')}
                     {...field}
                     disabled={isRemoteAutoUpdatedPreset}
                   />
@@ -392,6 +392,7 @@ export function VLMSettings({
           <ModelAvailabilityCheck
             modelConfig={{
               baseUrl: newBaseUrl,
+              // secretlint-disable-next-line @secretlint/secretlint-rule-pattern
               apiKey: newApiKey,
               modelName: newModelName,
             }}
@@ -404,7 +405,7 @@ export function VLMSettings({
             name="useResponsesApi"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Use Responses API</FormLabel>
+                <FormLabel>{t('useResponsesApi')}</FormLabel>
                 <FormControl>
                   <div className="flex items-center gap-3">
                     <Switch
@@ -415,13 +416,13 @@ export function VLMSettings({
                     />
                     {responseApiSupported === false && (
                       <p className="text-sm text-red-500">
-                        Response API is not supported by this model
+                        {t('responseApiUnsupported')}
                       </p>
                     )}
                     {isCheckingResponseApi && (
                       <p className="text-sm text-muted-foreground flex items-center">
                         <Loader2 className="mr-2 h-3 w-3 animate-spin" />
-                        Checking Response API support...
+                        {t('checkingResponseApi')}
                       </p>
                     )}
                   </div>
@@ -443,6 +444,7 @@ export function VLMSettings({
 interface ModelAvailabilityCheckProps {
   modelConfig: {
     baseUrl: string;
+    // secretlint-disable-next-line @secretlint/secretlint-rule-pattern
     apiKey: string;
     modelName: string;
   };
@@ -465,6 +467,7 @@ export function ModelAvailabilityCheck({
   className,
   onResponseApiSupportChange,
 }: ModelAvailabilityCheckProps) {
+  const { t } = useI18n();
   const [checkState, setCheckState] = useState<CheckState>({ status: 'idle' });
 
   const { baseUrl, apiKey, modelName } = modelConfig;
@@ -492,9 +495,7 @@ export function ModelAvailabilityCheck({
     e.stopPropagation();
 
     if (!isConfigValid) {
-      toast.error(
-        'Please fill in all required fields before checking model availability',
-      );
+      toast.error(t('fillRequiredBeforeModelCheck'));
       return;
     }
 
@@ -509,11 +510,12 @@ export function ModelAvailabilityCheck({
       onResponseApiSupportChange?.(responseApiSupported);
 
       if (isAvailable) {
-        const successMessage = `Model "${modelName}" is available and working correctly${
-          responseApiSupported
-            ? '. Response API is supported.'
-            : '. But Response API is not supported.'
-        }`;
+        const successMessage = t('modelAvailable', {
+          modelName,
+          suffix: responseApiSupported
+            ? t('responseApiSupported')
+            : t('responseApiNotSupported'),
+        });
         setCheckState({
           status: 'success',
           message: successMessage,
@@ -523,7 +525,7 @@ export function ModelAvailabilityCheck({
           responseApiSupported,
         });
       } else {
-        const errorMessage = `Model "${modelName}" is not responding correctly`;
+        const errorMessage = t('modelNotResponding', { modelName });
         setCheckState({
           status: 'error',
           message: errorMessage,
@@ -533,8 +535,10 @@ export function ModelAvailabilityCheck({
       }
     } catch (error) {
       const errorMessage =
-        error instanceof Error ? error.message : 'Unknown error occurred';
-      const fullErrorMessage = `Failed to connect to model: ${errorMessage}`;
+        error instanceof Error ? error.message : t('unknownError');
+      const fullErrorMessage = t('failedConnectModel', {
+        message: errorMessage,
+      });
 
       setCheckState({
         status: 'error',
@@ -564,10 +568,10 @@ export function ModelAvailabilityCheck({
         {checkState.status === 'checking' ? (
           <>
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            Checking Model...
+            {t('checkingModel')}
           </>
         ) : (
-          'Check Model Availability'
+          t('checkModelAvailability')
         )}
       </Button>
 
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/global.tsx b/apps/ui-tars/src/renderer/src/components/Settings/global.tsx
index 0807929572..1d8929ed1c 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/global.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/global.tsx
@@ -27,6 +27,7 @@ import { ChatSettings } from './category/chat';
 import { LocalBrowserSettings } from './category/localBrowser';
 import { ReportSettings } from './category/report';
 import { GeneralSettings } from './category/general';
+import { useI18n } from '../../i18n';
 
 interface GlobalSettingsStore {
   isOpen: boolean;
@@ -43,13 +44,14 @@ export const useGlobalSettings = create<GlobalSettingsStore>((set) => ({
 }));
 
 export const GlobalSettings = () => {
+  const { t } = useI18n();
   const { isOpen, toggleSettings } = useGlobalSettings();
 
   return (
     <Dialog open={isOpen} onOpenChange={toggleSettings}>
       <DialogContent className="min-w-4/5 xl:min-w-3/5 h-4/5 [&>button:last-child]:hidden">
         <DialogHeader className="hidden">
-          <DialogTitle>Settings</DialogTitle>
+          <DialogTitle>{t('settings')}</DialogTitle>
           <DialogDescription className="hidden" />
         </DialogHeader>
         <Tabs defaultValue="vlm" className="w-full gap-6 flex-row">
@@ -60,35 +62,35 @@ export const GlobalSettings = () => {
                 className="w-full justify-start gap-2 px-2 py-1.5 mb-2 !shadow-none font-normal data-[state=active]:font-medium data-[state=active]:bg-accent data-[state=active]:text-accent-foreground hover:bg-accent/50"
               >
                 <Sparkles strokeWidth={2} />
-                VLM Settings
+                {t('vlmSettings')}
               </TabsTrigger>
               <TabsTrigger
                 value="chat"
                 className="w-full justify-start gap-2 px-2 py-1.5 mb-2 !shadow-none font-normal data-[state=active]:font-medium data-[state=active]:bg-accent data-[state=active]:text-accent-foreground hover:bg-accent/50"
               >
                 <MessagesSquare strokeWidth={2} />
-                Chat Settings
+                {t('chatSettings')}
               </TabsTrigger>
               <TabsTrigger
                 value="operator"
                 className="w-full justify-start gap-2 px-2 py-1.5 mb-2 !shadow-none font-normal data-[state=active]:font-medium data-[state=active]:bg-accent data-[state=active]:text-accent-foreground hover:bg-accent/50"
               >
                 <Cpu strokeWidth={2} />
-                Operator Settings
+                {t('operatorSettings')}
               </TabsTrigger>
               <TabsTrigger
                 value="report"
                 className="w-full justify-start gap-2 px-2 py-1.5 mb-2 !shadow-none font-normal data-[state=active]:font-medium data-[state=active]:bg-accent data-[state=active]:text-accent-foreground hover:bg-accent/50"
               >
                 <FileText strokeWidth={2} />
-                Report Settings
+                {t('reportSettings')}
               </TabsTrigger>
               <TabsTrigger
                 value="general"
                 className="w-full justify-start gap-2 px-2 py-1.5 mb-2 !shadow-none font-normal data-[state=active]:font-medium data-[state=active]:bg-accent data-[state=active]:text-accent-foreground hover:bg-accent/50"
               >
                 <Settings strokeWidth={2} />
-                General Settings
+                {t('generalSettings')}
               </TabsTrigger>
             </TabsList>
           </div>
@@ -96,14 +98,18 @@ export const GlobalSettings = () => {
           <div className="flex-1">
             <TabsContent value="vlm" className="mt-0">
               <ScrollArea className="h-[calc(80vh-48px)]">
-                <h2 className="text-xl font-semibold mb-3">VLM Settings</h2>
+                <h2 className="text-xl font-semibold mb-3">
+                  {t('vlmSettings')}
+                </h2>
                 <Separator className="mb-4" />
                 <VLMSettings autoSave={true} />
               </ScrollArea>
             </TabsContent>
 
             <TabsContent value="chat" className="mt-0">
-              <h2 className="text-xl font-semibold mb-3">Chat Settings</h2>
+              <h2 className="text-xl font-semibold mb-3">
+                {t('chatSettings')}
+              </h2>
               <Separator className="mb-4" />
               <ChatSettings />
             </TabsContent>
@@ -111,22 +117,26 @@ export const GlobalSettings = () => {
             <TabsContent value="operator" className="mt-0 flex-1">
               <ScrollArea className="h-[calc(80vh-48px)]">
                 <h2 className="text-xl font-semibold mb-3">
-                  Local Operator Settings
+                  {t('localOperatorSettings')}
                 </h2>
                 <Separator className="mb-4" />
                 <h3 className="text-lg font-semibold mt-5 mb-3">
-                  Local Browser Operator
+                  {t('localBrowserOperator')}
                 </h3>
                 <LocalBrowserSettings />
               </ScrollArea>
             </TabsContent>
             <TabsContent value="report" className="mt-0">
-              <h2 className="text-xl font-semibold mb-3">Report Settings</h2>
+              <h2 className="text-xl font-semibold mb-3">
+                {t('reportSettings')}
+              </h2>
               <Separator className="mb-4" />
               <ReportSettings />
             </TabsContent>
             <TabsContent value="general" className="mt-0">
-              <h2 className="text-xl font-semibold mb-3">General Settings</h2>
+              <h2 className="text-xl font-semibold mb-3">
+                {t('generalSettings')}
+              </h2>
               <Separator className="mb-4" />
               <GeneralSettings />
             </TabsContent>
diff --git a/apps/ui-tars/src/renderer/src/components/Settings/local.tsx b/apps/ui-tars/src/renderer/src/components/Settings/local.tsx
index 8378eaa93b..7caa4c1f6d 100644
--- a/apps/ui-tars/src/renderer/src/components/Settings/local.tsx
+++ b/apps/ui-tars/src/renderer/src/components/Settings/local.tsx
@@ -10,6 +10,7 @@ import { LocalStore } from '@main/store/validate';
 
 import { VLMSettings, VLMSettingsRef } from './category/vlm';
 import { useRef } from 'react';
+import { useI18n } from '../../i18n';
 
 interface LocalSettingsDialogProps {
   isOpen: boolean;
@@ -36,6 +37,7 @@ export const LocalSettingsDialog = ({
   onSubmit,
   onClose,
 }: LocalSettingsDialogProps) => {
+  const { t } = useI18n();
   const vlmSettingsRef = useRef<VLMSettingsRef>(null);
 
   const handleGetStart = async () => {
@@ -51,15 +53,12 @@ export const LocalSettingsDialog = ({
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <DialogContent className="max-w-[480]">
         <DialogHeader>
-          <DialogTitle>VLM Settings</DialogTitle>
-          <DialogDescription>
-            Enter VLM settings to enable the model to control the local computer
-            or browser.
-          </DialogDescription>
+          <DialogTitle>{t('vlmSettings')}</DialogTitle>
+          <DialogDescription>{t('vlmDialogDescription')}</DialogDescription>
         </DialogHeader>
         <VLMSettings ref={vlmSettingsRef} />
         <Button className="mt-8 mx-8" onClick={handleGetStart}>
-          Get Start
+          {t('getStart')}
         </Button>
       </DialogContent>
     </Dialog>
diff --git a/apps/ui-tars/src/renderer/src/components/SideBar/app-sidebar.tsx b/apps/ui-tars/src/renderer/src/components/SideBar/app-sidebar.tsx
index 9919061453..3094127cca 100644
--- a/apps/ui-tars/src/renderer/src/components/SideBar/app-sidebar.tsx
+++ b/apps/ui-tars/src/renderer/src/components/SideBar/app-sidebar.tsx
@@ -27,8 +27,10 @@ import { useStore } from '../../hooks/useStore';
 import { StatusEnum } from '@ui-tars/sdk';
 import { NavDialog } from '../AlertDialog/navDialog';
 import { api } from '../../api';
+import { useI18n } from '../../i18n';
 
 export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
+  const { t } = useI18n();
   const {
     currentSessionId,
     sessions,
@@ -150,7 +152,7 @@ export function AppSidebar({ ...props }: ComponentProps<typeof Sidebar>) {
               onClick={handleHomeClick}
             >
               <Home />
-              Home
+              {t('home')}
             </SidebarMenuButton>
           </SidebarMenu>
         </SidebarHeader>
diff --git a/apps/ui-tars/src/renderer/src/components/SideBar/nav-footer.tsx b/apps/ui-tars/src/renderer/src/components/SideBar/nav-footer.tsx
index 0cceb4e6f4..c484668799 100644
--- a/apps/ui-tars/src/renderer/src/components/SideBar/nav-footer.tsx
+++ b/apps/ui-tars/src/renderer/src/components/SideBar/nav-footer.tsx
@@ -9,18 +9,21 @@ import {
   SidebarMenu,
   SidebarMenuButton,
 } from '@renderer/components/ui/sidebar';
+import { useI18n } from '../../i18n';
 
 interface NavSettingsProps {
   onClick: () => void;
 }
 
 export function NavSettings({ onClick }: NavSettingsProps) {
+  const { t } = useI18n();
+
   return (
     <SidebarGroup>
       <SidebarMenu className="items-center">
         <SidebarMenuButton className="font-medium" onClick={onClick}>
           <Settings />
-          <span>Settings</span>
+          <span>{t('settings')}</span>
         </SidebarMenuButton>
       </SidebarMenu>
     </SidebarGroup>
diff --git a/apps/ui-tars/src/renderer/src/components/SideBar/nav-history.tsx b/apps/ui-tars/src/renderer/src/components/SideBar/nav-history.tsx
index 373cad53a0..3afbb16a17 100644
--- a/apps/ui-tars/src/renderer/src/components/SideBar/nav-history.tsx
+++ b/apps/ui-tars/src/renderer/src/components/SideBar/nav-history.tsx
@@ -39,6 +39,7 @@ import { ShareOptions } from './share';
 
 import { Operator } from '@main/store/types';
 import { DeleteSessionDialog } from '@renderer/components/AlertDialog/delSessionDialog';
+import { useI18n } from '../../i18n';
 
 const getIcon = (operator: Operator, isActive: boolean) => {
   const isRemote =
@@ -71,6 +72,7 @@ export function NavHistory({
   onSessionClick: (id: string) => void;
   onSessionDelete: (id: string) => void;
 }) {
+  const { t } = useI18n();
   const [isShareConfirmOpen, setIsShareConfirmOpen] = useState(false);
   const [id, setId] = useState('');
   const [isHistoryOpen, setIsHistoryOpen] = useState(true);
@@ -108,7 +110,7 @@ export function NavHistory({
                   onClick={handleHistory}
                 >
                   <History strokeWidth={2} />
-                  <span>History</span>
+                  <span>{t('history')}</span>
                   <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                 </SidebarMenuButton>
               </CollapsibleTrigger>
@@ -130,7 +132,7 @@ export function NavHistory({
                         <DropdownMenuTrigger asChild>
                           <SidebarMenuAction className="invisible group-hover/item:visible [&[data-state=open]]:visible mt-1">
                             <MoreHorizontal />
-                            <span className="sr-only">More</span>
+                            <span className="sr-only">{t('more')}</span>
                           </SidebarMenuAction>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent
@@ -144,7 +146,7 @@ export function NavHistory({
                             onClick={() => handleDelete(item.id)}
                           >
                             <Trash2 className="text-red-400" />
-                            <span>Delete</span>
+                            <span>{t('delete')}</span>
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
diff --git a/apps/ui-tars/src/renderer/src/components/SideBar/nav-main.tsx b/apps/ui-tars/src/renderer/src/components/SideBar/nav-main.tsx
index e9037c0649..a84528ebc0 100644
--- a/apps/ui-tars/src/renderer/src/components/SideBar/nav-main.tsx
+++ b/apps/ui-tars/src/renderer/src/components/SideBar/nav-main.tsx
@@ -19,6 +19,7 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from '@renderer/components/ui/sidebar';
+import { useI18n } from '../../i18n';
 
 export function NavMain({
   items,
@@ -34,9 +35,11 @@ export function NavMain({
     }[];
   }[];
 }) {
+  const { t } = useI18n();
+
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarGroupLabel>{t('platform')}</SidebarGroupLabel>
       <SidebarMenu>
         {items.map((item) => (
           <Collapsible
diff --git a/apps/ui-tars/src/renderer/src/i18n.ts b/apps/ui-tars/src/renderer/src/i18n.ts
new file mode 100644
index 0000000000..90544fb641
--- /dev/null
+++ b/apps/ui-tars/src/renderer/src/i18n.ts
@@ -0,0 +1,259 @@
+import { useCallback, useMemo } from 'react';
+
+import { useSetting } from './hooks/useSetting';
+
+const translations = {
+  en: {
+    appTitle: 'Welcome to UI-TARS Desktop',
+    remoteVolcanoIntro:
+      'You can also experience the remote versions on Volcano Engine:',
+    computerOperator: 'Computer Operator',
+    browserOperator: 'Browser Operator',
+    computerOperatorDescription:
+      'Use the UI-TARS model to automate and complete tasks directly on your computer with AI assistance.',
+    browserOperatorDescription:
+      'Let the UI-TARS model help you automate browser tasks, from navigating pages to filling out forms.',
+    useLocalComputer: 'Use Local Computer',
+    useLocalBrowser: 'Use Local Browser',
+    newSession: 'New Session',
+    newChat: 'New Chat',
+    screenshot: 'ScreenShot',
+    thinking: 'Thinking...',
+    chatPlaceholder: 'What can I do for you today?',
+    platform: 'Platform',
+    home: 'Home',
+    history: 'History',
+    more: 'More',
+    delete: 'Delete',
+    settings: 'Settings',
+    vlmSettings: 'VLM Settings',
+    chatSettings: 'Chat Settings',
+    operatorSettings: 'Operator Settings',
+    reportSettings: 'Report Settings',
+    generalSettings: 'General Settings',
+    localOperatorSettings: 'Local Operator Settings',
+    localComputerOperator: 'Local Computer Operator',
+    localBrowserOperator: 'Local Browser Operator',
+    remoteComputerOperator: 'Remote Computer Operator',
+    remoteBrowserOperator: 'Remote Browser Operator',
+    language: 'Language',
+    languageDescription: 'Control the language used in LLM conversations',
+    selectLanguage: 'Select language',
+    english: 'English',
+    chinese: 'Chinese',
+    maxLoop: 'Max Loop',
+    maxLoopDescription: 'Enter a number between 25-200',
+    loopWaitTime: 'Loop Wait Time (ms)',
+    loopWaitDescription: 'Enter a number between 0-3000',
+    defaultSearchEngine: 'Default Search Engine:',
+    selectSearchEngine: 'Select a search engine',
+    reportStorageBaseUrl: 'Report Storage Base URL',
+    utioBaseUrl: 'UTIO Base URL',
+    checkUpdates: 'Check Updates',
+    checking: 'Checking...',
+    releaseNotes: 'Release Notes:',
+    noUpdateAvailable: 'No update available',
+    unpackagedNoUpdate: 'Unpackaged version does not support update check!',
+    currentVersionLatest: 'current version: {version} is the latest version',
+    importPresetConfig: 'Import Preset Config',
+    presetUpdated: 'Preset updated successfully',
+    presetUpdateFailed: 'Failed to update preset',
+    presetReset: 'Reset to manual mode successfully',
+    clear: 'Clear',
+    cancel: 'Cancel',
+    save: 'Save',
+    confirm: 'Confirm',
+    agree: 'Agree',
+    getStart: 'Get Start',
+    vlmDialogDescription:
+      'Enter VLM settings to enable the model to control the local computer or browser.',
+    vlmProvider: 'VLM Provider',
+    selectVlmProvider: 'Select VLM provider',
+    vlmBaseUrl: 'VLM Base URL',
+    enterVlmBaseUrl: 'Enter VLM Base URL',
+    vlmApiKey: 'VLM API Key',
+    enterVlmApiKey: 'Enter VLM API_Key',
+    vlmModelName: 'VLM Model Name',
+    enterVlmModelName: 'Enter VLM Model Name',
+    useResponsesApi: 'Use Responses API',
+    responseApiUnsupported: 'Response API is not supported by this model',
+    checkingResponseApi: 'Checking Response API support...',
+    checkModelAvailability: 'Check Model Availability',
+    checkingModel: 'Checking Model...',
+    fillRequiredBeforeResponses:
+      'Please fill in all required fields before enabling Response API',
+    fillRequiredBeforeModelCheck:
+      'Please fill in all required fields before checking model availability',
+    modelAvailable:
+      'Model "{modelName}" is available and working correctly{suffix}',
+    responseApiSupported: '. Response API is supported.',
+    responseApiNotSupported: '. But Response API is not supported.',
+    modelNotResponding: 'Model "{modelName}" is not responding correctly',
+    failedConnectModel: 'Failed to connect to model: {message}',
+    settingsSaved: 'Settings saved successfully',
+    settingsCleared: 'All settings cleared successfully',
+    settingsClearFailed: 'Failed to clear settings',
+    unknownError: 'Unknown error occurred',
+    deleteSession: 'Delete Session',
+    deleteSessionDescription:
+      'The current session is running. Navigating away will forcibly stop the session. Do you still want to proceed?',
+    navigationAlert: 'Navigation Alert',
+    navigationAlertDescription:
+      'The current instance is running. Navigating away will forcibly stop the instance. Do you still want to proceed?',
+    terminateCurrentInstance: 'Terminate the current instance?',
+    terminateDescription:
+      'After termination, the current remote instance will be reclaimed, and the task will be paused',
+    terminate: 'Terminate',
+    freeTrialAgreement: 'Free Trial Service Agreement',
+    freeTrialIntro:
+      'As part of our research, we offer a 30-minute free trial of our cloud service powered by Volcano Engine, where you can experience UI-TARS with remote computer and browser operations without purchasing model service and computing resources.',
+    freeTrialDataNotice:
+      'By agreeing to use this service, your data will be transmitted to the servers. Please note that.',
+    freeTrialDataCompliance:
+      'In compliance with relevant regulations, you should avoid entering any sensitive personal information. All records on the servers will be exclusively used for academic research purposes and will not be utilized for any other activities.',
+    freeTrialThanks:
+      'Thank you for your support of the UI-TARS research project!',
+    freeTrialDontShow: "I agree. Don't show this again",
+    callUserTooltip:
+      "send last instructions when you done for ui-tars's 'CALL_USER'",
+  },
+  zh: {
+    appTitle: '欢迎使用 UI-TARS Desktop',
+    remoteVolcanoIntro: '你也可以在火山引擎体验远程版本：',
+    computerOperator: '电脑操作助手',
+    browserOperator: '浏览器操作助手',
+    computerOperatorDescription:
+      '使用 UI-TARS 模型在本机电脑上自动执行和完成任务。',
+    browserOperatorDescription:
+      '让 UI-TARS 模型帮你自动完成浏览器任务，例如打开网页、导航和填写表单。',
+    useLocalComputer: '使用本机电脑',
+    useLocalBrowser: '使用本机浏览器',
+    newSession: '新会话',
+    newChat: '新建对话',
+    screenshot: '截图',
+    thinking: '思考中...',
+    chatPlaceholder: '今天想让我帮你做什么？',
+    platform: '平台',
+    home: '首页',
+    history: '历史记录',
+    more: '更多',
+    delete: '删除',
+    settings: '设置',
+    vlmSettings: 'VLM 设置',
+    chatSettings: '对话设置',
+    operatorSettings: '操作器设置',
+    reportSettings: '报告设置',
+    generalSettings: '通用设置',
+    localOperatorSettings: '本地操作器设置',
+    localComputerOperator: '本机电脑操作器',
+    localBrowserOperator: '本地浏览器操作器',
+    remoteComputerOperator: '远程电脑操作器',
+    remoteBrowserOperator: '远程浏览器操作器',
+    language: '语言',
+    languageDescription: '控制 LLM 对话使用的语言',
+    selectLanguage: '选择语言',
+    english: '英文',
+    chinese: '中文',
+    maxLoop: '最大循环次数',
+    maxLoopDescription: '请输入 25-200 之间的数字',
+    loopWaitTime: '循环等待时间（毫秒）',
+    loopWaitDescription: '请输入 0-3000 之间的数字',
+    defaultSearchEngine: '默认搜索引擎：',
+    selectSearchEngine: '选择搜索引擎',
+    reportStorageBaseUrl: '报告存储 Base URL',
+    utioBaseUrl: 'UTIO Base URL',
+    checkUpdates: '检查更新',
+    checking: '检查中...',
+    releaseNotes: '发布说明：',
+    noUpdateAvailable: '当前没有可用更新',
+    unpackagedNoUpdate: '未打包版本不支持检查更新！',
+    currentVersionLatest: '当前版本 {version} 已是最新版本',
+    importPresetConfig: '导入预设配置',
+    presetUpdated: '预设已更新',
+    presetUpdateFailed: '预设更新失败',
+    presetReset: '已切换回手动模式',
+    clear: '清空',
+    cancel: '取消',
+    save: '保存',
+    confirm: '确认',
+    agree: '同意',
+    getStart: '开始使用',
+    vlmDialogDescription: '填写 VLM 设置后，模型才能控制本机电脑或浏览器。',
+    vlmProvider: 'VLM 服务商',
+    selectVlmProvider: '选择 VLM 服务商',
+    vlmBaseUrl: 'VLM Base URL',
+    enterVlmBaseUrl: '请输入 VLM Base URL',
+    vlmApiKey: 'VLM API Key',
+    enterVlmApiKey: '请输入 VLM API Key',
+    vlmModelName: 'VLM 模型名称',
+    enterVlmModelName: '请输入 VLM 模型名称',
+    useResponsesApi: '使用 Responses API',
+    responseApiUnsupported: '该模型不支持 Response API',
+    checkingResponseApi: '正在检查 Response API 支持情况...',
+    checkModelAvailability: '检查模型可用性',
+    checkingModel: '正在检查模型...',
+    fillRequiredBeforeResponses: '启用 Response API 前，请先填写所有必填项',
+    fillRequiredBeforeModelCheck: '检查模型可用性前，请先填写所有必填项',
+    modelAvailable: '模型“{modelName}”可用，运行正常{suffix}',
+    responseApiSupported: '，并且支持 Response API。',
+    responseApiNotSupported: '，但不支持 Response API。',
+    modelNotResponding: '模型“{modelName}”没有正常响应',
+    failedConnectModel: '连接模型失败：{message}',
+    settingsSaved: '设置已保存',
+    settingsCleared: '所有设置已清空',
+    settingsClearFailed: '清空设置失败',
+    unknownError: '发生未知错误',
+    deleteSession: '删除会话',
+    deleteSessionDescription:
+      '当前会话正在运行。离开页面会强制停止该会话，确定继续吗？',
+    navigationAlert: '导航提醒',
+    navigationAlertDescription:
+      '当前实例正在运行。离开页面会强制停止该实例，确定继续吗？',
+    terminateCurrentInstance: '终止当前实例？',
+    terminateDescription: '终止后，当前远程实例会被回收，任务也会暂停。',
+    terminate: '终止',
+    freeTrialAgreement: '免费试用服务协议',
+    freeTrialIntro:
+      '作为研究项目的一部分，我们提供由火山引擎支持的 30 分钟云服务免费试用。你可以在无需购买模型服务和计算资源的情况下，体验 UI-TARS 的远程电脑和浏览器操作能力。',
+    freeTrialDataNotice:
+      '同意使用此服务即表示你的数据将被传输到服务器，请注意这一点。',
+    freeTrialDataCompliance:
+      '根据相关法规，请避免输入任何敏感个人信息。服务器上的所有记录仅用于学术研究目的，不会用于其他活动。',
+    freeTrialThanks: '感谢你支持 UI-TARS 研究项目！',
+    freeTrialDontShow: '我同意，不再显示',
+    callUserTooltip: '完成 UI-TARS 的 CALL_USER 请求后，发送上一条指令',
+  },
+} as const;
+
+type Language = keyof typeof translations;
+type TranslationKey = keyof typeof translations.en;
+
+export function useI18n() {
+  const { settings } = useSetting();
+
+  const language = useMemo<Language>(() => {
+    const browserLanguage = navigator.language.toLowerCase();
+    if (settings.language === 'zh' || browserLanguage.startsWith('zh')) {
+      return 'zh';
+    }
+
+    return 'en';
+  }, [settings.language]);
+
+  const t = useCallback(
+    (key: TranslationKey, values?: Record<string, string | number>) => {
+      let message: string = translations[language][key] || translations.en[key];
+
+      if (values) {
+        Object.entries(values).forEach(([name, value]) => {
+          message = message.replace(`{${name}}`, String(value));
+        });
+      }
+
+      return message;
+    },
+    [language],
+  );
+
+  return { language, t };
+}
diff --git a/apps/ui-tars/src/renderer/src/pages/home/index.tsx b/apps/ui-tars/src/renderer/src/pages/home/index.tsx
index 9a234f87c5..c1408ffbf1 100644
--- a/apps/ui-tars/src/renderer/src/pages/home/index.tsx
+++ b/apps/ui-tars/src/renderer/src/pages/home/index.tsx
@@ -31,8 +31,10 @@ import { sleep } from '@ui-tars/shared/utils';
 import { FreeTrialDialog } from '../../components/AlertDialog/freeTrialDialog';
 import { DragArea } from '../../components/Common/drag';
 import { OPERATOR_URL_MAP } from '../../const';
+import { useI18n } from '../../i18n';
 
 const Home = () => {
+  const { t } = useI18n();
   const navigate = useNavigate();
   const { createSession } = useSession();
   const [localConfig, setLocalConfig] = useState({
@@ -46,7 +48,7 @@ const Home = () => {
 
   const toRemoteComputer = async (value: 'free' | 'paid') => {
     console.log('toRemoteComputer', value);
-    const session = await createSession('New Session', {
+    const session = await createSession(t('newSession'), {
       operator: Operator.RemoteComputer,
       isFree: value === 'free',
     });
@@ -77,7 +79,7 @@ const Home = () => {
   const toRemoteBrowser = async (value: 'free' | 'paid') => {
     console.log('toRemoteBrowser', value);
 
-    const session = await createSession('New Session', {
+    const session = await createSession(t('newSession'), {
       operator: Operator.RemoteBrowser,
       isFree: value === 'free',
     });
@@ -106,7 +108,7 @@ const Home = () => {
 
   /** local click logic start */
   const toLocal = async (operator: Operator) => {
-    const session = await createSession('New Session', {
+    const session = await createSession(t('newSession'), {
       operator: operator,
     });
 
@@ -158,16 +160,13 @@ const Home = () => {
     <div className="w-full h-full flex flex-col">
       <DragArea></DragArea>
       <div className="w-full h-full flex flex-col items-center justify-center">
-        <h1 className="text-2xl font-semibold mt-1 mb-8">
-          Welcome to UI-TARS Desktop
-        </h1>
+        <h1 className="text-2xl font-semibold mt-1 mb-8">{t('appTitle')}</h1>
         <Alert className="mb-4 w-[824px]">
           <Info className="h-4 w-4 mt-2" />
           <AlertDescription>
             <div className="flex items-center">
               <p className="text-sm text-muted-foreground">
-                You can also experience the remote versions on Volcano
-                Engine:&nbsp;
+                {t('remoteVolcanoIntro')}&nbsp;
               </p>
               <Button
                 variant="link"
@@ -179,9 +178,9 @@ const Home = () => {
                   )
                 }
               >
-                Computer Operator
+                {t('computerOperator')}
               </Button>
-              <span>&nbsp;and&nbsp;</span>
+              <span>&nbsp;/&nbsp;</span>
               <Button
                 variant="link"
                 className="p-0 text-blue-500 hover:text-blue-600 hover:underline cursor-pointer"
@@ -192,7 +191,7 @@ const Home = () => {
                   )
                 }
               >
-                Browser Operator
+                {t('browserOperator')}
               </Button>
             </div>
           </AlertDescription>
@@ -200,10 +199,9 @@ const Home = () => {
         <div className="flex gap-6">
           <Card className="w-[400px] py-5">
             <CardHeader className="px-5">
-              <CardTitle>Computer Operator</CardTitle>
+              <CardTitle>{t('computerOperator')}</CardTitle>
               <CardDescription>
-                Use the UI-TARS model to automate and complete tasks directly on
-                your computer with AI assistance.
+                {t('computerOperatorDescription')}
               </CardDescription>
             </CardHeader>
             <CardContent className="px-5">
@@ -218,16 +216,15 @@ const Home = () => {
                 onClick={() => handleLocalPress(Operator.LocalComputer)}
                 className="w-full"
               >
-                Use Local Computer
+                {t('useLocalComputer')}
               </Button>
             </CardFooter>
           </Card>
           <Card className="w-[400px] py-5">
             <CardHeader className="px-5">
-              <CardTitle>Browser Operator</CardTitle>
+              <CardTitle>{t('browserOperator')}</CardTitle>
               <CardDescription>
-                Let the UI-TARS model help you automate browser tasks, from
-                navigating pages to filling out forms.
+                {t('browserOperatorDescription')}
               </CardDescription>
             </CardHeader>
             <CardContent className="px-5">
@@ -242,7 +239,7 @@ const Home = () => {
                 onClick={() => handleLocalPress(Operator.LocalBrowser)}
                 className="w-full"
               >
-                Use Local Browser
+                {t('useLocalBrowser')}
               </Button>
             </CardFooter>
           </Card>
diff --git a/apps/ui-tars/src/renderer/src/pages/local/index.tsx b/apps/ui-tars/src/renderer/src/pages/local/index.tsx
index 5a83a6b8b1..93514fd5c7 100644
--- a/apps/ui-tars/src/renderer/src/pages/local/index.tsx
+++ b/apps/ui-tars/src/renderer/src/pages/local/index.tsx
@@ -37,6 +37,8 @@ import {
   LocalSettingsDialog,
 } from '../../components/Settings/local';
 import { sleep } from '@ui-tars/shared/utils';
+import { useI18n } from '../../i18n';
+import { Operator } from '@main/store/types';
 
 const getFinishedContent = (predictionParsed?: PredictionParsed[]) =>
   predictionParsed?.find(
@@ -46,7 +48,15 @@ const getFinishedContent = (predictionParsed?: PredictionParsed[]) =>
       step.action_inputs.content.trim() !== '',
   )?.action_inputs?.content as string | undefined;
 
+const operatorTitleKeyMap = {
+  [Operator.LocalComputer]: 'localComputerOperator',
+  [Operator.LocalBrowser]: 'localBrowserOperator',
+  [Operator.RemoteComputer]: 'remoteComputerOperator',
+  [Operator.RemoteBrowser]: 'remoteBrowserOperator',
+} as const;
+
 const LocalOperator = () => {
+  const { t } = useI18n();
   const state = useLocation().state as RouterState;
   const navigate = useNavigate();
   const { setOpen } = useSidebar();
@@ -138,7 +148,7 @@ const LocalOperator = () => {
     status === StatusEnum.PAUSE;
 
   const onNewChat = useCallback(async () => {
-    const session = await createSession('New Session', {
+    const session = await createSession(t('newSession'), {
       operator: state.operator,
     });
 
@@ -261,7 +271,7 @@ const LocalOperator = () => {
             );
           })}
 
-          {thinking && <LoadingText text={'Thinking...'} />}
+          {thinking && <LoadingText text={t('thinking')} />}
           {errorMsg && <ErrorMessage text={errorMsg} />}
         </div>
       </ScrollArea>
@@ -271,7 +281,7 @@ const LocalOperator = () => {
   return (
     <div className="flex flex-col w-full h-full">
       <NavHeader
-        title={state.operator}
+        title={t(operatorTitleKeyMap[state.operator])}
         onBack={handleBack}
         docUrl="https://github.com/bytedance/UI-TARS-desktop/"
       ></NavHeader>
@@ -284,7 +294,7 @@ const LocalOperator = () => {
             ></SidebarTrigger>
             <Button variant="outline" size="sm" onClick={handleNewChat}>
               <MessageCirclePlus />
-              New Chat
+              {t('newChat')}
             </Button>
           </div>
           {renderChatList()}
@@ -298,7 +308,7 @@ const LocalOperator = () => {
         <Card className="flex-1 basis-3/5 p-3 h-[calc(100vh-76px)]">
           <Tabs defaultValue="screenshot" className="flex-1">
             <TabsList>
-              <TabsTrigger value="screenshot">ScreenShot</TabsTrigger>
+              <TabsTrigger value="screenshot">{t('screenshot')}</TabsTrigger>
             </TabsList>
             <TabsContent value="screenshot">
               <ImageGallery