diff --git a/client/src/App.js b/client/src/App.js
index 573c190..7496453 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,7 +3,7 @@
   Author: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
   License: AGPL-3
 */
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import React, { useState, useEffect } from 'react'
 import { Route, Routes, Navigate } from 'react-router-dom'
 import authManager from './AuthManager'
@@ -18,192 +18,7 @@
 import NotFoundPage from "./pages/404.jsx"
 import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
 import WelcomeAnimation from './components/welcome'
-
-const theme = createTheme({
-  
-  typography: {
-    fontFamily: "Ubuntu",
-    h1: {
-      fontWeight: 400,
-      fontSize: "26px",
-      lineHeight: "36px",
-    },
-    h2: {
-      fontWeight: 400,
-      fontSize: "22px",
-      lineHeight: "30px",
-    },
-    h3: {
-      fontWeight: 400,
-      fontSize: "18px",
-      lineHeight: "26px",
-    },
-    h4: {
-      fontWeight: 500,
-      fontSize: "15px",
-      lineHeight: "22px",
-    },
-    h5: {
-      fontWeight: 500,
-      fontSize: "13px",
-      lineHeight: "19px",
-    },
-    body1: {
-      fontWeight: 400,
-      fontSize: "15px",
-      lineHeight: "22px"
-    },
-    body2: {
-      fontWeight: 400,
-      fontSize: "13px",
-      lineHeight: "19px",
-    },
-    caption: {
-      fontWeight: 400,
-      fontSize: "12px",
-      lineHeight: "16px",
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          height: "46px",
-          fontWeight: 700,
-          fontSize: "15px",
-          lineHeight: "17px",
-          textTransform: "none",
-        },
-        sizeSmall: {
-          height: "36px",
-        },
-        contained: {
-          background: "#005699",
-          "&:hover": {
-            background: "#0071C9",
-          },
-        },
-        outlined: {
-          background: "#FFF",
-          borderColor: "#0056995C",
-          color: "#005699",
-          "&:hover": {
-            background: "#0056991A",
-            borderColor: "#005699",
-          },
-        },
-        text: {
-          background: "#fff",
-          color: "#005699",
-          "&:hover": {
-            background: "#0056991A",
-          },
-        },
-      },
-    },
-    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 #005699",
-          ".Mui-checked.Mui-checked &": {
-            width: "30px",
-            height: "30px",
-            border: "none",
-          }
-        },
-        track: {
-          backgroundColor: "#0056991A",
-          borderRadius: "30px",
-          opacity: 1,
-          ".Mui-checked.Mui-checked + &": {
-            backgroundColor: "#0056991A",
-            opacity: 1,
-          }
-        },
-        colorPrimary: {
-          color: "#fff",
-          "&.Mui-checked": {
-            color: "#005699",
-          },
-        },
-      },
-    },
-    MuiCssBaseline: {
-      styleOverrides: `
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-Th.ttf");
-          font-weight: 100;
-          font-style: normal;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-L.ttf");
-          font-weight: 300;
-          font-style: normal;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-LI.ttf");
-          font-weight: 300;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-R.ttf");
-          font-weight: 400;
-          font-style: normal;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-RI.ttf");
-          font-weight: 400;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-M.ttf");
-          font-weight: 500;
-          font-style: normal;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-MI.ttf");
-          font-weight: 500;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-B.ttf");
-          font-weight: 700;
-          font-style: normal;
-        }
-        @font-face {
-          font-family: "Ubuntu";
-          src: url("./fonts/Ubuntu-BI.ttf");
-          font-weight: 700;
-          font-style: italic;
-        }
-      `,
-    },
-  },
-});
+import defaultTheme from './themes/default'
 
 const Home = (props) => {
   console.log(`home ${props}`)
@@ -236,7 +51,7 @@
         </Routes>
     }
 
-    return <ThemeProvider theme={theme}>
+    return <ThemeProvider theme={defaultTheme}>
     <Routes>
       <Route path="/account">
         <Route index element={<AccountSelection />} />