diff --git a/web/package-lock.json b/web/package-lock.json
index 2c872c6b3..9470ce199 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18,6 +18,7 @@
                 "@goauthentik/api": "^2021.9.4-1633083586",
                 "@lingui/cli": "^3.12.1",
                 "@lingui/core": "^3.12.1",
+                "@lingui/detect-locale": "^3.12.1",
                 "@lingui/macro": "^3.12.1",
                 "@patternfly/patternfly": "^4.135.2",
                 "@polymer/iron-form": "^3.0.1",
@@ -2012,6 +2013,14 @@
                 "node": ">=10.0.0"
             }
         },
+        "node_modules/@lingui/detect-locale": {
+            "version": "3.12.1",
+            "resolved": "https://registry.npmjs.org/@lingui/detect-locale/-/detect-locale-3.12.1.tgz",
+            "integrity": "sha512-/apP+LscyRuh+CIf42+LNuYmEsceNA/rh6N3iqebNcEsOcIzLA8v6dq1llzDOlfd3SxEj7xP9Kfhn6Vnp+78+Q==",
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
         "node_modules/@lingui/macro": {
             "version": "3.12.1",
             "resolved": "https://registry.npmjs.org/@lingui/macro/-/macro-3.12.1.tgz",
@@ -10007,6 +10016,11 @@
                 "messageformat-parser": "^4.1.3"
             }
         },
