diff --git a/public/locales/en-US/translation.json b/public/locales/en-US/translation.json
index 7551eef..532f48f 100644
--- a/public/locales/en-US/translation.json
+++ b/public/locales/en-US/translation.json
@@ -145,6 +145,8 @@
   },
   "SETTINGS_PAGE": {
     "SETTINGS": "Settings",
+    "LANGUAGE": "Language",
+    "SELECT_AN_ADMIN": "Select a Preferred Admin",
     "LIBRARY_SETTINGS": "Library Settings",
     "BACKUP": "Backup",
     "BACKUPS": "Backups",
diff --git a/src/index.jsx b/src/index.jsx
index a0d54ec..0576273 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -22,7 +22,7 @@ i18n
     fallbackLng: "en-US",
     debug: false,
     detection: {
-      order: ["navigator", "htmlTag", "querystring", "cookie", "localStorage", "sessionStorage", "path", "subdomain"],
+      order: ["cookie", "localStorage", "sessionStorage", "navigator", "htmlTag", "querystring", "path", "subdomain"],
       cache: ["cookie"],
     },
     interpolation: {
diff --git a/src/lib/languages.jsx b/src/lib/languages.jsx
new file mode 100644
index 0000000..fd469ef
--- /dev/null
+++ b/src/lib/languages.jsx
@@ -0,0 +1,10 @@
+export const languages = [
+  {
+    id: "en-US",
+    description: "English",
+  },
+  {
+    id: "fr-FR",
+    description: "French",
+  },
+];
diff --git a/src/pages/components/settings/settingsConfig.jsx b/src/pages/components/settings/settingsConfig.jsx
index 27e72a1..f0d74df 100644
--- a/src/pages/components/settings/settingsConfig.jsx
+++ b/src/pages/components/settings/settingsConfig.jsx
@@ -19,11 +19,13 @@ import EyeOffFillIcon from 'remixicon-react/EyeOffFillIcon';
 import "../../css/settings/settings.css";
 import {  InputGroup } from "react-bootstrap";
 import { Trans } from "react-i18next";
+import { languages } from "../../../lib/languages";
 
 export default function SettingsConfig() {
   const [config, setConfig] = useState(null);
   const [admins, setAdmins] = useState();
   const [selectedAdmin, setSelectedAdmin] = useState('');
+  const [selectedLanguage, setSelectedLanguage] = useState(localStorage.getItem('i18nextLng')??'en-US');
   const [showKey, setKeyState] = useState(false);
   const [formValues, setFormValues] = useState({});
   const [isSubmitted, setisSubmitted] = useState("");
@@ -32,6 +34,8 @@ export default function SettingsConfig() {
   const token = localStorage.getItem('token');
   const [twelve_hr, set12hr] = useState(localStorage.getItem('12hr') === 'true');
 
+  
+
   const storage_12hr = localStorage.getItem('12hr');
 
   if(storage_12hr===null)
@@ -168,6 +172,16 @@ export default function SettingsConfig() {
     });
   }
 
+  
+  function updateLanguage(event) {
+
+
+    const languageCode=event.target.getAttribute('value');
+    setSelectedLanguage(languageCode);
+    localStorage.setItem('i18nextLng',languageCode);
+  }
+
+
 
   if (loadSate === "Loading") {
     return <Loading />;
@@ -234,7 +248,7 @@ export default function SettingsConfig() {
            <Col>
               <Dropdown className="w-100">
                 <Dropdown.Toggle variant="outline-primary" id="dropdown-basic" className="w-100">
-                {selectedAdmin ? selectedAdmin.username : 'Select a Preferred Admin'}
+                {selectedAdmin ? selectedAdmin.username :<Trans i18nKey={"SETTINGS_PAGE.SELECT_AN_ADMIN"}/>}
                 </Dropdown.Toggle>
 
                 <Dropdown.Menu className="w-100" >
@@ -263,6 +277,28 @@ export default function SettingsConfig() {
           </Form.Group>
 
         </Form>
+        <Form className="settings-form">
+         <Form.Group as={Row} className="mb-3">
+           <Form.Label column  className=""><Trans i18nKey={"SETTINGS_PAGE.LANGUAGE"}/></Form.Label>
+           <Col>
+              <Dropdown className="w-100">
+                <Dropdown.Toggle variant="outline-primary" id="dropdown-basic" className="w-100">
+                {languages.find((language) => language.id === selectedLanguage)?.description  || 'English'}
+                </Dropdown.Toggle>
+
+                <Dropdown.Menu className="w-100" >
+                {languages && languages.sort((a, b) => a.description - b.description)
+                          .map((language) => (
+    
+                            <Dropdown.Item onClick={updateLanguage} value={language.id} key={language.id}>{language.description}</Dropdown.Item>
+                          ))}
+
+                </Dropdown.Menu>
+              </Dropdown>
+            </Col>  
+          </Form.Group>
+
+        </Form>