diff --git a/frontend/package.json b/frontend/package.json
index 5f7a11d8..5edec918 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "@reduxjs/toolkit": "^1.9.2",
     "@vercel/analytics": "^0.1.10",
     "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
diff --git a/frontend/src/locale/i18n.ts b/frontend/src/locale/i18n.ts
index 32b25db7..dbf5ae1b 100644
--- a/frontend/src/locale/i18n.ts
+++ b/frontend/src/locale/i18n.ts
@@ -1,29 +1,38 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 import en from './en.json'; //English
 import es from './es.json'; //Spanish
 import jp from './jp.json'; //Japanese
 import zh from './zh.json'; //Mandarin
 
-i18n.use(initReactI18next).init({
-  resources: {
-    en: {
-      translation: en,
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: en,
+      },
+      es: {
+        translation: es,
+      },
+      jp: {
+        translation: jp,
+      },
+      zh: {
+        translation: zh,
+      },
     },
-    es: {
-      translation: es,
+    fallbackLng: 'en',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupLocalStorage: 'docsgpt-locale',
     },
-    jp: {
-      translation: jp,
-    },
-    zh: {
-      translation: zh,
-    },
-  },
-});
+  });
 
-const locale = localStorage.getItem('docsgpt-locale') ?? 'en';
-i18n.changeLanguage(locale);
+i18n.changeLanguage(i18n.language);
 
 export default i18n;