diff --git a/frontend/public/flags/UK.png b/frontend/public/flags/en.png
similarity index 100%
rename from frontend/public/flags/UK.png
rename to frontend/public/flags/en.png
diff --git a/frontend/public/flags/ES.png b/frontend/public/flags/es.png
similarity index 100%
rename from frontend/public/flags/ES.png
rename to frontend/public/flags/es.png
diff --git a/frontend/public/flags/FR.png b/frontend/public/flags/fr.png
similarity index 100%
rename from frontend/public/flags/FR.png
rename to frontend/public/flags/fr.png
diff --git a/frontend/public/flags/IT.png b/frontend/public/flags/it.png
similarity index 100%
rename from frontend/public/flags/IT.png
rename to frontend/public/flags/it.png
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 7b75bbcbc7..a956d29825 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -11,6 +11,7 @@ import FrontDesk from "./FrontDesk";
 import { BrowserRouter, useLocation, useRoutes } from "react-router-dom";
 import LocaleContext from "./IntlProvider";
 import FooterVisibilityContext from "./FooterVisibilityContext";
+import Cookies from "js-cookie";
 
 function App() {
   const messageMap = {
@@ -19,7 +20,8 @@ function App() {
     fr: messagesFr,
     it: messagesIt,
   };
-  const [locale, setLocale] = useState("en");
+  const initialLocale = Cookies.get("wildbookLangCode") || "en";
+  const [locale, setLocale] = useState(initialLocale);
   const [visible, setVisible] = useState(true);
   const containerStyle = {
     maxWidth: "1440px",
@@ -29,6 +31,7 @@ function App() {
 
   const handleLocaleChange = (newLocale) => {
     setLocale(newLocale);
+    Cookies.set("wildbookLangCode", newLocale);
   };
 
   return (
diff --git a/frontend/src/components/navBar/MultiLanguageDropdown.jsx b/frontend/src/components/navBar/MultiLanguageDropdown.jsx
index 94dc3b9394..4de193ad92 100644
--- a/frontend/src/components/navBar/MultiLanguageDropdown.jsx
+++ b/frontend/src/components/navBar/MultiLanguageDropdown.jsx
@@ -1,59 +1,54 @@
-import React, { useContext, useState }from 'react';
-import Dropdown from 'react-bootstrap/Dropdown';
-import DownIcon from '../svg/DownIcon';
-import LocaleContext from '../../IntlProvider';
-import { locales, localeMap, languageMap } from '../../constants/locales';
+import React, { useContext, useState } from "react";
+import Dropdown from "react-bootstrap/Dropdown";
+import DownIcon from "../svg/DownIcon";
+import LocaleContext from "../../IntlProvider";
+import { locales, localeMap, languageMap } from "../../constants/locales";
+import Cookies from "js-cookie";
 
 export default function MultiLanguageDropdown() {
+  const { onLocaleChange } = useContext(LocaleContext);
+  const initialLocale = Cookies.get("wildbookLangCode") || "en";
+  const [flag, setFlag] = useState(initialLocale);
+  return (
+    <div
+      className="d-flex align-items-center justify-content-center border-0 rounded-pill m-2"
+      style={{
+        backgroundColor: "rgba(255, 255, 255, 0.25)",
+        minWidth: "65px",
+        height: "35px",
+      }}
+    >
+      <Dropdown>
+        <Dropdown.Toggle variant="basic" id="dropdown-basic">
+          <img
+            src={`/react/flags/${flag}.png`}
+            alt="flag"
+            style={{ width: "20px", height: "12px" }}
+          />
+          <span style={{ paddingLeft: 7 }}>
+            <DownIcon />
+          </span>
+        </Dropdown.Toggle>
 
-    const { onLocaleChange } = useContext(LocaleContext);
-    const [ flag, setFlag ] = useState('UK');
-    return (
-        <div style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.25)',
-            border: 'none',
-            borderRadius: '30px',
-            minWidth: '65px', 
-            height: '35px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            margin: '10px',
-        }}>
-            
-            <Dropdown style={{
-                    border: 'none',
-                    color: 'white',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                
-                }}>
-                <Dropdown.Toggle variant="basic" id="dropdown-basic" >
-                    <img src={`/react/flags/${flag}.png`} alt="flag" style={{width: '20px', height: '12px'}} />
-                    <span style={{paddingLeft: 7}}><DownIcon /></span>
-                </Dropdown.Toggle>
-                
-                <Dropdown.Menu>
-                    {
-                        locales.map((locale, index) => (
-                            <Dropdown.Item 
-                                key={index} 
-                                onClick={() => {
-                                    onLocaleChange(locale);
-                                    setFlag(localeMap[locale]);
-                                }}>
-                                <img 
-                                    src={`/react/flags/${localeMap[locale]}.png`} alt={locale} 
-                                    style={{width: '20px', height: '12px', marginRight: '10px'}} />
-                                {languageMap[locale]}
-                            </Dropdown.Item>
-                        ))
-                    }
-                </Dropdown.Menu>
-          </Dropdown>
-          </div>
-    )
+        <Dropdown.Menu>
+          {locales.map((locale, index) => (
+            <Dropdown.Item
+              key={index}
+              onClick={() => {
+                onLocaleChange(locale);
+                setFlag(localeMap[locale]);
+              }}
+            >
+              <img
+                src={`/react/flags/${localeMap[locale]}.png`}
+                alt={locale}
+                style={{ width: "20px", height: "12px", marginRight: "10px" }}
+              />
+              {languageMap[locale]}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
 }
-
diff --git a/frontend/src/constants/locales.js b/frontend/src/constants/locales.js
index 7555b615da..bb4023f19e 100644
--- a/frontend/src/constants/locales.js
+++ b/frontend/src/constants/locales.js
@@ -1,17 +1,16 @@
-
-const locales = ['en', 'es', 'fr', 'it'];
+const locales = ["en", "es", "fr", "it"];
 const localeMap = {
-    en: 'UK',
-    es: 'ES',
-    fr: 'FR',
-    it: 'IT',
+  en: "en",
+  es: "es",
+  fr: "fr",
+  it: "it",
 };
 
 const languageMap = {
-    en: 'English',
-    es: 'Español',
-    fr: 'Francés',
-    it: 'Italiano',
+  en: "English",
+  es: "Español",
+  fr: "Francés",
+  it: "Italiano",
 };
 
 export { locales, localeMap, languageMap };