diff --git a/client/src/components/CustomSelect.tsx b/client/src/components/CustomSelect.tsx
new file mode 100644
index 0000000..fc377db
--- /dev/null
+++ b/client/src/components/CustomSelect.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+
+import { MenuItem, MenuItemProps, Select, SelectProps } from '@mui/material';
+
+export interface CustomSelectOption {
+  label: string;
+  value: MenuItemProps['value'];
+}
+
+export interface CustomSelectProps extends Omit<SelectProps, 'label'> {
+  value: CustomSelectOption['value'];
+  options: CustomSelectOption[];
+  onChange: SelectProps['onChange'];
+}
+
+const CustomSelect = ({ value, options, onChange }: CustomSelectProps) => {
+  return (
+    <Select onChange={onChange} value={value}>
+      {options.map((option) => (
+        <MenuItem key={option.label} value={option.value}>
+          {option.label}
+        </MenuItem>
+      ))}
+    </Select>
+  );
+};
+export { CustomSelect };
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 8373601..64d4c12 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -36,11 +36,12 @@
   return (
     <Box>
       <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
-        Menu
+        {t('Menu')}
       </Button>
       <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
         <MenuItem onClick={goToContacts}>Contacts</MenuItem>
-        <MenuItem onClick={() => navigate('/settings')}>Account settings</MenuItem>
+        <MenuItem onClick={() => navigate('/settings-account')}>{t('settings_account')}</MenuItem>
+        <MenuItem onClick={() => navigate('/settings-general')}>{t('settings_general')}</MenuItem>
         <MenuItem onClick={logout}>{t('logout')}</MenuItem>
       </Menu>
     </Box>
diff --git a/client/src/components/Settings.tsx b/client/src/components/Settings.tsx
new file mode 100644
index 0000000..81333de
--- /dev/null
+++ b/client/src/components/Settings.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Button, FormLabel, List, ListItem, ListSubheader, Stack, Switch, SwitchProps } from '@mui/material';
+import { Box } from '@mui/system';
+import { MouseEventHandler, ReactElement } from 'react';
+
+import { CustomSelect, CustomSelectProps } from './CustomSelect';
+
+interface Setting {
+  label: string;
+}
+
+interface SettingBaseProps {
+  label: string;
+  children: ReactElement;
+}
+
+const SettingBase = ({ label, children }: SettingBaseProps) => {
+  return (
+    <ListItem sx={{ padding: 0, margin: 0 }}>
+      <FormLabel sx={{ width: '100%' }}>
+        <Stack direction="row">
+          <Box flexGrow={1}>{label}</Box>
+          {children}
+        </Stack>
+      </FormLabel>
+    </ListItem>
+  );
+};
+
+interface SettingButtonProps extends Setting {
+  onClick: MouseEventHandler;
+}
+
+export const SettingButton = ({ onClick, ...settingBaseProps }: SettingButtonProps) => {
+  return (
+    <SettingBase {...settingBaseProps}>
+      <Button variant="contained" size="small" onClick={onClick} />
+    </SettingBase>
+  );
+};
+
+interface SettingSelectProps extends Setting, CustomSelectProps {}
+
+export const SettingSelect = ({ options, value, onChange, ...settingBaseProps }: SettingSelectProps) => {
+  return (
+    <SettingBase {...settingBaseProps}>
+      <CustomSelect value={value} options={options} onChange={onChange} />
+    </SettingBase>
+  );
+};
+
+interface SettingSwitchProps extends Setting {
+  checked: SwitchProps['checked'];
+  onChange: SwitchProps['onChange'];
+}
+
+export const SettingSwitch = ({ checked, onChange, ...settingBaseProps }: SettingSwitchProps) => {
+  return (
+    <SettingBase {...settingBaseProps}>
+      <Switch checked={checked} onChange={onChange} />
+    </SettingBase>
+  );
+};
+
+interface SettingGroupProps {
+  label: string;
+  children: ReactElement[];
+}
+
+export const SettingsGroup = ({ label, children }: SettingGroupProps) => {
+  return <List subheader={<ListSubheader>{label}</ListSubheader>}>{children}</List>;
+};
diff --git a/client/src/contexts/CustomThemeProvider.tsx b/client/src/contexts/CustomThemeProvider.tsx
new file mode 100644
index 0000000..a78aefb
--- /dev/null
+++ b/client/src/contexts/CustomThemeProvider.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { PaletteMode } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { createContext, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { buildDefaultTheme } from '../themes/Default';
+import { WithChildren } from '../utils/utils';
+
+interface ICustomThemeContext {
+  mode: PaletteMode;
+  toggleMode: () => void;
+}
+
+export const CustomThemeContext = createContext<ICustomThemeContext>(undefined!);
+
+export default ({ children }: WithChildren) => {
+  const [mode, setMode] = useState<PaletteMode>('light');
+
+  useEffect(() => {
+    const browserIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    // TODO: Check if account saved a preference and use it
+    setMode(browserIsDark ? 'dark' : 'light');
+  }, []);
+
+  const toggleMode = useCallback(() => setMode((mode) => (mode === 'light' ? 'dark' : 'light')), [setMode]);
+
+  const theme = useMemo(() => buildDefaultTheme(mode), [mode]);
+
+  return (
+    <CustomThemeContext.Provider
+      value={{
+        mode,
+        toggleMode,
+      }}
+    >
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </CustomThemeContext.Provider>
+  );
+};
diff --git a/client/src/i18n.ts b/client/src/i18n.ts
index 37f9f7f..711fb1a 100644
--- a/client/src/i18n.ts
+++ b/client/src/i18n.ts
@@ -15,26 +15,43 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import i18n from 'i18next';
+import i18n, { Resource, ResourceLanguage } from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 import translationEn from './locale/en/translation.json';
 import translationFr from './locale/fr/translation.json';
 
+interface LanguageInfo {
+  tag: string;
+  fullName: string;
+  translation: ResourceLanguage;
+}
+
+export const availableLanguages: LanguageInfo[] = [
+  {
+    tag: 'fr',
+    fullName: 'Français',
+    translation: translationFr,
+  },
+  {
+    tag: 'en',
+    fullName: 'English',
+    translation: translationEn,
+  },
+];
+
+const resources = availableLanguages.reduce((resources: Resource, { tag, translation }) => {
+  resources[tag] = { translation };
+  return resources;
+}, {});
+
 i18n.use(initReactI18next).init({
   debug: import.meta.env.DEV,
   lng: 'en',
   interpolation: {
     escapeValue: false,
   },
-  resources: {
-    en: {
-      translation: translationEn,
-    },
-    fr: {
-      translation: translationFr,
-    },
-  },
+  resources,
 });
 
 export default i18n;
diff --git a/client/src/index.tsx b/client/src/index.tsx
index b1cfc89..0fa4b14 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -19,15 +19,15 @@
 import './index.scss';
 import './i18n';
 
-import { ThemeProvider } from '@mui/material/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 
+import CustomThemeProvider from './contexts/CustomThemeProvider';
 import { store } from './redux/store';
 import { router } from './router';
-import defaultTheme from './themes/Default';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -44,13 +44,12 @@
 const root = createRoot(container);
 root.render(
   <Provider store={store}>
-    {/* TODO: Put back StrictMode (https://git.jami.net/savoirfairelinux/jami-web/-/issues/170) */}
-    {/*<StrictMode>*/}
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={defaultTheme}>
-        <RouterProvider router={router} />
-      </ThemeProvider>
-    </QueryClientProvider>
-    {/*</StrictMode>*/}
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <CustomThemeProvider>
+          <RouterProvider router={router} />
+        </CustomThemeProvider>
+      </QueryClientProvider>
+    </StrictMode>
   </Provider>
 );
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index 6b430f1..c8f05b0 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -30,6 +30,9 @@
   "conversation_title_more": "{{member0}}, {{member1}}, {{member2}}, +{{excess}} other members",
   "dialog_close": "Close",
   "dialog_cancel": "Cancel",
+  "Menu": "Menu",
+  "settings_account": "Account settings",
+  "settings_general": "General settings",
   "logout": "Log out",
   "username_input_helper_text_success": "Username available",
   "username_input_helper_text_taken": "Username already taken",
@@ -72,9 +75,14 @@
   "calling": "Calling {{member0}}",
   "connecting": "Connecting...",
   "end_call": "End call",
+  "incoming_call_medium": "",
   "refuse_call": "Refuse",
   "accept_call_audio": "Accept in audio",
   "accept_call_video": "Accept in video",
+  "settings_title_general": "General",
+  "settings_title_system": "System",
+  "setting_dark_theme": "Dark theme",
+  "setting_language": "Language",
   "login_username_not_found": "Username not found",
   "login_invalid_password": "Incorrect password",
   "login_form_title": "Login",
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index 23fb330..016df24 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -30,6 +30,9 @@
   "conversation_title_more": "{{member0}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
   "dialog_close": "Fermer",
   "dialog_cancel": "Annuler",
+  "Menu": "Menu",
+  "settings_account": "Paramètres du compte",
+  "settings_general": "Paramètres généraux",
   "logout": "Se déconnecter",
   "username_input_helper_text_success": "Nom d'utilisateur disponible",
   "username_input_helper_text_taken": "Nom d'utilisateur déjà pris",
@@ -72,9 +75,14 @@
   "calling": "Appel vers {{member0}}",
   "connecting": "Connexion en cours...",
   "end_call": "Fin d'appel",
+  "incoming_call_medium": "",
   "refuse_call": "Refuser",
   "accept_call_audio": "Accepter en audio",
   "accept_call_video": "Accepter en vidéo",
+  "settings_title_general": "Général",
+  "settings_title_system": "Système",
+  "setting_dark_theme": "Thème sombre",
+  "setting_language": "Langue",
   "login_username_not_found": "Nom d'utilisateur introuvable",
   "login_invalid_password": "Mot de passe incorrect",
   "login_form_title": "Connexion",
diff --git a/client/src/pages/GeneralSettings.tsx b/client/src/pages/GeneralSettings.tsx
new file mode 100644
index 0000000..3c7a277
--- /dev/null
+++ b/client/src/pages/GeneralSettings.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { SelectChangeEvent, Stack, Typography } from '@mui/material';
+import { useCallback, useContext, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { SettingSelect, SettingsGroup, SettingSwitch } from '../components/Settings';
+import { CustomThemeContext } from '../contexts/CustomThemeProvider';
+import { availableLanguages } from '../i18n';
+
+export default function GeneralPreferences() {
+  const { t } = useTranslation();
+
+  return (
+    <Stack>
+      <Typography variant="h2">{t('settings_title_general')}</Typography>
+      <SettingsGroup label={t('settings_title_system')}>
+        <SettingTheme />
+        <SettingLanguage />
+      </SettingsGroup>
+    </Stack>
+  );
+}
+
+const SettingTheme = () => {
+  const { t } = useTranslation();
+
+  const { mode, toggleMode } = useContext(CustomThemeContext);
+
+  return <SettingSwitch label={t('setting_dark_theme')} onChange={toggleMode} checked={mode === 'dark'} />;
+};
+
+const settingLanguageOptions = availableLanguages.map(({ tag, fullName }) => ({ label: fullName, value: tag }));
+
+const SettingLanguage = () => {
+  const { t, i18n } = useTranslation();
+
+  const [languageValue, setLanguageValue] = useState(i18n.language);
+
+  useEffect(() => {
+    i18n.changeLanguage(languageValue);
+  }, [languageValue, i18n]);
+
+  const onChange = useCallback(
+    (event: SelectChangeEvent<unknown>) => {
+      setLanguageValue(event.target.value as string);
+    },
+    [setLanguageValue]
+  );
+
+  return (
+    <SettingSelect
+      label={t('setting_language')}
+      value={languageValue}
+      onChange={onChange}
+      options={settingLanguageOptions}
+    />
+  );
+};
diff --git a/client/src/pages/JamiLogin.tsx b/client/src/pages/JamiLogin.tsx
index 256bb76..7bec6f0 100644
--- a/client/src/pages/JamiLogin.tsx
+++ b/client/src/pages/JamiLogin.tsx
@@ -63,7 +63,7 @@
       try {
         const accessToken = await loginUser(username, password);
         setAccessToken(accessToken);
-        navigate('/settings', { replace: true });
+        navigate('/conversation', { replace: true });
       } catch (e) {
         setIsLoggingInUser(false);
         if (e instanceof UsernameNotFound) {
diff --git a/client/src/pages/JamiRegistration.tsx b/client/src/pages/JamiRegistration.tsx
index 62e59c1..089c5d8 100644
--- a/client/src/pages/JamiRegistration.tsx
+++ b/client/src/pages/JamiRegistration.tsx
@@ -73,7 +73,7 @@
     try {
       const accessToken = await loginUser(username, password);
       setAccessToken(accessToken);
-      navigate('/settings', { replace: true });
+      navigate('/conversation', { replace: true });
     } catch (e) {
       setIsCreatingUser(false);
       if (e instanceof UsernameNotFound) {
diff --git a/client/src/pages/Welcome.tsx b/client/src/pages/Welcome.tsx
index 59899ea..110a993 100644
--- a/client/src/pages/Welcome.tsx
+++ b/client/src/pages/Welcome.tsx
@@ -43,7 +43,7 @@
   const accessToken = getAccessToken();
 
   if (accessToken) {
-    return <Navigate to="/settings" replace />;
+    return <Navigate to="/conversation" replace />;
   }
   return (
     <Box
diff --git a/client/src/router.tsx b/client/src/router.tsx
index aea571b..4b053aa 100644
--- a/client/src/router.tsx
+++ b/client/src/router.tsx
@@ -29,6 +29,7 @@
 import NotificationManager from './managers/NotificationManager';
 import AccountSettings from './pages/AccountSettings';
 import CallInterface from './pages/CallInterface';
+import GeneralSettings from './pages/GeneralSettings';
 import Messenger from './pages/Messenger';
 import Setup from './pages/Setup';
 import SetupLogin from './pages/SetupLogin';
@@ -85,7 +86,8 @@
             />
           </Route>
         </Route>
-        <Route path="settings" element={<AccountSettings />} />
+        <Route path="settings-account" element={<AccountSettings />} />
+        <Route path="settings-general" element={<GeneralSettings />} />
         <Route path="contacts" element={<ContactList />} />
       </Route>
     </Route>
diff --git a/client/src/themes/Default.ts b/client/src/themes/Default.ts
index 1986bc5..cc890ec 100644
--- a/client/src/themes/Default.ts
+++ b/client/src/themes/Default.ts
@@ -15,7 +15,7 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { createTheme, SimplePaletteColorOptions } from '@mui/material';
+import { createTheme, PaletteMode, SimplePaletteColorOptions } from '@mui/material';
 
 declare module '@mui/material/styles' {
   interface Theme {
@@ -33,33 +33,7 @@
   }
 }
 
-const theme = createTheme({
-  palette: {
-    primary: {
-      light: '#E5EEF5', // same as "#0056991A"
-      main: '#0071C9',
-      dark: '#005699',
-    },
-    error: {
-      main: '#CC0022',
-      dark: '#720013',
-    },
-    success: {
-      main: '#009980',
-    },
-    secondary: {
-      main: '#A3C2DA',
-      dark: '#06493F',
-    },
-  },
-  InfoTooltip: {
-    backgroundColor: {
-      main: '#FFFFFF',
-    },
-    color: {
-      main: '#292929',
-    },
-  },
+const fonts = {
   typography: {
     fontFamily: 'Ubuntu',
     allVariants: {
@@ -166,185 +140,220 @@
       `,
     },
   },
-});
+};
 
-export default createTheme(theme, {
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          height: '46px',
-          fontWeight: 700,
-          fontSize: '15px',
-          lineHeight: '17px',
-          textTransform: 'none',
-          borderRadius: '5px',
-        },
-        sizeSmall: {
-          height: '36px',
-        },
-        contained: {
-          background: theme.palette.primary.dark,
-          '&:hover': {
-            background: theme.palette.primary.main,
-          },
-        },
-        outlined: {
-          background: '#FFF',
-          borderColor: '#0056995C',
-          color: theme.palette.primary.dark,
-          '&:hover': {
-            background: theme.palette.primary.light,
-            borderColor: theme.palette.primary.dark,
-          },
-        },
-        text: {
-          background: '#fff',
-          color: theme.palette.primary.dark,
-          '&:hover': {
-            background: theme.palette.primary.light,
-          },
-        },
+const palettes = {
+  light: {
+    palette: {
+      mode: 'light' as PaletteMode,
+      primary: {
+        light: '#E5EEF5', // same as "#0056991A"
+        main: '#0071C9',
+        dark: '#005699',
+      },
+      error: {
+        main: '#CC0022',
+        dark: '#720013',
+      },
+      success: {
+        main: '#009980',
+      },
+      secondary: {
+        main: '#A3C2DA',
+        dark: '#06493F',
       },
     },
-    MuiDialog: {
-      styleOverrides: {
-        paper: {
-          padding: '16px',
-          boxShadow: '3px 3px 7px #00000029',
-          borderRadius: '20px',
-        },
+    InfoTooltip: {
+      backgroundColor: {
+        main: '#FFFFFF',
       },
-    },
-    MuiDialogActions: {
-      styleOverrides: {
-        root: {
-          padding: '0px',
-        },
-      },
-    },
-    MuiDialogContent: {
-      styleOverrides: {
-        root: {
-          padding: '0px',
-          margin: '16px 0px',
-          minWidth: '500px',
-        },
-      },
-    },
-    MuiDialogTitle: {
-      styleOverrides: {
-        root: {
-          padding: '0px',
-        },
-      },
-    },
-    MuiSwitch: {
-      defaultProps: {
-        disableRipple: true,
-      },
-      styleOverrides: {
-        root: {
-          width: '60px',
-          height: '30px',
-          padding: 0,
-        },
-        switchBase: {
-          padding: 0,
-          '&.Mui-checked': {
-            transform: `translateX(30px)`,
-          },
-        },
-        thumb: {
-          width: '28px',
-          height: '28px',
-          border: `1px solid ${theme.palette.primary.dark}`,
-          '.Mui-checked.Mui-checked &': {
-            width: '30px',
-            height: '30px',
-            border: 'none',
-          },
-        },
-        track: {
-          backgroundColor: theme.palette.primary.light,
-          borderRadius: '30px',
-          opacity: 1,
-          '.Mui-checked.Mui-checked + &': {
-            backgroundColor: theme.palette.primary.light,
-            opacity: 1,
-          },
-        },
-        colorPrimary: {
-          color: '#fff',
-          '&.Mui-checked': {
-            color: theme.palette.primary.dark,
-          },
-        },
-      },
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          color: theme.palette.primary.dark,
-          '&.Mui-error': {
-            color: theme.palette.error.main,
-          },
-        },
-        underline: {
-          /*
-            Material UI uses "before" for the regular underline.
-            There is a second underline called "after" placed over "before"
-          */
-          '&:before': {
-            borderBottom: `2px solid ${theme.palette.primary.dark}`,
-          },
-          '&:hover:not(.Mui-disabled, .Mui-error):before': {
-            borderBottom: '2px solid #03B9E9',
-          },
-          '&:after': {
-            borderBottom: '2px solid #03B9E9',
-          },
-          '&:hover:not(.Mui-error):after': {
-            borderBottom: '2px solid #03B9E9',
-          },
-        },
-      },
-    },
-    MuiFormControl: {
-      styleOverrides: {
-        root: {
-          height: '90px',
-        },
-      },
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        root: {
-          position: 'absolute',
-          bottom: '0px',
-          fontSize: '15px',
-        },
-      },
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: 'black',
-          fontSize: '15px',
-          left: '50%',
-          transform: 'translate(-50%, 20px)',
-          transition: 'left .2s, transform .2s',
-        },
-        shrink: {
-          color: 'black',
-          left: 0,
-          transform: 'translate(0, 50px) scale(0.75)',
-          transition: 'left .2s, transform .2s',
-          '&.Mui-focused, &.Mui-error': {
-            color: 'black',
-          },
-        },
+      color: {
+        main: '#292929',
       },
     },
   },
-});
+  dark: {
+    palette: {
+      mode: 'dark' as PaletteMode,
+      primary: {
+        light: '#E5EEF5', // same as "#0056991A"
+        main: '#0071C9',
+        dark: '#005699',
+      },
+      error: {
+        main: '#CC0022',
+        dark: '#720013',
+      },
+      success: {
+        main: '#009980',
+      },
+      secondary: {
+        main: '#A3C2DA',
+        dark: '#06493F',
+      },
+    },
+    InfoTooltip: {
+      backgroundColor: {
+        main: '#FFFFFF',
+      },
+      color: {
+        main: '#292929',
+      },
+    },
+  },
+};
+
+export const buildDefaultTheme = (mode: PaletteMode) => {
+  // Attemps to set the fonts on the second "createTheme" has resulted with wrong font-families
+  const partialTheme = createTheme({ ...palettes[mode], ...fonts });
+  const palette = partialTheme.palette;
+
+  return createTheme(partialTheme, {
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            height: '46px',
+            fontWeight: 700,
+            fontSize: '15px',
+            lineHeight: '17px',
+            textTransform: 'none',
+            borderRadius: '5px',
+          },
+          sizeSmall: {
+            height: '36px',
+          },
+          contained: {
+            background: palette.primary.dark,
+            '&:hover': {
+              background: palette.primary.main,
+            },
+          },
+          outlined: {
+            background: '#FFF',
+            borderColor: '#0056995C',
+            color: palette.primary.dark,
+            '&:hover': {
+              background: palette.primary.light,
+              borderColor: palette.primary.dark,
+            },
+          },
+          text: {
+            background: '#fff',
+            color: palette.primary.dark,
+            '&:hover': {
+              background: palette.primary.light,
+            },
+          },
+        },
+      },
+      MuiSwitch: {
+        defaultProps: {
+          disableRipple: true,
+        },
+        styleOverrides: {
+          root: {
+            width: '60px',
+            height: '30px',
+            padding: 0,
+          },
+          switchBase: {
+            padding: 0,
+            '&.Mui-checked': {
+              transform: `translateX(30px)`,
+            },
+          },
+          thumb: {
+            width: '28px',
+            height: '28px',
+            border: `1px solid ${palette.primary.dark}`,
+            '.Mui-checked.Mui-checked &': {
+              width: '30px',
+              height: '30px',
+              border: 'none',
+            },
+          },
+          track: {
+            backgroundColor: palette.primary.light,
+            borderRadius: '30px',
+            opacity: 1,
+            '.Mui-checked.Mui-checked + &': {
+              backgroundColor: palette.primary.light,
+              opacity: 1,
+            },
+          },
+          colorPrimary: {
+            color: '#fff',
+            '&.Mui-checked': {
+              color: palette.primary.dark,
+            },
+          },
+        },
+      },
+      MuiInput: {
+        styleOverrides: {
+          root: {
+            color: palette.primary.dark,
+            '&.Mui-error': {
+              color: palette.error.main,
+            },
+          },
+          underline: {
+            /*
+              Material UI uses "before" for the regular underline.
+              There is a second underline called "after" placed over "before"
+            */
+            '&:before': {
+              borderBottom: `2px solid ${palette.primary.dark}`,
+            },
+            '&:hover:not(.Mui-disabled, .Mui-error):before': {
+              borderBottom: '2px solid #03B9E9',
+            },
+            '&:after': {
+              borderBottom: '2px solid #03B9E9',
+            },
+            '&:hover:not(.Mui-error):after': {
+              borderBottom: '2px solid #03B9E9',
+            },
+          },
+        },
+      },
+      MuiFormControl: {
+        styleOverrides: {
+          root: {
+            height: '90px',
+          },
+        },
+      },
+      MuiFormHelperText: {
+        styleOverrides: {
+          root: {
+            position: 'absolute',
+            bottom: '0px',
+            fontSize: '15px',
+          },
+        },
+      },
+      MuiInputLabel: {
+        styleOverrides: {
+          root: {
+            color: 'black',
+            fontSize: '15px',
+            left: '50%',
+            transform: 'translate(-50%, 20px)',
+            transition: 'left .2s, transform .2s',
+          },
+          shrink: {
+            color: 'black',
+            left: 0,
+            transform: 'translate(0, 50px) scale(0.75)',
+            transition: 'left .2s, transform .2s',
+            '&.Mui-focused, &.Mui-error': {
+              color: 'black',
+            },
+          },
+        },
+      },
+    },
+  });
+};
diff --git a/client/src/themes/MotionVariants.tsx b/client/src/themes/MotionVariants.tsx
new file mode 100644
index 0000000..8ca7bbb
--- /dev/null
+++ b/client/src/themes/MotionVariants.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation; either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <https://www.gnu.org/licenses/>.
+ */
+import { Variants } from 'framer-motion';
+
+export const transition = { duration: 0.3, ease: [0.43, 0.13, 0.23, 0.96] };
+
+export const thumbnailVariants: Variants = {
+  initial: { scale: 0.9, opacity: 0 },
+  enter: { scale: 1, opacity: 1, transition },
+  exit: {
+    scale: 0.5,
+    opacity: 0,
+    transition: { ...transition, duration: 1.5 },
+  },
+};
diff --git a/client/src/themes/ThemeDemonstrator.tsx b/client/src/themes/ThemeDemonstrator.tsx
index daddbee..9fb7599 100644
--- a/client/src/themes/ThemeDemonstrator.tsx
+++ b/client/src/themes/ThemeDemonstrator.tsx
@@ -15,7 +15,7 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
-import { Button, Stack, Switch, ThemeProvider, Typography } from '@mui/material';
+import { Button, Stack, Switch, Typography } from '@mui/material';
 
 import {
   BackButton,
@@ -28,11 +28,11 @@
   UploadPictureButton,
 } from '../components/Button';
 import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from '../components/Input';
-import defaultTheme from './Default';
+import CustomThemeProvider from '../contexts/CustomThemeProvider';
 
 export const ThemeDemonstrator = () => {
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <CustomThemeProvider>
       <Stack spacing="5px">
         <Stack>
           <Typography variant="h1">Exemple de titre H1</Typography>
@@ -78,6 +78,6 @@
           <RegularInput />
         </Stack>
       </Stack>
-    </ThemeProvider>
+    </CustomThemeProvider>
   );
 };