initial commit

2026-05-13 17:48:36 +05:30
commit 5a80256856
305 changed files with 80994 additions and 0 deletions
--- a/src/themes/index.js
+++ b/src/themes/index.js
@@ -0,0 +1,122 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+
+// material-ui
+import { CssBaseline, GlobalStyles, StyledEngineProvider } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+// project import
+import useConfig from 'hooks/useConfig';
+import Palette from './palette';
+import Typography from './typography';
+import CustomShadows from './shadows';
+import componentsOverride from './overrides';
+
+// ==============================|| DEFAULT THEME - MAIN  ||============================== //
+
+export default function ThemeCustomization({ children }) {
+  const { themeDirection, mode, presetColor, fontFamily } = useConfig();
+
+  const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily]);
+  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);
+
+  const themeOptions = useMemo(
+    () => ({
+      breakpoints: {
+        values: {
+          xs: 0, // Extra-small: 0px and up
+          custom300: 300, // above 350
+          custom350: 350, // above 350
+          custom400: 400, // above 400
+          custom450: 450, // above 450
+          custom500: 500, // above 450
+          custom550: 550, // above 450
+          custom600: 600, // above 450
+          custom650: 650, // above 450
+          custom700: 700, // above 450
+          custom750: 750, // above 450
+          sm: 768, // Small: 768px and up
+          custom800: 800, // above 450,
+          custom850: 850, // above 450,
+          custom900: 900, // above 450
+          custom950: 950, // above 450
+          custom1000: 1000, // above 450
+          md: 1024, // Medium: 1024px and up
+          lg: 1266, // Large: 1266px and up
+          custom1300: 1300, // Large: 1266px and up
+          custom1350: 1350, // Large: 1266px and up
+          xl: 1440 // Extra-large: 1440px and up
+        }
+      },
+      direction: themeDirection,
+      mixins: {
+        toolbar: {
+          minHeight: 60,
+          paddingTop: 8,
+          paddingBottom: 8
+        }
+      },
+      palette: theme.palette,
+      customShadows: themeCustomShadows,
+      typography: themeTypography
+    }),
+    [themeDirection, theme, themeTypography, themeCustomShadows]
+  );
+
+  const themes = createTheme(themeOptions);
+  themes.components = componentsOverride(themes);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={themes}>
+        <CssBaseline />
+        <GlobalStyles
+          styles={{
+            // '*': { // this * access even the internal scroll bar,
+            //   // scrollbarWidth: '100px', // works in Firefox only
+            //   scrollbarColor: `${theme.palette.primary.main} ${theme.palette.secondary.lighter}`
+            // },
+            // '*::-webkit-scrollbar': {
+            //   width: '22px', // vertical
+            //   height: '22px' // horizontal
+            // },
+            // '*::-webkit-scrollbar-thumb': {
+            //   backgroundColor: '#65387A'
+            //   // borderRadius: '5px'
+            // },
+            // '*::-webkit-scrollbar-track': {
+            //   backgroundColor: `${theme.palette.secondary.lighter}`
+            // }
+            overflow: 'auto',
+            '&::-webkit-scrollbar': {
+              width: '14px', // scroll bar width
+              cursor: 'pointer'
+            },
+            '&::-webkit-scrollbar-thumb': {
+              backgroundColor: theme.palette.primary.main, // thumb color
+              // borderRadius: '8px',
+              cursor: 'pointer'
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+              backgroundColor: theme.palette.primary.dark, // hover color
+              cursor: 'pointer'
+            },
+            '&::-webkit-scrollbar-track': {
+              backgroundColor: theme.palette.primary.lighter,
+              cursor: 'pointer'
+            }
+          }}
+        />
+
+        {children}
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+ThemeCustomization.propTypes = {
+  children: PropTypes.node
+};
--- a/src/themes/overrides/Accordion.js
+++ b/src/themes/overrides/Accordion.js
@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function Accordion(theme) {
+  return {
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        square: true,
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          border: `1px solid ${theme.palette.secondary.light}`,
+          '&:not(:last-child)': {
+            borderBottom: 0
+          },
+          '&:before': {
+            display: 'none'
+          },
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.secondary.lighter
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/AccordionDetails.js
+++ b/src/themes/overrides/AccordionDetails.js
@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AccordionDetails(theme) {
+  return {
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(2),
+          borderTop: `1px solid ${theme.palette.secondary.light}`
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/AccordionSummary.js
+++ b/src/themes/overrides/AccordionSummary.js
@@ -0,0 +1,33 @@
+// assets
+import { RightOutlined } from '@ant-design/icons';
+
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AccordionSummary(theme) {
+  const { palette, spacing } = theme;
+
+  return {
+    MuiAccordionSummary: {
+      defaultProps: {
+        expandIcon: <RightOutlined style={{ fontSize: '0.75rem' }} />
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: palette.secondary.lighter,
+          flexDirection: 'row-reverse',
+          minHeight: 46
+        },
+        expandIconWrapper: {
+          '&.Mui-expanded': {
+            transform: 'rotate(90deg)'
+          }
+        },
+        content: {
+          marginTop: spacing(1.25),
+          marginBottom: spacing(1.25),
+          marginLeft: spacing(1)
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Alert.js
+++ b/src/themes/overrides/Alert.js
@@ -0,0 +1,75 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| ALERT - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, light, main } = colors;
+
+  return {
+    borderColor: alpha(light, 0.5),
+    backgroundColor: lighter,
+    '& .MuiAlert-icon': {
+      color: main
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - ALERT ||============================== //
+
+export default function Alert(theme) {
+  const primaryDashed = getColorStyle({ color: 'primary', theme });
+
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.primary,
+          fontSize: '0.875rem'
+        },
+        icon: {
+          fontSize: '1rem'
+        },
+        message: {
+          padding: 0,
+          marginTop: 3
+        },
+        filled: {
+          color: theme.palette.grey[0]
+        },
+        border: {
+          padding: '10px 16px',
+          border: '1px solid',
+          ...primaryDashed,
+          '&.MuiAlert-borderPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiAlert-borderSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiAlert-borderError': getColorStyle({ color: 'error', theme }),
+          '&.MuiAlert-borderSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiAlert-borderInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiAlert-borderWarning': getColorStyle({ color: 'warning', theme })
+        },
+        action: {
+          '& .MuiButton-root': {
+            padding: 2,
+            height: 'auto',
+            fontSize: '0.75rem',
+            marginTop: -2
+          },
+          '& .MuiIconButton-root': {
+            width: 'auto',
+            height: 'auto',
+            padding: 2,
+            marginRight: 6,
+            '& .MuiSvgIcon-root': {
+              fontSize: '1rem'
+            }
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/AlertTitle.js
+++ b/src/themes/overrides/AlertTitle.js
@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AlertTitle() {
+  return {
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBottom: 4,
+          marginTop: 0,
+          fontWeight: 400
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Autocomplete.js
+++ b/src/themes/overrides/Autocomplete.js
@@ -0,0 +1,23 @@
+// ==============================|| OVERRIDES - AUTOCOMPLETE ||============================== //
+
+export default function Autocomplete() {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            padding: '3px 9px'
+          }
+        },
+        popupIndicator: {
+          width: 'auto',
+          height: 'auto'
+        },
+        clearIndicator: {
+          width: 'auto',
+          height: 'auto'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Badge.js
+++ b/src/themes/overrides/Badge.js
@@ -0,0 +1,41 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| BADGE - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main } = colors;
+
+  return {
+    color: main,
+    backgroundColor: lighter
+  };
+}
+
+// ==============================|| OVERRIDES - BADGE ||============================== //
+
+export default function Badge(theme) {
+  const defaultLightBadge = getColorStyle({ color: 'primary', theme });
+
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          minWidth: theme.spacing(2),
+          height: theme.spacing(2),
+          padding: theme.spacing(0.5)
+        },
+        light: {
+          ...defaultLightBadge,
+          '&.MuiBadge-colorPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiBadge-colorSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiBadge-colorError': getColorStyle({ color: 'error', theme }),
+          '&.MuiBadge-colorInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiBadge-colorSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiBadge-colorWarning': getColorStyle({ color: 'warning', theme })
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Button.js
+++ b/src/themes/overrides/Button.js
@@ -0,0 +1,202 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project import
+import getColors from 'utils/getColors';
+import getShadow from 'utils/getShadow';
+
+// ==============================|| BUTTON - COLORS ||============================== //
+
+function getColorStyle({ variant, color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark, contrastText } = colors;
+
+  const buttonShadow = `${color}Button`;
+  const shadows = getShadow(theme, buttonShadow);
+
+  const commonShadow = {
+    '&::after': {
+      boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
+    },
+    '&:active::after': {
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    }
+  };
+
+  switch (variant) {
+    case 'contained':
+      return {
+        '&:hover': {
+          backgroundColor: dark
+        },
+        ...commonShadow
+      };
+    case 'shadow':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        boxShadow: shadows,
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: dark
+        },
+        ...commonShadow
+      };
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          color: dark,
+          backgroundColor: 'transparent',
+          borderColor: dark
+        },
+        ...commonShadow
+      };
+    case 'dashed':
+      return {
+        color: main,
+        borderColor: main,
+        backgroundColor: lighter,
+        '&:hover': {
+          color: dark,
+          borderColor: dark
+        },
+        ...commonShadow
+      };
+    case 'text':
+    default:
+      return {
+        '&:hover': {
+          color: dark,
+          backgroundColor: lighter
+        },
+        ...commonShadow
+      };
+  }
+}
+
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function Button(theme) {
+  const primaryDashed = getColorStyle({ variant: 'dashed', color: 'primary', theme });
+  const primaryShadow = getColorStyle({ variant: 'shadow', color: 'primary', theme });
+
+  const disabledStyle = {
+    '&.Mui-disabled': {
+      backgroundColor: theme.palette.grey[200]
+    }
+  };
+  const iconStyle = {
+    '&>*:nth-of-type(1)': {
+      fontSize: 'inherit'
+    }
+  };
+
+  return {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true
+      },
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '&::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 4,
+            opacity: 0,
+            transition: 'all 0.5s'
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 4,
+            left: 0,
+            top: 0,
+            opacity: 1,
+            transition: '0s'
+          }
+        },
+        contained: {
+          ...disabledStyle
+        },
+        outlined: {
+          ...disabledStyle
+        },
+        text: {
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: 'none'
+          }
+        },
+        endIcon: {
+          ...iconStyle
+        },
+        startIcon: {
+          ...iconStyle
+        },
+        dashed: {
+          border: '1px dashed',
+          ...primaryDashed,
+          '&.MuiButton-dashedPrimary': getColorStyle({ variant: 'dashed', color: 'primary', theme }),
+          '&.MuiButton-dashedSecondary': getColorStyle({ variant: 'dashed', color: 'secondary', theme }),
+          '&.MuiButton-dashedError': getColorStyle({ variant: 'dashed', color: 'error', theme }),
+          '&.MuiButton-dashedSuccess': getColorStyle({ variant: 'dashed', color: 'success', theme }),
+          '&.MuiButton-dashedInfo': getColorStyle({ variant: 'dashed', color: 'info', theme }),
+          '&.MuiButton-dashedWarning': getColorStyle({ variant: 'dashed', color: 'warning', theme }),
+          '&.Mui-disabled': {
+            color: `${theme.palette.grey[300]} !important`,
+            borderColor: `${theme.palette.grey[400]} !important`,
+            backgroundColor: `${theme.palette.grey[200]} !important`
+          }
+        },
+        shadow: {
+          ...primaryShadow,
+          '&.MuiButton-shadowPrimary': getColorStyle({ variant: 'shadow', color: 'primary', theme }),
+          '&.MuiButton-shadowSecondary': getColorStyle({ variant: 'shadow', color: 'secondary', theme }),
+          '&.MuiButton-shadowError': getColorStyle({ variant: 'shadow', color: 'error', theme }),
+          '&.MuiButton-shadowSuccess': getColorStyle({ variant: 'shadow', color: 'success', theme }),
+          '&.MuiButton-shadowInfo': getColorStyle({ variant: 'shadow', color: 'info', theme }),
+          '&.MuiButton-shadowWarning': getColorStyle({ variant: 'shadow', color: 'warning', theme }),
+          '&.Mui-disabled': {
+            color: `${theme.palette.grey[300]} !important`,
+            borderColor: `${theme.palette.grey[400]} !important`,
+            backgroundColor: `${theme.palette.grey[200]} !important`
+          }
+        },
+        containedPrimary: getColorStyle({ variant: 'contained', color: 'primary', theme }),
+        containedSecondary: getColorStyle({ variant: 'contained', color: 'secondary', theme }),
+        containedError: getColorStyle({ variant: 'contained', color: 'error', theme }),
+        containedSuccess: getColorStyle({ variant: 'contained', color: 'success', theme }),
+        containedInfo: getColorStyle({ variant: 'contained', color: 'info', theme }),
+        containedWarning: getColorStyle({ variant: 'contained', color: 'warning', theme }),
+        outlinedPrimary: getColorStyle({ variant: 'outlined', color: 'primary', theme }),
+        outlinedSecondary: getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
+        outlinedError: getColorStyle({ variant: 'outlined', color: 'error', theme }),
+        outlinedSuccess: getColorStyle({ variant: 'outlined', color: 'success', theme }),
+        outlinedInfo: getColorStyle({ variant: 'outlined', color: 'info', theme }),
+        outlinedWarning: getColorStyle({ variant: 'outlined', color: 'warning', theme }),
+        textPrimary: getColorStyle({ variant: 'text', color: 'primary', theme }),
+        textSecondary: getColorStyle({ variant: 'text', color: 'secondary', theme }),
+        textError: getColorStyle({ variant: 'text', color: 'error', theme }),
+        textSuccess: getColorStyle({ variant: 'text', color: 'success', theme }),
+        textInfo: getColorStyle({ variant: 'text', color: 'info', theme }),
+        textWarning: getColorStyle({ variant: 'text', color: 'warning', theme }),
+        sizeExtraSmall: {
+          minWidth: 56,
+          fontSize: '0.625rem',
+          padding: '2px 8px'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/ButtonBase.js
+++ b/src/themes/overrides/ButtonBase.js
@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function ButtonBase() {
+  return {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true
+      }
+    }
+  };
+}
--- a/src/themes/overrides/ButtonGroup.js
+++ b/src/themes/overrides/ButtonGroup.js
@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - BUTTON GROUP ||============================== //
+
+export default function ButtonGroup() {
+  return {
+    MuiButtonGroup: {
+      defaultProps: {
+        disableRipple: true
+      }
+    }
+  };
+}
--- a/src/themes/overrides/CardContent.js
+++ b/src/themes/overrides/CardContent.js
@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - CARD CONTENT ||============================== //
+
+export default function CardContent() {
+  return {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: 20,
+          '&:last-child': {
+            paddingBottom: 20
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Checkbox.js
+++ b/src/themes/overrides/Checkbox.js
@@ -0,0 +1,126 @@
+// material-ui
+import { Box } from '@mui/material';
+
+// project import
+import getColors from 'utils/getColors';
+
+// assets
+import { CheckSquareFilled, MinusSquareFilled } from '@ant-design/icons';
+
+// ==============================|| RADIO - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark } = colors;
+
+  return {
+    '&:hover': {
+      backgroundColor: lighter,
+      '& .icon': {
+        borderColor: main
+      }
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4
+    }
+  };
+}
+
+// ==============================|| CHECKBOX - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { size: 16, fontSize: 1, position: 1 };
+    case 'large':
+      return { size: 24, fontSize: 1.6, position: 2 };
+    case 'medium':
+    default:
+      return { size: 20, fontSize: 1.35, position: 2 };
+  }
+}
+
+// ==============================|| CHECKBOX - STYLE ||============================== //
+
+function checkboxStyle(size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .filled': {
+        fontSize: `${sizes.fontSize}rem`,
+        top: -sizes.position,
+        left: -sizes.position
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Checkbox(theme) {
+  const { palette } = theme;
+
+  return {
+    MuiCheckbox: {
+      defaultProps: {
+        className: 'size-small',
+        icon: <Box className="icon" sx={{ width: 16, height: 16, border: '1px solid', borderColor: 'inherit', borderRadius: 0.25 }} />,
+        checkedIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+              position: 'relative'
+            }}
+          >
+            <CheckSquareFilled className="filled" style={{ position: 'absolute' }} />
+          </Box>
+        ),
+        indeterminateIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: 0.25,
+              position: 'relative'
+            }}
+          >
+            <MinusSquareFilled className="filled" style={{ position: 'absolute' }} />
+          </Box>
+        )
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          color: palette.secondary[300],
+          '&.size-small': {
+            ...checkboxStyle('small')
+          },
+          '&.size-medium': {
+            ...checkboxStyle('medium')
+          },
+          '&.size-large': {
+            ...checkboxStyle('large')
+          }
+        },
+        colorPrimary: getColorStyle({ color: 'primary', theme }),
+        colorSecondary: getColorStyle({ color: 'secondary', theme }),
+        colorSuccess: getColorStyle({ color: 'success', theme }),
+        colorWarning: getColorStyle({ color: 'warning', theme }),
+        colorInfo: getColorStyle({ color: 'info', theme }),
+        colorError: getColorStyle({ color: 'error', theme })
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Chip.js
+++ b/src/themes/overrides/Chip.js
@@ -0,0 +1,80 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| CHIP - COLORS ||============================== //
+
+function getColor({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { dark } = colors;
+
+  return {
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    }
+  };
+}
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { light, lighter, main } = colors;
+
+  return {
+    color: main,
+    backgroundColor: lighter,
+    borderColor: light,
+    '& .MuiChip-deleteIcon': {
+      color: main,
+      '&:hover': {
+        color: light
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHIP ||============================== //
+
+export default function Chip(theme) {
+  const defaultLightChip = getColorStyle({ color: 'secondary', theme });
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          '&:active': {
+            boxShadow: 'none'
+          },
+          '&.MuiChip-colorPrimary': getColor({ color: 'primary', theme }),
+          '&.MuiChip-colorSecondary': getColor({ color: 'secondary', theme }),
+          '&.MuiChip-colorError': getColor({ color: 'error', theme }),
+          '&.MuiChip-colorInfo': getColor({ color: 'info', theme }),
+          '&.MuiChip-colorSuccess': getColor({ color: 'success', theme }),
+          '&.MuiChip-colorWarning': getColor({ color: 'warning', theme })
+        },
+        sizeLarge: {
+          fontSize: '1rem',
+          height: 40
+        },
+        light: {
+          ...defaultLightChip,
+          '&.MuiChip-lightPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiChip-lightSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiChip-lightError': getColorStyle({ color: 'error', theme }),
+          '&.MuiChip-lightInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiChip-lightSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiChip-lightWarning': getColorStyle({ color: 'warning', theme })
+        },
+        combined: {
+          border: '1px solid',
+          ...defaultLightChip,
+          '&.MuiChip-combinedPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiChip-combinedSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiChip-combinedError': getColorStyle({ color: 'error', theme }),
+          '&.MuiChip-combinedInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiChip-combinedSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiChip-combinedWarning': getColorStyle({ color: 'warning', theme })
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Dialog.js
+++ b/src/themes/overrides/Dialog.js
@@ -0,0 +1,18 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// ==============================|| OVERRIDES - DIALOG ||============================== //
+
+export default function Dialog() {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiBackdrop-root': {
+            backgroundColor: alpha('#000', 0.7)
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/DialogContentText.js
+++ b/src/themes/overrides/DialogContentText.js
@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function DialogContentText(theme) {
+  return {
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/DialogTitle.js
+++ b/src/themes/overrides/DialogTitle.js
@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG TITLE ||============================== //
+
+export default function DialogTitle() {
+  return {
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: '1rem',
+          fontWeight: 500
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Fab.js
+++ b/src/themes/overrides/Fab.js
@@ -0,0 +1,82 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project import
+import getColors from 'utils/getColors';
+import getShadow from 'utils/getShadow';
+
+// ==============================|| FAB BUTTON - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { main, dark, contrastText } = colors;
+
+  const buttonShadow = `${color}Button`;
+  const shadows = getShadow(theme, buttonShadow);
+
+  return {
+    color: contrastText,
+    backgroundColor: main,
+    boxShadow: shadows,
+    '&:hover': {
+      boxShadow: 'none',
+      backgroundColor: dark
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    },
+    '&::after': {
+      borderRadius: '50px',
+      boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`
+    },
+    '&:active::after': {
+      borderRadius: '50px',
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - FAB BUTTON ||============================== //
+
+export default function Button(theme) {
+  return {
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.grey[200]
+          },
+          '&.MuiFab-primary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiFab-secondary': getColorStyle({ color: 'secondary', theme }),
+          '&.Mui-error': getColorStyle({ color: 'error', theme }),
+          '&.MuiFab-success': getColorStyle({ color: 'success', theme }),
+          '&.MuiFab-info': getColorStyle({ color: 'info', theme }),
+          '&.MuiFab-warning': getColorStyle({ color: 'warning', theme }),
+          '&::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 4,
+            opacity: 0,
+            transition: 'all 0.5s'
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 4,
+            left: 0,
+            top: 0,
+            opacity: 1,
+            transition: '0s'
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/IconButton.js
+++ b/src/themes/overrides/IconButton.js
@@ -0,0 +1,28 @@
+// ==============================|| OVERRIDES - ICON BUTTON ||============================== //
+
+export default function IconButton(theme) {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4
+        },
+        sizeLarge: {
+          width: theme.spacing(5.5),
+          height: theme.spacing(5.5),
+          fontSize: '1.25rem'
+        },
+        sizeMedium: {
+          width: theme.spacing(4.5),
+          height: theme.spacing(4.5),
+          fontSize: '1rem'
+        },
+        sizeSmall: {
+          width: theme.spacing(3.75),
+          height: theme.spacing(3.75),
+          fontSize: '0.75rem'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/InputBase.js
+++ b/src/themes/overrides/InputBase.js
@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - INPUT BASE ||============================== //
+
+export default function InputBase() {
+  return {
+    MuiInputBase: {
+      styleOverrides: {
+        sizeSmall: {
+          fontSize: '0.75rem'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/InputLabel.js
+++ b/src/themes/overrides/InputLabel.js
@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - INPUT LABEL ||============================== //
+
+export default function InputLabel(theme) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.grey[600]
+        },
+        outlined: {
+          lineHeight: '0.8em',
+          '&.MuiInputLabel-sizeSmall': {
+            lineHeight: '1em'
+          },
+          '&.MuiInputLabel-shrink': {
+            background: theme.palette.background.paper,
+            padding: '0 8px',
+            marginLeft: -6,
+            lineHeight: '1.4375em'
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/LinearProgress.js
+++ b/src/themes/overrides/LinearProgress.js
@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LINER PROGRESS ||============================== //
+
+export default function LinearProgress() {
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: 6,
+          borderRadius: 100
+        },
+        bar: {
+          borderRadius: 100
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Link.js
+++ b/src/themes/overrides/Link.js
@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - LINK ||============================== //
+
+export default function Link() {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: 'hover'
+      }
+    }
+  };
+}
--- a/src/themes/overrides/ListItemButton.js
+++ b/src/themes/overrides/ListItemButton.js
@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemButton(theme) {
+  return {
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            color: theme.palette.primary.main,
+            '& .MuiListItemIcon-root': {
+              color: theme.palette.primary.main
+            }
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/ListItemIcon.js
+++ b/src/themes/overrides/ListItemIcon.js
@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemIcon(theme) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 24,
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/LoadingButton.js
+++ b/src/themes/overrides/LoadingButton.js
@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LOADING BUTTON ||============================== //
+
+export default function LoadingButton() {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          padding: '6px 16px',
+          '&.MuiLoadingButton-loading': {
+            opacity: 0.6,
+            textShadow: 'none'
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/OutlinedInput.js
+++ b/src/themes/overrides/OutlinedInput.js
@@ -0,0 +1,59 @@
+// project import
+import { ThemeMode } from 'config';
+import getColors from 'utils/getColors';
+import getShadow from 'utils/getShadow';
+
+// ==============================|| OVERRIDES - INPUT BORDER & SHADOWS ||============================== //
+
+function getColor({ variant, theme }) {
+  const colors = getColors(theme, variant);
+  const { light } = colors;
+
+  const shadows = getShadow(theme, `${variant}`);
+
+  return {
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: light
+    },
+    '&.Mui-focused': {
+      boxShadow: shadows,
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${light}`
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - OUTLINED INPUT ||============================== //
+
+export default function OutlinedInput(theme) {
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          padding: '10.5px 14px 10.5px 12px'
+        },
+        notchedOutline: {
+          borderColor: theme.palette.mode === ThemeMode.DARK ? theme.palette.grey[200] : theme.palette.grey[300]
+        },
+        root: {
+          ...getColor({ variant: 'primary', theme }),
+          '&.Mui-error': {
+            ...getColor({ variant: 'error', theme })
+          }
+        },
+        inputSizeSmall: {
+          padding: '7.5px 8px 7.5px 12px'
+        },
+        inputMultiline: {
+          padding: 0
+        },
+        colorSecondary: getColor({ variant: 'secondary', theme }),
+        colorError: getColor({ variant: 'error', theme }),
+        colorWarning: getColor({ variant: 'warning', theme }),
+        colorInfo: getColor({ variant: 'info', theme }),
+        colorSuccess: getColor({ variant: 'success', theme })
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Pagination.js
+++ b/src/themes/overrides/Pagination.js
@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - PAGINATION ||============================== //
+
+export default function Pagination() {
+  return {
+    MuiPagination: {
+      defaultProps: {
+        shape: 'rounded'
+      }
+    }
+  };
+}
--- a/src/themes/overrides/PaginationItem.js
+++ b/src/themes/overrides/PaginationItem.js
@@ -0,0 +1,118 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| PAGINATION ITEM - COLORS ||============================== //
+
+function getColorStyle({ variant, color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, light, dark, main, contrastText } = colors;
+
+  const focusStyle = {
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+      ...(variant === 'text' && {
+        backgroundColor: theme.palette.background.paper
+      })
+    }
+  };
+
+  switch (variant) {
+    case 'combined':
+    case 'contained':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        '&:hover': {
+          backgroundColor: light
+        },
+        ...focusStyle
+      };
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          backgroundColor: lighter,
+          borderColor: light
+        },
+        ...focusStyle
+      };
+    case 'text':
+    default:
+      return {
+        color: main,
+        '&:hover': {
+          backgroundColor: main,
+          color: lighter
+        },
+        ...focusStyle
+      };
+  }
+}
+
+// ==============================|| OVERRIDES - PAGINATION ITEM ||============================== //
+
+export default function PaginationItem(theme) {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2
+          }
+        },
+        text: {
+          '&.Mui-selected': {
+            backgroundColor: 'transparent',
+            fontSize: '1rem',
+            fontWeight: 500,
+            '&.MuiPaginationItem-textPrimary': getColorStyle({ variant: 'text', color: 'primary', theme }),
+            '&.MuiPaginationItem-textSecondary': getColorStyle({ variant: 'text', color: 'secondary', theme }),
+            '&.MuiPaginationItem-textError': getColorStyle({ variant: 'text', color: 'error', theme }),
+            '&.MuiPaginationItem-textSuccess': getColorStyle({ variant: 'text', color: 'success', theme }),
+            '&.MuiPaginationItem-textInfo': getColorStyle({ variant: 'text', color: 'info', theme }),
+            '&.MuiPaginationItem-textWarning': getColorStyle({ variant: 'text', color: 'warning', theme })
+          }
+        },
+        contained: {
+          '&.Mui-selected': {
+            '&.MuiPaginationItem-containedPrimary': getColorStyle({ variant: 'contained', color: 'primary', theme }),
+            '&.MuiPaginationItem-containedSecondary': getColorStyle({ variant: 'contained', color: 'secondary', theme }),
+            '&.MuiPaginationItem-containedError': getColorStyle({ variant: 'contained', color: 'error', theme }),
+            '&.MuiPaginationItem-containedSuccess': getColorStyle({ variant: 'contained', color: 'success', theme }),
+            '&.MuiPaginationItem-containedInfo': getColorStyle({ variant: 'contained', color: 'info', theme }),
+            '&.MuiPaginationItem-containedWarning': getColorStyle({ variant: 'contained', color: 'warning', theme })
+          }
+        },
+        combined: {
+          border: '1px solid',
+          borderColor: theme.palette.divider,
+          '&.MuiPaginationItem-ellipsis': {
+            border: 'none'
+          },
+          '&.Mui-selected': {
+            '&.MuiPaginationItem-combinedPrimary': getColorStyle({ variant: 'combined', color: 'primary', theme }),
+            '&.MuiPaginationItem-combinedSecondary': getColorStyle({ variant: 'combined', color: 'secondary', theme }),
+            '&.MuiPaginationItem-combinedError': getColorStyle({ variant: 'combined', color: 'error', theme }),
+            '&.MuiPaginationItem-combinedSuccess': getColorStyle({ variant: 'combined', color: 'success', theme }),
+            '&.MuiPaginationItem-combinedInfo': getColorStyle({ variant: 'combined', color: 'info', theme }),
+            '&.MuiPaginationItem-combinedWarning': getColorStyle({ variant: 'combined', color: 'warning', theme })
+          }
+        },
+        outlined: {
+          borderColor: theme.palette.divider,
+          '&.Mui-selected': {
+            backgroundColor: 'transparent',
+            '&.MuiPaginationItem-outlinedPrimary': getColorStyle({ variant: 'outlined', color: 'primary', theme }),
+            '&.MuiPaginationItem-outlinedSecondary': getColorStyle({ variant: 'outlined', color: 'secondary', theme }),
+            '&.MuiPaginationItem-outlinedError': getColorStyle({ variant: 'outlined', color: 'error', theme }),
+            '&.MuiPaginationItem-outlinedSuccess': getColorStyle({ variant: 'outlined', color: 'success', theme }),
+            '&.MuiPaginationItem-outlinedInfo': getColorStyle({ variant: 'outlined', color: 'info', theme }),
+            '&.MuiPaginationItem-outlinedWarning': getColorStyle({ variant: 'outlined', color: 'warning', theme })
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Popover.js
+++ b/src/themes/overrides/Popover.js
@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function Popover(theme) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.z1
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Radio.js
+++ b/src/themes/overrides/Radio.js
@@ -0,0 +1,119 @@
+// material-ui
+import { Box } from '@mui/material';
+
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| RADIO - COLORS ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark } = colors;
+
+  return {
+    '& .dot': {
+      backgroundColor: main
+    },
+    '&:hover': {
+      backgroundColor: lighter
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4
+    }
+  };
+}
+
+// ==============================|| CHECKBOX - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { size: 16, dotSize: 8, position: 3 };
+    case 'large':
+      return { size: 24, dotSize: 12, position: 5 };
+    case 'medium':
+    default:
+      return { size: 20, dotSize: 10, position: 4 };
+  }
+}
+
+// ==============================|| CHECKBOX - STYLE ||============================== //
+
+function radioStyle(size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .dot': {
+        width: sizes.dotSize,
+        height: sizes.dotSize,
+        top: sizes.position,
+        left: sizes.position
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Radio(theme) {
+  const { palette } = theme;
+
+  return {
+    MuiRadio: {
+      defaultProps: {
+        className: 'size-small',
+        icon: <Box className="icon" sx={{ width: 16, height: 16, border: '1px solid', borderColor: 'inherit', borderRadius: '50%' }} />,
+        checkedIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: '50%',
+              position: 'relative'
+            }}
+          >
+            <Box
+              className="dot"
+              sx={{
+                width: 8,
+                height: 8,
+                backgroundColor: 'inherit',
+                borderRadius: '50%',
+                position: 'absolute',
+                top: 3,
+                left: 3
+              }}
+            />
+          </Box>
+        )
+      },
+      styleOverrides: {
+        root: {
+          color: palette.secondary[300],
+          '&.size-small': {
+            ...radioStyle('small')
+          },
+          '&.size-medium': {
+            ...radioStyle('medium')
+          },
+          '&.size-large': {
+            ...radioStyle('large')
+          }
+        },
+        colorPrimary: getColorStyle({ color: 'primary', theme }),
+        colorSecondary: getColorStyle({ color: 'secondary', theme }),
+        colorSuccess: getColorStyle({ color: 'success', theme }),
+        colorWarning: getColorStyle({ color: 'warning', theme }),
+        colorInfo: getColorStyle({ color: 'info', theme }),
+        colorError: getColorStyle({ color: 'error', theme })
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Slider.js
+++ b/src/themes/overrides/Slider.js
@@ -0,0 +1,69 @@
+// project import
+import getColors from 'utils/getColors';
+
+// ==============================|| OVERRIDES - SLIDER ||============================== //
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color);
+  const { main } = colors;
+
+  return {
+    border: `2px solid ${main}`
+  };
+}
+
+export default function Slider(theme) {
+  return {
+    MuiSlider: {
+      styleOverrides: {
+        track: {
+          height: '1px'
+        },
+        thumb: {
+          width: 14,
+          height: 14,
+          border: `2px solid ${theme.palette.primary.main}`,
+          backgroundColor: theme.palette.background.paper,
+          '&.MuiSlider-thumbColorPrimary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiSlider-thumbColorSecondary': getColorStyle({ color: 'secondary', theme }),
+          '&.MuiSlider-thumbColorSuccess': getColorStyle({ color: 'success', theme }),
+          '&.MuiSlider-thumbColorWarning': getColorStyle({ color: 'warning', theme }),
+          '&.MuiSlider-thumbColorInfo': getColorStyle({ color: 'info', theme }),
+          '&.MuiSlider-thumbColorError': getColorStyle({ color: 'error', theme })
+        },
+        mark: {
+          width: 4,
+          height: 4,
+          borderRadius: '50%',
+          border: `1px solid ${theme.palette.secondary.light}`,
+          backgroundColor: theme.palette.background.paper,
+          '&.MuiSlider-markActive': {
+            opacity: 1,
+            borderColor: 'inherit',
+            borderWidth: 2
+          }
+        },
+        rail: {
+          color: theme.palette.secondary.light
+        },
+        root: {
+          '&.Mui-disabled': {
+            '.MuiSlider-rail': {
+              opacity: 0.25
+            },
+            '.MuiSlider-track': {
+              color: theme.palette.secondary.lighter
+            },
+            '.MuiSlider-thumb': {
+              border: `2px solid ${theme.palette.secondary.lighter}`
+            }
+          }
+        },
+        valueLabel: {
+          backgroundColor: theme.palette.grey[600],
+          color: theme.palette.grey[0]
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Switch.js
+++ b/src/themes/overrides/Switch.js
@@ -0,0 +1,88 @@
+// ==============================|| SWITCH - SIZE STYLE ||============================== //
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { width: 28, height: 16, base: 12, thumb: 10, trackRadius: 8 };
+    case 'large':
+      return { width: 60, height: 28, base: 32, thumb: 22, trackRadius: 24 };
+    case 'medium':
+    default:
+      return { width: 44, height: 22, base: 22, thumb: 16, trackRadius: 16 };
+  }
+}
+
+function switchStyle(theme, size) {
+  const sizes = getSizeStyle(size);
+
+  return {
+    width: sizes.width,
+    height: sizes.height,
+    '& .MuiSwitch-switchBase': {
+      padding: 3,
+      '&.Mui-checked': {
+        transform: `translateX(${sizes.base}px)`
+      }
+    },
+    '& .MuiSwitch-thumb': {
+      width: sizes.thumb,
+      height: sizes.thumb
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: sizes.trackRadius
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Switch(theme) {
+  return {
+    MuiSwitch: {
+      styleOverrides: {
+        track: {
+          opacity: 1,
+          backgroundColor: theme.palette.secondary[400],
+          boxSizing: 'border-box'
+        },
+        thumb: {
+          borderRadius: '50%',
+          transition: theme.transitions.create(['width'], {
+            duration: 200
+          })
+        },
+        switchBase: {
+          '&.Mui-checked': {
+            color: '#fff',
+            '& + .MuiSwitch-track': {
+              opacity: 1
+            },
+            '&.Mui-disabled': {
+              color: theme.palette.background.paper
+            }
+          },
+          '&.Mui-disabled': {
+            color: theme.palette.background.paper,
+            '+.MuiSwitch-track': {
+              opacity: 0.3
+            }
+          }
+        },
+        root: {
+          color: theme.palette.text.primary,
+          padding: 0,
+          margin: 8,
+          display: 'flex',
+          '& ~ .MuiFormControlLabel-label': {
+            margin: 6
+          },
+          ...switchStyle(theme, 'medium')
+        },
+        sizeLarge: { ...switchStyle(theme, 'large') },
+        sizeSmall: {
+          ...switchStyle(theme, 'small')
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Tab.js
+++ b/src/themes/overrides/Tab.js
@@ -0,0 +1,24 @@
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Tab(theme) {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          minHeight: 46,
+          color: theme.palette.text.primary,
+          borderRadius: 4,
+          '&:hover': {
+            backgroundColor: theme.palette.primary.lighter + 60,
+            color: theme.palette.primary.main
+          },
+          '&:focus-visible': {
+            borderRadius: 4,
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: -3
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TableBody.js
+++ b/src/themes/overrides/TableBody.js
@@ -0,0 +1,27 @@
+// ==============================|| OVERRIDES - TABLE ROW ||============================== //
+
+export default function TableBody(theme) {
+  const hoverStyle = {
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.lighter
+    }
+  };
+
+  return {
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          '&.striped .MuiTableRow-root': {
+            '&:nth-of-type(even)': {
+              backgroundColor: theme.palette.grey[50]
+            },
+            ...hoverStyle
+          },
+          '& .MuiTableRow-root': {
+            ...hoverStyle
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TableCell.js
+++ b/src/themes/overrides/TableCell.js
@@ -0,0 +1,44 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableCell(theme) {
+  const commonCell = {
+    '&:not(:last-of-type)': {
+      position: 'relative',
+      '&:after': {
+        position: 'absolute',
+        content: '""',
+        backgroundColor: theme.palette.divider,
+        width: 1,
+        height: 'calc(100% - 30px)',
+        right: 0,
+        top: 16
+      }
+    }
+  };
+
+  return {
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          padding: 12,
+          borderColor: theme.palette.divider
+        },
+        sizeSmall: {
+          padding: 8
+        },
+        head: {
+          fontSize: '0.75rem',
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          ...commonCell
+        },
+        footer: {
+          fontSize: '0.75rem',
+          textTransform: 'uppercase',
+          ...commonCell
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TableFooter.js
+++ b/src/themes/overrides/TableFooter.js
@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableFooter(theme) {
+  return {
+    MuiTableFooter: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[50],
+          borderTop: `2px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.palette.divider}`
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TableHead.js
+++ b/src/themes/overrides/TableHead.js
@@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableHead(theme) {
+  return {
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.grey[50],
+          borderTop: `1px solid ${theme.palette.divider}`,
+          borderBottom: `2px solid ${theme.palette.divider}`
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TablePagination.js
+++ b/src/themes/overrides/TablePagination.js
@@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - TABLE PAGINATION ||============================== //
+
+export default function TablePagination() {
+  return {
+    MuiTablePagination: {
+      styleOverrides: {
+        selectLabel: {
+          fontSize: '0.875rem'
+        },
+        displayedRows: {
+          fontSize: '0.875rem'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TableRow.js
+++ b/src/themes/overrides/TableRow.js
@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - TABLE ROW ||============================== //
+
+export default function TableRow() {
+  return {
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&:last-of-type': {
+            '& .MuiTableCell-root': {
+              borderBottom: 'none'
+            }
+          },
+          '& .MuiTableCell-root': {
+            '&:last-of-type': {
+              paddingRight: 24
+            },
+            '&:first-of-type': {
+              paddingLeft: 24
+            }
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Tabs.js
+++ b/src/themes/overrides/Tabs.js
@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TABS ||============================== //
+
+export default function Tabs() {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        vertical: {
+          overflow: 'visible'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/ToggleButton.js
+++ b/src/themes/overrides/ToggleButton.js
@@ -0,0 +1,20 @@
+// ==============================|| OVERRIDES - TOGGLE BUTTON ||============================== //
+
+export default function ToggleButton(theme) {
+  return {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            borderColor: theme.palette.divider,
+            color: theme.palette.text.disabled
+          },
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Tooltip.js
+++ b/src/themes/overrides/Tooltip.js
@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TOOLTIP ||============================== //
+
+export default function Tooltip(theme) {
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.palette.background.paper
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/TreeItem.js
+++ b/src/themes/overrides/TreeItem.js
@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - TREE ITEM ||============================== //
+
+export default function TreeItem() {
+  return {
+    MuiTreeItem: {
+      styleOverrides: {
+        content: {
+          padding: 8
+        },
+        iconContainer: {
+          '& svg': {
+            fontSize: '0.625rem'
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/Typography.js
+++ b/src/themes/overrides/Typography.js
@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== //
+
+export default function Typography() {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        gutterBottom: {
+          marginBottom: 12
+        }
+      }
+    }
+  };
+}
--- a/src/themes/overrides/index.js
+++ b/src/themes/overrides/index.js
@@ -0,0 +1,99 @@
+// third-party
+import { merge } from 'lodash';
+
+// project import
+import Accordion from './Accordion';
+import AccordionDetails from './AccordionDetails';
+import AccordionSummary from './AccordionSummary';
+import Alert from './Alert';
+import AlertTitle from './AlertTitle';
+import Autocomplete from './Autocomplete';
+import Badge from './Badge';
+import Button from './Button';
+import ButtonBase from './ButtonBase';
+import ButtonGroup from './ButtonGroup';
+import CardContent from './CardContent';
+import Checkbox from './Checkbox';
+import Chip from './Chip';
+import Dialog from './Dialog';
+import DialogContentText from './DialogContentText';
+import DialogTitle from './DialogTitle';
+import Fab from './Fab';
+import IconButton from './IconButton';
+import InputBase from './InputBase';
+import InputLabel from './InputLabel';
+import LinearProgress from './LinearProgress';
+import Link from './Link';
+import ListItemButton from './ListItemButton';
+import ListItemIcon from './ListItemIcon';
+import LoadingButton from './LoadingButton';
+import OutlinedInput from './OutlinedInput';
+import Pagination from './Pagination';
+import PaginationItem from './PaginationItem';
+import Popover from './Popover';
+import Radio from './Radio';
+import Slider from './Slider';
+import Switch from './Switch';
+import Tab from './Tab';
+import TableBody from './TableBody';
+import TableCell from './TableCell';
+import TableFooter from './TableFooter';
+import TableHead from './TableHead';
+import TablePagination from './TablePagination';
+import TableRow from './TableRow';
+import Tabs from './Tabs';
+import ToggleButton from './ToggleButton';
+import Tooltip from './Tooltip';
+import TreeItem from './TreeItem';
+import Typography from './Typography';
+
+// ==============================|| OVERRIDES - MAIN ||============================== //
+
+export default function ComponentsOverrides(theme) {
+  return merge(
+    Accordion(theme),
+    AccordionDetails(theme),
+    AccordionSummary(theme),
+    Alert(theme),
+    AlertTitle(),
+    Autocomplete(),
+    Badge(theme),
+    Button(theme),
+    ButtonBase(),
+    ButtonGroup(),
+    CardContent(),
+    Checkbox(theme),
+    Chip(theme),
+    Dialog(),
+    DialogContentText(theme),
+    DialogTitle(),
+    Fab(theme),
+    IconButton(theme),
+    InputBase(),
+    InputLabel(theme),
+    LinearProgress(),
+    Link(),
+    ListItemButton(theme),
+    ListItemIcon(theme),
+    LoadingButton(),
+    OutlinedInput(theme),
+    Pagination(),
+    PaginationItem(theme),
+    Popover(theme),
+    Radio(theme),
+    Slider(theme),
+    Switch(theme),
+    Tab(theme),
+    TableBody(theme),
+    TableCell(theme),
+    TableFooter(theme),
+    TableHead(theme),
+    TablePagination(),
+    TableRow(),
+    Tabs(),
+    ToggleButton(theme),
+    Tooltip(theme),
+    TreeItem(),
+    Typography()
+  );
+}
--- a/src/themes/palette.js
+++ b/src/themes/palette.js
@@ -0,0 +1,67 @@
+// material-ui
+import { alpha, createTheme } from '@mui/material/styles';
+
+// third-party
+import { presetDarkPalettes, presetPalettes } from '@ant-design/colors';
+
+// project import
+import ThemeOption from './theme';
+import { ThemeMode } from 'config';
+
+// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
+
+const Palette = (mode, presetColor) => {
+  const colors = mode === ThemeMode.DARK ? presetDarkPalettes : presetPalettes;
+
+  let greyPrimary = [
+    '#ffffff',
+    '#fafafa',
+    '#f5f5f5',
+    '#f0f0f0',
+    '#d9d9d9',
+    '#bfbfbf',
+    '#8c8c8c',
+    '#595959',
+    '#262626',
+    '#141414',
+    '#000000'
+  ];
+  let greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
+  let greyConstant = ['#fafafb', '#e6ebf1'];
+
+  if (mode === ThemeMode.DARK) {
+    greyPrimary = ['#000000', '#141414', '#1e1e1e', '#595959', '#8c8c8c', '#bfbfbf', '#d9d9d9', '#f0f0f0', '#f5f5f5', '#fafafa', '#ffffff'];
+    // greyPrimary.reverse();
+    greyAscent = ['#fafafa', '#bfbfbf', '#434343', '#1f1f1f'];
+    greyConstant = ['#121212', '#d3d8db'];
+  }
+  colors.grey = [...greyPrimary, ...greyAscent, ...greyConstant];
+
+  const paletteColor = ThemeOption(colors, presetColor, mode);
+
+  return createTheme({
+    palette: {
+      mode,
+      common: {
+        black: '#000',
+        white: '#fff'
+      },
+      ...paletteColor,
+      text: {
+        primary: mode === ThemeMode.DARK ? alpha(paletteColor.grey[900], 0.87) : paletteColor.grey[700],
+        secondary: mode === ThemeMode.DARK ? alpha(paletteColor.grey[900], 0.45) : paletteColor.grey[500],
+        disabled: mode === ThemeMode.DARK ? alpha(paletteColor.grey[900], 0.1) : paletteColor.grey[400]
+      },
+      action: {
+        disabled: paletteColor.grey[300]
+      },
+      divider: mode === ThemeMode.DARK ? alpha(paletteColor.grey[900], 0.05) : paletteColor.grey[200],
+      background: {
+        paper: mode === ThemeMode.DARK ? paletteColor.grey[100] : paletteColor.grey[0],
+        default: paletteColor.grey.A50
+      }
+    }
+  });
+};
+
+export default Palette;
--- a/src/themes/shadows.js
+++ b/src/themes/shadows.js
@@ -0,0 +1,33 @@
+// material-ui
+import { alpha } from '@mui/material/styles';
+
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| DEFAULT THEME - CUSTOM SHADOWS  ||============================== //
+
+const CustomShadows = (theme) => ({
+  // z1: `0px 2px 8px rgba(0, 0, 0, 0.15)`,
+  button: theme.palette.mode === ThemeMode.DARK ? `0 2px 0 rgb(0 0 0 / 5%)` : `0 2px #0000000b`,
+  text: `0 -1px 0 rgb(0 0 0 / 12%)`,
+  z1:
+    theme.palette.mode === ThemeMode.DARK
+      ? `0px 1px 1px rgb(0 0 0 / 14%), 0px 2px 1px rgb(0 0 0 / 12%), 0px 1px 3px rgb(0 0 0 / 20%)`
+      : `0px 1px 4px ${alpha(theme.palette.grey[900], 0.08)}`,
+  primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}`,
+  secondary: `0 0 0 2px ${alpha(theme.palette.secondary.main, 0.2)}`,
+  error: `0 0 0 2px ${alpha(theme.palette.error.main, 0.2)}`,
+  warning: `0 0 0 2px ${alpha(theme.palette.warning.main, 0.2)}`,
+  info: `0 0 0 2px ${alpha(theme.palette.info.main, 0.2)}`,
+  success: `0 0 0 2px ${alpha(theme.palette.success.main, 0.2)}`,
+  grey: `0 0 0 2px ${alpha(theme.palette.grey[500], 0.2)}`,
+  primaryButton: `0 14px 12px ${alpha(theme.palette.primary.main, 0.2)}`,
+  secondaryButton: `0 14px 12px ${alpha(theme.palette.secondary.main, 0.2)}`,
+  errorButton: `0 14px 12px ${alpha(theme.palette.error.main, 0.2)}`,
+  warningButton: `0 14px 12px ${alpha(theme.palette.warning.main, 0.2)}`,
+  infoButton: `0 14px 12px ${alpha(theme.palette.info.main, 0.2)}`,
+  successButton: `0 14px 12px ${alpha(theme.palette.success.main, 0.2)}`,
+  greyButton: `0 14px 12px ${alpha(theme.palette.grey[500], 0.2)}`
+});
+
+export default CustomShadows;
--- a/src/themes/theme/default.js
+++ b/src/themes/theme/default.js
@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types';
+
+// ==============================|| PRESET THEME - DEFAULT ||============================== //
+
+const Default = (colors) => {
+  const { red, gold, cyan, green, grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  return {
+    // primary: {
+    //   lighter: blue[0],
+    //   100: blue[1],
+    //   200: blue[2],
+    //   light: blue[3],
+    //   400: blue[4],
+    //   main: blue[5],
+    //   dark: blue[6],
+    //   700: blue[7],
+    //   darker: blue[8],
+    //   900: blue[9],
+    //   contrastText
+    // },
+    primary: {
+      lighter: '#E8D9EF',
+      100: '#CBA7DA',
+      200: '#AE76C4',
+      light: '#9255AB',
+      400: '#9255AB',
+      main: '#662582',
+      dark: '#4D1C61',
+      700: '#3A1549',
+      darker: '#260E30',
+      900: '#17081D',
+      contrastText: '#FFFFFF'
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: red[0],
+      light: red[2],
+      main: red[4],
+      dark: red[7],
+      darker: red[9],
+      contrastText
+    },
+    warning: {
+      lighter: gold[0],
+      light: gold[3],
+      main: gold[5],
+      dark: gold[7],
+      darker: gold[9],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: cyan[0],
+      light: cyan[3],
+      main: cyan[5],
+      dark: cyan[7],
+      darker: cyan[9],
+      contrastText
+    },
+    success: {
+      lighter: green[0],
+      100: green[1],
+      light: green[3],
+      400: green[4],
+      main: green[5],
+      600: green[6],
+      dark: green[7],
+      darker: green[9],
+      contrastText
+    },
+    chip: {
+      accept: '#5d4037',
+      arrive: '#009688',
+      active: '#880e4f'
+    },
+    grey: greyColors,
+    bg: {
+      main: '#E0E0E0',
+      light: '#fafafb',
+      line: '#E6EBF1'
+    }
+  };
+};
+
+Default.propTypes = {
+  colors: PropTypes.object
+};
+
+export default Default;
--- a/src/themes/theme/index.js
+++ b/src/themes/theme/index.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+// project import
+import Default from './default';
+import Theme1 from './theme1';
+import Theme2 from './theme2';
+import Theme3 from './theme3';
+import Theme4 from './theme4';
+import Theme5 from './theme5';
+import Theme6 from './theme6';
+import Theme7 from './theme7';
+import Theme8 from './theme8';
+
+// ==============================|| PRESET THEME - THEME SELECTOR ||============================== //
+
+const Theme = (colors, presetColor, mode) => {
+  switch (presetColor) {
+    case 'theme1':
+      return Theme1(colors, mode);
+    case 'theme2':
+      return Theme2(colors, mode);
+    case 'theme3':
+      return Theme3(colors, mode);
+    case 'theme4':
+      return Theme4(colors, mode);
+    case 'theme5':
+      return Theme5(colors, mode);
+    case 'theme6':
+      return Theme6(colors, mode);
+    case 'theme7':
+      return Theme7(colors, mode);
+    case 'theme8':
+      return Theme8(colors, mode);
+    default:
+      return Default(colors);
+      // return Theme8(colors, mode);
+  }
+};
+
+Theme.propTypes = {
+  colors: PropTypes.object,
+  presetColor: PropTypes.any
+};
+
+export default Theme;
--- a/src/themes/theme/theme1.js
+++ b/src/themes/theme/theme1.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Eva Design ||============================== //
+
+const Theme1 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#D6E4FF', '#D6E4FF', '#ADC8FF', '#84A9FF', '#6690FF', '#3366FF', '#254EDB', '#1939B7', '#102693', '#102693'];
+  let errorColors = ['#FFE7D3', '#FF805D', '#FF4528', '#DB271D', '#930C1A'];
+  let warningColors = ['#FFF6D0', '#FFCF4E', '#FFB814', '#DB970E', '#935B06'];
+  let infoColors = ['#DCF0FF', '#7EB9FF', '#549BFF', '#3D78DB', '#1A3D93'];
+  let successColors = ['#EAFCD4', '#8AE65B', '#58D62A', '#3DB81E', '#137C0D'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#1c2134', '#1f294d', '#243462', '#273e83', '#2c4db0', '#305bdd', '#567fe9', '#80a4f4', '#a9c5f8', '#d2e2fb'];
+    errorColors = ['#341d1b', '#b03725', '#dd3f27', '#e9664d', '#fbd6c9'];
+    warningColors = ['#342a1a', '#83631a', '#dda116', '#e9ba3a', '#fbefb5'];
+    infoColors = ['#202734', '#416fb0', '#4c88dd', '#74a8e9', '#ecf4fb'];
+    successColors = ['#1f2e1c', '#449626', '#4fba28', '#74cf4d', '#e3fbd2'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme1;
--- a/src/themes/theme/theme2.js
+++ b/src/themes/theme/theme2.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - DEFAULT ||============================== //
+
+const Theme2 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#EEEDFC', '#D5D1F8', '#B9B2F3', '#9C93EE', '#877CEA', '#7265E6', '#6A5DE3', '#5F53DF', '#5549DB', '#4237D5'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#222130', '#2b2946', '#37335a', '#443e78', '#554ca0', '#655ac8', '#9186dd', '#5F53DF', '#c3baf4', '#efecfb'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme2;
--- a/src/themes/theme/theme3.js
+++ b/src/themes/theme/theme3.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Dark Green ||============================== //
+
+const Theme4 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#E6F3EC', '#84c297', '#5eb57d', '#3da866', '#1f9c53', '#068e44', '#006933', '#004222', '#001c0f', '#000000'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#1a231f', '#173123', '#174029', '#13502f', '#0e6737', '#0a7d3e', '#1f8f4e', '#3ba162', '#5cb07a', '#82bf95'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme4;
--- a/src/themes/theme/theme4.js
+++ b/src/themes/theme/theme4.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Theme4 Blue ||============================== //
+
+const Theme4 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#f0f6ff', '#edf4ff', '#bed3f7', '#8faeeb', '#6488de', '#3c64d0', '#2947ab', '#192f85', '#0d1b5e', '#070e38'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#1d212d', '#212841', '#273353', '#2c3e6e', '#324c92', '#385ab5', '#5d7dcb', '#89a7e1', '#b9cef0', '#e9f0fb'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme4;
--- a/src/themes/theme/theme5.js
+++ b/src/themes/theme/theme5.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Theme4 Blue ||============================== //
+
+const Theme5 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#fff4e6', '#ffdfb8', '#ffc98f', '#ffb066', '#ff943d', '#f27013', '#cc5206', '#a63a00', '#802800', '#591900'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#32221a', '#4a2b18', '#5e371b', '#7d4319', '#a85317', '#d26415', '#e9883a', '#f4a962', '#f8c48c', '#fbdbb5'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme5;
--- a/src/themes/theme/theme6.js
+++ b/src/themes/theme/theme6.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Theme4 Blue ||============================== //
+
+const Theme6 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#e1f0ef', '#c8e3e2', '#9ad6d6', '#71c6c9', '#4bb5bd', '#2aa1af', '#1a7b8a', '#0e5563', '#06323d', '#021217'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#1c2628', '#1d3539', '#22454a', '#23595f', '#26737c', '#288d99', '#47a6ad', '#6dbec0', '#96d0d0', '#c5dfde'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme6;
--- a/src/themes/theme/theme7.js
+++ b/src/themes/theme/theme7.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Theme7 Green ||============================== //
+
+const Theme7 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#d1e8d99c', '#8cdba9', '#63cf8e', '#3ec277', '#1db564', '#00a854', '#008245', '#005c34', '#003620', '#000f0a'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#1a2721', '#173728', '#15472e', '#115c36', '#0b7841', '#05934c', '#1da65d', '#3cba73', '#61ca8b', '#8ad7a6'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme7;
--- a/src/themes/theme/theme8.js
+++ b/src/themes/theme/theme8.js
@@ -0,0 +1,109 @@
+// project-imports
+import { ThemeMode } from 'config';
+
+// ==============================|| PRESET THEME - Theme8 ||============================== //
+
+const Theme8 = (colors, mode) => {
+  const { grey } = colors;
+  const greyColors = {
+    0: grey[0],
+    50: grey[1],
+    100: grey[2],
+    200: grey[3],
+    300: grey[4],
+    400: grey[5],
+    500: grey[6],
+    600: grey[7],
+    700: grey[8],
+    800: grey[9],
+    900: grey[10],
+    A50: grey[15],
+    A100: grey[11],
+    A200: grey[12],
+    A400: grey[13],
+    A700: grey[14],
+    A800: grey[16]
+  };
+  const contrastText = '#fff';
+
+  let primaryColors = ['#c1d6d066', '#81c9b9', '#5bbda9', '#38b09c', '#1aa391', '#009688', '#007069', '#004a47', '#002424', '#000000'];
+  let errorColors = ['#FDE8E7', '#F25E52', '#F04134', '#EE3B2F', '#E92A21'];
+  let warningColors = ['#FFF7E0', '#FFC926', '#FFBF00', '#FFB900', '#FFA900'];
+  let infoColors = ['#E0F4F5', '#26B0BA', '#00A2AE', '#009AA7', '#008694'];
+  let successColors = ['#E0F5EA', '#26B56E', '#00A854', '#00A04D', '#008D3A'];
+
+  if (mode === ThemeMode.DARK) {
+    primaryColors = ['#1a2524', '#173331', '#15423e', '#11544e', '#0b6c63', '#058478', '#1a9686', '#37a996', '#59b8a5', '#7fc6b6'];
+    errorColors = ['#321d1d', '#7d2e28', '#d13c31', '#e66859', '#f8baaf'];
+    warningColors = ['#342c1a', '#836611', '#dda705', '#e9bf28', '#f8e577'];
+    infoColors = ['#1a2628', '#11595f', '#058e98', '#1ea6aa', '#64cfcb'];
+    successColors = ['#1a2721', '#115c36', '#05934c', '#1da65d', '#61ca8b'];
+  }
+
+  return {
+    primary: {
+      lighter: primaryColors[0],
+      100: primaryColors[1],
+      200: primaryColors[2],
+      light: primaryColors[3],
+      400: primaryColors[4],
+      main: primaryColors[5],
+      dark: primaryColors[6],
+      700: primaryColors[7],
+      darker: primaryColors[8],
+      900: primaryColors[9],
+      contrastText
+    },
+    secondary: {
+      lighter: greyColors[100],
+      100: greyColors[100],
+      200: greyColors[200],
+      light: greyColors[300],
+      400: greyColors[400],
+      main: greyColors[500],
+      600: greyColors[600],
+      dark: greyColors[700],
+      800: greyColors[800],
+      darker: greyColors[900],
+      A100: greyColors[0],
+      A200: greyColors.A400,
+      A300: greyColors.A700,
+      contrastText: greyColors[0]
+    },
+    error: {
+      lighter: errorColors[0],
+      light: errorColors[1],
+      main: errorColors[2],
+      dark: errorColors[3],
+      darker: errorColors[4],
+      contrastText
+    },
+    warning: {
+      lighter: warningColors[0],
+      light: warningColors[1],
+      main: warningColors[2],
+      dark: warningColors[3],
+      darker: warningColors[4],
+      contrastText: greyColors[100]
+    },
+    info: {
+      lighter: infoColors[0],
+      light: infoColors[1],
+      main: infoColors[2],
+      dark: infoColors[3],
+      darker: infoColors[4],
+      contrastText
+    },
+    success: {
+      lighter: successColors[0],
+      light: successColors[1],
+      main: successColors[2],
+      dark: successColors[3],
+      darker: successColors[4],
+      contrastText
+    },
+    grey: greyColors
+  };
+};
+
+export default Theme8;
--- a/src/themes/typography.js
+++ b/src/themes/typography.js
@@ -0,0 +1,71 @@
+// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //
+
+const Typography = (fontFamily) => ({
+  htmlFontSize: 16,
+  fontFamily,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 600,
+  h1: {
+    fontWeight: 600,
+    fontSize: '2.375rem',
+    lineHeight: 1.21
+  },
+  h2: {
+    fontWeight: 600,
+    fontSize: '1.875rem',
+    lineHeight: 1.27
+  },
+  h3: {
+    fontWeight: 600,
+    fontSize: '1.5rem',
+    lineHeight: 1.33
+  },
+  h4: {
+    fontWeight: 600,
+    fontSize: '1.25rem',
+    lineHeight: 1.4
+  },
+  h5: {
+    fontWeight: 600,
+    fontSize: '1rem',
+    lineHeight: 1.5
+  },
+  h6: {
+    fontWeight: 400,
+    fontSize: '0.875rem',
+    lineHeight: 1.57
+  },
+  caption: {
+    fontWeight: 400,
+    fontSize: '0.75rem',
+    lineHeight: 1.66
+  },
+  body1: {
+    fontSize: '0.875rem',
+    lineHeight: 1.57
+  },
+  body2: {
+    fontSize: '0.75rem',
+    lineHeight: 1.66
+  },
+  subtitle1: {
+    fontSize: '0.875rem',
+    fontWeight: 600,
+    lineHeight: 1.57
+  },
+  subtitle2: {
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    lineHeight: 1.66
+  },
+  overline: {
+    lineHeight: 1.66
+  },
+  button: {
+    textTransform: 'capitalize'
+  }
+});
+
+export default Typography;