diff --git a/ui/src/components/AppLocale.tsx b/ui/src/components/AppLocale.tsx
index 4e77e8d67..341648225 100644
--- a/ui/src/components/AppLocale.tsx
+++ b/ui/src/components/AppLocale.tsx
@@ -15,7 +15,7 @@ export const useAppLocaleMenuItems = () => {
       key: key as string,
       label: i18n.store.data[key].name as string,
       onClick: () => {
-        if (key !== i18n.language) {
+        if (key !== (i18n.resolvedLanguage ?? i18n.language)) {
           i18n.changeLanguage(key);
           window.location.reload();
         }
@@ -48,10 +48,10 @@ const AppLocaleIcon = (props: AppLocaleIconProps) => {
 
   return (
     <Show>
-      <Show.Case when={i18n.language === localeNames.EN}>
+      <Show.Case when={(i18n.resolvedLanguage ?? i18n.language) === localeNames.EN}>
         <IconLanguageEnZh {...props} />
       </Show.Case>
-      <Show.Case when={i18n.language === localeNames.ZH}>
+      <Show.Case when={(i18n.resolvedLanguage ?? i18n.language) === localeNames.ZH}>
         <IconLanguageZhEn {...props} />
       </Show.Case>
       <Show.Default>
@@ -76,7 +76,7 @@ const AppLocaleLinkButton = ({ className, style, showIcon = true }: AppLocaleLin
       <Typography.Text className={mergeCls("cursor-pointer", className)} style={style} type="secondary">
         <div className="flex items-center justify-center space-x-1">
           {showIcon ? <AppLocaleIcon size="1em" /> : <></>}
-          <span>{String(localeResources[i18n.language]?.name ?? t("common.menu.locale"))}</span>
+          <span>{String(localeResources[i18n.resolvedLanguage ?? i18n.language]?.name ?? t("common.menu.locale"))}</span>
         </div>
       </Typography.Text>
     </AppLocaleDropdown>
diff --git a/ui/src/pages/settings/SettingsAppearance.tsx b/ui/src/pages/settings/SettingsAppearance.tsx
index 893470443..ee427afea 100644
--- a/ui/src/pages/settings/SettingsAppearance.tsx
+++ b/ui/src/pages/settings/SettingsAppearance.tsx
@@ -75,7 +75,7 @@ const SettingsAppearanceLanguage = ({ className, style }: { className?: string;
   const [localeChanged, setLocaleChanged] = useState(false);
 
   const handleChange = (value: string) => {
-    if (value !== i18n.language) {
+    if (value !== (i18n.resolvedLanguage ?? i18n.language)) {
       setLocaleChanged(true);
       i18n.changeLanguage(value);
     }
@@ -91,7 +91,7 @@ const SettingsAppearanceLanguage = ({ className, style }: { className?: string;
               value: item.key,
               label: item.label,
             }))}
-            value={i18n.language}
+            value={i18n.resolvedLanguage ?? i18n.language}
             onChange={handleChange}
           />
         </Form.Item>