diff --git a/frontend/src/component/user/UserProfile/UserProfile.jsx b/frontend/src/component/user/UserProfile/UserProfile.jsx
index 1c4b5977d6..bd8a1867c2 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.jsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.jsx
@@ -17,34 +17,35 @@ const UserProfile = ({
     logoutUser,
 }) => {
     const [showProfile, setShowProfile] = useState(false);
+    const [currentLocale, setCurrentLocale] = useState([]);
 
     const styles = useStyles();
     const commonStyles = useCommonStyles();
 
     const [possibleLocales, setPossibleLocales] = useState([
-        { value: 'en-US', image: 'en-US' },
-        { value: 'en-GB', image: 'en-GB' },
-        { value: 'nb-NO', image: 'nb-NO' },
-        { value: 'sv-SE', image: 'sv-SE' },
-        { value: 'da-DK', image: 'da-DK' },
-        { value: 'en-IN', image: 'en-IN' },
-        { value: 'de', image: 'de_DE' },
-        { value: 'cs', image: 'cs_CZ' },
-        { value: 'pt-BR', image: 'pt_BR' },
-        { value: 'fr-FR', image: 'fr-FR' },
+        'en-US',
+        'en-GB',
+        'nb-NO',
+        'sv-SE',
+        'da-DK',
+        'en-IN',
+        'de',
+        'cs',
+        'pt-BR',
+        'fr-FR',
     ]);
 
     useEffect(() => {
         fetchUser();
 
         const locale = navigator.language || navigator.userLanguage;
-        let found = possibleLocales.find(l => l.value === locale);
+        let found = possibleLocales.find(l =>
+            l.toLowerCase().includes(locale.toLowerCase())
+        );
+        setCurrentLocale(found);
+
         if (!found) {
-            setPossibleLocales(prev => ({
-                ...prev,
-                value: locale,
-                image: 'unknown-locale',
-            }));
+            setPossibleLocales(prev => [...prev, locale]);
         }
         /* eslint-disable-next-line*/
     }, []);
@@ -77,6 +78,8 @@ const UserProfile = ({
                     possibleLocales={possibleLocales}
                     logoutUser={logoutUser}
                     location={location}
+                    setCurrentLocale={setCurrentLocale}
+                    currentLocale={currentLocale}
                 />
             </div>
         </OutsideClickHandler>
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.jsx b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.jsx
index d7b27e9e93..b22dc1cf43 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.jsx
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.jsx
@@ -22,11 +22,12 @@ const UserProfileContent = ({
     possibleLocales,
     updateSettingLocation,
     imageUrl,
+    currentLocale,
+    setCurrentLocale,
     location,
     logoutUser,
 }) => {
     const commonStyles = useCommonStyles();
-    const [currentLocale, setCurrentLocale] = useState(location.locale);
     const [updatedPassword, setUpdatedPassword] = useState(false);
     const [edititingProfile, setEditingProfile] = useState(false);
     const styles = useStyles();
@@ -103,11 +104,10 @@ const UserProfileContent = ({
                                         >
                                             Date/Time formatting
                                         </InputLabel>
-
                                         <Select
                                             id="locale-select"
-                                            native
                                             value={currentLocale || ''}
+                                            native
                                             onChange={handleChange}
                                             MenuProps={{
                                                 style: {
@@ -118,10 +118,10 @@ const UserProfileContent = ({
                                             {possibleLocales.map(locale => {
                                                 return (
                                                     <option
-                                                        key={locale.value}
-                                                        value={locale.value}
+                                                        key={locale}
+                                                        value={locale}
                                                     >
-                                                        {locale.value}
+                                                        {locale}
                                                     </option>
                                                 );
                                             })}