diff --git a/src/app/configs/themesConfig.js b/src/app/configs/themesConfig.js
index 626f2d3..c0c5010 100644
--- a/src/app/configs/themesConfig.js
+++ b/src/app/configs/themesConfig.js
@@ -1,10 +1,7 @@
-import { fuseDark, skyBlue } from '@fuse/colors';
-import { blueGrey } from '@mui/material/colors';
-
 export const lightPaletteText = {
-  primary: 'rgb(17, 24, 39)',
-  secondary: 'rgb(107, 114, 128)',
-  disabled: 'rgb(149, 156, 169)',
+  primary: '#151B30',
+  secondary: '#6D6D6D',
+  disabled: '#D9D9D9',
 };
 
 export const darkPaletteText = {
@@ -22,35 +19,34 @@ const themesConfig = {
       common: {
         black: 'rgb(17, 24, 39)',
         white: 'rgb(255, 255, 255)',
+        layout: '#141D39',
+        ...lightPaletteText,
       },
       primary: {
         light: '#64748b',
-        main: '#1e293b',
-        dark: '#0f172a',
+        main: '#F1F5F9',
+        dark: '#F1F1FB',
         contrastText: darkPaletteText.primary,
       },
       secondary: {
-        light: '#818cf8',
-        main: '#4f46e5',
+        light: '#1AD079',
+        main: '#4D53FF',
         dark: '#3730a3',
         contrastText: darkPaletteText.primary,
       },
       background: {
         paper: '#FFFFFF',
-        authPaper: '#F1F5F9',
-        default: '#f1f5f9',
+        default: '#F1F5F9',
+      },
+      accept: {
+        light: '#E8FAF2',
+        main: '#10A75F',
       },
       error: {
-        light: '#ffcdd2',
-        main: '#f44336',
+        light: '#FBEBEA',
+        main: '#D83529',
         dark: '#b71c1c',
       },
-      border: {
-        light: '#D9D9D9',
-      },
-    },
-    status: {
-      danger: 'orange',
     },
     size: {
       inputRadius: '10px',
@@ -79,7 +75,7 @@ const themesConfig = {
       },
       background: {
         paper: '#1e293b',
-        default: '#111827',
+        default: '#141D39',
       },
       error: {
         light: '#ffcdd2',
@@ -91,816 +87,6 @@ const themesConfig = {
       },
     },
   },
-  legacy: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      common: {
-        black: 'rgb(17, 24, 39)',
-        white: 'rgb(255, 255, 255)',
-      },
-      primary: {
-        light: fuseDark[200],
-        main: fuseDark[500],
-        dark: fuseDark[800],
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: skyBlue[100],
-        main: skyBlue[500],
-        dark: skyBlue[900],
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#f6f7f9',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light1: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#b3d1d1',
-        main: '#006565',
-        dark: '#003737',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#ffecc0',
-        main: '#FFBE2C',
-        dark: '#ff9910',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#F0F7F7',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light2: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#fdf3da',
-        main: '#f8d683',
-        dark: '#f3bc53',
-        contrastText: lightPaletteText.primary,
-      },
-      secondary: {
-        light: '#FADCB3',
-        main: '#F3B25F',
-        dark: '#ec9339',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FAFBFD',
-        default: '#FFFFFF',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light3: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#D9C8CE',
-        main: '#80485B',
-        dark: '#50212F',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#FFE3BF',
-        main: '#FFB049',
-        dark: '#FF8619',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFF0DF',
-        default: '#FAFAFE',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light4: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#CDCCE8',
-        main: '#5854B1',
-        dark: '#2D2988',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#F8EBF2',
-        main: '#E7BDD3',
-        dark: '#D798B7',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#F6F7FB',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light5: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#C2C7F1',
-        main: '#3543D0',
-        dark: '#161EB3',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#B3F1FE',
-        main: '#00CFFD',
-        dark: '#00B2FC',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#F7FAFF',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light6: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#BBE2DA',
-        main: '#1B9E85',
-        dark: '#087055',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#FFD0C1',
-        main: '#FF6231',
-        dark: '#FF3413',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#F2F8F1',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light7: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#BFC4E6',
-        main: '#2A3BAB',
-        dark: '#0F1980',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#C2ECF0',
-        main: '#33C1CD',
-        dark: '#149EAE',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#EDF0F6',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light8: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#D2EFF2',
-        main: '#68C8D5',
-        dark: '#3AA7BA',
-        contrastText: lightPaletteText.primary,
-      },
-      secondary: {
-        light: '#FFF2C6',
-        main: '#FED441',
-        dark: '#FDB91C',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FAF6F3',
-        default: '#FFFFFF',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light9: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#D3C0CD',
-        main: '#6B2C57',
-        dark: '#3C102C',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#FDEAC9',
-        main: '#F9B84B',
-        dark: '#F59123',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#FAFAFE',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light10: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#C6C9CD',
-        main: '#404B57',
-        dark: '#1C232C',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#FEEDC7',
-        main: '#FCC344',
-        dark: '#FAA11F',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#F5F4F6',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  light11: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#C4C4C4',
-        main: '#3A3A3A',
-        dark: '#181818',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#EFEFED',
-        main: '#CBCAC3',
-        dark: '#ACABA1',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#EFEEE7',
-        default: '#FAF8F2',
-      },
-      error: {
-        light: '#F7EAEA',
-        main: '#EBCECE',
-        dark: '#E3B9B9',
-      },
-    },
-    status: {
-      danger: 'yellow',
-    },
-  },
-  light12: {
-    palette: {
-      mode: 'light',
-      divider: '#e2e8f0',
-      text: lightPaletteText,
-      primary: {
-        light: '#FFFAF6',
-        main: '#FFEDE2',
-        dark: '#FFE0CF',
-        contrastText: lightPaletteText.primary,
-      },
-      secondary: {
-        light: '#DBD8F7',
-        main: '#887CE3',
-        dark: '#584CD0',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#FFFFFF',
-        default: '#FCF8F5',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark1: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#C2C2C3',
-        main: '#323338',
-        dark: '#131417',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#B8E1D9',
-        main: '#129B7F',
-        dark: '#056D4F',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#262526',
-        default: '#1E1D1E',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark2: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#C9CACE',
-        main: '#4B4F5A',
-        dark: '#23262E',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#F8F5F2',
-        main: '#E6DED5',
-        dark: '#D5C8BA',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#31343E',
-        default: '#2A2D35',
-      },
-      error: {
-        light: '#F7EAEA',
-        main: '#EBCECE',
-        dark: '#E3B9B9',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark3: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#C2C8D2',
-        main: '#354968',
-        dark: '#16213A',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#F4CFCA',
-        main: '#D55847',
-        dark: '#C03325',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#23354E',
-        default: '#1B2A3F',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark4: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#CECADF',
-        main: '#5A4E93',
-        dark: '#2E2564',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#B3EBD6',
-        main: '#00BC77',
-        dark: '#009747',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#22184B',
-        default: '#180F3D',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark5: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#CCD7E2',
-        main: '#56789D',
-        dark: '#2B486F',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#D7D3ED',
-        main: '#796CC4',
-        dark: '#493DA2',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#465261',
-        default: '#232931',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark6: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#FFC7CE',
-        main: '#FF445D',
-        dark: '#FF1F30',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#B4E3FB',
-        main: '#05A2F3',
-        dark: '#0175EA',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#2F3438',
-        default: '#25292E',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark7: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: 'FFECC5',
-        main: '#FEBE3E',
-        dark: '#FD991B',
-        contrastText: lightPaletteText.primary,
-      },
-      secondary: {
-        light: '#FFC8C7',
-        main: '#FE4644',
-        dark: '#FD201F',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#2A2E32',
-        default: '#212529',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark8: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#BEBFC8',
-        main: '#252949',
-        dark: '#0D0F21',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#CBD7FE',
-        main: '#5079FC',
-        dark: '#2749FA',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#2D3159',
-        default: '#202441',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark9: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#BCC8CD',
-        main: '#204657',
-        dark: '#0B202C',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#B3EBC5',
-        main: '#00BD3E',
-        dark: '#00981B',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#1C1E27',
-        default: '#15171E',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark10: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#C3C2D2',
-        main: '#36336A',
-        dark: '#16143C',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#D6CEFC',
-        main: '#765CF5',
-        dark: '#4630EE',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#2D2A5D',
-        default: '#26244E',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark11: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#BFB7BF',
-        main: '#2A0F29',
-        dark: '#0F040F',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#D9B9C3',
-        main: '#801737',
-        dark: '#500716',
-        contrastText: darkPaletteText.primary,
-      },
-      background: {
-        paper: '#200D1F',
-        default: '#2D132C',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  dark12: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: '#CCC3C8',
-        main: '#543847',
-        dark: '#291720',
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: '#DFB8BD',
-        main: '#BE717A',
-        dark: '#99424A',
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: '#4D4351',
-        default: '#27141F',
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
-  greyDark: {
-    palette: {
-      mode: 'dark',
-      divider: 'rgba(241,245,249,.12)',
-      text: darkPaletteText,
-      primary: {
-        light: fuseDark[200],
-        main: fuseDark[700],
-        dark: fuseDark[800],
-        contrastText: darkPaletteText.primary,
-      },
-      secondary: {
-        light: skyBlue[100],
-        main: skyBlue[500],
-        dark: skyBlue[900],
-        contrastText: lightPaletteText.primary,
-      },
-      background: {
-        paper: blueGrey[700],
-        default: blueGrey[900],
-      },
-      error: {
-        light: '#ffcdd2',
-        main: '#f44336',
-        dark: '#b71c1c',
-      },
-    },
-    status: {
-      danger: 'orange',
-    },
-  },
 };
 
 export default themesConfig;
diff --git a/src/app/main/authPages/forgot-password/ForgotPasswordPage.js b/src/app/main/authPages/forgot-password/ForgotPasswordPage.js
index 14412c9..c9d626c 100644
--- a/src/app/main/authPages/forgot-password/ForgotPasswordPage.js
+++ b/src/app/main/authPages/forgot-password/ForgotPasswordPage.js
@@ -43,7 +43,7 @@ function ForgotPasswordPage({ t }) {
 
       <Paper
         className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
-        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+        sx={{ background: (theme) => theme.palette.background?.default }}
       >
         <div className="w-full mx-auto sm:mx-0">
           <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -81,7 +81,7 @@ function ForgotPasswordPage({ t }) {
               )}
             />
 
-            <div className="flex justify-center w-full">
+            <div className="flex flex-col items-center justify-center gap-10 w-full">
               <Button
                 variant="contained"
                 color="secondary"
@@ -93,11 +93,14 @@ function ForgotPasswordPage({ t }) {
               >
                 {t('forgot_password_btn')}
               </Button>
+              {errors.root?.message && (
+                <p className="text-l text-error-main">{errors.root?.message}</p>
+              )}
             </div>
 
             <Typography className="mt-32 font-medium" color="text.secondary">
               <span>{t('return')}</span>
-              <Link className="ml-4 text-indigo-400 underline" to="/sign-in">
+              <Link className="ml-4 text-secondary-main underline" to="/sign-in">
                 {t('sign_in')}
               </Link>
             </Typography>
diff --git a/src/app/main/authPages/shared-components/LeftSideCanvas.js b/src/app/main/authPages/shared-components/LeftSideCanvas.js
index bd30a88..835b4f3 100644
--- a/src/app/main/authPages/shared-components/LeftSideCanvas.js
+++ b/src/app/main/authPages/shared-components/LeftSideCanvas.js
@@ -6,7 +6,7 @@ function LeftSideCanvas({ title, subtitle, text }) {
   return (
     <Box
       className="h-full min-h-screen relative hidden md:flex flex-auto items-center justify-center p-64 lg:px-112 overflow-hidden max-w-[45vw] w-full"
-      sx={{ backgroundColor: 'primary.main' }}
+      sx={{ backgroundColor: 'common.layout' }}
     >
       <svg
         className="absolute inset-0 pointer-events-none"
@@ -30,15 +30,17 @@ function LeftSideCanvas({ title, subtitle, text }) {
       </svg>
 
       <div className="z-10 relative w-full max-w-2xl">
-        {title && <div className="text-7xl font-bold leading-none text-gray-100">{title}</div>}
+        {title && <div className="text-7xl font-bold leading-none text-primary-light">{title}</div>}
         {subtitle && (
-          <div className="mt-24 text-lg tracking-tight leading-6 text-gray-400">{subtitle}</div>
+          <div className="mt-24 text-lg tracking-tight leading-6 text-common-disabled">
+            {subtitle}
+          </div>
         )}
         <div className="flex items-center mt-32">
           <AvatarGroup
             sx={{
               '& .MuiAvatar-root': {
-                borderColor: 'primary.main',
+                borderColor: 'common.layout',
               },
             }}
           >
@@ -48,7 +50,9 @@ function LeftSideCanvas({ title, subtitle, text }) {
             <Avatar src="assets/images/avatars/male-16.jpg" />
           </AvatarGroup>
 
-          {text && <div className="ml-16 font-medium tracking-tight text-gray-400">{text}</div>}
+          {text && (
+            <div className="ml-16 font-medium tracking-tight text-common-disabled">{text}</div>
+          )}
         </div>
       </div>
     </Box>
diff --git a/src/app/main/authPages/sign-in/SignInPage.js b/src/app/main/authPages/sign-in/SignInPage.js
index d8e6ca3..a08ad3d 100644
--- a/src/app/main/authPages/sign-in/SignInPage.js
+++ b/src/app/main/authPages/sign-in/SignInPage.js
@@ -49,7 +49,7 @@ function SignInPage({ t }) {
 
       <Paper
         className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
-        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+        sx={{ background: (theme) => theme.palette.background?.default }}
       >
         <div className="w-full mx-auto sm:mx-0">
           <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -57,7 +57,7 @@ function SignInPage({ t }) {
           </Typography>
           <div className="flex items-baseline mt-10 font-medium">
             <Typography>{t('have_account')}</Typography>
-            <Link className="ml-4 text-indigo-400 underline" to="/sign-up">
+            <Link className="ml-4 text-secondary-main underline" to="/sign-up">
               {t('sign_up')}
             </Link>
           </div>
@@ -126,7 +126,9 @@ function SignInPage({ t }) {
                       control={
                         <Checkbox
                           {...field}
-                          sx={{ color: (theme) => theme.palette.border.light }}
+                          sx={{
+                            color: (theme) => theme.palette.common.disabled,
+                          }}
                         />
                       }
                     />
@@ -134,12 +136,12 @@ function SignInPage({ t }) {
                 )}
               />
 
-              <Link className="text-indigo-400 underline font-medium" to="/forgot-password">
+              <Link className="text-secondary-main underline font-medium" to="/forgot-password">
                 {t('forgot_password')}
               </Link>
             </div>
 
-            <div className="flex justify-center w-full">
+            <div className="flex flex-col items-center justify-center gap-10 w-full">
               <Button
                 variant="contained"
                 color="secondary"
@@ -151,7 +153,9 @@ function SignInPage({ t }) {
               >
                 {t('sign_in_btn')}
               </Button>
-              {errors.root && <p>{errors.root.message}</p>}
+              {errors.root?.message && (
+                <p className="text-l text-error-main">{errors.root?.message}</p>
+              )}
             </div>
           </form>
         </div>
diff --git a/src/app/main/authPages/sign-up/SignUpPage.js b/src/app/main/authPages/sign-up/SignUpPage.js
index 2519c73..8cad1cf 100644
--- a/src/app/main/authPages/sign-up/SignUpPage.js
+++ b/src/app/main/authPages/sign-up/SignUpPage.js
@@ -61,7 +61,7 @@ function SignUpPage({ t }) {
 
       <Paper
         className="h-full w-full sm:h-auto md:flex md:h-full py-32 px-16 sm:p-48 md:p-40 md:px-96 sm:rounded-2xl md:rounded-none sm:shadow md:shadow-none rtl:border-r-1 ltr:border-l-1"
-        sx={{ background: (theme) => theme.palette.background?.authPaper }}
+        sx={{ background: (theme) => theme.palette.background?.default }}
       >
         <div className="w-full mx-auto sm:mx-0">
           <Typography className="text-4xl font-extrabold tracking-tight leading-tight">
@@ -69,7 +69,7 @@ function SignUpPage({ t }) {
           </Typography>
           <div className="flex items-baseline mt-10 font-medium">
             <Typography>{t('have_account')}</Typography>
-            <Link className="ml-4 text-indigo-400 underline" to="/sign-in">
+            <Link className="ml-4 text-secondary-main underline" to="/sign-in">
               {t('sign_in')}
             </Link>
           </div>
@@ -181,7 +181,10 @@ function SignUpPage({ t }) {
                   <FormControlLabel
                     label={t('accept_terms')}
                     control={
-                      <Checkbox {...field} sx={{ color: (theme) => theme.palette.border.light }} />
+                      <Checkbox
+                        {...field}
+                        sx={{ color: (theme) => theme.palette.common.disabled }}
+                      />
                     }
                   />
                   <FormHelperText>{errors?.acceptTermsConditions?.message}</FormHelperText>
@@ -189,7 +192,7 @@ function SignUpPage({ t }) {
               )}
             />
 
-            <div className="flex justify-center w-full">
+            <div className="flex flex-col items-center justify-center gap-10 w-full">
               <Button
                 variant="contained"
                 color="secondary"
@@ -201,6 +204,9 @@ function SignUpPage({ t }) {
               >
                 {t('sign_up_btn')}
               </Button>
+              {errors.root?.message && (
+                <p className="text-l text-error-main">{errors.root?.message}</p>
+              )}
             </div>
           </form>
         </div>
diff --git a/src/app/main/navigationPages/dashboard/Dashboard.js b/src/app/main/navigationPages/dashboard/Dashboard.js
index 2e9f334..6f0e430 100644
--- a/src/app/main/navigationPages/dashboard/Dashboard.js
+++ b/src/app/main/navigationPages/dashboard/Dashboard.js
@@ -21,11 +21,11 @@ function DashboardPage(props) {
 
   return (
     <Root
-      header={
-        <div className="p-24">
-          <h4>{t('TITLE')}</h4>
-        </div>
-      }
+      // header={
+      //   <div className="p-24">
+      //     <h4>{t('TITLE')}</h4>
+      //   </div>
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>
diff --git a/src/app/main/navigationPages/favorites/Favorites.js b/src/app/main/navigationPages/favorites/Favorites.js
index fe85856..dd5bf8f 100644
--- a/src/app/main/navigationPages/favorites/Favorites.js
+++ b/src/app/main/navigationPages/favorites/Favorites.js
@@ -21,11 +21,11 @@ function FavoritesPage(props) {
 
   return (
     <Root
-      header={
-        <div className="p-24">
-          <h4>{t('TITLE')}</h4>
-        </div>
-      }
+      // header={
+      //   <div className="p-24">
+      //     <h4>{t('TITLE')}</h4>
+      //   </div>
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>
diff --git a/src/app/main/navigationPages/history/History.js b/src/app/main/navigationPages/history/History.js
index d94731a..406b93f 100644
--- a/src/app/main/navigationPages/history/History.js
+++ b/src/app/main/navigationPages/history/History.js
@@ -21,11 +21,11 @@ function HistoryPage(props) {
 
   return (
     <Root
-      header={
-        <div className="p-24">
-          <h4>{t('TITLE')}</h4>
-        </div>
-      }
+      // header={
+      //   <div className="p-24">
+      //     <h4>{t('TITLE')}</h4>
+      //   </div>
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>
diff --git a/src/app/main/navigationPages/profile/Profile.js b/src/app/main/navigationPages/profile/Profile.js
index d82849d..da0be44 100644
--- a/src/app/main/navigationPages/profile/Profile.js
+++ b/src/app/main/navigationPages/profile/Profile.js
@@ -21,11 +21,11 @@ function ProfilePage(props) {
 
   return (
     <Root
-      header={
-        <div className="p-24">
-          <h4>{t('TITLE')}</h4>
-        </div>
-      }
+      // header={
+      //   <div className="p-24">
+      //     <h4>{t('TITLE')}</h4>
+      //   </div>
+      // }
       content={
         <div className="p-24">
           <h4>Content</h4>
diff --git a/src/app/services/authService.js b/src/app/services/authService.js
index 3e673ce..387fa3a 100644
--- a/src/app/services/authService.js
+++ b/src/app/services/authService.js
@@ -112,7 +112,7 @@ export default class AuthService extends FuseUtils.EventEmitter {
 
   sendPasswordResetEmail = (email) => {
     return new Promise((resolve, reject) => {
-      if (email) {
+      if (!email) {
         reject(Error('Email is empty'));
       }
 
diff --git a/src/app/theme-layouts/layout1/Layout1Config.js b/src/app/theme-layouts/layout1/Layout1Config.js
index 379ff09..58a7383 100644
--- a/src/app/theme-layouts/layout1/Layout1Config.js
+++ b/src/app/theme-layouts/layout1/Layout1Config.js
@@ -5,7 +5,6 @@ const config = {
     containerWidth: 1570,
     navbar: {
       display: true,
-      style: 'style-1',
       folded: true,
       position: 'left',
     },
@@ -55,32 +54,6 @@ const config = {
             },
           ],
         },
-        style: {
-          title: 'Style',
-          type: 'radio',
-          options: [
-            {
-              name: 'Slide (style-1)',
-              value: 'style-1',
-            },
-            {
-              name: 'Folded (style-2)',
-              value: 'style-2',
-            },
-            {
-              name: 'Tabbed (style-3)',
-              value: 'style-3',
-            },
-            {
-              name: 'Tabbed Dense (style-3-dense)',
-              value: 'style-3-dense',
-            },
-          ],
-        },
-        folded: {
-          title: 'Folded (style-2, style-3)',
-          type: 'switch',
-        },
       },
     },
   },
diff --git a/src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js b/src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js
index a8792f3..39a8114 100644
--- a/src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js
+++ b/src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js
@@ -3,9 +3,7 @@ import { memo } from 'react';
 import { useSelector } from 'react-redux';
 import { selectFuseCurrentLayoutConfig, selectNavbarTheme } from 'app/store/fuse/settingsSlice';
 import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
-import NavbarStyle1 from './navbar/style-1/NavbarStyle1';
-import NavbarStyle2 from './navbar/style-2/NavbarStyle2';
-import NavbarStyle3 from './navbar/style-3/NavbarStyle3';
+import NavbarLayout1 from './navbar/NavbarLayout1';
 import NavbarToggleFab from '../../shared-components/NavbarToggleFab';
 
 function NavbarWrapperLayout1(props) {
@@ -17,12 +15,7 @@ function NavbarWrapperLayout1(props) {
   return (
     <>
       <ThemeProvider theme={navbarTheme}>
-        <>
-          {config.navbar.style === 'style-1' && <NavbarStyle1 />}
-          {config.navbar.style === 'style-2' && <NavbarStyle2 />}
-          {config.navbar.style === 'style-3' && <NavbarStyle3 />}
-          {config.navbar.style === 'style-3-dense' && <NavbarStyle3 dense />}
-        </>
+        <NavbarLayout1 />
       </ThemeProvider>
 
       {config.navbar.display && !navbar.open && <NavbarToggleFab />}
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1.js b/src/app/theme-layouts/layout1/components/navbar/NavbarLayout1.js
similarity index 92%
rename from src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1.js
rename to src/app/theme-layouts/layout1/components/navbar/NavbarLayout1.js
index 1bb8283..374404c 100644
--- a/src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1.js
+++ b/src/app/theme-layouts/layout1/components/navbar/NavbarLayout1.js
@@ -4,7 +4,7 @@ import SwipeableDrawer from '@mui/material/SwipeableDrawer';
 import { useDispatch, useSelector } from 'react-redux';
 import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
 import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle1Content from './NavbarStyle1Content';
+import NavbarLayout1Content from './NavbarLayout1Content';
 
 const navbarWidth = 280;
 
@@ -40,7 +40,7 @@ const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
   },
 }));
 
-function NavbarStyle1(props) {
+function NavbarLayout1(props) {
   const dispatch = useDispatch();
   const config = useSelector(selectFuseCurrentLayoutConfig);
   const navbar = useSelector(selectFuseNavbar);
@@ -53,7 +53,7 @@ function NavbarStyle1(props) {
           open={navbar.open}
           position={config.navbar.position}
         >
-          <NavbarStyle1Content />
+          <NavbarLayout1Content />
         </StyledNavBar>
       </Hidden>
 
@@ -72,11 +72,11 @@ function NavbarStyle1(props) {
             keepMounted: true, // Better open performance on mobile.
           }}
         >
-          <NavbarStyle1Content />
+          <NavbarLayout1Content />
         </StyledNavBarMobile>
       </Hidden>
     </>
   );
 }
 
-export default NavbarStyle1;
+export default NavbarLayout1;
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1Content.js b/src/app/theme-layouts/layout1/components/navbar/NavbarLayout1Content.js
similarity index 73%
rename from src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1Content.js
rename to src/app/theme-layouts/layout1/components/navbar/NavbarLayout1Content.js
index aba68a3..91fcc78 100644
--- a/src/app/theme-layouts/layout1/components/navbar/style-1/NavbarStyle1Content.js
+++ b/src/app/theme-layouts/layout1/components/navbar/NavbarLayout1Content.js
@@ -2,10 +2,10 @@ import FuseScrollbars from '@fuse/core/FuseScrollbars';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
 import { memo } from 'react';
-import Logo from '../../../../shared-components/Logo';
-import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
-import UserNavbarHeader from '../../../../shared-components/UserNavbarHeader';
-import Navigation from '../../../../shared-components/Navigation';
+import Logo from '../../../shared-components/Logo';
+import NavbarToggleButton from '../../../shared-components/NavbarToggleButton';
+import UserNavbarHeader from '../../../shared-components/UserNavbarHeader';
+import Navigation from '../../../shared-components/Navigation';
 
 const Root = styled('div')(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
@@ -32,7 +32,7 @@ const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
   backgroundAttachment: 'local, scroll',
 }));
 
-function NavbarStyle1Content(props) {
+function NavbarLayout1Content(props) {
   return (
     <Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
       <div className="flex flex-row items-center shrink-0 h-48 md:h-72 px-20">
@@ -50,13 +50,9 @@ function NavbarStyle1Content(props) {
         <UserNavbarHeader />
 
         <Navigation layout="vertical" />
-
-        <div className="flex flex-0 items-center justify-center py-48 opacity-10">
-          <img className="w-full max-w-64" src="assets/images/logo/logo.svg" alt="footer logo" />
-        </div>
       </StyledContent>
     </Root>
   );
 }
 
-export default memo(NavbarStyle1Content);
+export default memo(NavbarLayout1Content);
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js b/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js
deleted file mode 100644
index 3ea9cb1..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import Hidden from '@mui/material/Hidden';
-import { styled } from '@mui/material/styles';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import {
-  navbarCloseFolded,
-  navbarCloseMobile,
-  navbarOpenFolded,
-  selectFuseNavbar,
-} from 'app/store/fuse/navbarSlice';
-import { useDispatch, useSelector } from 'react-redux';
-import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle2Content from './NavbarStyle2Content';
-
-const navbarWidth = 280;
-
-const Root = styled('div')(({ theme, folded }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  zIndex: 4,
-  [theme.breakpoints.up('lg')]: {
-    width: navbarWidth,
-    minWidth: navbarWidth,
-  },
-
-  ...(folded && {
-    [theme.breakpoints.up('lg')]: {
-      width: 76,
-      minWidth: 76,
-    },
-  }),
-}));
-
-const StyledNavbar = styled('div')(
-  ({ theme, position, folded, foldedandopened, foldedandclosed }) => ({
-    minWidth: navbarWidth,
-    width: navbarWidth,
-    maxWidth: navbarWidth,
-    maxHeight: '100%',
-    transition: theme.transitions.create(['width', 'min-width'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.shorter,
-    }),
-
-    ...(position === 'left' && {
-      left: 0,
-    }),
-
-    ...(position === 'right' && {
-      right: 0,
-    }),
-
-    ...(folded && {
-      position: 'absolute',
-      width: 76,
-      minWidth: 76,
-      top: 0,
-      bottom: 0,
-    }),
-
-    ...(foldedandopened && {
-      width: navbarWidth,
-      minWidth: navbarWidth,
-    }),
-
-    ...(foldedandclosed && {
-      '& .NavbarStyle2-content': {
-        '& .logo-icon': {
-          width: 44,
-          height: 44,
-        },
-        '& .logo-text': {
-          opacity: 0,
-        },
-        '& .react-badge': {
-          opacity: 0,
-        },
-        '& .fuse-list-item': {
-          width: 56,
-        },
-        '& .fuse-list-item-text, & .arrow-icon, & .item-badge': {
-          opacity: 0,
-        },
-        '& .fuse-list-subheader .fuse-list-subheader-text': {
-          opacity: 0,
-        },
-        '& .fuse-list-subheader:before': {
-          content: '""',
-          display: 'block',
-          position: 'absolute',
-          minWidth: 16,
-          borderTop: '2px solid',
-          opacity: 0.2,
-        },
-        '& .collapse-children': {
-          display: 'none',
-        },
-      },
-    }),
-  })
-);
-
-const StyledNavbarMobile = styled(SwipeableDrawer)(({ theme, position }) => ({
-  '& > .MuiDrawer-paper': {
-    minWidth: navbarWidth,
-    width: navbarWidth,
-    maxWidth: navbarWidth,
-    maxHeight: '100%',
-    transition: theme.transitions.create(['width', 'min-width'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.shorter,
-    }),
-  },
-}));
-
-function NavbarStyle2(props) {
-  const dispatch = useDispatch();
-  const config = useSelector(selectFuseCurrentLayoutConfig);
-  const navbar = useSelector(selectFuseNavbar);
-
-  // const folded = !navbar.open;
-  const { folded } = config.navbar;
-  const foldedandclosed = folded && !navbar.foldedOpen;
-  const foldedandopened = folded && navbar.foldedOpen;
-
-  return (
-    <Root
-      folded={folded ? 1 : 0}
-      open={navbar.open}
-      id="fuse-navbar"
-      className="sticky top-0 h-screen shrink-0 z-20 shadow-5"
-    >
-      <Hidden lgDown>
-        <StyledNavbar
-          className="flex-col flex-auto"
-          position={config.navbar.position}
-          folded={folded ? 1 : 0}
-          foldedandopened={foldedandopened ? 1 : 0}
-          foldedandclosed={foldedandclosed ? 1 : 0}
-          onMouseEnter={() => foldedandclosed && dispatch(navbarOpenFolded())}
-          onMouseLeave={() => foldedandopened && dispatch(navbarCloseFolded())}
-        >
-          <NavbarStyle2Content className="NavbarStyle2-content" />
-        </StyledNavbar>
-      </Hidden>
-
-      <Hidden lgUp>
-        <StyledNavbarMobile
-          classes={{
-            paper: 'flex-col flex-auto h-full',
-          }}
-          folded={folded ? 1 : 0}
-          foldedandopened={foldedandopened ? 1 : 0}
-          foldedandclosed={foldedandclosed ? 1 : 0}
-          anchor={config.navbar.position}
-          variant="temporary"
-          open={navbar.mobileOpen}
-          onClose={() => dispatch(navbarCloseMobile())}
-          onOpen={() => {}}
-          disableSwipeToOpen
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
-        >
-          <NavbarStyle2Content className="NavbarStyle2-content" />
-        </StyledNavbarMobile>
-      </Hidden>
-    </Root>
-  );
-}
-
-export default NavbarStyle2;
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2Content.js b/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2Content.js
deleted file mode 100644
index 493ca6d..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-2/NavbarStyle2Content.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import FuseScrollbars from '@fuse/core/FuseScrollbars';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { memo } from 'react';
-import Logo from '../../../../shared-components/Logo';
-import NavbarToggleButton from '../../../../shared-components/NavbarToggleButton';
-import Navigation from '../../../../shared-components/Navigation';
-
-const Root = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
-  '& ::-webkit-scrollbar-thumb': {
-    boxShadow: `inset 0 0 0 20px ${
-      theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.24)' : 'rgba(255, 255, 255, 0.24)'
-    }`,
-  },
-  '& ::-webkit-scrollbar-thumb:active': {
-    boxShadow: `inset 0 0 0 20px ${
-      theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.37)' : 'rgba(255, 255, 255, 0.37)'
-    }`,
-  },
-}));
-
-const StyledContent = styled(FuseScrollbars)(({ theme }) => ({
-  overscrollBehavior: 'contain',
-  overflowX: 'hidden',
-  overflowY: 'auto',
-  WebkitOverflowScrolling: 'touch',
-  background:
-    'linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%)',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '100% 40px, 100% 10px',
-  backgroundAttachment: 'local, scroll',
-}));
-
-function NavbarStyle2Content(props) {
-  return (
-    <Root className={clsx('flex flex-auto flex-col overflow-hidden h-full', props.className)}>
-      <div className="flex flex-row items-center shrink-0 h-48 md:h-76 px-12">
-        <div className="flex flex-1 mx-4">
-          <Logo />
-        </div>
-
-        <NavbarToggleButton className="w-40 h-40 p-0" />
-      </div>
-
-      <StyledContent option={{ suppressScrollX: true, wheelPropagation: false }}>
-        <Navigation layout="vertical" />
-      </StyledContent>
-    </Root>
-  );
-}
-
-export default memo(NavbarStyle2Content);
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js b/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js
deleted file mode 100644
index 07fcac9..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import Hidden from '@mui/material/Hidden';
-import { styled } from '@mui/material/styles';
-import SwipeableDrawer from '@mui/material/SwipeableDrawer';
-import { useDispatch, useSelector } from 'react-redux';
-import { navbarCloseMobile, selectFuseNavbar } from 'app/store/fuse/navbarSlice';
-import GlobalStyles from '@mui/material/GlobalStyles';
-import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
-import NavbarStyle3Content from './NavbarStyle3Content';
-
-const navbarWidth = 120;
-const navbarWidthDense = 64;
-const panelWidth = 280;
-
-const StyledNavBar = styled('div')(({ theme, dense, open, folded, position }) => ({
-  minWidth: navbarWidth,
-  width: navbarWidth,
-  maxWidth: navbarWidth,
-
-  ...(dense && {
-    minWidth: navbarWidthDense,
-    width: navbarWidthDense,
-    maxWidth: navbarWidthDense,
-
-    ...(!open && {
-      ...(position === 'left' && {
-        marginLeft: -navbarWidthDense,
-      }),
-
-      ...(position === 'right' && {
-        marginRight: -navbarWidthDense,
-      }),
-    }),
-  }),
-
-  ...(!folded && {
-    minWidth: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
-    width: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
-    maxWidth: dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth,
-
-    '& #fuse-navbar-panel': {
-      opacity: '1!important',
-      pointerEvents: 'initial!important',
-    },
-
-    ...(!open && {
-      ...(position === 'left' && {
-        marginLeft: -(dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth),
-      }),
-
-      ...(position === 'right' && {
-        marginRight: -(dense ? navbarWidthDense + panelWidth : navbarWidth + panelWidth),
-      }),
-    }),
-  }),
-
-  ...(!open && {
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    ...(position === 'left' && {
-      marginLeft: -(dense ? navbarWidthDense : navbarWidth),
-    }),
-
-    ...(position === 'right' && {
-      marginRight: -(dense ? navbarWidthDense : navbarWidth),
-    }),
-  }),
-
-  ...(open && {
-    transition: theme.transitions.create('margin', {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-  }),
-}));
-
-const StyledNavBarMobile = styled(SwipeableDrawer)(({ theme }) => ({
-  '& .MuiDrawer-paper': {
-    '& #fuse-navbar-side-panel': {
-      minWidth: 'auto',
-      wdith: 'auto',
-    },
-    '& #fuse-navbar-panel': {
-      opacity: '1!important',
-      pointerEvents: 'initial!important',
-    },
-  },
-}));
-
-function NavbarStyle3(props) {
-  const dispatch = useDispatch();
-  const config = useSelector(selectFuseCurrentLayoutConfig);
-  const navbar = useSelector(selectFuseNavbar);
-  const { folded } = config.navbar;
-
-  return (
-    <>
-      <GlobalStyles
-        styles={(theme) => ({
-          '& #fuse-navbar-side-panel': {
-            width: props.dense ? navbarWidthDense : navbarWidth,
-            minWidth: props.dense ? navbarWidthDense : navbarWidth,
-            maxWidth: props.dense ? navbarWidthDense : navbarWidth,
-          },
-          '& #fuse-navbar-panel': {
-            maxWidth: '100%',
-            width: panelWidth,
-            [theme.breakpoints.up('lg')]: {
-              minWidth: panelWidth,
-              maxWidth: 'initial',
-            },
-          },
-        })}
-      />
-      <Hidden lgDown>
-        <StyledNavBar
-          open={navbar.open}
-          dense={props.dense ? 1 : 0}
-          folded={folded ? 1 : 0}
-          position={config.navbar.position}
-          className="flex-col flex-auto sticky top-0 h-screen shrink-0 z-20 shadow-5"
-        >
-          <NavbarStyle3Content dense={props.dense ? 1 : 0} folded={folded ? 1 : 0} />
-        </StyledNavBar>
-      </Hidden>
-      <Hidden lgUp>
-        <StyledNavBarMobile
-          classes={{
-            paper: 'flex-col flex-auto h-screen max-w-full w-auto overflow-hidden',
-          }}
-          anchor={config.navbar.position}
-          variant="temporary"
-          open={navbar.mobileOpen}
-          onClose={() => dispatch(navbarCloseMobile())}
-          onOpen={() => {}}
-          disableSwipeToOpen
-          ModalProps={{
-            keepMounted: true, // Better open performance on mobile.
-          }}
-        >
-          <NavbarStyle3Content dense={props.dense ? 1 : 0} folded={folded ? 1 : 0} />
-        </StyledNavBarMobile>
-      </Hidden>
-    </>
-  );
-}
-
-export default NavbarStyle3;
diff --git a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js b/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js
deleted file mode 100644
index 651b534..0000000
--- a/src/app/theme-layouts/layout1/components/navbar/style-3/NavbarStyle3Content.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import FuseScrollbars from '@fuse/core/FuseScrollbars';
-import { styled, useTheme } from '@mui/material/styles';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import clsx from 'clsx';
-import { memo, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import FuseNavigation from '@fuse/core/FuseNavigation';
-import { navbarCloseMobile } from 'app/store/fuse/navbarSlice';
-import { selectContrastMainTheme } from 'app/store/fuse/settingsSlice';
-import { useLocation } from 'react-router-dom';
-import useThemeMediaQuery from '@fuse/hooks/useThemeMediaQuery';
-import { selectNavigation } from 'app/store/fuse/navigationSlice';
-
-const Root = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
-}));
-
-const StyledPanel = styled(FuseScrollbars)(({ theme, opened }) => ({
-  backgroundColor: theme.palette.background.default,
-  color: theme.palette.text.primary,
-  transition: theme.transitions.create(['opacity'], {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.shortest,
-  }),
-  opacity: 0,
-  pointerEvents: 'none',
-  ...(opened && {
-    opacity: 1,
-    pointerEvents: 'initial',
-  }),
-}));
-
-function needsToBeOpened(location, item) {
-  return location && isUrlInChildren(item, location.pathname);
-}
-
-function isUrlInChildren(parent, url) {
-  if (!parent.children) {
-    return false;
-  }
-
-  for (let i = 0; i < parent.children.length; i += 1) {
-    if (parent.children[i].children) {
-      if (isUrlInChildren(parent.children[i], url)) {
-        return true;
-      }
-    }
-    if (parent.children[i].url === url || url.includes(parent.children[i].url)) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-function NavbarStyle3Content(props) {
-  const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));
-  const navigation = useSelector(selectNavigation);
-  const [selectedNavigation, setSelectedNavigation] = useState([]);
-  const [panelOpen, setPanelOpen] = useState(false);
-  const theme = useTheme();
-  const dispatch = useDispatch();
-  const contrastTheme = useSelector(selectContrastMainTheme(theme.palette.primary.main));
-  const location = useLocation();
-
-  useEffect(() => {
-    navigation?.forEach((item) => {
-      if (needsToBeOpened(location, item)) {
-        setSelectedNavigation([item]);
-      }
-    });
-  }, [navigation, location]);
-
-  function handleParentItemClick(selected) {
-    /** if there is no child item do not set/open panel
-     */
-    if (!selected.children) {
-      setSelectedNavigation([]);
-      setPanelOpen(false);
-      return;
-    }
-
-    /**
-     * If navigation already selected toggle panel visibility
-     */
-    if (selectedNavigation[0]?.id === selected.id) {
-      setPanelOpen(!panelOpen);
-    } else {
-      /**
-       * Set navigation and open panel
-       */
-      setSelectedNavigation([selected]);
-      setPanelOpen(true);
-    }
-  }
-
-  function handleChildItemClick(selected) {
-    setPanelOpen(false);
-    if (isMobile) {
-      dispatch(navbarCloseMobile());
-    }
-  }
-
-  return (
-    <ClickAwayListener onClickAway={() => setPanelOpen(false)}>
-      <Root className={clsx('flex flex-auto flex h-full', props.className)}>
-        <div id="fuse-navbar-side-panel" className="flex shrink-0 flex-col items-center">
-          <img className="w-44 my-32" src="assets/images/logo/logo.svg" alt="logo" />
-
-          <FuseScrollbars
-            className="flex flex-1 min-h-0 justify-center w-full overflow-y-auto overflow-x-hidden"
-            option={{ suppressScrollX: true, wheelPropagation: false }}
-          >
-            <FuseNavigation
-              className={clsx('navigation')}
-              navigation={navigation}
-              layout="vertical-2"
-              onItemClick={handleParentItemClick}
-              firstLevel
-              selectedId={selectedNavigation[0]?.id}
-              dense={props.dense}
-            />
-          </FuseScrollbars>
-        </div>
-
-        {selectedNavigation.length > 0 && (
-          <StyledPanel
-            id="fuse-navbar-panel"
-            opened={panelOpen}
-            className={clsx('shadow-5 overflow-y-auto overflow-x-hidden')}
-            option={{ suppressScrollX: true, wheelPropagation: false }}
-          >
-            <FuseNavigation
-              className={clsx('navigation')}
-              navigation={selectedNavigation}
-              layout="vertical"
-              onItemClick={handleChildItemClick}
-            />
-          </StyledPanel>
-        )}
-      </Root>
-    </ClickAwayListener>
-  );
-}
-
-export default memo(NavbarStyle3Content);
diff --git a/src/app/theme-layouts/layout2/components/FooterLayout2.js b/src/app/theme-layouts/layout2/components/FooterLayout2.js
index b9d6219..b5d7552 100644
--- a/src/app/theme-layouts/layout2/components/FooterLayout2.js
+++ b/src/app/theme-layouts/layout2/components/FooterLayout2.js
@@ -7,7 +7,7 @@ function FooterLayout2() {
   const { t } = useTranslation('layout2');
 
   return (
-    <footer className="flex items-center justify-center w-full bg-gray-900">
+    <footer className="flex items-center justify-center w-full bg-common-layout">
       <div className="flex gap-96 w-full max-w-screen-xl px-10 py-52">
         <ul className="flex flex-col gap-16 mr-96">
           <li>
diff --git a/src/app/theme-layouts/layout2/components/HeaderLayout2.js b/src/app/theme-layouts/layout2/components/HeaderLayout2.js
index 293c649..f654593 100644
--- a/src/app/theme-layouts/layout2/components/HeaderLayout2.js
+++ b/src/app/theme-layouts/layout2/components/HeaderLayout2.js
@@ -8,7 +8,7 @@ function HeaderLayout2(props) {
   const { t } = useTranslation('layout2');
 
   return (
-    <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-white">
+    <header className="fixed z-50 flex items-center justify-center w-full h-72 px-10 bg-primary-light">
       <div className="flex justify-between max-w-screen-xl w-full">
         <Link to="/">
           <img
@@ -17,10 +17,11 @@ function HeaderLayout2(props) {
             alt={t('logo_alt')}
           />
         </Link>
+
         <nav className="flex grow justify-center gap-72 items-center">
           {linksConfigLayout2.map((path) => (
             <Link
-              className="text-lg leading-5 text-slate-800 no-underline"
+              className="text-lg leading-5 text-common-layout no-underline"
               to={`/${path}`}
               key={path}
             >
@@ -28,13 +29,14 @@ function HeaderLayout2(props) {
             </Link>
           ))}
         </nav>
+
         {props.isAuthenticated || (
           <div className="flex gap-32 items-center">
-            <Link className="text-indigo-400" to="/sign-in">
+            <Link className="text-secondary-main" to="/sign-in">
               {t('sign_in')}
             </Link>
             <Link
-              className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-white bg-indigo-400 rounded-2xl"
+              className="flex gap-7 items-center px-24 py-10 text-lg leading-5 text-primary-light bg-secondary-main rounded-2xl shadow hover:shadow-hover hover:shadow-secondary-main ease-in-out duration-300"
               to="/sign-up"
             >
               <span>{t('sign_up')}</span>
diff --git a/tailwind.config.js b/tailwind.config.js
index 724f12d..3df9c15 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -130,6 +130,8 @@ module.exports = {
       '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
       inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
       none: 'none',
+      active: '2px 2px 5px 0px rgba(0, 0, 0, 0.2)',
+      hover: '2px 2px 5px 0px rgba(0, 0, 0, 0.4)',
       0: '0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)',
       1: '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)',
       2: '0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
@@ -176,7 +178,30 @@ module.exports = {
       current: colors.current,
       transparent: 'transparent',
       black: '#22292F',
-      white: '#fff',
+      white: '#FFFFFF',
+      common: {
+        layout: '#141D39',
+        primary: '#151B30',
+        secondary: '#6D6D6D',
+        disabled: '#D9D9D9',
+      },
+      primary: {
+        light: '#FFFFFF',
+        main: '#F1F5F9',
+        dark: '#F1F1FB',
+      },
+      secondary: {
+        light: '#1AD079',
+        main: '#4D53FF',
+      },
+      accept: {
+        light: '#E8FAF2',
+        main: '#10A75F',
+      },
+      error: {
+        light: '#FBEBEA',
+        main: '#D83529',
+      },
       grey: {
         50: '#FAFAFA',
         100: '#F5F5F5',