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>
   );
 };