+        "@lingui/detect-locale": {
+            "version": "3.12.1",
+            "resolved": "https://registry.npmjs.org/@lingui/detect-locale/-/detect-locale-3.12.1.tgz",
+            "integrity": "sha512-/apP+LscyRuh+CIf42+LNuYmEsceNA/rh6N3iqebNcEsOcIzLA8v6dq1llzDOlfd3SxEj7xP9Kfhn6Vnp+78+Q=="
+        },
         "@lingui/macro": {
             "version": "3.12.1",
             "resolved": "https://registry.npmjs.org/@lingui/macro/-/macro-3.12.1.tgz",
diff --git a/web/package.json b/web/package.json
index 149b56071..53baff69b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,7 +17,8 @@
         "sourceLocale": "en",
         "locales": [
             "en",
-            "pseudo-LOCALE"
+            "pseudo-LOCALE",
+            "fr_FR"
         ],
         "formatOptions": {
             "lineNumbers": false
@@ -50,6 +51,7 @@
         "@goauthentik/api": "^2021.9.4-1633083586",
         "@lingui/cli": "^3.12.1",
         "@lingui/core": "^3.12.1",
+        "@lingui/detect-locale": "^3.12.1",
         "@lingui/macro": "^3.12.1",
         "@patternfly/patternfly": "^4.135.2",
         "@polymer/iron-form": "^3.0.1",
diff --git a/web/src/elements/charts/AdminLoginsChart.ts b/web/src/elements/charts/AdminLoginsChart.ts
index 116c17465..2df07185c 100644
--- a/web/src/elements/charts/AdminLoginsChart.ts
+++ b/web/src/elements/charts/AdminLoginsChart.ts
@@ -1,5 +1,7 @@
 import { ChartData } from "chart.js";
 
+import { t } from "@lingui/macro";
+
 import { customElement } from "lit/decorators";
 
 import { AdminApi, LoginMetrics } from "@goauthentik/api";
@@ -17,7 +19,7 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
         return {
             datasets: [
                 {
-                    label: "Failed Logins",
+                    label: t`Failed Logins`,
                     backgroundColor: "rgba(201, 25, 11, .5)",
                     spanGaps: true,
                     data:
@@ -29,7 +31,7 @@ export class AdminLoginsChart extends AKChart<LoginMetrics> {
                         }) || [],
                 },
                 {
-                    label: "Successful Logins",
+                    label: t`Successful Logins`,
                     backgroundColor: "rgba(189, 229, 184, .5)",
                     spanGaps: true,
                     data:
diff --git a/web/src/elements/charts/ApplicationAuthorizeChart.ts b/web/src/elements/charts/ApplicationAuthorizeChart.ts
index fb0c7fcfe..12907ed23 100644
--- a/web/src/elements/charts/ApplicationAuthorizeChart.ts
+++ b/web/src/elements/charts/ApplicationAuthorizeChart.ts
@@ -1,5 +1,7 @@
 import { ChartData } from "chart.js";
 
+import { t } from "@lingui/macro";
+
 import { customElement, property } from "lit/decorators";
 
 import { Coordinate, CoreApi } from "@goauthentik/api";
@@ -22,7 +24,7 @@ export class ApplicationAuthorizeChart extends AKChart<Coordinate[]> {
         return {
             datasets: [
                 {
-                    label: "Authorizations",
+                    label: t`Authorizations`,
                     backgroundColor: "rgba(189, 229, 184, .5)",
                     spanGaps: true,
                     data:
diff --git a/web/src/elements/charts/UserChart.ts b/web/src/elements/charts/UserChart.ts
index 7f12f09ba..be6549322 100644
--- a/web/src/elements/charts/UserChart.ts
+++ b/web/src/elements/charts/UserChart.ts
@@ -1,5 +1,7 @@
 import { ChartData } from "chart.js";
 
+import { t } from "@lingui/macro";
+
 import { customElement, property } from "lit/decorators";
 
 import { CoreApi, UserMetrics } from "@goauthentik/api";
@@ -22,7 +24,7 @@ export class UserChart extends AKChart<UserMetrics> {
         return {
             datasets: [
                 {
-                    label: "Failed Logins",
+                    label: t`Failed Logins`,
                     backgroundColor: "rgba(201, 25, 11, .5)",
                     spanGaps: true,
                     data:
@@ -34,7 +36,7 @@ export class UserChart extends AKChart<UserMetrics> {
                         }) || [],
                 },
                 {
-                    label: "Successful Logins",
+                    label: t`Successful Logins`,
                     backgroundColor: "rgba(189, 229, 184, .5)",
                     spanGaps: true,
                     data:
@@ -46,7 +48,7 @@ export class UserChart extends AKChart<UserMetrics> {
                         }) || [],
                 },
                 {
-                    label: "Application authorizations",
+                    label: t`Application authorizations`,
                     backgroundColor: "rgba(43, 154, 243, .5)",
                     spanGaps: true,
                     data:
diff --git a/web/src/interfaces/locale.ts b/web/src/interfaces/locale.ts
index cfb1ab476..be9ca9921 100644
--- a/web/src/interfaces/locale.ts
+++ b/web/src/interfaces/locale.ts
@@ -1,16 +1,20 @@
-import { en } from "make-plural/plurals";
+import { en, fr } from "make-plural/plurals";
 
 import { i18n } from "@lingui/core";
+import { detect, fromUrl, fromStorage, fromNavigator } from "@lingui/detect-locale";
 
 import { messages as localeEN } from "../locales/en";
+import { messages as localeFR_FR } from "../locales/fr_FR";
 import { messages as localeDEBUG } from "../locales/pseudo-LOCALE";
 
 i18n.loadLocaleData("en", { plurals: en });
 i18n.loadLocaleData("debug", { plurals: en });
+i18n.loadLocaleData("fr_FR", { plurals: fr });
 i18n.load("en", localeEN);
+i18n.load("fr_FR", localeFR_FR);
 i18n.load("debug", localeDEBUG);
-i18n.activate("en");
 
-if (window.location.search.includes("debugLocale")) {
-    i18n.activate("debug");
-}
+const DEFAULT_FALLBACK = () => "en";
+
+const result = detect(fromUrl("lang"), fromStorage("lang"), fromNavigator(), DEFAULT_FALLBACK);
+i18n.activate(result || DEFAULT_FALLBACK());