diff --git a/libs/datasource/i18n/src/index.ts b/libs/datasource/i18n/src/index.ts
index 187ed40aae..a421494bf8 100644
--- a/libs/datasource/i18n/src/index.ts
+++ b/libs/datasource/i18n/src/index.ts
@@ -19,6 +19,8 @@ declare module 'react-i18next' {
     }
 }
 
+const STORAGE_KEY = 'i18n_lng';
+
 const LOCALES = [
     { value: 'en', text: 'English', res: en_US },
     { value: 'zh', text: '简体中文', res: zh_CN },
@@ -29,11 +31,26 @@ const resources = LOCALES.reduce<Resource>(
     {}
 );
 
+const fallbackLng = LOCALES[0].value;
+const standardizeLocale = (language: string) => {
+    if (LOCALES.find(locale => locale.value === language)) return language;
+    if (
+        LOCALES.find(
+            locale => locale.value === language.slice(0, 2).toLowerCase()
+        )
+    )
+        return language;
+    return fallbackLng;
+};
+
+const language = standardizeLocale(
+    localStorage.getItem(STORAGE_KEY) ?? navigator.language
+);
+
 const i18n = i18next.createInstance();
 i18n.use(initReactI18next).init({
-    // TODO auto detect
-    lng: LOCALES[0].value,
-    fallbackLng: LOCALES[0].value,
+    lng: language,
+    fallbackLng,
     debug: process.env['NODE_ENV'] === 'development',
 
     resources,
@@ -42,6 +59,10 @@ i18n.use(initReactI18next).init({
     },
 });
 
+i18n.on('languageChanged', lng => {
+    localStorage.setItem(STORAGE_KEY, lng);
+});
+
 const I18nProvider = I18nextProvider;
 
 export { i18n, useTranslation, I18nProvider, LOCALES };