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 73c0acc56..9a34d19f2 100644
--- a/web/src/interfaces/locale.ts
+++ b/web/src/interfaces/locale.ts
@@ -1,15 +1,18 @@
-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");
 
 const DEFAULT_FALLBACK = () => "en";