diff --git a/net/web/src/constants/Strings.js b/net/web/src/constants/Strings.js
index 2cab3319..46cf6bcf 100644
--- a/net/web/src/constants/Strings.js
+++ b/net/web/src/constants/Strings.js
@@ -25,6 +25,10 @@ export const en = {
   setupProfile: 'Setup your profile',
   connectPeople: 'Connect with people',
   startConversation: 'Start a conversation',
+
+  default: 'Default',
+  dark: 'Dark',
+  light: 'Light',
 };
 
 export const fr = {
@@ -54,5 +58,9 @@ export const fr = {
   setupProfile: 'Configurez votre profil',
   connectPeople: 'Connectez avec les gens',
   startConversation: 'Commencez une conversation',
+
+  default: 'Défaut',
+  dark: 'Sombre',
+  light: 'Lumineux',
 };
 
diff --git a/net/web/src/context/useSettingsContext.hook.js b/net/web/src/context/useSettingsContext.hook.js
index fb1dd7c7..bd3d6dfc 100644
--- a/net/web/src/context/useSettingsContext.hook.js
+++ b/net/web/src/context/useSettingsContext.hook.js
@@ -85,10 +85,10 @@ export function useSettingsContext() {
 
     const language = localStorage.getItem('language');
     if (language && language.startsWith('fr')) {
-      updateState({ language: 'fr', strings: fr });
+      updateState({ language: 'fr', strings: fr, themes: [{ value: null, label: fr.default }, { value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }]});
     }
     else if (language && language.startsWith('en')) {
-      updateState({ language: 'en', strings: en });
+      updateState({ language: 'en', strings: en, themes: [{ value: null, label: en.default }, { value: 'dark', label: en.dark }, { value: 'light', label: en.light }]});
     }
     else {
       const browser = navigator.language;
@@ -130,20 +130,20 @@ export function useSettingsContext() {
     setLanguage: (code: string) => {
       if (code && code.startsWith('fr')) {
         localStorage.setItem('language', 'fr');
-        updateState({ language: 'fr', strings: fr });
+        updateState({ language: 'fr', strings: fr, themes: [{ value: null, label: fr.default }, { value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }]});
       }
       else if (code && code.startsWith('en')) {
         localStorage.setItem('language', 'en');
-        updateState({ language: 'en', strings: en });
+        updateState({ language: 'en', strings: en, themes: [{ value: null, label: fr.default }, { value: 'dark', label: en.dark }, { value: 'light', label: en.light }]});
       }
       else {
         localStorage.removeItem('language');
         const browser = navigator.language;
         if (browser && browser.startsWith('fr')) {
-          updateState({ language: null, strings: fr });
+          updateState({ language: null, strings: fr, themes: [{ value: null, label: fr.default }, { value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }]});
         }
         else {
-          updateState({ language: null, strings: en });
+          updateState({ language: null, strings: en, themes: [{ value: null, label: en.default }, { value: 'dark', label: en.dark }, { value: 'light', label: en.light }]});
         }
       }
     },
diff --git a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
index 28d123cc..1b1a2ab1 100644
--- a/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
+++ b/net/web/src/session/account/profile/accountAccess/AccountAccess.jsx
@@ -77,15 +77,15 @@ export function AccountAccess() {
           <div className="option">
             <div className="label">Time Format</div>
             <Radio.Group onChange={actions.setTimeFormat} value={state.timeFormat}>
-              <Radio style={state.menuStyle} value={'12h'}>12h</Radio>
-              <Radio style={state.menuStyle} value={'24h'}>24h</Radio>
+              <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'12h'}>12h</Radio>
+              <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'24h'}>24h</Radio>
             </Radio.Group>
           </div>
           <div className="option">
             <div className="label">Date Format</div>
             <Radio.Group onChange={actions.setDateFormat} value={state.dateFormat}>
-              <Radio style={state.menuStyle} value={'mm/dd'}>mm/dd</Radio>
-              <Radio style={state.menuStyle} value={'dd/mm'}>dd/mm</Radio>
+              <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'mm/dd'}>mm/dd</Radio>
+              <Radio style={{borderRadius: 3, paddingLeft: 6, ...state.menuStyle}} value={'dd/mm'}>dd/mm</Radio>
             </Radio.Group>
           </div>
           <div className="option">