diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 7875724..e3e626b 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -15,6 +15,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [newName, setNewName] = useState('');
   const [newEmail, setNewEmail] = useState('');
   const [newPassword, setNewPassword] = useState('');
+  const [preferredMessurement, setPreferredMessurement] = useState('Metric');
 
   // Theme settings state
   const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@@ -37,9 +38,15 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
   const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
 
-   // Theme selection
-   const [selectedTheme, setSelectedTheme] = useState<string>('default');
+  // Theme selection
+  const [selectedTheme, setSelectedTheme] = useState<string>('default');
 
+  // API Keys
+  const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+  const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+  const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+  const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
+  
   // Apply imported settings to the CSS variables
   const applySettings = (settings: any) => {
     if (settings.backgroundColor) {
@@ -147,85 +154,102 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       case 'general':
         return (
           <div className="settings-section">
-            <h2>General Settings</h2>
-            <div className="settings-option">
-              <label>Preferred Language</label>
-              <select
-                value={preferredLanguage}
-                onChange={(e) => setPreferredLanguage(e.target.value)}
-              >
-                <option value="en">English</option>
-                <option value="es">Spanish</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="it">Italian</option>
-                <option value="pt">Portuguese</option>
-                <option value="zh">Chinese</option>
-                <option value="ja">Japanese</option>
-                <option value="ru">Russian</option>
-                <option value="ar">Arabic</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <label>Preferred Currency</label>
-              <select
-                value={preferredCurrency}
-                onChange={(e) => setPreferredCurrency(e.target.value)}
-              >
-                <option value="usd">USD</option>
-                <option value="eur">EUR</option>
-                <option value="gbp">GBP</option>
-                <option value="jpy">JPY</option>
-                <option value="cad">CAD</option>
-                <option value="aud">AUD</option>
-                <option value="chf">CHF</option>
-                <option value="cny">CNY</option>
-                <option value="inr">INR</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <label>Date Format</label>
-              <select
-                value={dateFormat}
-                onChange={(e) => setDateFormat(e.target.value)}
-              >
-                <option value="mm/dd/yyyy">MM/DD/YYYY</option>
-                <option value="dd/mm/yyyy">DD/MM/YYYY</option>
-                <option value="yyyy-mm-dd">YYYY-MM-DD</option>
-                <option value="mm-dd-yyyy">MM-DD-YYYY</option>
-                <option value="dd-mm-yyyy">DD-MM-YYYY</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <label>Time Format</label>
-              <select
-                value={timeFormat}
-                onChange={(e) => setTimeFormat(e.target.value)}
-              >
-                <option value="12-hour">12 Hour</option>
-                <option value="24-hour">24 Hour</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <label>Time Zone</label>
-              <select
-                value={timeZone}
-                onChange={(e) => setTimeZone(e.target.value)}
-              >
-                <option value="GMT">GMT</option>
-                <option value="EST">EST</option>
-                <option value="CST">CST</option>
-                <option value="MST">MST</option>
-                <option value="PST">PST</option>
-                <option value="UTC">UTC</option>
-                <option value="BST">BST</option>
-                <option value="IST">IST</option>
-                <option value="CET">CET</option>
-                <option value="JST">JST</option>
-              </select>
-            </div>
+          <h2>General Settings</h2>
+    
+          <div className="settings-option">
+            <label>Preferred Language</label>
+            <select
+              value={preferredLanguage}
+              onChange={(e) => setPreferredLanguage(e.target.value)}
+            >
+              <option value="en">English</option>
+              <option value="es">Spanish</option>
+              <option value="fr">French</option>
+              <option value="de">German</option>
+              <option value="it">Italian</option>
+              <option value="pt">Portuguese</option>
+              <option value="zh">Chinese</option>
+              <option value="ja">Japanese</option>
+              <option value="ru">Russian</option>
+              <option value="ar">Arabic</option>
+            </select>
           </div>
-        );
+    
+          <div className="settings-option">
+            <label>Preferred Currency</label>
+            <select
+              value={preferredCurrency}
+              onChange={(e) => setPreferredCurrency(e.target.value)}
+            >
+              <option value="usd">USD</option>
+              <option value="eur">EUR</option>
+              <option value="gbp">GBP</option>
+              <option value="jpy">JPY</option>
+              <option value="cad">CAD</option>
+              <option value="aud">AUD</option>
+              <option value="chf">CHF</option>
+              <option value="cny">CNY</option>
+              <option value="inr">INR</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Date Format</label>
+            <select
+              value={dateFormat}
+              onChange={(e) => setDateFormat(e.target.value)}
+            >
+              <option value="mm/dd/yyyy">MM/DD/YYYY</option>
+              <option value="dd/mm/yyyy">DD/MM/YYYY</option>
+              <option value="yyyy-mm-dd">YYYY-MM-DD</option>
+              <option value="mm-dd-yyyy">MM-DD-YYYY</option>
+              <option value="dd-mm-yyyy">DD-MM-YYYY</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Time Format</label>
+            <select
+              value={timeFormat}
+              onChange={(e) => setTimeFormat(e.target.value)}
+            >
+              <option value="12-hour">12 Hour</option>
+              <option value="24-hour">24 Hour</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Time Zone</label>
+            <select
+              value={timeZone}
+              onChange={(e) => setTimeZone(e.target.value)}
+            >
+              <option value="GMT">GMT</option>
+              <option value="EST">EST</option>
+              <option value="CST">CST</option>
+              <option value="MST">MST</option>
+              <option value="PST">PST</option>
+              <option value="UTC">UTC</option>
+              <option value="BST">BST</option>
+              <option value="IST">IST</option>
+              <option value="CET">CET</option>
+              <option value="JST">JST</option>
+            </select>
+          </div>
+    
+          {/* New Preferred Measurement Option */}
+          <div className="settings-option">
+            <label>Preferred Measurement</label>
+            <select
+              value={preferredMessurement}
+              onChange={(e) => setPreferredMessurement(e.target.value)}
+            >
+              <option value="Metric">Metric</option>
+              <option value="Imperial">Imperial</option>
+            </select>
+          </div>
+        </div>
+      );
 
       case 'privacy':
         return (
@@ -697,17 +721,55 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           </div>
         );
 
+        case 'api':
+          return (
+            <div className="settings-section">
+              <div className="settings-option">
+                <label>La Plateforme</label>
+                <input
+                  type="text"
+                  value={laPlateforme}
+                  onChange={(e) => setLaPlateforme(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <label>OpenAI</label>
+                <input
+                  type="text"
+                  value={openAI}
+                  onChange={(e) => setOpenAI(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <label>Anthropic</label>
+                <input
+                  type="text"
+                  value={anthropic}
+                  onChange={(e) => setAnthropic(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <label>Google</label>
+                <input
+                  type="text"
+                  value={google}
+                  onChange={(e) => setGoogle(e.target.value)}
+                />
+              </div>
+            </div>
+          );
+
         case 'im/export':
           return (
             <div className="settings-section">
               <h2>Import & Export</h2>
               <div className="settings-option">
                 <h3>Export the settings</h3>  
-                <button onClick={() => exportSettings(currentSettings)}>Export Settings</button>
+                <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
               </div>
               <div className="settings-option">
                 <h3>Import the settings</h3>  
-                <input type="file" onChange={handleImport} accept=".json" />
+                <input type="file" onChange={handleImport} accept=".json" className='import-file'/>
               </div>
               </div>
           );
@@ -748,6 +810,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     fontSize,
     preferredLanguage,
     preferredCurrency,
+    preferredMessurement, 
     dateFormat,
     timeFormat,
     timeZone,
@@ -755,7 +818,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     disableChatHistory,
     disableAIMemory,
     openSourceMode,
-  };
+
+    // API Keys
+   laPlateforme,
+   openAI,
+   anthropic,
+   google
+};
+
 
   return (
     <div className="popup-overlay">
@@ -768,6 +838,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <li onClick={() => setActiveSection('theme')}>Theme</li>
               <li onClick={() => setActiveSection('foss')}>FOSS</li>
               <li onClick={() => setActiveSection('account')}>Account</li>
+              <li onClick={() => setActiveSection('api')}>API Keys</li>
               <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
             </ul>
           </div>
diff --git a/app/components/json/black.json b/app/components/json/black.json
new file mode 100644
index 0000000..cc56d50
--- /dev/null
+++ b/app/components/json/black.json
@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
\ No newline at end of file
diff --git a/app/components/json/iomarket.json b/app/components/json/iomarket.json
new file mode 100644
index 0000000..cc56d50
--- /dev/null
+++ b/app/components/json/iomarket.json
@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
\ No newline at end of file
diff --git a/app/components/json/white.json b/app/components/json/white.json
new file mode 100644
index 0000000..cc56d50
--- /dev/null
+++ b/app/components/json/white.json
@@ -0,0 +1 @@
+{"backgroundColor":"#8B9635","textColor":"#474D22","inputBackgroundColor":"#ffffff","inputButtonColor":"#8B9635","inputButtonHoverColor":"#6b7c2b","userMessageBackgroundColor":"#8B9635","userMessageTextColor":"#000","aiMessageBackgroundColor":"#FCFCEB","aiMessageTextColor":"#000","buttonBackgroundColor":"#8B9635","buttonHoverBackgroundColor":"#6b7c2b","modelsBackgroundColor":"#ffffff","historyBackgroundColor":"#f9f9f9","leftPanelBackgroundColor":"#79832e","conversationBackgroundColor":"#79832e","popUpTextColor":"#000","inputBorderColor":"#8B9635","fontFamily":"'Poppins', 'sans-serif'","fontSize":"16px","preferredLanguage":"en","preferredCurrency":"usd","dateFormat":"mm/dd/yyyy","timeFormat":"12-hour","timeZone":"GMT","disableOnlineAI":false,"disableChatHistory":false,"disableAIMemory":false,"openSourceMode":false,"laPlateforme":"","openAI":"","anthropic":"","google":""}
\ No newline at end of file
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index bf88759..a2224a4 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -147,3 +147,16 @@
     display: block;
     font-weight: bold;
 }
+
+.export-button{
+    background-color: var(--button-hover-background-color);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 10px;
+}
+
+.import-file{
+    background-color: var(--button-hover-background-color);
+    padding: 10px;
+    margin: 10px;
+}
\ No newline at end of file
diff --git a/py/api.py b/py/api.py
index d90429b..f328a7d 100644
--- a/py/api.py
+++ b/py/api.py
@@ -1,4 +1,4 @@
-from flask import Flask, request, jsonify
+            from flask import Flask, request, jsonify
 from flask_cors import CORS
 import secrets
 import threading