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 />} />
diff --git a/client/src/themes/default.js b/client/src/themes/default.js
new file mode 100644
index 0000000..11c3193
--- /dev/null
+++ b/client/src/themes/default.js
@@ -0,0 +1,189 @@
+import { createTheme } from "@mui/material";
+
+export default 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",
+          },
+        },
+      },
+    },
+    MuiTextField: {
+
+    },
+    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;
+        }
+      `,
+    },
+  },
+});