diff --git a/canopeum_frontend/package-lock.json b/canopeum_frontend/package-lock.json
index b62c9161..ac47eb84 100644
--- a/canopeum_frontend/package-lock.json
+++ b/canopeum_frontend/package-lock.json
@@ -16,6 +16,7 @@
         "bootstrap": "^5.3.3",
         "browser-image-compression": "^2.0.2",
         "i18next": "^23.10.1",
+        "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.5.0",
         "jwt-decode": "4.0.0",
         "maplibre-gl": "^4.1.1",
@@ -10393,6 +10394,15 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz",
+      "integrity": "sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/i18next-http-backend": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz",
diff --git a/canopeum_frontend/package.json b/canopeum_frontend/package.json
index 1c306149..d1ee1453 100644
--- a/canopeum_frontend/package.json
+++ b/canopeum_frontend/package.json
@@ -23,6 +23,7 @@
     "bootstrap": "^5.3.3",
     "browser-image-compression": "^2.0.2",
     "i18next": "^23.10.1",
+    "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.0",
     "jwt-decode": "4.0.0",
     "maplibre-gl": "^4.1.1",
diff --git a/canopeum_frontend/src/i18n.ts b/canopeum_frontend/src/i18n.ts
index 6a04c22a..2219113a 100644
--- a/canopeum_frontend/src/i18n.ts
+++ b/canopeum_frontend/src/i18n.ts
@@ -1,9 +1,14 @@
 import { default as i18n } from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
 import { initReactI18next } from 'react-i18next'
 
 import resources from './locale'
 
-void i18n.use(initReactI18next).init({
-  resources,
-  lng: 'en',
-})
+void i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init({
+    supportedLngs: Object.keys(resources),
+    resources,
+    detection: { convertDetectedLanguage: lng => lng.split('-')[0] }, // fr-CA -> fr
+  })