Initial Commit - Templating Login & Dashboard

2025-02-11 23:13:50 +07:00 · 2025-02-11 23:13:50 +07:00 · 63e1f58670
commit 63e1f58670
95 changed files with 7348 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ASMAN</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,38 @@
+{
+  "name": "asman",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/public-sans": "^5.1.2",
+    "@mui/icons-material": "^6.4.3",
+    "@mui/material": "^6.4.3",
+    "iconsax-react": "^0.0.8",
+    "lodash": "^4.17.21",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.1.5",
+    "react-svg": "^16.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -0,0 +1,34 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/assets/speedometer.svg
+++ b/src/assets/speedometer.svg
@ -0,0 +1,16 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_28_37448" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<g clip-path="url(#clip0_28_37448)">
+<path opacity="0.32" d="M21.1808 16.9703C20.8971 17.6255 20.2225 18 19.5086 18H14.8154C14.8462 17.9145 14.8735 17.8269 14.8971 17.7373C15.1709 16.6974 14.8825 15.639 14.2214 14.8963C14.4654 12.9091 14.6177 10.8733 14.7108 9.26516C14.7569 8.46731 13.7795 8.20081 13.4274 8.91526C12.7178 10.3553 11.8493 12.1958 11.0842 14.041C10.1467 14.3479 9.3768 15.1177 9.10295 16.1576C8.93642 16.7899 8.97782 17.4291 9.18451 18H4.49141C3.77747 18 3.10288 17.6255 2.81918 16.9703C2.29212 15.7533 2 14.4108 2 13C2 7.47715 6.47715 3 12 3C17.5229 3 22 7.47715 22 13C22 14.4108 21.7079 15.7533 21.1808 16.9703Z" fill="#1877F2"/>
+<path d="M14.7108 9.26516C14.7569 8.46731 13.7795 8.20081 13.4274 8.91526C12.7178 10.3553 11.8493 12.1958 11.0842 14.041C10.1467 14.3479 9.3768 15.1177 9.10295 16.1576C8.6742 17.7856 9.62375 19.459 11.2238 19.8953C12.8238 20.3315 14.4684 19.3654 14.8971 17.7373C15.1709 16.6974 14.8825 15.639 14.2214 14.8963C14.4654 12.9091 14.6177 10.8733 14.7108 9.26516Z" fill="#1877F2"/>
+</g>
+</mask>
+<g mask="url(#mask0_28_37448)">
+<rect width="24" height="24" fill="#637381"/>
+</g>
+<defs>
+<clipPath id="clip0_28_37448">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,12 @@
+:root {
+  font-family: 'Public Sans', sans-serif;
+
+  /* font-synthesis: none; */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  text-decoration: inherit;
+}
--- a/src/layouts/AuthLayout.tsx
+++ b/src/layouts/AuthLayout.tsx
@ -0,0 +1,20 @@
+import { Outlet } from "react-router";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+
+export default function AuthLayout() {
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box
+        sx={{
+          mt: 8,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        <Outlet />
+      </Box>
+    </Container>
+  );
+}
--- a/src/layouts/Dashboard/Header.tsx
+++ b/src/layouts/Dashboard/Header.tsx
@ -0,0 +1,93 @@
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import IconButton from "@mui/material/IconButton";
+import MenuIcon from "@mui/icons-material/Menu";
+import Avatar from "@mui/material/Avatar";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import React from "react";
+import { useNavigate } from "react-router";
+
+export default function Header({
+  handleDrawerToggle,
+}: {
+  handleDrawerToggle: () => void;
+}) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  let navigate = useNavigate();
+  
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const onLogout = () => {
+    setAnchorEl(null);
+
+    navigate("/login")
+  };
+
+  return (
+    <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
+      <Box component="div">
+        <IconButton
+          color="inherit"
+          aria-label="open drawer"
+          edge="start"
+          onClick={handleDrawerToggle}
+          sx={{ mr: 2, display: { sm: "none" } }}
+        >
+          <MenuIcon />
+        </IconButton>
+      </Box>
+      <Box component="div">
+        <Box
+          component="div"
+          onClick={handleClick}
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+            gap: 1,
+            padding: "8px",
+            borderRadius: 1,
+            '&:hover': {
+              backgroundColor: 'rgba(0, 0, 0, 0.04)'
+            }
+          }}
+        >
+          <Typography variant="subtitle1" noWrap component="div">
+            Hi, Admins
+          </Typography>
+        </Box>
+        <Menu
+          id="basic-menu"
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          MenuListProps={{
+            "aria-labelledby": "basic-button",
+          }}
+          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        >
+          <MenuItem onClick={handleClose} sx={{ minWidth: '200px' }}>
+            <Typography>Profile</Typography>
+          </MenuItem>
+          <MenuItem onClick={handleClose}>
+            <Typography>My Account</Typography>
+          </MenuItem>
+          <MenuItem onClick={onLogout} sx={{ color: 'error.main' }}>
+            <Typography>Logout</Typography>
+          </MenuItem>
+        </Menu>
+      </Box>
+    </Toolbar>
+  );
+}
--- a/src/layouts/Dashboard/Sidebar.tsx
+++ b/src/layouts/Dashboard/Sidebar.tsx
@ -0,0 +1,159 @@
+import Drawer from "@mui/material/Drawer";
+import Toolbar from "@mui/material/Toolbar";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListSubheader from "@mui/material/ListSubheader";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Box from "@mui/material/Box";
+
+import { Link, Typography } from "@mui/material";
+import { useLocation } from "react-router";
+import { ReactSVG } from "react-svg";
+import Speedometer from "../../assets/speedometer.svg";
+
+interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  drawerWidth: number;
+  mobileOpen: boolean;
+  handleDrawerTransitionEnd: () => void;
+  handleDrawerClose: () => void;
+  window?: () => Window;
+}
+
+const MENU = [
+  {
+    title: "Data Master",
+    menus: [
+      {
+        title: "Dashboard",
+        link: "/dashboard",
+        icon: Speedometer,
+      },
+      {
+        title: "Backbone",
+        link: "/backbone",
+        icon: Speedometer,
+      },
+      {
+        title: "Fishbone",
+        link: "/fishbone",
+        icon: Speedometer,
+      },
+      {
+        title: "Devices",
+        link: "/devices",
+        icon: Speedometer,
+      },
+    ],
+  },
+  {
+    title: "Management",
+    menus: [
+      {
+        title: "User",
+        link: "/user",
+        icon: Speedometer,
+      },
+    ],
+  },
+];
+
+export default function Sidebar({
+  window,
+  mobileOpen,
+  handleDrawerClose,
+  handleDrawerTransitionEnd,
+  drawerWidth,
+}: Props) {
+  const location = useLocation();
+
+  const drawer = (
+    <div>
+      <Toolbar
+        sx={{
+          fontSize: "16px",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Box fontWeight={"bold"}>
+          <Typography variant="inherit" textAlign={"center"} component="div">
+            Network
+          </Typography>
+          <Typography variant="inherit" textAlign={"center"} component="div">
+            Asset Management
+          </Typography>
+        </Box>
+      </Toolbar>
+      {/* <Divider /> */}
+      {MENU.map((item, index) => (
+        <List
+          key={index}
+          subheader={
+            <ListSubheader component={"div"} sx={{ textTransform: "uppercase" }}>
+                {item.title}
+            </ListSubheader>
+          }
+        >
+          {item.menus.map((menu, key) => {
+            return (
+              <ListItem key={key} disablePadding>
+                <ListItemButton
+                  component={Link}
+                  href={menu.link}
+                  selected={menu.link === location.pathname}
+                >
+                  <ListItemIcon>
+                    <ReactSVG src={menu.icon} fill="#f0d0d0" />
+                  </ListItemIcon>
+                  <ListItemText primary={menu.title} />
+                </ListItemButton>
+              </ListItem>
+            );
+          })}
+        </List>
+      ))}
+    </div>
+  );
+
+  // Remove this const when copying and pasting into your project.
+  const container =
+    window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <>
+      <Drawer
+        container={container}
+        variant="temporary"
+        open={mobileOpen}
+        onTransitionEnd={handleDrawerTransitionEnd}
+        onClose={handleDrawerClose}
+        ModalProps={{
+          keepMounted: true, // Better open performance on mobile.
+        }}
+        sx={{
+          display: { xs: "block", sm: "none" },
+          "& .MuiDrawer-paper": { boxSizing: "border-box", width: drawerWidth },
+        }}
+      >
+        {drawer}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: "none", sm: "block" },
+          "& .MuiDrawer-paper": { boxSizing: "border-box", width: drawerWidth },
+        }}
+        open
+      >
+        {drawer}
+      </Drawer>
+    </>
+  );
+}
--- a/src/layouts/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout.tsx
@ -0,0 +1,81 @@
+import React from "react";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import Toolbar from "@mui/material/Toolbar";
+import { Outlet } from "react-router";
+import Sidebar from "./Dashboard/Sidebar";
+import Header from "./Dashboard/Header";
+
+const drawerWidth = 240;
+
+interface Props {
+  /**
+   * Injected by the documentation to work in an iframe.
+   * Remove this when copying and pasting into your project.
+   */
+  window?: () => Window;
+}
+
+export default function DashboardLayout(props: Props) {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [isClosing, setIsClosing] = React.useState(false);
+
+  const handleDrawerClose = () => {
+    setIsClosing(true);
+    setMobileOpen(false);
+  };
+
+  const handleDrawerTransitionEnd = () => {
+    setIsClosing(false);
+  };
+
+  const handleDrawerToggle = () => {
+    if (!isClosing) {
+      setMobileOpen(!mobileOpen);
+    }
+  };
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <CssBaseline />
+      <AppBar
+        position="fixed"
+        sx={{
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+          ml: { sm: `${drawerWidth}px` },
+        }}
+      >
+        <Header {...{ handleDrawerToggle }}/>
+      </AppBar>
+      <Box
+        component="nav"
+        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+        aria-label="mailbox folders"
+      >
+        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+        <Sidebar
+          {...{
+            handleDrawerClose,
+            handleDrawerTransitionEnd,
+            mobileOpen,
+            drawerWidth,
+          }}
+          {...props}
+        />
+      </Box>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 3,
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+        }}
+      >
+        <Toolbar />
+
+        <Outlet />
+      </Box>
+    </Box>
+  );
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,23 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router";
+import Routes from "./routes/index.tsx";
+import CssBaseline from '@mui/material/CssBaseline';
+import ThemeCustomization from "./theme/index.tsx";
+import '@fontsource/public-sans/300.css';
+import '@fontsource/public-sans/400.css';
+import '@fontsource/public-sans/500.css';
+import '@fontsource/public-sans/700.css';
+import './index.css';
+
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeCustomization>
+      <CssBaseline />
+      <BrowserRouter>
+        <Routes />
+      </BrowserRouter>
+    </ThemeCustomization>
+  </StrictMode>
+);
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@ -0,0 +1,7 @@
+export default function Dashboard() {
+  return (
+    <div>
+      Dashboard
+    </div>
+  )
+}
--- a/src/pages/auth/Login.tsx
+++ b/src/pages/auth/Login.tsx
@ -0,0 +1,67 @@
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Paper from "@mui/material/Paper";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid2";
+import { useNavigate } from "react-router";
+
+export default function Login() {
+  let navigate = useNavigate();
+
+  const onSubmit = (e: any) => {
+    e.preventDefault();
+
+    navigate("/dashboard");
+  };
+
+  return (
+    <Paper elevation={2} sx={{ p: 5, borderRadius: "8px" }}>
+      <Typography component="h1" variant="h5">
+        Sign in
+      </Typography>
+
+      <Box component="form" noValidate sx={{ mt: 1 }} onSubmit={onSubmit}>
+        <TextField
+          margin="normal"
+          required
+          fullWidth
+          id="username"
+          label="Username"
+          name="username"
+          autoComplete="username"
+          autoFocus
+        />
+        <TextField
+          margin="normal"
+          required
+          fullWidth
+          name="password"
+          label="Password"
+          type="password"
+          id="password"
+          autoComplete="current-password"
+        />
+        <Grid container justifyContent={"space-between"} alignItems={"center"}>
+          <Grid>
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+          </Grid>
+          <Grid>
+            <Link href="/forgot-password" variant="body2">
+              Forgot password?
+            </Link>
+          </Grid>
+        </Grid>
+        <Button type="submit" fullWidth variant="contained" sx={{ my: 2 }}>
+          Sign In
+        </Button>
+      </Box>
+    </Paper>
+  );
+}
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@ -0,0 +1,22 @@
+import { Routes as RRRoutes, Route } from "react-router";
+import App from "../App";
+import AuthLayout from "../layouts/AuthLayout";
+import Login from "../pages/auth/Login";
+import Dashboard from "../pages/Dashboard";
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Routes() {
+  return (
+    <RRRoutes>
+      <Route path="/" element={<App />} />
+
+      <Route element={<DashboardLayout />}>
+        <Route path="/dashboard" element={<Dashboard />} />
+      </Route>
+      {/* Auth routes */}
+      <Route element={<AuthLayout />}>
+        <Route path="login" element={<Login />} />
+      </Route>
+    </RRRoutes>
+  )
+}
--- a/src/theme/components/Accordion.ts
+++ b/src/theme/components/Accordion.ts
@ -0,0 +1,30 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - ACCORDION ||============================== //
+
+export default function Accordion(theme: Theme) {
+  return {
+    MuiAccordion: {
+      defaultProps: {
+        disableGutters: true,
+        square: true,
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          border: `1px solid ${theme.palette.divider}`,
+          '&:not(:last-child)': {
+            borderBottom: 0
+          },
+          '&:before': {
+            display: 'none'
+          },
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.secondary.lighter
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/AccordionDetails.ts
+++ b/src/theme/components/AccordionDetails.ts
@ -0,0 +1,17 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - ACCORDION DETAILS ||============================== //
+
+export default function AccordionDetails(theme: Theme) {
+  return {
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(2),
+          borderTop: `1px solid ${theme.palette.secondary.light}`
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/AccordionSummary.tsx
+++ b/src/theme/components/AccordionSummary.tsx
@ -0,0 +1,36 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ASSETS
+import { ArrowRight2 } from 'iconsax-react';
+
+// ==============================|| OVERRIDES - ACCORDION SUMMARY ||============================== //
+
+export default function AccordionSummary(theme: Theme) {
+  const { palette, spacing } = theme;
+
+  return {
+    MuiAccordionSummary: {
+      defaultProps: {
+        expandIcon: <ArrowRight2 size={14} />
+      },
+      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/theme/components/Alert.ts
+++ b/src/theme/components/Alert.ts
@ -0,0 +1,82 @@
+// MATERIAL - UI
+import { alpha, Theme } from '@mui/material';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+import { ThemeMode } from '../../types/config';
+
+// ==============================|| ALERT - COLORS ||============================== //
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  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: Theme) {
+  const primaryDashed = getColorStyle({ color: 'primary', theme });
+
+  return {
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.primary,
+          fontSize: '0.875rem'
+        },
+        icon: {
+          '& svg': {
+            width: 20,
+            height: 20
+          }
+        },
+        message: {
+          padding: 0,
+          marginTop: 3
+        },
+        filled: {
+          color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.black : theme.palette.common.white
+        },
+        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/theme/components/AlertTitle.ts
+++ b/src/theme/components/AlertTitle.ts
@ -0,0 +1,15 @@
+// ==============================|| OVERRIDES - ALERT TITLE ||============================== //
+
+export default function AlertTitle() {
+  return {
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          marginBottom: 4,
+          marginTop: 0,
+          fontWeight: 400
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Autocomplete.ts
+++ b/src/theme/components/Autocomplete.ts
@ -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/theme/components/Backdrop.tsx
+++ b/src/theme/components/Backdrop.tsx
@ -0,0 +1,16 @@
+// MATERIAL - UI
+import { alpha } from '@mui/material';
+
+// ==============================|| OVERRIDES - BACKDROP ||============================== //
+
+export default function Backdrop() {
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: alpha('#000', 0.2)
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Badge.ts
+++ b/src/theme/components/Badge.ts
@ -0,0 +1,50 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+
+// ==============================|| BADGE - COLORS ||============================== //
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  const colors = getColors(theme, color);
+  const { darker, lighter } = colors;
+
+  return {
+    color: darker,
+    backgroundColor: lighter
+  };
+}
+
+// ==============================|| OVERRIDES - BADGE ||============================== //
+
+export default function Badge(theme: Theme) {
+  const defaultLightBadge = getColorStyle({ color: 'primary', theme });
+
+  return {
+    MuiBadge: {
+      styleOverrides: {
+        standard: {
+          minWidth: theme.spacing(2),
+          height: theme.spacing(2),
+          padding: theme.spacing(0.5)
+        },
+        colorSecondary: {
+          color: theme.palette.secondary.lighter
+        },
+        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/theme/components/Body.ts
+++ b/src/theme/components/Body.ts
@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - BODY ||============================== //
+
+export default function Body() {
+  return {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          fontFeatureSettings: '"salt"'
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Button.ts
+++ b/src/theme/components/Button.ts
@ -0,0 +1,238 @@
+// MATERIAL - UI
+import { alpha, Theme } from '@mui/material';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+import getShadow from '../../utils/getShadow';
+
+// TYPES
+import { ThemeMode } from '../../types/config';
+import { ButtonVariantProps, ExtendedStyleProps } from '../../types/extended';
+
+// ==============================|| BUTTON - COLORS ||============================== //
+
+interface ButtonStyleProps extends ExtendedStyleProps {
+  variant: ButtonVariantProps;
+}
+
+function getColorStyle({ variant, color, theme }: ButtonStyleProps) {
+  const colors = getColors(theme, color);
+  const { lighter, light, main, dark, darker, 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 {
+        ...(color === 'secondary' && {
+          backgroundColor: theme.palette.mode === ThemeMode.DARK ? light : dark
+        }),
+        '&:hover': {
+          backgroundColor: theme.palette.mode === ThemeMode.DARK ? lighter : dark,
+          ...(color === 'secondary' && {
+            backgroundColor: theme.palette.mode === ThemeMode.DARK ? lighter : darker
+          })
+        },
+        ...commonShadow
+      };
+    case 'shadow':
+      return {
+        color: contrastText,
+        backgroundColor: theme.palette.mode === ThemeMode.DARK ? light : dark,
+        boxShadow: shadows,
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: theme.palette.mode === ThemeMode.DARK ? lighter : darker,
+          ...(color === 'secondary' && {
+            backgroundColor: theme.palette.mode === ThemeMode.DARK ? lighter : darker
+          })
+        },
+        ...commonShadow
+      };
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          color: dark,
+          backgroundColor: 'transparent',
+          borderColor: dark
+        },
+        ...commonShadow
+      };
+    case 'dashed':
+      return {
+        color: theme.palette.mode === ThemeMode.DARK ? darker : main,
+        borderColor: theme.palette.mode === ThemeMode.DARK ? darker : main,
+        backgroundColor: lighter,
+        '&:hover': {
+          color: theme.palette.mode === ThemeMode.DARK ? contrastText : dark,
+          borderColor: dark
+        },
+        ...commonShadow
+      };
+    case 'text':
+    default:
+      return {
+        '&:hover': {
+          color: theme.palette.mode === ThemeMode.DARK ? darker : dark,
+          backgroundColor: theme.palette.mode === ThemeMode.DARK ? lighter + 30 : lighter
+        },
+        ...commonShadow
+      };
+  }
+}
+
+// ==============================|| OVERRIDES - BUTTON ||============================== //
+
+export default function Button(theme: Theme) {
+  const primaryDashed = getColorStyle({ variant: 'dashed', color: 'primary', theme });
+  const primaryShadow = getColorStyle({ variant: 'shadow', color: 'primary', theme });
+
+  const disabledStyle = {
+    '&.Mui-disabled': {
+      backgroundColor: theme.palette.secondary[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: 8,
+            opacity: 0,
+            transition: 'all 0.5s'
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 8,
+            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.secondary.light} !important`,
+            borderColor: `${theme.palette.secondary[400]} !important`,
+            backgroundColor: `${theme.palette.secondary[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.secondary.light} !important`,
+            borderColor: `${theme.palette.secondary[400]} !important`,
+            backgroundColor: `${theme.palette.secondary[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'
+        },
+        sizeSmall: {
+          '& svg': {
+            width: 16,
+            height: 16
+          }
+        },
+        sizeMedium: {
+          '& svg': {
+            width: 18,
+            height: 18
+          }
+        },
+        sizeLarge: {
+          '& svg': {
+            width: 20,
+            height: 20
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/ButtonBase.ts
+++ b/src/theme/components/ButtonBase.ts
@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - BUTTON BASE ||============================== //
+
+import { LinkBehavior } from "..";
+
+export default function ButtonBase() {
+  return {
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: false,
+        LinkComponent: LinkBehavior,
+      }
+    }
+  };
+}
--- a/src/theme/components/ButtonGroup.ts
+++ b/src/theme/components/ButtonGroup.ts
@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - BUTTON GROUP ||============================== //
+
+export default function ButtonGroup() {
+  return {
+    MuiButtonGroup: {
+      defaultProps: {
+        disableRipple: false
+      }
+    }
+  };
+}
--- a/src/theme/components/CardContent.ts
+++ b/src/theme/components/CardContent.ts
@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - CARD CONTENT ||============================== //
+
+export default function CardContent() {
+  return {
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: 24,
+          '&:last-child': {
+            paddingBottom: 24
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Checkbox.tsx
+++ b/src/theme/components/Checkbox.tsx
@ -0,0 +1,105 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+import { CheckboxProps } from '@mui/material/Checkbox';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// ASSETS
+import { Stop, TickSquare, MinusSquare } from 'iconsax-react';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+import { ThemeMode } from '../../types/config';
+
+// ==============================|| RADIO - COLORS ||============================== //
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark } = colors;
+
+  return {
+    '&:hover': {
+      backgroundColor: color === 'secondary' ? lighter : lighter + 50,
+      ...(theme.palette.mode === ThemeMode.DARK && {
+        backgroundColor: color === 'secondary' ? lighter + 50 : lighter + 20
+      }),
+      '& .icon': {
+        borderColor: main
+      }
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4
+    }
+  };
+}
+
+// ==============================|| CHECKBOX - SIZE STYLE ||============================== //
+
+interface CheckboxSizeProps {
+  size: number;
+}
+
+function getSizeStyle(size?: CheckboxProps['size']): CheckboxSizeProps {
+  switch (size) {
+    case 'small':
+      return { size: 20 };
+    case 'large':
+      return { size: 28 };
+    case 'medium':
+    default:
+      return { size: 24 };
+  }
+}
+
+// ==============================|| CHECKBOX - STYLE ||============================== //
+
+function checkboxStyle(size?: CheckboxProps['size']) {
+  const sizes: CheckboxSizeProps = getSizeStyle(size);
+
+  return {
+    '& svg': {
+      width: sizes.size,
+      height: sizes.size
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Checkbox(theme: Theme) {
+  const { palette } = theme;
+
+  return {
+    MuiCheckbox: {
+      defaultProps: {
+        className: 'size-medium',
+        icon: <Stop />,
+        checkedIcon: <TickSquare variant="Bold" />,
+        indeterminateIcon: <MinusSquare variant="Bold" />
+      },
+      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/theme/components/Chip.ts
+++ b/src/theme/components/Chip.ts
@ -0,0 +1,90 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material/styles';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+
+// ==============================|| CHIP - COLORS ||============================== //
+
+function getColor({ color, theme }: ExtendedStyleProps) {
+  const colors = getColors(theme, color);
+  const { dark } = colors;
+
+  return {
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2
+    }
+  };
+}
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  const colors = getColors(theme, color);
+  const { light, lighter, main, darker } = colors;
+
+  return {
+    color: darker,
+    backgroundColor: lighter + 80,
+    borderColor: light,
+    '& .MuiChip-deleteIcon': {
+      color: main,
+      '&:hover': {
+        color: light
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - CHIP ||============================== //
+
+export default function Chip(theme: Theme) {
+  const defaultLightChip = getColorStyle({ color: 'secondary', theme });
+  return {
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          '& svg': {
+            width: 18,
+            height: 18
+          },
+          borderRadius: 12,
+          '&: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/theme/components/Dialog.ts
+++ b/src/theme/components/Dialog.ts
@ -0,0 +1,21 @@
+// MATERIAL - UI
+import { alpha } from '@mui/material';
+
+// ==============================|| OVERRIDES - DIALOG ||============================== //
+
+export default function Dialog() {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        root: {
+          '& .MuiBackdrop-root': {
+            backgroundColor: alpha('#000', 0.5)
+          }
+        },
+        paper: {
+          backgroundImage: 'none'
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/DialogContentText.ts
+++ b/src/theme/components/DialogContentText.ts
@ -0,0 +1,17 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function DialogContentText(theme: Theme) {
+  return {
+    MuiDialogContentText: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/DialogTitle.ts
+++ b/src/theme/components/DialogTitle.ts
@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - DIALOG TITLE ||============================== //
+
+export default function DialogTitle() {
+  return {
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: '1rem',
+          fontWeight: 500
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Drawer.ts
+++ b/src/theme/components/Drawer.ts
@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - DRAWER ||============================== //
+
+export default function Drawer() {
+  return {
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none'
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Fab.ts
+++ b/src/theme/components/Fab.ts
@ -0,0 +1,89 @@
+// MATERIAL - UI
+import { alpha, Theme } from '@mui/material';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+import getShadow from '../../utils/getShadow';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+
+// ==============================|| BUTTON - COLORS ||============================== //
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  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 Fab(theme: Theme) {
+  return {
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          '& svg': {
+            width: 20,
+            height: 20
+          },
+          fontWeight: 400,
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.secondary[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/theme/components/FormHelperText.ts
+++ b/src/theme/components/FormHelperText.ts
@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - FORM HELPER TEXT ||============================== //
+
+export default function FormHelperText() {
+  return {
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          marginLeft: 8
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/IconButton.ts
+++ b/src/theme/components/IconButton.ts
@ -0,0 +1,43 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - ICON BUTTON ||============================== //
+
+export default function IconButton(theme: Theme) {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8
+        },
+        sizeLarge: {
+          width: theme.spacing(5.5),
+          height: theme.spacing(5.5),
+          fontSize: '1.25rem',
+          '& svg': {
+            width: 24,
+            height: 24
+          }
+        },
+        sizeMedium: {
+          width: theme.spacing(4.5),
+          height: theme.spacing(4.5),
+          fontSize: '1rem',
+          '& svg': {
+            width: 20,
+            height: 20
+          }
+        },
+        sizeSmall: {
+          width: theme.spacing(3.75),
+          height: theme.spacing(3.75),
+          fontSize: '0.75rem',
+          '& svg': {
+            width: 16,
+            height: 16
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/InputBase.ts
+++ b/src/theme/components/InputBase.ts
@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - INPUT BASE ||============================== //
+
+export default function InputBase() {
+  return {
+    MuiInputBase: {
+      styleOverrides: {
+        sizeSmall: {
+          fontSize: '0.75rem'
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/InputLabel.ts
+++ b/src/theme/components/InputLabel.ts
@ -0,0 +1,28 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - INPUT LABEL ||============================== //
+
+export default function InputLabel(theme: Theme) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.secondary.main
+        },
+        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/theme/components/LinearProgress.ts
+++ b/src/theme/components/LinearProgress.ts
@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LINER PROGRESS ||============================== //
+
+export default function LinearProgress() {
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: 6,
+          borderRadius: 100
+        },
+        bar: {
+          borderRadius: 100
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Link.ts
+++ b/src/theme/components/Link.ts
@ -0,0 +1,12 @@
+import { Components, LinkProps } from "@mui/material";
+import { LinkBehavior } from "..";
+
+export default function Button(): Components {
+  return {
+    MuiLink: {
+      defaultProps: {
+        component: LinkBehavior,
+      } as LinkProps,
+    },
+  };
+}
--- a/src/theme/components/ListItemButton.ts
+++ b/src/theme/components/ListItemButton.ts
@ -0,0 +1,23 @@
+import { Theme } from "@mui/material";
+
+// ==============================|| OVERRIDES - LIST ITEM BUTTON ||============================== //
+
+export default function ListItemButton(theme: Theme) {
+  return {
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          marginTop: 2,
+          marginBottom: 2,
+          "&.Mui-selected": {
+            color: theme.palette.primary.main,
+            "& .MuiListItemIcon-root": {
+              color: theme.palette.primary.main,
+            },
+          },
+        },
+      },
+    },
+  };
+}
--- a/src/theme/components/ListItemIcon.ts
+++ b/src/theme/components/ListItemIcon.ts
@ -0,0 +1,16 @@
+import { Theme } from "@mui/material";
+
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemIcon(theme: Theme) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 38,
+          color: theme.palette.secondary.main
+        }
+      }
+    },
+  };
+}
--- a/src/theme/components/LoadingButton.ts
+++ b/src/theme/components/LoadingButton.ts
@ -0,0 +1,28 @@
+// ==============================|| OVERRIDES - LOADING BUTTON ||============================== //
+
+export default function LoadingButton() {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          '& svg': {
+            width: 18,
+            height: 18
+          },
+          paddingLeft: 16,
+          paddingRight: 16,
+          '&.MuiLoadingButton-loading': {
+            opacity: 0.6,
+            textShadow: 'none',
+            '& .MuiLoadingButton-loadingIndicatorStart': {
+              left: 12
+            },
+            '& .MuiLoadingButton-loadingIndicatorEnd': {
+              right: 12
+            }
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/OutlinedInput.ts
+++ b/src/theme/components/OutlinedInput.ts
@ -0,0 +1,73 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+import getShadow from '../../utils/getShadow';
+
+// TYPES
+import { ThemeMode } from '../../types/config';
+import { ColorProps } from '../../types/extended';
+
+interface Props {
+  variant: ColorProps;
+  theme: Theme;
+}
+
+// ==============================|| OVERRIDES - INPUT BORDER & SHADOWS ||============================== //
+
+function getColor({ variant, theme }: Props) {
+  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: Theme) {
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          padding: 14
+        },
+        notchedOutline: {
+          borderColor: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary[200] : theme.palette.secondary[400]
+        },
+        root: {
+          '& svg': {
+            color: theme.palette.secondary.main
+          },
+          ...getColor({ variant: 'primary', theme }),
+          '&.Mui-error': {
+            ...getColor({ variant: 'error', theme })
+          }
+        },
+        inputSizeSmall: {
+          padding: '10px 10px 10px 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/theme/components/Pagination.ts
+++ b/src/theme/components/Pagination.ts
@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - PAGINATION ||============================== //
+
+export default function Pagination() {
+  return {
+    MuiPagination: {
+      defaultProps: {
+        shape: 'rounded'
+      }
+    }
+  };
+}
--- a/src/theme/components/PaginationItem.ts
+++ b/src/theme/components/PaginationItem.ts
@ -0,0 +1,129 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+import { PaginationProps } from '@mui/material/Pagination';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+
+// ==============================|| PAGINATION ITEM - COLORS ||============================== //
+
+interface PaginationStyleProps extends ExtendedStyleProps {
+  variant: PaginationProps['variant'];
+}
+
+function getColorStyle({ variant, color, theme }: PaginationStyleProps) {
+  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: color === 'secondary' ? lighter : 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: 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/theme/components/Popover.ts
+++ b/src/theme/components/Popover.ts
@ -0,0 +1,16 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - POPOVER ||============================== //
+
+export default function Popover(theme: Theme) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.z1
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Radio.tsx
+++ b/src/theme/components/Radio.tsx
@ -0,0 +1,134 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+import Box from '@mui/material/Box';
+import { CheckboxProps } from '@mui/material/Checkbox';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+import { ThemeMode } from '../../types/config';
+
+// ==============================|| RADIO - COLORS ||============================== //
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  const colors = getColors(theme, color);
+  const { lighter, main, dark } = colors;
+
+  return {
+    '& .dot': {
+      backgroundColor: main
+    },
+    '&:hover': {
+      backgroundColor: color === 'secondary' ? lighter : lighter + 50,
+      ...(theme.palette.mode === ThemeMode.DARK && {
+        backgroundColor: color === 'secondary' ? lighter + 50 : lighter + 20
+      })
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4
+    }
+  };
+}
+
+// ==============================|| CHECKBOX - SIZE STYLE ||============================== //
+
+interface RadioSizeProps {
+  size: number;
+  dotSize: number;
+  position: number;
+}
+
+function getSizeStyle(size?: CheckboxProps['size']): RadioSizeProps {
+  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?: CheckboxProps['size']) {
+  const sizes: RadioSizeProps = getSizeStyle(size);
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .dot': {
+        width: sizes.dotSize,
+        height: sizes.dotSize,
+        top: sizes.position,
+        left: sizes.position
+      }
+    }
+  };
+}
+
+// ==============================|| OVERRIDES - RADIO ||============================== //
+
+export default function Radio(theme: Theme) {
+  const { palette } = theme;
+
+  return {
+    MuiRadio: {
+      defaultProps: {
+        className: 'size-medium',
+        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/theme/components/Slider.ts
+++ b/src/theme/components/Slider.ts
@ -0,0 +1,75 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// PROJECT IMPORTS
+import getColors from '../../utils/getColors';
+
+// TYPES
+import { ExtendedStyleProps } from '../../types/extended';
+
+function getColorStyle({ color, theme }: ExtendedStyleProps) {
+  const colors = getColors(theme, color);
+  const { main } = colors;
+
+  return {
+    border: `2px solid ${main}`
+  };
+}
+
+// ==============================|| OVERRIDES - SLIDER ||============================== //
+
+export default function Slider(theme: 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.secondary.light,
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Switch.ts
+++ b/src/theme/components/Switch.ts
@ -0,0 +1,100 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+import { SwitchProps } from '@mui/material/Switch';
+
+// ==============================|| SWITCH - SIZE STYLE ||============================== //
+
+interface SwitchSizeProps {
+  width: number;
+  height: number;
+  base: number;
+  thumb: number;
+  trackRadius: number;
+}
+
+function getSizeStyle(size?: SwitchProps['size']): SwitchSizeProps {
+  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: Theme, size?: SwitchProps['size']) {
+  const sizes: SwitchSizeProps = 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 - SWITCH ||============================== //
+
+export default function Switch(theme: 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/theme/components/Tab.ts
+++ b/src/theme/components/Tab.ts
@ -0,0 +1,30 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TAB ||============================== //
+
+export default function Tab(theme: Theme) {
+  return {
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          minHeight: 46,
+          color: theme.palette.text.primary,
+          borderRadius: 4,
+          '&:hover': {
+            color: theme.palette.primary.main
+          },
+          '&:focus-visible': {
+            borderRadius: 4,
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: -3
+          },
+          '& svg.MuiTab-iconWrapper': {
+            width: 18,
+            height: 18
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TableBody.ts
+++ b/src/theme/components/TableBody.ts
@ -0,0 +1,30 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TABLE BODY ||============================== //
+
+export default function TableBody(theme: Theme) {
+  const hoverStyle = {
+    '&:hover': {
+      backgroundColor: theme.palette.secondary.lighter
+    }
+  };
+
+  return {
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          '&.striped .MuiTableRow-root': {
+            '&:nth-of-type(even)': {
+              backgroundColor: theme.palette.secondary.lighter
+            },
+            ...hoverStyle
+          },
+          '& .MuiTableRow-root': {
+            ...hoverStyle
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TableCell.ts
+++ b/src/theme/components/TableCell.ts
@ -0,0 +1,66 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TABLE CELL ||============================== //
+
+export default function TableCell(theme: 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,
+          '&.cell-right': {
+            justifyContent: 'flex-end',
+            textAlign: 'right',
+            '& > *': {
+              justifyContent: 'flex-end',
+              margin: '0 0 0 auto'
+            },
+            '& .MuiOutlinedInput-input': {
+              textAlign: 'right'
+            }
+          },
+          '&.cell-center': {
+            justifyContent: 'center',
+            textAlign: 'center',
+            '& > *': {
+              justifyContent: 'center',
+              margin: '0 auto'
+            }
+          }
+        },
+        sizeSmall: {
+          padding: 8
+        },
+        head: {
+          fontSize: '0.75rem',
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          ...commonCell
+        },
+        footer: {
+          fontSize: '0.75rem',
+          textTransform: 'uppercase',
+          ...commonCell
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TableFooter.ts
+++ b/src/theme/components/TableFooter.ts
@ -0,0 +1,18 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TABLE FOOTER ||============================== //
+
+export default function TableFooter(theme: Theme) {
+  return {
+    MuiTableFooter: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.secondary.lighter,
+          borderTop: `2px solid ${theme.palette.divider}`,
+          borderBottom: `1px solid ${theme.palette.divider}`
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TableHead.ts
+++ b/src/theme/components/TableHead.ts
@ -0,0 +1,18 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TABLE HEAD ||============================== //
+
+export default function TableHead(theme: Theme) {
+  return {
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: theme.palette.secondary.lighter,
+          borderTop: `1px solid ${theme.palette.divider}`,
+          borderBottom: `2px solid ${theme.palette.divider}`
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TablePagination.ts
+++ b/src/theme/components/TablePagination.ts
@ -0,0 +1,16 @@
+// ==============================|| OVERRIDES - TABLE PAGINATION ||============================== //
+
+export default function TablePagination() {
+  return {
+    MuiTablePagination: {
+      styleOverrides: {
+        selectLabel: {
+          fontSize: '0.875rem'
+        },
+        displayedRows: {
+          fontSize: '0.875rem'
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TableRow.ts
+++ b/src/theme/components/TableRow.ts
@ -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/theme/components/Tabs.ts
+++ b/src/theme/components/Tabs.ts
@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TABS ||============================== //
+
+export default function Tabs() {
+  return {
+    MuiTabs: {
+      styleOverrides: {
+        vertical: {
+          overflow: 'visible'
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/ToggleButton.ts
+++ b/src/theme/components/ToggleButton.ts
@ -0,0 +1,27 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TOGGLE BUTTON ||============================== //
+
+export default function ToggleButton(theme: Theme) {
+  return {
+    MuiToggleButton: {
+      styleOverrides: {
+        root: {
+          '& svg': {
+            width: 18,
+            height: 18
+          },
+          '&.Mui-disabled': {
+            borderColor: theme.palette.divider,
+            color: theme.palette.text.disabled
+          },
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Tooltip.ts
+++ b/src/theme/components/Tooltip.ts
@ -0,0 +1,17 @@
+// MATERIAL - UI
+import { Theme } from '@mui/material';
+
+// ==============================|| OVERRIDES - TOOLTIP ||============================== //
+
+export default function Tooltip(theme: Theme) {
+  return {
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: theme.palette.secondary.darker,
+          color: theme.palette.background.paper
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/TreeItem.ts
+++ b/src/theme/components/TreeItem.ts
@ -0,0 +1,19 @@
+// ==============================|| OVERRIDES - TREE ITEM ||============================== //
+
+export default function TreeItem() {
+  return {
+    MuiTreeItem: {
+      styleOverrides: {
+        content: {
+          padding: 8
+        },
+        label: {
+          '& svg': {
+            width: 20,
+            height: 20
+          }
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/Typography.ts
+++ b/src/theme/components/Typography.ts
@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - TYPOGRAPHY ||============================== //
+
+export default function Typography() {
+  return {
+    MuiTypography: {
+      styleOverrides: {
+        gutterBottom: {
+          marginBottom: 12
+        }
+      }
+    }
+  };
+}
--- a/src/theme/components/index.ts
+++ b/src/theme/components/index.ts
@ -0,0 +1,104 @@
+import { Theme } from "@mui/material";
+import { merge } from "lodash";
+
+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 Backdrop from './Backdrop';
+import Body from './Body';
+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 Drawer from './Drawer';
+import Fab from './Fab';
+import FormHelperText from './FormHelperText';
+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';
+
+export default function ComponentsOverrides(theme: Theme) {
+  return merge(
+    Accordion(theme),
+    AccordionDetails(theme),
+    AccordionSummary(theme),
+    Alert(theme),
+    AlertTitle(),
+    Autocomplete(),
+    Badge(theme),
+    Backdrop(),
+    Body(),
+    Button(theme),
+    ButtonBase(),
+    ButtonGroup(),
+    CardContent(),
+    Checkbox(theme),
+    Chip(theme),
+    Dialog(),
+    DialogContentText(theme),
+    DialogTitle(),
+    Drawer(),
+    Fab(theme),
+    FormHelperText(),
+    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/theme/index.tsx
+++ b/src/theme/index.tsx
@ -0,0 +1,76 @@
+import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router";
+import {
+  createTheme,
+  ThemeOptions,
+  ThemeProvider,
+  TypographyVariantsOptions,
+} from "@mui/material";
+import React, { useMemo } from "react";
+import ComponentsOverrides from "./components";
+import Palette from "./pallete";
+import CustomShadows from "./shadows";
+import Typography from "./typography";
+import { ThemeMode } from "../types/config";
+import { CustomShadowProps } from "../types/theme";
+
+export const LinkBehavior = React.forwardRef<
+  HTMLAnchorElement,
+  Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
+>((props, ref) => {
+  const { href, ...other } = props;
+  // Map href (Material UI) -> to (react-router)
+  return <RouterLink ref={ref} to={href} {...other} />;
+});
+
+export default function ThemeCustomization({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  let themeMode: any = ThemeMode.LIGHT;
+  const fontFamily = '"Public Sans", sans-serif';
+
+  const getWindowScheme = () => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  };
+
+  if (themeMode === ThemeMode.AUTO) {
+    const autoMode = getWindowScheme();
+    if (autoMode) {
+      themeMode = ThemeMode.DARK;
+    } else {
+      themeMode = ThemeMode.LIGHT;
+    }
+  }
+
+  const theme = Palette(ThemeMode.LIGHT);
+
+  const themeTypography: TypographyVariantsOptions =
+    useMemo<TypographyVariantsOptions>(
+      () => Typography(themeMode, fontFamily, theme),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [themeMode, fontFamily]
+    );
+  const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(
+    () => CustomShadows(theme),
+    [theme]
+  );
+
+  const themeOptions: ThemeOptions = useMemo(
+    () => ({
+      palette: theme.palette,
+      customShadows: themeCustomShadows,
+      typography: themeTypography,
+    }),
+    [theme, themeCustomShadows, themeTypography]
+  );
+
+  const themes = createTheme(themeOptions);
+
+  themes.components = ComponentsOverrides(themes);
+
+  return <ThemeProvider theme={themes}>{children}</ThemeProvider>;
+}
--- a/src/theme/pallete.ts
+++ b/src/theme/pallete.ts
@ -0,0 +1,81 @@
+import { createTheme } from '@mui/material';
+import { PaletteMode, SimplePaletteColorOptions } from '@mui/material';
+import { ThemeMode } from '../types/config';
+
+export type PaletteThemeProps = {
+  primary: SimplePaletteColorOptions;
+  secondary: SimplePaletteColorOptions;
+  error: SimplePaletteColorOptions;
+  warning: SimplePaletteColorOptions;
+  info: SimplePaletteColorOptions;
+  success: SimplePaletteColorOptions;
+};
+
+// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
+
+const Palette = (mode: ThemeMode) => {
+  const paletteColor: PaletteThemeProps = {
+    primary: {
+      lighter: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      light: "#fca5a5",
+      400: "#f87171",
+      main: "#ef4444",
+      dark: "#dc2626",
+      700: "#b71c1c",
+      darker: "#991b1b",
+      900: "#7f1d1d",
+    },
+    secondary: {
+      lighter: "#ffeff2",
+      100: "#ffe0e7",
+      200: "#ffc6d6",
+      light: "#ff97b3",
+      400: "#ff5d8c",
+      main: "#ff246a",
+      dark: "#f50057",
+      700: "#d7004c",
+      darker: "#b40048",
+      900: "#990244",
+    },
+    error: {
+      main: "#f44336"
+    },
+    warning: {
+      main: "#ff9800"
+    },
+    info: {
+      main: "#2196f3"
+    },
+    success: {
+      main: "#4caf50"
+    }
+  };
+
+  return createTheme({
+    palette: {
+      mode: mode as PaletteMode,
+      common: {
+        black: '#000',
+        white: '#fff'
+      },
+      ...paletteColor,
+      // text: {
+      //   primary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.87) : paletteColor.secondary[800],
+      //   secondary: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.45) : paletteColor.secondary.main,
+      //   disabled: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.1) : paletteColor.secondary[400]
+      // },
+      action: {
+        disabled: paletteColor.secondary.light
+      },
+      // divider: mode === ThemeMode.DARK ? alpha(paletteColor.secondary.darker!, 0.05) : alpha(paletteColor.secondary.light!, 0.65),
+      // background: {
+      //   paper: mode === ThemeMode.DARK ? paletteColor.secondary[100] : '#fff',
+      //   default: themeContrast && mode !== ThemeMode.DARK ? '#fff' : paletteColor.secondary.lighter
+      // }
+    }
+  });
+};
+
+export default Palette;
--- a/src/theme/shadows.ts
+++ b/src/theme/shadows.ts
@ -0,0 +1,38 @@
+// MATERIAL - UI
+import { alpha, Theme } from '@mui/material';
+
+// TYPES
+import { ThemeMode } from '../types/config';
+import { CustomShadowProps } from '../types/theme';
+
+// ==============================|| DEFAULT THEME - SHADOWS  ||============================== //
+
+const CustomShadows = (theme: Theme): CustomShadowProps => ({
+  // 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 8px 24px ${alpha(theme.palette.secondary[200]!, 0.3)}`
+      : `0px 8px 24px  ${alpha(theme.palette.secondary.dark, 0.08)}`,
+  z2:
+    theme.palette.mode === ThemeMode.DARK
+      ? `0px 2px 8px ${alpha(theme.palette.secondary[200]!, 0.3)}`
+      : `0px 2px 8px  ${alpha(theme.palette.secondary.dark, 0.08)}`,
+  primary: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,
+  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.secondary.main, 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.secondary.main, 0.2)}`
+});
+
+export default CustomShadows;
--- a/src/theme/typography.ts
+++ b/src/theme/typography.ts
@ -0,0 +1,75 @@
+// MATERIAL - UI
+import { Theme, TypographyVariantsOptions } from '@mui/material/styles';
+import { FontFamily, ThemeMode } from '../types/config';
+
+// ==============================|| DEFAULT THEME - TYPOGRAPHY  ||============================== //
+
+const Typography = (mode: ThemeMode, fontFamily: FontFamily, theme: Theme): TypographyVariantsOptions => ({
+  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;
--- a/src/types/config.ts
+++ b/src/types/config.ts
@ -0,0 +1,140 @@
+export type FontFamily = string;
+export type PresetColor = 'default' | 'theme1' | 'theme2' | 'theme3' | 'theme4' | 'theme5' | 'theme6' | 'theme7' | 'theme8';
+export type I18n = 'en' | 'fr' | 'ro' | 'zh'; // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
+
+export enum ThemeMode {
+  LIGHT = 'light',
+  DARK = 'dark',
+  AUTO = 'auto'
+}
+
+export enum MenuOrientation {
+  VERTICAL = 'vertical',
+  HORIZONTAL = 'horizontal'
+}
+
+export enum ThemeDirection {
+  LTR = 'ltr',
+  RTL = 'rtl'
+}
+
+// ==============================|| TYPES - CONFIG ||============================== //
+
+export type CustomizationActionProps = {
+  type: string;
+  payload?: CustomizationProps;
+};
+
+export type DefaultConfigProps = {
+  /**
+   * The props used for the theme font-style.
+   * We use options from next/font ref -
+   * https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
+   * https://fonts.google.com/variablefonts
+   */
+  fontFamily: FontFamily;
+
+  /**
+   * The props used for display menu-items with multi-language.
+   * We provide static below languages according to 'react-intl' options - https://www.npmjs.com/package/react-intl
+   * 'en' (default)
+   * 'fr'
+   * 'ro'
+   * 'zh'
+   */
+  i18n: I18n;
+
+  /**
+   * the props used for menu orientation (diffrent theme layout).
+   * we provide static below options -
+   * 'vertical' (default)
+   * 'horizontal'
+   */
+  menuOrientation: MenuOrientation;
+
+  /**
+   * the props used for show/hide caption drawer
+   * default - true
+   * false - will hide menu caption
+   */
+  menuCaption: boolean;
+
+  /**
+   * the props used for show mini variant drawer
+   * the mini variant is recommended for apps sections that need quick selection access alongside content.
+   * default - false
+   */
+  miniDrawer: boolean;
+
+  /**
+   * the props used for theme container.
+   * the container centers your content horizontally. It's the most basic layout element.
+   * default - true which show container
+   * false - will show fluid
+   */
+  container: boolean;
+
+  /**
+   * the props used for default theme palette mode
+   * explore the default theme
+   * below theme options -
+   * 'light' (default)
+   * 'dark'
+   */
+  mode: ThemeMode;
+
+  /**
+   * the props used for theme primary color variants
+   * we provide static below options thoe s are already defaine in src/themes/theme -
+   * 'default'
+   * 'theme1'
+   * 'theme2'
+   * 'theme3'
+   * 'theme4'
+   * 'theme5'
+   * 'theme6'
+   * 'theme7'
+   * 'theme8'
+   */
+  presetColor: PresetColor;
+
+  /**
+   * the props used for default theme direction
+   * explore the default theme
+   * below theme options -
+   * 'ltr' (default)
+   * 'rtl'
+   */
+  themeDirection: ThemeDirection;
+
+  /**
+   * the props used for theme contrast.
+   * set box-shadow .
+   * default - false which show card without box-shadow and background default
+   * true - will show card with box-shadow and background pure white
+   */
+  themeContrast: boolean;
+};
+
+export type CustomizationProps = {
+  fontFamily: FontFamily;
+  i18n: I18n;
+  miniDrawer: boolean;
+  container: boolean;
+  menuOrientation: MenuOrientation;
+  menuCaption: boolean;
+  mode: ThemeMode;
+  presetColor: PresetColor;
+  themeDirection: ThemeDirection;
+  themeContrast: boolean;
+  onChangeContainer: VoidFunction;
+  onChangeLocalization: (lang: I18n) => void;
+  onChangeMode: (mode: ThemeMode) => void;
+  onChangePresetColor: (theme: PresetColor) => void;
+  onChangeDirection: (direction: ThemeDirection) => void;
+  onChangeMiniDrawer: (miniDrawer: boolean) => void;
+  onChangeMenuOrientation: (menuOrientation: MenuOrientation) => void;
+  onChangeMenuCaption: VoidFunction;
+  onChangeFontFamily: (fontFamily: FontFamily) => void;
+  onChangeContrast: VoidFunction;
+};
--- a/src/types/extended.ts
+++ b/src/types/extended.ts
@ -0,0 +1,25 @@
+import { Theme } from '@mui/material';
+import { ButtonProps } from '@mui/material/Button';
+import { ChipProps } from '@mui/material/Chip';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { SliderProps } from '@mui/material/Slider';
+import { LoadingButtonProps } from '@mui/lab';
+
+// ==============================|| TYPES - EXTENDED COMPONENT  ||============================== //
+
+export type ButtonVariantProps = 'contained' | 'light' | 'outlined' | 'dashed' | 'text' | 'shadow';
+export type IconButtonShapeProps = 'rounded' | 'square';
+type TooltipColor = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'default';
+export type ColorProps =
+  | ChipProps['color']
+  | ButtonProps['color']
+  | LoadingButtonProps['color']
+  | IconButtonProps['color']
+  | SliderProps['color']
+  | TooltipColor;
+export type AvatarTypeProps = 'filled' | 'outlined' | 'combined';
+export type SizeProps = 'badge' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ExtendedStyleProps = {
+  color: ColorProps;
+  theme: Theme;
+};
--- a/src/types/overrides/Alert.d.ts
+++ b/src/types/overrides/Alert.d.ts
@ -0,0 +1,12 @@
+// eslint-disable-next-line
+import * as Alert from '@mui/material/Alert';
+
+declare module '@mui/material/Alert' {
+  interface AlertPropsColorOverrides {
+    primary;
+    secondary;
+  }
+  interface AlertPropsVariantOverrides {
+    border;
+  }
+}
--- a/src/types/overrides/Badge.d.ts
+++ b/src/types/overrides/Badge.d.ts
@ -0,0 +1,8 @@
+// eslint-disable-next-line
+import * as Badge from '@mui/material/Badge';
+
+declare module '@mui/material/Badge' {
+  interface BadgePropsVariantOverrides {
+    light;
+  }
+}
--- a/src/types/overrides/Button.d.ts
+++ b/src/types/overrides/Button.d.ts
@ -0,0 +1,14 @@
+// eslint-disable-next-line
+import * as Button from '@mui/material/Button';
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsVariantOverrides {
+    dashed;
+    shadow;
+    light;
+  }
+
+  interface ButtonPropsSizeOverrides {
+    extraSmall;
+  }
+}
--- a/src/types/overrides/Checkbox.d.ts
+++ b/src/types/overrides/Checkbox.d.ts
@ -0,0 +1,8 @@
+// eslint-disable-next-line
+import * as Checkbox from '@mui/material/Checkbox';
+
+declare module '@mui/material/Checkbox' {
+  interface CheckboxPropsSizeOverrides {
+    large;
+  }
+}
--- a/src/types/overrides/Chip.d.ts
+++ b/src/types/overrides/Chip.d.ts
@ -0,0 +1,12 @@
+// eslint-disable-next-line
+import * as Chip from '@mui/material/Chip';
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsVariantOverrides {
+    light;
+    combined;
+  }
+  interface ChipPropsSizeOverrides {
+    large;
+  }
+}
--- a/src/types/overrides/Pagination.d.ts
+++ b/src/types/overrides/Pagination.d.ts
@ -0,0 +1,15 @@
+// eslint-disable-next-line
+import * as Pagination from '@mui/material/Pagination';
+
+declare module '@mui/material/Pagination' {
+  interface PaginationPropsColorOverrides {
+    error;
+    success;
+    warning;
+    info;
+  }
+  interface PaginationPropsVariantOverrides {
+    contained;
+    combined;
+  }
+}
--- a/src/types/overrides/Radio.d.ts
+++ b/src/types/overrides/Radio.d.ts
@ -0,0 +1,8 @@
+// eslint-disable-next-line
+import * as Radio from '@mui/material/Radio';
+
+declare module '@mui/material/Radio' {
+  interface RadioPropsSizeOverrides {
+    large;
+  }
+}
--- a/src/types/overrides/Slider.d.ts
+++ b/src/types/overrides/Slider.d.ts
@ -0,0 +1,11 @@
+// eslint-disable-next-line
+import * as Slider from '@mui/material/Slider';
+
+declare module '@mui/material/Slider' {
+  interface SliderPropsColorOverrides {
+    error;
+    success;
+    warning;
+    info;
+  }
+}
--- a/src/types/overrides/Switch.d.ts
+++ b/src/types/overrides/Switch.d.ts
@ -0,0 +1,8 @@
+// eslint-disable-next-line
+import * as Switch from '@mui/material/Switch';
+
+declare module '@mui/material/Switch' {
+  interface SwitchPropsSizeOverrides {
+    large;
+  }
+}
--- a/src/types/overrides/createPalette.d.ts
+++ b/src/types/overrides/createPalette.d.ts
@ -0,0 +1,36 @@
+// eslint-disable-next-line
+import * as createPalette from '@mui/material';
+
+declare module '@mui/material/styles' {
+  interface SimplePaletteColorOptions {
+    lighter?: string;
+    darker?: string;
+    0?: string;
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+  }
+
+  interface PaletteColor {
+    lighter: string;
+    darker: string;
+    0?: string;
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+  }
+}
--- a/src/types/overrides/createTheme.d.ts
+++ b/src/types/overrides/createTheme.d.ts
@ -0,0 +1,11 @@
+// eslint-disable-next-line
+import * as Theme from '@mui/material';
+
+// PROJECT IMPORTS
+import { CustomShadowProps } from 'types/theme';
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    customShadows: CustomShadowProps;
+  }
+}
--- a/src/types/overrides/index.d.ts
+++ b/src/types/overrides/index.d.ts
@ -0,0 +1,8 @@
+// eslint-disable-next-line
+import * as Color from '@mui/material';
+
+declare module '@mui/material' {
+  interface Color {
+    0?: string;
+  }
+}
--- a/src/types/overrides/react-table-config.d.ts
+++ b/src/types/overrides/react-table-config.d.ts
@ -0,0 +1,119 @@
+import {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  UseSortByState
+} from 'react-table';
+
+declare module 'react-table' {
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+      UseFiltersOptions<D>,
+      UseGlobalFiltersOptions<D>,
+      UseGroupByOptions<D>,
+      UsePaginationOptions<D>,
+      UseResizeColumnsOptions<D>,
+      UseRowSelectOptions<D>,
+      UseRowStateOptions<D>,
+      UseSortByOptions<D>,
+      Record<string, any> {}
+
+  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedHooks<D>,
+      UseGroupByHooks<D>,
+      UseRowSelectHooks<D>,
+      UseSortByHooks<D> {}
+
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderInstanceProps<D>,
+      UseExpandedInstanceProps<D>,
+      UseFiltersInstanceProps<D>,
+      UseGlobalFiltersInstanceProps<D>,
+      UseGroupByInstanceProps<D>,
+      UsePaginationInstanceProps<D>,
+      UseRowSelectInstanceProps<D>,
+      UseRowStateInstanceProps<D>,
+      UseSortByInstanceProps<D> {}
+
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderState<D>,
+      UseExpandedState<D>,
+      UseFiltersState<D>,
+      UseGlobalFiltersState<D>,
+      UseGroupByState<D>,
+      UsePaginationState<D>,
+      UseResizeColumnsState<D>,
+      UseRowSelectState<D>,
+      UseRowStateState<D>,
+      UseSortByState<D> {}
+
+  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnOptions<D>,
+      UseGlobalFiltersColumnOptions<D>,
+      UseGroupByColumnOptions<D>,
+      UseResizeColumnsColumnOptions<D>,
+      UseSortByColumnOptions<D> {}
+
+  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnProps<D>,
+      UseGroupByColumnProps<D>,
+      UseResizeColumnsColumnProps<D>,
+      UseSortByColumnProps<D>,
+      Omit<ColumnInterface<D>, 'id'>,
+      ColumnInterfaceBasedOnValue<D>,
+      UseTableColumnProps<D>,
+      Record<headerClassName | className, string> {}
+
+  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseGroupByCellProps<D>,
+      UseRowStateCellProps<D> {}
+
+  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedRowProps<D>,
+      UseGroupByRowProps<D>,
+      UseRowSelectRowProps<D>,
+      UseRowStateRowProps<D> {}
+}
--- a/src/types/theme.ts
+++ b/src/types/theme.ts
@ -0,0 +1,34 @@
+// MATERIAL - UI
+import { SimplePaletteColorOptions } from '@mui/material';
+
+// ==============================|| TYPES - DEFAULT THEME  ||============================== //
+
+export type PaletteThemeProps = {
+  primary: SimplePaletteColorOptions;
+  secondary: SimplePaletteColorOptions;
+  error: SimplePaletteColorOptions;
+  warning: SimplePaletteColorOptions;
+  info: SimplePaletteColorOptions;
+  success: SimplePaletteColorOptions;
+};
+
+export type CustomShadowProps = {
+  button: string;
+  text: string;
+  z1: string;
+  z2: string;
+  primary: string;
+  primaryButton: string;
+  secondary: string;
+  secondaryButton: string;
+  error: string;
+  errorButton: string;
+  warning: string;
+  warningButton: string;
+  info: string;
+  infoButton: string;
+  success: string;
+  successButton: string;
+  grey: string;
+  greyButton: string;
+};
--- a/src/utils/getColors.ts
+++ b/src/utils/getColors.ts
@ -0,0 +1,24 @@
+// material-ui
+import { Theme } from '@mui/material';
+
+// types
+import { ColorProps } from '../types/extended';
+
+// ==============================|| CUSTOM FUNCTION - COLORS ||============================== //
+
+export default function getColors(theme: Theme, color?: ColorProps) {
+  switch (color!) {
+    case 'secondary':
+      return theme.palette.secondary;
+    case 'error':
+      return theme.palette.error;
+    case 'warning':
+      return theme.palette.warning;
+    case 'info':
+      return theme.palette.info;
+    case 'success':
+      return theme.palette.success;
+    default:
+      return theme.palette.primary;
+  }
+}
--- a/src/utils/getShadow.ts
+++ b/src/utils/getShadow.ts
@ -0,0 +1,33 @@
+// material-ui
+import { Theme } from '@mui/material/styles';
+
+// ==============================|| CUSTOM FUNCTION - COLOR SHADOWS ||============================== //
+
+export default function getShadow(theme: Theme, shadow: string) {
+  switch (shadow) {
+    case 'secondary':
+      return theme.customShadows.secondary;
+    case 'error':
+      return theme.customShadows.error;
+    case 'warning':
+      return theme.customShadows.warning;
+    case 'info':
+      return theme.customShadows.info;
+    case 'success':
+      return theme.customShadows.success;
+    case 'primaryButton':
+      return theme.customShadows.primaryButton;
+    case 'secondaryButton':
+      return theme.customShadows.secondaryButton;
+    case 'errorButton':
+      return theme.customShadows.errorButton;
+    case 'warningButton':
+      return theme.customShadows.warningButton;
+    case 'infoButton':
+      return theme.customShadows.infoButton;
+    case 'successButton':
+      return theme.customShadows.successButton;
+    default:
+      return theme.customShadows.primary;
+  }
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>