diff --git a/web/src/i18n.js b/web/src/i18n.js
index 046e5df9..62ddb16a 100644
--- a/web/src/i18n.js
+++ b/web/src/i18n.js
@@ -13,57 +13,34 @@
 // limitations under the License.
 
 import i18n from "i18next";
-import en from "./locales/en/data.json";
-import zh from "./locales/zh/data.json";
-import es from "./locales/es/data.json";
-import fr from "./locales/fr/data.json";
-import de from "./locales/de/data.json";
-import id from "./locales/id/data.json";
-import ja from "./locales/ja/data.json";
-import ko from "./locales/ko/data.json";
-import ru from "./locales/ru/data.json";
-import vi from "./locales/vi/data.json";
-import pt from "./locales/pt/data.json";
-import it from "./locales/it/data.json";
-import ms from "./locales/ms/data.json";
-import tr from "./locales/tr/data.json";
-import ar from "./locales/ar/data.json";
-import he from "./locales/he/data.json";
-import nl from "./locales/nl/data.json";
-import pl from "./locales/pl/data.json";
-import fi from "./locales/fi/data.json";
-import sv from "./locales/sv/data.json";
-import uk from "./locales/uk/data.json";
-import kk from "./locales/kk/data.json";
-import fa from "./locales/fa/data.json";
 import * as Conf from "./Conf";
 import {initReactI18next} from "react-i18next";
+import en from "./locales/en/data.json";
 
-const resources = {
-  en: en,
-  zh: zh,
-  es: es,
-  fr: fr,
-  de: de,
-  id: id,
-  ja: ja,
-  ko: ko,
-  ru: ru,
-  vi: vi,
-  pt: pt,
-  it: it,
-  ms: ms,
-  tr: tr,
-  ar: ar,
-  he: he,
-  nl: nl,
-  pl: pl,
-  fi: fi,
-  sv: sv,
-  uk: uk,
-  kk: kk,
-  fa: fa,
-};
+const resourcesToBackend = (res) => ({
+  type: "backend",
+  init(services, backendOptions, i18nextOptions) {/* use services and options */},
+  read(language, namespace, callback) {
+    if (typeof res === "function") {
+      if (res.length < 3) {
+        try {
+          const r = res(language, namespace);
+          if (r && typeof r.then === "function") {
+            r.then((data) => callback(null, (data && data.default) || data)).catch(callback);
+          } else {
+            callback(null, r);
+          }
+        } catch (err) {
+          callback(err);
+        }
+        return;
+      }
+      res(language, namespace, callback);
+      return;
+    }
+    callback(null, res && res[language] && res[language][namespace]);
+  },
+});
 
 function initLanguage() {
   let language = localStorage.getItem("language");
@@ -157,18 +134,23 @@ function initLanguage() {
   return language;
 }
 
-i18n.use(initReactI18next).init({
-  lng: initLanguage(),
+i18n.use(resourcesToBackend(async(language, namespace) => {
+  const res = await import(`./locales/${language}/data.json`);
+  return res.default[namespace];
+}
+))
+  .use(initReactI18next)
+  .init({
+    lng: initLanguage(),
+    ns: Object.keys(en),
+    fallbackLng: "en",
 
-  resources: resources,
-
-  keySeparator: false,
-
-  interpolation: {
-    escapeValue: true,
-  },
-  // debug: true,
-  saveMissing: true,
-});
+    keySeparator: false,
 
+    interpolation: {
+      escapeValue: true,
+    },
+    // debug: true,
+    saveMissing: true,
+  });
 export default i18n;