diff --git a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx
index a18b91710..962a1eb66 100644
--- a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx
+++ b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.component.tsx
@@ -19,12 +19,13 @@ import { useTranslation } from "react-i18next";
 export interface ChangeLocaleProps {
   allowedLocales: Array<string>;
   user: LoggedInUser;
+  locale: string;
   postUserProperties: PostUserProperties;
   postSessionLocale: PostSessionLocale;
 }
 
 const ChangeLocaleWrapper: React.FC<
-  Pick<ChangeLocaleProps, "allowedLocales" | "user">
+  Pick<ChangeLocaleProps, "allowedLocales" | "user" | "locale">
 > = (props) => {
   const isOnline = useConnectivity();
   const [postUserProperties, postSessionLocale] = useMemo(
@@ -43,30 +44,40 @@ const ChangeLocaleWrapper: React.FC<
 // exported for tests
 export const ChangeLocale: React.FC<ChangeLocaleProps> = ({
   allowedLocales,
+  locale,
   user,
   postUserProperties,
   postSessionLocale,
 }) => {
   const { t } = useTranslation();
-  const [userProps, setUserProps] = useState(user.userProperties);
+  const [selectedLocale, setSelectedLocale] = useState(
+    user?.userProperties?.defaultLocale ?? locale
+  );
   const options = allowedLocales?.map((locale) => (
     <SelectItem text={locale} value={locale} key={locale} />
   ));
 
   useEffect(() => {
-    if (user.userProperties.defaultLocale !== userProps.defaultLocale) {
+    if (user.userProperties.defaultLocale !== selectedLocale) {
       const ac = new AbortController();
-      postUserProperties(user.uuid, userProps, ac);
-      postSessionLocale(userProps.defaultLocale, ac);
+      postUserProperties(
+        user.uuid,
+        {
+          ...(user.userProperties ?? {}),
+          defaultLocale: selectedLocale,
+        },
+        ac
+      );
+      postSessionLocale(selectedLocale, ac);
       return () => ac.abort();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userProps, postUserProperties, postSessionLocale]);
+  }, [selectedLocale, postUserProperties, postSessionLocale]);
 
   const onChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) =>
-      setUserProps({ ...userProps, defaultLocale: event.target.value }),
-    [userProps, setUserProps]
+      setSelectedLocale(event.target.value),
+    [setSelectedLocale]
   );
 
   const onClick = useCallback(
@@ -83,7 +94,7 @@ export const ChangeLocale: React.FC<ChangeLocaleProps> = ({
         labelText={t("selectLocale", "Select locale")}
         onChange={onChange}
         onClick={onClick}
-        value={userProps.defaultLocale}
+        value={selectedLocale}
       >
         {options}
       </Select>
diff --git a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.test.tsx b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.test.tsx
index 1ede21256..c05a12141 100644
--- a/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.test.tsx
+++ b/packages/apps/esm-primary-navigation-app/src/components/choose-locale/change-locale.test.tsx
@@ -28,6 +28,7 @@ describe(`<ChangeLocale />`, () => {
 
     render(
       <ChangeLocale
+        locale={"fr"}
         allowedLocales={allowedLocales}
         user={user}
         postUserProperties={postUserPropertiesMock}