init

3 years ago · 4f62ca2f21
commit 4f62ca2f21
171 changed files with 79566 additions and 0 deletions
--- a/.env
+++ b/.env
@ -0,0 +1 @@
+REACT_APP_VERSION = v3.1.0
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,58 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["airbnb", "prettier", "plugin:react/jsx-runtime", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "src/"]
+      }
+    }
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "impliedStrict": true
+    },
+    "ecmaVersion": 12
+  },
+  "plugins": ["prettier", "react", "react-hooks"],
+  "rules": {
+    "react/jsx-filename-extension": 0,
+    "no-param-reassign": 0,
+    "react/prop-types": 1,
+    "react/require-default-props": 0,
+    "react/no-array-index-key": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/forbid-prop-types": 0,
+    "import/order": 0,
+    "import/no-cycle": 0,
+    "no-console": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "prefer-destructuring": 0,
+    "no-shadow": 0,
+    "import/no-named-as-default": 0,
+    "no-unused-vars": [
+      1,
+      {
+        "ignoreRestSiblings": false
+      }
+    ],
+    "prettier/prettier": [
+      2,
+      {
+        "bracketSpacing": true,
+        "printWidth": 140,
+        "singleQuote": true,
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "useTabs": false,
+        "endOfLine": "auto"
+      }
+    ]
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/.idea/
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "printWidth": 140,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "useTabs": false
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,12 @@
+# Introduction
+
+This is material design template created based on materially structure
+
+# Getting Started
+
+1. Installation process
+   - run 'npm install / yarn'
+   - start dev server run 'npm run start / yarn start'
+2. Deployment process
+   - Goto full-version directory and open package.json. Update homepage URL to the production URL
+   - Goto full-version directory and run 'npm run build / yarn build'
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "baseUrl": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,131 @@
+{
+  "name": "berry-material-react",
+  "version": "3.1.0",
+  "private": true,
+  "dependencies": {
+    "@auth0/auth0-spa-js": "^1.19.4",
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@fullcalendar/daygrid": "^5.10.1",
+    "@fullcalendar/interaction": "^5.10.1",
+    "@fullcalendar/list": "^5.10.1",
+    "@fullcalendar/react": "^5.10.1",
+    "@fullcalendar/timegrid": "^5.10.1",
+    "@fullcalendar/timeline": "^5.10.1",
+    "@hookform/resolvers": "^2.8.8",
+    "@mui/icons-material": "^5.4.1",
+    "@mui/lab": "^5.0.0-alpha.68",
+    "@mui/material": "^5.4.1",
+    "@mui/styles": "^5.4.1",
+    "@mui/system": "^5.4.1",
+    "@mui/utils": "^5.4.1",
+    "@mui/x-data-grid": "^5.5.0",
+    "@reduxjs/toolkit": "^1.7.2",
+    "@tabler/icons": "^1.53.0",
+    "amazon-cognito-identity-js": "^5.2.6",
+    "apexcharts": "^3.33.1",
+    "axios": "^0.25.0",
+    "axios-mock-adapter": "^1.20.0",
+    "chance": "^1.1.8",
+    "csstype": "^3.0.10",
+    "date-fns": "^2.28.0",
+    "draft-js": "^0.11.7",
+    "emoji-picker-react": "^3.5.1",
+    "firebase": "^9.6.6",
+    "formik": "^2.2.9",
+    "framer-motion": "^4.1.13",
+    "history": "^5.2.0",
+    "image-to-base64": "^2.2.0",
+    "jsonwebtoken": "^8.5.1",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "material-ui-popup-state": "^2.0.0",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-apexcharts": "^1.3.9",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-copy-to-clipboard": "^5.0.4",
+    "react-currency-format": "^1.1.0",
+    "react-dom": "^17.0.2",
+    "react-draft-wysiwyg": "^1.14.7",
+    "react-draggable": "^4.4.4",
+    "react-dropzone": "^12.0.2",
+    "react-google-recaptcha": "^2.1.0",
+    "react-hook-form": "^7.26.1",
+    "react-images": "^1.2.0-beta.7",
+    "react-intersection-observer": "^8.33.1",
+    "react-intl": "^5.24.6",
+    "react-markdown": "^8.0.0",
+    "react-number-format": "^4.9.1",
+    "react-organizational-chart": "^2.1.1",
+    "react-otp-input-rc-17": "^2.4.1-minor",
+    "react-perfect-scrollbar": "^1.5.8",
+    "react-quill": "^2.0.0-beta.4",
+    "react-redux": "^7.2.6",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "^4.0.3",
+    "react-slick": "^0.28.1",
+    "react-syntax-highlighter": "^15.4.5",
+    "react-timer-hook": "^3.0.5",
+    "react-to-print": "^2.14.4",
+    "react-window": "^1.8.6",
+    "redux": "^4.1.2",
+    "redux-persist": "^6.0.0",
+    "remark-gfm": "^3.0.1",
+    "slick-carousel": "^1.8.1",
+    "stylis-plugin-rtl": "^2.1.1",
+    "typescript": "^4.5.5",
+    "uuid": "^8.3.2",
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "format": "prettier --write ."
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-react"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/eslint-parser": "^7.15.8",
+    "eslint": "^7.27.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "6.0.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-flowtype": "^5.7.2",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "prettier": "^2.5.1",
+    "react-error-overlay": "6.0.9",
+    "sass": "^1.49.7"
+  }
+}
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -0,0 +1,18 @@
+<svg width="46" height="55" viewBox="0 0 46 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clipPath="url(#clip0)">
+<path d="M19.6667 55C8.82205 55 0 46.2504 0 35.4968C0 24.7431 8.82292 15.9935 19.6667 15.9935C30.5105 15.9935 39.3334 24.7431 39.3334 35.4968C39.3334 46.2504 30.5122 55 19.6667 55ZM19.6667 17.8563C9.8587 17.8563 1.87839 25.7686 1.87839 35.4959C1.87839 45.2233 9.8587 53.1355 19.6667 53.1355C29.4747 53.1355 37.4559 45.2215 37.4559 35.4942C37.4559 25.7668 29.4765 17.8563 19.6667 17.8563Z" fill="#2196F3"/>
+<path d="M33.9387 36.3618C33.3269 34.1133 27.7188 33.8706 24.3807 34.6949C22.6326 35.1283 20.846 35.6917 19.0034 36.0159C20.3521 37.2026 21.8005 38.3251 23.879 38.6042C29.0361 39.2942 32.2404 37.6898 33.9387 36.3618Z" fill="#2196F3"/>
+<path d="M23.8788 38.6042C21.7959 38.3251 20.3519 37.2026 19.0032 36.016C16.9159 34.1792 15.0594 32.189 11.4154 32.9379C5.62198 34.1289 4.85978 40.9247 9.3333 45.2917C11.254 47.2864 13.7197 48.6822 16.4284 49.3079C19.137 49.9336 21.9709 49.7621 24.5828 48.8144C27.1946 47.8667 29.4709 46.1839 31.1327 43.9724C32.7945 41.7608 33.7696 39.1165 33.9385 36.3635C32.2402 37.6898 29.0358 39.2942 23.8788 38.6042Z" fill="#673AB7"/>
+<path d="M26.9105 23.8962C26.1876 25.4331 32.6321 27.1381 33.4031 32.2419C33.7746 27.2178 27.8046 21.9962 26.9105 23.8962Z" fill="#2196F3"/>
+<path d="M13.3649 30.3107C14.5267 29.8335 15.0784 28.5126 14.5972 27.3604C14.116 26.2083 12.784 25.6611 11.6222 26.1384C10.4604 26.6156 9.90867 27.9365 10.3899 29.0887C10.8712 30.2408 12.2031 30.7879 13.3649 30.3107Z" fill="#673AB7"/>
+<path d="M18.5351 24.1103C19.0786 23.5714 19.0786 22.6977 18.5351 22.1587C17.9917 21.6198 17.1106 21.6198 16.5672 22.1587C16.0238 22.6977 16.0238 23.5714 16.5672 24.1103C17.1106 24.6492 17.9917 24.6492 18.5351 24.1103Z" fill="#2196F3"/>
+<path d="M23.4513 15.2376C25.4617 9.3485 24.1103 4.64345 19.9786 2.40881C17.1544 2.97831 15.4779 4.334 14.5444 6.20544C20.0843 5.76077 23.5999 9.1994 23.4513 15.2376Z" fill="#2196F3"/>
+<path d="M46.0001 10.0923C36.0487 6.55051 29.7685 7.76491 28.7808 15.8349C34.4841 21.6703 40.2286 18.8774 46.0001 10.0923Z" fill="#2196F3"/>
+<path d="M38.0851 6.89635C38.5466 4.94082 38.7861 2.6299 38.8219 0C28.5017 2.27885 23.8473 6.6337 27.3584 13.9782C27.5333 14.0198 27.7011 14.0536 27.8698 14.0883C28.6905 8.34132 32.3031 6.2133 38.0851 6.89635Z" fill="#2196F3"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="46" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Berry - React Material Admin Dashboard Template</title>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <!-- Meta Tags-->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#2296f3" />
+    <meta name="title" content="Berry - React Material Admin Dashboard Template by CodedThemes" />
+    <meta
+      name="description"
+      content="Start your next React project with Berry admin template. It build with Reactjs, Material-UI, Redux, and Hook for faster web development."
+    />
+    <meta
+      name="keywords"
+      content="react admin template, material-ui react dashboard template, reactjs admin template, reactjs dashboard, react backend template"
+    />
+    <meta name="author" content="CodedThemes" />
+    <!-- Open Graph / Facebook -->
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://berrydashboard.io/" />
+    <meta property="og:site_name" content="berrydashboard.io" />
+    <meta property="article:publisher" content="https://www.facebook.com/codedthemes" />
+    <meta property="og:title" content="Berry - React Material Dashboard Template" />
+    <meta
+      property="og:description"
+      content="Berry Dashboard is made for the faster web application development built using Material-UI, Reactjs, Redux & Hook API."
+    />
+    <meta property="og:image" content="https://berrydashboard.io/og-image/og-facebook.png" />
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://berrydashboard.io" />
+    <meta property="twitter:title" content="Berry - React Material Dashboard Template" />
+    <meta
+      property="twitter:description"
+      content="Berry Dashboard is made for the faster web application development built using Material-UI, Reactjs, Redux & Hook API."
+    />
+    <meta property="twitter:image" content="https://berrydashboard.io/og-image/og-twitter.png" />
+    <meta name="twitter:creator" content="@codedthemes" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+          This HTML file is a template.
+          If you open it directly in the browser, you will see an empty page.
+
+          You can add webfonts, meta tags, or analytics to this file.
+          The build step will place the bundled scripts into the <body> tag.
+
+          To begin the development, run `npm start` or `yarn start`.
+          To create a production bundle, use `npm run build` or `yarn build`.
+        -->
+
+    <script type="text/javascript">
+      (function (c, l, a, r, i, t, y) {
+        c[a] =
+          c[a] ||
+          function () {
+            (c[a].q = c[a].q || []).push(arguments);
+          };
+        t = l.createElement(r);
+        t.async = 1;
+        t.src = 'https://www.clarity.ms/tag/' + i;git
+        y = l.getElementsByTagName(r)[0];
+        y.parentNode.insertBefore(t, y);
+      })(window, document, 'clarity', 'script', '6sbb1vpcjo');
+    </script>
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X1LG1CJ1GG"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'G-X1LG1CJ1GG');
+      gtag('event', 'action', { non_interaction: true });
+    </script>
+  </body>
+</html>
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,37 @@
+// routing
+import Routes from 'routes';
+
+// project imports
+import Locales from 'ui-component/Locales';
+import NavigationScroll from 'layout/NavigationScroll';
+import RTLLayout from 'ui-component/RTLLayout';
+import Snackbar from 'ui-component/extended/Snackbar';
+import ThemeCustomization from 'themes';
+
+// auth provider
+import { FirebaseProvider as AuthProvider } from 'contexts/FirebaseContext';
+// import { AWSCognitoProvider as AuthProvider } from 'contexts/AWSCognitoContext';
+// import { JWTProvider as AuthProvider } from 'contexts/JWTContext';
+// import { Auth0Provider as AuthProvider } from 'contexts/Auth0Context';
+
+// ==============================|| APP ||============================== //
+
+const App = () => (
+  <ThemeCustomization>
+    {/* RTL layout */}
+    <RTLLayout>
+      <Locales>
+        <NavigationScroll>
+          <AuthProvider>
+            <>
+              <Routes />
+              <Snackbar />
+            </>
+          </AuthProvider>
+        </NavigationScroll>
+      </Locales>
+    </RTLLayout>
+  </ThemeCustomization>
+);
+
+export default App;
--- a/src/assets/images/icons/social-google.svg
+++ b/src/assets/images/icons/social-google.svg
@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.06129 13.2253L4.31871 15.9975L1.60458 16.0549C0.793457 14.5504 0.333374 12.8292 0.333374 11C0.333374 9.23119 0.763541 7.56319 1.52604 6.09448H1.52662L3.94296 6.53748L5.00146 8.93932C4.77992 9.58519 4.65917 10.2785 4.65917 11C4.65925 11.783 4.80108 12.5332 5.06129 13.2253Z" fill="#FBBB00"/>
+<path d="M21.4804 9.00732C21.6029 9.65257 21.6668 10.3189 21.6668 11C21.6668 11.7637 21.5865 12.5086 21.4335 13.2271C20.9143 15.6722 19.5575 17.8073 17.678 19.3182L17.6774 19.3177L14.6339 19.1624L14.2031 16.4734C15.4503 15.742 16.425 14.5974 16.9384 13.2271H11.2346V9.00732H17.0216H21.4804Z" fill="#518EF8"/>
+<path d="M17.6772 19.3176L17.6777 19.3182C15.8498 20.7875 13.5277 21.6666 11 21.6666C6.93783 21.6666 3.40612 19.3962 1.60449 16.0549L5.0612 13.2253C5.96199 15.6294 8.28112 17.3408 11 17.3408C12.1686 17.3408 13.2634 17.0249 14.2029 16.4734L17.6772 19.3176Z" fill="#28B446"/>
+<path d="M17.8085 2.78892L14.353 5.61792C13.3807 5.01017 12.2313 4.65908 11 4.65908C8.21963 4.65908 5.85713 6.44896 5.00146 8.93925L1.52658 6.09442H1.526C3.30125 2.67171 6.8775 0.333252 11 0.333252C13.5881 0.333252 15.9612 1.25517 17.8085 2.78892Z" fill="#F14336"/>
+</svg>
--- a/src/assets/images/users/user-round.svg
+++ b/src/assets/images/users/user-round.svg
--- a/src/assets/scss/_theme1.module.scss
+++ b/src/assets/scss/_theme1.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #eceff1;
+$primaryMain: #607d8b;
+$primaryDark: #546e7a;
+$primary200: #b0bec5;
+$primary800: #455a64;
+
+// secondary
+$secondaryLight: #e0f2f1;
+$secondaryMain: #009688;
+$secondaryDark: #00897b;
+$secondary200: #80cbc4;
+$secondary800: #00695c;
+
+// success Colors
+$successLight: #edf7ed;
+$success200: #b6e0b3;
+$successMain: #6cc067;
+$successDark: #64ba5f;
+
+// error
+$errorLight: #e48784;
+$errorMain: #d9534f;
+$errorDark: #d54c48;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fdf5ea;
+$warningMain: #f0ad4e;
+$warningDark: #ec9c3d;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #0e1b23; // level 3
+$darkPaper: #060d12; // level 4
+
+// dark 800 & 900
+$darkLevel1: #0b161d; // level 1
+$darkLevel2: #14252f; // level 2
+
+// primary dark
+$darkPrimaryLight: #eceff1;
+$darkPrimaryMain: #78919c;
+$darkPrimaryDark: #587583;
+$darkPrimary200: #b0bec5;
+$darkPrimary800: #44606e;
+
+// secondary dark
+$darkSecondaryLight: #e0f2f1;
+$darkSecondaryMain: #009688;
+$darkSecondaryDark: #00897b;
+$darkSecondary200: #80cbc4;
+$darkSecondary800: #00695c;
+
+// text variants
+$darkTextTitle: #e4e8f7;
+$darkTextPrimary: #d5d9e9;
+$darkTextSecondary: #d8ddf0;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/_theme2.module.scss
+++ b/src/assets/scss/_theme2.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e4e7ec;
+$primaryMain: #203461;
+$primaryDark: #1c2f59;
+$primary200: #909ab0;
+$primary800: #132145;
+
+// secondary
+$secondaryLight: #fde8ef;
+$secondaryMain: #ec407a;
+$secondaryDark: #ea3a72;
+$secondary200: #f6a0bd;
+$secondary800: #e42a5d;
+
+// success Colors
+$successLight: #e3f8e8;
+$success200: #8be09f;
+$successMain: #17c13e;
+$successDark: #14bb38;
+
+// error
+$errorLight: #e48784;
+$errorMain: #d9534f;
+$errorDark: #d54c48;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fdf5ea;
+$warningMain: #f0ad4e;
+$warningDark: #ec9c3d;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #0a0f23; // level 3
+$darkPaper: #030614; // level 4
+
+// dark 800 & 900
+$darkLevel1: #070e13; // level 1
+$darkLevel2: #12172f; // level 2
+
+// primary dark
+$darkPrimaryLight: #ecedf1;
+$darkPrimaryMain: #606d88;
+$darkPrimaryDark: #586580;
+$darkPrimary200: #b0b6c4;
+$darkPrimary800: #44506b;
+
+// secondary dark
+$darkSecondaryLight: #fde8ef;
+$darkSecondaryMain: #ec407a;
+$darkSecondaryDark: #ea3a72;
+$darkSecondary200: #f6a0bd;
+$darkSecondary800: #e42a5d;
+
+// text variants
+$darkTextTitle: #e4e8f7;
+$darkTextPrimary: #d5d9e9;
+$darkTextSecondary: #d8ddf0;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/_theme3.module.scss
+++ b/src/assets/scss/_theme3.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e3ebeb;
+$primaryMain: #16595a;
+$primaryDark: #135152;
+$primary200: #8bacad;
+$primary800: #0c3e3f;
+
+// secondary
+$secondaryLight: #f8f0e5;
+$secondaryMain: #c77e23;
+$secondaryDark: #c1761f;
+$secondary200: #e3bf91;
+$secondary800: #b36115;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #010606; // level 3
+$darkPaper: #010f17; // level 4
+
+// dark 800 & 900
+$darkLevel1: #02131d; // level 1
+$darkLevel2: #010f17; // level 2
+
+// primary dark
+$darkPrimaryLight: #eceff1;
+$darkPrimaryMain: #1f7778;
+$darkPrimaryDark: #1b6f70;
+$darkPrimary200: #8fbbbc;
+$darkPrimary800: #125a5b;
+
+// secondary dark
+$darkSecondaryLight: #f8f0e5;
+$darkSecondaryMain: #c77e23;
+$darkSecondaryDark: #c1761f;
+$darkSecondary200: #e3bf91;
+$darkSecondary800: #b36115;
+
+// text variants
+$darkTextTitle: #ffffff;
+$darkTextPrimary: #ffffff;
+$darkTextSecondary: #8492c4;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/_theme4.module.scss
+++ b/src/assets/scss/_theme4.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e3e8e8;
+$primaryMain: #173e43;
+$primaryDark: #14383d;
+$primary200: #8b9fa1;
+$primary800: #0d282c;
+
+// secondary
+$secondaryLight: #e8f6f5;
+$secondaryMain: #3fb0ac;
+$secondaryDark: #39a9a5;
+$secondary200: #9fd8d6;
+$secondary800: #299792;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #030708; // level 3
+$darkPaper: #051114; // level 4
+
+// dark 800 & 900
+$darkLevel1: #02131d; // level 1
+$darkLevel2: #051114; // level 2
+
+// primary dark
+$darkPrimaryLight: #e3e8e8;
+$darkPrimaryMain: #3a5b5f;
+$darkPrimaryDark: #14383d;
+$darkPrimary200: #8b9fa1;
+$darkPrimary800: #0d282c;
+
+// secondary dark
+$darkSecondaryLight: #e8f6f5;
+$darkSecondaryMain: #3fb0ac;
+$darkSecondaryDark: #39a9a5;
+$darkSecondary200: #9fd8d6;
+$darkSecondary800: #299792;
+
+// text variants
+$darkTextTitle: #ffffff;
+$darkTextPrimary: #ffffff;
+$darkTextSecondary: #ccd2eb;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/_theme5.module.scss
+++ b/src/assets/scss/_theme5.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e2e5e8;
+$primaryMain: #0a2342;
+$primaryDark: #091f3c;
+$primary200: #8591a1;
+$primary800: #05152b;
+
+// secondary
+$secondaryLight: #e6f4f1;
+$secondaryMain: #2ca58d;
+$secondaryDark: #279d85;
+$secondary200: #96d2c6;
+$secondary800: #1b8a70;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #051327; // level 3
+$darkPaper: #030c1d; // level 4
+
+// dark 800 & 900
+$darkLevel1: #071a33; // level 1
+$darkLevel2: #091f3c; // level 2
+
+// primary dark
+$darkPrimaryLight: #e2e5e8;
+$darkPrimaryMain: #54657b;
+$darkPrimaryDark: #2f445e;
+$darkPrimary200: #8591a1;
+$darkPrimary800: #05152b;
+
+// secondary dark
+$darkSecondaryLight: #e6f4f1;
+$darkSecondaryMain: #2ca58d;
+$darkSecondaryDark: #279d85;
+$darkSecondary200: #96d2c6;
+$darkSecondary800: #1b8a70;
+
+// text variants
+$darkTextTitle: #d7dcec;
+$darkTextPrimary: #bdc8f0;
+$darkTextSecondary: #8492c4;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/_theme6.module.scss
+++ b/src/assets/scss/_theme6.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e8eaf6;
+$primaryMain: #3f51b5;
+$primaryDark: #3949ab;
+$primary200: #9fa8da;
+$primary800: #283593;
+
+// secondary
+$secondaryLight: #e8eaf6;
+$secondaryMain: #3f51b5;
+$secondaryDark: #3949ab;
+$secondary200: #9fa8da;
+$secondary800: #283593;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #1a223f; // level 3
+$darkPaper: #111936; // level 4
+
+// dark 800 & 900
+$darkLevel1: #29314f; // level 1
+$darkLevel2: #212946; // level 2
+
+// primary dark
+$darkPrimaryLight: #eeedfd;
+$darkPrimaryMain: #7267ef;
+$darkPrimaryDark: #6a5fed;
+$darkPrimary200: #b9b3f7;
+$darkPrimary800: #554ae8;
+
+// secondary dark
+$darkSecondaryLight: #eeedfd;
+$darkSecondaryMain: #7267ef;
+$darkSecondaryDark: #6a5fed;
+$darkSecondary200: #b9b3f7;
+$darkSecondary800: #554ae8;
+
+// text variants
+$darkTextTitle: #d7dcec;
+$darkTextPrimary: #bdc8f0;
+$darkTextSecondary: #8492c4;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/_themes-vars.module.scss
+++ b/src/assets/scss/_themes-vars.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #e3f2fd;
+$primaryMain: #2196f3;
+$primaryDark: #1e88e5;
+$primary200: #90caf9;
+$primary800: #1565c0;
+
+// secondary
+$secondaryLight: #ede7f6;
+$secondaryMain: #673ab7;
+$secondaryDark: #5e35b1;
+$secondary200: #b39ddb;
+$secondary800: #4527a0;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #fafafa;
+$grey100: #f5f5f5;
+$grey200: #eeeeee;
+$grey300: #e0e0e0;
+$grey500: #9e9e9e;
+$grey600: #757575;
+$grey700: #616161;
+$grey900: #212121;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #1a223f; // level 3
+$darkPaper: #111936; // level 4
+
+// dark 800 & 900
+$darkLevel1: #29314f; // level 1
+$darkLevel2: #212946; // level 2
+
+// primary dark
+$darkPrimaryLight: #e3f2fd;
+$darkPrimaryMain: #2196f3;
+$darkPrimaryDark: #1e88e5;
+$darkPrimary200: #90caf9;
+$darkPrimary800: #1565c0;
+
+// secondary dark
+$darkSecondaryLight: #d1c4e9;
+$darkSecondaryMain: #7c4dff;
+$darkSecondaryDark: #651fff;
+$darkSecondary200: #b39ddb;
+$darkSecondary800: #6200ea;
+
+// text variants
+$darkTextTitle: #d7dcec;
+$darkTextPrimary: #bdc8f0;
+$darkTextSecondary: #8492c4;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@ -0,0 +1,135 @@
+// color variants
+@import 'themes-vars.module.scss';
+
+// third-party
+@import '~react-perfect-scrollbar/dist/css/styles.css';
+@import '~slick-carousel/slick/slick.css';
+@import '~slick-carousel/slick/slick-theme.css';
+
+// ==============================|| LIGHT BOX ||============================== //
+.slick-arrow:before {
+  color: $grey500;
+}
+
+// ==============================|| LIGHT BOX ||============================== //
+.fullscreen .react-images__blanket {
+  z-index: 1200;
+}
+
+// ==============================|| APEXCHART ||============================== //
+
+.apexcharts-legend-series .apexcharts-legend-marker {
+  margin-right: 8px;
+}
+
+// ==============================|| PERFECT SCROLLBAR ||============================== //
+
+.scrollbar-container {
+  .ps__rail-y {
+    &:hover > .ps__thumb-y,
+    &:focus > .ps__thumb-y,
+    &.ps--clicking .ps__thumb-y {
+      background-color: $grey500;
+      width: 5px;
+    }
+  }
+  .ps__thumb-y {
+    background-color: $grey500;
+    border-radius: 6px;
+    width: 5px;
+    right: 0;
+  }
+}
+
+.scrollbar-container.ps,
+.scrollbar-container > .ps {
+  &.ps--active-y > .ps__rail-y {
+    width: 5px;
+    background-color: transparent !important;
+    z-index: 999;
+    &:hover,
+    &.ps--clicking {
+      width: 5px;
+      background-color: transparent;
+    }
+  }
+  &.ps--scrolling-y > .ps__rail-y,
+  &.ps--scrolling-x > .ps__rail-x {
+    opacity: 0.4;
+    background-color: transparent;
+  }
+}
+
+// ==============================|| ANIMATION KEYFRAMES ||============================== //
+
+@keyframes wings {
+  50% {
+    transform: translateY(-40px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateZ(0);
+  }
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -5px, 0);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -7px, 0);
+  }
+  80% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateZ(0);
+  }
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+}
+
+@keyframes slideY {
+  0%,
+  50%,
+  100% {
+    transform: translateY(0px);
+  }
+  25% {
+    transform: translateY(-10px);
+  }
+  75% {
+    transform: translateY(10px);
+  }
+}
+
+@keyframes slideX {
+  0%,
+  50%,
+  100% {
+    transform: translateX(0px);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
--- a/src/config.js
+++ b/src/config.js
@ -0,0 +1,43 @@
+export const JWT_API = {
+  secret: 'SECRET-KEY',
+  timeout: '1 days'
+};
+
+export const FIREBASE_API = {
+  apiKey: 'AIzaSyBernKzdSojh_vWXBHt0aRhf5SC9VLChbM',
+  authDomain: 'berry-material-react.firebaseapp.com',
+  projectId: 'berry-material-react',
+  storageBucket: 'berry-material-react.appspot.com',
+  messagingSenderId: '901111229354',
+  appId: '1:901111229354:web:a5ae5aa95486297d69d9d3',
+  measurementId: 'G-MGJHSL8XW3'
+};
+
+export const AUTH0_API = {
+  client_id: '7T4IlWis4DKHSbG8JAye4Ipk0rvXkH9V',
+  domain: 'dev-w0-vxep3.us.auth0.com'
+};
+
+export const AWS_API = {
+  poolId: 'us-east-1_AOfOTXLvD',
+  appClientId: '3eau2osduslvb7vks3vsh9t7b0'
+};
+
+// basename: only at build time to set, and Don't add '/' at end off BASENAME for breadcrumbs, also Don't put only '/' use blank('') instead,
+// like '/berry-material-react/react/default'
+export const BASE_PATH = '';
+
+export const DASHBOARD_PATH = '/sample-page';
+
+const config = {
+  fontFamily: `'Roboto', sans-serif`,
+  borderRadius: 8,
+  outlinedFilled: true,
+  navType: 'light', // light, dark
+  presetColor: 'default', // default, theme1, theme2, theme3, theme4, theme5, theme6
+  locale: 'en', // 'en' - English, 'fr' - French, 'ro' - Romanian, 'zh' - Chinese
+  rtlLayout: false,
+  container: false
+};
+
+export default config;
--- a/src/contexts/AWSCognitoContext.js
+++ b/src/contexts/AWSCognitoContext.js
@ -0,0 +1,153 @@
+import PropTypes from 'prop-types';
+import React, { createContext, useEffect, useReducer } from 'react';
+
+// third-party
+import { CognitoUser, CognitoUserPool, CognitoUserAttribute, AuthenticationDetails } from 'amazon-cognito-identity-js';
+
+// reducer - state management
+import { LOGIN, LOGOUT } from 'store/actions';
+import accountReducer from 'store/accountReducer';
+
+// project imports
+import Loader from 'ui-component/Loader';
+import { AWS_API } from 'config';
+
+// constant
+const initialState = {
+    isLoggedIn: false,
+    isInitialized: false,
+    user: null
+};
+
+export const userPool = new CognitoUserPool({
+    UserPoolId: AWS_API.poolId || '',
+    ClientId: AWS_API.appClientId || ''
+});
+
+const setSession = (serviceToken? | null) => {
+    if (serviceToken) {
+        localStorage.setItem('serviceToken', serviceToken);
+    } else {
+        localStorage.removeItem('serviceToken');
+    }
+};
+
+// ==============================|| AWS Cognito CONTEXT & PROVIDER ||============================== //
+const AWSCognitoContext = createContext(null);
+
+export const AWSCognitoProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(accountReducer, initialState);
+
+    useEffect(() => {
+        const init = async () => {
+            try {
+                const serviceToken = window.localStorage.getItem('serviceToken');
+                if (serviceToken) {
+                    setSession(serviceToken);
+                    dispatch({
+                        type: LOGIN,
+                        payload: {
+                            isLoggedIn: true,
+                            user: {
+                                name: 'Betty'
+                            }
+                        }
+                    });
+                } else {
+                    dispatch({
+                        type: LOGOUT
+                    });
+                }
+            } catch (err) {
+                console.error(err);
+                dispatch({
+                    type: LOGOUT
+                });
+            }
+        };
+
+        init();
+    }, []);
+
+    const login = async (email, password) => {
+        const usr = new CognitoUser({
+            Username: email,
+            Pool: userPool
+        });
+
+        const authData = new AuthenticationDetails({
+            Username: email,
+            Password: password
+        });
+
+        usr.authenticateUser(authData, {
+            onSuccess: (session) => {
+                setSession(session.getAccessToken().getJwtToken());
+
+                dispatch({
+                    type: LOGIN,
+                    payload: {
+                        isLoggedIn: true,
+                        user: {
+                            email: authData.getUsername(),
+                            name: 'John Doe'
+                        }
+                    }
+                });
+            },
+            onFailure: (_err) => {},
+            newPasswordRequired: (userAttributes, requiredAttributes) => {
+                // // User was signed up by an admin and must provide new
+                // // password and required attributes, if any, to complete
+                // // authentication.
+                // // the api doesn't accept this field back
+                // delete userAttributes.email_verified;
+                // // unsure about this field, but I don't send this back
+                // delete userAttributes.phone_number_verified;
+                // // Get these details and call
+                // usr.completeNewPasswordChallenge(password, userAttributes, requiredAttributes);
+            }
+        });
+    };
+
+    const register = (email, password, firstName, lastName) =>
+        new Promise((success, rej) => {
+            userPool.signUp(
+                email,
+                password,
+                [
+                    new CognitoUserAttribute({ Name: 'email', Value: email }),
+                    new CognitoUserAttribute({ Name: 'name', Value: `${firstName} ${lastName}` })
+                ],
+                [],
+                async (err, result) => {
+                    if (err) {
+                        rej(err);
+                        return;
+                    }
+                    success(result);
+                }
+            );
+        });
+
+    const logout = () => {
+        const loggedInUser = userPool.getCurrentUser();
+        if (loggedInUser) {
+            setSession(null);
+            loggedInUser.signOut();
+            dispatch({ type: LOGOUT });
+        }
+    };
+
+    if (state.isInitialized !== undefined && !state.isInitialized) {
+        return <Loader />;
+    }
+
+    return <AWSCognitoContext.Provider value={{ ...state, login, logout, register }}>{children}</AWSCognitoContext.Provider>;
+};
+
+AWSCognitoProvider.propTypes = {
+    children: PropTypes.node
+};
+
+export default AWSCognitoContext;
--- a/src/contexts/Auth0Context.js
+++ b/src/contexts/Auth0Context.js
@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import { createContext, useEffect, useReducer } from 'react';
+
+// third-party
+import { Auth0Client } from '@auth0/auth0-spa-js';
+
+// reducer - state management
+import { LOGIN, LOGOUT } from 'store/actions';
+import accountReducer from 'store/accountReducer';
+
+// project imports
+import Loader from 'ui-component/Loader';
+import { AUTH0_API } from 'config';
+
+// constant
+let auth0Client;
+
+const initialState = {
+  isLoggedIn: false,
+  isInitialized: false,
+  user: null
+};
+
+// ==============================|| AUTH0 CONTEXT & PROVIDER ||============================== //
+
+const Auth0Context = createContext(null);
+
+export const Auth0Provider = ({ children }) => {
+  const [state, dispatch] = useReducer(accountReducer, initialState);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        auth0Client = new Auth0Client({
+          redirect_uri: window.location.origin,
+          ...AUTH0_API
+        });
+
+        await auth0Client.checkSession();
+        const isLoggedIn = await auth0Client.isAuthenticated();
+
+        if (isLoggedIn) {
+          const user = await auth0Client.getUser();
+
+          dispatch({
+            type: LOGIN,
+            payload: {
+              isLoggedIn: true,
+              user: {
+                id: user?.sub,
+                email: user?.email
+              }
+            }
+          });
+        } else {
+          dispatch({
+            type: LOGOUT
+          });
+        }
+      } catch (err) {
+        dispatch({
+          type: LOGOUT
+        });
+      }
+    };
+
+    init();
+  }, []);
+
+  const login = async (options) => {
+    await auth0Client.loginWithPopup(options);
+    const isLoggedIn = await auth0Client.isAuthenticated();
+
+    if (isLoggedIn) {
+      const user = await auth0Client.getUser();
+      dispatch({
+        type: LOGIN,
+        payload: {
+          isLoggedIn: true,
+          user: {
+            id: user?.sub,
+            avatar: user?.picture,
+            email: user?.email,
+            name: user?.name,
+            tier: 'Premium'
+          }
+        }
+      });
+    }
+  };
+
+  const logout = () => {
+    auth0Client.logout();
+
+    dispatch({
+      type: LOGOUT
+    });
+  };
+
+  const resetPassword = (email) => {};
+
+  const updateProfile = () => {};
+
+  if (state.isInitialized !== undefined && !state.isInitialized) {
+    return <Loader />;
+  }
+
+  return <Auth0Context.Provider value={{ ...state, login, logout, resetPassword, updateProfile }}>{children}</Auth0Context.Provider>;
+};
+
+Auth0Provider.propTypes = {
+  children: PropTypes.node
+};
+
+export default Auth0Context;
--- a/src/contexts/ConfigContext.js
+++ b/src/contexts/ConfigContext.js
@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import { createContext } from 'react';
+
+// project import
+import defaultConfig from 'config';
+import useLocalStorage from 'hooks/useLocalStorage';
+
+// initial state
+const initialState = {
+  ...defaultConfig,
+  onChangeMenuType: () => {},
+  onChangePresetColor: () => {},
+  onChangeLocale: () => {},
+  onChangeRTL: () => {},
+  onChangeContainer: () => {},
+  onChangeFontFamily: () => {},
+  onChangeBorderRadius: () => {},
+  onChangeOutlinedField: () => {}
+};
+
+// ==============================|| CONFIG CONTEXT & PROVIDER ||============================== //
+
+const ConfigContext = createContext(initialState);
+
+function ConfigProvider({ children }) {
+  const [config, setConfig] = useLocalStorage('berry-config', {
+    fontFamily: initialState.fontFamily,
+    borderRadius: initialState.borderRadius,
+    outlinedFilled: initialState.outlinedFilled,
+    navType: initialState.navType,
+    presetColor: initialState.presetColor,
+    locale: initialState.locale,
+    rtlLayout: initialState.rtlLayout
+  });
+
+  const onChangeMenuType = (navType) => {
+    setConfig({
+      ...config,
+      navType
+    });
+  };
+
+  const onChangePresetColor = (presetColor) => {
+    setConfig({
+      ...config,
+      presetColor
+    });
+  };
+
+  const onChangeLocale = (locale) => {
+    setConfig({
+      ...config,
+      locale
+    });
+  };
+
+  const onChangeRTL = (rtlLayout) => {
+    setConfig({
+      ...config,
+      rtlLayout
+    });
+  };
+
+  const onChangeContainer = () => {
+    setConfig({
+      ...config,
+      container: !config.container
+    });
+  };
+
+  const onChangeFontFamily = (fontFamily) => {
+    setConfig({
+      ...config,
+      fontFamily
+    });
+  };
+
+  const onChangeBorderRadius = (event, newValue) => {
+    setConfig({
+      ...config,
+      borderRadius: newValue
+    });
+  };
+
+  const onChangeOutlinedField = (outlinedFilled) => {
+    setConfig({
+      ...config,
+      outlinedFilled
+    });
+  };
+
+  return (
+    <ConfigContext.Provider
+      value={{
+        ...config,
+        onChangeMenuType,
+        onChangePresetColor,
+        onChangeLocale,
+        onChangeRTL,
+        onChangeContainer,
+        onChangeFontFamily,
+        onChangeBorderRadius,
+        onChangeOutlinedField
+      }}
+    >
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+ConfigProvider.propTypes = {
+  children: PropTypes.node
+};
+
+export { ConfigProvider, ConfigContext };
--- a/src/contexts/FirebaseContext.js
+++ b/src/contexts/FirebaseContext.js
@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import { createContext, useEffect, useReducer } from 'react';
+
+// third-party
+import firebase from 'firebase/compat/app';
+import 'firebase/compat/auth';
+
+// action - state management
+import { LOGIN, LOGOUT } from 'store/actions';
+import accountReducer from 'store/accountReducer';
+
+// project imports
+import Loader from 'ui-component/Loader';
+import { FIREBASE_API } from 'config';
+
+// firebase initialize
+if (!firebase.apps.length) {
+  firebase.initializeApp(FIREBASE_API);
+}
+
+// const
+const initialState = {
+  isLoggedIn: false,
+  isInitialized: false,
+  user: null
+};
+
+// ==============================|| FIREBASE CONTEXT & PROVIDER ||============================== //
+
+const FirebaseContext = createContext(null);
+
+export const FirebaseProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(accountReducer, initialState);
+
+  useEffect(
+    () =>
+      firebase.auth().onAuthStateChanged((user) => {
+        if (user) {
+          dispatch({
+            type: LOGIN,
+            payload: {
+              isLoggedIn: true,
+              user: {
+                id: user.uid,
+                email: user.email,
+                name: user.displayName || 'John Doe'
+              }
+            }
+          });
+        } else {
+          dispatch({
+            type: LOGOUT
+          });
+        }
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [dispatch]
+  );
+
+  const firebaseEmailPasswordSignIn = (email, password) => firebase.auth().signInWithEmailAndPassword(email, password);
+
+  const firebaseGoogleSignIn = () => {
+    const provider = new firebase.auth.GoogleAuthProvider();
+
+    return firebase.auth().signInWithPopup(provider);
+  };
+
+  const firebaseRegister = async (email, password) => firebase.auth().createUserWithEmailAndPassword(email, password);
+
+  const logout = () => firebase.auth().signOut();
+
+  const resetPassword = async (email) => {
+    await firebase.auth().sendPasswordResetEmail(email);
+  };
+
+  const updateProfile = () => {};
+  if (state.isInitialized !== undefined && !state.isInitialized) {
+    return <Loader />;
+  }
+
+  return (
+    <FirebaseContext.Provider
+      value={{
+        ...state,
+        firebaseRegister,
+        firebaseEmailPasswordSignIn,
+        login: () => {},
+        firebaseGoogleSignIn,
+        logout,
+        resetPassword,
+        updateProfile
+      }}
+    >
+      {children}
+    </FirebaseContext.Provider>
+  );
+};
+
+FirebaseProvider.propTypes = {
+  children: PropTypes.node
+};
+
+export default FirebaseContext;
--- a/src/contexts/JWTContext.js
+++ b/src/contexts/JWTContext.js
@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import { createContext, useEffect, useReducer } from 'react';
+
+// third-party
+import { Chance } from 'chance';
+import jwtDecode from 'jwt-decode';
+
+// reducer - state management
+import { LOGIN, LOGOUT } from 'store/actions';
+import accountReducer from 'store/accountReducer';
+
+// project imports
+import Loader from 'ui-component/Loader';
+import axios from 'utils/axios';
+
+const chance = new Chance();
+
+// constant
+const initialState = {
+  isLoggedIn: false,
+  isInitialized: false,
+  user: null
+};
+
+const verifyToken = (serviceToken) => {
+  if (!serviceToken) {
+    return false;
+  }
+  const decoded = jwtDecode(serviceToken);
+  /**
+   * Property 'exp' does not exist on type '<T = unknown>(token, options?: JwtDecodeOptions | undefined) => T'.
+   */
+  return decoded.exp > Date.now() / 1000;
+};
+
+const setSession = (serviceToken) => {
+  if (serviceToken) {
+    localStorage.setItem('serviceToken', serviceToken);
+    axios.defaults.headers.common.Authorization = `Bearer ${serviceToken}`;
+  } else {
+    localStorage.removeItem('serviceToken');
+    delete axios.defaults.headers.common.Authorization;
+  }
+};
+
+// ==============================|| JWT CONTEXT & PROVIDER ||============================== //
+const JWTContext = createContext(null);
+
+export const JWTProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(accountReducer, initialState);
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        const serviceToken = window.localStorage.getItem('serviceToken');
+        if (serviceToken && verifyToken(serviceToken)) {
+          setSession(serviceToken);
+          const response = await axios.get('/api/account/me');
+          const { user } = response.data;
+          dispatch({
+            type: LOGIN,
+            payload: {
+              isLoggedIn: true,
+              user
+            }
+          });
+        } else {
+          dispatch({
+            type: LOGOUT
+          });
+        }
+      } catch (err) {
+        console.error(err);
+        dispatch({
+          type: LOGOUT
+        });
+      }
+    };
+
+    init();
+  }, []);
+
+  const login = async (email, password) => {
+    const response = await axios.post('/api/account/login', { email, password });
+    const { serviceToken, user } = response.data;
+    setSession(serviceToken);
+    dispatch({
+      type: LOGIN,
+      payload: {
+        isLoggedIn: true,
+        user
+      }
+    });
+  };
+
+  const register = async (email, password, firstName, lastName) => {
+    // todo: this flow need to be recode as it not verified
+    const id = chance.bb_pin();
+    const response = await axios.post('/api/account/register', {
+      id,
+      email,
+      password,
+      firstName,
+      lastName
+    });
+    let users = response.data;
+
+    if (window.localStorage.getItem('users') !== undefined && window.localStorage.getItem('users') !== null) {
+      const localUsers = window.localStorage.getItem('users');
+      users = [
+        ...JSON.parse(localUsers),
+        {
+          id,
+          email,
+          password,
+          name: `${firstName} ${lastName}`
+        }
+      ];
+    }
+
+    window.localStorage.setItem('users', JSON.stringify(users));
+  };
+
+  const logout = () => {
+    setSession(null);
+    dispatch({ type: LOGOUT });
+  };
+
+  const resetPassword = (email) => console.log(email);
+
+  const updateProfile = () => {};
+
+  if (state.isInitialized !== undefined && !state.isInitialized) {
+    return <Loader />;
+  }
+
+  return <JWTContext.Provider value={{ ...state, login, logout, register, resetPassword, updateProfile }}>{children}</JWTContext.Provider>;
+};
+
+JWTProvider.propTypes = {
+  children: PropTypes.node
+};
+
+export default JWTContext;
--- a/src/hooks/useAuth.js
+++ b/src/hooks/useAuth.js
@ -0,0 +1,19 @@
+import { useContext } from 'react';
+
+// auth provider
+import AuthContext from 'contexts/FirebaseContext';
+// import AuthContext from 'contexts/Auth0Context';
+// import AuthContext from 'contexts/JWTContext';
+// import AuthContext from 'contexts/AWSCognitoContext';
+
+// ==============================|| AUTH HOOKS ||============================== //
+
+const useAuth = () => {
+  const context = useContext(AuthContext);
+
+  if (!context) throw new Error('context must be use inside provider');
+
+  return context;
+};
+
+export default useAuth;
--- a/src/hooks/useConfig.js
+++ b/src/hooks/useConfig.js
@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { ConfigContext } from 'contexts/ConfigContext';
+
+// ==============================|| CONFIG - HOOKS  ||============================== //
+
+const useConfig = () => useContext(ConfigContext);
+
+export default useConfig;
--- a/src/hooks/useLocalStorage.js
+++ b/src/hooks/useLocalStorage.js
@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+// ==============================|| CONFIG - LOCAL STORAGE ||============================== //
+
+export default function useLocalStorage(key, defaultValue) {
+  const [value, setValue] = useState(() => {
+    const storedValue = localStorage.getItem(key);
+    return storedValue === null ? defaultValue : JSON.parse(storedValue);
+  });
+
+  useEffect(() => {
+    const listener = (e) => {
+      if (e.storageArea === localStorage && e.key === key) {
+        setValue(e.newValue ? JSON.parse(e.newValue) : e.newValue);
+      }
+    };
+    window.addEventListener('storage', listener);
+
+    return () => {
+      window.removeEventListener('storage', listener);
+    };
+  }, [key, defaultValue]);
+
+  const setValueInLocalStorage = (newValue) => {
+    setValue((currentValue) => {
+      const result = typeof newValue === 'function' ? newValue(currentValue) : newValue;
+      localStorage.setItem(key, JSON.stringify(result));
+      return result;
+    });
+  };
+
+  return [value, setValueInLocalStorage];
+}
--- a/src/hooks/useScriptRef.js
+++ b/src/hooks/useScriptRef.js
@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+// ==============================|| ELEMENT REFERENCE HOOKS  ||============================== //
+
+const useScriptRef = () => {
+  const scripted = useRef(true);
+
+  useEffect(
+    () => () => {
+      scripted.current = false;
+    },
+    []
+  );
+
+  return scripted;
+};
+
+export default useScriptRef;
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,42 @@
+import ReactDOM from 'react-dom';
+
+// third party
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+
+// project imports
+import App from 'App';
+import { BASE_PATH } from 'config';
+import { store, persister } from 'store';
+import * as serviceWorker from 'serviceWorker';
+import reportWebVitals from 'reportWebVitals';
+import { ConfigProvider } from 'contexts/ConfigContext';
+
+// style + assets
+import 'assets/scss/style.scss';
+
+// ==============================|| REACT DOM RENDER  ||============================== //
+
+ReactDOM.render(
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persister}>
+      <ConfigProvider>
+        <BrowserRouter basename={BASE_PATH}>
+          <App />
+        </BrowserRouter>
+      </ConfigProvider>
+    </PersistGate>
+  </Provider>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/src/layout/Customization/BorderRadius.js
+++ b/src/layout/Customization/BorderRadius.js
@ -0,0 +1,56 @@
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Grid, Slider, Typography } from '@mui/material';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import SubCard from 'ui-component/cards/SubCard';
+
+// concat 'px'
+function valueText(value) {
+  return `${value}px`;
+}
+
+const BorderRadius = () => {
+  const theme = useTheme();
+  const { borderRadius, onChangeBorderRadius } = useConfig();
+
+  return (
+    <SubCard title="Border Radius">
+      <Grid item xs={12} container spacing={2} alignItems="center" sx={{ mt: 2.5 }}>
+        <Grid item>
+          <Typography variant="h6" color="secondary">
+            4px
+          </Typography>
+        </Grid>
+        <Grid item xs>
+          <Slider
+            size="small"
+            value={borderRadius}
+            onChange={onChangeBorderRadius}
+            getAriaValueText={valueText}
+            valueLabelDisplay="on"
+            aria-labelledby="discrete-slider-small-steps"
+            marks
+            step={2}
+            min={4}
+            max={24}
+            color="secondary"
+            sx={{
+              '& .MuiSlider-valueLabel': {
+                color: theme.palette.mode === 'dark' ? 'secondary.dark' : 'secondary.light'
+              }
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <Typography variant="h6" color="secondary">
+            24px
+          </Typography>
+        </Grid>
+      </Grid>
+    </SubCard>
+  );
+};
+
+export default BorderRadius;
--- a/src/layout/Customization/BoxContainer.js
+++ b/src/layout/Customization/BoxContainer.js
@ -0,0 +1,25 @@
+// material-ui
+import { FormControl, FormControlLabel, Switch } from '@mui/material';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import SubCard from 'ui-component/cards/SubCard';
+
+const BoxContainer = () => {
+  const { container, onChangeContainer } = useConfig();
+
+  return (
+    <SubCard title="Box Container">
+      <FormControl component="fieldset" sx={{ mt: 2 }}>
+        <FormControlLabel
+          control={
+            <Switch checked={container} onChange={() => onChangeContainer()} inputProps={{ 'aria-label': 'controlled-direction' }} />
+          }
+          label="Container"
+        />
+      </FormControl>
+    </SubCard>
+  );
+};
+
+export default BoxContainer;
--- a/src/layout/Customization/FontFamily.js
+++ b/src/layout/Customization/FontFamily.js
@ -0,0 +1,74 @@
+import { useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import SubCard from 'ui-component/cards/SubCard';
+
+const FontFamily = () => {
+  const theme = useTheme();
+  const { fontFamily, onChangeFontFamily } = useConfig();
+
+  let initialFont;
+  switch (fontFamily) {
+    case `'Inter', sans-serif`:
+      initialFont = 'Inter';
+      break;
+    case `'Poppins', sans-serif`:
+      initialFont = 'Poppins';
+      break;
+    case `'Roboto', sans-serif`:
+    default:
+      initialFont = 'Roboto';
+      break;
+  }
+
+  // state - font family
+  const [font, setFont] = useState(initialFont);
+
+  const handleFont = (event) => {
+    setFont(event.target.value);
+    onChangeFontFamily(event.target.value);
+  };
+
+  return (
+    <SubCard title="Font Family">
+      <FormControl>
+        <RadioGroup aria-label="font-family" value={font} onChange={handleFont} name="row-radio-buttons-group">
+          <FormControlLabel
+            value="Roboto"
+            control={<Radio />}
+            label="Roboto"
+            sx={{
+              '& .MuiSvgIcon-root': { fontSize: 28 },
+              '& .MuiFormControlLabel-label': { color: theme.palette.grey[900] }
+            }}
+          />
+          <FormControlLabel
+            value="Poppins"
+            control={<Radio />}
+            label="Poppins"
+            sx={{
+              '& .MuiSvgIcon-root': { fontSize: 28 },
+              '& .MuiFormControlLabel-label': { color: theme.palette.grey[900] }
+            }}
+          />
+          <FormControlLabel
+            value="Inter"
+            control={<Radio />}
+            label="Inter"
+            sx={{
+              '& .MuiSvgIcon-root': { fontSize: 28 },
+              '& .MuiFormControlLabel-label': { color: theme.palette.grey[900] }
+            }}
+          />
+        </RadioGroup>
+      </FormControl>
+    </SubCard>
+  );
+};
+
+export default FontFamily;
--- a/src/layout/Customization/InputFilled.js
+++ b/src/layout/Customization/InputFilled.js
@ -0,0 +1,29 @@
+// material-ui
+import { Grid, Stack, Switch, TextField } from '@mui/material';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import SubCard from 'ui-component/cards/SubCard';
+
+const InputFilled = () => {
+  const { outlinedFilled, onChangeOutlinedField } = useConfig();
+
+  return (
+    <SubCard title="Input Outlined With Filled">
+      <Grid item xs={12} container spacing={2} alignItems="center">
+        <Grid item>
+          <Stack spacing={2}>
+            <Switch
+              checked={outlinedFilled}
+              onChange={(event) => onChangeOutlinedField(event.target.checked)}
+              inputProps={{ 'aria-label': 'controlled' }}
+            />
+            <TextField fullWidth id="outlined-basic" label={outlinedFilled ? 'With Background' : 'Without Background'} />
+          </Stack>
+        </Grid>
+      </Grid>
+    </SubCard>
+  );
+};
+
+export default InputFilled;
--- a/src/layout/Customization/Layout.js
+++ b/src/layout/Customization/Layout.js
@ -0,0 +1,61 @@
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Switch } from '@mui/material';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import SubCard from 'ui-component/cards/SubCard';
+
+const Layout = () => {
+  const theme = useTheme();
+  const { navType, rtlLayout, onChangeMenuType, onChangeRTL } = useConfig();
+
+  return (
+    <SubCard title="Layout">
+      <FormControl component="fieldset">
+        <FormLabel component="legend">Mode</FormLabel>
+        <RadioGroup
+          row
+          aria-label="layout"
+          value={navType}
+          onChange={(e) => onChangeMenuType(e.target.value)}
+          name="row-radio-buttons-group"
+        >
+          <FormControlLabel
+            value="light"
+            control={<Radio />}
+            label="Light"
+            sx={{
+              '& .MuiSvgIcon-root': { fontSize: 28 },
+              '& .MuiFormControlLabel-label': { color: theme.palette.grey[900] }
+            }}
+          />
+          <FormControlLabel
+            value="dark"
+            control={<Radio />}
+            label="Dark"
+            sx={{
+              '& .MuiSvgIcon-root': { fontSize: 28 },
+              '& .MuiFormControlLabel-label': { color: theme.palette.grey[900] }
+            }}
+          />
+        </RadioGroup>
+      </FormControl>
+      <FormControl component="fieldset" sx={{ mt: 2 }}>
+        <FormLabel component="legend">Direction</FormLabel>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={rtlLayout}
+              onChange={(event) => onChangeRTL(event.target.checked)}
+              inputProps={{ 'aria-label': 'controlled-direction' }}
+            />
+          }
+          label="RTL"
+        />
+      </FormControl>
+    </SubCard>
+  );
+};
+
+export default Layout;
--- a/src/layout/Customization/PresetColor.js
+++ b/src/layout/Customization/PresetColor.js
@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Grid } from '@mui/material';
+import { IconChecks } from '@tabler/icons';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import SubCard from 'ui-component/cards/SubCard';
+
+// color import
+import colors from 'assets/scss/_themes-vars.module.scss';
+import theme1 from 'assets/scss/_theme1.module.scss';
+import theme2 from 'assets/scss/_theme2.module.scss';
+import theme3 from 'assets/scss/_theme3.module.scss';
+import theme4 from 'assets/scss/_theme4.module.scss';
+import theme5 from 'assets/scss/_theme5.module.scss';
+import theme6 from 'assets/scss/_theme6.module.scss';
+
+const PresetColorBox = ({ color, presetColor, setPresetColor }) => (
+  <Grid item>
+    <Avatar
+      variant="rounded"
+      color="inherit"
+      sx={{
+        background: `linear-gradient(135deg, ${color.primary} 50%, ${color.secondary} 50%)`,
+        opacity: presetColor === color.id ? 0.6 : 1,
+        cursor: 'pointer'
+      }}
+      onClick={() => setPresetColor(color?.id)}
+    >
+      {presetColor === color.id && <IconChecks color="#fff" />}
+    </Avatar>
+  </Grid>
+);
+
+PresetColorBox.propTypes = {
+  color: PropTypes.shape({
+    id: PropTypes.string,
+    primary: PropTypes.string,
+    secondary: PropTypes.string
+  }),
+  presetColor: PropTypes.string,
+  setPresetColor: PropTypes.func
+};
+
+const PresetColor = () => {
+  const theme = useTheme();
+  const { presetColor, onChangePresetColor } = useConfig();
+
+  const colorOptions = [
+    {
+      id: 'default',
+      primary: theme.palette.mode === 'dark' ? colors.darkPrimaryMain : colors.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? colors.darkSecondaryMain : colors.secondaryMain
+    },
+    {
+      id: 'theme1',
+      primary: theme.palette.mode === 'dark' ? theme1.darkPrimaryMain : theme1.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? theme1.darkSecondaryMain : theme1.secondaryMain
+    },
+    {
+      id: 'theme2',
+      primary: theme.palette.mode === 'dark' ? theme2.darkPrimaryMain : theme2.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? theme2.darkSecondaryMain : theme2.secondaryMain
+    },
+    {
+      id: 'theme3',
+      primary: theme.palette.mode === 'dark' ? theme3.darkPrimaryMain : theme3.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? theme3.darkSecondaryMain : theme3.secondaryMain
+    },
+    {
+      id: 'theme4',
+      primary: theme.palette.mode === 'dark' ? theme4.darkPrimaryMain : theme4.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? theme4.darkSecondaryMain : theme4.secondaryMain
+    },
+    {
+      id: 'theme5',
+      primary: theme.palette.mode === 'dark' ? theme5.darkPrimaryMain : theme5.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? theme5.darkSecondaryMain : theme5.secondaryMain
+    },
+    {
+      id: 'theme6',
+      primary: theme.palette.mode === 'dark' ? theme6.darkPrimaryMain : theme6.primaryMain,
+      secondary: theme.palette.mode === 'dark' ? theme6.darkSecondaryMain : theme6.secondaryMain
+    }
+  ];
+
+  return (
+    <SubCard title="Preset Color">
+      <Grid item container spacing={2} alignItems="center">
+        {colorOptions.map((color, index) => (
+          <PresetColorBox key={index} color={color} presetColor={presetColor} setPresetColor={onChangePresetColor} />
+        ))}
+      </Grid>
+    </SubCard>
+  );
+};
+
+export default PresetColor;
--- a/src/layout/Customization/index.js
+++ b/src/layout/Customization/index.js
@ -0,0 +1,108 @@
+import { useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Drawer, Fab, Grid, IconButton, Tooltip } from '@mui/material';
+import { IconSettings } from '@tabler/icons';
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar';
+
+// project imports
+import BorderRadius from './BorderRadius';
+import Layout from './Layout';
+import PresetColor from './PresetColor';
+import FontFamily from './FontFamily';
+import InputFilled from './InputFilled';
+import BoxContainer from './BoxContainer';
+import AnimateButton from 'ui-component/extended/AnimateButton';
+import { gridSpacing } from 'store/constant';
+
+// ==============================|| LIVE CUSTOMIZATION ||============================== //
+
+const Customization = () => {
+  const theme = useTheme();
+
+  // drawer on/off
+  const [open, setOpen] = useState(false);
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <>
+      {/* toggle button */}
+      <Tooltip title="Live Customize">
+        <Fab
+          component="div"
+          onClick={handleToggle}
+          size="medium"
+          variant="circular"
+          color="secondary"
+          sx={{
+            borderRadius: 0,
+            borderTopLeftRadius: '50%',
+            borderBottomLeftRadius: '50%',
+            borderTopRightRadius: '50%',
+            borderBottomRightRadius: '4px',
+            top: '25%',
+            position: 'fixed',
+            right: 10,
+            zIndex: theme.zIndex.speedDial,
+            boxShadow: theme.customShadows.secondary
+          }}
+        >
+          <AnimateButton type="rotate">
+            <IconButton color="inherit" size="large" disableRipple>
+              <IconSettings />
+            </IconButton>
+          </AnimateButton>
+        </Fab>
+      </Tooltip>
+
+      <Drawer
+        anchor="right"
+        onClose={handleToggle}
+        open={open}
+        PaperProps={{
+          sx: {
+            width: 280
+          }
+        }}
+      >
+        {open && (
+          <PerfectScrollbar component="div">
+            <Grid container spacing={gridSpacing} sx={{ p: 3 }}>
+              <Grid item xs={12}>
+                {/* layout type */}
+                <Layout />
+              </Grid>
+              <Grid item xs={12}>
+                {/* Theme Preset Color */}
+                <PresetColor />
+              </Grid>
+              <Grid item xs={12}>
+                {/* font family */}
+                <FontFamily />
+              </Grid>
+              <Grid item xs={12}>
+                {/* border radius */}
+                <BorderRadius />
+              </Grid>
+              <Grid item xs={12}>
+                {/* filled with outline textfield */}
+                <InputFilled />
+              </Grid>
+              <Grid item xs={12}>
+                {/* box container */}
+                <BoxContainer />
+              </Grid>
+            </Grid>
+          </PerfectScrollbar>
+        )}
+      </Drawer>
+    </>
+  );
+};
+
+export default Customization;
--- a/src/layout/MainLayout/Header/LocalizationSection/index.js
+++ b/src/layout/MainLayout/Header/LocalizationSection/index.js
@ -0,0 +1,203 @@
+import { useEffect, useRef, useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import {
+  Avatar,
+  Box,
+  ClickAwayListener,
+  Grid,
+  List,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Popper,
+  Typography,
+  useMediaQuery
+} from '@mui/material';
+
+// project imports
+import Transitions from 'ui-component/extended/Transitions';
+
+// assets
+import TranslateTwoToneIcon from '@mui/icons-material/TranslateTwoTone';
+import useConfig from 'hooks/useConfig';
+
+// ==============================|| LOCALIZATION ||============================== //
+
+const LocalizationSection = () => {
+  const { borderRadius, locale, onChangeLocale } = useConfig();
+
+  const theme = useTheme();
+  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
+
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+  const [language, setLanguage] = useState(locale);
+
+  const handleListItemClick = (event, lng) => {
+    setLanguage(lng);
+    onChangeLocale(lng);
+    setOpen(false);
+  };
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+    prevOpen.current = open;
+  }, [open]);
+
+  useEffect(() => {
+    setLanguage(locale);
+  }, [locale]);
+
+  return (
+    <>
+      <Box
+        sx={{
+          ml: 2,
+          [theme.breakpoints.down('md')]: {
+            ml: 1
+          }
+        }}
+      >
+        <Avatar
+          variant="rounded"
+          sx={{
+            ...theme.typography.commonAvatar,
+            ...theme.typography.mediumAvatar,
+            border: '1px solid',
+            borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light,
+            background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light,
+            color: theme.palette.primary.dark,
+            transition: 'all .2s ease-in-out',
+            '&[aria-controls="menu-list-grow"],&:hover': {
+              borderColor: theme.palette.primary.main,
+              background: theme.palette.primary.main,
+              color: theme.palette.primary.light
+            }
+          }}
+          ref={anchorRef}
+          aria-controls={open ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={handleToggle}
+          color="inherit"
+        >
+          {language !== 'en' && (
+            <Typography variant="h5" sx={{ textTransform: 'uppercase' }} color="inherit">
+              {language}
+            </Typography>
+          )}
+          {language === 'en' && <TranslateTwoToneIcon sx={{ fontSize: '1.3rem' }} />}
+        </Avatar>
+      </Box>
+
+      <Popper
+        placement={matchesXs ? 'bottom-start' : 'bottom'}
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [matchesXs ? 0 : 0, 20]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Transitions position={matchesXs ? 'top-left' : 'top'} in={open} {...TransitionProps}>
+              <Paper elevation={16}>
+                {open && (
+                  <List
+                    component="nav"
+                    sx={{
+                      width: '100%',
+                      minWidth: 200,
+                      maxWidth: 280,
+                      bgcolor: theme.palette.background.paper,
+                      borderRadius: `${borderRadius}px`,
+                      [theme.breakpoints.down('md')]: {
+                        maxWidth: 250
+                      }
+                    }}
+                  >
+                    <ListItemButton selected={language === 'en'} onClick={(event) => handleListItemClick(event, 'en')}>
+                      <ListItemText
+                        primary={
+                          <Grid container>
+                            <Typography color="textPrimary">English</Typography>
+                            <Typography variant="caption" color="textSecondary" sx={{ ml: '8px' }}>
+                              (UK)
+                            </Typography>
+                          </Grid>
+                        }
+                      />
+                    </ListItemButton>
+                    <ListItemButton selected={language === 'fr'} onClick={(event) => handleListItemClick(event, 'fr')}>
+                      <ListItemText
+                        primary={
+                          <Grid container>
+                            <Typography color="textPrimary">français</Typography>
+                            <Typography variant="caption" color="textSecondary" sx={{ ml: '8px' }}>
+                              (French)
+                            </Typography>
+                          </Grid>
+                        }
+                      />
+                    </ListItemButton>
+                    <ListItemButton selected={language === 'ro'} onClick={(event) => handleListItemClick(event, 'ro')}>
+                      <ListItemText
+                        primary={
+                          <Grid container>
+                            <Typography color="textPrimary">Română</Typography>
+                            <Typography variant="caption" color="textSecondary" sx={{ ml: '8px' }}>
+                              (Romanian)
+                            </Typography>
+                          </Grid>
+                        }
+                      />
+                    </ListItemButton>
+                    <ListItemButton selected={language === 'zh'} onClick={(event) => handleListItemClick(event, 'zh')}>
+                      <ListItemText
+                        primary={
+                          <Grid container>
+                            <Typography color="textPrimary">中国人</Typography>
+                            <Typography variant="caption" color="textSecondary" sx={{ ml: '8px' }}>
+                              (Chinese)
+                            </Typography>
+                          </Grid>
+                        }
+                      />
+                    </ListItemButton>
+                  </List>
+                )}
+              </Paper>
+            </Transitions>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+export default LocalizationSection;
--- a/src/layout/MainLayout/Header/MegaMenuSection/Banner.js
+++ b/src/layout/MainLayout/Header/MegaMenuSection/Banner.js
--- a/src/layout/MainLayout/Header/MegaMenuSection/index.js
+++ b/src/layout/MainLayout/Header/MegaMenuSection/index.js
@ -0,0 +1,279 @@
+import { useEffect, useRef, useState } from 'react';
+
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import {
+  useMediaQuery,
+  Avatar,
+  ClickAwayListener,
+  Grid,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListSubheader,
+  ListItemText,
+  Paper,
+  Popper,
+  Typography
+} from '@mui/material';
+
+// project imports
+import Banner from './Banner';
+import MainCard from 'ui-component/cards/MainCard';
+import Transitions from 'ui-component/extended/Transitions';
+
+// assets
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import { IconAccessPoint } from '@tabler/icons';
+import { drawerWidth, gridSpacing } from 'store/constant';
+
+const HeaderAvatarStyle = styled(Avatar)(({ theme }) => ({
+  ...theme.typography.commonAvatar,
+  ...theme.typography.mediumAvatar,
+  background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
+  color: theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark,
+  '&:hover': {
+    background: theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark,
+    color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : theme.palette.secondary.light
+  }
+}));
+
+// ==============================|| SEARCH INPUT - MEGA MENu||============================== //
+
+const MegaMenuSection = () => {
+  const theme = useTheme();
+  const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));
+
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    if (matchDownMd && open) setOpen(false);
+    // eslint-disable-next-line
+  }, [matchDownMd]);
+
+  return (
+    <>
+      <HeaderAvatarStyle
+        variant="rounded"
+        ref={anchorRef}
+        aria-controls={open ? 'menu-list-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+        sx={{ display: { xs: 'none', md: 'flex' } }}
+      >
+        <IconAccessPoint stroke={1.5} size="1.3rem" />
+      </HeaderAvatarStyle>
+      <Popper
+        placement="bottom-end"
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [150, 20]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Transitions in={open} {...TransitionProps}>
+              <Paper
+                sx={{
+                  width: {
+                    md: `calc(100vw - 100px)`,
+                    lg: `calc(100vw - ${drawerWidth + 100}px)`,
+                    xl: `calc(100vw - ${drawerWidth + 140}px)`
+                  },
+                  maxWidth: { xl: 900, md: 764 }
+                }}
+              >
+                {open && (
+                  <MainCard
+                    border={false}
+                    elevation={16}
+                    content={false}
+                    boxShadow
+                    shadow={theme.shadows[16]}
+                    sx={{ p: 1, overflow: { xs: 'visible', md: 'hidden' } }}
+                  >
+                    <Grid container spacing={gridSpacing}>
+                      <Grid item md={4}>
+                        <Banner />
+                      </Grid>
+                      <Grid item md={8}>
+                        <Grid
+                          container
+                          spacing={gridSpacing}
+                          sx={{
+                            pt: 3,
+                            '& .MuiListItemButton-root:hover': {
+                              background: 'transparent',
+                              '& .MuiTypography-root': {
+                                color: 'secondary.main'
+                              }
+                            },
+                            '& .MuiListItemIcon-root': {
+                              minWidth: 16
+                            }
+                          }}
+                        >
+                          <Grid item xs={4}>
+                            <List
+                              component="nav"
+                              aria-labelledby="nested-list-user"
+                              subheader={
+                                <ListSubheader id="nested-list-user">
+                                  <Typography variant="subtitle1"> User Quick</Typography>
+                                </ListSubheader>
+                              }
+                            >
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Social Profile" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Account Profile" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="User Cards" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="User List" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Contact" />
+                              </ListItemButton>
+                            </List>
+                          </Grid>
+                          <Grid item xs={4}>
+                            <List
+                              component="nav"
+                              aria-labelledby="nested-list-application"
+                              subheader={
+                                <ListSubheader id="nested-list-application">
+                                  <Typography variant="subtitle1"> Applications </Typography>
+                                </ListSubheader>
+                              }
+                            >
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Chat" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Kanban" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Mail" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Calendar" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="E-Commerce" />
+                              </ListItemButton>
+                            </List>
+                          </Grid>
+                          <Grid item xs={4}>
+                            <List
+                              component="nav"
+                              aria-labelledby="nested-list-primitives"
+                              subheader={
+                                <ListSubheader component="div" id="nested-list-primitives">
+                                  <Typography variant="subtitle1"> Primitives</Typography>
+                                </ListSubheader>
+                              }
+                            >
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Colors" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Typography" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Shadows" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Icons" />
+                              </ListItemButton>
+                              <ListItemButton>
+                                <ListItemIcon>
+                                  <FiberManualRecordIcon sx={{ fontSize: '0.5rem' }} />
+                                </ListItemIcon>
+                                <ListItemText primary="Elements" />
+                              </ListItemButton>
+                            </List>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                    </Grid>
+                  </MainCard>
+                )}
+              </Paper>
+            </Transitions>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+export default MegaMenuSection;
--- a/src/layout/MainLayout/Header/MobileSection/index.js
+++ b/src/layout/MainLayout/Header/MobileSection/index.js
@ -0,0 +1,111 @@
+import { useEffect, useRef, useState } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { AppBar, Box, IconButton, ClickAwayListener, Grid, Paper, Popper, Toolbar, useMediaQuery } from '@mui/material';
+
+// project imports
+import LocalizationSection from '../LocalizationSection';
+import Transitions from 'ui-component/extended/Transitions';
+
+// assets
+import { IconDotsVertical } from '@tabler/icons';
+
+// ==============================|| MOBILE HEADER ||============================== //
+
+const MobileSection = () => {
+  const theme = useTheme();
+  const matchMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+  const [open, setOpen] = useState(false);
+  /**
+   * anchorRef is used on different componets and specifying one type leads to other components throwing an error
+   * */
+  const anchorRef = useRef(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (
+    <>
+      <Box component="span" ref={anchorRef} sx={{ mt: 1, ml: 1 }}>
+        <IconButton
+          sx={{ color: theme.palette.mode === 'dark' ? 'primary.main' : 'inherit', ml: 0.5, cursor: 'pointer' }}
+          onClick={handleToggle}
+        >
+          <IconDotsVertical
+            stroke={1.5}
+            aria-controls={open ? 'menu-list-grow' : undefined}
+            aria-haspopup="true"
+            style={{ fontSize: '1.5rem' }}
+          />
+        </IconButton>
+      </Box>
+
+      <Popper
+        placement="bottom-end"
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        style={{ width: '100%', zIndex: 1 }}
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, matchMobile ? 30 : 10]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Transitions type="zoom" in={open} {...TransitionProps} sx={{ transformOrigin: 'top right' }}>
+              <Paper>
+                {open && (
+                  <AppBar
+                    color="inherit"
+                    sx={{
+                      [theme.breakpoints.down('md')]: {
+                        background: theme.palette.mode === 'dark' ? theme.palette.dark[800] : '#fff'
+                      }
+                    }}
+                  >
+                    <Toolbar sx={{ pt: 2.75, pb: 2.75 }}>
+                      <Grid container justifyContent={matchMobile ? 'space-between' : 'flex-end'} alignItems="center">
+                        <LocalizationSection />
+                      </Grid>
+                    </Toolbar>
+                  </AppBar>
+                )}
+              </Paper>
+            </Transitions>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+export default MobileSection;
--- a/src/layout/MainLayout/Header/NotificationSection/NotificationList.js
+++ b/src/layout/MainLayout/Header/NotificationSection/NotificationList.js
@ -0,0 +1,282 @@
+// material-ui
+import { useTheme, styled } from '@mui/material/styles';
+import {
+  Avatar,
+  Button,
+  Card,
+  CardContent,
+  Chip,
+  Divider,
+  Grid,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
+  Stack,
+  Typography
+} from '@mui/material';
+
+// assets
+import { IconBrandTelegram, IconBuildingStore, IconMailbox, IconPhoto } from '@tabler/icons';
+import User1 from 'assets/images/users/user-round.svg';
+
+// styles
+const ListItemWrapper = styled('div')(({ theme }) => ({
+  cursor: 'pointer',
+  padding: 16,
+  '&:hover': {
+    background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light
+  },
+  '& .MuiListItem-root': {
+    padding: 0
+  }
+}));
+
+// ==============================|| NOTIFICATION LIST ITEM ||============================== //
+
+const NotificationList = () => {
+  const theme = useTheme();
+
+  const chipSX = {
+    height: 24,
+    padding: '0 6px'
+  };
+  const chipErrorSX = {
+    ...chipSX,
+    color: theme.palette.orange.dark,
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.orange.light,
+    marginRight: '5px'
+  };
+
+  const chipWarningSX = {
+    ...chipSX,
+    color: theme.palette.warning.dark,
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.warning.light
+  };
+
+  const chipSuccessSX = {
+    ...chipSX,
+    color: theme.palette.success.dark,
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.success.light,
+    height: 28
+  };
+
+  return (
+    <List
+      sx={{
+        width: '100%',
+        maxWidth: 330,
+        py: 0,
+        borderRadius: '10px',
+        [theme.breakpoints.down('md')]: {
+          maxWidth: 300
+        },
+        '& .MuiListItemSecondaryAction-root': {
+          top: 22
+        },
+        '& .MuiDivider-root': {
+          my: 0
+        },
+        '& .list-container': {
+          pl: 7
+        }
+      }}
+    >
+      <ListItemWrapper>
+        <ListItem alignItems="center">
+          <ListItemAvatar>
+            <Avatar alt="John Doe" src={User1} />
+          </ListItemAvatar>
+          <ListItemText primary="John Doe" />
+          <ListItemSecondaryAction>
+            <Grid container justifyContent="flex-end">
+              <Grid item xs={12}>
+                <Typography variant="caption" display="block" gutterBottom>
+                  2 min ago
+                </Typography>
+              </Grid>
+            </Grid>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <Grid container direction="column" className="list-container">
+          <Grid item xs={12} sx={{ pb: 2 }}>
+            <Typography variant="subtitle2">It is a long established fact that a reader will be distracted</Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Grid container>
+              <Grid item>
+                <Chip label="Unread" sx={chipErrorSX} />
+              </Grid>
+              <Grid item>
+                <Chip label="New" sx={chipWarningSX} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </ListItemWrapper>
+      <Divider />
+      <ListItemWrapper>
+        <ListItem alignItems="center">
+          <ListItemAvatar>
+            <Avatar
+              sx={{
+                color: theme.palette.success.dark,
+                backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.success.light,
+                border: theme.palette.mode === 'dark' ? '1px solid' : 'none',
+                borderColor: theme.palette.success.main
+              }}
+            >
+              <IconBuildingStore stroke={1.5} size="1.3rem" />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={<Typography variant="subtitle1">Store Verification Done</Typography>} />
+          <ListItemSecondaryAction>
+            <Grid container justifyContent="flex-end">
+              <Grid item xs={12}>
+                <Typography variant="caption" display="block" gutterBottom>
+                  2 min ago
+                </Typography>
+              </Grid>
+            </Grid>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <Grid container direction="column" className="list-container">
+          <Grid item xs={12} sx={{ pb: 2 }}>
+            <Typography variant="subtitle2">We have successfully received your request.</Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Grid container>
+              <Grid item>
+                <Chip label="Unread" sx={chipErrorSX} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </ListItemWrapper>
+      <Divider />
+      <ListItemWrapper>
+        <ListItem alignItems="center">
+          <ListItemAvatar>
+            <Avatar
+              sx={{
+                color: theme.palette.primary.dark,
+                backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light,
+                border: theme.palette.mode === 'dark' ? '1px solid' : 'none',
+                borderColor: theme.palette.primary.main
+              }}
+            >
+              <IconMailbox stroke={1.5} size="1.3rem" />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={<Typography variant="subtitle1">Check Your Mail.</Typography>} />
+          <ListItemSecondaryAction>
+            <Grid container justifyContent="flex-end">
+              <Grid item>
+                <Typography variant="caption" display="block" gutterBottom>
+                  2 min ago
+                </Typography>
+              </Grid>
+            </Grid>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <Grid container direction="column" className="list-container">
+          <Grid item xs={12} sx={{ pb: 2 }}>
+            <Typography variant="subtitle2">All done! Now check your inbox as you&apos;re in for a sweet treat!</Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Grid container>
+              <Grid item>
+                <Button variant="contained" disableElevation endIcon={<IconBrandTelegram stroke={1.5} size="1.3rem" />}>
+                  Mail
+                </Button>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </ListItemWrapper>
+      <Divider />
+      <ListItemWrapper>
+        <ListItem alignItems="center">
+          <ListItemAvatar>
+            <Avatar alt="John Doe" src={User1} />
+          </ListItemAvatar>
+          <ListItemText primary={<Typography variant="subtitle1">John Doe</Typography>} />
+          <ListItemSecondaryAction>
+            <Grid container justifyContent="flex-end">
+              <Grid item xs={12}>
+                <Typography variant="caption" display="block" gutterBottom>
+                  2 min ago
+                </Typography>
+              </Grid>
+            </Grid>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <Grid container direction="column" className="list-container">
+          <Grid item xs={12} sx={{ pb: 2 }}>
+            <Typography component="span" variant="subtitle2">
+              Uploaded two file on &nbsp;
+              <Typography component="span" variant="h6">
+                21 Jan 2020
+              </Typography>
+            </Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Grid container>
+              <Grid item xs={12}>
+                <Card
+                  sx={{
+                    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light
+                  }}
+                >
+                  <CardContent>
+                    <Grid container direction="column">
+                      <Grid item xs={12}>
+                        <Stack direction="row" spacing={2}>
+                          <IconPhoto stroke={1.5} size="1.3rem" />
+                          <Typography variant="subtitle1">demo.jpg</Typography>
+                        </Stack>
+                      </Grid>
+                    </Grid>
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </ListItemWrapper>
+      <Divider />
+      <ListItemWrapper>
+        <ListItem alignItems="center">
+          <ListItemAvatar>
+            <Avatar alt="John Doe" src={User1} />
+          </ListItemAvatar>
+          <ListItemText primary={<Typography variant="subtitle1">John Doe</Typography>} />
+          <ListItemSecondaryAction>
+            <Grid container justifyContent="flex-end">
+              <Grid item xs={12}>
+                <Typography variant="caption" display="block" gutterBottom>
+                  2 min ago
+                </Typography>
+              </Grid>
+            </Grid>
+          </ListItemSecondaryAction>
+        </ListItem>
+        <Grid container direction="column" className="list-container">
+          <Grid item xs={12} sx={{ pb: 2 }}>
+            <Typography variant="subtitle2">It is a long established fact that a reader will be distracted</Typography>
+          </Grid>
+          <Grid item xs={12}>
+            <Grid container>
+              <Grid item>
+                <Chip label="Confirmation of Account." sx={chipSuccessSX} />
+              </Grid>
+            </Grid>
+          </Grid>
+        </Grid>
+      </ListItemWrapper>
+    </List>
+  );
+};
+
+export default NotificationList;
--- a/src/layout/MainLayout/Header/NotificationSection/index.js
+++ b/src/layout/MainLayout/Header/NotificationSection/index.js
@ -0,0 +1,217 @@
+import { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import {
+  Avatar,
+  Box,
+  Button,
+  CardActions,
+  Chip,
+  ClickAwayListener,
+  Divider,
+  Grid,
+  Paper,
+  Popper,
+  Stack,
+  TextField,
+  Typography,
+  useMediaQuery
+} from '@mui/material';
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import Transitions from 'ui-component/extended/Transitions';
+import NotificationList from './NotificationList';
+
+// assets
+import { IconBell } from '@tabler/icons';
+
+// notification status options
+const status = [
+  {
+    value: 'all',
+    label: 'All Notification'
+  },
+  {
+    value: 'new',
+    label: 'New'
+  },
+  {
+    value: 'unread',
+    label: 'Unread'
+  },
+  {
+    value: 'other',
+    label: 'Other'
+  }
+];
+
+// ==============================|| NOTIFICATION ||============================== //
+
+const NotificationSection = () => {
+  const theme = useTheme();
+  const matchesXs = useMediaQuery(theme.breakpoints.down('md'));
+
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState('');
+  /**
+   * anchorRef is used on different componets and specifying one type leads to other components throwing an error
+   * */
+  const anchorRef = useRef(null);
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+    prevOpen.current = open;
+  }, [open]);
+
+  const handleChange = (event) => setValue(event?.target.value);
+
+  return (
+    <>
+      <Box
+        sx={{
+          ml: 2,
+          mr: 3,
+          [theme.breakpoints.down('md')]: {
+            mr: 2
+          }
+        }}
+      >
+        <Avatar
+          variant="rounded"
+          sx={{
+            ...theme.typography.commonAvatar,
+            ...theme.typography.mediumAvatar,
+            transition: 'all .2s ease-in-out',
+            background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
+            color: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.secondary.dark,
+            '&[aria-controls="menu-list-grow"],&:hover': {
+              background: theme.palette.mode === 'dark' ? theme.palette.warning.dark : theme.palette.secondary.dark,
+              color: theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.secondary.light
+            }
+          }}
+          ref={anchorRef}
+          aria-controls={open ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={handleToggle}
+          color="inherit"
+        >
+          <IconBell stroke={1.5} size="1.3rem" />
+        </Avatar>
+      </Box>
+
+      <Popper
+        placement={matchesXs ? 'bottom' : 'bottom-end'}
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [matchesXs ? 5 : 0, 20]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Transitions position={matchesXs ? 'top' : 'top-right'} in={open} {...TransitionProps}>
+              <Paper>
+                {open && (
+                  <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                    <Grid container direction="column" spacing={2}>
+                      <Grid item xs={12}>
+                        <Grid container alignItems="center" justifyContent="space-between" sx={{ pt: 2, px: 2 }}>
+                          <Grid item>
+                            <Stack direction="row" spacing={2}>
+                              <Typography variant="subtitle1">All Notification</Typography>
+                              <Chip
+                                size="small"
+                                label="01"
+                                sx={{
+                                  color: theme.palette.background.default,
+                                  bgcolor: theme.palette.warning.dark
+                                }}
+                              />
+                            </Stack>
+                          </Grid>
+                          <Grid item>
+                            <Typography component={Link} to="#" variant="subtitle2" color="primary">
+                              Mark as all read
+                            </Typography>
+                          </Grid>
+                        </Grid>
+                      </Grid>
+                      <Grid item xs={12}>
+                        <PerfectScrollbar style={{ height: '100%', maxHeight: 'calc(100vh - 205px)', overflowX: 'hidden' }}>
+                          <Grid container direction="column" spacing={2}>
+                            <Grid item xs={12}>
+                              <Box sx={{ px: 2, pt: 0.25 }}>
+                                <TextField
+                                  id="outlined-select-currency-native"
+                                  select
+                                  fullWidth
+                                  value={value}
+                                  onChange={handleChange}
+                                  SelectProps={{
+                                    native: true
+                                  }}
+                                >
+                                  {status.map((option) => (
+                                    <option key={option.value} value={option.value}>
+                                      {option.label}
+                                    </option>
+                                  ))}
+                                </TextField>
+                              </Box>
+                            </Grid>
+                            <Grid item xs={12} p={0}>
+                              <Divider sx={{ my: 0 }} />
+                            </Grid>
+                          </Grid>
+                          <NotificationList />
+                        </PerfectScrollbar>
+                      </Grid>
+                    </Grid>
+                    <Divider />
+                    <CardActions sx={{ p: 1.25, justifyContent: 'center' }}>
+                      <Button size="small" disableElevation>
+                        View All
+                      </Button>
+                    </CardActions>
+                  </MainCard>
+                )}
+              </Paper>
+            </Transitions>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+export default NotificationSection;
--- a/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js
+++ b/src/layout/MainLayout/Header/ProfileSection/UpgradePlanCard.js
@ -0,0 +1,76 @@
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import { Button, Card, CardContent, Grid, Stack, Typography } from '@mui/material';
+
+// project imports
+import AnimateButton from 'ui-component/extended/AnimateButton';
+
+// styles
+const CardStyle = styled(Card)(({ theme }) => ({
+  background: theme.palette.mode === 'dark' ? theme.palette.dark[800] : theme.palette.warning.light,
+  marginTop: '16px',
+  marginBottom: '16px',
+  overflow: 'hidden',
+  position: 'relative',
+  '&:after': {
+    content: '""',
+    position: 'absolute',
+    width: '200px',
+    height: '200px',
+    border: '19px solid ',
+    borderColor: theme.palette.mode === 'dark' ? theme.palette.warning.main : theme.palette.warning.main,
+    borderRadius: '50%',
+    top: '65px',
+    right: '-150px'
+  },
+  '&:before': {
+    content: '""',
+    position: 'absolute',
+    width: '200px',
+    height: '200px',
+    border: '3px solid ',
+    borderColor: theme.palette.mode === 'dark' ? theme.palette.warning.main : theme.palette.warning.main,
+    borderRadius: '50%',
+    top: '145px',
+    right: '-70px'
+  }
+}));
+
+// ==============================|| PROFILE MENU - UPGRADE PLAN CARD ||============================== //
+
+const UpgradePlanCard = () => {
+  const theme = useTheme();
+
+  return (
+    <CardStyle>
+      <CardContent>
+        <Grid container direction="column" spacing={2}>
+          <Grid item>
+            <Typography variant="h4">Upgrade your plan</Typography>
+          </Grid>
+          <Grid item>
+            <Typography
+              variant="subtitle2"
+              color={theme.palette.mode === 'dark' ? 'textSecondary' : 'grey.900'}
+              sx={{ opacity: theme.palette.mode === 'dark' ? 1 : 0.6 }}
+            >
+              70% discount for 1 years <br />
+              subscriptions.
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Stack direction="row">
+              <AnimateButton>
+                <Button variant="contained" color="warning" sx={{ boxShadow: 'none' }}>
+                  Go Premium
+                </Button>
+              </AnimateButton>
+            </Stack>
+          </Grid>
+        </Grid>
+      </CardContent>
+    </CardStyle>
+  );
+};
+
+export default UpgradePlanCard;
--- a/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/src/layout/MainLayout/Header/ProfileSection/index.js
@ -0,0 +1,312 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import {
+  Avatar,
+  Box,
+  Card,
+  CardContent,
+  Chip,
+  ClickAwayListener,
+  Divider,
+  Grid,
+  InputAdornment,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  OutlinedInput,
+  Paper,
+  Popper,
+  Stack,
+  Switch,
+  Typography
+} from '@mui/material';
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import Transitions from 'ui-component/extended/Transitions';
+import UpgradePlanCard from './UpgradePlanCard';
+import useAuth from 'hooks/useAuth';
+import User1 from 'assets/images/users/user-round.svg';
+
+// assets
+import { IconLogout, IconSearch, IconSettings, IconUser } from '@tabler/icons';
+import useConfig from 'hooks/useConfig';
+
+// ==============================|| PROFILE MENU ||============================== //
+
+const ProfileSection = () => {
+  const theme = useTheme();
+  const { borderRadius } = useConfig();
+  const navigate = useNavigate();
+
+  const [sdm, setSdm] = useState(true);
+  const [value, setValue] = useState('');
+  const [notification, setNotification] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const { logout, user } = useAuth();
+  const [open, setOpen] = useState(false);
+  /**
+   * anchorRef is used on different components and specifying one type leads to other components throwing an error
+   * */
+  const anchorRef = useRef(null);
+  const handleLogout = async () => {
+    try {
+      await logout();
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  const handleListItemClick = (event, index, route = '') => {
+    setSelectedIndex(index);
+    handleClose(event);
+
+    if (route && route !== '') {
+      navigate(route);
+    }
+  };
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (
+    <>
+      <Chip
+        sx={{
+          height: '48px',
+          alignItems: 'center',
+          borderRadius: '27px',
+          transition: 'all .2s ease-in-out',
+          borderColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light,
+          backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light,
+          '&[aria-controls="menu-list-grow"], &:hover': {
+            borderColor: theme.palette.primary.main,
+            background: `${theme.palette.primary.main}!important`,
+            color: theme.palette.primary.light,
+            '& svg': {
+              stroke: theme.palette.primary.light
+            }
+          },
+          '& .MuiChip-label': {
+            lineHeight: 0
+          }
+        }}
+        icon={
+          <Avatar
+            src={User1}
+            sx={{
+              ...theme.typography.mediumAvatar,
+              margin: '8px 0 8px 8px !important',
+              cursor: 'pointer'
+            }}
+            ref={anchorRef}
+            aria-controls={open ? 'menu-list-grow' : undefined}
+            aria-haspopup="true"
+            color="inherit"
+          />
+        }
+        label={<IconSettings stroke={1.5} size="1.5rem" color={theme.palette.primary.main} />}
+        variant="outlined"
+        ref={anchorRef}
+        aria-controls={open ? 'menu-list-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+        color="primary"
+      />
+
+      <Popper
+        placement="bottom"
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 14]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <ClickAwayListener onClickAway={handleClose}>
+            <Transitions in={open} {...TransitionProps}>
+              <Paper>
+                {open && (
+                  <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                    <Box sx={{ p: 2, pb: 0 }}>
+                      <Stack>
+                        <Stack direction="row" spacing={0.5} alignItems="center">
+                          <Typography variant="h4">Good Morning,</Typography>
+                          <Typography component="span" variant="h4" sx={{ fontWeight: 400 }}>
+                            {user?.name}
+                          </Typography>
+                        </Stack>
+                        <Typography variant="subtitle2">Project Admin</Typography>
+                      </Stack>
+                      <OutlinedInput
+                        sx={{ width: '100%', pr: 1, pl: 2, my: 2 }}
+                        id="input-search-profile"
+                        value={value}
+                        onChange={(e) => setValue(e.target.value)}
+                        placeholder="Search profile options"
+                        startAdornment={
+                          <InputAdornment position="start">
+                            <IconSearch stroke={1.5} size="1rem" color={theme.palette.grey[500]} />
+                          </InputAdornment>
+                        }
+                        aria-describedby="search-helper-text"
+                        inputProps={{
+                          'aria-label': 'weight'
+                        }}
+                      />
+                      <Divider />
+                    </Box>
+                    <PerfectScrollbar style={{ height: '100%', maxHeight: 'calc(100vh - 250px)', overflowX: 'hidden' }}>
+                      <Box sx={{ p: 2, pt: 0 }}>
+                        <UpgradePlanCard />
+                        <Divider />
+                        <Card
+                          sx={{
+                            bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark[800] : theme.palette.primary.light,
+                            my: 2
+                          }}
+                        >
+                          <CardContent>
+                            <Grid container spacing={3} direction="column">
+                              <Grid item>
+                                <Grid item container alignItems="center" justifyContent="space-between">
+                                  <Grid item>
+                                    <Typography variant="subtitle1">Start DND Mode</Typography>
+                                  </Grid>
+                                  <Grid item>
+                                    <Switch
+                                      color="primary"
+                                      checked={sdm}
+                                      onChange={(e) => setSdm(e.target.checked)}
+                                      name="sdm"
+                                      size="small"
+                                    />
+                                  </Grid>
+                                </Grid>
+                              </Grid>
+                              <Grid item>
+                                <Grid item container alignItems="center" justifyContent="space-between">
+                                  <Grid item>
+                                    <Typography variant="subtitle1">Allow Notifications</Typography>
+                                  </Grid>
+                                  <Grid item>
+                                    <Switch
+                                      checked={notification}
+                                      onChange={(e) => setNotification(e.target.checked)}
+                                      name="sdm"
+                                      size="small"
+                                    />
+                                  </Grid>
+                                </Grid>
+                              </Grid>
+                            </Grid>
+                          </CardContent>
+                        </Card>
+                        <Divider />
+                        <List
+                          component="nav"
+                          sx={{
+                            width: '100%',
+                            maxWidth: 350,
+                            minWidth: 300,
+                            backgroundColor: theme.palette.background.paper,
+                            borderRadius: '10px',
+                            [theme.breakpoints.down('md')]: {
+                              minWidth: '100%'
+                            },
+                            '& .MuiListItemButton-root': {
+                              mt: 0.5
+                            }
+                          }}
+                        >
+                          <ListItemButton
+                            sx={{ borderRadius: `${borderRadius}px` }}
+                            selected={selectedIndex === 0}
+                            onClick={(event) => handleListItemClick(event, 0, '/user/account-profile/profile1')}
+                          >
+                            <ListItemIcon>
+                              <IconSettings stroke={1.5} size="1.3rem" />
+                            </ListItemIcon>
+                            <ListItemText primary={<Typography variant="body2">Account Settings</Typography>} />
+                          </ListItemButton>
+                          <ListItemButton
+                            sx={{ borderRadius: `${borderRadius}px` }}
+                            selected={selectedIndex === 1}
+                            onClick={(event) => handleListItemClick(event, 1, '/user/social-profile/posts')}
+                          >
+                            <ListItemIcon>
+                              <IconUser stroke={1.5} size="1.3rem" />
+                            </ListItemIcon>
+                            <ListItemText
+                              primary={
+                                <Grid container spacing={1} justifyContent="space-between">
+                                  <Grid item>
+                                    <Typography variant="body2">Social Profile</Typography>
+                                  </Grid>
+                                  <Grid item>
+                                    <Chip
+                                      label="02"
+                                      size="small"
+                                      sx={{
+                                        bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.warning.dark,
+                                        color: theme.palette.background.default
+                                      }}
+                                    />
+                                  </Grid>
+                                </Grid>
+                              }
+                            />
+                          </ListItemButton>
+                          <ListItemButton sx={{ borderRadius: `${borderRadius}px` }} selected={selectedIndex === 4} onClick={handleLogout}>
+                            <ListItemIcon>
+                              <IconLogout stroke={1.5} size="1.3rem" />
+                            </ListItemIcon>
+                            <ListItemText primary={<Typography variant="body2">Logout</Typography>} />
+                          </ListItemButton>
+                        </List>
+                      </Box>
+                    </PerfectScrollbar>
+                  </MainCard>
+                )}
+              </Paper>
+            </Transitions>
+          </ClickAwayListener>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+export default ProfileSection;
--- a/src/layout/MainLayout/Header/SearchSection/index.js
+++ b/src/layout/MainLayout/Header/SearchSection/index.js
@ -0,0 +1,184 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+// material-ui
+import { useTheme, styled } from '@mui/material/styles';
+import { Avatar, Box, Card, Grid, InputAdornment, OutlinedInput, Popper } from '@mui/material';
+
+// third-party
+import PopupState, { bindPopper, bindToggle } from 'material-ui-popup-state';
+
+// project imports
+import Transitions from 'ui-component/extended/Transitions';
+
+// assets
+import { IconAdjustmentsHorizontal, IconSearch, IconX } from '@tabler/icons';
+import { shouldForwardProp } from '@mui/system';
+
+// styles
+const PopperStyle = styled(Popper, { shouldForwardProp })(({ theme }) => ({
+  zIndex: 1100,
+  width: '99%',
+  top: '-55px !important',
+  padding: '0 12px',
+  [theme.breakpoints.down('sm')]: {
+    padding: '0 10px'
+  }
+}));
+
+const OutlineInputStyle = styled(OutlinedInput, { shouldForwardProp })(({ theme }) => ({
+  width: 434,
+  marginLeft: 16,
+  paddingLeft: 16,
+  paddingRight: 16,
+  '& input': {
+    background: 'transparent !important',
+    paddingLeft: '4px !important'
+  },
+  [theme.breakpoints.down('lg')]: {
+    width: 250
+  },
+  [theme.breakpoints.down('md')]: {
+    width: '100%',
+    marginLeft: 4,
+    background: theme.palette.mode === 'dark' ? theme.palette.dark[800] : '#fff'
+  }
+}));
+
+const HeaderAvatarStyle = styled(Avatar, { shouldForwardProp })(({ theme }) => ({
+  ...theme.typography.commonAvatar,
+  ...theme.typography.mediumAvatar,
+  background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
+  color: theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark,
+  '&:hover': {
+    background: theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark,
+    color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : theme.palette.secondary.light
+  }
+}));
+
+// ==============================|| SEARCH INPUT - MOBILE||============================== //
+
+const MobileSearch = ({ value, setValue, popupState }) => {
+  const theme = useTheme();
+
+  return (
+    <OutlineInputStyle
+      id="input-search-header"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="Search"
+      startAdornment={
+        <InputAdornment position="start">
+          <IconSearch stroke={1.5} size="1rem" color={theme.palette.grey[500]} />
+        </InputAdornment>
+      }
+      endAdornment={
+        <InputAdornment position="end">
+          <HeaderAvatarStyle variant="rounded">
+            <IconAdjustmentsHorizontal stroke={1.5} size="1.3rem" />
+          </HeaderAvatarStyle>
+          <Box sx={{ ml: 2 }}>
+            <Avatar
+              variant="rounded"
+              sx={{
+                ...theme.typography.commonAvatar,
+                ...theme.typography.mediumAvatar,
+                background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.orange.light,
+                color: theme.palette.orange.dark,
+                '&:hover': {
+                  background: theme.palette.orange.dark,
+                  color: theme.palette.orange.light
+                }
+              }}
+              {...bindToggle(popupState)}
+            >
+              <IconX stroke={1.5} size="1.3rem" />
+            </Avatar>
+          </Box>
+        </InputAdornment>
+      }
+      aria-describedby="search-helper-text"
+      inputProps={{ 'aria-label': 'weight' }}
+    />
+  );
+};
+
+MobileSearch.propTypes = {
+  value: PropTypes.string,
+  setValue: PropTypes.func,
+  popupState: PopupState
+};
+
+// ==============================|| SEARCH INPUT ||============================== //
+
+const SearchSection = () => {
+  const theme = useTheme();
+  const [value, setValue] = useState('');
+
+  return (
+    <>
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+        <PopupState variant="popper" popupId="demo-popup-popper">
+          {(popupState) => (
+            <>
+              <Box sx={{ ml: 2 }}>
+                <HeaderAvatarStyle variant="rounded" {...bindToggle(popupState)}>
+                  <IconSearch stroke={1.5} size="1.2rem" />
+                </HeaderAvatarStyle>
+              </Box>
+              <PopperStyle {...bindPopper(popupState)} transition>
+                {({ TransitionProps }) => (
+                  <>
+                    <Transitions type="zoom" {...TransitionProps} sx={{ transformOrigin: 'center left' }}>
+                      <Card
+                        sx={{
+                          background: theme.palette.mode === 'dark' ? theme.palette.dark[900] : '#fff',
+                          [theme.breakpoints.down('sm')]: {
+                            border: 0,
+                            boxShadow: 'none'
+                          }
+                        }}
+                      >
+                        <Box sx={{ p: 2 }}>
+                          <Grid container alignItems="center" justifyContent="space-between">
+                            <Grid item xs>
+                              <MobileSearch value={value} setValue={setValue} popupState={popupState} />
+                            </Grid>
+                          </Grid>
+                        </Box>
+                      </Card>
+                    </Transitions>
+                  </>
+                )}
+              </PopperStyle>
+            </>
+          )}
+        </PopupState>
+      </Box>
+      <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+        <OutlineInputStyle
+          id="input-search-header"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="Search"
+          startAdornment={
+            <InputAdornment position="start">
+              <IconSearch stroke={1.5} size="1rem" color={theme.palette.grey[500]} />
+            </InputAdornment>
+          }
+          endAdornment={
+            <InputAdornment position="end">
+              <HeaderAvatarStyle variant="rounded">
+                <IconAdjustmentsHorizontal stroke={1.5} size="1.3rem" />
+              </HeaderAvatarStyle>
+            </InputAdornment>
+          }
+          aria-describedby="search-helper-text"
+          inputProps={{ 'aria-label': 'weight' }}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default SearchSection;
--- a/src/layout/MainLayout/Header/index.js
+++ b/src/layout/MainLayout/Header/index.js
@ -0,0 +1,90 @@
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Box } from '@mui/material';
+
+// project imports
+import LogoSection from '../LogoSection';
+import SearchSection from './SearchSection';
+import MobileSection from './MobileSection';
+import ProfileSection from './ProfileSection';
+import LocalizationSection from './LocalizationSection';
+import MegaMenuSection from './MegaMenuSection';
+import NotificationSection from './NotificationSection';
+import { useDispatch, useSelector } from 'store';
+import { openDrawer } from 'store/slices/menu';
+
+// assets
+import { IconMenu2 } from '@tabler/icons';
+
+// ==============================|| MAIN NAVBAR / HEADER ||============================== //
+
+const Header = () => {
+  const theme = useTheme();
+
+  const dispatch = useDispatch();
+  const { drawerOpen } = useSelector((state) => state.menu);
+
+  return (
+    <>
+      {/* logo & toggler button */}
+      <Box
+        sx={{
+          width: 228,
+          display: 'flex',
+          [theme.breakpoints.down('md')]: {
+            width: 'auto'
+          }
+        }}
+      >
+        <Box component="span" sx={{ display: { xs: 'none', md: 'block' }, flexGrow: 1 }}>
+          <LogoSection />
+        </Box>
+        <Avatar
+          variant="rounded"
+          sx={{
+            ...theme.typography.commonAvatar,
+            ...theme.typography.mediumAvatar,
+            overflow: 'hidden',
+            transition: 'all .2s ease-in-out',
+            background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
+            color: theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark,
+            '&:hover': {
+              background: theme.palette.mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark,
+              color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : theme.palette.secondary.light
+            }
+          }}
+          onClick={() => dispatch(openDrawer(!drawerOpen))}
+          color="inherit"
+        >
+          <IconMenu2 stroke={1.5} size="1.3rem" />
+        </Avatar>
+      </Box>
+
+      {/* header search */}
+      <SearchSection />
+      <Box sx={{ flexGrow: 1 }} />
+      <Box sx={{ flexGrow: 1 }} />
+
+      {/* mega-menu */}
+      <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+        <MegaMenuSection />
+      </Box>
+
+      {/* live customization & localization */}
+      <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
+        <LocalizationSection />
+      </Box>
+
+      {/* notification & profile */}
+      <NotificationSection />
+      <ProfileSection />
+
+      {/* mobile header */}
+      <Box sx={{ display: { xs: 'block', sm: 'none' } }}>
+        <MobileSection />
+      </Box>
+    </>
+  );
+};
+
+export default Header;
--- a/src/layout/MainLayout/LogoSection/index.js
+++ b/src/layout/MainLayout/LogoSection/index.js
@ -0,0 +1,18 @@
+import { Link as RouterLink } from 'react-router-dom';
+
+// material-ui
+import { Link } from '@mui/material';
+
+// project imports
+import { DASHBOARD_PATH } from 'config';
+import Logo from 'ui-component/Logo';
+
+// ==============================|| MAIN LOGO ||============================== //
+
+const LogoSection = () => (
+  <Link component={RouterLink} to={DASHBOARD_PATH}>
+    <Logo />
+  </Link>
+);
+
+export default LogoSection;
--- a/src/layout/MainLayout/Sidebar/MenuCard/index.js
+++ b/src/layout/MainLayout/Sidebar/MenuCard/index.js
@ -0,0 +1,129 @@
+import PropTypes from 'prop-types';
+import { memo } from 'react';
+
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import {
+  Avatar,
+  Card,
+  CardContent,
+  Grid,
+  LinearProgress,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Typography,
+  linearProgressClasses
+} from '@mui/material';
+
+// assets
+import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
+
+// styles
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 30,
+  [`&.${linearProgressClasses.colorPrimary}`]: {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark.light : '#fff'
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    borderRadius: 5,
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.primary.dark : theme.palette.primary.main
+  }
+}));
+
+const CardStyle = styled(Card)(({ theme }) => ({
+  background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.light,
+  marginBottom: '22px',
+  overflow: 'hidden',
+  position: 'relative',
+  '&:after': {
+    content: '""',
+    position: 'absolute',
+    width: '157px',
+    height: '157px',
+    background: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary[200],
+    borderRadius: '50%',
+    top: '-105px',
+    right: '-96px'
+  }
+}));
+
+// ==============================|| PROGRESS BAR WITH LABEL ||============================== //
+
+function LinearProgressWithLabel({ value, ...others }) {
+  const theme = useTheme();
+
+  return (
+    <Grid container direction="column" spacing={1} sx={{ mt: 1.5 }}>
+      <Grid item>
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Typography variant="h6" sx={{ color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.primary[800] }}>
+              Progress
+            </Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="h6" color="inherit">{`${Math.round(value)}%`}</Typography>
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid item>
+        <BorderLinearProgress variant="determinate" value={value} {...others} />
+      </Grid>
+    </Grid>
+  );
+}
+
+LinearProgressWithLabel.propTypes = {
+  value: PropTypes.number
+};
+
+// ==============================|| SIDEBAR - MENU CARD ||============================== //
+
+const MenuCard = () => {
+  const theme = useTheme();
+
+  return (
+    <CardStyle>
+      <CardContent sx={{ p: 2 }}>
+        <List sx={{ p: 0, m: 0 }}>
+          <ListItem alignItems="flex-start" disableGutters sx={{ p: 0 }}>
+            <ListItemAvatar sx={{ mt: 0 }}>
+              <Avatar
+                variant="rounded"
+                sx={{
+                  ...theme.typography.commonAvatar,
+                  ...theme.typography.largeAvatar,
+                  color: theme.palette.primary.main,
+                  border: theme.palette.mode === 'dark' ? '1px solid' : 'none',
+                  borderColor: theme.palette.primary.main,
+                  background: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
+                  marginRight: '12px'
+                }}
+              >
+                <TableChartOutlinedIcon fontSize="inherit" />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              sx={{ mt: 0 }}
+              primary={
+                <Typography
+                  variant="subtitle1"
+                  sx={{ color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.primary[800] }}
+                >
+                  Get Extra Space
+                </Typography>
+              }
+              secondary={<Typography variant="caption"> 28/23 GB</Typography>}
+            />
+          </ListItem>
+        </List>
+        <LinearProgressWithLabel value={80} />
+      </CardContent>
+    </CardStyle>
+  );
+};
+
+export default memo(MenuCard);
--- a/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js
+++ b/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js
@ -0,0 +1,143 @@
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+// project imports
+import NavItem from '../NavItem';
+import useConfig from 'hooks/useConfig';
+
+// assets
+import { IconChevronDown, IconChevronUp } from '@tabler/icons';
+
+// ==============================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||============================== //
+
+const NavCollapse = ({ menu, level }) => {
+  const theme = useTheme();
+  const { borderRadius } = useConfig();
+
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+
+  const handleClick = () => {
+    setOpen(!open);
+    setSelected(!selected ? menu.id : null);
+  };
+
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const childrens = menu.children ? menu.children : [];
+    childrens.forEach((item) => {
+      if (pathname && pathname.includes('product-details')) {
+        if (item.url && item.url.includes('product-details')) {
+          setOpen(true);
+        }
+      }
+      if (item.url === pathname) {
+        setOpen(true);
+      }
+    });
+  }, [pathname, menu.children]);
+
+  // menu collapse & item
+  const menus = menu.children?.map((item) => {
+    switch (item.type) {
+      case 'collapse':
+        return <NavCollapse key={item.id} menu={item} level={level + 1} />;
+      case 'item':
+        return <NavItem key={item.id} item={item} level={level + 1} />;
+      default:
+        return (
+          <Typography key={item.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        );
+    }
+  });
+
+  const Icon = menu.icon;
+  const menuIcon = menu.icon ? (
+    <Icon strokeWidth={1.5} size="1.3rem" style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+  ) : (
+    <FiberManualRecordIcon
+      sx={{
+        width: selected === menu.id ? 8 : 6,
+        height: selected === menu.id ? 8 : 6
+      }}
+      fontSize={level > 0 ? 'inherit' : 'medium'}
+    />
+  );
+
+  return (
+    <>
+      <ListItemButton
+        sx={{
+          borderRadius: `${borderRadius}px`,
+          mb: 0.5,
+          alignItems: 'flex-start',
+          backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
+          py: level > 1 ? 1 : 1.25,
+          pl: `${level * 24}px`
+        }}
+        selected={selected === menu.id}
+        onClick={handleClick}
+      >
+        <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36 }}>{menuIcon}</ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography variant={selected === menu.id ? 'h5' : 'body1'} color="inherit" sx={{ my: 'auto' }}>
+              {menu.title}
+            </Typography>
+          }
+          secondary={
+            menu.caption && (
+              <Typography variant="caption" sx={{ ...theme.typography.subMenuCaption }} display="block" gutterBottom>
+                {menu.caption}
+              </Typography>
+            )
+          }
+        />
+        {open ? (
+          <IconChevronUp stroke={1.5} size="1rem" style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+        ) : (
+          <IconChevronDown stroke={1.5} size="1rem" style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+        )}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        {open && (
+          <List
+            component="div"
+            disablePadding
+            sx={{
+              position: 'relative',
+              '&:after': {
+                content: "''",
+                position: 'absolute',
+                left: '32px',
+                top: 0,
+                height: '100%',
+                width: '1px',
+                opacity: theme.palette.mode === 'dark' ? 0.2 : 1,
+                background: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.primary.light
+              }
+            }}
+          >
+            {menus}
+          </List>
+        )}
+      </Collapse>
+    </>
+  );
+};
+
+NavCollapse.propTypes = {
+  menu: PropTypes.object,
+  level: PropTypes.number
+};
+
+export default NavCollapse;
--- a/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js
+++ b/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js
@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Divider, List, Typography } from '@mui/material';
+
+// project imports
+import NavItem from '../NavItem';
+import NavCollapse from '../NavCollapse';
+
+// ==============================|| SIDEBAR MENU LIST GROUP ||============================== //
+
+const NavGroup = ({ item }) => {
+  const theme = useTheme();
+
+  // menu list collapse & items
+  const items = item.children?.map((menu) => {
+    switch (menu.type) {
+      case 'collapse':
+        return <NavCollapse key={menu.id} menu={menu} level={1} />;
+      case 'item':
+        return <NavItem key={menu.id} item={menu} level={1} />;
+      default:
+        return (
+          <Typography key={menu.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        );
+    }
+  });
+
+  return (
+    <>
+      <List
+        subheader={
+          item.title && (
+            <Typography variant="caption" sx={{ ...theme.typography.menuCaption }} display="block" gutterBottom>
+              {item.title}
+              {item.caption && (
+                <Typography variant="caption" sx={{ ...theme.typography.subMenuCaption }} display="block" gutterBottom>
+                  {item.caption}
+                </Typography>
+              )}
+            </Typography>
+          )
+        }
+      >
+        {items}
+      </List>
+
+      {/* group divider */}
+      <Divider sx={{ mt: 0.25, mb: 1.25 }} />
+    </>
+  );
+};
+
+NavGroup.propTypes = {
+  item: PropTypes.object
+};
+
+export default NavGroup;
--- a/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js
+++ b/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js
@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import { forwardRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material';
+
+// project imports
+import useConfig from 'hooks/useConfig';
+import { useDispatch, useSelector } from 'store';
+import { activeItem, openDrawer } from 'store/slices/menu';
+
+// assets
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+// ==============================|| SIDEBAR MENU LIST ITEMS ||============================== //
+
+const NavItem = ({ item, level }) => {
+  const theme = useTheme();
+  const matchesSM = useMediaQuery(theme.breakpoints.down('lg'));
+
+  const { borderRadius } = useConfig();
+  const dispatch = useDispatch();
+  const { openItem } = useSelector((state) => state.menu);
+
+  const Icon = item?.icon;
+  const itemIcon = item?.icon ? (
+    <Icon stroke={1.5} size="1.3rem" />
+  ) : (
+    <FiberManualRecordIcon
+      sx={{
+        width: openItem.findIndex((id) => id === item?.id) > -1 ? 8 : 6,
+        height: openItem.findIndex((id) => id === item?.id) > -1 ? 8 : 6
+      }}
+      fontSize={level > 0 ? 'inherit' : 'medium'}
+    />
+  );
+
+  let itemTarget = '_self';
+  if (item.target) {
+    itemTarget = '_blank';
+  }
+
+  let listItemProps = { component: forwardRef((props, ref) => <Link ref={ref} {...props} to={item.url} target={itemTarget} />) };
+  if (item?.external) {
+    listItemProps = { component: 'a', href: item.url, target: itemTarget };
+  }
+
+  const itemHandler = (id) => {
+    dispatch(activeItem([id]));
+    if (matchesSM) dispatch(openDrawer(false));
+  };
+
+  // active menu item on page load
+  useEffect(() => {
+    const currentIndex = document.location.pathname
+      .toString()
+      .split('/')
+      .findIndex((id) => id === item.id);
+    if (currentIndex > -1) {
+      dispatch(activeItem([item.id]));
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  return (
+    <ListItemButton
+      {...listItemProps}
+      disabled={item.disabled}
+      sx={{
+        borderRadius: `${borderRadius}px`,
+        mb: 0.5,
+        alignItems: 'flex-start',
+        backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
+        py: level > 1 ? 1 : 1.25,
+        pl: `${level * 24}px`
+      }}
+      selected={openItem?.findIndex((id) => id === item.id) > -1}
+      onClick={() => itemHandler(item.id)}
+    >
+      <ListItemIcon sx={{ my: 'auto', minWidth: !item?.icon ? 18 : 36 }}>{itemIcon}</ListItemIcon>
+      <ListItemText
+        primary={
+          <Typography variant={openItem?.findIndex((id) => id === item.id) > -1 ? 'h5' : 'body1'} color="inherit">
+            {item.title}
+          </Typography>
+        }
+        secondary={
+          item.caption && (
+            <Typography variant="caption" sx={{ ...theme.typography.subMenuCaption }} display="block" gutterBottom>
+              {item.caption}
+            </Typography>
+          )
+        }
+      />
+      {item.chip && (
+        <Chip
+          color={item.chip.color}
+          variant={item.chip.variant}
+          size={item.chip.size}
+          label={item.chip.label}
+          avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+        />
+      )}
+    </ListItemButton>
+  );
+};
+
+NavItem.propTypes = {
+  item: PropTypes.object,
+  level: PropTypes.number
+};
+
+export default NavItem;
--- a/src/layout/MainLayout/Sidebar/MenuList/index.js
+++ b/src/layout/MainLayout/Sidebar/MenuList/index.js
@ -0,0 +1,29 @@
+import { memo } from 'react';
+
+// material-ui
+import { Typography } from '@mui/material';
+
+// project imports
+import NavGroup from './NavGroup';
+import menuItem from 'menu-items';
+
+// ==============================|| SIDEBAR MENU LIST ||============================== //
+
+const MenuList = () => {
+  const navItems = menuItem.items.map((item) => {
+    switch (item.type) {
+      case 'group':
+        return <NavGroup key={item.id} item={item} />;
+      default:
+        return (
+          <Typography key={item.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        );
+    }
+  });
+
+  return <>{navItems}</>;
+};
+
+export default memo(MenuList);
--- a/src/layout/MainLayout/Sidebar/index.js
+++ b/src/layout/MainLayout/Sidebar/index.js
@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import { memo, useMemo } from 'react';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Box, Drawer, Stack, useMediaQuery } from '@mui/material';
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar';
+
+// project imports
+import MenuList from './MenuList';
+import LogoSection from '../LogoSection';
+import MenuCard from './MenuCard';
+import { openDrawer } from 'store/slices/menu';
+import { useDispatch, useSelector } from 'store';
+import { drawerWidth } from 'store/constant';
+import Chip from 'ui-component/extended/Chip';
+
+// ==============================|| SIDEBAR DRAWER ||============================== //
+
+const Sidebar = ({ window }) => {
+  const theme = useTheme();
+  const matchUpMd = useMediaQuery(theme.breakpoints.up('md'));
+
+  const dispatch = useDispatch();
+  const { drawerOpen } = useSelector((state) => state.menu);
+
+  const logo = useMemo(
+    () => (
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+        <Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
+          <LogoSection />
+        </Box>
+      </Box>
+    ),
+    []
+  );
+
+  const drawer = useMemo(
+    () => (
+      <PerfectScrollbar
+        component="div"
+        style={{
+          height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
+          paddingLeft: '16px',
+          paddingRight: '16px'
+        }}
+      >
+        <MenuList />
+        <MenuCard />
+        <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
+          <Chip label={process.env.REACT_APP_VERSION} disabled chipcolor="secondary" size="small" sx={{ cursor: 'pointer' }} />
+        </Stack>
+      </PerfectScrollbar>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [matchUpMd]
+  );
+
+  const container = window !== undefined ? () => window.document.body : undefined;
+
+  return (
+    <Box component="nav" sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label="mailbox folders">
+      <Drawer
+        container={container}
+        variant={matchUpMd ? 'persistent' : 'temporary'}
+        anchor="left"
+        open={drawerOpen}
+        onClose={() => dispatch(openDrawer(!drawerOpen))}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            background: theme.palette.background.default,
+            color: theme.palette.text.primary,
+            borderRight: 'none',
+            [theme.breakpoints.up('md')]: {
+              top: '88px'
+            }
+          }
+        }}
+        ModalProps={{ keepMounted: true }}
+        color="inherit"
+      >
+        {drawerOpen && logo}
+        {drawerOpen && drawer}
+      </Drawer>
+    </Box>
+  );
+};
+
+Sidebar.propTypes = {
+  window: PropTypes.object
+};
+
+export default memo(Sidebar);
--- a/src/layout/MainLayout/index.js
+++ b/src/layout/MainLayout/index.js
@ -0,0 +1,129 @@
+import React, { useMemo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import { AppBar, Box, Container, CssBaseline, Toolbar, useMediaQuery } from '@mui/material';
+
+// project imports
+import Breadcrumbs from 'ui-component/extended/Breadcrumbs';
+import Header from './Header';
+import Sidebar from './Sidebar';
+import navigation from 'menu-items';
+import useConfig from 'hooks/useConfig';
+import { drawerWidth } from 'store/constant';
+import { openDrawer } from 'store/slices/menu';
+import { useDispatch, useSelector } from 'store';
+
+// assets
+import { IconChevronRight } from '@tabler/icons';
+
+// styles
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+  ...theme.typography.mainContent,
+  ...(!open && {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.shorter
+    }),
+    [theme.breakpoints.up('md')]: {
+      marginLeft: -(drawerWidth - 20),
+      width: `calc(100% - ${drawerWidth}px)`
+    },
+    [theme.breakpoints.down('md')]: {
+      marginLeft: '20px',
+      width: `calc(100% - ${drawerWidth}px)`,
+      padding: '16px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: '10px',
+      width: `calc(100% - ${drawerWidth}px)`,
+      padding: '16px',
+      marginRight: '10px'
+    }
+  }),
+  ...(open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.shorter
+    }),
+    marginLeft: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    width: `calc(100% - ${drawerWidth}px)`,
+    [theme.breakpoints.down('md')]: {
+      marginLeft: '20px'
+    },
+    [theme.breakpoints.down('sm')]: {
+      marginLeft: '10px'
+    }
+  })
+}));
+
+// ==============================|| MAIN LAYOUT ||============================== //
+
+const MainLayout = () => {
+  const theme = useTheme();
+  const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'));
+
+  const dispatch = useDispatch();
+  const { drawerOpen } = useSelector((state) => state.menu);
+  const { container } = useConfig();
+
+  React.useEffect(() => {
+    dispatch(openDrawer(!matchDownMd));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [matchDownMd]);
+
+  const header = useMemo(
+    () => (
+      <Toolbar>
+        <Header />
+      </Toolbar>
+    ),
+    []
+  );
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      {/* header */}
+      <AppBar
+        enableColorOnDark
+        position="fixed"
+        color="inherit"
+        elevation={0}
+        sx={{
+          bgcolor: theme.palette.background.default,
+          transition: drawerOpen ? theme.transitions.create('width') : 'none'
+        }}
+      >
+        {header}
+      </AppBar>
+
+      {/* drawer */}
+      <Sidebar />
+
+      {/* main content */}
+      <Main theme={theme} open={drawerOpen}>
+        {/* breadcrumb */}
+        {container && (
+          <Container maxWidth="lg">
+            <Breadcrumbs separator={IconChevronRight} navigation={navigation} icon title rightAlign />
+            <Outlet />
+          </Container>
+        )}
+        {!container && (
+          <>
+            <Breadcrumbs separator={IconChevronRight} navigation={navigation} icon title rightAlign />
+            <Outlet />
+          </>
+        )}
+      </Main>
+    </Box>
+  );
+};
+
+export default MainLayout;
--- a/src/layout/MinimalLayout/index.js
+++ b/src/layout/MinimalLayout/index.js
@ -0,0 +1,11 @@
+import { Outlet } from 'react-router-dom';
+
+// ==============================|| MINIMAL LAYOUT ||============================== //
+
+const MinimalLayout = () => (
+  <>
+    <Outlet />
+  </>
+);
+
+export default MinimalLayout;
--- a/src/layout/NavMotion.js
+++ b/src/layout/NavMotion.js
@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+
+// third-party
+import { motion } from 'framer-motion';
+
+// ==============================|| ANIMATION FOR CONTENT ||============================== //
+
+const NavMotion = ({ children }) => {
+  const motionVariants = {
+    initial: {
+      opacity: 0,
+      scale: 0.99
+    },
+    in: {
+      opacity: 1,
+      scale: 1
+    },
+    out: {
+      opacity: 0,
+      scale: 1.01
+    }
+  };
+
+  const motionTransition = {
+    type: 'tween',
+    ease: 'anticipate',
+    duration: 0.4
+  };
+
+  return (
+    <motion.div initial="initial" animate="in" exit="out" variants={motionVariants} transition={motionTransition}>
+      {children}
+    </motion.div>
+  );
+};
+
+NavMotion.propTypes = {
+  children: PropTypes.node
+};
+
+export default NavMotion;
--- a/src/layout/NavigationScroll.js
+++ b/src/layout/NavigationScroll.js
@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// ==============================|| NAVIGATION SCROLL TO TOP ||============================== //
+
+const NavigationScroll = ({ children }) => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  }, [pathname]);
+
+  return children || null;
+};
+
+NavigationScroll.propTypes = {
+  children: PropTypes.node
+};
+
+export default NavigationScroll;
--- a/src/menu-items/index.js
+++ b/src/menu-items/index.js
@ -0,0 +1,9 @@
+import other from './other';
+
+// ==============================|| MENU ITEMS ||============================== //
+
+const menuItems = {
+  items: [other]
+};
+
+export default menuItems;
--- a/src/menu-items/other.js
+++ b/src/menu-items/other.js
@ -0,0 +1,49 @@
+// third-party
+import { FormattedMessage } from 'react-intl';
+
+// assets
+import { IconBrandChrome, IconHelp, IconSitemap } from '@tabler/icons';
+
+// constant
+const icons = {
+  IconBrandChrome,
+  IconHelp,
+  IconSitemap
+};
+
+// ==============================|| SAMPLE PAGE & DOCUMENTATION MENU ITEMS ||============================== //
+
+const other = {
+  id: 'sample-docs-roadmap',
+  type: 'group',
+  children: [
+    {
+      id: 'sample-page',
+      title: <FormattedMessage id="sample-page" />,
+      type: 'item',
+      url: '/sample-page',
+      icon: icons.IconBrandChrome,
+      breadcrumbs: false
+    },
+    {
+      id: 'documentation',
+      title: <FormattedMessage id="documentation" />,
+      type: 'item',
+      url: 'https://codedthemes.gitbook.io/berry/',
+      icon: icons.IconHelp,
+      external: true,
+      target: true
+    },
+    {
+      id: 'roadmap',
+      title: <FormattedMessage id="roadmap" />,
+      type: 'item',
+      url: 'https://codedthemes.gitbook.io/berry/roadmap',
+      icon: icons.IconSitemap,
+      external: true,
+      target: true
+    }
+  ]
+};
+
+export default other;
--- a/src/react-app-env.d.js
+++ b/src/react-app-env.d.js
@ -0,0 +1 @@
+/// <reference types="react-scripts" />
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@ -0,0 +1,13 @@
+const reportWebVitals = (onPerfEntry) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
--- a/src/routes/AuthenticationRoutes.js
+++ b/src/routes/AuthenticationRoutes.js
@ -0,0 +1,12 @@
+// project imports
+import MinimalLayout from 'layout/MinimalLayout';
+
+// ==============================|| AUTHENTICATION ROUTING ||============================== //
+
+const AuthenticationRoutes = {
+  path: '/',
+  element: <MinimalLayout />,
+  children: []
+};
+
+export default AuthenticationRoutes;
--- a/src/routes/LoginRoutes.js
+++ b/src/routes/LoginRoutes.js
@ -0,0 +1,41 @@
+import { lazy } from 'react';
+
+// project imports
+import GuestGuard from 'utils/route-guard/GuestGuard';
+import MinimalLayout from 'layout/MinimalLayout';
+import NavMotion from 'layout/NavMotion';
+import Loadable from 'ui-component/Loadable';
+
+// login routing
+const AuthLogin = Loadable(lazy(() => import('views/pages/authentication/authentication3/Login3')));
+const AuthRegister = Loadable(lazy(() => import('views/pages/authentication/authentication3/Register3')));
+const AuthForgotPassword = Loadable(lazy(() => import('views/pages/authentication/authentication3/ForgotPassword3')));
+
+// ==============================|| AUTH ROUTING ||============================== //
+
+const LoginRoutes = {
+  path: '/',
+  element: (
+    <NavMotion>
+      <GuestGuard>
+        <MinimalLayout />
+      </GuestGuard>
+    </NavMotion>
+  ),
+  children: [
+    {
+      path: '/login',
+      element: <AuthLogin />
+    },
+    {
+      path: '/register',
+      element: <AuthRegister />
+    },
+    {
+      path: '/forgot',
+      element: <AuthForgotPassword />
+    }
+  ]
+};
+
+export default LoginRoutes;
--- a/src/routes/MainRoutes.js
+++ b/src/routes/MainRoutes.js
@ -0,0 +1,32 @@
+import { lazy } from 'react';
+
+// project imports
+import MainLayout from 'layout/MainLayout';
+import Loadable from 'ui-component/Loadable';
+import AuthGuard from 'utils/route-guard/AuthGuard';
+
+// sample page routing
+const SamplePage = Loadable(lazy(() => import('views/sample-page')));
+
+// ==============================|| MAIN ROUTING ||============================== //
+
+const MainRoutes = {
+  path: '/',
+  element: (
+    <AuthGuard>
+      <MainLayout />
+    </AuthGuard>
+  ),
+  children: [
+    {
+      path: '/',
+      element: <SamplePage />
+    },
+    {
+      path: '/sample-page',
+      element: <SamplePage />
+    }
+  ]
+};
+
+export default MainRoutes;
--- a/src/routes/index.js
+++ b/src/routes/index.js
@ -0,0 +1,12 @@
+import { useRoutes } from 'react-router-dom';
+
+// routes
+import MainRoutes from './MainRoutes';
+import LoginRoutes from './LoginRoutes';
+import AuthenticationRoutes from './AuthenticationRoutes';
+
+// ==============================|| ROUTING RENDER ||============================== //
+
+export default function ThemeRoutes() {
+  return useRoutes([MainRoutes, LoginRoutes, AuthenticationRoutes]);
+}
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@ -0,0 +1,128 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+);
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log('New content is available and will be used when all tabs for this page are closed. See https://bit.ly/CRA-PWA.');
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.');
+    });
+}
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log('This web app is being served cache-first by a service worker. To learn more, visit https://bit.ly/CRA-PWA');
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}
--- a/src/store/accountReducer.js
+++ b/src/store/accountReducer.js
@ -0,0 +1,44 @@
+// action - state management
+import { LOGIN, LOGOUT, REGISTER } from './actions';
+
+// ==============================|| ACCOUNT REDUCER ||============================== //
+
+const initialState = {
+  isLoggedIn: false,
+  isInitialized: false,
+  user: null
+};
+
+const accountReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case REGISTER: {
+      const { user } = action.payload;
+      return {
+        ...state,
+        user
+      };
+    }
+    case LOGIN: {
+      const { user } = action.payload;
+      return {
+        ...state,
+        isLoggedIn: true,
+        isInitialized: true,
+        user
+      };
+    }
+    case LOGOUT: {
+      return {
+        ...state,
+        isInitialized: true,
+        isLoggedIn: false,
+        user: null
+      };
+    }
+    default: {
+      return { ...state };
+    }
+  }
+};
+
+export default accountReducer;
--- a/src/store/actions.js
+++ b/src/store/actions.js
@ -0,0 +1,5 @@
+// action - account reducer
+export const LOGIN = 'LOGIN';
+export const LOGOUT = 'LOGOUT';
+export const REGISTER = 'REGISTER';
+export const FIREBASE_STATE_CHANGED = 'FIREBASE_STATE_CHANGED';
--- a/src/store/constant.js
+++ b/src/store/constant.js
@ -0,0 +1,4 @@
+// theme constant
+export const gridSpacing = 3;
+export const drawerWidth = 260;
+export const appDrawerWidth = 320;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,24 @@
+// third-party
+import { configureStore } from '@reduxjs/toolkit';
+import { useDispatch as useAppDispatch, useSelector as useAppSelector } from 'react-redux';
+
+import { persistStore } from 'redux-persist';
+
+// project imports
+import rootReducer from './reducer';
+
+// ==============================|| REDUX - MAIN STORE ||============================== //
+
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false, immutableCheck: false })
+});
+
+const persister = persistStore(store);
+
+const { dispatch } = store;
+
+const useDispatch = () => useAppDispatch();
+const useSelector = useAppSelector;
+
+export { store, persister, dispatch, useSelector, useDispatch };
--- a/src/store/reducer.js
+++ b/src/store/reducer.js
@ -0,0 +1,42 @@
+// third-party
+import { combineReducers } from 'redux';
+import { persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
+// project imports
+import snackbarReducer from './slices/snackbar';
+import customerReducer from './slices/customer';
+import contactReducer from './slices/contact';
+import productReducer from './slices/product';
+import chatReducer from './slices/chat';
+import calendarReducer from './slices/calendar';
+import mailReducer from './slices/mail';
+import userReducer from './slices/user';
+import cartReducer from './slices/cart';
+import kanbanReducer from './slices/kanban';
+import menuReducer from './slices/menu';
+
+// ==============================|| COMBINE REDUCER ||============================== //
+
+const reducer = combineReducers({
+  snackbar: snackbarReducer,
+  cart: persistReducer(
+    {
+      key: 'cart',
+      storage,
+      keyPrefix: 'berry-'
+    },
+    cartReducer
+  ),
+  kanban: kanbanReducer,
+  customer: customerReducer,
+  contact: contactReducer,
+  product: productReducer,
+  chat: chatReducer,
+  calendar: calendarReducer,
+  mail: mailReducer,
+  user: userReducer,
+  menu: menuReducer
+});
+
+export default reducer;
--- a/src/store/slices/calendar.js
+++ b/src/store/slices/calendar.js
@ -0,0 +1,93 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  events: []
+};
+
+const slice = createSlice({
+  name: 'calendar',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET EVENTS
+    getEventsSuccess(state, action) {
+      state.events = action.payload;
+    },
+
+    // ADD EVENT
+    addEventSuccess(state, action) {
+      state.events = action.payload;
+    },
+
+    // UPDATE EVENT
+    updateEventSuccess(state, action) {
+      state.events = action.payload;
+    },
+
+    // REMOVE EVENT
+    removeEventSuccess(state, action) {
+      state.events = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getEvents() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/calendar/events');
+      dispatch(slice.actions.getEventsSuccess(response.data.events));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addEvent(event) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/calendar/events/new', event);
+      dispatch(slice.actions.addEventSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function updateEvent(event) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/calendar/events/update', event);
+      dispatch(slice.actions.updateEventSuccess(response.data.events));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function removeEvent(eventId) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/calendar/events/remove', { eventId });
+      dispatch(slice.actions.removeEventSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/cart.js
+++ b/src/store/slices/cart.js
@ -0,0 +1,242 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  checkout: {
+    step: 0,
+    products: [],
+    subtotal: 0,
+    total: 0,
+    discount: 0,
+    shipping: 0,
+    billing: null,
+    payment: {
+      type: 'free',
+      method: 'cod',
+      card: ''
+    }
+  }
+};
+
+const slice = createSlice({
+  name: 'cart',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // ADD PRODUCT
+    addProductSuccess(state, action) {
+      state.checkout.products = action.payload.products;
+      state.checkout.subtotal += action.payload.subtotal;
+      state.checkout.total += action.payload.subtotal;
+    },
+
+    // REMOVE PRODUCT
+    removeProductSuccess(state, action) {
+      state.checkout.products = action.payload.products;
+      state.checkout.subtotal += -action.payload.subtotal;
+      state.checkout.total += -action.payload.subtotal;
+    },
+
+    // UPDATE PRODUCT
+    updateProductSuccess(state, action) {
+      state.checkout.products = action.payload.products;
+      state.checkout.subtotal = state.checkout.subtotal - action.payload.oldSubTotal + action.payload.subtotal;
+      state.checkout.total = state.checkout.total - action.payload.oldSubTotal + action.payload.subtotal;
+    },
+
+    // SET STEP
+    setStepSuccess(state, action) {
+      state.checkout.step = action.payload;
+    },
+
+    // SET NEXT STEP
+    setNextStepSuccess(state) {
+      state.checkout.step += 1;
+    },
+
+    // SET BACK STEP
+    setBackStepSuccess(state) {
+      state.checkout.step -= 1;
+    },
+
+    // SET BILLING ADDRESS
+    setBillingAddressSuccess(state, action) {
+      state.checkout.billing = action.payload.billing;
+    },
+
+    // SET DISCOUNT
+    setDiscountSuccess(state, action) {
+      let difference = 0;
+      if (state.checkout.discount > 0) {
+        difference = state.checkout.discount;
+      }
+
+      state.checkout.discount = action.payload.amount;
+      state.checkout.total = state.checkout.total + difference - action.payload.amount;
+    },
+
+    // SET SHIPPING CHARGE
+    setShippingChargeSuccess(state, action) {
+      state.checkout.shipping = action.payload.shipping;
+      state.checkout.total += action.payload.newShipping;
+      state.checkout.payment = {
+        ...state.checkout.payment,
+        type: action.payload.type
+      };
+    },
+
+    // SET PAYMENT METHOD
+    setPaymentMethodSuccess(state, action) {
+      state.checkout.payment = {
+        ...state.checkout.payment,
+        method: action.payload.method
+      };
+    },
+
+    // SET PAYMENT CARD
+    setPaymentCardSuccess(state, action) {
+      state.checkout.payment = {
+        ...state.checkout.payment,
+        card: action.payload.card
+      };
+    },
+
+    // RESET CART
+    resetCardSuccess(state) {
+      state.checkout = initialState.checkout;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function addProduct(product, products) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/add', { product, products });
+      dispatch(slice.actions.addProductSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function removeProduct(id, products) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/remove', { id, products });
+      dispatch(slice.actions.removeProductSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function updateProduct(id, quantity, products) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/update', { id, quantity, products });
+      dispatch(slice.actions.updateProductSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setStep(step) {
+  return () => {
+    dispatch(slice.actions.setStepSuccess(step));
+  };
+}
+
+export function setNextStep() {
+  return () => {
+    dispatch(slice.actions.setNextStepSuccess({}));
+  };
+}
+
+export function setBackStep() {
+  return () => {
+    dispatch(slice.actions.setBackStepSuccess({}));
+  };
+}
+
+export function setBillingAddress(address) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/billing-address', { address });
+      dispatch(slice.actions.setBillingAddressSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setDiscount(code, total) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/discount', { code, total });
+      dispatch(slice.actions.setDiscountSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setShippingCharge(charge, shipping) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/shipping-charge', { charge, shipping });
+      dispatch(slice.actions.setShippingChargeSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setPaymentMethod(method) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/payment-method', { method });
+      dispatch(slice.actions.setPaymentMethodSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setPaymentCard(card) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/payment-card', { card });
+      dispatch(slice.actions.setPaymentCardSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function resetCart() {
+  return async () => {
+    try {
+      const response = await axios.post('/api/cart/reset');
+      dispatch(slice.actions.resetCardSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/chat.js
+++ b/src/store/slices/chat.js
@ -0,0 +1,89 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  chats: [],
+  user: {},
+  users: []
+};
+
+const slice = createSlice({
+  name: 'chat',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET USER
+    getUserSuccess(state, action) {
+      state.user = action.payload;
+    },
+
+    // GET USER CHATS
+    getUserChatsSuccess(state, action) {
+      state.chats = action.payload;
+    },
+
+    // GET USERS
+    getUsersSuccess(state, action) {
+      state.users = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getUser(id) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/chat/users/id', { id });
+      dispatch(slice.actions.getUserSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getUserChats(user) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/chat/filter', { user });
+      dispatch(slice.actions.getUserChatsSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function insertChat(chat) {
+  return async () => {
+    try {
+      await axios.post('/api/chat/insert', chat);
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getUsers() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/chat/users');
+      dispatch(slice.actions.getUsersSuccess(response.data.users));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/contact.js
+++ b/src/store/slices/contact.js
@ -0,0 +1,61 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  contacts: []
+};
+
+const slice = createSlice({
+  name: 'contact',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET CONTACTS
+    getContactsSuccess(state, action) {
+      state.contacts = action.payload;
+    },
+
+    // MODIFY CONTACT
+    modifyContactSuccess(state, action) {
+      state.contacts = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getContacts() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/contact/list');
+      dispatch(slice.actions.getContactsSuccess(response.data.contacts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function modifyContact(contact) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/contact/modify', contact);
+      dispatch(slice.actions.modifyContactSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/customer.js
+++ b/src/store/slices/customer.js
@ -0,0 +1,96 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  customers: [],
+  orders: [],
+  products: [],
+  productreviews: []
+};
+
+const slice = createSlice({
+  name: 'customer',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET CUSTOMERS
+    getCustomersSuccess(state, action) {
+      state.customers = action.payload;
+    },
+
+    // GET ORDERS
+    getOrdersSuccess(state, action) {
+      state.orders = action.payload;
+    },
+
+    // GET PRODUCTS
+    getProductsSuccess(state, action) {
+      state.products = action.payload;
+    },
+
+    // GET PRODUCT REVIEWS
+    getProductReviewsSuccess(state, action) {
+      state.productreviews = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getCustomers() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/customer/list');
+      dispatch(slice.actions.getCustomersSuccess(response.data.customers));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getOrders() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/customer/order/list');
+      dispatch(slice.actions.getOrdersSuccess(response.data.orders));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getProducts() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/customer/product/list');
+      dispatch(slice.actions.getProductsSuccess(response.data.products));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getProductReviews() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/customer/product/reviews');
+      dispatch(slice.actions.getProductReviewsSuccess(response.data.productreviews));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/kanban.js
+++ b/src/store/slices/kanban.js
@ -0,0 +1,416 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  columns: [],
+  columnsOrder: [],
+  comments: [],
+  items: [],
+  profiles: [],
+  selectedItem: false,
+  userStory: [],
+  userStoryOrder: []
+};
+
+const slice = createSlice({
+  name: 'kanban',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // ADD COLUMN
+    addColumnSuccess(state, action) {
+      state.columns = action.payload.columns;
+      state.columnsOrder = action.payload.columnsOrder;
+    },
+
+    // EDIT COLUMN
+    editColumnSuccess(state, action) {
+      state.columns = action.payload.columns;
+    },
+
+    // UPDATE COLUMN ORDER
+    updateColumnOrderSuccess(state, action) {
+      state.columnsOrder = action.payload.columnsOrder;
+    },
+
+    // DELETE COLUMN
+    deleteColumnSuccess(state, action) {
+      state.columns = action.payload.columns;
+      state.columnsOrder = action.payload.columnsOrder;
+    },
+
+    // ADD ITEM
+    addItemSuccess(state, action) {
+      state.items = action.payload.items;
+      state.columns = action.payload.columns;
+      state.userStory = action.payload.userStory;
+    },
+
+    // EDIT ITEM
+    editItemSuccess(state, action) {
+      state.items = action.payload.items;
+      state.columns = action.payload.columns;
+      state.userStory = action.payload.userStory;
+    },
+
+    // UPDATE COLUMN ITEM ORDER
+    updateColumnItemOrderSuccess(state, action) {
+      state.columns = action.payload.columns;
+    },
+
+    // SELECT ITEM
+    selectItemSuccess(state, action) {
+      state.selectedItem = action.payload.selectedItem;
+    },
+
+    // ADD ITEM COMMENT
+    addItemCommentSuccess(state, action) {
+      state.items = action.payload.items;
+      state.comments = action.payload.comments;
+    },
+
+    // DELETE ITEM
+    deleteItemSuccess(state, action) {
+      state.items = action.payload.items;
+      state.columns = action.payload.columns;
+      state.userStory = action.payload.userStory;
+    },
+
+    // ADD STORY
+    addStorySuccess(state, action) {
+      state.userStory = action.payload.userStory;
+      state.userStoryOrder = action.payload.userStoryOrder;
+    },
+
+    // EDIT STORY
+    editStorySuccess(state, action) {
+      state.userStory = action.payload.userStory;
+    },
+
+    // UPDATE STORY ORDER
+    updateStoryOrderSuccess(state, action) {
+      state.userStoryOrder = action.payload.userStoryOrder;
+    },
+
+    // UPDATE STORY ITEM ORDER
+    updateStoryItemOrderSuccess(state, action) {
+      state.userStory = action.payload.userStory;
+    },
+
+    // ADD STORY COMMENT
+    addStoryCommentSuccess(state, action) {
+      state.userStory = action.payload.userStory;
+      state.comments = action.payload.comments;
+    },
+
+    // DELETE STORY
+    deleteStorySuccess(state, action) {
+      state.userStory = action.payload.userStory;
+      state.userStoryOrder = action.payload.userStoryOrder;
+    },
+
+    // GET COLUMNS
+    getColumnsSuccess(state, action) {
+      state.columns = action.payload;
+    },
+
+    // GET COLUMNS ORDER
+    getColumnsOrderSuccess(state, action) {
+      state.columnsOrder = action.payload;
+    },
+
+    // GET COMMENTS
+    getCommentsSuccess(state, action) {
+      state.comments = action.payload;
+    },
+
+    // GET PROFILES
+    getProfilesSuccess(state, action) {
+      state.profiles = action.payload;
+    },
+
+    // GET ITEMS
+    getItemsSuccess(state, action) {
+      state.items = action.payload;
+    },
+
+    // GET USER STORY
+    getUserStorySuccess(state, action) {
+      state.userStory = action.payload;
+    },
+
+    // GET USER STORY ORDER
+    getUserStoryOrderSuccess(state, action) {
+      state.userStoryOrder = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getColumns() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/columns');
+      dispatch(slice.actions.getColumnsSuccess(response.data.columns));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getColumnsOrder() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/columns-order');
+      dispatch(slice.actions.getColumnsOrderSuccess(response.data.columnsOrder));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getComments() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/comments');
+      dispatch(slice.actions.getCommentsSuccess(response.data.comments));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getProfiles() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/profiles');
+      dispatch(slice.actions.getProfilesSuccess(response.data.profiles));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getItems() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/items');
+      dispatch(slice.actions.getItemsSuccess(response.data.items));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getUserStory() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/userstory');
+      dispatch(slice.actions.getUserStorySuccess(response.data.userStory));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getUserStoryOrder() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/kanban/userstory-order');
+      dispatch(slice.actions.getUserStoryOrderSuccess(response.data.userStoryOrder));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addColumn(column, columns, columnsOrder) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/add-column', { column, columns, columnsOrder });
+      dispatch(slice.actions.addColumnSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function editColumn(column, columns) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/edit-column', { column, columns });
+      dispatch(slice.actions.editColumnSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function updateColumnOrder(columnsOrder) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/update-column-order', { columnsOrder });
+      dispatch(slice.actions.updateColumnOrderSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function deleteColumn(columnId, columnsOrder, columns) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/delete-column', { columnId, columnsOrder, columns });
+      dispatch(slice.actions.deleteColumnSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addItem(columnId, columns, item, items, storyId, userStory) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/add-item', { columnId, columns, item, items, storyId, userStory });
+      dispatch(slice.actions.addItemSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function editItem(columnId, columns, item, items, storyId, userStory) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/edit-item', { items, item, userStory, storyId, columns, columnId });
+      dispatch(slice.actions.editItemSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function updateColumnItemOrder(columns) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/update-item-order', { columns });
+      dispatch(slice.actions.updateColumnItemOrderSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function selectItem(selectedItem) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/select-item', { selectedItem });
+      dispatch(slice.actions.selectItemSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addItemComment(itemId, comment, items, comments) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/add-item-comment', { items, itemId, comment, comments });
+      dispatch(slice.actions.addItemCommentSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function deleteItem(itemId, items, columns, userStory) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/delete-item', { columns, itemId, userStory, items });
+      dispatch(slice.actions.deleteItemSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addStory(story, userStory, userStoryOrder) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/add-story', { userStory, story, userStoryOrder });
+      dispatch(slice.actions.addStorySuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function editStory(story, userStory) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/edit-story', { userStory, story });
+      dispatch(slice.actions.editStorySuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function updateStoryOrder(userStoryOrder) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/update-story-order', { userStoryOrder });
+      dispatch(slice.actions.updateStoryOrderSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function updateStoryItemOrder(userStory) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/update-storyitem-order', { userStory });
+      dispatch(slice.actions.updateStoryItemOrderSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addStoryComment(storyId, comment, comments, userStory) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/add-story-comment', { userStory, storyId, comment, comments });
+      dispatch(slice.actions.addStoryCommentSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function deleteStory(storyId, userStory, userStoryOrder) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/kanban/delete-story', { userStory, storyId, userStoryOrder });
+      dispatch(slice.actions.deleteStorySuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/mail.js
+++ b/src/store/slices/mail.js
@ -0,0 +1,93 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  mails: [],
+  unreadCount: undefined
+};
+
+const slice = createSlice({
+  name: 'mail',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET MAILS
+    getMailsSuccess(state, action) {
+      state.mails = action.payload.mails;
+      state.unreadCount = action.payload.unreadCount;
+    },
+
+    // FILTER MAILS
+    filterMailsSuccess(state, action) {
+      state.mails = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getMails() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/mails/list');
+      dispatch(slice.actions.getMailsSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterMails(filter) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/mails/filter', { filter });
+      dispatch(slice.actions.filterMailsSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setImportant(id) {
+  return async () => {
+    try {
+      await axios.post('/api/mails/setImportant', { id });
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setStarred(id) {
+  return async () => {
+    try {
+      await axios.post('/api/mails/setStarred', { id });
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function setRead(id) {
+  return async () => {
+    try {
+      await axios.post('/api/mails/setRead', { id });
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/menu.js
+++ b/src/store/slices/menu.js
@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+// initial state
+const initialState = {
+  openItem: ['dashboard'],
+  drawerOpen: false
+};
+
+// ==============================|| SLICE - MENU ||============================== //
+
+const menu = createSlice({
+  name: 'menu',
+  initialState,
+  reducers: {
+    activeItem(state, action) {
+      state.openItem = action.payload;
+    },
+
+    openDrawer(state, action) {
+      state.drawerOpen = action.payload;
+    }
+  }
+});
+
+export default menu.reducer;
+
+export const { activeItem, openDrawer } = menu.actions;
--- a/src/store/slices/product.js
+++ b/src/store/slices/product.js
@ -0,0 +1,161 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  products: [],
+  product: null,
+  relatedProducts: [],
+  reviews: [],
+  addresses: []
+};
+
+const slice = createSlice({
+  name: 'product',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET PRODUCTS
+    getProductsSuccess(state, action) {
+      state.products = action.payload;
+    },
+
+    // FILTER PRODUCTS
+    filterProductsSuccess(state, action) {
+      state.products = action.payload;
+    },
+
+    // GET PRODUCT
+    getProductSuccess(state, action) {
+      state.product = action.payload;
+    },
+
+    // GET RELATED PRODUCTS
+    getRelatedProductsSuccess(state, action) {
+      state.relatedProducts = action.payload;
+    },
+
+    // GET PRODUCT REVIEWS
+    getProductReviewsSuccess(state, action) {
+      state.reviews = action.payload;
+    },
+
+    // GET ADDRESSES
+    getAddressesSuccess(state, action) {
+      state.addresses = action.payload;
+    },
+
+    // ADD ADDRESS
+    addAddressSuccess(state, action) {
+      state.addresses = action.payload;
+    },
+
+    // EDIT ADDRESS
+    editAddressSuccess(state, action) {
+      state.addresses = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getProducts() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/products/list');
+      dispatch(slice.actions.getProductsSuccess(response.data.products));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterProducts(filter) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/products/filter', { filter });
+      dispatch(slice.actions.filterProductsSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getProduct(id) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/product/details', { id });
+      dispatch(slice.actions.getProductSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getRelatedProducts(id) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/product/related', { id });
+      dispatch(slice.actions.getRelatedProductsSuccess(response.data));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getProductReviews() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/review/list');
+      dispatch(slice.actions.getProductReviewsSuccess(response.data.productReviews));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getAddresses() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/address/list');
+      dispatch(slice.actions.getAddressesSuccess(response.data.address));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addAddress(address) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/address/new', address);
+      dispatch(slice.actions.addAddressSuccess(response.data.address));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function editAddress(address) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/address/edit', address);
+      dispatch(slice.actions.editAddressSuccess(response.data.address));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/store/slices/snackbar.js
+++ b/src/store/slices/snackbar.js
@ -0,0 +1,52 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  action: false,
+  open: false,
+  message: 'Note archived',
+  anchorOrigin: {
+    vertical: 'bottom',
+    horizontal: 'right'
+  },
+  variant: 'default',
+  alert: {
+    color: 'primary',
+    variant: 'filled'
+  },
+  transition: 'Fade',
+  close: true,
+  actionButton: false
+};
+
+// ==============================|| SLICE - SNACKBAR ||============================== //
+
+const snackbar = createSlice({
+  name: 'snackbar',
+  initialState,
+  reducers: {
+    openSnackbar(state, action) {
+      const { open, message, anchorOrigin, variant, alert, transition, close, actionButton } = action.payload;
+
+      state.action = !state.action;
+      state.open = open || initialState.open;
+      state.message = message || initialState.message;
+      state.anchorOrigin = anchorOrigin || initialState.anchorOrigin;
+      state.variant = variant || initialState.variant;
+      state.alert = {
+        color: alert?.color || initialState.alert.color,
+        variant: alert?.variant || initialState.alert.variant
+      };
+      state.transition = transition || initialState.transition;
+      state.close = close === false ? close : initialState.close;
+      state.actionButton = actionButton || initialState.actionButton;
+    },
+
+    closeSnackbar(state) {
+      state.open = false;
+    }
+  }
+});
+
+export default snackbar.reducer;
+
+export const { closeSnackbar, openSnackbar } = snackbar.actions;
--- a/src/store/slices/user.js
+++ b/src/store/slices/user.js
@ -0,0 +1,390 @@
+// third-party
+import { createSlice } from '@reduxjs/toolkit';
+
+// project imports
+import axios from 'utils/axios';
+import { dispatch } from '../index';
+
+// ----------------------------------------------------------------------
+
+const initialState = {
+  error: null,
+  usersS1: [],
+  usersS2: [],
+  followers: [],
+  friendRequests: [],
+  friends: [],
+  gallery: [],
+  posts: [],
+  detailCards: [],
+  simpleCards: [],
+  profileCards: []
+};
+
+const slice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    // HAS ERROR
+    hasError(state, action) {
+      state.error = action.payload;
+    },
+
+    // GET USERS STYLE 1
+    getUsersListStyle1Success(state, action) {
+      state.usersS1 = action.payload;
+    },
+
+    // GET USERS STYLE 2
+    getUsersListStyle2Success(state, action) {
+      state.usersS2 = action.payload;
+    },
+
+    // GET FOLLOWERS
+    getFollowersSuccess(state, action) {
+      state.followers = action.payload;
+    },
+
+    // FILTER FOLLOWERS
+    filterFollowersSuccess(state, action) {
+      state.followers = action.payload;
+    },
+
+    // GET FRIEND REQUESTS
+    getFriendRequestsSuccess(state, action) {
+      state.friendRequests = action.payload;
+    },
+
+    // FILTER FRIEND REQUESTS
+    filterFriendRequestsSuccess(state, action) {
+      state.friendRequests = action.payload;
+    },
+
+    // GET FRIENDS
+    getFriendsSuccess(state, action) {
+      state.friends = action.payload;
+    },
+
+    // FILTER FRIENDS
+    filterFriendsSuccess(state, action) {
+      state.friends = action.payload;
+    },
+
+    // GET GALLERY
+    getGallerySuccess(state, action) {
+      state.gallery = action.payload;
+    },
+
+    // GET POSTS
+    getPostsSuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // EDIT COMMENT
+    editCommentSuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // ADD COMMENT
+    addCommentSuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // ADD REPLY
+    addReplySuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // LIKE POST
+    likePostSuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // LIKE COMMENT
+    likeCommentSuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // LIKE REPLY
+    likeReplySuccess(state, action) {
+      state.posts = action.payload;
+    },
+
+    // GET DETAIL CARDS
+    getDetailCardsSuccess(state, action) {
+      state.detailCards = action.payload;
+    },
+
+    // FILTER DETAIL CARDS
+    filterDetailCardsSuccess(state, action) {
+      state.detailCards = action.payload;
+    },
+
+    // GET SIMPLE CARDS
+    getSimpleCardsSuccess(state, action) {
+      state.simpleCards = action.payload;
+    },
+
+    // FILTER SIMPLE CARDS
+    filterSimpleCardsSuccess(state, action) {
+      state.simpleCards = action.payload;
+    },
+
+    // GET PROFILE CARDS
+    getProfileCardsSuccess(state, action) {
+      state.profileCards = action.payload;
+    },
+
+    // FILTER PROFILE CARDS
+    filterProfileCardsSuccess(state, action) {
+      state.profileCards = action.payload;
+    }
+  }
+});
+
+// Reducer
+export default slice.reducer;
+
+// ----------------------------------------------------------------------
+
+export function getUsersListStyle1() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/user-list/s1/list');
+      dispatch(slice.actions.getUsersListStyle1Success(response.data.users_s1));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getUsersListStyle2() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/user-list/s2/list');
+      dispatch(slice.actions.getUsersListStyle2Success(response.data.users_s2));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getFollowers() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/followers/list');
+      dispatch(slice.actions.getFollowersSuccess(response.data.followers));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterFollowers(key) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/followers/filter', { key });
+      dispatch(slice.actions.filterFollowersSuccess(response.data.results));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getFriendRequests() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/friend-request/list');
+      dispatch(slice.actions.getFriendRequestsSuccess(response.data.friends));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterFriendRequests(key) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/friend-request/filter', { key });
+      dispatch(slice.actions.filterFriendRequestsSuccess(response.data.results));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getFriends() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/friends/list');
+      dispatch(slice.actions.getFriendsSuccess(response.data.friends));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterFriends(key) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/friends/filter', { key });
+      dispatch(slice.actions.filterFriendsSuccess(response.data.results));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getGallery() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/gallery/list');
+      dispatch(slice.actions.getGallerySuccess(response.data.gallery));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getPosts() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/posts/list');
+      dispatch(slice.actions.getPostsSuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function editComment(key, id) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/posts/editComment', { key, id });
+      dispatch(slice.actions.editCommentSuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addComment(postId, comment) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/comments/add', { postId, comment });
+      dispatch(slice.actions.addCommentSuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function addReply(postId, commentId, reply) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/replies/add', { postId, commentId, reply });
+      dispatch(slice.actions.addReplySuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function likePost(postId) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/posts/list/like', { postId });
+      dispatch(slice.actions.likePostSuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function likeComment(postId, commentId) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/comments/list/like', { postId, commentId });
+      dispatch(slice.actions.likeCommentSuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function likeReply(postId, commentId, replayId) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/replies/list/like', { postId, commentId, replayId });
+      dispatch(slice.actions.likeReplySuccess(response.data.posts));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getDetailCards() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/details-card/list');
+      dispatch(slice.actions.getDetailCardsSuccess(response.data.users));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterDetailCards(key) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/details-card/filter', { key });
+      dispatch(slice.actions.filterDetailCardsSuccess(response.data.results));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getSimpleCards() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/simple-card/list');
+      dispatch(slice.actions.getSimpleCardsSuccess(response.data.users));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterSimpleCards(key) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/simple-card/filter', { key });
+      dispatch(slice.actions.filterSimpleCardsSuccess(response.data.results));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function getProfileCards() {
+  return async () => {
+    try {
+      const response = await axios.get('/api/profile-card/list');
+      dispatch(slice.actions.getProfileCardsSuccess(response.data.users));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
+
+export function filterProfileCards(key) {
+  return async () => {
+    try {
+      const response = await axios.post('/api/profile-card/filter', { key });
+      dispatch(slice.actions.filterProfileCardsSuccess(response.data.results));
+    } catch (error) {
+      dispatch(slice.actions.hasError(error));
+    }
+  };
+}
--- a/src/themes/compStyleOverride.js
+++ b/src/themes/compStyleOverride.js
@ -0,0 +1,315 @@
+export default function componentStyleOverrides(theme, borderRadius, outlinedFilled) {
+  const mode = theme.palette.mode;
+  const bgColor = mode === 'dark' ? theme.palette.dark[800] : theme.palette.grey[50];
+  const menuSelectedBack = mode === 'dark' ? theme.palette.secondary.main + 15 : theme.palette.secondary.light;
+  const menuSelected = mode === 'dark' ? theme.palette.secondary.main : theme.palette.secondary.dark;
+
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          borderRadius: '4px'
+        }
+      }
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none'
+        },
+        rounded: {
+          borderRadius: `${borderRadius}px`
+        }
+      }
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.dark,
+          padding: '24px'
+        },
+        title: {
+          fontSize: '1.125rem'
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: '24px'
+        }
+      }
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: '24px'
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          alignItems: 'center'
+        },
+        outlined: {
+          border: '1px dashed'
+        }
+      }
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.primary,
+          paddingTop: '10px',
+          paddingBottom: '10px',
+          '&.Mui-selected': {
+            color: menuSelected,
+            backgroundColor: menuSelectedBack,
+            '&:hover': {
+              backgroundColor: menuSelectedBack
+            },
+            '& .MuiListItemIcon-root': {
+              color: menuSelected
+            }
+          },
+          '&:hover': {
+            backgroundColor: menuSelectedBack,
+            color: menuSelected,
+            '& .MuiListItemIcon-root': {
+              color: menuSelected
+            }
+          }
+        }
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.primary,
+          minWidth: '36px'
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          color: theme.palette.text.dark
+        }
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          color: theme.palette.text.dark,
+          '&::placeholder': {
+            color: theme.palette.text.secondary,
+            fontSize: '0.875rem'
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          background: outlinedFilled ? bgColor : 'transparent',
+          borderRadius: `${borderRadius}px`,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: mode === 'dark' ? theme.palette.text.primary + 28 : theme.palette.grey[400]
+          },
+          '&:hover $notchedOutline': {
+            borderColor: theme.palette.primary.light
+          },
+          '&.MuiInputBase-multiline': {
+            padding: 1
+          }
+        },
+        input: {
+          fontWeight: 500,
+          background: outlinedFilled ? bgColor : 'transparent',
+          padding: '15.5px 14px',
+          borderRadius: `${borderRadius}px`,
+          '&.MuiInputBase-inputSizeSmall': {
+            padding: '10px 14px',
+            '&.MuiInputBase-inputAdornedStart': {
+              paddingLeft: 0
+            }
+          }
+        },
+        inputAdornedStart: {
+          paddingLeft: 4
+        },
+        notchedOutline: {
+          borderRadius: `${borderRadius}px`
+        }
+      }
+    },
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            color: mode === 'dark' ? theme.palette.text.primary + 50 : theme.palette.grey[300]
+          }
+        },
+        mark: {
+          backgroundColor: theme.palette.background.paper,
+          width: '4px'
+        },
+        valueLabel: {
+          color: mode === 'dark' ? theme.palette.primary.main : theme.palette.primary.light
+        }
+      }
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          '& .MuiAutocomplete-tag': {
+            background: mode === 'dark' ? theme.palette.text.primary + 20 : theme.palette.secondary.light,
+            borderRadius: 4,
+            color: theme.palette.text.dark,
+            '.MuiChip-deleteIcon': {
+              color: mode === 'dark' ? theme.palette.text.primary + 80 : theme.palette.secondary[200]
+            }
+          }
+        },
+        popper: {
+          borderRadius: `${borderRadius}px`,
+          boxShadow: '0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%)'
+        }
+      }
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: theme.palette.divider,
+          opacity: mode === 'dark' ? 0.2 : 1
+        }
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          '&:focus': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    },
+    MuiCheckbox: {
+      styleOverrides: {
+        root: {
+          /** checked not prop
+           *"&.Mui-checked": {
+           *    fontSize: "28px"
+           *}
+           */
+        }
+      }
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          color: mode === 'dark' ? theme.palette.dark.main : theme.palette.primary.dark,
+          background: mode === 'dark' ? theme.palette.text.primary : theme.palette.primary[200]
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          '&.MuiChip-deletable .MuiChip-deleteIcon': {
+            color: 'inherit'
+          }
+        }
+      }
+    },
+    MuiTimelineContent: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.dark,
+          fontSize: '16px'
+        }
+      }
+    },
+    MuiTreeItem: {
+      styleOverrides: {
+        label: {
+          marginTop: 14,
+          marginBottom: 14
+        }
+      }
+    },
+    MuiTimelineDot: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none'
+        }
+      }
+    },
+    MuiInternalDateTimePickerTabs: {
+      styleOverrides: {
+        tabs: {
+          backgroundColor: mode === 'dark' ? theme.palette.dark[900] : theme.palette.primary.light,
+          '& .MuiTabs-flexContainer': {
+            borderColor: mode === 'dark' ? theme.palette.text.primary + 20 : theme.palette.primary[200]
+          },
+          '& .MuiTab-root': {
+            color: mode === 'dark' ? theme.palette.text.secondary : theme.palette.grey[900]
+          },
+          '& .MuiTabs-indicator': {
+            backgroundColor: theme.palette.primary.dark
+          },
+          '& .Mui-selected': {
+            color: theme.palette.primary.dark
+          }
+        }
+      }
+    },
+    MuiTabs: {
+      styleOverrides: {
+        flexContainer: {
+          borderBottom: '1px solid',
+          borderColor: mode === 'dark' ? theme.palette.text.primary + 20 : theme.palette.grey[200]
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          padding: '12px 0 12px 0'
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderColor: mode === 'dark' ? theme.palette.text.primary + 15 : theme.palette.grey[200],
+          '&.MuiTableCell-head': {
+            fontSize: '0.875rem',
+            color: theme.palette.grey[600],
+            fontWeight: 500
+          }
+        }
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.palette.background.paper,
+          background: theme.palette.text.primary
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: '1.25rem'
+        }
+      }
+    }
+  };
+}
--- a/src/themes/index.js
+++ b/src/themes/index.js
@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+
+// material-ui
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+// project import
+import useConfig from 'hooks/useConfig';
+import Palette from './palette';
+import Typography from './typography';
+
+import componentStyleOverrides from './compStyleOverride';
+import customShadows from './shadows';
+
+export default function ThemeCustomization({ children }) {
+  const { borderRadius, fontFamily, navType, outlinedFilled, presetColor, rtlLayout } = useConfig();
+
+  const theme = useMemo(() => Palette(navType, presetColor), [navType, presetColor]);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const themeTypography = useMemo(() => Typography(theme, borderRadius, fontFamily), [theme, borderRadius, fontFamily]);
+  const themeCustomShadows = useMemo(() => customShadows(navType, theme), [navType, theme]);
+
+  const themeOptions = useMemo(
+    () => ({
+      direction: rtlLayout ? 'rtl' : 'ltr',
+      palette: theme.palette,
+      mixins: {
+        toolbar: {
+          minHeight: '48px',
+          padding: '16px',
+          '@media (min-width: 600px)': {
+            minHeight: '48px'
+          }
+        }
+      },
+      typography: themeTypography,
+      customShadows: themeCustomShadows
+    }),
+    [rtlLayout, theme, themeCustomShadows, themeTypography]
+  );
+
+  const themes = createTheme(themeOptions);
+  themes.components = useMemo(() => componentStyleOverrides(themes, borderRadius, outlinedFilled), [themes, borderRadius, outlinedFilled]);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={themes}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+ThemeCustomization.propTypes = {
+  children: PropTypes.node
+};
--- a/src/themes/palette.js
+++ b/src/themes/palette.js
@ -0,0 +1,112 @@
+// material-ui
+import { createTheme } from '@mui/material/styles';
+
+// assets
+import defaultColor from 'assets/scss/_themes-vars.module.scss';
+import theme1 from 'assets/scss/_theme1.module.scss';
+import theme2 from 'assets/scss/_theme2.module.scss';
+import theme3 from 'assets/scss/_theme3.module.scss';
+import theme4 from 'assets/scss/_theme4.module.scss';
+import theme5 from 'assets/scss/_theme5.module.scss';
+import theme6 from 'assets/scss/_theme6.module.scss';
+
+// ==============================|| DEFAULT THEME - PALETTE  ||============================== //
+
+const Palette = (navType, presetColor) => {
+  let colors;
+  switch (presetColor) {
+    case 'theme1':
+      colors = theme1;
+      break;
+    case 'theme2':
+      colors = theme2;
+      break;
+    case 'theme3':
+      colors = theme3;
+      break;
+    case 'theme4':
+      colors = theme4;
+      break;
+    case 'theme5':
+      colors = theme5;
+      break;
+    case 'theme6':
+      colors = theme6;
+      break;
+    case 'default':
+    default:
+      colors = defaultColor;
+  }
+
+  return createTheme({
+    palette: {
+      mode: navType,
+      common: {
+        black: colors.darkPaper
+      },
+      primary: {
+        light: navType === 'dark' ? colors.darkPrimaryLight : colors.primaryLight,
+        main: navType === 'dark' ? colors.darkPrimaryMain : colors.primaryMain,
+        dark: navType === 'dark' ? colors.darkPrimaryDark : colors.primaryDark,
+        200: navType === 'dark' ? colors.darkPrimary200 : colors.primary200,
+        800: navType === 'dark' ? colors.darkPrimary800 : colors.primary800
+      },
+      secondary: {
+        light: navType === 'dark' ? colors.darkSecondaryLight : colors.secondaryLight,
+        main: navType === 'dark' ? colors.darkSecondaryMain : colors.secondaryMain,
+        dark: navType === 'dark' ? colors.darkSecondaryDark : colors.secondaryDark,
+        200: navType === 'dark' ? colors.darkSecondary200 : colors.secondary200,
+        800: navType === 'dark' ? colors.darkSecondary800 : colors.secondary800
+      },
+      error: {
+        light: colors.errorLight,
+        main: colors.errorMain,
+        dark: colors.errorDark
+      },
+      orange: {
+        light: colors.orangeLight,
+        main: colors.orangeMain,
+        dark: colors.orangeDark
+      },
+      warning: {
+        light: colors.warningLight,
+        main: colors.warningMain,
+        dark: colors.warningDark
+      },
+      success: {
+        light: colors.successLight,
+        200: colors.success200,
+        main: colors.successMain,
+        dark: colors.successDark
+      },
+      grey: {
+        50: colors.grey50,
+        100: colors.grey100,
+        500: navType === 'dark' ? colors.darkTextSecondary : colors.grey500,
+        600: navType === 'dark' ? colors.darkTextTitle : colors.grey900,
+        700: navType === 'dark' ? colors.darkTextPrimary : colors.grey700,
+        900: navType === 'dark' ? colors.darkTextPrimary : colors.grey900
+      },
+      dark: {
+        light: colors.darkTextPrimary,
+        main: colors.darkLevel1,
+        dark: colors.darkLevel2,
+        800: colors.darkBackground,
+        900: colors.darkPaper
+      },
+      text: {
+        primary: navType === 'dark' ? colors.darkTextPrimary : colors.grey700,
+        secondary: navType === 'dark' ? colors.darkTextSecondary : colors.grey500,
+        dark: navType === 'dark' ? colors.darkTextPrimary : colors.grey900,
+        hint: colors.grey100
+      },
+      divider: navType === 'dark' ? colors.darkTextPrimary : colors.grey200,
+      background: {
+        paper: navType === 'dark' ? colors.darkLevel2 : colors.paper,
+        default: navType === 'dark' ? colors.darkPaper : colors.paper
+      }
+    }
+  });
+};
+
+export default Palette;
--- a/src/themes/shadows.js
+++ b/src/themes/shadows.js
@ -0,0 +1,24 @@
+import { alpha } from '@mui/material/styles';
+
+const createCustomShadow = (theme, color) => {
+  const transparent = alpha(color, 0.24);
+  return {
+    z1: `0 1px 2px 0 ${transparent}`,
+    z8: `0 8px 16px 0 ${transparent}`,
+    z12: `0 12px 24px 0 ${transparent} 0 10px 20px 0 ${transparent}`,
+    z16: `0 0 3px 0 ${transparent} 0 14px 28px -5px ${transparent}`,
+    z20: `0 0 3px 0 ${transparent} 0 18px 36px -5px ${transparent}`,
+    z24: `0 0 6px 0 ${transparent} 0 21px 44px 0 ${transparent}`,
+
+    primary: `0px 12px 14px 0px ${alpha(theme.palette.primary.main, 0.3)}`,
+    secondary: `0px 12px 14px 0px ${alpha(theme.palette.secondary.main, 0.3)}`,
+    orange: `0px 12px 14px 0px ${alpha(theme.palette.orange.main, 0.3)}`,
+    success: `0px 12px 14px 0px ${alpha(theme.palette.success.main, 0.3)}`,
+    warning: `0px 12px 14px 0px ${alpha(theme.palette.warning.main, 0.3)}`,
+    error: `0px 12px 14px 0px ${alpha(theme.palette.error.main, 0.3)}`
+  };
+};
+
+export default function customShadows(navType, theme) {
+  return navType === 'dark' ? createCustomShadow(theme, theme.palette.dark.main) : createCustomShadow(theme, theme.palette.grey[600]);
+}
--- a/src/themes/typography.js
+++ b/src/themes/typography.js
@ -0,0 +1,128 @@
+const Typography = (theme, borderRadius, fontFamily) => ({
+  fontFamily,
+  h6: {
+    fontWeight: 500,
+    color: theme.palette.grey[600],
+    fontSize: '0.75rem'
+  },
+  h5: {
+    fontSize: '0.875rem',
+    color: theme.palette.grey[600],
+    fontWeight: 500
+  },
+  h4: {
+    fontSize: '1rem',
+    color: theme.palette.grey[600],
+    fontWeight: 600
+  },
+  h3: {
+    fontSize: '1.25rem',
+    color: theme.palette.grey[600],
+    fontWeight: 600
+  },
+  h2: {
+    fontSize: '1.5rem',
+    color: theme.palette.grey[600],
+    fontWeight: 700
+  },
+  h1: {
+    fontSize: '2.125rem',
+    color: theme.palette.grey[600],
+    fontWeight: 700
+  },
+  subtitle1: {
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: theme.palette.text.dark
+  },
+  subtitle2: {
+    fontSize: '0.75rem',
+    fontWeight: 400,
+    color: theme.palette.text.secondary
+  },
+  caption: {
+    fontSize: '0.75rem',
+    color: theme.palette.text.secondary,
+    fontWeight: 400
+  },
+  body1: {
+    fontSize: '0.875rem',
+    fontWeight: 400,
+    lineHeight: '1.334em'
+  },
+  body2: {
+    letterSpacing: '0em',
+    fontWeight: 400,
+    lineHeight: '1.5em',
+    color: theme.palette.text.primary
+  },
+  button: {
+    textTransform: 'capitalize'
+  },
+  customInput: {
+    marginTop: 1,
+    marginBottom: 1,
+    '& > label': {
+      top: 23,
+      left: 0,
+      color: theme.palette.grey[500],
+      '&[data-shrink="false"]': {
+        top: 5
+      }
+    },
+    '& > div > input': {
+      padding: '30.5px 14px 11.5px !important'
+    },
+    '& legend': {
+      display: 'none'
+    },
+    '& fieldset': {
+      top: 0
+    }
+  },
+  mainContent: {
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.dark[800] : theme.palette.primary.light,
+    width: '100%',
+    minHeight: 'calc(100vh - 88px)',
+    flexGrow: 1,
+    padding: '20px',
+    marginTop: '88px',
+    marginRight: '20px',
+    borderRadius: `${borderRadius}px`
+  },
+  menuCaption: {
+    fontSize: '0.875rem',
+    fontWeight: 500,
+    color: theme.palette.grey[600],
+    padding: '6px',
+    textTransform: 'capitalize',
+    marginTop: '10px'
+  },
+  subMenuCaption: {
+    fontSize: '0.6875rem',
+    fontWeight: 500,
+    color: theme.palette.text.secondary,
+    textTransform: 'capitalize'
+  },
+  commonAvatar: {
+    cursor: 'pointer',
+    borderRadius: '8px'
+  },
+  smallAvatar: {
+    width: '22px',
+    height: '22px',
+    fontSize: '1rem'
+  },
+  mediumAvatar: {
+    width: '34px',
+    height: '34px',
+    fontSize: '1.2rem'
+  },
+  largeAvatar: {
+    width: '44px',
+    height: '44px',
+    fontSize: '1.5rem'
+  }
+});
+
+export default Typography;
--- a/src/ui-component/Loadable.js
+++ b/src/ui-component/Loadable.js
@ -0,0 +1,15 @@
+import { Suspense } from 'react';
+
+// project imports
+import Loader from './Loader';
+
+// ==============================|| LOADABLE - LAZY LOADING ||============================== //
+
+const Loadable = (Component) => (props) =>
+  (
+    <Suspense fallback={<Loader />}>
+      <Component {...props} />
+    </Suspense>
+  );
+
+export default Loadable;
--- a/src/ui-component/Loader.js
+++ b/src/ui-component/Loader.js
@ -0,0 +1,22 @@
+// material-ui
+import LinearProgress from '@mui/material/LinearProgress';
+import { styled } from '@mui/material/styles';
+
+// styles
+const LoaderWrapper = styled('div')({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 1301,
+  width: '100%'
+});
+
+// ==============================|| LOADER ||============================== //
+
+const Loader = () => (
+  <LoaderWrapper>
+    <LinearProgress color="primary" />
+  </LoaderWrapper>
+);
+
+export default Loader;
--- a/src/ui-component/Locales.js
+++ b/src/ui-component/Locales.js
@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
+
+// third-party
+import { IntlProvider } from 'react-intl';
+import useConfig from 'hooks/useConfig';
+
+// load locales files
+const loadLocaleData = (locale) => {
+  switch (locale) {
+    case 'fr':
+      return import('utils/locales/fr.json');
+    case 'ro':
+      return import('utils/locales/ro.json');
+    case 'zh':
+      return import('utils/locales/zh.json');
+    default:
+      return import('utils/locales/en.json');
+  }
+};
+
+// ==============================|| LOCALIZATION ||============================== //
+
+const Locales = ({ children }) => {
+  const { locale } = useConfig();
+  const [messages, setMessages] = useState();
+
+  useEffect(() => {
+    loadLocaleData(locale).then((d) => {
+      setMessages(d.default);
+    });
+  }, [locale]);
+
+  return (
+    <>
+      {messages && (
+        <IntlProvider locale={locale} defaultLocale="en" messages={messages}>
+          {children}
+        </IntlProvider>
+      )}
+    </>
+  );
+};
+
+Locales.propTypes = {
+  children: PropTypes.node
+};
+
+export default Locales;
--- a/src/ui-component/Logo.js
+++ b/src/ui-component/Logo.js
@ -0,0 +1,69 @@
+// material-ui
+import { useTheme } from '@mui/material/styles';
+
+/**
+ * if you want to use image instead of <svg> uncomment following.
+ *
+ * import logoDark from 'assets/images/logo-dark.svg';
+ * import logo from 'assets/images/logo.svg';
+ *
+ */
+
+// ==============================|| LOGO SVG ||============================== //
+
+const Logo = () => {
+  const theme = useTheme();
+
+  return (
+    /**
+     * if you want to use image instead of svg uncomment following, and comment out <svg> element.
+     *
+     * <img src={theme.palette.mode === 'dark' ? logoDark : logo} alt="Berry" width="100" />
+     *
+     */
+    <svg width="92" height="32" viewBox="0 0 92 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M33.085 26.4841V12.3839H37.9541C39.6408 12.3839 40.9202 12.7131 41.7922 13.3717C42.6642 14.0237 43.1002 14.9825 43.1002 16.2478C43.1002 16.9387 42.9251 17.5488 42.5751 18.0782C42.225 18.6011 41.7381 18.9853 41.1143 19.2306C41.8272 19.4114 42.3873 19.7761 42.7947 20.3249C43.2084 20.8737 43.4152 21.5452 43.4152 22.3392C43.4152 23.695 42.9888 24.7215 42.1359 25.4188C41.283 26.1161 40.0673 26.4712 38.4888 26.4841H33.085ZM35.9492 20.3443V24.1502H38.4028C39.0775 24.1502 39.6026 23.9888 39.9781 23.666C40.36 23.3367 40.551 22.8848 40.551 22.3102C40.551 21.0189 39.8922 20.3637 38.5747 20.3443H35.9492ZM35.9492 18.2912H38.0687C39.5135 18.2654 40.236 17.6811 40.236 16.5384C40.236 15.8992 40.0514 15.4408 39.6822 15.1632C39.3194 14.8792 38.7434 14.7371 37.9541 14.7371H35.9492V18.2912ZM53.9365 20.3733H48.4371V24.1502H54.8913V26.4841H45.573V12.3839H54.8723V14.7371H48.4371V18.0976H53.9365V20.3733ZM61.7175 21.3224H59.436V26.4841H56.5717V12.3839H61.7365C63.379 12.3839 64.6455 12.7551 65.5365 13.4975C66.4276 14.24 66.8734 15.2891 66.8734 16.6449C66.8734 17.6069 66.6661 18.4107 66.2527 19.0563C65.8455 19.6954 65.2248 20.2055 64.3907 20.5864L67.3985 26.3485V26.4841H64.3242L61.7175 21.3224ZM59.436 18.9691H61.746C62.4656 18.9691 63.0226 18.7851 63.417 18.4172C63.8114 18.0427 64.0092 17.5294 64.0092 16.8773C64.0092 16.2124 63.8214 15.6894 63.4455 15.3085C63.0768 14.9276 62.5069 14.7371 61.7365 14.7371H59.436V18.9691ZM74.2058 21.3224H71.9237V26.4841H69.0594V12.3839H74.2248C75.8667 12.3839 77.1337 12.7551 78.0248 13.4975C78.9159 14.24 79.3611 15.2891 79.3611 16.6449C79.3611 17.6069 79.1544 18.4107 78.7404 19.0563C78.3332 19.6954 77.7125 20.2055 76.879 20.5864L79.8863 26.3485V26.4841H76.8119L74.2058 21.3224ZM71.9237 18.9691H74.2343C74.9533 18.9691 75.5103 18.7851 75.9052 18.4172C76.2997 18.0427 76.4969 17.5294 76.4969 16.8773C76.4969 16.2124 76.3092 15.6894 75.9337 15.3085C75.5645 14.9276 74.9946 14.7371 74.2248 14.7371H71.9237V18.9691ZM85.8823 18.7367L88.7751 12.3839H91.9064L87.3427 21.3708V26.4841H84.4309V21.3708L79.8673 12.3839H83.008L85.8823 18.7367Z"
+        fill={theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.grey[900]}
+      />
+      <path
+        d="M10.987 31.5841C4.92849 31.5841 0 26.626 0 20.5323C0 14.4385 4.92899 9.48041 10.987 9.48041C17.045 9.48041 21.974 14.4385 21.974 20.5323C21.974 26.626 17.0459 31.5841 10.987 31.5841ZM10.987 10.536C5.50765 10.536 1.04938 15.0196 1.04938 20.5318C1.04938 26.044 5.50765 30.5275 10.987 30.5275C16.4663 30.5275 20.9251 26.0429 20.9251 20.5308C20.9251 15.0186 16.4673 10.536 10.987 10.536Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M18.96 21.0225C18.6182 19.7483 15.4851 19.6108 13.6203 20.0779C12.6437 20.3235 11.6456 20.6428 10.6162 20.8265C11.3697 21.4989 12.1788 22.135 13.34 22.2932C16.2211 22.6842 18.0112 21.775 18.96 21.0225Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M13.34 22.2932C12.1764 22.135 11.3697 21.4989 10.6162 20.8265C9.45013 19.7857 8.41298 18.6579 6.37723 19.0823C3.14069 19.7572 2.71488 23.6081 5.21404 26.0828C6.28706 27.2131 7.66455 28.0041 9.17779 28.3586C10.691 28.7132 12.2742 28.616 13.7333 28.079C15.1924 27.5419 16.4641 26.5883 17.3925 25.3352C18.3209 24.0819 18.8656 22.5835 18.96 21.0235C18.0112 21.775 16.221 22.6842 13.34 22.2932Z"
+        fill={theme.palette.secondary.main}
+      />
+      <path
+        d="M15.034 13.9586C14.6301 14.8295 18.2304 15.7957 18.6611 18.6879C18.8687 15.8409 15.5335 12.882 15.034 13.9586Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M7.46619 17.5935C8.11524 17.3231 8.42345 16.5746 8.15463 15.9217C7.8858 15.2688 7.14167 14.9587 6.49262 15.2292C5.84357 15.4996 5.53536 16.2481 5.80418 16.9011C6.07306 17.5539 6.81714 17.8639 7.46619 17.5935Z"
+        fill={theme.palette.secondary.main}
+      />
+      <path
+        d="M10.3549 14.08C10.6585 13.7746 10.6585 13.2795 10.3549 12.9741C10.0513 12.6687 9.55909 12.6687 9.25551 12.9741C8.95194 13.2795 8.95194 13.7746 9.25551 14.08C9.55909 14.3854 10.0513 14.3854 10.3549 14.08Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M13.1014 9.05206C14.2245 5.7149 13.4696 3.04871 11.1614 1.78241C9.58359 2.10513 8.647 2.87335 8.12549 3.93383C11.2204 3.68185 13.1844 5.63041 13.1014 9.05206Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M25.6983 6.13641C20.1389 4.1294 16.6304 4.81756 16.0786 9.39055C19.2648 12.6973 22.474 11.1146 25.6983 6.13641Z"
+        fill={theme.palette.primary.main}
+      />
+      <path
+        d="M21.2765 4.32541C21.5343 3.21728 21.6681 1.90776 21.6881 0.41748C15.9226 1.70883 13.3224 4.17658 15.2839 8.33846C15.3816 8.36203 15.4754 8.38119 15.5696 8.40085C16.0281 5.14422 18.0463 3.93835 21.2765 4.32541Z"
+        fill={theme.palette.primary.main}
+      />
+    </svg>
+  );
+};
+
+export default Logo;
--- a/src/ui-component/RTLLayout.js
+++ b/src/ui-component/RTLLayout.js
@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+
+// material-ui
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+// third-party
+import rtlPlugin from 'stylis-plugin-rtl';
+import useConfig from 'hooks/useConfig';
+
+// ==============================|| RTL LAYOUT ||============================== //
+
+const RTLLayout = ({ children }) => {
+  const { rtlLayout } = useConfig();
+
+  useEffect(() => {
+    document.dir = rtlLayout ? 'rtl' : 'ltr';
+  }, [rtlLayout]);
+
+  const cacheRtl = createCache({
+    key: rtlLayout ? 'rtl' : 'css',
+    prepend: true,
+    stylisPlugins: rtlLayout ? [rtlPlugin] : []
+  });
+
+  return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
+};
+
+RTLLayout.propTypes = {
+  children: PropTypes.node
+};
+
+export default RTLLayout;
--- a/src/ui-component/cards/AnalyticsChartCard.js
+++ b/src/ui-component/cards/AnalyticsChartCard.js
@ -0,0 +1,127 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+
+// material-ui
+import { Box, Button, Grid, Menu, MenuItem, Typography } from '@mui/material';
+
+// third party
+import Chart from 'react-apexcharts';
+
+// project imports
+import MainCard from './MainCard';
+
+// assets
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+
+// ==========================|| ANALYTICS CHART CARD ||========================== //
+
+const AnalyticsChartCard = ({ title, chartData, dropData, listData }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  let dropHtml;
+  if (dropData) {
+    const handleClick = (event) => {
+      setAnchorEl(event?.currentTarget);
+    };
+
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+
+    dropHtml = (
+      <>
+        <Button variant="text" disableElevation size="small" aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
+          {dropData.title}
+        </Button>
+        <Menu
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'right'
+          }}
+          transformOrigin={{
+            vertical: 'top',
+            horizontal: 'right'
+          }}
+          id="simple-menu"
+          anchorEl={anchorEl}
+          keepMounted
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+        >
+          {dropData?.options.map((option, index) => (
+            <MenuItem key={index} onClick={handleClose}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </Menu>
+      </>
+    );
+  }
+
+  let listItem;
+  if (listData) {
+    listItem = listData.map((item, index) => (
+      <Grid item key={index} sm={12}>
+        <Box
+          sx={{
+            color: item.color
+          }}
+        >
+          <Grid container spacing={2} justifyContent="center">
+            <Grid item>{item.icon}</Grid>
+            <Grid item>
+              <Typography variant="subtitle1">{item.value}%</Typography>
+            </Grid>
+            <Grid item>
+              {item.state === 1 && <ArrowUpwardIcon fontSize="inherit" color="inherit" />}
+              {item.state === 0 && <ArrowDownwardIcon fontSize="inherit" color="inherit" />}
+            </Grid>
+            <Grid item>
+              <Typography variant="subtitle1" color="inherit">
+                {item.percentage}%
+              </Typography>
+            </Grid>
+          </Grid>
+        </Box>
+      </Grid>
+    ));
+  }
+
+  return (
+    <MainCard>
+      <Grid container justifyContent="space-between" alignItems="center">
+        {title && (
+          <Grid item>
+            <Typography variant="subtitle1">{title}</Typography>
+          </Grid>
+        )}
+        <Grid item>{dropHtml}</Grid>
+      </Grid>
+      <Grid container justifyContent="center" alignItems="center">
+        <Grid item container direction="column" spacing={1} xs={12} sm={6}>
+          <Box
+            sx={{
+              mt: 3,
+              display: 'block'
+            }}
+          >
+            {listItem}
+          </Box>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <Chart {...chartData} />
+        </Grid>
+      </Grid>
+    </MainCard>
+  );
+};
+
+AnalyticsChartCard.propTypes = {
+  title: PropTypes.string,
+  chartData: PropTypes.object,
+  dropData: PropTypes.object,
+  listData: PropTypes.array
+};
+
+export default AnalyticsChartCard;
--- a/src/ui-component/cards/AttachmentCard.js
+++ b/src/ui-component/cards/AttachmentCard.js
@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Card, CardContent, CardMedia, Grid, Typography } from '@mui/material';
+import { gridSpacing } from 'store/constant';
+
+// assets
+import DownloadForOfflineTwoToneIcon from '@mui/icons-material/DownloadForOfflineTwoTone';
+
+const backImage = require.context('assets/images/profile', true);
+
+// ==============================|| ATTACHMENT CARD ||============================== //
+
+const AttachmentCard = ({ title, image }) => {
+  const theme = useTheme();
+  const backProfile = image && backImage(`./${image}`).default;
+
+  return (
+    <Card sx={{ bgcolor: theme.palette.mode === 'dark' ? 'dark.dark' : 'grey.100' }}>
+      <CardMedia component="img" image={backProfile} title="Slider5 image" />
+      <CardContent sx={{ p: 2, pb: '16px !important' }}>
+        <Grid container spacing={gridSpacing}>
+          <Grid item xs zeroMinWidth>
+            <Typography variant="h5" component="div" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {title}
+            </Typography>
+          </Grid>
+          <Grid item>
+            <DownloadForOfflineTwoToneIcon sx={{ cursor: 'pointer' }} />
+          </Grid>
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+AttachmentCard.propTypes = {
+  image: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
+};
+
+export default AttachmentCard;
--- a/src/ui-component/cards/AuthFooter.js
+++ b/src/ui-component/cards/AuthFooter.js
@ -0,0 +1,17 @@
+// material-ui
+import { Link, Typography, Stack } from '@mui/material';
+
+// ==============================|| FOOTER - AUTHENTICATION 2 & 3 ||============================== //
+
+const AuthFooter = () => (
+  <Stack direction="row" justifyContent="space-between">
+    <Typography variant="subtitle2" component={Link} href="https://berrydashboard.io" target="_blank" underline="hover">
+      berrydashboard.io
+    </Typography>
+    <Typography variant="subtitle2" component={Link} href="https://codedthemes.com" target="_blank" underline="hover">
+      &copy; codedthemes.com
+    </Typography>
+  </Stack>
+);
+
+export default AuthFooter;
--- a/src/ui-component/cards/AuthSlider.js
+++ b/src/ui-component/cards/AuthSlider.js
@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { Grid, Typography } from '@mui/material';
+
+// third-party
+import Slider from 'react-slick';
+
+const AuthSlider = ({ items }) => {
+  const settings = {
+    autoplay: true,
+    arrows: false,
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  };
+
+  return (
+    <Slider {...settings}>
+      {items.map((item, i) => (
+        <Grid key={i} container direction="column" alignItems="center" spacing={3} textAlign="center">
+          <Grid item>
+            <Typography variant="h1">{item.title}</Typography>
+          </Grid>
+          <Grid item>
+            <Typography variant="subtitle2">{item.description}</Typography>
+          </Grid>
+        </Grid>
+      ))}
+    </Slider>
+  );
+};
+
+AuthSlider.propTypes = {
+  items: PropTypes.array.isRequired
+};
+
+export default AuthSlider;
--- a/src/ui-component/cards/BackgroundPattern1.js
+++ b/src/ui-component/cards/BackgroundPattern1.js
@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+// assets
+import AuthPattern from 'assets/images/auth/auth-pattern.svg';
+import AuthPatternDark from 'assets/images/auth/auth-pattern-dark.svg';
+
+// ===========================|| BACKGROUND GRID PATTERN 1 ||=========================== //
+
+const BackgroundPattern1 = ({ children }) => {
+  const theme = useTheme();
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: 'flex',
+        minHeight: '100vh',
+        bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
+        backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
+        position: 'absolute',
+        backgroundPosition: '0 0',
+        overflow: 'hidden',
+        m: '0 0 0 auto',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+BackgroundPattern1.propTypes = {
+  children: PropTypes.node
+};
+
+export default BackgroundPattern1;
--- a/Show More
+++ b/Show More