diff --git a/packages/app/src/IntlProvider.tsx b/packages/app/src/IntlProvider.tsx
index 4053cba6e..6c9ad1c75 100644
--- a/packages/app/src/IntlProvider.tsx
+++ b/packages/app/src/IntlProvider.tsx
@@ -1,5 +1,9 @@
import { type ReactNode } from "react";
+import { useSelector } from "react-redux";
import { IntlProvider as ReactIntlProvider } from "react-intl";
+
+import { RootState } from "State/Store";
+
import enMessages from "translations/en.json";
import esMessages from "translations/es.json";
import zhMessages from "translations/zh.json";
@@ -37,10 +41,8 @@ const getMessages = (locale: string) => {
};
export const IntlProvider = ({ children }: { children: ReactNode }) => {
- const getLocale = () => {
- return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
- };
- const locale = getLocale();
+ const lang = useSelector((s: RootState) => s.login.preferences.language);
+ const locale = lang ?? getLocale();
return (