Move Frontend to Same Repo

2022-05-19 06:11:46 +07:00
parent 44dffed190
commit 5375446fb5
277 changed files with 60340 additions and 0 deletions
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -0,0 +1,5 @@
+GENERATE_SOURCEMAP=false
+
+PORT=8083
+
+REACT_APP_HOST_API_URL="http://localhost:8000"
--- a/frontend/.eslintignore
+++ b/frontend/.eslintignore
@@ -0,0 +1,8 @@
+// .eslintignore
+build/*
+public/*
+src/react-app-env.d.ts
+src/reportWebVitals.ts
+src/service-worker.ts
+src/serviceWorkerRegistration.ts
+src/setupTests.ts
--- a/frontend/.eslintrc
+++ b/frontend/.eslintrc
@@ -0,0 +1,52 @@
+{
+  "plugins": [
+    "prettier",
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "airbnb-typescript",
+    "react-app",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": [
+      "**/tsconfig.json"
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  },
+  "rules": {
+    "react/jsx-key": 2,
+    "arrow-body-style": 1,
+    "import/no-duplicates": 1,
+    "react/self-closing-comp": 1,
+    "@typescript-eslint/no-shadow": 0,
+    "import/no-useless-path-segments": 1,
+    "import/no-extraneous-dependencies": 0,
+    "@typescript-eslint/naming-convention": 0,
+    "object-curly-spacing": [
+      1,
+      "always"
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      1,
+      {
+        "vars": "all",
+        "args": "none"
+      }
+    ],
+    "prefer-destructuring": [
+      1,
+      {
+        "object": true,
+        "array": false
+      }
+    ]
+  }
+}
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,26 @@
+# 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
+/.env.local
+/.env.development.local
+/.env.test.local
+/.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache
--- a/frontend/.htaccess
+++ b/frontend/.htaccess
@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2
+}
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <!-- Favicon -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+
+  <meta name="theme-color" content="#000000" />
+  <link rel="manifest" href="/manifest.json" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+
+  <!-- Using Google Font -->
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <!-- Using Local Font -->
+  <link rel="stylesheet" type="text/css" href="/fonts/index.css" />
+
+  <title>Minimal UI Kit</title>
+  <meta name="description"
+    content="The starting point for your next project with Minimal UI Kit, built on the newest version of Material-UI ©, ready to be customized to your style" />
+  <meta name="keywords" content="react,material,kit,application,dashboard,admin,template" />
+  <meta name="author" content="Minimal UI Kit" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,105 @@
+{
+  "name": "@minimal/material-kit-react",
+  "author": "minimals.cc",
+  "version": "3.2.0",
+  "description": "Simple React Scripts & Typescript",
+  "private": true,
+  "scripts": {
+    "lint": "eslint --ext .ts,.tsx ./src",
+    "lint:fix": "eslint --fix --ext .ts,.tsx ./src",
+    "start": "vite",
+    "build": "vite build && cp .htaccess build/.htaccess && cp -r build ../public/release",
+    "serve": "vite preview",
+    "clear-all": "rm -rf build node_modules",
+    "re-start": "rm -rf build node_modules && yarn install && yarn start",
+    "re-build": "rm -rf build node_modules && yarn install && yarn build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "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"
+    ]
+  },
+  "dependencies": {
+    "@emotion/cache": "^11.7.1",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@hookform/resolvers": "^2.8.8",
+    "@iconify/react": "^3.2.1",
+    "@mui/lab": "5.0.0-alpha.80",
+    "@mui/material": "^5.6.4",
+    "@mui/system": "^5.6.4",
+    "@mui/x-data-grid": "^5.10.0",
+    "@vitejs/plugin-react": "^1.3.2",
+    "axios": "^0.27.2",
+    "change-case": "^4.1.2",
+    "date-fns": "^2.28.0",
+    "framer-motion": "^6.3.3",
+    "history": "^5.3.0",
+    "lodash": "^4.17.21",
+    "notistack": "^2.0.4",
+    "nprogress": "^0.2.0",
+    "numeral": "^2.0.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.1",
+    "react-helmet-async": "^1.3.0",
+    "react-hook-form": "^7.30.0",
+    "react-intersection-observer": "^8.34.0",
+    "react-lazy-load-image-component": "^1.5.4",
+    "react-quill": "^1.3.5",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "simplebar": "^5.3.6",
+    "simplebar-react": "^2.3.7",
+    "stylis": "^4.1.1",
+    "stylis-plugin-rtl": "^2.1.1",
+    "vite": "^2.9.8",
+    "vite-plugin-svgr": "^2.1.0",
+    "yup": "^0.32.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-syntax-flow": "^7.16.7",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@types/nprogress": "^0.2.0",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.16",
+    "@types/react-lazy-load-image-component": "^1.5.2",
+    "@types/stylis": "^4.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/parser": "^5.22.0",
+    "eslint": "^8.14.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^16.2.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "7.0.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.4",
+    "vite-plugin-pwa": "^0.12.0"
+  }
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/public/_redirects
+++ b/frontend/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
--- a/frontend/public/favicon/android-chrome-192x192.png
+++ b/frontend/public/favicon/android-chrome-192x192.png
--- a/frontend/public/favicon/android-chrome-512x512.png
+++ b/frontend/public/favicon/android-chrome-512x512.png
--- a/frontend/public/favicon/apple-touch-icon.png
+++ b/frontend/public/favicon/apple-touch-icon.png
--- a/frontend/public/favicon/favicon-16x16.png
+++ b/frontend/public/favicon/favicon-16x16.png
--- a/frontend/public/favicon/favicon-32x32.png
+++ b/frontend/public/favicon/favicon-32x32.png
--- a/frontend/public/favicon/favicon.ico
+++ b/frontend/public/favicon/favicon.ico
--- a/frontend/public/fonts/CircularStd-Bold.otf
+++ b/frontend/public/fonts/CircularStd-Bold.otf
--- a/frontend/public/fonts/CircularStd-Book.otf
+++ b/frontend/public/fonts/CircularStd-Book.otf
--- a/frontend/public/fonts/CircularStd-Medium.otf
+++ b/frontend/public/fonts/CircularStd-Medium.otf
--- a/frontend/public/fonts/Roboto-Bold.ttf
+++ b/frontend/public/fonts/Roboto-Bold.ttf
--- a/frontend/public/fonts/Roboto-Regular.ttf
+++ b/frontend/public/fonts/Roboto-Regular.ttf
--- a/frontend/public/fonts/index.css
+++ b/frontend/public/fonts/index.css
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'CircularStd';
+  font-weight: 400;
+  font-style: normal;
+  src: local('CircularStd'), url('CircularStd-Book.otf') format('opentype');
+}
+@font-face {
+  font-family: 'CircularStd';
+  font-weight: 500;
+  font-style: normal;
+  src: local('CircularStd'), url('CircularStd-Medium.otf') format('opentype');
+}
+@font-face {
+  font-family: 'CircularStd';
+  font-weight: 700;
+  font-style: normal;
+  src: local('CircularStd'), url('CircularStd-Bold.otf') format('opentype');
+}
--- a/frontend/public/icons/ic_analytics.svg
+++ b/frontend/public/icons/ic_analytics.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m20.247634 1c1.0125221 0 1.8333334.82081129 1.8333334 1.83333333s-.8208113 1.83333334-1.8333334 1.83333334c-.3158442 0-.6130339-.07986936-.8724738-.22051281l-3.0249251 3.47961717c.1346337.25513483.2108509.5458717.2108509.85441003 0 1.01252204-.8208113 1.83333334-1.8333334 1.83333334-.9820883 0-1.7838173-.7722101-1.8311257-1.74256896l-2.2033918-.75849737c-.336256.40778098-.84535009.66773299-1.41515923.66773299-.32712483 0-.63423886-.08567643-.90012689-.2358141l-2.87560465 2.41277624c.05416355.1730906.08335496.3572185.08335496.5481644 0 1.012522-.8208113 1.8333333-1.83333334 1.8333333s-1.83333333-.8208113-1.83333333-1.8333333c0-1.0125221.82081129-1.83333335 1.83333333-1.83333335.33090488 0 .64133381.08766791.90932763.24104456l2.86960725-2.40787374c-.05621505-.1760311-.0865583-.3636207-.0865583-.55829735 0-1.01252204.8208113-1.83333333 1.83333334-1.83333333.97577423 0 1.77350093.76231258 1.83011983 1.7238777l2.2160025.76325559c.336304-.39976002.8402621-.65379996 1.4035544-.65379996.2130474 0 .4176071.03634016.6078186.10315996l3.1693503-3.64581344c-.0588143-.17965899-.0906208-.37154554-.0906208-.57086091 0-1.01252204.8208113-1.83333333 1.8333333-1.83333333z" opacity=".48"/><path d="m21.1666667 9.60855714c.506261 0 .9166666.41040566.9166666.91666666v10.7540685c0 .2761423-.2238576.5-.5.5h-2.6666666c-.2761424 0-.5-.2238577-.5-.5v-10.7540685c0-.506261.4104056-.91666666.9166666-.91666666zm-5.5 6.42549146c.506261 0 .9166666.4104057.9166666.9166667v4.328577c0 .2761423-.2238576.5-.5.5h-2.6666666c-.2761424 0-.5-.2238577-.5-.5v-4.328577c0-.506261.4104056-.9166667.9166666-.9166667zm-5.5-1.8405511c.506261 0 .9166666.4104057.9166666.9166667v6.1691281c0 .2761423-.2238576.5-.5.5h-2.66666663c-.27614238 0-.5-.2238577-.5-.5v-6.1691281c0-.506261.41040564-.9166667.91666666-.9166667zm-5.50000003 4.7135227c.50626102 0 .91666666.4104057.91666666.9166667v1.4556054c0 .2761423-.22385762.5-.5.5h-2.66666666c-.27614238 0-.5-.2238577-.5-.5v-1.4556054c0-.506261.41040564-.9166667.91666666-.9166667z"/></svg>
--- a/frontend/public/icons/ic_banking.svg
+++ b/frontend/public/icons/ic_banking.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.5367 20.5812H2.45436C1.92714 20.5812 1.5 21.0083 1.5 21.536C1.5 22.0628 1.92714 22.4899 2.45436 22.4899H21.5362C22.0635 22.4899 22.4906 22.0628 22.4906 21.536C22.4902 21.0083 22.063 20.5812 21.5367 20.5812Z" fill="#637381"/>
+<path d="M3.64772 18.1001C3.1205 18.1001 2.69336 18.5273 2.69336 19.0545C2.69336 19.5817 3.1205 20.0093 3.64772 20.0093H20.3446C20.8718 20.0093 21.2989 19.5817 21.2989 19.0545C21.2989 18.5273 20.8718 18.1001 20.3446 18.1001H20.1064V9.51266H20.3446C20.6086 9.51266 20.8213 9.29909 20.8213 9.03592C20.8213 8.77276 20.6077 8.55919 20.3446 8.55919H3.64772C3.38411 8.55919 3.17099 8.77276 3.17099 9.03592C3.17099 9.29909 3.38456 9.51266 3.64772 9.51266H3.88631V18.0997H3.64772V18.1001ZM18.1977 9.51266V18.0997H15.3355V9.51266H18.1977ZM13.4268 9.51266V18.0997H10.5646V9.51266H13.4268ZM5.79414 9.51266H8.65633V18.0997H5.79414V9.51266Z" fill="#637381"/>
+<path opacity="0.48" d="M2.45438 7.70134H21.5363C21.5394 7.70134 21.543 7.70134 21.5456 7.70134C22.0733 7.70134 22.5 7.2742 22.5 6.74698C22.5 6.32788 22.2301 5.97268 21.8553 5.844L12.3876 1.58377C12.1387 1.47208 11.8541 1.47208 11.6048 1.58377L2.06298 5.87706C1.65238 6.06204 1.42674 6.50794 1.52146 6.94759C1.61574 7.38724 2.00445 7.70134 2.45438 7.70134Z" fill="#637381"/>
+</svg>
--- a/frontend/public/icons/ic_blog.svg
+++ b/frontend/public/icons/ic_blog.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m14.984127 0c2.7619047 0 5.015873 2.25396825 5.015873 5.01587302v9.96825398c0 2.7619047-2.2539683 5.015873-5.015873 5.015873h-9.984127c-2.74603175 0-5-2.2539683-5-5v-9.98412698c0-2.76190477 2.25396825-5.01587302 5-5.01587302zm-4.5079365 3.80952381h-2.76190479c-2.17460317 0-3.9047619 1.73015873-3.9047619 3.88888889v4.6031746c0 2.1587302 1.73015873 3.8888889 3.9047619 3.8888889h4.53968259c2.1746031 0 3.9523809-1.7460318 3.9682539-3.9047619v-3.15873017l-.031746-.15873016-.1111111-.22222222-.1746032-.14285715c-.2380952-.17460317-1.3968254.01587302-1.7142857-.26984127-.2222222-.2063492-.2539683-.57142857-.3174603-1.06349206-.1111111-.96825397-.2063492-1.01587302-.3492064-1.33333333-.5396825-1.15873016-2.031746-2.12698413-3.047619-2.12698413zm1.7460317 7.61904759c.4126984 0 .7460318.3809524.7460318.7936508s-.3333334.7936508-.7460318.7936508h-4.46031744c-.42857143 0-.76190476-.3809524-.76190476-.7936508s.34920635-.7936508.76190476-.7936508zm-2.26984125-4.44444442c.42857145 0 .76190475.30158731.76190475.71428572s-.3492063.71428571-.76190475.71428571h-2.19047619c-.41269841 0-.76190476-.3015873-.76190476-.71428571s.34920635-.71428572.76190476-.71428572z" transform="translate(2 2)"/></svg>
--- a/frontend/public/icons/ic_booking.svg
+++ b/frontend/public/icons/ic_booking.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#637381"><path d="m16.8125 2.83333h-1.1459v-.91667c0-.50599-.4097-.91666-.9166-.91666s-.9167.41067-.9167.91666v.91667h-7.33331v-.91667c0-.50599-.40975-.91666-.91667-.91666-.50691 0-.91666.41067-.91666.91666v.91667h-1.14583c-1.39058 0-2.52083 1.13025-2.52083 2.52083v10.31244c0 1.5162 1.23383 2.75 2.74999 2.75h4.58333c.50691 0 .91666-.4106.91666-.9166s-.40975-.9167-.91666-.9167h-4.58333c-.50599 0-.91666-.4116-.91666-.9167v-7.33328h14.66667c0 .506.4097.91666.9166.91666s.9167-.41066.9167-.91666v-2.97916c0-1.39058-1.1302-2.52083-2.5208-2.52083z"/><path d="m17.0413 11.0834c-3.2853 0-5.9583 2.673-5.9583 5.9583s2.673 5.9583 5.9583 5.9583 5.9583-2.673 5.9583-5.9583-2.673-5.9583-5.9583-5.9583zm2.7555 4.9545-2.9791 3.4375c-.1669.1925-.4061.3062-.66.3163-.011 0-.022 0-.033 0-.243 0-.4758-.0963-.6481-.2686l-1.6042-1.6042c-.3584-.3584-.3584-.9377 0-1.2961.3584-.3585.9378-.3585 1.2962 0l.9084.9084 2.3338-2.6932c.3318-.3831.9112-.4226 1.2934-.0926.3823.331.4235.9103.0926 1.2925z" opacity=".48"/></g></svg>
--- a/frontend/public/icons/ic_calendar.svg
+++ b/frontend/public/icons/ic_calendar.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1.5 1.5)"><path d="m18.9 3.15h-16.8c-1.15931815.00115758-2.09884242.94068185-2.1 2.1v12.95c.00115758 1.1593181.94068185 2.0988424 2.1 2.1h16.8c1.1593181-.0011576 2.0988424-.9406819 2.1-2.1v-12.95c-.0011576-1.15931815-.9406819-2.09884242-2.1-2.1zm0 16.45h-16.8c-.77319865 0-1.4-.6268014-1.4-1.4v-10.5h19.6v10.5c0 .7731986-.6268014 1.4-1.4 1.4zm-2.45-17.15v-1.75c0-.38659932-.3134007-.7-.7-.7s-.7.31340068-.7.7v1.75zm-10.5 0v-1.75c0-.38659932-.31340068-.7-.7-.7s-.7.31340068-.7.7v1.75z"/><path d="m5.99840724 14.441644c.55228475 0 1 .4477153 1 1v1.6c0 .5522848-.44771525 1-1 1h-2.2c-.55228475 0-1-.4477152-1-1v-1.6c0-.5522847.44771525-1 1-1zm5.60159276 0c.5522847 0 1 .4477153 1 1v1.6c0 .5522848-.4477153 1-1 1h-2.2c-.55228475 0-1-.4477152-1-1v-1.6c0-.5522847.44771525-1 1-1zm-5.60159276-5.0001284c.55228475 0 1 .44771525 1 1v1.6c0 .5522848-.44771525 1-1 1h-2.2c-.55228475 0-1-.4477152-1-1v-1.6c0-.55228475.44771525-1 1-1zm5.60159276 0c.5522847 0 1 .44771525 1 1v1.6c0 .5522848-.4477153 1-1 1h-2.2c-.55228475 0-1-.4477152-1-1v-1.6c0-.55228475.44771525-1 1-1zm5.6015928 0c.5522847 0 1 .44771525 1 1v1.6c0 .5522848-.4477153 1-1 1h-2.2c-.5522848 0-1-.4477152-1-1v-1.6c0-.55228475.4477152-1 1-1z" opacity=".48"/></g></svg>
--- a/frontend/public/icons/ic_cart.svg
+++ b/frontend/public/icons/ic_cart.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2 2)"><path d="m9.58985382 1.32162476c1.66180188 0 3.06430158 1.12239456 3.49720258 2.64777104h-6.99440518c.432901-1.52537648 1.83540001-2.64777104 3.4972026-2.64777104zm4.62891648-1.32162476c.9093636 0 1.6555835.7429914 1.6555835 1.65235392 0 .90937489-.7462199 1.6529999-1.6555835 1.6529999-.909364 0-1.6529999-.74362501-1.6529999-1.6529999 0-.90936252.7436359-1.65235392 1.6529999-1.65235392z" opacity=".48"/><path d="m7.60483293 15.8737079c.90936397 0 1.6529999.7436373 1.6529999 1.6529999 0 .9093749-.74362997 1.6549376-1.6529999 1.6549376s-1.65235399-.7455627-1.65235399-1.6549376c0-.9093626.74299001-1.6529999 1.65235399-1.6529999zm6.61393737 0c.9093636 0 1.6555835.7436373 1.6555835 1.6529999 0 .9093749-.7462136 1.6549376-1.6555835 1.6549376-.90937 0-1.6529999-.7455627-1.6529999-1.6549376 0-.9093626.7436349-1.6529999 1.6529999-1.6529999zm-10.58074958-13.22722875c.47021948.00126272.87961059.33725114.97151692.79840103l.23706567 1.18597394h13.34220869c.6357812 0 1.1062464.60903974.9644116 1.2234396l-1.9850212 8.59895818c-.1036535.4490251-.5105252.7589977-.9644112.7589977h-10.58333325c-.47083827 0-.88484536-.3341221-.97216282-.8009847l-1.82805386-9.78234852h-1.82869973c-.30322176 0-.57131938-.12557224-.74220274-.31781022-.17088343-.19224988-.2493388-.43483146-.2493388-.67373135 0-.2388999.07845541-.48148147.2493388-.67373136.17088336-.19223764.43898098-.3171643.74220274-.3171643z"/></g></svg>
--- a/frontend/public/icons/ic_chat.svg
+++ b/frontend/public/icons/ic_chat.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(.5 2.5)"><path d="m8.3418125.28845833c-4.72554167 0-8.3418125 3.20658334-8.3418125 6.70210417 0 3.4955208 3.12225 5.5209583 3.12225 5.5209583l-.5074375 1.923375c-.06708333.2534792.20460417.462875.4326875.3335l2.28083333-1.2923125c1.00864584.3210417 3.14908334.4235834 3.35752084.4331667-.1495-.5184583-.22329167-1.02925-.22329167-1.5060208 0-2.69770837 2.348875-6.49750003 7.5703542-6.49750003.1188333 0 .2376666.002875.3565.00766666-.6947917-3.32541666-4.1476667-5.6249375-8.0476042-5.6249375z"/><path d="m23 11.9810833c0-3.06187497-3.5923125-5.3038958-6.9675625-5.3038958-4.7734583 0-6.79889583 3.4476042-6.79889583 5.7260417 0 2.2832291 2.02495833 5.7260416 6.79889583 5.7260416 1.0560833 0 1.9851875-.1514166 2.7930625-.41975l1.7954375 1.1394584c.1418333.0900833.3210417-.0368959.2831875-.2007709l-.4072917-1.768125c1.69625-1.181625 2.5031667-3.0441458 2.5031667-4.899z" opacity=".48"/></g></svg>
--- a/frontend/public/icons/ic_dashboard.svg
+++ b/frontend/public/icons/ic_dashboard.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2 4)"><path d="m18.38 4.57-1.23 1.85c1.2049 2.40314304 1.1222508 5.2507848-.22 7.58h-13.86c-1.76350331-3.059309-1.31261601-6.91298595 1.10947843-9.48257235s6.24242627-3.24722187 9.40052157-1.66742765l1.85-1.23c-3.8761922-2.48556317-8.94860517-2.00294347-12.28650726 1.16901179-3.3379021 3.17195526-4.07833512 8.21319061-1.79349274 12.21098821.35510459.6150891 1.00977788.9957131 1.72 1.0000158h13.85c.7173695.0028322 1.3813181-.3787474 1.74-1.0000158 1.8786438-3.25433 1.7743473-7.28712667-.27-10.44z"/><path d="m8.59 11.41c.37513651.3755541.8841815.5865733 1.415.5865733s1.0398635-.2110192 1.415-.5865733l5.66-8.49-8.49 5.66c-.37555409.37513651-.58657331.8841815-.58657331 1.415s.21101922 1.0398635.58657331 1.415z" opacity=".48"/></g></svg>
--- a/frontend/public/icons/ic_ecommerce.svg
+++ b/frontend/public/icons/ic_ecommerce.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m7.94101676 5.6427832v2.74464258c0 .33989649.27513281.6150293.6150293.6150293.30862393 0 .56440212-.22738249.60835663-.52409402l.00667266-.09093528v-2.74464258h5.65814645v2.74464258c0 .33989649.275543.6150293.6150293.6150293.3089968 0 .5644699-.22738249.6083659-.52409402l.0066634-.09093528v-2.74464258h1.8524297c.7157099 0 1.3265895.52397061 1.44811 1.21681899l.0176654.14071617.9376992 11.81697074c.0730078.9483222-.2554043 1.8905332-.900334 2.5867324-.5953575.6426454-1.4202201 1.03272-2.2901578 1.0889289l-.2183168.0070496h-9.81241403c-.94918359 0-1.8635039-.3997793-2.50847461-1.0959375-.59531971-.6426454-.92094397-1.4949103-.91044964-2.3668484l.00966449-.2182844.93810937-11.82025197c.0545636-.71224914.62412163-1.28073532 1.3241451-1.34901387l.14163029-.00688066zm4.09817114 3.97089698c-.2266736-.00327725-.4135824.17768425-.4169046.40501402v.7555922c-1.4912918.1060463-2.50536524 1.0273421-2.50536524 2.253508 0 1.5045398 1.27919924 1.9221212 2.50536524 2.253508v2.6511967c-.6469005-.0868303-1.2566612-.3552579-1.7564176-.7754643-.09411064-.0748948-.21077995-.1166488-.33140728-.1192943-.30554685.0212051-.54083371.2770409-.5369249.5832645-.00060704.1338754.05174957.2624598.14586021.3579034.68467596.6164053 1.56487397.9710069 2.48549307 1.0008254l.0006563.7430004c.0106025.2266735.2034791.4016467.4301527.3903879.2233717 0 .4043127-.180941.4043127-.4043128v-.7423236c1.8094305-.1192943 2.538506-1.2195419 2.538506-2.3860709 0-1.5642177-1.3122785-2.041436-2.5384649-2.3728433v-2.3330375c.4990796.0841848.9696739.2889765 1.3719974.5965126.0802063.0550021.1743169.0848411.2717499.0861536.3121708 0 .5666941-.251201.5699959-.5633719.0006562-.1338754-.0517004-.2624598-.145811-.3579035-.5812753-.4977671-1.3103508-.7913784-2.0745563-.8351217v-.7821089c0-.22337175-.180941-.40431274-.4043128-.40431274-.0046347-.00070128-.00929-.00070128-.0139248-.00070128zm.4248617 5.91949992c.7489681.2120925 1.3322121.4970904 1.3255881 1.1930252 0 .503735-.3446554 1.1002476-1.3255881 1.2195419zm-.8351218-3.7050349v2.1673339c-.7224514-.2120925-1.2858233-.430809-1.2858233-1.0472142 0-.6164053.510359-1.0604828 1.2858233-1.1201197zm.3712413-10.3281452c2.2382637 0 4.0591523 1.82125781 4.0591523 4.05952148v.08322071h-1.2300175v-.08322071c0-1.56011132-1.2689825-2.8295039-2.8290938-2.8295039s-2.82909373 1.26939258-2.82909373 2.8295039v.08322071h-1.23005859v-.08322071c0-2.23826367 1.82084765-4.05952148 4.05911132-4.05952148z"/></svg>
--- a/frontend/public/icons/ic_kanban.svg
+++ b/frontend/public/icons/ic_kanban.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>ic_kanban</title>
+    <g id="ic_kanban" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20,3 C21.1045695,3 22,3.8954305 22,5 L22,15 C22,16.1045695 21.1045695,17 20,17 L4,17 C2.8954305,17 2,16.1045695 2,15 L2,5 C2,3.8954305 2.8954305,3 4,3 L20,3 Z M11.5,6 L6.5,6 C5.67157288,6 5,6.67157288 5,7.5 L5,7.5 L5,9.5 C5,10.3284271 5.67157288,11 6.5,11 L6.5,11 L11.5,11 C12.3284271,11 13,10.3284271 13,9.5 L13,9.5 L13,7.5 C13,6.67157288 12.3284271,6 11.5,6 L11.5,6 Z" id="Combined-Shape" fill="#000000"></path>
+        <path d="M8,21 L16,21 M12,17 L12,21" id="Combined-Shape" stroke="#000000" stroke-width="2" opacity="0.48" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>
--- a/frontend/public/icons/ic_mail.svg
+++ b/frontend/public/icons/ic_mail.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1.5 4)"><path d="m11.0988387 10.3846452c-.1981935.1238709-.4211613.1734193-.6193548.1734193-.1981936 0-.4211613-.0495484-.61935487-.1734193l-9.86012903-6.02012907v8.00206447c0 1.7094194 1.38735484 3.0967742 3.09677419 3.0967742h14.79019351c1.7094194 0 3.0967742-1.3873548 3.0967742-3.0967742v-8.00206447z"/><path d="m17.8869677.00425806h-14.79019351c-1.46167742 0-2.70038709 1.04051613-2.99767742 2.42787097l10.40516133 6.34219355 10.3803871-6.34219355c-.2972904-1.38735484-1.536-2.42787097-2.9976775-2.42787097z" opacity=".48"/></g></svg>
--- a/frontend/public/icons/ic_user.svg
+++ b/frontend/public/icons/ic_user.svg
@@ -0,0 +1 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(5 3)"><path d="m7 8c2.209139 0 4-1.790861 4-4s-1.790861-4-4-4-4 1.790861-4 4 1.790861 4 4 4z" opacity=".48"/><path d="m13 18.0000001c.5522847 0 1-.4477154 1-1 0-3.8659933-3.1340068-7-7-7-3.86599321 0-7 3.1340067-7 7 0 .5522846.44771525 1 1 1z"/></g></svg>
--- a/frontend/public/logo/logo_full.jpg
+++ b/frontend/public/logo/logo_full.jpg
--- a/frontend/public/logo/logo_full.svg
+++ b/frontend/public/logo/logo_full.svg
--- a/frontend/public/logo/logo_single.svg
+++ b/frontend/public/logo/logo_single.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="100%" x2="50%" y1="5.663%" y2="50%"><stop offset="0" stop-color="#007b55"/><stop offset="1" stop-color="#00ab55"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#5be584"/><stop offset="1" stop-color="#00ab55"/></linearGradient><g fill="none" fill-rule="evenodd" transform="translate(14 128)"><path d="m92.8065878 83.1065019c44.2888442 22.8889511 46.3079382 23.9345951 46.4006692 23.9799821.012248.008728.642121.333419 44.792743 23.152545-26.071507 48.53952-42.693165 77.265922-49.868472 86.179207-10.758587 13.369926-22.495227 23.492946-36.929824 29.333888-30.3458978 14.261953-68.070062 14.928791-97.201704-2.704011z" fill="url(#a)"/><g fill="url(#b)"><path d="m430.310491 101.726093c-46.270793-80.9559274-94.100378-157.2284394-149.043472-45.3437359-7.516227 14.3833977-12.994566 42.3366008-25.267019 42.3366008v-.1420279c-12.272453 0-17.749057-27.9532032-25.265283-42.3366009-54.94483-111.8847034-102.774415-35.6121915-149.0452076 45.3437359-3.4821132 6.105448-6.8270943 11.9321-9.6895094 16.99601 106.037811-67.1266136 97.11034 135.666494 184 137.277897v.142028c86.891396-1.611403 77.962189-204.4045106 184-137.27965-2.860679-5.062157-6.20566-10.888809-9.689509-16.994257"/><path d="m436 256c26.5088 0 48-21.4912 48-48s-21.4912-48-48-48-48 21.4912-48 48 21.4912 48 48 48"/></g></g></svg>
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -0,0 +1,20 @@
+{
+  "name": "React Material Minimal UI",
+  "short_name": "Minimal-UI",
+  "display": "standalone",
+  "start_url": "/",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -0,0 +1,30 @@
+// routes
+import Router from './routes';
+// theme
+import ThemeProvider from './theme';
+// components
+import Settings from './components/settings';
+import RtlLayout from './components/RtlLayout';
+import ScrollToTop from './components/ScrollToTop';
+import { ProgressBarStyle } from './components/ProgressBar';
+import ThemeColorPresets from './components/ThemeColorPresets';
+import MotionLazyContainer from './components/animate/MotionLazyContainer';
+
+// ----------------------------------------------------------------------
+
+export default function App() {
+  return (
+    <ThemeProvider>
+      <ThemeColorPresets>
+        <RtlLayout>
+          <MotionLazyContainer>
+            <ProgressBarStyle />
+            <Settings />
+            <ScrollToTop />
+            <Router />
+          </MotionLazyContainer>
+        </RtlLayout>
+      </ThemeColorPresets>
+    </ThemeProvider>
+  );
+}
--- a/frontend/src/_mock/_analytics.tsx
+++ b/frontend/src/_mock/_analytics.tsx
@@ -0,0 +1,50 @@
+// components
+import Iconify from '../components/Iconify';
+//
+import _mock from './_mock';
+
+// ----------------------------------------------------------------------
+
+export const _analyticPost = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  title: _mock.text.title(index),
+  description: _mock.text.description(index),
+  image: _mock.image.cover(index),
+  postedAt: _mock.time(index),
+}));
+
+export const _analyticOrderTimeline = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  title: [
+    '1983, orders, $4220',
+    '12 Invoices have been paid',
+    'Order #37745 from September',
+    'New order placed #XF-2356',
+    'New order placed #XF-2346',
+  ][index],
+  type: `order${index + 1}`,
+  time: _mock.time(index),
+}));
+
+export const _analyticTraffic = [
+  {
+    name: 'FaceBook',
+    value: 323234,
+    icon: <Iconify icon={'eva:facebook-fill'} color="#1877F2" width={32} height={32} />,
+  },
+  {
+    name: 'Google',
+    value: 341212,
+    icon: <Iconify icon={'eva:google-fill'} color="#DF3E30" width={32} height={32} />,
+  },
+  {
+    name: 'Linkedin',
+    value: 411213,
+    icon: <Iconify icon={'eva:linkedin-fill'} color="#006097" width={32} height={32} />,
+  },
+  {
+    name: 'Twitter',
+    value: 443232,
+    icon: <Iconify icon={'eva:twitter-fill'} color="#1C9CEA" width={32} height={32} />,
+  },
+];
--- a/frontend/src/_mock/_app.ts
+++ b/frontend/src/_mock/_app.ts
@@ -0,0 +1,52 @@
+import { noCase } from 'change-case';
+// _mock
+import _mock from './_mock';
+import { randomNumberRange, randomInArray } from './funcs';
+
+// ----------------------------------------------------------------------
+
+export const _appRelated = ['Chrome', 'Drive', 'Dropbox', 'Evernote', 'Github'].map(
+  (appName, index) => ({
+    id: _mock.id(index),
+    name: appName,
+    system: (index === 2 && 'Windows') || (index === 4 && 'Windows') || 'Mac',
+    price: index === 0 || index === 2 || index === 4 ? 0 : _mock.number.price(index),
+    rating: _mock.number.rating(index),
+    review: randomNumberRange(999, 99999),
+    shortcut: `https://minimal-assets-api.vercel.app/assets/icons/ic_${noCase(appName)}.svg`,
+  })
+);
+
+export const _appInstalled = ['de', 'en', 'fr', 'kr', 'us'].map((country, index) => ({
+  id: _mock.id(index),
+  name: ['Germany', 'England', 'France', 'Korean', 'USA'][index],
+  android: randomNumberRange(999, 99999),
+  windows: randomNumberRange(999, 99999),
+  apple: randomNumberRange(999, 99999),
+  flag: `https://minimal-assets-api.vercel.app/assets/icons/ic_flag_${country}.svg`,
+}));
+
+export const _appAuthors = [...Array(3)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  avatar: _mock.image.avatar(index),
+  favourite: randomNumberRange(9999, 19999),
+}));
+
+export const _appInvoices = [...Array(5)].map((_, index) => ({
+  id: `${Date.now() + index}`,
+  price: _mock.number.price(index),
+  category: randomInArray(['Android', 'Mac', 'Windows']),
+  status: randomInArray(['paid', 'out_of_date', 'in_progress']),
+}));
+
+export const _appFeatured = [...Array(3)].map((_, index) => ({
+  id: _mock.id(index),
+  title: [
+    'Harry Potter and the Deathly Hallows - Part 2',
+    'Disney Zombies 2',
+    'Lightroom mobile - Koloro',
+  ][index],
+  description: _mock.text.title(index),
+  image: _mock.image.feed(index),
+}));
--- a/frontend/src/_mock/_banking.ts
+++ b/frontend/src/_mock/_banking.ts
@@ -0,0 +1,102 @@
+import _mock from './_mock';
+
+// ----------------------------------------------------------------------
+
+export const _bankingContacts = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  email: _mock.email(index),
+  avatar: _mock.image.avatar(index + 4),
+}));
+
+export const _bankingQuickTransfer = [...Array(12)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  email: _mock.email(index),
+  avatar: _mock.image.avatar(index),
+}));
+
+export const _bankingCreditCard = [
+  {
+    id: _mock.id(2),
+    balance: 23432.03,
+    cardType: 'mastercard',
+    cardHolder: _mock.name.fullName(2),
+    cardNumber: '**** **** **** 3640',
+    cardValid: '11/22',
+  },
+  {
+    id: _mock.id(3),
+    balance: 18000.23,
+    cardType: 'visa',
+    cardHolder: _mock.name.fullName(3),
+    cardNumber: '**** **** **** 8864',
+    cardValid: '11/25',
+  },
+  {
+    id: _mock.id(4),
+    balance: 2000.89,
+    cardType: 'mastercard',
+    cardHolder: _mock.name.fullName(4),
+    cardNumber: '**** **** **** 7755',
+    cardValid: '11/22',
+  },
+];
+
+export const _bankingRecentTransitions = [
+  {
+    id: _mock.id(2),
+    name: _mock.name.fullName(2),
+    avatar: _mock.image.avatar(8),
+    type: 'Income',
+    message: 'Receive money from',
+    category: 'Annette Black',
+    date: 1627556358365,
+    status: 'in_progress',
+    amount: 811.45,
+  },
+  {
+    id: _mock.id(3),
+    name: _mock.name.fullName(3),
+    avatar: _mock.image.avatar(9),
+    type: 'Expenses',
+    message: 'Payment for',
+    category: 'Courtney Henry',
+    date: 1627556329038,
+    status: 'completed',
+    amount: 436.03,
+  },
+  {
+    id: _mock.id(4),
+    name: _mock.name.fullName(4),
+    avatar: _mock.image.avatar(12),
+    type: 'Receive',
+    message: 'Payment for',
+    category: 'Theresa Webb',
+    date: 1627556339677,
+    status: 'failed',
+    amount: 82.26,
+  },
+  {
+    id: _mock.id(5),
+    name: null,
+    avatar: null,
+    type: 'Expenses',
+    message: 'Payment for',
+    category: 'Beauty & Health',
+    date: 1627547330510,
+    status: 'completed',
+    amount: 480.73,
+  },
+  {
+    id: _mock.id(6),
+    name: null,
+    avatar: null,
+    type: 'Expenses',
+    message: 'Payment for',
+    category: 'Books',
+    date: 1627556347676,
+    status: 'in_progress',
+    amount: 11.45,
+  },
+];
--- a/frontend/src/_mock/_booking.ts
+++ b/frontend/src/_mock/_booking.ts
@@ -0,0 +1,42 @@
+import _mock from './_mock';
+import { randomInArray } from './funcs';
+
+// ----------------------------------------------------------------------
+
+export const _bookings = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  avatar: _mock.image.avatar(index),
+  checkIn: _mock.time(index),
+  checkOut: _mock.time(index),
+  phoneNumber: _mock.phoneNumber(index),
+  status: randomInArray(['pending', 'un_paid', 'paid']),
+  roomType: randomInArray(['double', 'king', 'single']),
+}));
+
+export const _bookingsOverview = [...Array(3)].map((_, index) => ({
+  status: ['Pending', 'Cancel', 'Done'][index],
+  quantity: _mock.number.percent(index) * 1000,
+  value: _mock.number.percent(index),
+}));
+
+export const _bookingReview = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  description: _mock.text.description(index),
+  avatar: _mock.image.avatar(index),
+  rating: _mock.number.rating(index),
+  postedAt: _mock.time(index),
+  tags: ['Great Sevice', 'Recommended', 'Best Price'],
+}));
+
+export const _bookingNew = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  avatar: _mock.image.avatar(index),
+  bookdAt: _mock.time(index),
+  roomNumber: 'A-21',
+  roomType: randomInArray(['double', 'king', 'single']),
+  person: '3-5',
+  cover: `https://minimal-assets-api.vercel.app/assets/images/rooms/room-${index + 1}.jpg`,
+}));
--- a/frontend/src/_mock/_countries.ts
+++ b/frontend/src/_mock/_countries.ts
@@ -0,0 +1,258 @@
+export const countries = [
+  { code: 'AD', label: 'Andorra', phone: '376' },
+  { code: 'AE', label: 'United Arab Emirates', phone: '971' },
+  { code: 'AF', label: 'Afghanistan', phone: '93' },
+  { code: 'AG', label: 'Antigua and Barbuda', phone: '1-268' },
+  { code: 'AI', label: 'Anguilla', phone: '1-264' },
+  { code: 'AL', label: 'Albania', phone: '355' },
+  { code: 'AM', label: 'Armenia', phone: '374' },
+  { code: 'AO', label: 'Angola', phone: '244' },
+  { code: 'AQ', label: 'Antarctica', phone: '672' },
+  { code: 'AR', label: 'Argentina', phone: '54' },
+  { code: 'AS', label: 'American Samoa', phone: '1-684' },
+  { code: 'AT', label: 'Austria', phone: '43' },
+  { code: 'AU', label: 'Australia', phone: '61' },
+  { code: 'AW', label: 'Aruba', phone: '297' },
+  { code: 'AX', label: 'Alland Islands', phone: '358' },
+  { code: 'AZ', label: 'Azerbaijan', phone: '994' },
+  { code: 'BA', label: 'Bosnia and Herzegovina', phone: '387' },
+  { code: 'BB', label: 'Barbados', phone: '1-246' },
+  { code: 'BD', label: 'Bangladesh', phone: '880' },
+  { code: 'BE', label: 'Belgium', phone: '32' },
+  { code: 'BF', label: 'Burkina Faso', phone: '226' },
+  { code: 'BG', label: 'Bulgaria', phone: '359' },
+  { code: 'BH', label: 'Bahrain', phone: '973' },
+  { code: 'BI', label: 'Burundi', phone: '257' },
+  { code: 'BJ', label: 'Benin', phone: '229' },
+  { code: 'BL', label: 'Saint Barthelemy', phone: '590' },
+  { code: 'BM', label: 'Bermuda', phone: '1-441' },
+  { code: 'BN', label: 'Brunei Darussalam', phone: '673' },
+  { code: 'BO', label: 'Bolivia', phone: '591' },
+  { code: 'BR', label: 'Brazil', phone: '55' },
+  { code: 'BS', label: 'Bahamas', phone: '1-242' },
+  { code: 'BT', label: 'Bhutan', phone: '975' },
+  { code: 'BV', label: 'Bouvet Island', phone: '47' },
+  { code: 'BW', label: 'Botswana', phone: '267' },
+  { code: 'BY', label: 'Belarus', phone: '375' },
+  { code: 'BZ', label: 'Belize', phone: '501' },
+  { code: 'CA', label: 'Canada', phone: '1' },
+  { code: 'CC', label: 'Cocos (Keeling) Islands', phone: '61' },
+  { code: 'CD', label: 'Congo, Democratic Republic of the', phone: '243' },
+  { code: 'CF', label: 'Central African Republic', phone: '236' },
+  { code: 'CG', label: 'Congo, Republic of the', phone: '242' },
+  { code: 'CH', label: 'Switzerland', phone: '41' },
+  { code: 'CI', label: "Cote d'Ivoire", phone: '225' },
+  { code: 'CK', label: 'Cook Islands', phone: '682' },
+  { code: 'CL', label: 'Chile', phone: '56' },
+  { code: 'CM', label: 'Cameroon', phone: '237' },
+  { code: 'CN', label: 'China', phone: '86' },
+  { code: 'CO', label: 'Colombia', phone: '57' },
+  { code: 'CR', label: 'Costa Rica', phone: '506' },
+  { code: 'CU', label: 'Cuba', phone: '53' },
+  { code: 'CV', label: 'Cape Verde', phone: '238' },
+  { code: 'CW', label: 'Curacao', phone: '599' },
+  { code: 'CX', label: 'Christmas Island', phone: '61' },
+  { code: 'CY', label: 'Cyprus', phone: '357' },
+  { code: 'CZ', label: 'Czech Republic', phone: '420' },
+  { code: 'DE', label: 'Germany', phone: '49' },
+  { code: 'DJ', label: 'Djibouti', phone: '253' },
+  { code: 'DK', label: 'Denmark', phone: '45' },
+  { code: 'DM', label: 'Dominica', phone: '1-767' },
+  { code: 'DO', label: 'Dominican Republic', phone: '1-809' },
+  { code: 'DZ', label: 'Algeria', phone: '213' },
+  { code: 'EC', label: 'Ecuador', phone: '593' },
+  { code: 'EE', label: 'Estonia', phone: '372' },
+  { code: 'EG', label: 'Egypt', phone: '20' },
+  { code: 'EH', label: 'Western Sahara', phone: '212' },
+  { code: 'ER', label: 'Eritrea', phone: '291' },
+  { code: 'ES', label: 'Spain', phone: '34' },
+  { code: 'ET', label: 'Ethiopia', phone: '251' },
+  { code: 'FI', label: 'Finland', phone: '358' },
+  { code: 'FJ', label: 'Fiji', phone: '679' },
+  { code: 'FK', label: 'Falkland Islands (Malvinas)', phone: '500' },
+  { code: 'FM', label: 'Micronesia, Federated States of', phone: '691' },
+  { code: 'FO', label: 'Faroe Islands', phone: '298' },
+  { code: 'FR', label: 'France', phone: '33' },
+  { code: 'GA', label: 'Gabon', phone: '241' },
+  { code: 'GB', label: 'United Kingdom', phone: '44' },
+  { code: 'GD', label: 'Grenada', phone: '1-473' },
+  { code: 'GE', label: 'Georgia', phone: '995' },
+  { code: 'GF', label: 'French Guiana', phone: '594' },
+  { code: 'GG', label: 'Guernsey', phone: '44' },
+  { code: 'GH', label: 'Ghana', phone: '233' },
+  { code: 'GI', label: 'Gibraltar', phone: '350' },
+  { code: 'GL', label: 'Greenland', phone: '299' },
+  { code: 'GM', label: 'Gambia', phone: '220' },
+  { code: 'GN', label: 'Guinea', phone: '224' },
+  { code: 'GP', label: 'Guadeloupe', phone: '590' },
+  { code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
+  { code: 'GR', label: 'Greece', phone: '30' },
+  {
+    code: 'GS',
+    label: 'South Georgia and the South Sandwich Islands',
+    phone: '500',
+  },
+  { code: 'GT', label: 'Guatemala', phone: '502' },
+  { code: 'GU', label: 'Guam', phone: '1-671' },
+  { code: 'GW', label: 'Guinea-Bissau', phone: '245' },
+  { code: 'GY', label: 'Guyana', phone: '592' },
+  { code: 'HK', label: 'Hong Kong', phone: '852' },
+  { code: 'HM', label: 'Heard Island and McDonald Islands', phone: '672' },
+  { code: 'HN', label: 'Honduras', phone: '504' },
+  { code: 'HR', label: 'Croatia', phone: '385' },
+  { code: 'HT', label: 'Haiti', phone: '509' },
+  { code: 'HU', label: 'Hungary', phone: '36' },
+  { code: 'ID', label: 'Indonesia', phone: '62' },
+  { code: 'IE', label: 'Ireland', phone: '353' },
+  { code: 'IL', label: 'Israel', phone: '972' },
+  { code: 'IM', label: 'Isle of Man', phone: '44' },
+  { code: 'IN', label: 'India', phone: '91' },
+  { code: 'IO', label: 'British Indian Ocean Territory', phone: '246' },
+  { code: 'IQ', label: 'Iraq', phone: '964' },
+  { code: 'IR', label: 'Iran, Islamic Republic of', phone: '98' },
+  { code: 'IS', label: 'Iceland', phone: '354' },
+  { code: 'IT', label: 'Italy', phone: '39' },
+  { code: 'JE', label: 'Jersey', phone: '44' },
+  { code: 'JM', label: 'Jamaica', phone: '1-876' },
+  { code: 'JO', label: 'Jordan', phone: '962' },
+  { code: 'JP', label: 'Japan', phone: '81' },
+  { code: 'KE', label: 'Kenya', phone: '254' },
+  { code: 'KG', label: 'Kyrgyzstan', phone: '996' },
+  { code: 'KH', label: 'Cambodia', phone: '855' },
+  { code: 'KI', label: 'Kiribati', phone: '686' },
+  { code: 'KM', label: 'Comoros', phone: '269' },
+  { code: 'KN', label: 'Saint Kitts and Nevis', phone: '1-869' },
+  { code: 'KP', label: "Korea, Democratic People's Republic of", phone: '850' },
+  { code: 'KR', label: 'Korea, Republic of', phone: '82' },
+  { code: 'KW', label: 'Kuwait', phone: '965' },
+  { code: 'KY', label: 'Cayman Islands', phone: '1-345' },
+  { code: 'KZ', label: 'Kazakhstan', phone: '7' },
+  { code: 'LA', label: "Lao People's Democratic Republic", phone: '856' },
+  { code: 'LB', label: 'Lebanon', phone: '961' },
+  { code: 'LC', label: 'Saint Lucia', phone: '1-758' },
+  { code: 'LI', label: 'Liechtenstein', phone: '423' },
+  { code: 'LK', label: 'Sri Lanka', phone: '94' },
+  { code: 'LR', label: 'Liberia', phone: '231' },
+  { code: 'LS', label: 'Lesotho', phone: '266' },
+  { code: 'LT', label: 'Lithuania', phone: '370' },
+  { code: 'LU', label: 'Luxembourg', phone: '352' },
+  { code: 'LV', label: 'Latvia', phone: '371' },
+  { code: 'LY', label: 'Libya', phone: '218' },
+  { code: 'MA', label: 'Morocco', phone: '212' },
+  { code: 'MC', label: 'Monaco', phone: '377' },
+  { code: 'MD', label: 'Moldova, Republic of', phone: '373' },
+  { code: 'ME', label: 'Montenegro', phone: '382' },
+  { code: 'MF', label: 'Saint Martin (French part)', phone: '590' },
+  { code: 'MG', label: 'Madagascar', phone: '261' },
+  { code: 'MH', label: 'Marshall Islands', phone: '692' },
+  {
+    code: 'MK',
+    label: 'Macedonia, the Former Yugoslav Republic of',
+    phone: '389',
+  },
+  { code: 'ML', label: 'Mali', phone: '223' },
+  { code: 'MM', label: 'Myanmar', phone: '95' },
+  { code: 'MN', label: 'Mongolia', phone: '976' },
+  { code: 'MO', label: 'Macao', phone: '853' },
+  { code: 'MP', label: 'Northern Mariana Islands', phone: '1-670' },
+  { code: 'MQ', label: 'Martinique', phone: '596' },
+  { code: 'MR', label: 'Mauritania', phone: '222' },
+  { code: 'MS', label: 'Montserrat', phone: '1-664' },
+  { code: 'MT', label: 'Malta', phone: '356' },
+  { code: 'MU', label: 'Mauritius', phone: '230' },
+  { code: 'MV', label: 'Maldives', phone: '960' },
+  { code: 'MW', label: 'Malawi', phone: '265' },
+  { code: 'MX', label: 'Mexico', phone: '52' },
+  { code: 'MY', label: 'Malaysia', phone: '60' },
+  { code: 'MZ', label: 'Mozambique', phone: '258' },
+  { code: 'NA', label: 'Namibia', phone: '264' },
+  { code: 'NC', label: 'New Caledonia', phone: '687' },
+  { code: 'NE', label: 'Niger', phone: '227' },
+  { code: 'NF', label: 'Norfolk Island', phone: '672' },
+  { code: 'NG', label: 'Nigeria', phone: '234' },
+  { code: 'NI', label: 'Nicaragua', phone: '505' },
+  { code: 'NL', label: 'Netherlands', phone: '31' },
+  { code: 'NO', label: 'Norway', phone: '47' },
+  { code: 'NP', label: 'Nepal', phone: '977' },
+  { code: 'NR', label: 'Nauru', phone: '674' },
+  { code: 'NU', label: 'Niue', phone: '683' },
+  { code: 'NZ', label: 'New Zealand', phone: '64' },
+  { code: 'OM', label: 'Oman', phone: '968' },
+  { code: 'PA', label: 'Panama', phone: '507' },
+  { code: 'PE', label: 'Peru', phone: '51' },
+  { code: 'PF', label: 'French Polynesia', phone: '689' },
+  { code: 'PG', label: 'Papua New Guinea', phone: '675' },
+  { code: 'PH', label: 'Philippines', phone: '63' },
+  { code: 'PK', label: 'Pakistan', phone: '92' },
+  { code: 'PL', label: 'Poland', phone: '48' },
+  { code: 'PM', label: 'Saint Pierre and Miquelon', phone: '508' },
+  { code: 'PN', label: 'Pitcairn', phone: '870' },
+  { code: 'PR', label: 'Puerto Rico', phone: '1' },
+  { code: 'PS', label: 'Palestine, State of', phone: '970' },
+  { code: 'PT', label: 'Portugal', phone: '351' },
+  { code: 'PW', label: 'Palau', phone: '680' },
+  { code: 'PY', label: 'Paraguay', phone: '595' },
+  { code: 'QA', label: 'Qatar', phone: '974' },
+  { code: 'RE', label: 'Reunion', phone: '262' },
+  { code: 'RO', label: 'Romania', phone: '40' },
+  { code: 'RS', label: 'Serbia', phone: '381' },
+  { code: 'RU', label: 'Russian Federation', phone: '7' },
+  { code: 'RW', label: 'Rwanda', phone: '250' },
+  { code: 'SA', label: 'Saudi Arabia', phone: '966' },
+  { code: 'SB', label: 'Solomon Islands', phone: '677' },
+  { code: 'SC', label: 'Seychelles', phone: '248' },
+  { code: 'SD', label: 'Sudan', phone: '249' },
+  { code: 'SE', label: 'Sweden', phone: '46' },
+  { code: 'SG', label: 'Singapore', phone: '65' },
+  { code: 'SH', label: 'Saint Helena', phone: '290' },
+  { code: 'SI', label: 'Slovenia', phone: '386' },
+  { code: 'SJ', label: 'Svalbard and Jan Mayen', phone: '47' },
+  { code: 'SK', label: 'Slovakia', phone: '421' },
+  { code: 'SL', label: 'Sierra Leone', phone: '232' },
+  { code: 'SM', label: 'San Marino', phone: '378' },
+  { code: 'SN', label: 'Senegal', phone: '221' },
+  { code: 'SO', label: 'Somalia', phone: '252' },
+  { code: 'SR', label: 'Suriname', phone: '597' },
+  { code: 'SS', label: 'South Sudan', phone: '211' },
+  { code: 'ST', label: 'Sao Tome and Principe', phone: '239' },
+  { code: 'SV', label: 'El Salvador', phone: '503' },
+  { code: 'SX', label: 'Sint Maarten (Dutch part)', phone: '1-721' },
+  { code: 'SY', label: 'Syrian Arab Republic', phone: '963' },
+  { code: 'SZ', label: 'Swaziland', phone: '268' },
+  { code: 'TC', label: 'Turks and Caicos Islands', phone: '1-649' },
+  { code: 'TD', label: 'Chad', phone: '235' },
+  { code: 'TF', label: 'French Southern Territories', phone: '262' },
+  { code: 'TG', label: 'Togo', phone: '228' },
+  { code: 'TH', label: 'Thailand', phone: '66' },
+  { code: 'TJ', label: 'Tajikistan', phone: '992' },
+  { code: 'TK', label: 'Tokelau', phone: '690' },
+  { code: 'TL', label: 'Timor-Leste', phone: '670' },
+  { code: 'TM', label: 'Turkmenistan', phone: '993' },
+  { code: 'TN', label: 'Tunisia', phone: '216' },
+  { code: 'TO', label: 'Tonga', phone: '676' },
+  { code: 'TR', label: 'Turkey', phone: '90' },
+  { code: 'TT', label: 'Trinidad and Tobago', phone: '1-868' },
+  { code: 'TV', label: 'Tuvalu', phone: '688' },
+  { code: 'TW', label: 'Taiwan, Province of China', phone: '886' },
+  { code: 'TZ', label: 'United Republic of Tanzania', phone: '255' },
+  { code: 'UA', label: 'Ukraine', phone: '380' },
+  { code: 'UG', label: 'Uganda', phone: '256' },
+  { code: 'US', label: 'United States', phone: '1' },
+  { code: 'UY', label: 'Uruguay', phone: '598' },
+  { code: 'UZ', label: 'Uzbekistan', phone: '998' },
+  { code: 'VA', label: 'Holy See (Vatican City State)', phone: '379' },
+  { code: 'VC', label: 'Saint Vincent and the Grenadines', phone: '1-784' },
+  { code: 'VE', label: 'Venezuela', phone: '58' },
+  { code: 'VG', label: 'British Virgin Islands', phone: '1-284' },
+  { code: 'VI', label: 'US Virgin Islands', phone: '1-340' },
+  { code: 'VN', label: 'Vietnam', phone: '84' },
+  { code: 'VU', label: 'Vanuatu', phone: '678' },
+  { code: 'WF', label: 'Wallis and Futuna', phone: '681' },
+  { code: 'WS', label: 'Samoa', phone: '685' },
+  { code: 'XK', label: 'Kosovo', phone: '383' },
+  { code: 'YE', label: 'Yemen', phone: '967' },
+  { code: 'YT', label: 'Mayotte', phone: '262' },
+  { code: 'ZA', label: 'South Africa', phone: '27' },
+  { code: 'ZM', label: 'Zambia', phone: '260' },
+  { code: 'ZW', label: 'Zimbabwe', phone: '263' },
+];
--- a/frontend/src/_mock/_ecommerce.ts
+++ b/frontend/src/_mock/_ecommerce.ts
@@ -0,0 +1,56 @@
+import _mock from './_mock';
+
+// ----------------------------------------------------------------------
+
+const COUNTRY = ['de', 'en', 'fr', 'kr', 'us'];
+
+const CATEGORY = ['CAP', 'Branded Shoes', 'Headphone', 'Cell Phone', 'Earings'];
+
+const PRODUCT_NAME = [
+  'Small Granite Computer',
+  'Small Rubber Mouse',
+  'Awesome Rubber Hat',
+  'Sleek Cotton Sausages',
+  'Rustic Wooden Chicken',
+];
+
+export const _ecommerceSalesOverview = [...Array(3)].map((_, index) => ({
+  label: ['Total Profit', 'Total Income', 'Total Expenses'][index],
+  amount: _mock.number.price(index) * 100,
+  value: _mock.number.percent(index),
+}));
+
+export const _ecommerceBestSalesman = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  email: _mock.email(index),
+  avatar: _mock.image.avatar(index + 8),
+  category: CATEGORY[index],
+  flag: `https://minimal-assets-api.vercel.app/assets/icons/ic_flag_${COUNTRY[index]}.svg`,
+  total: _mock.number.price(index),
+  rank: `Top ${index + 1}`,
+}));
+
+export const _ecommerceLatestProducts = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: PRODUCT_NAME[index],
+  image: _mock.image.product(index),
+  price: _mock.number.price(index),
+  priceSale: index === 0 || index === 3 ? 0 : _mock.number.price(index),
+  colors: (index === 0 && ['#2EC4B6', '#E71D36', '#FF9F1C', '#011627']) ||
+    (index === 1 && ['#92140C', '#FFCF99']) ||
+    (index === 2 && ['#0CECDD', '#FFF338', '#FF67E7', '#C400FF', '#52006A', '#046582']) ||
+    (index === 3 && ['#845EC2', '#E4007C', '#2A1A5E']) || ['#090088'],
+}));
+
+export const _ecommerceNewProducts = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: [
+    'Nike Air Max 97',
+    'Nike Zoom Gravity',
+    'Nike DBreak-Type',
+    'Kyrie Flytrap 3 EP Basketball Shoe',
+    'Nike Air Max Fusion Men',
+  ][index],
+  image: _mock.image.product(index),
+}));
--- a/frontend/src/_mock/_mock.ts
+++ b/frontend/src/_mock/_mock.ts
@@ -0,0 +1,55 @@
+import { sub } from 'date-fns';
+//
+import { role } from './role';
+import { email } from './email';
+import { boolean } from './boolean';
+import { company } from './company';
+import { phoneNumber } from './phoneNumber';
+import { fullAddress, country } from './address';
+import { firstName, lastName, fullName } from './name';
+import { title, sentence, description } from './text';
+import { price, rating, age, percent } from './number';
+
+// ----------------------------------------------------------------------
+
+const _mock = {
+  id: (index: number) => `e99f09a7-dd88-49d5-b1c8-1daf80c2d7b${index + 1}`,
+  email: (index: number) => email[index],
+  phoneNumber: (index: number) => phoneNumber[index],
+  time: (index: number) => sub(new Date(), { days: index, hours: index }),
+  boolean: (index: number) => boolean[index],
+  role: (index: number) => role[index],
+  company: (index: number) => company[index],
+  address: {
+    fullAddress: (index: number) => fullAddress[index],
+    country: (index: number) => country[index],
+  },
+  name: {
+    firstName: (index: number) => firstName[index],
+    lastName: (index: number) => lastName[index],
+    fullName: (index: number) => fullName[index],
+  },
+  text: {
+    title: (index: number) => title[index],
+    sentence: (index: number) => sentence[index],
+    description: (index: number) => description[index],
+  },
+  number: {
+    percent: (index: number) => percent[index],
+    rating: (index: number) => rating[index],
+    age: (index: number) => age[index],
+    price: (index: number) => price[index],
+  },
+  image: {
+    cover: (index: number) =>
+      `https://minimal-assets-api.vercel.app/assets/images/covers/cover_${index + 1}.jpg`,
+    feed: (index: number) =>
+      `https://minimal-assets-api.vercel.app/assets/images/feeds/feed_${index + 1}.jpg`,
+    product: (index: number) =>
+      `https://minimal-assets-api.vercel.app/assets/images/products/product_${index + 1}.jpg`,
+    avatar: (index: number) =>
+      `https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_${index + 1}.jpg`,
+  },
+};
+
+export default _mock;
--- a/frontend/src/_mock/_others.ts
+++ b/frontend/src/_mock/_others.ts
@@ -0,0 +1,163 @@
+import _mock from './_mock';
+import { randomInArray } from './funcs';
+
+// ----------------------------------------------------------------------
+
+export const _carouselsExample = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  title: _mock.text.title(index),
+  image: _mock.image.feed(index),
+  description: _mock.text.description(index),
+}));
+
+export const _carouselsMembers = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  role: _mock.role(index),
+  avatar: `https://minimal-assets-api.vercel.app/assets/images/members/member-${index + 1}.jpg`,
+}));
+
+// ----------------------------------------------------------------------
+
+export const _invoice = {
+  id: `${Date.now()}`,
+  taxes: 5,
+  discount: 10,
+  status: 'paid',
+  invoiceFrom: {
+    name: _mock.name.fullName(1),
+    address: _mock.address.fullAddress(1),
+    company: _mock.company(1),
+    email: _mock.email(1),
+    phone: _mock.phoneNumber(1),
+  },
+  invoiceTo: {
+    name: _mock.name.fullName(2),
+    address: _mock.address.fullAddress(2),
+    company: _mock.company(2),
+    email: _mock.email(2),
+    phone: _mock.phoneNumber(2),
+  },
+  items: [...Array(3)].map((_, index) => ({
+    id: _mock.id(index),
+    title: _mock.text.title(index),
+    description: _mock.text.description(index),
+    qty: 5,
+    price: _mock.number.price(index),
+  })),
+};
+
+// ----------------------------------------------------------------------
+
+export const _faqs = [...Array(8)].map((_, index) => ({
+  id: _mock.id(index),
+  value: `panel${index + 1}`,
+  heading: `Questions ${index + 1}`,
+  detail: _mock.text.description(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _addressBooks = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  receiver: _mock.name.fullName(index),
+  fullAddress: _mock.address.fullAddress(index),
+  phone: _mock.phoneNumber(index),
+  addressType: index === 0 ? 'Home' : 'Office',
+  isDefault: index === 0,
+}));
+
+// ----------------------------------------------------------------------
+
+export const _skills = [...Array(3)].map((_, index) => ({
+  label: ['Development', 'Design', 'Marketing'][index],
+  value: _mock.number.percent(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _accordions = [...Array(4)].map((_, index) => ({
+  id: _mock.id(index),
+  value: `panel${index + 1}`,
+  heading: `Accordion ${index + 1}`,
+  subHeading: _mock.text.title(index),
+  detail: _mock.text.description(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _dataGrid = [...Array(36)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  email: _mock.email(index),
+  lastLogin: _mock.time(index),
+  performance: _mock.number.percent(index),
+  rating: _mock.number.rating(index),
+  status: randomInArray(['online', 'away', 'busy']),
+  isAdmin: _mock.boolean(index),
+  lastName: _mock.name.lastName(index),
+  firstName: _mock.name.firstName(index),
+  age: _mock.number.age(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _megaMenuProducts = [...Array(10)].map((_, index) => ({
+  name: _mock.text.title(index),
+  image: _mock.image.feed(index),
+  path: '#',
+}));
+
+// ----------------------------------------------------------------------
+
+export const _contacts = [...Array(20)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  username: _mock.name.fullName(index),
+  avatar: _mock.image.avatar(index),
+  address: _mock.address.fullAddress(index),
+  phone: _mock.phoneNumber(index),
+  email: _mock.email(index),
+  lastActivity: _mock.time(index),
+  status: randomInArray(['online', 'offline', 'away', 'busy']),
+  position: _mock.role(index),
+}));
+
+// ----------------------------------------------------------------------
+
+export const _notifications = [...Array(5)].map((_, index) => ({
+  id: _mock.id(index),
+  title: [
+    'Your order is placed',
+    'Sylvan King',
+    'You have new message',
+    'You have new mail',
+    'Delivery processing',
+  ][index],
+  description: [
+    'waiting for shipping',
+    'answered to your comment on the Minimal',
+    '5 unread messages',
+    'sent from Guido Padberg',
+    'Your order is being shipped',
+  ][index],
+  avatar: [null, _mock.image.avatar(2), null, null, null][index],
+  type: ['order_placed', 'friend_interactive', 'chat_message', 'mail', 'order_shipped'][index],
+  createdAt: _mock.time(index),
+  isUnRead: [true, true, false, false, false][index],
+}));
+
+// ----------------------------------------------------------------------
+
+export const _mapContact = [
+  {
+    latlng: [33, 65],
+    address: _mock.address.fullAddress(1),
+    phoneNumber: _mock.phoneNumber(1),
+  },
+  {
+    latlng: [-12.5, 18.5],
+    address: _mock.address.fullAddress(2),
+    phoneNumber: _mock.phoneNumber(2),
+  },
+];
--- a/frontend/src/_mock/_plans.tsx
+++ b/frontend/src/_mock/_plans.tsx
@@ -0,0 +1,67 @@
+import { PlanFreeIcon, PlanStarterIcon, PlanPremiumIcon } from '../assets';
+
+// ----------------------------------------------------------------------
+
+const LICENSES = ['Standard', 'Standard Plus', 'Extended'];
+
+export const _homePlans = [...Array(3)].map((_, index) => ({
+  license: LICENSES[index],
+  commons: ['One end products', '12 months updates', '6 months of support'],
+  options: [
+    'JavaScript version',
+    'TypeScript version',
+    'Design Resources',
+    'Commercial applications',
+  ],
+  icons: [
+    'https://minimal-assets-api.vercel.app/assets/images/home/ic_sketch.svg',
+    'https://minimal-assets-api.vercel.app/assets/images/home/ic_figma.svg',
+    'https://minimal-assets-api.vercel.app/assets/images/home/ic_js.svg',
+    'https://minimal-assets-api.vercel.app/assets/images/home/ic_ts.svg',
+  ],
+}));
+
+export const _pricingPlans = [
+  {
+    subscription: 'basic',
+    icon: <PlanFreeIcon />,
+    price: 0,
+    caption: 'forever',
+    lists: [
+      { text: '3 prototypes', isAvailable: true },
+      { text: '3 boards', isAvailable: true },
+      { text: 'Up to 5 team members', isAvailable: false },
+      { text: 'Advanced security', isAvailable: false },
+      { text: 'Permissions & workflows', isAvailable: false },
+    ],
+    labelAction: 'current plan',
+  },
+  {
+    subscription: 'starter',
+    icon: <PlanStarterIcon />,
+    price: 4.99,
+    caption: 'saving $24 a year',
+    lists: [
+      { text: '3 prototypes', isAvailable: true },
+      { text: '3 boards', isAvailable: true },
+      { text: 'Up to 5 team members', isAvailable: true },
+      { text: 'Advanced security', isAvailable: false },
+      { text: 'Permissions & workflows', isAvailable: false },
+    ],
+    labelAction: 'choose starter',
+  },
+  {
+    subscription: 'premium',
+    icon: <PlanPremiumIcon />,
+    price: 9.99,
+    caption: 'saving $124 a year',
+    lists: [
+      { text: '3 prototypes', isAvailable: true },
+      { text: '3 boards', isAvailable: true },
+      { text: 'Up to 5 team members', isAvailable: true },
+      { text: 'Advanced security', isAvailable: true },
+      { text: 'Permissions & workflows', isAvailable: true },
+    ],
+    labelAction: 'choose premium',
+  },
+];
--- a/frontend/src/_mock/_top100Films.ts
+++ b/frontend/src/_mock/_top100Films.ts
@@ -0,0 +1,105 @@
+export const top100Films = [
+  { title: 'The Shawshank Redemption', year: 1994 },
+  { title: 'The Godfather', year: 1972 },
+  { title: 'The Godfather: Part II', year: 1974 },
+  { title: 'The Dark Knight', year: 2008 },
+  { title: '12 Angry Men', year: 1957 },
+  { title: "Schindler's List", year: 1993 },
+  { title: 'Pulp Fiction', year: 1994 },
+  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
+  { title: 'The Good, the Bad and the Ugly', year: 1966 },
+  { title: 'Fight Club', year: 1999 },
+  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
+  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
+  { title: 'Forrest Gump', year: 1994 },
+  { title: 'Inception', year: 2010 },
+  { title: 'The Lord of the Rings: The Two Towers', year: 2002 },
+  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
+  { title: 'Goodfellas', year: 1990 },
+  { title: 'The Matrix', year: 1999 },
+  { title: 'Seven Samurai', year: 1954 },
+  { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },
+  { title: 'City of God', year: 2002 },
+  { title: 'Se7en', year: 1995 },
+  { title: 'The Silence of the Lambs', year: 1991 },
+  { title: "It's a Wonderful Life", year: 1946 },
+  { title: 'Life Is Beautiful', year: 1997 },
+  { title: 'The Usual Suspects', year: 1995 },
+  { title: 'Léon: The Professional', year: 1994 },
+  { title: 'Spirited Away', year: 2001 },
+  { title: 'Saving Private Ryan', year: 1998 },
+  { title: 'Once Upon a Time in the West', year: 1968 },
+  { title: 'American History X', year: 1998 },
+  { title: 'Interstellar', year: 2014 },
+  { title: 'Casablanca', year: 1942 },
+  { title: 'City Lights', year: 1931 },
+  { title: 'Psycho', year: 1960 },
+  { title: 'The Green Mile', year: 1999 },
+  { title: 'The Intouchables', year: 2011 },
+  { title: 'Modern Times', year: 1936 },
+  { title: 'Raiders of the Lost Ark', year: 1981 },
+  { title: 'Rear Window', year: 1954 },
+  { title: 'The Pianist', year: 2002 },
+  { title: 'The Departed', year: 2006 },
+  { title: 'Terminator 2: Judgment Day', year: 1991 },
+  { title: 'Back to the Future', year: 1985 },
+  { title: 'Whiplash', year: 2014 },
+  { title: 'Gladiator', year: 2000 },
+  { title: 'Memento', year: 2000 },
+  { title: 'The Prestige', year: 2006 },
+  { title: 'The Lion King', year: 1994 },
+  { title: 'Apocalypse Now', year: 1979 },
+  { title: 'Alien', year: 1979 },
+  { title: 'Sunset Boulevard', year: 1950 },
+  {
+    title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
+    year: 1964,
+  },
+  { title: 'The Great Dictator', year: 1940 },
+  { title: 'Cinema Paradiso', year: 1988 },
+  { title: 'The Lives of Others', year: 2006 },
+  { title: 'Grave of the Fireflies', year: 1988 },
+  { title: 'Paths of Glory', year: 1957 },
+  { title: 'Django Unchained', year: 2012 },
+  { title: 'The Shining', year: 1980 },
+  { title: 'WALL·E', year: 2008 },
+  { title: 'American Beauty', year: 1999 },
+  { title: 'The Dark Knight Rises', year: 2012 },
+  { title: 'Princess Mononoke', year: 1997 },
+  { title: 'Aliens', year: 1986 },
+  { title: 'Oldboy', year: 2003 },
+  { title: 'Once Upon a Time in America', year: 1984 },
+  { title: 'Witness for the Prosecution', year: 1957 },
+  { title: 'Das Boot', year: 1981 },
+  { title: 'Citizen Kane', year: 1941 },
+  { title: 'North by Northwest', year: 1959 },
+  { title: 'Vertigo', year: 1958 },
+  { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },
+  { title: 'Reservoir Dogs', year: 1992 },
+  { title: 'Braveheart', year: 1995 },
+  { title: 'M', year: 1931 },
+  { title: 'Requiem for a Dream', year: 2000 },
+  { title: 'Amélie', year: 2001 },
+  { title: 'A Clockwork Orange', year: 1971 },
+  { title: 'Like Stars on Earth', year: 2007 },
+  { title: 'Taxi Driver', year: 1976 },
+  { title: 'Lawrence of Arabia', year: 1962 },
+  { title: 'Double Indemnity', year: 1944 },
+  { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },
+  { title: 'Amadeus', year: 1984 },
+  { title: 'To Kill a Mockingbird', year: 1962 },
+  { title: 'Toy Story 3', year: 2010 },
+  { title: 'Logan', year: 2017 },
+  { title: 'Full Metal Jacket', year: 1987 },
+  { title: 'Dangal', year: 2016 },
+  { title: 'The Sting', year: 1973 },
+  { title: '2001: A Space Odyssey', year: 1968 },
+  { title: "Singin' in the Rain", year: 1952 },
+  { title: 'Toy Story', year: 1995 },
+  { title: 'Bicycle Thieves', year: 1948 },
+  { title: 'The Kid', year: 1921 },
+  { title: 'Inglourious Basterds', year: 2009 },
+  { title: 'Snatch', year: 2000 },
+  { title: '3 Idiots', year: 2009 },
+  { title: 'Monty Python and the Holy Grail', year: 1975 },
+];
--- a/frontend/src/_mock/_user.ts
+++ b/frontend/src/_mock/_user.ts
@@ -0,0 +1,136 @@
+import _mock from './_mock';
+import { randomNumberRange, randomInArray } from './funcs';
+
+// ----------------------------------------------------------------------
+
+export const _userAbout = {
+  id: _mock.id(1),
+  cover: _mock.image.cover(1),
+  position: 'UI Designer',
+  follower: randomNumberRange(999, 99999),
+  following: randomNumberRange(999, 99999),
+  quote:
+    'Tart I love sugar plum I love oat cake. Sweet roll caramels I love jujubes. Topping cake wafer..',
+  country: _mock.address.country(1),
+  email: _mock.email(1),
+  company: _mock.company(1),
+  school: _mock.company(2),
+  role: 'Manager',
+  facebookLink: `https://www.facebook.com/caitlyn.kerluke`,
+  instagramLink: `https://www.instagram.com/caitlyn.kerluke`,
+  linkedinLink: `https://www.linkedin.com/in/caitlyn.kerluke`,
+  twitterLink: `https://www.twitter.com/caitlyn.kerluke`,
+};
+
+export const _userFollowers = [...Array(18)].map((_, index) => ({
+  id: _mock.id(index),
+  avatarUrl: _mock.image.avatar(index),
+  name: _mock.name.fullName(index),
+  country: _mock.address.country(index),
+  isFollowed: _mock.boolean(index),
+}));
+
+export const _userFriends = [...Array(18)].map((_, index) => ({
+  id: _mock.id(index),
+  avatarUrl: _mock.image.avatar(index),
+  name: _mock.name.fullName(index),
+  role: _mock.role(index),
+}));
+
+export const _userGallery = [...Array(12)].map((_, index) => ({
+  id: _mock.id(index),
+  title: _mock.text.title(index),
+  postAt: _mock.time(index),
+  imageUrl: _mock.image.cover(index),
+}));
+
+export const _userFeeds = [...Array(3)].map((_, index) => ({
+  id: _mock.id(index),
+  author: {
+    id: _mock.id(8),
+    avatarUrl: _mock.image.avatar(1),
+    name: 'Caitlyn Kerluke',
+  },
+  isLiked: true,
+  createdAt: _mock.time(index),
+  media: _mock.image.feed(index),
+  message: _mock.text.sentence(index),
+  personLikes: [...Array(36)].map((_, index) => ({
+    name: _mock.name.fullName(index),
+    avatarUrl: _mock.image.avatar(index + 2),
+  })),
+  comments: (index === 2 && []) || [
+    {
+      id: _mock.id(7),
+      author: {
+        id: _mock.id(8),
+        avatarUrl: _mock.image.avatar(randomInArray([2, 3, 4, 5, 6]) || 2),
+        name: _mock.name.fullName(index + 5),
+      },
+      createdAt: _mock.time(2),
+      message: 'Praesent venenatis metus at',
+    },
+    {
+      id: _mock.id(9),
+      author: {
+        id: _mock.id(10),
+        avatarUrl: _mock.image.avatar(randomInArray([7, 8, 9, 10, 11]) || 7),
+        name: _mock.name.fullName(index + 6),
+      },
+      createdAt: _mock.time(3),
+      message:
+        'Etiam rhoncus. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed lectus.',
+    },
+  ],
+}));
+
+export const _userCards = [...Array(24)].map((_, index) => ({
+  id: _mock.id(index),
+  avatarUrl: _mock.image.avatar(index),
+  cover: _mock.image.cover(index),
+  name: _mock.name.fullName(index),
+  follower: randomNumberRange(999, 99999),
+  following: randomNumberRange(999, 99999),
+  totalPost: randomNumberRange(999, 99999),
+  position: _mock.role(index),
+}));
+
+export const _userPayment = [...Array(2)].map((_, index) => ({
+  id: _mock.id(index),
+  cardNumber: ['**** **** **** 1234', '**** **** **** 5678', '**** **** **** 7878'][index],
+  cardType: ['master_card', 'visa', 'master_card'][index],
+}));
+
+export const _userAddressBook = [...Array(4)].map((_, index) => ({
+  id: _mock.id(index),
+  name: _mock.name.fullName(index),
+  phone: _mock.phoneNumber(index),
+  country: _mock.address.country(index),
+  state: 'New Hampshire',
+  city: 'East Sambury',
+  street: '41256 Kamille Turnpike',
+  zipCode: '85807',
+}));
+
+export const _userInvoices = [...Array(10)].map((_, index) => ({
+  id: _mock.id(index),
+  createdAt: _mock.time(index),
+  price: _mock.number.price(index),
+}));
+
+export const _userList = [...Array(24)].map((_, index) => ({
+  id: _mock.id(index),
+  avatarUrl: _mock.image.avatar(index),
+  name: _mock.name.fullName(index),
+  email: _mock.email(index),
+  phoneNumber: _mock.phoneNumber(index),
+  address: '908 Jack Locks',
+  country: _mock.address.country(index),
+  state: 'Virginia',
+  city: 'Rancho Cordova',
+  zipCode: '85807',
+  company: _mock.company(index),
+  isVerified: _mock.boolean(index),
+  status: randomInArray(['active', 'banned']),
+  role: _mock.role(index),
+}));
--- a/frontend/src/_mock/address.ts
+++ b/frontend/src/_mock/address.ts
@@ -0,0 +1,87 @@
+// ----------------------------------------------------------------------
+
+export const fullAddress = [
+  '19034 Verna Unions Apt. 164 - Honolulu, RI / 87535',
+  '1147 Rohan Drive Suite 819 - Burlington, VT / 82021',
+  '18605 Thompson Circle Apt. 086 - Idaho Falls, WV / 50337',
+  '110 Lamar Station Apt. 730 - Hagerstown, OK / 49808',
+  '36901 Elmer Spurs Apt. 762 - Miramar, DE / 92836',
+  '2089 Runolfsson Harbors Suite 886 - Chapel Hill, TX / 32827',
+  '279 Karolann Ports Apt. 774 - Prescott Valley, WV / 53905',
+  '96607 Claire Square Suite 591 - St. Louis Park, HI / 40802',
+  '9388 Auer Station Suite 573 - Honolulu, AK / 98024',
+  '47665 Adaline Squares Suite 510 - Blacksburg, NE / 53515',
+  '989 Vernice Flats Apt. 183 - Billings, NV / 04147',
+  '91020 Wehner Locks Apt. 673 - Albany, WY / 68763',
+  '585 Candelario Pass Suite 090 - Columbus, LA / 25376',
+  '80988 Renner Crest Apt. 000 - Fargo, VA / 24266',
+  '28307 Shayne Pike Suite 523 - North Las Vegas, AZ / 28550',
+  '205 Farrell Highway Suite 333 - Rock Hill, OK / 63421',
+  '253 Kara Motorway Suite 821 - Manchester, SD / 09331',
+  '13663 Kiara Oval Suite 606 - Missoula, AR / 44478',
+  '8110 Claire Port Apt. 703 - Anchorage, TN / 01753',
+  '4642 Demetris Lane Suite 407 - Edmond, AZ / 60888',
+  '74794 Asha Flat Suite 890 - Lancaster, OR / 13466',
+  '8135 Keeling Pines Apt. 326 - Alexandria, MA / 89442',
+  '441 Gibson Shores Suite 247 - Pasco, NM / 60678',
+  '4373 Emelia Valley Suite 596 - Columbia, NM / 42586',
+  '1946 Strosin Creek Apt. 279 - Casper, CO / 21335',
+  '147 Rempel Center Apt. 305 - Centennial, TN / 09375',
+  '78481 Floyd Mountains Apt. 184 - Glendale, SD / 18777',
+  '129 Toy Pines Suite 339 - Idaho Falls, CT / 82070',
+  '08945 Cremin Underpass Apt. 700 - Iowa City, GA / 33243',
+  '20728 Dorcas Highway Suite 959 - Largo, ND / 99931',
+  '492 Wilburn Park Apt. 746 - Bellevue, TN / 16077',
+  '70530 Garfield Tunnel Suite 902 - Detroit, IA / 01664',
+  '868 Kautzer Grove Suite 334 - Kearny, KS / 51368',
+  '71189 Towne Forks Suite 519 - Anchorage, IL / 52636',
+  '5070 Magdalena Neck Suite 096 - Cedar Rapids, PA / 01342',
+  '6216 Jermain Walk Apt. 279 - Wilmington, MA / 55416',
+  '1795 Kilback Stravenue Apt. 745 - Concord, MA / 96099',
+  '831 Rolfson Expressway Apt. 878 - Norman, NY / 10239',
+  '909 Nathaniel Lake Suite 769 - Sherman, NJ / 46523',
+  '3690 Hans Ports Apt. 369 - Cary, KS / 48930'
+];
+
+export const country = [
+  'Kenya',
+  'Madagascar',
+  'Netherlands Antilles',
+  'Azerbaijan',
+  'Aruba',
+  'Comoros',
+  'Sierra Leone',
+  'Bermuda',
+  'Italy',
+  'Iran',
+  'Denmark',
+  'Congo',
+  'Cambodia',
+  'Virgin Islands, British',
+  'Bahamas',
+  'Italy',
+  'France',
+  'Portugal',
+  'Nepal',
+  'Saint Vincent and the Grenadines',
+  'Greenland',
+  'Maldives',
+  'Comoros',
+  'Bhutan',
+  'Tuvalu',
+  'Ethiopia',
+  'Myanmar',
+  'Libyan Arab Jamahiriya',
+  'Senegal',
+  'Malta',
+  'Kyrgyz Republic',
+  'Turks and Caicos Islands',
+  'Gibraltar',
+  'Sweden',
+  'Zambia',
+  'Isle of Man',
+  'Canada',
+  'Turkey',
+  'Samoa',
+  'Vietnam'
+];
--- a/frontend/src/_mock/boolean.ts
+++ b/frontend/src/_mock/boolean.ts
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+export const boolean = [
+  true,
+  true,
+  true,
+  false,
+  false,
+  true,
+  false,
+  false,
+  false,
+  false,
+  true,
+  true,
+  true,
+  false,
+  false,
+  false,
+  true,
+  false,
+  false,
+  false,
+  true,
+  false,
+  false,
+  true,
+  true,
+  true,
+  false,
+  false,
+  true,
+  true,
+  false,
+  true,
+  false,
+  true,
+  true,
+  true,
+  false,
+  true,
+  false,
+  false
+];
--- a/frontend/src/_mock/company.ts
+++ b/frontend/src/_mock/company.ts
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+export const company = [
+  'Lueilwitz and Sons',
+  'Gleichner, Mueller and Tromp',
+  'Nikolaus - Leuschke',
+  'Hegmann, Kreiger and Bayer',
+  'Grimes Inc',
+  'Durgan - Murazik',
+  'Altenwerth, Medhurst and Roberts',
+  'Raynor Group',
+  'Mraz, Donnelly and Collins',
+  'Padberg - Bailey',
+  'Heidenreich, Stokes and Parker',
+  'Pagac and Sons',
+  'Rempel, Hand and Herzog',
+  'Dare - Treutel',
+  'Kihn, Marquardt and Crist',
+  'Nolan - Kunde',
+  'Wuckert Inc',
+  'Dibbert Inc',
+  'Goyette and Sons',
+  'Feest Group',
+  'Bosco and Sons',
+  'Bartell - Kovacek',
+  'Schimmel - Raynor',
+  'Tremblay LLC',
+  'Hills - Mitchell',
+  'Rogahn LLC',
+  'Kuhn, Osinski and Morar',
+  'Schmitt Inc',
+  'Breitenberg - Rosenbaum',
+  "O'Keefe, Schneider and Mraz",
+  'Rohan, Langworth and Kling',
+  'Morar and Sons',
+  'Mraz LLC',
+  'Rowe, Parisian and Kub',
+  'Marquardt - Hane',
+  'Medhurst Group',
+  'Nikolaus - Lang',
+  'Effertz, Mohr and Olson',
+  'Anderson - Kris',
+  'Runolfsson Group'
+];
--- a/frontend/src/_mock/email.ts
+++ b/frontend/src/_mock/email.ts
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+export const email = [
+  'nannie_abernathy70@yahoo.com',
+  'ashlynn_ohara62@gmail.com',
+  'milo.farrell@hotmail.com',
+  'violet.ratke86@yahoo.com',
+  'letha_lubowitz24@yahoo.com',
+  'aditya_greenfelder31@gmail.com',
+  'lenna_bergnaum27@hotmail.com',
+  'luella.ryan33@gmail.com',
+  'joana.simonis84@gmail.com',
+  'marjolaine_white94@gmail.com',
+  'vergie_block82@hotmail.com',
+  'vito.hudson@hotmail.com',
+  'tyrel_greenholt@gmail.com',
+  'dwight.block85@yahoo.com',
+  'mireya13@hotmail.com',
+  'dasia_jenkins@hotmail.com',
+  'benny89@yahoo.com',
+  'dawn.goyette@gmail.com',
+  'zella_hickle4@yahoo.com',
+  'avery43@hotmail.com',
+  'olen_legros@gmail.com',
+  'jimmie.gerhold73@hotmail.com',
+  'genevieve.powlowski@hotmail.com',
+  'louie.kuphal39@gmail.com',
+  'enoch.cruickshank@gmail.com',
+  'arlo_mccullough@gmail.com',
+  'sadie18@yahoo.com',
+  'aric67@gmail.com',
+  'mack_deckow53@gmail.com',
+  'constantin91@yahoo.com',
+  'lonny84@hotmail.com',
+  'gus56@hotmail.com',
+  'brennon64@yahoo.com',
+  'hortense.streich@hotmail.com',
+  'kallie_powlowski57@hotmail.com',
+  'meghan.kemmer@hotmail.com',
+  'bella.mraz14@yahoo.com',
+  'barney88@gmail.com',
+  'diamond_johns@hotmail.com',
+  'gus80@hotmail.com'
+];
--- a/frontend/src/_mock/funcs.ts
+++ b/frontend/src/_mock/funcs.ts
@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------
+
+export function randomNumber(number: number) {
+  return Math.floor(Math.random() * number) + 1;
+}
+
+export function randomNumberRange(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+export function randomInArray(array: any) {
+  return array[Math.floor(Math.random() * array.length)];
+}
--- a/frontend/src/_mock/index.ts
+++ b/frontend/src/_mock/index.ts
@@ -0,0 +1,16 @@
+import _mock from './_mock';
+
+// ----------------------------------------------------------------------
+
+export * from './_app';
+export * from './_user';
+export * from './_plans';
+export * from './_others';
+export * from './_booking';
+export * from './_banking';
+export * from './_ecommerce';
+export * from './_analytics';
+export * from './_countries';
+export * from './_top100Films';
+
+export default _mock;
--- a/frontend/src/_mock/map/cities.ts
+++ b/frontend/src/_mock/map/cities.ts
@@ -0,0 +1,182 @@
+export const cities = [
+  {
+    city: 'New York',
+    population: '8,175,133',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Above_Gotham.jpg/240px-Above_Gotham.jpg',
+    state: 'New York',
+    latitude: 40.6643,
+    longitude: -73.9385
+  },
+  {
+    city: 'Los Angeles',
+    population: '3,792,621',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/LA_Skyline_Mountains2.jpg/240px-LA_Skyline_Mountains2.jpg',
+    state: 'California',
+    latitude: 34.0194,
+    longitude: -118.4108
+  },
+  {
+    city: 'Chicago',
+    population: '2,695,598',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/2008-06-10_3000x1000_chicago_skyline.jpg/240px-2008-06-10_3000x1000_chicago_skyline.jpg',
+    state: 'Illinois',
+    latitude: 41.8376,
+    longitude: -87.6818
+  },
+  {
+    city: 'Houston',
+    population: '2,100,263',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg/240px-Aerial_views_of_the_Houston%2C_Texas%2C_28005u.jpg',
+    state: 'Texas',
+    latitude: 29.7805,
+    longitude: -95.3863
+  },
+  {
+    city: 'Phoenix',
+    population: '1,445,632',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Downtown_Phoenix_Aerial_Looking_Northeast.jpg/207px-Downtown_Phoenix_Aerial_Looking_Northeast.jpg',
+    state: 'Arizona',
+    latitude: 33.5722,
+    longitude: -112.088
+  },
+  {
+    city: 'Philadelphia',
+    population: '1,526,006',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Philly_skyline.jpg/240px-Philly_skyline.jpg',
+    state: 'Pennsylvania',
+    latitude: 40.0094,
+    longitude: -75.1333
+  },
+  {
+    city: 'San Antonio',
+    population: '1,327,407',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Downtown_San_Antonio_View.JPG/240px-Downtown_San_Antonio_View.JPG',
+    state: 'Texas',
+    latitude: 29.4724,
+    longitude: -98.5251
+  },
+  {
+    city: 'San Diego',
+    population: '1,307,402',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/5/53/US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg/240px-US_Navy_110604-N-NS602-574_Navy_and_Marine_Corps_personnel%2C_along_with_community_leaders_from_the_greater_San_Diego_area_come_together_to_commemora.jpg',
+    state: 'California',
+    latitude: 32.8153,
+    longitude: -117.135
+  },
+  {
+    city: 'Dallas',
+    population: '1,197,816',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Dallas_skyline_daytime.jpg/240px-Dallas_skyline_daytime.jpg',
+    state: 'Texas',
+    latitude: 32.7757,
+    longitude: -96.7967
+  },
+  {
+    city: 'San Jose',
+    population: '945,942',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Downtown_San_Jose_skyline.PNG/240px-Downtown_San_Jose_skyline.PNG',
+    state: 'California',
+    latitude: 37.2969,
+    longitude: -121.8193
+  },
+  {
+    city: 'Austin',
+    population: '790,390',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Austin2012-12-01.JPG/240px-Austin2012-12-01.JPG',
+    state: 'Texas',
+    latitude: 30.3072,
+    longitude: -97.756
+  },
+  {
+    city: 'Jacksonville',
+    population: '821,784',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg/240px-Skyline_of_Jacksonville_FL%2C_South_view_20160706_1.jpg',
+    state: 'Florida',
+    latitude: 30.337,
+    longitude: -81.6613
+  },
+  {
+    city: 'San Francisco',
+    population: '805,235',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/San_Francisco_skyline_from_Coit_Tower.jpg/240px-San_Francisco_skyline_from_Coit_Tower.jpg',
+    state: 'California',
+    latitude: 37.7751,
+    longitude: -122.4193
+  },
+  {
+    city: 'Columbus',
+    population: '787,033',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Columbus-ohio-skyline-panorama.jpg/240px-Columbus-ohio-skyline-panorama.jpg',
+    state: 'Ohio',
+    latitude: 39.9848,
+    longitude: -82.985
+  },
+  {
+    city: 'Indianapolis',
+    population: '820,445',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Downtown_indy_from_parking_garage_zoom.JPG/213px-Downtown_indy_from_parking_garage_zoom.JPG',
+    state: 'Indiana',
+    latitude: 39.7767,
+    longitude: -86.1459
+  },
+  {
+    city: 'Fort Worth',
+    population: '741,206',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/d/db/FortWorthTexasSkylineW.jpg/240px-FortWorthTexasSkylineW.jpg',
+    state: 'Texas',
+    latitude: 32.7795,
+    longitude: -97.3463
+  },
+  {
+    city: 'Charlotte',
+    population: '731,424',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Charlotte_skyline45647.jpg/222px-Charlotte_skyline45647.jpg',
+    state: 'North Carolina',
+    latitude: 35.2087,
+    longitude: -80.8307
+  },
+  {
+    city: 'Seattle',
+    population: '608,660',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/SeattleI5Skyline.jpg/240px-SeattleI5Skyline.jpg',
+    state: 'Washington',
+    latitude: 47.6205,
+    longitude: -122.3509
+  },
+  {
+    city: 'Denver',
+    population: '600,158',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/DenverCP.JPG/240px-DenverCP.JPG',
+    state: 'Colorado',
+    latitude: 39.7618,
+    longitude: -104.8806
+  },
+  {
+    city: 'El Paso',
+    population: '649,121',
+    image:
+      'http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Downtown_El_Paso_at_sunset.jpeg/240px-Downtown_El_Paso_at_sunset.jpeg',
+    state: 'Texas',
+    latitude: 31.8484,
+    longitude: -106.427
+  }
+];
--- a/frontend/src/_mock/map/countries.ts
+++ b/frontend/src/_mock/map/countries.ts
@@ -0,0 +1,87 @@
+// utils
+import _mock from '../_mock';
+
+// ----------------------------------------------------------------------
+
+export const countries = [
+  {
+    timezones: ['America/Aruba'],
+    latlng: [12.5, -69.96666666],
+    name: 'Aruba',
+    country_code: 'AW',
+    capital: 'Oranjestad',
+    photo: _mock.image.feed(1),
+  },
+  {
+    timezones: ['Asia/Kabul'],
+    latlng: [33, 65],
+    name: 'Afghanistan',
+    country_code: 'AF',
+    capital: 'Kabul',
+    photo: _mock.image.feed(2),
+  },
+  {
+    timezones: ['Africa/Luanda'],
+    latlng: [-12.5, 18.5],
+    name: 'Angola',
+    country_code: 'AO',
+    capital: 'Luanda',
+    photo: _mock.image.feed(3),
+  },
+  {
+    timezones: ['Pacific/Efate'],
+    latlng: [-16, 167],
+    name: 'Vanuatu',
+    country_code: 'VU',
+    capital: 'Port Vila',
+    photo: _mock.image.feed(4),
+  },
+  {
+    timezones: ['Pacific/Wallis'],
+    latlng: [-13.3, -176.2],
+    name: 'Wallis and Futuna',
+    country_code: 'WF',
+    capital: 'Mata-Utu',
+    photo: _mock.image.feed(5),
+  },
+  {
+    timezones: ['Pacific/Apia'],
+    latlng: [-13.58333333, -172.33333333],
+    name: 'Samoa',
+    country_code: 'WS',
+    capital: 'Apia',
+    photo: _mock.image.feed(6),
+  },
+  {
+    timezones: ['Asia/Aden'],
+    latlng: [15, 48],
+    name: 'Yemen',
+    country_code: 'YE',
+    capital: "Sana'a",
+    photo: _mock.image.feed(7),
+  },
+  {
+    timezones: ['Africa/Johannesburg'],
+    latlng: [-29, 24],
+    name: 'South Africa',
+    country_code: 'ZA',
+    capital: 'Pretoria',
+    photo: _mock.image.feed(8),
+  },
+  {
+    timezones: ['Africa/Lusaka'],
+    latlng: [-15, 30],
+    name: 'Zambia',
+    country_code: 'ZM',
+    capital: 'Lusaka',
+    photo: _mock.image.feed(9),
+  },
+  {
+    timezones: ['Africa/Harare'],
+    latlng: [-20, 30],
+    name: 'Zimbabwe',
+    country_code: 'ZW',
+    capital: 'Harare',
+    photo: _mock.image.feed(10),
+  },
+];
--- a/frontend/src/_mock/map/map-style-basic-v8.json
+++ b/frontend/src/_mock/map/map-style-basic-v8.json
@@ -0,0 +1,599 @@
+{
+  "version": 8,
+  "name": "Basic",
+  "metadata": {
+    "mapbox:autocomposite": true
+  },
+  "sources": {
+    "mapbox": {
+      "url": "mapbox://mapbox.mapbox-streets-v7",
+      "type": "vector"
+    }
+  },
+  "sprite": "mapbox://sprites/mapbox/basic-v8",
+  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "#dedede"
+      },
+      "interactive": true
+    },
+    {
+      "id": "landuse_overlay_national_park",
+      "type": "fill",
+      "source": "mapbox",
+      "source-layer": "landuse_overlay",
+      "filter": ["==", "class", "national_park"],
+      "paint": {
+        "fill-color": "#d2edae",
+        "fill-opacity": 0.75
+      },
+      "interactive": true
+    },
+    {
+      "id": "landuse_park",
+      "type": "fill",
+      "source": "mapbox",
+      "source-layer": "landuse",
+      "filter": ["==", "class", "park"],
+      "paint": {
+        "fill-color": "#d2edae"
+      },
+      "interactive": true
+    },
+    {
+      "id": "waterway",
+      "type": "line",
+      "source": "mapbox",
+      "source-layer": "waterway",
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        ["in", "class", "river", "canal"]
+      ],
+      "paint": {
+        "line-color": "#a0cfdf",
+        "line-width": {
+          "base": 1.4,
+          "stops": [
+            [8, 0.5],
+            [20, 15]
+          ]
+        }
+      },
+      "interactive": true
+    },
+    {
+      "id": "water",
+      "type": "fill",
+      "source": "mapbox",
+      "source-layer": "water",
+      "paint": {
+        "fill-color": "#a0cfdf"
+      },
+      "interactive": true
+    },
+    {
+      "id": "building",
+      "type": "fill",
+      "source": "mapbox",
+      "source-layer": "building",
+      "paint": {
+        "fill-color": "#d6d6d6"
+      },
+      "interactive": true
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "butt",
+        "line-join": "miter"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway_link",
+            "street",
+            "street_limited",
+            "service",
+            "track",
+            "pedestrian",
+            "path",
+            "link"
+          ],
+          ["==", "structure", "tunnel"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "tunnel_minor",
+      "paint": {
+        "line-color": "#efefef",
+        "line-width": {
+          "base": 1.55,
+          "stops": [
+            [4, 0.25],
+            [20, 30]
+          ]
+        },
+        "line-dasharray": [0.36, 0.18]
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "butt",
+        "line-join": "miter"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway",
+            "primary",
+            "secondary",
+            "tertiary",
+            "trunk"
+          ],
+          ["==", "structure", "tunnel"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "tunnel_major",
+      "paint": {
+        "line-color": "#fff",
+        "line-width": {
+          "base": 1.4,
+          "stops": [
+            [6, 0.5],
+            [20, 30]
+          ]
+        },
+        "line-dasharray": [0.28, 0.14]
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway_link",
+            "street",
+            "street_limited",
+            "service",
+            "track",
+            "pedestrian",
+            "path",
+            "link"
+          ],
+          ["in", "structure", "none", "ford"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "road_minor",
+      "paint": {
+        "line-color": "#efefef",
+        "line-width": {
+          "base": 1.55,
+          "stops": [
+            [4, 0.25],
+            [20, 30]
+          ]
+        }
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway",
+            "primary",
+            "secondary",
+            "tertiary",
+            "trunk"
+          ],
+          ["in", "structure", "none", "ford"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "road_major",
+      "paint": {
+        "line-color": "#fff",
+        "line-width": {
+          "base": 1.4,
+          "stops": [
+            [6, 0.5],
+            [20, 30]
+          ]
+        }
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "butt",
+        "line-join": "miter"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway_link",
+            "street",
+            "street_limited",
+            "service",
+            "track",
+            "pedestrian",
+            "path",
+            "link"
+          ],
+          ["==", "structure", "bridge"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "bridge_minor case",
+      "paint": {
+        "line-color": "#dedede",
+        "line-width": {
+          "base": 1.6,
+          "stops": [
+            [12, 0.5],
+            [20, 10]
+          ]
+        },
+        "line-gap-width": {
+          "base": 1.55,
+          "stops": [
+            [4, 0.25],
+            [20, 30]
+          ]
+        }
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "butt",
+        "line-join": "miter"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway",
+            "primary",
+            "secondary",
+            "tertiary",
+            "trunk"
+          ],
+          ["==", "structure", "bridge"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "bridge_major case",
+      "paint": {
+        "line-color": "#dedede",
+        "line-width": {
+          "base": 1.6,
+          "stops": [
+            [12, 0.5],
+            [20, 10]
+          ]
+        },
+        "line-gap-width": {
+          "base": 1.55,
+          "stops": [
+            [4, 0.25],
+            [20, 30]
+          ]
+        }
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway_link",
+            "street",
+            "street_limited",
+            "service",
+            "track",
+            "pedestrian",
+            "path",
+            "link"
+          ],
+          ["==", "structure", "bridge"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "bridge_minor",
+      "paint": {
+        "line-color": "#efefef",
+        "line-width": {
+          "base": 1.55,
+          "stops": [
+            [4, 0.25],
+            [20, 30]
+          ]
+        }
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        [
+          "all",
+          [
+            "in",
+            "class",
+            "motorway",
+            "primary",
+            "secondary",
+            "tertiary",
+            "trunk"
+          ],
+          ["==", "structure", "bridge"]
+        ]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "bridge_major",
+      "paint": {
+        "line-color": "#fff",
+        "line-width": {
+          "base": 1.4,
+          "stops": [
+            [6, 0.5],
+            [20, 30]
+          ]
+        }
+      },
+      "source-layer": "road"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "line-cap": "round",
+        "line-join": "round"
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        ["all", ["<=", "admin_level", 2], ["==", "maritime", 0]]
+      ],
+      "type": "line",
+      "source": "mapbox",
+      "id": "admin_country",
+      "paint": {
+        "line-color": "#8b8a8a",
+        "line-width": {
+          "base": 1.3,
+          "stops": [
+            [3, 0.5],
+            [22, 15]
+          ]
+        }
+      },
+      "source-layer": "admin"
+    },
+    {
+      "interactive": true,
+      "minzoom": 5,
+      "layout": {
+        "icon-image": "{maki}-11",
+        "text-offset": [0, 0.5],
+        "text-field": "{name_en}",
+        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+        "text-max-width": 8,
+        "text-anchor": "top",
+        "text-size": 11,
+        "icon-size": 1
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "Point"],
+        ["all", ["==", "scalerank", 1], ["==", "localrank", 1]]
+      ],
+      "type": "symbol",
+      "source": "mapbox",
+      "id": "poi_label",
+      "paint": {
+        "text-color": "#666",
+        "text-halo-width": 1,
+        "text-halo-color": "rgba(255,255,255,0.75)",
+        "text-halo-blur": 1
+      },
+      "source-layer": "poi_label"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "symbol-placement": "line",
+        "text-field": "{name_en}",
+        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+        "text-transform": "uppercase",
+        "text-letter-spacing": 0.1,
+        "text-size": {
+          "base": 1.4,
+          "stops": [
+            [10, 8],
+            [20, 14]
+          ]
+        }
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "LineString"],
+        ["in", "class", "motorway", "primary", "secondary", "tertiary", "trunk"]
+      ],
+      "type": "symbol",
+      "source": "mapbox",
+      "id": "road_major_label",
+      "paint": {
+        "text-color": "#666",
+        "text-halo-color": "rgba(255,255,255,0.75)",
+        "text-halo-width": 2
+      },
+      "source-layer": "road_label"
+    },
+    {
+      "interactive": true,
+      "minzoom": 8,
+      "layout": {
+        "text-field": "{name_en}",
+        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
+        "text-max-width": 6,
+        "text-size": {
+          "stops": [
+            [6, 12],
+            [12, 16]
+          ]
+        }
+      },
+      "filter": [
+        "all",
+        ["==", "$type", "Point"],
+        [
+          "in",
+          "type",
+          "town",
+          "village",
+          "hamlet",
+          "suburb",
+          "neighbourhood",
+          "island"
+        ]
+      ],
+      "type": "symbol",
+      "source": "mapbox",
+      "id": "place_label_other",
+      "paint": {
+        "text-color": "#666",
+        "text-halo-color": "rgba(255,255,255,0.75)",
+        "text-halo-width": 1,
+        "text-halo-blur": 1
+      },
+      "source-layer": "place_label"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "text-field": "{name_en}",
+        "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
+        "text-max-width": 10,
+        "text-size": {
+          "stops": [
+            [3, 12],
+            [8, 16]
+          ]
+        }
+      },
+      "maxzoom": 16,
+      "filter": ["all", ["==", "$type", "Point"], ["==", "type", "city"]],
+      "type": "symbol",
+      "source": "mapbox",
+      "id": "place_label_city",
+      "paint": {
+        "text-color": "#666",
+        "text-halo-color": "rgba(255,255,255,0.75)",
+        "text-halo-width": 1,
+        "text-halo-blur": 1
+      },
+      "source-layer": "place_label"
+    },
+    {
+      "interactive": true,
+      "layout": {
+        "text-field": "{name_en}",
+        "text-font": ["Open Sans Regular", "Arial Unicode MS Regular"],
+        "text-max-width": 10,
+        "text-size": {
+          "stops": [
+            [3, 14],
+            [8, 22]
+          ]
+        }
+      },
+      "maxzoom": 12,
+      "filter": ["==", "$type", "Point"],
+      "type": "symbol",
+      "source": "mapbox",
+      "id": "country_label",
+      "paint": {
+        "text-color": "#666",
+        "text-halo-color": "rgba(255,255,255,0.75)",
+        "text-halo-width": 1,
+        "text-halo-blur": 1
+      },
+      "source-layer": "country_label"
+    }
+  ]
+}
--- a/frontend/src/_mock/map/stations.ts
+++ b/frontend/src/_mock/map/stations.ts
@@ -0,0 +1,91 @@
+export const stations = [
+  { name: 'Lafayette (LAFY)', coordinates: [-122.123801, 37.893394] },
+  {
+    name: '12th St. Oakland City Center (12TH)',
+    coordinates: [-122.271604, 37.803664]
+  },
+  {
+    name: '16th St. Mission (16TH)',
+    coordinates: [-122.419694, 37.765062]
+  },
+  { name: '19th St. Oakland (19TH)', coordinates: [-122.269029, 37.80787] },
+  {
+    name: '24th St. Mission (24TH)',
+    coordinates: [-122.418466, 37.752254]
+  },
+  { name: 'Ashby (ASHB)', coordinates: [-122.26978, 37.853024] },
+  { name: 'Balboa Park (BALB)', coordinates: [-122.447414, 37.721981] },
+  { name: 'Bay Fair (BAYF)', coordinates: [-122.126871, 37.697185] },
+  { name: 'Castro Valley (CAST)', coordinates: [-122.075567, 37.690754] },
+  {
+    name: 'Civic Center/UN Plaza (CIVC)',
+    coordinates: [-122.413756, 37.779528]
+  },
+  { name: 'Colma (COLM)', coordinates: [-122.466233, 37.684638] },
+  {
+    name: 'Coliseum/Oakland Airport (COLS)',
+    coordinates: [-122.197273, 37.754006]
+  },
+  { name: 'Concord (CONC)', coordinates: [-122.029095, 37.973737] },
+  { name: 'Daly City (DALY)', coordinates: [-122.469081, 37.706121] },
+  {
+    name: 'Downtown Berkeley (DBRK)',
+    coordinates: [-122.268045, 37.869867]
+  },
+  {
+    name: 'El Cerrito del Norte (DELN)',
+    coordinates: [-122.317269, 37.925655]
+  },
+  {
+    name: 'Dublin/Pleasanton (DUBL)',
+    coordinates: [-121.900367, 37.701695]
+  },
+  { name: 'Embarcadero (EMBR)', coordinates: [-122.396742, 37.792976] },
+  { name: 'Fremont (FRMT)', coordinates: [-121.9764, 37.557355] },
+  { name: 'Fruitvale (FTVL)', coordinates: [-122.224274, 37.774963] },
+  { name: 'Glen Park (GLEN)', coordinates: [-122.434092, 37.732921] },
+  { name: 'Hayward (HAYW)', coordinates: [-122.087967, 37.670399] },
+  { name: 'Lake Merritt (LAKE)', coordinates: [-122.265609, 37.797484] },
+  { name: 'MacArthur (MCAR)', coordinates: [-122.267227, 37.828415] },
+  { name: 'Millbrae (MLBR)', coordinates: [-122.38666, 37.599787] },
+  { name: 'Montgomery St. (MONT)', coordinates: [-122.401407, 37.789256] },
+  { name: 'North Berkeley (NBRK)', coordinates: [-122.283451, 37.87404] },
+  {
+    name: 'North Concord/Martinez (NCON)',
+    coordinates: [-122.024597, 38.003275]
+  },
+  { name: 'Orinda (ORIN)', coordinates: [-122.183791, 37.878361] },
+  {
+    name: 'Pleasant Hill/Contra Costa Centre (PHIL)',
+    coordinates: [-122.056013, 37.928403]
+  },
+  {
+    name: 'Pittsburg/Bay Point (PITT)',
+    coordinates: [-121.945154, 38.018914]
+  },
+  {
+    name: 'El Cerrito Plaza (PLZA)',
+    coordinates: [-122.299272, 37.903059]
+  },
+  { name: 'Powell St. (POWL)', coordinates: [-122.406857, 37.784991] },
+  { name: 'Richmond (RICH)', coordinates: [-122.353165, 37.936887] },
+  { name: 'Rockridge (ROCK)', coordinates: [-122.251793, 37.844601] },
+  { name: 'San Leandro (SANL)', coordinates: [-122.161311, 37.722619] },
+  { name: 'San Bruno (SBRN)', coordinates: [-122.416038, 37.637753] },
+  {
+    name: "San Francisco Int'l Airport (SFIA)",
+    coordinates: [-122.392612, 37.616035]
+  },
+  { name: 'South Hayward (SHAY)', coordinates: [-122.057551, 37.6348] },
+  {
+    name: 'South San Francisco (SSAN)',
+    coordinates: [-122.444116, 37.664174]
+  },
+  { name: 'Union City (UCTY)', coordinates: [-122.017867, 37.591208] },
+  { name: 'Walnut Creek (WCRK)', coordinates: [-122.067423, 37.905628] },
+  {
+    name: 'West Dublin/Pleasanton (WDUB)',
+    coordinates: [-121.928099, 37.699759]
+  },
+  { name: 'West Oakland (WOAK)', coordinates: [-122.294582, 37.804675] }
+];
--- a/frontend/src/_mock/name.ts
+++ b/frontend/src/_mock/name.ts
@@ -0,0 +1,130 @@
+// ----------------------------------------------------------------------
+
+export const fullName = [
+  'Jayvion Simon',
+  'Lucian Obrien',
+  'Deja Brady',
+  'Harrison Stein',
+  'Reece Chung',
+  'Lainey Davidson',
+  'Cristopher Cardenas',
+  'Melanie Noble',
+  'Chase Day',
+  'Shawn Manning',
+  'Soren Durham',
+  'Cortez Herring',
+  'Brycen Jimenez',
+  'Giana Brandt',
+  'Aspen Schmitt',
+  'Colten Aguilar',
+  'Angelique Morse',
+  'Selina Boyer',
+  'Lawson Bass',
+  'Ariana Lang',
+  'Amiah Pruitt',
+  'Harold Mcgrath',
+  'Esperanza Mcintyre',
+  'Mireya Conner',
+  'Jamie Kline',
+  'Laney Vazquez',
+  'Tiffany May',
+  'Dexter Shepherd',
+  'Jaqueline Spencer',
+  'Londyn Jarvis',
+  'Yesenia Butler',
+  'Jayvon Hull',
+  'Izayah Pope',
+  'Ayana Hunter',
+  'Isabell Bender',
+  'Desiree Schmidt',
+  'Aidan Stout',
+  'Jace Bush',
+  'Janiya Williamson',
+  'Hudson Alvarez'
+];
+
+export const firstName = [
+  'Mossie',
+  'David',
+  'Ebba',
+  'Chester',
+  'Eula',
+  'Jaren',
+  'Boyd',
+  'Brady',
+  'Aida',
+  'Anastasia',
+  'Gregoria',
+  'Julianne',
+  'Ila',
+  'Elyssa',
+  'Lucio',
+  'Lewis',
+  'Jacinthe',
+  'Molly',
+  'Brown',
+  'Fritz',
+  'Keon',
+  'Ella',
+  'Ken',
+  'Whitney',
+  'Monte',
+  'Rose',
+  'Shana',
+  'Devon',
+  'Jaleel',
+  'Laury',
+  'Brooks',
+  'Bruce',
+  'Avery',
+  'Esperanza',
+  'Helene',
+  'Heloise',
+  'Elinor',
+  'Adeline',
+  'Haley',
+  'Anabelle'
+];
+
+export const lastName = [
+  'Carroll',
+  'Simonis',
+  'Yost',
+  'Hand',
+  'Emmerich',
+  'Wilderman',
+  'Howell',
+  'Sporer',
+  'Boehm',
+  'Morar',
+  'Koch',
+  'Reynolds',
+  'Padberg',
+  'Watsica',
+  'Upton',
+  'Yundt',
+  'Pfeffer',
+  'Parker',
+  'Zulauf',
+  'Treutel',
+  'McDermott',
+  'McDermott',
+  'Cruickshank',
+  'Parisian',
+  'Auer',
+  'Turner',
+  'Dooley',
+  'Wiegand',
+  'Abbott',
+  'Wisoky',
+  'Fahey',
+  'Satterfield',
+  'Bahringer',
+  'Schulist',
+  'Durgan',
+  'Carroll',
+  'Jones',
+  'Leffler',
+  'Gutkowski',
+  'Homenick'
+];
--- a/frontend/src/_mock/number.ts
+++ b/frontend/src/_mock/number.ts
@@ -0,0 +1,23 @@
+// ----------------------------------------------------------------------
+
+export const price = [
+  16.19, 35.71, 34.3, 93.1, 55.47, 89.09, 44.39, 26.92, 45.35, 26.96, 78.22, 35.54, 90.69, 63.61,
+  67.55, 94.75, 75.78, 39.6, 52.84, 72.8, 83.08, 85.02, 69.22, 60.96, 84.7, 16.68, 78.83, 58.07,
+  65.8, 55.69, 87.55, 44.74, 27.42, 84, 76.17, 43.83, 76.39, 17.42, 42.3, 12.45
+];
+
+export const rating = [
+  2.5, 2, 4.9, 2, 4, 5, 4.9, 5, 3.7, 2.5, 2, 4.9, 4.8, 4, 2, 3.7, 1.4, 2.4, 1.8, 5, 2.9, 3.9, 3.9,
+  1.8, 5, 2.6, 3.1, 3.9, 1.2, 3.2, 4.1, 5, 4.5, 4.1, 2.3, 2.4, 5, 3.1, 4.9, 1.7
+];
+
+export const age = [
+  52, 43, 56, 25, 22, 53, 38, 50, 55, 37, 16, 27, 55, 41, 52, 32, 34, 52, 31, 53, 23, 48, 43, 41,
+  19, 21, 17, 29, 32, 54, 38, 34, 49, 33, 55, 50, 24, 27, 23, 23
+];
+
+export const percent = [
+  8.62, 86.36, 73.99, 79, 63.41, 58.79, 12.32, 88.44, 45.06, 91.64, 88.41, 73.08, 39.14, 89.34,
+  43.37, 34.45, 24.04, 80.96, 72.91, 47.59, 2.46, 3.33, 99.31, 47.6, 34.09, 50.61, 66.13, 46.69,
+  92.43, 31.41, 90.85, 36.32, 38.84, 25.6, 87.61, 1.31, 89.32, 41.23, 85.9, 62.63
+];
--- a/frontend/src/_mock/phoneNumber.ts
+++ b/frontend/src/_mock/phoneNumber.ts
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+export const phoneNumber = [
+  '365-374-4961',
+  '904-966-2836',
+  '399-757-9909',
+  '692-767-2903',
+  '990-588-5716',
+  '955-439-2578',
+  '226-924-4058',
+  '552-917-1454',
+  '285-840-9338',
+  '306-269-2446',
+  '883-373-6253',
+  '476-509-8866',
+  '201-465-1954',
+  '538-295-9408',
+  '531-492-6028',
+  '981-699-7588',
+  '500-268-4826',
+  '205-952-3828',
+  '222-255-5190',
+  '408-439-8033',
+  '272-940-8266',
+  '812-685-8057',
+  '353-801-5212',
+  '606-285-8928',
+  '202-767-8621',
+  '222-830-0731',
+  '964-940-3166',
+  '262-702-2396',
+  '886-261-9789',
+  '352-390-5069',
+  '343-907-8334',
+  '575-347-2399',
+  '749-228-5604',
+  '774-452-2071',
+  '607-841-0447',
+  '395-619-2157',
+  '233-834-0373',
+  '586-880-2602',
+  '746-772-0722',
+  '638-615-3365,'
+];
--- a/frontend/src/_mock/role.ts
+++ b/frontend/src/_mock/role.ts
@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+export const role = [
+  'UX Designer',
+  'Full Stack Designer',
+  'Backend Developer',
+  'UX Designer',
+  'UX Designer',
+  'Project Manager',
+  'Leader',
+  'Backend Developer',
+  'Project Manager',
+  'UI Designer',
+  'UI/UX Designer',
+  'UI/UX Designer',
+  'UI Designer',
+  'Backend Developer',
+  'Backend Developer',
+  'Front End Developer',
+  'Backend Developer',
+  'Full Stack Designer',
+  'Full Stack Developer',
+  'Backend Developer',
+  'UX Designer',
+  'UI Designer',
+  'Project Manager',
+  'UI/UX Designer',
+  'UI Designer',
+  'Project Manager',
+  'Full Stack Developer',
+  'Hr Manager',
+  'Hr Manager',
+  'UI/UX Designer',
+  'Project Manager',
+  'Full Stack Designer',
+  'UI Designer',
+  'Leader',
+  'Front End Developer',
+  'UI/UX Designer',
+  'Project Manager',
+  'UI/UX Designer',
+  'UI Designer',
+  'Full Stack Designer'
+];
--- a/frontend/src/_mock/text.ts
+++ b/frontend/src/_mock/text.ts
@@ -0,0 +1,130 @@
+// ----------------------------------------------------------------------
+
+export const title = [
+  'Apply These 7 Secret Techniques To Improve Event',
+  'Believing These 7 Myths About Event Keeps You From Growing',
+  "Don't Waste Time! 7 Facts Until You Reach Your Event",
+  'How 7 Things Will Change The Way You Approach Event',
+  "Event Awards: 7 Reasons Why They Don't Work & What You Can Do About It",
+  "Event Doesn't Have To Be Hard. Read These 7 Tips",
+  'Event Is Your Worst Enemy. 7 Ways To Defeat It',
+  'Event On A Budget: 7 Tips From The Great Depression',
+  'Knowing These 7 Secrets Will Make Your Event Look Amazing',
+  'Master The Art Of Event With These 7 Tips',
+  'My Life, My Job, My Career: How 7 Simple Event Helped Me Succeed',
+  'Take Advantage Of Event - Read These 7 Tips',
+  'The Next 7 Things You Should Do For Event Success',
+  'The Time Is Running Out! Think About These 7 Ways To Change Your Event',
+  'The 7 Best Things About Event',
+  'The 7 Biggest Event Mistakes You Can Easily Avoid',
+  'The 7 Most Successful Event Companies In Region',
+  'Think Your Event Is Safe? 7 Ways You Can Lose It Today',
+  "Thinking About Event? 7 Reasons Why It's Time To Stop!",
+  '7 Places To Get Deals On Event',
+  'Best Event Android Apps',
+  'Best Event Tips You Will Read This Year',
+  'Best 30 Tips For Event',
+  'Should Fixing Event Take 30 Steps?',
+  'The A - Z Of Event',
+  'The Next 30 Things To Immediately Do About Event',
+  'The Ultimate Guide To Event',
+  'Top 30 Funny Event Quotes',
+  'Top 30 Quotes On Event',
+  'Top 7 Lessons About Event To Learn Before You Hit 30',
+  'Top 7 Ways To Buy A Used Event',
+  '30 Best Ways To Sell Event',
+  '30 Ideas For Event',
+  '30 Lessons About Event You Need To Learn Before You Hit 40',
+  '30 Methods Of Event Domination',
+  '30 Things To Do Immediately About Event',
+  '30 Tips To Grow Your Event',
+  '30 Ways To Avoid Event Burnout',
+  '30 Ways To Improve Event',
+  'How To Make More Event By Doing Less'
+];
+
+export const sentence = [
+  'Assumenda nam repudiandae rerum fugiat vel maxime.',
+  'Quis veniam aut saepe aliquid nulla.',
+  'Reprehenderit ut voluptas sapiente ratione nostrum est.',
+  'Error ut sit vel molestias velit.',
+  'Quo quia sit nihil nemo doloremque et.',
+  'Autem doloribus harum vero laborum.',
+  'Tempora officiis consequuntur architecto nostrum autem nam adipisci.',
+  'Voluptas sunt magni adipisci praesentium saepe.',
+  'Ea architecto quas voluptates voluptas earum illo est vel rem.',
+  'Ipsum expedita reiciendis ut.',
+  'Architecto vel voluptatibus alias a aut non maxime ipsa voluptates.',
+  'Reiciendis enim officiis cupiditate eaque distinctio laudantium modi similique consequatur.',
+  'Ab autem consequatur itaque mollitia ipsum cupiditate error repudiandae nobis.',
+  'Distinctio architecto debitis eligendi consequatur unde id modi accusantium possimus.',
+  'At ut voluptate accusantium.',
+  'Repudiandae ut qui veritatis sint.',
+  'Laboriosam blanditiis quo sed et qui esse ipsam necessitatibus sed.',
+  'Et molestiae et excepturi maxime omnis.',
+  'Sint dolorem quam eum magnam.',
+  'Rerum ut iusto iste quam voluptatem necessitatibus.',
+  'Et quam in.',
+  'Fugit esse tenetur.',
+  'Dolorem dolor porro nihil cupiditate molestiae deserunt ut.',
+  'Omnis beatae eos eius aut molestias laboriosam laborum et optio.',
+  'Ut veniam quam assumenda ut voluptatibus ducimus accusamus.',
+  'Quos dignissimos neque omnis reiciendis voluptatem ducimus.',
+  'Laboriosam quia ut esse.',
+  'Sit reiciendis nihil qui molestias et.',
+  'Facilis cupiditate minima ratione quaerat omnis velit non ex totam.',
+  'Provident sint esse voluptatem voluptas eveniet est.',
+  'Molestias consequatur ea facilis.',
+  'Tempora voluptatibus autem ut ut porro quae delectus dolorum.',
+  'Et consequatur amet nemo ducimus voluptatem placeat voluptas.',
+  'Modi iste atque hic voluptas sit quis deleniti quas consequatur.',
+  'Omnis est aliquid odio mollitia aliquid ex.',
+  'Officia possimus veniam quod molestias.',
+  'Mollitia inventore recusandae provident aut.',
+  'Numquam ullam beatae possimus.',
+  'Fuga velit cupiditate ex culpa odio aut ut.',
+  'Vero corrupti nam voluptatum excepturi est et.'
+];
+
+export const description = [
+  'Occaecati est et illo quibusdam accusamus qui. Incidunt aut et molestiae ut facere aut. Est quidem iusto praesentium excepturi harum nihil tenetur facilis. Ut omnis voluptates nihil accusantium doloribus eaque debitis.',
+  'Atque eaque ducimus minima distinctio velit. Laborum et veniam officiis. Delectus ex saepe hic id laboriosam officia. Odit nostrum qui illum saepe debitis ullam. Laudantium beatae modi fugit ut. Dolores consequatur beatae nihil voluptates rem maiores.',
+  'Rerum eius velit dolores. Explicabo ad nemo quibusdam. Voluptatem eum suscipit et ipsum et consequatur aperiam quia. Rerum nulla sequi recusandae illum velit quia quas. Et error laborum maiores cupiditate occaecati.',
+  'Et non omnis qui. Qui sunt deserunt dolorem aut velit cumque adipisci aut enim. Nihil quis quisquam nesciunt dicta nobis ab aperiam dolorem repellat. Voluptates non blanditiis. Error et tenetur iste soluta cupiditate ratione perspiciatis et. Quibusdam aliquid nam sunt et quisquam non esse.',
+  'Nihil ea sunt facilis praesentium atque. Ab animi alias sequi molestias aut velit ea. Sed possimus eos. Et est aliquid est voluptatem.',
+  'Non rerum modi. Accusamus voluptatem odit nihil in. Quidem et iusto numquam veniam culpa aperiam odio aut enim. Quae vel dolores. Pariatur est culpa veritatis aut dolorem.',
+  'Est enim et sit non impedit aperiam cumque animi. Aut eius impedit saepe blanditiis. Totam molestias magnam minima fugiat.',
+  'Unde a inventore et. Sed esse ut. Atque ducimus quibusdam fuga quas id qui fuga.',
+  'Eaque natus adipisci soluta nostrum dolorem. Nesciunt ipsum molestias ut aliquid natus ut omnis qui fugiat. Dolor et rem. Ut neque voluptatem blanditiis quasi ullam deleniti.',
+  'Nam et error exercitationem qui voluptate optio. Officia omnis qui accusantium ipsam qui. Quia sequi nulla perspiciatis optio vero omnis maxime omnis ipsum. Perspiciatis consequuntur asperiores veniam dolores.',
+  'Perspiciatis nulla ut ut ut voluptates totam consectetur eligendi qui. Optio ut cum. Dolorum sapiente qui laborum. Impedit temporibus totam delectus nihil. Voluptatem corrupti rem.',
+  'Distinctio omnis similique omnis eos. Repellat cumque rerum nisi. Reiciendis soluta non ut veniam temporibus. Accusantium et dolorem voluptas harum. Nemo eius voluptate dicta et hic nemo. Dolorem assumenda et beatae molestias sit quo mollitia quis consequatur.',
+  'Sed ut mollitia tempore ipsam et illum doloribus ut. Occaecati ratione veritatis explicabo. Omnis nam omnis sunt placeat tempore accusantium placeat distinctio velit.',
+  'Eum illo dicta et perspiciatis ut blanditiis eos sequi. Ea veritatis aut et voluptas aut. Laborum eos quia tempore a culpa.',
+  'Aut quos quae dolores repudiandae similique perferendis perferendis earum laudantium. Facere placeat natus nobis. Eius vitae ullam dolorem.',
+  'Vero dolorem et voluptatem fugit tempore a quam iure. Fuga consequatur corrupti sunt asperiores vitae. Libero totam repellendus animi debitis illum et sunt officia.',
+  'Cupiditate illum officiis id molestiae. Numquam non molestiae aliquid et natus sed hic. Alias quia explicabo sed corrupti sint. Natus in et odio qui unde facilis quia. Est sit eius laboriosam aliquid non aperiam quia quo corporis.',
+  'Et a ab. Optio aspernatur minus tempora amet vitae consectetur inventore cumque. Sed et omnis. Aspernatur a magnam.',
+  'Ipsum omnis et. Quia ea et autem tempore consequuntur veniam dolorem officiis. Ipsa dicta et ut quidem quia doloremque. Sequi vitae doloremque temporibus. Deserunt incidunt id aperiam itaque natus. Earum sit eaque quas incidunt nihil.',
+  'Quae consequatur reiciendis. Consequatur non optio. Eaque id placeat. Commodi quo officia aut repudiandae reiciendis tempore voluptatem et. Ut accusamus qui itaque maxime aliquam. Fugit ut animi molestiae porro maiores.',
+  'Modi hic asperiores ab cumque quam est aut. Voluptas atque quos molestias. Ut excepturi distinctio ipsam aspernatur sit.',
+  'Sunt totam facilis. Quam commodi voluptatem veniam. Tempora deleniti itaque fugit nihil voluptas.',
+  'Ipsam aliquam velit nobis repellendus officiis aut deserunt id et. Nihil sunt aut dolores aut. Dolores est ipsa quia et laborum quidem laborum accusamus id. Facilis odit quod hic laudantium saepe omnis nisi in sint. Sed cupiditate possimus id.',
+  'Magnam non eveniet optio optio ut aliquid atque. Velit libero aspernatur quis laborum consequatur laudantium. Tempora facere optio fugit accusantium ut. Omnis aspernatur reprehenderit autem esse ut ut enim voluptatibus.',
+  'Ipsam vel molestiae dolorem iure molestiae. Ut qui cumque et sint recusandae modi nulla. Vel rerum tempore similique autem enim voluptatem dolores facilis. Qui delectus recusandae magnam.',
+  'Fugiat molestias distinctio enim nobis rerum. Perspiciatis adipisci corrupti quas sed ab sunt nostrum. Quibusdam reiciendis ratione dolores vitae fuga exercitationem asperiores maxime voluptate. Minus et ea delectus quia ullam est. Exercitationem iusto libero. Et aut dolore reprehenderit et saepe sint modi.',
+  'Ex neque aut voluptatem delectus eum deserunt voluptate. Ut quam placeat et. Et impedit tenetur illum aut consequatur quia. Autem sed dolorem non ad aspernatur illum dignissimos beatae. Earum iusto aut rem aut. Facere ea alias enim quo assumenda.',
+  'Quis sint recusandae quasi corporis et fugit. Omnis voluptatum id laborum qui. Assumenda animi quia eum et facere fuga. Ab et sint molestiae et voluptatum nostrum est.',
+  'Est quis numquam recusandae alias porro magni. Incidunt quis aut necessitatibus nam ea dolores cumque. Quis dolorum veniam.',
+  'Corporis magnam non. Ut voluptates pariatur et. Quis tenetur mollitia et necessitatibus et. Perferendis error velit aut.',
+  'Eos ex accusantium possimus aut quae. Omnis dolorum velit. Sapiente quia dolore ea assumenda voluptatem exercitationem sed consequuntur. Eveniet et molestiae ipsa harum quidem soluta quo. Consequatur ad sunt sed numquam odio eveniet.',
+  'Ut sit et provident vero vero voluptatem distinctio. Cumque sit error qui et. Ea architecto ipsum occaecati sed alias eum vel. Officia tempore architecto autem vel veniam. Minus modi commodi ad consequatur similique ut. Tenetur tempore eum.',
+  'Quibusdam in cum voluptatem consequatur rerum. Qui eum assumenda nemo maiores veniam quae. Ipsa occaecati et provident. Quas similique deserunt doloremque placeat natus.',
+  'Voluptates et earum fugiat molestiae distinctio. Aut sapiente quas dolores et. Quo et dolor velit et iure consequatur ut in amet. Repellendus aut sequi animi inventore nesciunt itaque.',
+  'Sit a tempore dicta provident molestiae. Necessitatibus blanditiis voluptatum. Magnam esse animi in qui veritatis quibusdam recusandae adipisci possimus. Tenetur dolores ipsum.',
+  'Neque id sunt amet modi expedita aut libero aut in. Minima dolore praesentium quia quas et pariatur numquam. In ut sequi nemo velit iste minima aliquam. Neque ut tenetur consequuntur sint nemo unde. Magni nesciunt omnis illo optio. Molestias eum exercitationem aut harum odit.',
+  'Modi quia laboriosam qui ad aut. Fugit quisquam earum distinctio officia est fugit quos. Iure repellat distinctio veritatis voluptate amet ratione repudiandae.',
+  'Impedit perferendis vel quis ratione. Id aut id officia. Illum fuga saepe provident voluptate eligendi provident. Et nostrum maxime magni. Nobis cumque id magni in iste earum.',
+  'Dolor numquam maiores praesentium dolorem nihil minus praesentium rem dolorem. Est rerum placeat. Numquam sed magni aliquam laborum enim facere ducimus.',
+  'In sint enim nam et itaque et qui. Molestiae a iusto quidem quia temporibus id quia eaque eius. Quis quia consectetur saepe vero et molestias. Rem minima accusamus vitae adipisci molestiae unde voluptate consequatur molestiae. Rerum exercitationem quisquam vitae.'
+];
--- a/frontend/src/assets/icon_plan_free.tsx
+++ b/frontend/src/assets/icon_plan_free.tsx
@@ -0,0 +1,51 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function PlanFreeIcon({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width="100%"
+        height="100%"
+        viewBox="0 0 80 80"
+      >
+        <defs>
+          <path id="path-1" d="M0 0H80V80H0z" />
+        </defs>
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+          <mask id="mask-2" fill="#fff">
+            <use xlinkHref="#path-1" />
+          </mask>
+          <g mask="url(#mask-2)">
+            <g transform="translate(9.167 20)">
+              <path fill={PRIMARY_DARK} d="M53.333 17.5H61.666V25H53.333z" />
+              <path
+                fill={PRIMARY_DARKER}
+                d="M.935 20.489l25.028-12.46a5.044 5.044 0 014.52.012L60.74 23.307a1.69 1.69 0 01.015 3.007l-25.338 13.12a5.044 5.044 0 01-4.694-.028L.893 23.49a1.69 1.69 0 01.042-3.001z"
+              />
+              <path
+                fill={PRIMARY_DARK}
+                d="M32.5 34.268v4.193a1.134 1.134 0 01-1.566 1.049l-.1-.047v-7.551a2.498 2.498 0 011.666 2.356zM.833 15.962l30 15.95v7.55l-30-15.952v-.02l-.115-.066A1.571 1.571 0 010 22.104v-7.937l.833 1.795z"
+              />
+              <path
+                fill={PRIMARY_MAIN}
+                fillRule="nonzero"
+                d="M.935 12.989L25.963.529a5.044 5.044 0 014.52.012L60.74 15.807a1.69 1.69 0 01.015 3.007l-25.338 13.12a5.044 5.044 0 01-4.694-.028L.893 15.99a1.69 1.69 0 01.042-3.001z"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/icon_plan_premium.tsx
+++ b/frontend/src/assets/icon_plan_premium.tsx
@@ -0,0 +1,118 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function PlanPremiumIcon({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width="100%"
+        height="100%"
+        viewBox="0 0 80 80"
+      >
+        <defs>
+          <path id="path-1" d="M0 0H80V80H0z" />
+          <path id="path-3" d="M0 0H80V79.729H0z" />
+          <path id="path-5" d="M0 0H80V79.729H0z" />
+          <path id="path-7" d="M0 0H80V79.729H0z" />
+        </defs>
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+          <mask id="mask-2" fill="#fff">
+            <use xlinkHref="#path-1" />
+          </mask>
+          <g mask="url(#mask-2)">
+            <g transform="translate(0 -9)">
+              <g transform="translate(0 18.271)">
+                <mask id="mask-4" fill="#fff">
+                  <use xlinkHref="#path-3" />
+                </mask>
+                <g mask="url(#mask-4)">
+                  <g transform="translate(9.167 19.932)">
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M53.333 17.441H61.666V24.915999999999997H53.333z"
+                    />
+                    <path
+                      fill={PRIMARY_DARKER}
+                      d="M.935 20.42L25.963 8.001a5.059 5.059 0 014.52.012L60.74 23.228a1.68 1.68 0 01.015 2.996L35.417 39.301a5.059 5.059 0 01-4.694-.029L.893 23.41a1.68 1.68 0 01.042-2.99z"
+                    />
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M32.5 34.151v4.18a1.132 1.132 0 01-1.566 1.045l-.1-.047v-7.525A2.49 2.49 0 0132.5 34.15zM.833 15.908l30 15.896v7.525l-30-15.899v-.019l-.115-.066A1.565 1.565 0 010 22.029v-7.91l.833 1.789z"
+                    />
+                    <path
+                      fill={PRIMARY_MAIN}
+                      fillRule="nonzero"
+                      d="M.935 12.945L25.963.527a5.059 5.059 0 014.52.012L60.74 15.753a1.68 1.68 0 01.015 2.997L35.417 31.827a5.059 5.059 0 01-4.694-.03L.893 15.937a1.68 1.68 0 01.042-2.991z"
+                    />
+                  </g>
+                </g>
+              </g>
+              <g transform="translate(0 9.136)">
+                <mask id="mask-6" fill="#fff">
+                  <use xlinkHref="#path-5" />
+                </mask>
+                <g mask="url(#mask-6)">
+                  <g transform="translate(9.167 19.932)">
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M53.333 17.441H61.666V24.915999999999997H53.333z"
+                    />
+                    <path
+                      fill={PRIMARY_DARKER}
+                      d="M.935 20.42L25.963 8.001a5.059 5.059 0 014.52.012L60.74 23.228a1.68 1.68 0 01.015 2.996L35.417 39.301a5.059 5.059 0 01-4.694-.029L.893 23.41a1.68 1.68 0 01.042-2.99z"
+                    />
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M32.5 34.151v4.18a1.132 1.132 0 01-1.566 1.045l-.1-.047v-7.525A2.49 2.49 0 0132.5 34.15zM.833 15.908l30 15.896v7.525l-30-15.899v-.019l-.115-.066A1.565 1.565 0 010 22.029v-7.91l.833 1.789z"
+                    />
+                    <path
+                      fill={PRIMARY_MAIN}
+                      fillRule="nonzero"
+                      d="M.935 12.945L25.963.527a5.059 5.059 0 014.52.012L60.74 15.753a1.68 1.68 0 01.015 2.997L35.417 31.827a5.059 5.059 0 01-4.694-.03L.893 15.937a1.68 1.68 0 01.042-2.991z"
+                    />
+                  </g>
+                </g>
+              </g>
+              <g>
+                <mask id="mask-8" fill="#fff">
+                  <use xlinkHref="#path-7" />
+                </mask>
+                <g mask="url(#mask-8)">
+                  <g transform="translate(9.167 19.932)">
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M53.333 17.441H61.666V24.915999999999997H53.333z"
+                    />
+                    <path
+                      fill={PRIMARY_DARKER}
+                      d="M.935 20.42L25.963 8.001a5.059 5.059 0 014.52.012L60.74 23.228a1.68 1.68 0 01.015 2.996L35.417 39.301a5.059 5.059 0 01-4.694-.029L.893 23.41a1.68 1.68 0 01.042-2.99z"
+                    />
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M32.5 34.151v4.18a1.132 1.132 0 01-1.566 1.045l-.1-.047v-7.525A2.49 2.49 0 0132.5 34.15zM.833 15.908l30 15.896v7.525l-30-15.899v-.019l-.115-.066A1.565 1.565 0 010 22.029v-7.91l.833 1.789z"
+                    />
+                    <path
+                      fill={PRIMARY_MAIN}
+                      fillRule="nonzero"
+                      d="M.935 12.945L25.963.527a5.059 5.059 0 014.52.012L60.74 15.753a1.68 1.68 0 01.015 2.997L35.417 31.827a5.059 5.059 0 01-4.694-.03L.893 15.937a1.68 1.68 0 01.042-2.991z"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/icon_plan_starter.tsx
+++ b/frontend/src/assets/icon_plan_starter.tsx
@@ -0,0 +1,85 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function PlanStarterIcon({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+      >
+        <defs>
+          <path id="path-1" d="M0 0H80V80H0z" />
+          <path id="path-3" d="M0 0H80V79.85H0z" />
+          <path id="path-5" d="M0 0H80V79.85H0z" />
+        </defs>
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+          <mask id="mask-2" fill="#fff">
+            <use xlinkHref="#path-1" />
+          </mask>
+          <g mask="url(#mask-2)">
+            <g transform="translate(0 -5)">
+              <g transform="translate(0 9.15)">
+                <mask id="mask-4" fill="#fff">
+                  <use xlinkHref="#path-3" />
+                </mask>
+                <g mask="url(#mask-4)">
+                  <g transform="translate(9.167 19.963)">
+                    <path fill={PRIMARY_DARK} d="M53.333 17.467H61.666V24.953H53.333z" />
+                    <path
+                      fill={PRIMARY_DARKER}
+                      d="M.935 20.45L25.963 8.015a5.052 5.052 0 014.52.012L60.74 23.263a1.685 1.685 0 01.015 3.001L35.417 39.361a5.052 5.052 0 01-4.694-.029L.893 23.446a1.685 1.685 0 01.042-2.995z"
+                    />
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M32.5 34.204v4.185a1.133 1.133 0 01-1.566 1.047l-.1-.047v-7.537a2.494 2.494 0 011.666 2.352zM.833 15.932l30 15.92v7.537l-30-15.923v-.02l-.115-.066A1.568 1.568 0 010 22.063V14.14l.833 1.792z"
+                    />
+                    <path
+                      fill={PRIMARY_MAIN}
+                      fillRule="nonzero"
+                      d="M.935 12.965L25.963.528a5.052 5.052 0 014.52.012L60.74 15.777a1.685 1.685 0 01.015 3.001L35.417 31.875a5.052 5.052 0 01-4.694-.029L.893 15.96a1.685 1.685 0 01.042-2.995z"
+                    />
+                  </g>
+                </g>
+              </g>
+              <g>
+                <mask id="mask-6" fill="#fff">
+                  <use xlinkHref="#path-5" />
+                </mask>
+                <g mask="url(#mask-6)">
+                  <g transform="translate(9.167 19.963)">
+                    <path fill={PRIMARY_DARK} d="M53.333 17.467H61.666V24.953H53.333z" />
+                    <path
+                      fill={PRIMARY_DARKER}
+                      d="M.935 20.45L25.963 8.015a5.052 5.052 0 014.52.012L60.74 23.263a1.685 1.685 0 01.015 3.001L35.417 39.361a5.052 5.052 0 01-4.694-.029L.893 23.446a1.685 1.685 0 01.042-2.995z"
+                    />
+                    <path
+                      fill={PRIMARY_DARK}
+                      d="M32.5 34.204v4.185a1.133 1.133 0 01-1.566 1.047l-.1-.047v-7.537a2.494 2.494 0 011.666 2.352zM.833 15.932l30 15.92v7.537l-30-15.923v-.02l-.115-.066A1.568 1.568 0 010 22.063V14.14l.833 1.792z"
+                    />
+                    <path
+                      fill={PRIMARY_MAIN}
+                      fillRule="nonzero"
+                      d="M.935 12.965L25.963.528a5.052 5.052 0 014.52.012L60.74 15.777a1.685 1.685 0 01.015 3.001L35.417 31.875a5.052 5.052 0 01-4.694-.029L.893 15.96a1.685 1.685 0 01.042-2.995z"
+                    />
+                  </g>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/icon_sent.tsx
+++ b/frontend/src/assets/icon_sent.tsx
@@ -0,0 +1,40 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function SentIcon({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+
+  return (
+    <Box {...other}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 120 140">
+        <defs>
+          <linearGradient id="BG" x1="49.662%" x2="52.228%" y1="37.111%" y2="76.847%">
+            <stop offset="0%" stopColor={PRIMARY_MAIN} />
+            <stop offset="100%" stopColor={PRIMARY_DARK} />
+          </linearGradient>
+        </defs>
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+          <g fill={PRIMARY_MAIN} opacity="0.481" transform="translate(27 74)">
+            <path d="M39.259 65.387a.75.75 0 11-.39-1.449l1.93-.519a.75.75 0 01.39 1.449l-1.93.519zm7.726-2.079a.75.75 0 01-.392-1.448c.674-.182 1.312-.355 1.929-.524a.75.75 0 11.394 1.448l-1.93.524zm7.72-2.13a.75.75 0 01-.408-1.442c.653-.185 1.292-.367 1.92-.548a.75.75 0 11.415 1.442c-.63.18-1.272.364-1.926.549zm7.693-2.259a.75.75 0 01-.44-1.434c.643-.197 1.277-.394 1.904-.591a.75.75 0 01.45 1.43c-.63.2-1.268.397-1.914.595zm7.64-2.47a.75.75 0 01-.487-1.42 205.24 205.24 0 001.882-.654.75.75 0 01.5 1.414c-.626.221-1.257.44-1.896.66zm7.543-2.757a.75.75 0 01-.546-1.397c.532-.208 1.059-.417 1.579-.627l.267-.11a.75.75 0 11.572 1.387l-.275.113c-.529.213-1.06.424-1.597.634zm7.38-3.343a.75.75 0 11-.731-1.31c.584-.326 1.141-.66 1.673-1.004a.75.75 0 01.814 1.26 31.41 31.41 0 01-1.757 1.054zm6.488-5.142a.75.75 0 01-1.195-.908c.384-.505.7-1.033.933-1.565a.75.75 0 011.375.6 9.208 9.208 0 01-1.113 1.873zm.387-8.357a.75.75 0 11-1.257.818 9.492 9.492 0 00-1.165-1.443.75.75 0 011.075-1.046c.516.53.966 1.085 1.347 1.671zm-6.48-5.278a.75.75 0 11-.697 1.328 51.745 51.745 0 00-.312-.162c-.477-.232-.958-.45-1.449-.659a.75.75 0 11.584-1.381c.516.218 1.02.447 1.537.698l.338.176zm-7.708-2.764a.75.75 0 11-.348 1.46 44.518 44.518 0 00-1.923-.414.75.75 0 01.283-1.473c.676.13 1.339.272 1.988.427zm-8.01-1.253a.75.75 0 11-.137 1.494 90.41 90.41 0 00-1.977-.159.75.75 0 11.104-1.496c.691.048 1.36.101 2.01.16zm-8.058-.452a.75.75 0 11-.052 1.499l-.988-.034c-.317-.005-.637-.009-.96-.012a.75.75 0 11.015-1.5l.981.013 1.004.034zm-8.004-.025a.75.75 0 01.022 1.5c-.64.009-1.3.02-1.996.034a.75.75 0 01-.029-1.5c.698-.013 1.361-.025 2.003-.034zm-8.006.174a.75.75 0 11.037 1.5l-2 .047a.75.75 0 11-.035-1.5c.597-.013 1.216-.028 1.998-.047zm-7.986.15a.75.75 0 01.013 1.5c-.419.003-.83.006-1.234.007l-.762.008a.75.75 0 11-.02-1.5l.774-.008c.403-.001.813-.004 1.23-.008zm-8.01.17a.75.75 0 11.036 1.5 128.4 128.4 0 01-2.011.036.75.75 0 01-.014-1.5c.617-.006 1.261-.018 1.988-.035zm-7.922-.16a.75.75 0 11-.125 1.495 54.016 54.016 0 01-2.018-.208.75.75 0 01.182-1.489c.657.08 1.31.147 1.961.202zm-7.788-1.23a.75.75 0 01-.334 1.463c-.611-.14-1.233-.29-1.865-.452l-.106-.028a.75.75 0 11.384-1.45l.095.025c.62.159 1.227.306 1.826.443zm-6.988-3.058a.75.75 0 11-.94 1.169 15.781 15.781 0 01-1.545-1.422.75.75 0 111.087-1.033c.435.457.903.888 1.398 1.286zm-4.36-6.177a.75.75 0 11-1.427.461 12.529 12.529 0 01-.481-2.072.75.75 0 011.485-.213c.088.614.23 1.223.424 1.824zm.197-7.336a.75.75 0 11-1.414-.5c.23-.65.507-1.292.83-1.927a.75.75 0 111.337.68 14.554 14.554 0 00-.753 1.747zm4.15-6.461a.75.75 0 01-1.098-1.022c.451-.485.93-.968 1.437-1.453a.75.75 0 111.036 1.084 33.35 33.35 0 00-1.375 1.39z" />
+          </g>
+          <g transform="translate(.072 .206)">
+            <path
+              fill="url(#BG)"
+              fillRule="nonzero"
+              d="M118.861.08c.76.19.938 1.11.744 1.772-.437 1.942-1.194 3.796-1.79 5.693L92.91 85.285c-.184 1.023-1.258 1.783-2.27 1.561-10.558-8.63-21.143-17.238-31.722-25.845-4.793 5.019-9.514 10.127-14.717 14.727-1.33 1.09-2.652 2.242-4.23 2.95-.423.13-1.18.379-1.374-.194-.058-1.036.204-2.054.31-3.077a3636.75 3636.75 0 013.914-29.736 42158.62 42158.62 0 00-40.855-6.024c-.726-.123-1.69-.256-1.953-1.07-.144-1.03.866-1.656 1.711-1.922 5.567-1.591 11.049-3.459 16.578-5.176C50.928 21.117 83.557 10.762 116.182.4c.862-.249 1.776-.545 2.68-.32z"
+            />
+            <path
+              fill={PRIMARY_DARK}
+              d="M51.552 55.01c2.12 1.735 4.224 3.493 6.382 5.18-4.974 5.704-10.285 11.163-16.03 16.103 3.577-6.924 6.669-14.086 9.648-21.282zm60.086-49.233c-8.523 6.856-17.21 13.517-25.797 20.298-10.817 8.481-21.63 16.965-32.451 25.443-.948.76-2.012 1.39-2.847 2.283-.883.968-1.19 2.276-1.667 3.462-1.292 3.298-2.73 6.542-4.084 9.82-1.302 3.131-2.683 6.25-4.497 9.129.48-3.968.991-7.931 1.512-11.893l1.574-11.883.774-5.944c.085-.463.037-1.056.542-1.295C55.405 39.037 66 32.661 76.66 26.412c11.66-6.876 23.318-13.755 34.978-20.635z"
+            />
+          </g>
+        </g>
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/illustration_404.tsx
+++ b/frontend/src/assets/illustration_404.tsx
--- a/frontend/src/assets/illustration_500.tsx
+++ b/frontend/src/assets/illustration_500.tsx
--- a/frontend/src/assets/illustration_booking.tsx
+++ b/frontend/src/assets/illustration_booking.tsx
@@ -0,0 +1,255 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function BookingIllustration({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_LIGHTER = theme.palette.primary.lighter;
+  const PRIMARY_LIGHT = theme.palette.primary.light;
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200">
+        <path
+          fill="#FFFFFF"
+          d="M141.968 167.139H48.764a11.932 11.932 0 01-11.921-11.921V45.758a11.935 11.935 0 0111.921-11.922h86.712l18.414 14.677v106.705a11.937 11.937 0 01-11.922 11.921z"
+        />
+        <path
+          fill="#C4CDD5"
+          d="M122.521 69.096h-62.5a1.986 1.986 0 110-3.97h62.5a1.984 1.984 0 110 3.97zM130.711 75.796h-70.69a1.985 1.985 0 010-3.97h70.69a1.98 1.98 0 011.404.581 1.992 1.992 0 01.581 1.404 1.98 1.98 0 01-1.226 1.834c-.24.1-.499.151-.759.151z"
+        />
+        <path
+          fill={PRIMARY_MAIN}
+          d="M122.521 99.123h-62.5a1.986 1.986 0 110-3.97h62.5a1.984 1.984 0 110 3.97zM130.711 105.823h-70.69a1.98 1.98 0 01-1.834-1.226 1.986 1.986 0 011.835-2.745h70.689a1.995 1.995 0 011.404.582 1.988 1.988 0 010 2.807 1.99 1.99 0 01-1.404.582z"
+        />
+        <path
+          fill="#DFE3E8"
+          d="M122.522 129.149h-62.5a1.986 1.986 0 110-3.97h62.5a1.985 1.985 0 010 3.97zM130.711 135.85h-70.69a1.985 1.985 0 110-3.971h70.69c.526 0 1.031.209 1.403.582a1.981 1.981 0 010 2.807 1.986 1.986 0 01-1.403.582zM153.531 48.986h-14.424a3.973 3.973 0 01-3.971-3.971V34.361a.246.246 0 01.14-.223.25.25 0 01.262.029l18.147 14.376a.25.25 0 01.081.276.249.249 0 01-.235.166z"
+        />
+        <path
+          fill="#919EAB"
+          fillOpacity="0.24"
+          d="M63.977 43.25A28.25 28.25 0 1135.727 15a28.26 28.26 0 0128.25 28.25z"
+        />
+        <path
+          fill={PRIMARY_LIGHTER}
+          d="M62.975 43.249A27.249 27.249 0 1135.726 16a27.258 27.258 0 0127.25 27.249z"
+        />
+        <mask id="mask0" width="55" height="55" x="8" y="16" maskUnits="userSpaceOnUse">
+          <path
+            fill="#fff"
+            d="M62.975 43.249A27.249 27.249 0 1135.726 16a27.258 27.258 0 0127.25 27.249z"
+          />
+        </mask>
+        <g mask="url(#mask0)">
+          <path
+            fill="#FBCDBE"
+            d="M36.143 29.428a9.6 9.6 0 019.6 9.6v1.057a2.058 2.058 0 011.714 2.029v2.4a2.058 2.058 0 01-1.767 2.037 9.606 9.606 0 01-5.433 7.668v3.152h.686c6.817 0 12.343 5.526 12.343 12.343v1.543H19v-1.543c0-6.817 5.526-12.343 12.343-12.343h.686V54.22a9.607 9.607 0 01-5.434-7.668 2.058 2.058 0 01-1.766-2.037v-2.4c0-1.02.74-1.866 1.714-2.029v-1.057a9.6 9.6 0 019.6-9.6z"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            d="M27.743 58.63c0 2.792 3.799 5.054 8.486 5.054 4.686 0 8.485-2.262 8.485-5.053a3.08 3.08 0 00-.078-.689c5.013 1.57 8.65 6.25 8.65 11.78v1.535H19v-1.534c0-5.598 3.727-10.326 8.834-11.837-.06.243-.091.492-.091.745z"
+          />
+          <path
+            fill={PRIMARY_LIGHT}
+            d="M27.743 58.63c0 2.792 3.799 5.054 8.486 5.054 4.686 0 8.485-2.262 8.485-5.053a3.08 3.08 0 00-.078-.689c5.013 1.57 8.65 6.25 8.65 11.78v1.535H19v-1.534c0-5.598 3.727-10.326 8.834-11.837-.06.243-.091.492-.091.745z"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            d="M31.857 48.904c.242 1.65 2.068 2.981 4.285 2.981 2.224 0 4.054-1.34 4.286-3.13.018-.069-.038-.298-.372-.298H32.23c-.307 0-.395.212-.373.447z"
+            opacity="0.24"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="evenodd"
+            d="M34.085 45.542c0 .758.922 1.372 2.058 1.372 1.136 0 2.057-.614 2.057-1.372"
+            clipRule="evenodd"
+            opacity="0.24"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            d="M31.685 43.485a1.029 1.029 0 100-2.057 1.029 1.029 0 000 2.057zM40.6 43.485a1.029 1.029 0 100-2.057 1.029 1.029 0 000 2.057zM29.223 40.255c.67-.944 2.51-1.474 4.095-1.084a.343.343 0 00.164-.666c-1.84-.452-3.971.161-4.819 1.353a.343.343 0 10.56.397zM43.063 40.255c-.67-.944-2.51-1.474-4.096-1.084a.343.343 0 11-.163-.666c1.84-.452 3.97.161 4.818 1.353a.343.343 0 11-.559.397z"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            d="M36.143 26.857c6.438 0 11.657 5.219 11.657 11.657v5.272c.15 1.68.29 2.858.421 3.532.236 1.218.976.816.976 2.548 0 1.732-.742 2.314-.745 3.855-.003 1.54 2.64 2.765 2.64 4.72 0 1.956-1.213 11.183-13.307 11.183-2.584 0-4.784-.735-6.602-2.205.117 1.113.228 2.392.331 3.838h-8.057c.16-4.075-1.248-6.354-1.248-10.895 0-4.541 2.337-11.146 2.277-12.762l.01-.359c-.007-.165-.01-.331-.01-.498v-8.229c0-.68.058-1.348.17-1.997l.001-.06.007.013c.967-5.463 5.738-9.613 11.479-9.613zm.086 5.486h-.172a9.343 9.343 0 00-9.343 9.342v3.943a9.343 9.343 0 009.343 9.343h.172a9.343 9.343 0 009.343-9.343v-3.943a9.343 9.343 0 00-9.343-9.342z"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="evenodd"
+            d="M36.143 28.742c5.87 0 10.628 4.72 10.628 10.543 0 .671-.063 1.328-.184 1.964-.272-5.533-4.844-9.935-10.444-9.935-5.6 0-10.172 4.402-10.445 9.935a10.5 10.5 0 01-.184-1.964c0-5.822 4.759-10.543 10.629-10.543z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="evenodd"
+            d="M47.399 59.17c.024.054.047.11.067.167.776 2.132-1.384 4.876-4.826 6.128-3.44 1.253-6.86.54-7.636-1.592a2.559 2.559 0 01-.056-.173c1.405.97 4.181 1.016 7.04-.025 2.855-1.04 4.95-2.854 5.408-4.497l.003-.009zm-1.99-2.631l.029.131c.293 1.662-2.27 3.503-5.723 4.112s-6.49-.245-6.784-1.907a1.44 1.44 0 01-.017-.133c1.112.854 3.685 1.15 6.555.644 2.865-.505 5.179-1.66 5.935-2.841l.004-.006zm.334-13.482V47a9.343 9.343 0 01-9.343 9.342h-.515A9.343 9.343 0 0126.543 47v-3.943c0-.634.063-1.253.183-1.852-.008.16-.012.32-.012.48v3.943a9.343 9.343 0 009.343 9.343h.171a9.343 9.343 0 009.343-9.343v-3.943c0-.16-.004-.32-.012-.48a9.38 9.38 0 01.184 1.852z"
+            clipRule="evenodd"
+            opacity="0.9"
+          />
+        </g>
+        <path
+          fill="#919EAB"
+          fillOpacity="0.24"
+          d="M195.516 99.234a28.263 28.263 0 01-19.503 26.869c-.17.054-.339.108-.511.159a27.815 27.815 0 01-6.4 1.161 28.16 28.16 0 01-11.436-1.613 28.257 28.257 0 01-18.407-22.832 28.253 28.253 0 1156.257-3.744z"
+        />
+        <path
+          fill={PRIMARY_LIGHTER}
+          d="M194.514 99.233a27.256 27.256 0 01-18.812 25.917c-.164.052-.327.104-.493.153a26.765 26.765 0 01-6.173 1.12 27.206 27.206 0 01-22.99-10.083 27.258 27.258 0 01-3.745-28.04 27.255 27.255 0 0123.152-16.255 27.254 27.254 0 0129.061 27.188z"
+        />
+        <mask id="mask1" width="55" height="56" x="140" y="71" maskUnits="userSpaceOnUse">
+          <path
+            fill="#fff"
+            d="M194.514 99.233a27.256 27.256 0 01-18.812 25.917c-.164.052-.327.104-.493.153a26.765 26.765 0 01-6.173 1.12 27.206 27.206 0 01-22.99-10.083 27.258 27.258 0 01-3.745-28.04 27.255 27.255 0 0123.152-16.255 27.254 27.254 0 0129.061 27.188z"
+          />
+        </mask>
+        <g mask="url(#mask1)">
+          <path
+            fill="#FBCDBE"
+            d="M166.886 85.428c5.301 0 9.6 4.298 9.6 9.6v1.057a2.057 2.057 0 011.714 2.029v2.4a2.058 2.058 0 01-1.767 2.037 9.606 9.606 0 01-5.433 7.668v3.152h.686c6.816 0 12.342 5.526 12.342 12.343v1.543h-34.285v-1.543c0-6.817 5.526-12.343 12.343-12.343h.685v-3.152a9.606 9.606 0 01-5.433-7.668 2.058 2.058 0 01-1.767-2.037v-2.4c0-1.02.742-1.866 1.715-2.029v-1.057a9.6 9.6 0 019.6-9.6z"
+          />
+          <path
+            fill={PRIMARY_LIGHTER}
+            d="M171.686 113.38c6.816 0 12.342 5.526 12.342 12.343v1.534h-34.285v-1.534c0-6.817 5.526-12.343 12.343-12.343h.204c-.022.169-.033.34-.033.514 0 2.367 2.072 4.286 4.629 4.286 2.556 0 4.628-1.919 4.628-4.286 0-.174-.011-.345-.033-.514h.205z"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="evenodd"
+            d="M160.714 120.143c0 2.607.336 5.043.919 7.114h-11.891v-1.534c0-6.632 5.231-12.043 11.792-12.331-.522 1.99-.82 4.294-.82 6.751zm23.314 5.58v1.534h-11.719c.583-2.071.919-4.507.919-7.114 0-2.453-.298-4.754-.818-6.742 6.479.375 11.618 5.748 11.618 12.322z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_LIGHTER}
+            fillRule="evenodd"
+            d="M175.285 123.143l1.638-1.229a.686.686 0 01.833.007l1.129.879-3.6.343z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            fillRule="evenodd"
+            d="M161.571 113.2c-.686 3.314-.4 8 .857 14.057h-2.743l-2.4-6.172 1.029-1.542-1.029-1.029 3.257-5.143a3.682 3.682 0 011.029-.171zM172.2 113.2c.685 3.314.4 8-.858 14.057h2.743l2.4-6.172-1.028-1.542 1.028-1.029-3.257-5.143a3.669 3.669 0 00-1.028-.171z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_LIGHT}
+            fillRule="evenodd"
+            d="M171 112.092c1.161.788 1.885 1.906 1.885 3.146 0 1.268-.759 2.409-1.968 3.2l-1.018-.802-.785.056.171-.54-.013-.01c1.046-.539 1.728-1.422 1.728-2.421v-2.629zm-6.501 5.05l-.014.01.172.54-.785-.056-1.019.802c-1.186-.776-1.939-1.889-1.967-3.129l-.001-.071c0-1.24.725-2.358 1.886-3.146v2.629c0 .999.682 1.882 1.728 2.421z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            fillRule="evenodd"
+            d="M164.485 104.8a2.4 2.4 0 004.8 0M164.828 101.542c0 .758.921 1.372 2.057 1.372s2.057-.614 2.057-1.372"
+            clipRule="evenodd"
+            opacity="0.24"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            fillRule="evenodd"
+            d="M160.055 99.409c.317.651 1.03 1.105 1.858 1.105.826 0 1.536-.451 1.855-1.098.094-.193-.04-.35-.176-.234-.42.362-1.017.587-1.679.587-.641 0-1.221-.211-1.639-.553-.152-.125-.311.002-.219.193zM169.998 99.409c.317.651 1.029 1.105 1.858 1.105.826 0 1.536-.451 1.854-1.098.095-.193-.04-.35-.175-.234-.42.362-1.017.587-1.679.587-.641 0-1.221-.211-1.639-.553-.153-.125-.311.002-.219.193z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M159.965 96.255c.671-.944 2.511-1.474 4.096-1.084a.343.343 0 00.164-.666c-1.841-.452-3.972.161-4.819 1.353a.343.343 0 00.559.397zM173.806 96.255c-.671-.944-2.511-1.474-4.096-1.084a.343.343 0 01-.164-.666c1.841-.452 3.972.161 4.819 1.353a.343.343 0 11-.559.397z"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M166.971 107.687c-1.95.064-2.82 1.008-3.475.049-.491-.72-.286-1.93.174-2.61.653-.969 1.54-.501 2.532-.611.269-.03.54-.106.769-.23.229.124.5.2.769.23.992.11 1.878-.358 2.532.611.46.68.665 1.89.174 2.61-.655.959-1.525-.114-3.475-.049zm9.466-11.63c-.58 2.412-.846 4.874-1.267 7.315a53.543 53.543 0 01-.285 1.522c-.022.106-.043.501-.146.551-.314.151-.953-.655-1.124-.837-.429-.457-.854-.918-1.377-1.276a7.342 7.342 0 00-3.579-1.255c-.538-.043-1.266.032-1.774.341-.507-.309-1.235-.384-1.773-.341a7.342 7.342 0 00-3.579 1.255c-.523.358-.948.819-1.377 1.276-.171.182-.81.988-1.124.837-.103-.05-.124-.445-.146-.551a53.543 53.543 0 01-.285-1.522c-.421-2.441-.687-4.903-1.267-7.315-.169 0-.317 3.214-.336 3.513-.077 1.216-.166 2.405-.052 3.623.197 2.099.403 4.732 1.984 6.336 1.428 1.449 3.502 1.752 5.291 2.666.231.118.536.263.866.382.347.268 1.035.451 1.828.451.832 0 1.548-.201 1.877-.491a7.76 7.76 0 00.758-.342c1.788-.915 3.863-1.217 5.291-2.666 1.581-1.604 1.787-4.237 1.984-6.336.114-1.218.025-2.407-.052-3.623-.019-.3-.167-3.513-.336-3.513z"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="evenodd"
+            d="M166.885 89.028c5.586 0 10.115 2.533 10.115 5.657 0 .442-.091.873-.263 1.286-1.041-2.505-5.057-4.371-9.852-4.371s-8.811 1.866-9.852 4.371a3.342 3.342 0 01-.262-1.286c0-3.124 4.528-5.657 10.114-5.657z"
+            clipRule="evenodd"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M167.228 79.771c5.117 0 14.043 7.569 14.057 15.656.008 4.367-1.649 7.035-4.971 8.001 1.048-9.58-5.417-11.757-9.434-14.088-4.021 2.33-10.475 4.507-9.423 14.088-3.322-.857-4.979-3.524-4.972-8.001.014-8.088 8.927-15.656 14.058-15.656.114 0 .228.005.341.015a3.94 3.94 0 01.344-.015z"
+          />
+        </g>
+        <path
+          fill="#919EAB"
+          fillOpacity="0.24"
+          d="M5 156.457a28.162 28.162 0 008.98 20.659 28.239 28.239 0 0010.523 6.21 28.359 28.359 0 0018.088-.201l.32-.115a28.255 28.255 0 0016.203-37.926 28.251 28.251 0 00-38.905-13.686A28.248 28.248 0 005 156.457z"
+        />
+        <path
+          fill={PRIMARY_LIGHTER}
+          d="M6 156.456a27.163 27.163 0 008.663 19.927 27.204 27.204 0 0011.043 6.262 27.357 27.357 0 0016.553-.466l.31-.111a27.253 27.253 0 006.316-47.931A27.253 27.253 0 006 156.456z"
+        />
+        <mask id="mask2" width="55" height="55" x="6" y="129" maskUnits="userSpaceOnUse">
+          <path
+            fill="#fff"
+            d="M6 156.456a27.163 27.163 0 008.663 19.927 27.204 27.204 0 0011.043 6.262 27.357 27.357 0 0016.553-.466l.31-.111a27.253 27.253 0 006.316-47.931A27.253 27.253 0 006 156.456z"
+          />
+        </mask>
+        <g mask="url(#mask2)">
+          <path
+            fill="#FBCDBE"
+            d="M33.629 143.171a9.6 9.6 0 019.6 9.6v1.057a2.059 2.059 0 011.714 2.029v2.4a2.057 2.057 0 01-1.767 2.037 9.607 9.607 0 01-5.433 7.668v3.152h.686c6.816 0 12.343 5.526 12.343 12.343V185H16.486v-1.543c0-6.817 5.526-12.343 12.343-12.343h.685v-3.152a9.608 9.608 0 01-5.433-7.668 2.057 2.057 0 01-1.767-2.037v-2.4c0-1.019.742-1.865 1.715-2.029v-1.057a9.6 9.6 0 019.6-9.6z"
+          />
+          <path
+            fill={PRIMARY_LIGHT}
+            d="M25.229 172.374c0 2.791 3.799 5.054 8.485 5.054 4.687 0 8.486-2.263 8.486-5.054a3.08 3.08 0 00-.078-.689c5.013 1.57 8.65 6.251 8.65 11.781V185H16.486v-1.534c0-5.598 3.726-10.325 8.834-11.837-.06.243-.091.492-.091.745z"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M30.392 162.565a3.257 3.257 0 006.475-.015c.014-.132-.133-.35-.317-.35h-5.821c-.185 0-.356.202-.337.365z"
+            opacity="0.24"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            fillRule="evenodd"
+            d="M31.571 159.286c0 .757.921 1.371 2.057 1.371 1.137 0 2.058-.614 2.058-1.371"
+            clipRule="evenodd"
+            opacity="0.24"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M29.172 157.229a1.029 1.029 0 10-.001-2.058 1.029 1.029 0 000 2.058zM38.086 157.229a1.029 1.029 0 10-.001-2.058 1.029 1.029 0 000 2.058zM26.708 153.999c.671-.945 2.511-1.474 4.096-1.085a.343.343 0 10.164-.666c-1.84-.452-3.971.161-4.819 1.353a.343.343 0 00.56.398zM40.549 153.999c-.671-.945-2.511-1.474-4.096-1.085a.343.343 0 11-.163-.666c1.84-.452 3.97.161 4.818 1.353a.343.343 0 01-.559.398z"
+          />
+          <mask id="mask3" width="46" height="48" x="11" y="137" maskUnits="userSpaceOnUse">
+            <path
+              fill="#fff"
+              d="M56.257 137v48h-5.486v-1.543c0-6.817-5.526-12.343-12.342-12.343h-.686v-3.152a9.606 9.606 0 005.45-7.842 2.058 2.058 0 001.75-2.034v-2.229a2.059 2.059 0 00-1.714-2.029v-1.057a9.566 9.566 0 00-.796-3.831c-1.701-2.854-16.122-2.717-17.597-.028a9.567 9.567 0 00-.807 3.859v1.057a2.059 2.059 0 00-1.715 2.029v2.229c0 1.031.76 1.886 1.75 2.034a9.606 9.606 0 005.45 7.842v3.152h-.685c-6.749 0-12.233 5.416-12.342 12.139l-.001.204V185H11v-48h45.257z"
+            />
+          </mask>
+          <g mask="url(#mask3)">
+            <path
+              fill={PRIMARY_DARKER}
+              fillRule="evenodd"
+              d="M32.117 137.343h3.194a6.857 6.857 0 016.699 5.389l1.561 7.125H23.857l1.562-7.125a6.857 6.857 0 016.698-5.389z"
+              clipRule="evenodd"
+            />
+            <path
+              fill={PRIMARY_DARKER}
+              d="M33.629 161.857c11.55 0 20.914-4.413 20.914-9.857 0-5.444-9.364-9.857-20.914-9.857-11.551 0-20.915 4.413-20.915 9.857 0 5.444 9.364 9.857 20.915 9.857z"
+            />
+            <path
+              fill={PRIMARY_DARK}
+              d="M33.629 155.343c5.87 0 10.628-1.919 10.628-4.286 0-2.367-4.758-4.286-10.628-4.286S23 148.69 23 151.057c0 2.367 4.759 4.286 10.629 4.286z"
+            />
+          </g>
+          <path
+            fill={PRIMARY_DARKER}
+            d="M32.208 156.286c0 1.663-1.414 3.012-3.771 3.012h-.471c-2.357 0-3.3-1.35-3.3-3.012 0-1.664.22-3.013 3.52-3.013h.502c3.3 0 3.52 1.349 3.52 3.013zM42.763 156.286c0 1.663-1.414 3.012-3.771 3.012h-.472c-2.356 0-3.3-1.35-3.3-3.012 0-1.664.22-3.013 3.52-3.013h.503c3.299 0 3.52 1.349 3.52 3.013z"
+            opacity="0.7"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M28.689 152.771c3.711 0 4.022 1.737 4.022 3.515 0 2.069-1.757 3.514-4.274 3.514h-.471c-2.381 0-3.802-1.314-3.802-3.514 0-1.778.31-3.515 4.022-3.515h.503zm0 1.004h-.503c-2.957 0-3.016 1.064-3.017 2.427v.084c0 1.145.485 2.51 2.797 2.51h.471c1.925 0 3.268-1.032 3.268-2.51v-.126-.123c-.01-1.283-.18-2.262-3.016-2.262zM39.243 152.771c3.711 0 4.022 1.737 4.022 3.515 0 2.069-1.757 3.514-4.274 3.514h-.471c-2.38 0-3.802-1.314-3.802-3.514 0-1.778.31-3.515 4.022-3.515h.503zm0 1.004h-.503c-2.957 0-3.016 1.064-3.017 2.427v.084c0 1.145.486 2.51 2.797 2.51h.471c1.925 0 3.269-1.032 3.269-2.51v-.126-.123c-.011-1.283-.181-2.262-3.017-2.262z"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            d="M23.16 153.776c.117-.118 1.404-1.005 5.026-1.005 3.037 0 3.68.323 4.652.81l.072.036c.067.024.413.144.818.158.368-.017.684-.119.776-.152 1.11-.552 2.198-.852 4.739-.852 3.622 0 4.908.887 5.026 1.005.278 0 .503.224.503.502v.502a.502.502 0 01-.503.502s-1.005 0-1.005.502-.503-.727-.503-1.004v-.489c-.613-.24-1.71-.515-3.518-.515-2.014 0-3.018.193-3.878.556l.01.024-.428.173.427.172-.377.931-.466-.188a2.235 2.235 0 00-.256-.079c-.347-.087-.704-.114-1.02-.048a1.368 1.368 0 00-.321.11l-.45.225-.45-.898.45-.225h.001l-.43-.174.014-.034c-.743-.354-1.427-.545-3.883-.545-1.808 0-2.905.275-3.518.515v.489c0 .277-.503 1.506-.503 1.004s-1.005-.502-1.005-.502a.503.503 0 01-.503-.502v-.502c0-.278.225-.502.503-.502z"
+          />
+        </g>
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/illustration_checkin.tsx
+++ b/frontend/src/assets/illustration_checkin.tsx
@@ -0,0 +1,88 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function CheckInIllustration({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_LIGHTER = theme.palette.primary.lighter;
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200">
+        <path
+          fill={PRIMARY_MAIN}
+          d="M129.948 130.751a4.977 4.977 0 00-4.865 3.938h6.937v17.409h-6.937a4.973 4.973 0 009.839-1.036v-15.337a4.97 4.97 0 00-3.071-4.595 4.97 4.97 0 00-1.903-.379z"
+        />
+        <path
+          fill={PRIMARY_MAIN}
+          d="M74.02 100.285a8.957 8.957 0 00-8.943 8.943v68.746a8.955 8.955 0 008.943 8.943h43.461a8.954 8.954 0 008.943-8.943v-68.746a8.954 8.954 0 00-8.943-8.943h-43.46z"
+        />
+        <path
+          fill={PRIMARY_MAIN}
+          d="M69.43 195a4.56 4.56 0 100-9.119 4.56 4.56 0 000 9.119zM120.414 195a4.559 4.559 0 100-9.118 4.559 4.559 0 000 9.118z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M75.233 99.663h-2.487v87.461h2.487v-87.46zM82.279 99.663h-2.487v87.461h2.487v-87.46zM89.326 99.663h-2.487v87.461h2.487v-87.46zM96.372 99.663h-2.487v87.461h2.487v-87.46zM103.419 99.663h-2.487v87.461h2.487v-87.46zM110.466 99.663h-2.487v87.461h2.487v-87.46zM117.512 99.663h-2.487v87.461h2.487v-87.46z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M116.844 93.031a17.994 17.994 0 002.482-9.12H75.284c0 3.207.857 6.356 2.482 9.12h-8.958c0 4.807 4.06 8.705 9.067 8.705h11.097a20.19 20.19 0 005.742.829h5.182a20.184 20.184 0 005.742-.829h11.097c5.008 0 9.067-3.898 9.067-8.705h-8.958zM84.312 155.829a4.39 4.39 0 01-2.425 4.34l-.022.012c-4.145 2.365-7.538 4.221-11.564 3.879a2.649 2.649 0 01-2.398-2.363c-.042-.405.01-.814.153-1.196l5.726-10.89c3.327-3.875 5.67-3.879 9.741-.621l.79 6.839zM108.019 155.829a4.387 4.387 0 002.425 4.34l.022.012c4.145 2.365 7.538 4.221 11.564 3.879a2.653 2.653 0 002.004-1.223 2.656 2.656 0 00.241-2.336l-5.726-10.89c-3.327-3.875-5.671-3.879-9.741-.621l-.789 6.839zM91.376 27.539H75.442a3.358 3.358 0 01-3.22-2.386c-.491-1.635-1.125-3.222-1.135-4.66-.039-5.586.239-9.14 2.695-11.4C81.964 2.89 87.893 4.03 93.47 10.544c1.958 3.64 1.455 9.07.396 14.907a2.535 2.535 0 01-2.491 2.088z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M83.108 34.586c5.952 0 10.777-4.825 10.777-10.778 0-5.952-4.825-10.777-10.777-10.777-5.952 0-10.777 4.825-10.777 10.777 0 5.953 4.825 10.778 10.777 10.778z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M91.398 45.363l-14.922.414-1.244-16.166 14.508-.414 1.658 16.166z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M116.683 83.912l-10.296 4.766c-1.726 4.093-4.104 3.975-7.113-.206-2.872 5.029-9.057 2.015-12.079-.182a13.913 13.913 0 00-12.584-.026L63.626 39.56c3.386-2.911 7.898-4.74 12.228-6.01l8.498 10.57 5.803-10.363c4.033-3.243 9.699-3.25 15.751-2.487l3.534 18.893c-2.331 14.903 1.174 22.378 7.243 33.749z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M82.694 148.161l-8.705.829-12.895-56.993a9.028 9.028 0 018.813-10.987 9.03 9.03 0 018.951 10.211l-1.553 11.758 5.389 45.182zM108.808 148.99l8.704-.415 12.895-56.577a9.02 9.02 0 00-4.907-10.099 9.031 9.031 0 00-12.547 5.522 9.046 9.046 0 00-.31 3.8l1.553 11.758-5.388 46.011z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M137.101 67.199l-7.361 18.993c-4.024-3.077-7.269-3.497-11.733-1.865-1.234-.172-2.153-2.885-2.153-4.131a2.496 2.496 0 012.383-2.494l6.736-.306a35.046 35.046 0 002.223-10.064 19.047 19.047 0 019.905-.133z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M137.823 67.746l1.795-6.695a11.274 11.274 0 00-5.085-13.19L105.906 31.27l-.414 18.238 21.14 9.119a37.5 37.5 0 01.564 9.418c3.298-.98 7.322-1.188 10.627-.299z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M93.678 17.798l-11.191 2.073a7.875 7.875 0 01-7.876-7.876h19.482l-.415 5.803z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M73.16 21.943c.572 0 1.036-.928 1.036-2.072 0-1.145-.464-2.073-1.036-2.073-.572 0-1.036.928-1.036 2.073 0 1.144.464 2.072 1.036 2.072z"
+        />
+        <path
+          fill={PRIMARY_LIGHTER}
+          d="M107.357 52.858h-.12V49.56a1.908 1.908 0 00-1.909-1.908h-6.986a1.909 1.909 0 00-1.909 1.908v18.091a1.91 1.91 0 001.909 1.909h6.986a1.904 1.904 0 001.763-1.179c.096-.231.146-.48.146-.73V55.205h.12v-2.347z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M101.554 54.69a1.658 1.658 0 100-3.318 1.658 1.658 0 000 3.317z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M100.103 68.16c-8.527 6.694-17.075 12.265-23.42 13.058l-1.036-11.4c6.093-.877 14.24-4.892 22.798-9.533l4.185-2.176a4.6 4.6 0 016.712 3.73 4.603 4.603 0 01-3.427 4.806l-5.812 1.516z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M83.937 81.425l-16.995.414C61.224 70.621 59.15 58.65 60.31 46.01a8.355 8.355 0 013.6-6.87l1.789-1.238c7.65 11.356 12.395 21.902 10.777 30.673l4.974-.414c-3.221 4.347-1.73 8.78 2.487 13.264z"
+        />
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/illustration_checkout.tsx
+++ b/frontend/src/assets/illustration_checkout.tsx
@@ -0,0 +1,84 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function CheckOutIllustration({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_LIGHT = theme.palette.primary.light;
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 200">
+        <path
+          fill="#FBCDBE"
+          d="M169.677 104.722a5.342 5.342 0 006.376-3.122 5.347 5.347 0 00-2.349-6.7l-11.345-12.87-9.595 2.073 13.496 13.219a5.309 5.309 0 00-.019 4.498 5.301 5.301 0 001.396 1.832c.593.502 1.29.867 2.04 1.07z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M132.352 58.644l28.276 35.493 8.619-3.957-33.235-51.742-3.66 20.206zM65.714 194.929a3.1 3.1 0 100-6.202 3.1 3.1 0 000 6.202zM67.969 129.379s7.33-22.273 7.894-23.824c.564-1.55 6.485.987 8.035 1.41 1.551.423 1.128 1.974 1.128 1.974l-7.894 22.837 2.396 1.127 7.33-22.978c4.23-4.37 1.129-4.652 1.129-4.652s-9.022-3.101-12.406-3.383c-3.383-.282-2.114 3.806-2.114 3.806l-8.177 21.709 2.679 1.974z"
+        />
+        <path
+          fill={PRIMARY_MAIN}
+          d="M85.59 134.736l-.001-.001a8.788 8.788 0 00-4.228-3.241 8.546 8.546 0 00-.212-.076c-3.883-1.358-30.942-8.664-30.942-8.664s-5.357-1.974-7.753 3.383c-2.397 5.357-16.635 49.762-16.635 49.762s27.847 14.892 35.966 16.513a4.878 4.878 0 001.532.121 21.567 21.567 0 004.056-.968 16.975 16.975 0 004.12-1.992l15.789-47.225s2.255-5.216-1.692-7.612z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M85.59 134.736l-.001-.002a8.792 8.792 0 00-4.228-3.24c-.06-.023-.131-.048-.212-.077 1.278 2.239 1.763 5.715 1.763 5.715s-15.507 46.097-16.917 50.467c-1.074 3.331-3.24 4.463-4.21 4.813.5.121 1.018.161 1.532.121a21.644 21.644 0 004.056-.968c.385-.442.726-.92 1.019-1.428 0 0 15.788-47.225 17.198-49.48 1.41-2.256 0-5.921 0-5.921zM56.199 195a3.1 3.1 0 100-6.202 3.1 3.1 0 000 6.202zM26.101 181.96a3.1 3.1 0 10.001-6.202 3.1 3.1 0 000 6.202z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M80.767 107.443a5.346 5.346 0 01-4.374-9.672l10.879-13.266 9.663 1.73-13.016 13.69a5.316 5.316 0 01-3.152 7.518zM154.914 165.818l6.739-.106-.811 22.969h-5.927l-.001-22.863z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M153.403 186.746l11.673-.001h.001a7.439 7.439 0 017.439 7.439v.242l-19.113.001v-7.681z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M110.295 159.726l7.362 4.726-14.726 17.716-4.988-3.203 12.352-19.239z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M97.717 176.52l9.823 6.307h.001a7.44 7.44 0 012.24 10.279l-.13.203-16.084-10.325 4.15-6.464z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M107.673 89.59s16.356-54.326 21.613-55.06c5.257-.734 13.726 13.94 13.726 13.94 10.981 14.01 22.304 59.393 22.304 59.393s-18.876 1.181-32.674 8.523c-13.799 7.341-30.083-.372-30.083-.372l5.114-26.424z"
+        />
+        <path
+          fill={PRIMARY_DARK}
+          d="M121.092 73.336v27.298l-3.213 39.544-16.05 29.912 7.66 5.471 21.887-28.452 8.657-28.252 13.595 62.541 10.213-.73-7.093-86.712-13.461-24.407-22.195 3.787z"
+        />
+        <path
+          fill={PRIMARY_LIGHT}
+          d="M137.583 46.933c5.107 5.107.365 10.578.365 10.578l5.837 13.132-22.981 6.202-8.032-35.887 5.472-5.836c10.943-.365 10.949-.592 10.949-.592 1.918 1.877 8.39 12.403 8.39 12.403z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M111.72 37.334a9.803 9.803 0 00-2.837 12.522c2.633 5.026 5.465 12.811 4.005 21.358-2.643 15.468-11.114 27.22-15.832 30.993-1.643 1.314-1.7 3.227-1.46 4.601.674 3.838 4.395 8.192 6.969 9.066.173.057.355.086.537.084 4.181.001 14.466-13.315 26.284-39.327 7.361-16.2 2.019-29.19-3.759-37.234a9.805 9.805 0 00-13.78-2.157l-.127.094z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M122.621 52.996L89.432 96.543l-8.754-3.648 31.371-52.893 10.572 12.994zM132.466 29.802h-22.827a1.773 1.773 0 01-1.771-1.77v-9.84a13.186 13.186 0 018.137-12.188 13.185 13.185 0 0118.232 12.188v9.84a1.77 1.77 0 01-1.771 1.77z"
+        />
+        <path
+          fill="#FBCDBE"
+          d="M132.244 24.543a9.667 9.667 0 00-16.964-9.273 9.667 9.667 0 1016.964 9.273z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M137.356 19.176h-13.958l-.143-2.004-.716 2.004h-2.149l-.284-3.972-1.418 3.972h-4.159v-.197a10.442 10.442 0 0110.43-10.43h1.968a10.44 10.44 0 0110.429 10.43v.197z"
+        />
+        <path
+          fill={PRIMARY_DARKER}
+          d="M123.284 31.64c-.105-.001-.21-.01-.313-.029l-10.221-1.803V12.916h11.251l-.279.325c-3.875 4.52-.955 11.849 1.13 15.815a1.747 1.747 0 01-.139 1.853 1.756 1.756 0 01-1.429.73z"
+        />
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/illustration_coming_soon.tsx
+++ b/frontend/src/assets/illustration_coming_soon.tsx
--- a/frontend/src/assets/illustration_doc.tsx
+++ b/frontend/src/assets/illustration_doc.tsx
--- a/frontend/src/assets/illustration_maintenance.tsx
+++ b/frontend/src/assets/illustration_maintenance.tsx
--- a/frontend/src/assets/illustration_motivation.tsx
+++ b/frontend/src/assets/illustration_motivation.tsx
--- a/frontend/src/assets/illustration_order_complete.tsx
+++ b/frontend/src/assets/illustration_order_complete.tsx
--- a/frontend/src/assets/illustration_seo.tsx
+++ b/frontend/src/assets/illustration_seo.tsx
--- a/frontend/src/assets/illustration_upload.tsx
+++ b/frontend/src/assets/illustration_upload.tsx
@@ -0,0 +1,536 @@
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export default function UploadIllustration({ ...other }: BoxProps) {
+  const theme = useTheme();
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+  const PRIMARY_DARKER = theme.palette.primary.darker;
+
+  return (
+    <Box {...other}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 480 360">
+        <defs>
+          <linearGradient id="BG" x1="19.496%" x2="77.479%" y1="71.822%" y2="16.69%">
+            <stop offset="0%" stopColor={PRIMARY_MAIN} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="linearGradient-2" x1="30.113%" x2="30.113%" y1="0%" y2="100%">
+            <stop offset="0%" stopOpacity="0" />
+            <stop offset="100%" />
+          </linearGradient>
+        </defs>
+        <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+          <path
+            fill="url(#BG)"
+            d="M0 198.78c0 41.458 14.945 79.236 39.539 107.786 28.214 32.765 69.128 53.365 114.734 53.434 19.931.03 38.99-3.887 56.495-11.036 9.051-3.699 19.182-3.274 27.948 1.107a75.779 75.779 0 0033.957 8.01c5.023 0 9.942-.494 14.7-1.433 13.58-2.67 25.94-8.99 36.09-17.94 6.378-5.627 14.547-8.456 22.897-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.224C474.92 234.58 480 213.388 480 190.958c0-76.93-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.499 0a103.651 103.651 0 00-45.88 10.661c-13.24 6.487-25.011 15.705-34.64 26.939-32.698.544-62.931 11.69-87.676 30.291C25.351 97.155 0 144.882 0 198.781z"
+            opacity="0.2"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M293.006 206.192c-2.248 2.672-4.676 2.628-6.123 2.251l.054-1.384s5.979-2.733 5.827-2.159c-.057.215.057.733.242 1.292zM309.393 209.217c-3.818 2.206-6.058-.38-6.578-1.112.32-.84.801-2.204.703-2.592-.144-.577 5.827 2.155 5.827 2.155l.048 1.549zM305.303 187.204s3.632-2.093 4.425-1.151c.792.942-4.425 1.151-4.425 1.151zM307.497 188.355s-.598.299.721.681c1.318.383-.721-.681-.721-.681zM285.532 182.599c-.123.036 3.022 2.123 5.862.395-.012 0-5.154-.61-5.862-.395zM291.239 186.591s-.861 1.692-2.625 1.943c-1.764.251 2.625-1.943 2.625-1.943zM302.785 190.262s4.138 6.578 3.346 8.129c-.793 1.552-3.346-8.129-3.346-8.129zM294.62 216.416c0 .368 0 .712-.036.996-.107 1.33-3.381.828-3.381.828-2.99.416-4.066-1.019-4.422-2.392a5.444 5.444 0 01-.164-1.363 5.606 5.606 0 01.054-.819v-.272a1.998 1.998 0 011.859.379c1.331 1.08 3.095.252 3.095.252s1.294.107 1.793.538c.281.242.745-.341 1.098-.897.021.359.054 1.007.074 1.701.024.356.03.714.03 1.049z"
+            opacity="0.05"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M289.37 216.339s-.897.879-2.589-.479a5.444 5.444 0 01-.164-1.363c.864.658 2.466 1.842 2.753 1.842zM294.62 216.416a.67.67 0 01-.519.132.672.672 0 01-.452-.287c.348-.266.669-.566.956-.897.009.359.015.717.015 1.052zM301.637 217.032c0 .371 0 .715.033.996.108 1.333 3.382.828 3.382.828 2.989.419 4.066-1.017 4.421-2.392a5.728 5.728 0 00.111-2.182v-.272a2.024 2.024 0 00-1.862.379c-1.331 1.08-3.092.251-3.092.251s-1.294.111-1.794.542c-.281.242-.744-.341-1.094-.897a61.426 61.426 0 00-.078 1.701c-.024.35-.03.708-.027 1.046z"
+            opacity="0.05"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M306.887 216.949s.897.879 2.587-.479c.112-.444.169-.901.167-1.36-.867.655-2.47 1.839-2.754 1.839zM301.637 217.032a.67.67 0 00.969-.155 6.35 6.35 0 01-.957-.897c-.009.356-.014.714-.012 1.052zM319.614 106.269c.063-.138.123-.275.18-.41.057-.134.077-.209.11-.317-.11.237-.206.48-.29.727z"
+            opacity="0.05"
+          />
+          <path
+            fill={PRIMARY_DARKER}
+            fillRule="nonzero"
+            d="M157.592 279.461a4.114 4.114 0 01-.917-3.131l13.196-107.979 1.094-8.97a4.142 4.142 0 014.078-3.635l38.654-.257a4.135 4.135 0 004.108-4.249l-.015-.409a4.14 4.14 0 014.135-4.279h40.619a4.134 4.134 0 014.098 4.682 4.137 4.137 0 003.995 4.682l39.01.996a4.13 4.13 0 013.97 4.831l-19.502 113.909-.368 2.152a4.042 4.042 0 01-.598 1.543l-135.557.114z"
+          />
+          <path
+            fill="#FFF"
+            fillRule="nonzero"
+            d="M251.256817 123.296578L274.098317 123.296578 274.098317 200.823078 251.256817 200.823078z"
+            transform="rotate(34.64 262.678 162.06)"
+          />
+          <path
+            fill="#FFC107"
+            fillRule="nonzero"
+            d="M270.624591 129.857671L286.750291 129.857671 286.750291 145.983371 270.624591 145.983371z"
+            transform="rotate(34.804 278.687 137.92)"
+          />
+          <path
+            fill="#FFC107"
+            fillRule="nonzero"
+            d="M260.275579 145.813111L276.423079 145.813111 276.423079 161.960611 260.275579 161.960611z"
+            opacity="0.5"
+            transform="rotate(34.64 268.35 153.887)"
+          />
+          <path
+            fill="#FFC107"
+            fillRule="nonzero"
+            d="M249.191579 161.852111L265.339079 161.852111 265.339079 177.999611 249.191579 177.999611z"
+            opacity="0.3"
+            transform="rotate(34.64 257.265 169.926)"
+          />
+          <path
+            fill="#FFF"
+            fillRule="nonzero"
+            d="M237.472537 121.334214L260.314037 121.334214 260.314037 198.567714 237.472537 198.567714z"
+            transform="rotate(16.29 248.893 159.951)"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M249.053192 123.761554L265.200692 123.761554 265.200692 139.909054 249.053192 139.909054z"
+            transform="rotate(16.29 257.127 131.835)"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M243.584192 142.473554L259.731692 142.473554 259.731692 158.621053 243.584192 158.621053z"
+            opacity="0.5"
+            transform="rotate(16.29 251.658 150.547)"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M238.116192 161.182554L254.263692 161.182554 254.263692 177.330054 238.116192 177.330054z"
+            opacity="0.3"
+            transform="rotate(16.29 246.19 169.256)"
+          />
+          <path
+            fill="#FFF"
+            fillRule="nonzero"
+            d="M230.099192 121.641542L252.940692 121.641542 252.940692 198.875042 230.099192 198.875042z"
+            transform="rotate(4.6 241.52 160.258)"
+          />
+          <path
+            fill="#1890FF"
+            fillRule="nonzero"
+            d="M235.800489 122.985499L251.947989 122.985499 251.947989 139.132999 235.800489 139.132999z"
+            transform="rotate(4.6 243.874 131.06)"
+          />
+          <path
+            fill="#1890FF"
+            fillRule="nonzero"
+            d="M234.234488 142.413498L250.381988 142.413498 250.381988 158.560998 234.234488 158.560998z"
+            opacity="0.5"
+            transform="rotate(4.6 242.308 150.487)"
+          />
+          <path
+            fill="#1890FF"
+            fillRule="nonzero"
+            d="M232.672488 161.846499L248.819988 161.846499 248.819988 177.993999 232.672488 177.993999z"
+            opacity="0.3"
+            transform="rotate(4.6 240.746 169.92)"
+          />
+          <path
+            fill="#FFF"
+            fillRule="nonzero"
+            d="M224.736657 123.384871L247.578157 123.384871 247.578157 200.618371 224.736657 200.618371z"
+            transform="rotate(-2.61 236.157 162.002)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M226.751283 124.659968L242.898783 124.659968 242.898783 140.807468 226.751283 140.807468z"
+            transform="rotate(-2.61 234.825 132.734)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M228.305601 143.479224L244.473301 143.479224 244.473301 159.646924 228.305601 159.646924z"
+            opacity="0.5"
+            transform="rotate(-2.862 236.39 151.563)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M228.525282 163.608968L244.672782 163.608968 244.672782 179.756468 228.525282 179.756468z"
+            opacity="0.3"
+            transform="rotate(-2.61 236.599 171.683)"
+          />
+          <path
+            fill="#F4F6F8"
+            fillRule="nonzero"
+            d="M232.679 225.726l-20.294 7.851-29.661 11.466c-1.121-2.093-2.771-4.921-4.813-8.297-7.026-11.642-18.65-29.75-29.001-45.665-11.66-17.938-21.696-33.075-21.696-33.075l7.265-2.093 59.346-17.23 38.854 87.043z"
+          />
+          <path
+            fill="#000"
+            fillRule="nonzero"
+            d="M232.679 225.726l-20.294 7.851a152.535 152.535 0 01-34.484 3.169c-7.026-11.642-18.65-29.75-29-45.665l-14.42-35.18 59.343-17.218 38.855 87.043z"
+            opacity="0.1"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M247.777 220.841s-31.526 18.65-78.596 14.432l-37.525-91.486 17.984-3.091 62.168-10.677 35.279 89.043.69 1.779z"
+          />
+          <path
+            fill="#FF4842"
+            fillRule="nonzero"
+            d="M247.075 219.074c-7.424.365-16.013.329-24.654-.702-9.351-1.101-18.757-3.367-26.82-7.523-6.742-3.471-12.506-7.247-17.532-11.776-13.074-11.759-21.164-28.579-28.429-58.365l62.168-10.677 35.267 89.043z"
+            opacity="0.1"
+          />
+          <path
+            fill="#FFF"
+            fillRule="nonzero"
+            d="M270.203 213.959s-23.239 4.55-46.894 1.749c-9.351-1.1-18.757-3.367-26.82-7.522-6.742-3.471-12.503-7.247-17.532-11.777-16.181-14.557-24.725-36.866-33.536-81.918 0 0 38.633 9.325 76.836-11.101-.012.015 12.865 80.373 47.946 110.569z"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M165.405 131.03s31.416-1.776 40.187-8.548l1.331 4.276s-20.758 9.157-41.518 9.268v-4.996zM165.405 152.137s30.417-1.665 53.399-12.766l.777 1.776s-18.237 10.647-54.176 13.433v-2.443zM167.853 160.362s30.418-1.665 53.397-12.766l.777 1.776s-18.237 10.643-54.174 13.433v-2.443zM170.299 168.599s30.417-1.666 53.399-12.766l.774 1.775s-18.237 10.647-54.173 13.433v-2.442zM172.748 176.835s30.417-1.665 53.396-12.766l.777 1.776s-18.237 10.647-54.173 13.433v-2.443zM175.193 185.075s30.417-1.665 53.399-12.766l.774 1.776s-18.237 10.643-54.173 13.433v-2.443z"
+            opacity="0.3"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M389.069 287.344s-12.641-.762-11.152 8.097c0 0-.299 1.563 1.124 2.275 0 0 .021-.658 1.295-.434.454.077.916.099 1.375.066a2.832 2.832 0 001.677-.694c.468-.409 3.555-1.468 4.936-7.274 0 0 1.023-1.267.981-1.593l-2.132.897s.73 1.54.156 2.816c0 0-.069-2.759-.479-2.691-.083 0-1.109.533-1.109.533s1.253 2.69.299 4.628c0 0 .359-3.304-.699-4.434l-1.495.876s1.465 2.768.472 5.029c0 0 .254-3.465-.789-4.817l-1.361 1.062s1.379 2.729.539 4.604c0 0-.111-4.036-.835-4.341 0 0-1.195 1.049-1.369 1.494 0 0 .942 1.98.356 3.026 0 0-.359-2.691-.652-2.691 0 0-1.196 1.794-1.309 2.99 0 0 .051-1.818 1.022-3.172a3.593 3.593 0 00-1.818.942s.186-1.262 2.111-1.37c0 0 .981-1.351 1.241-1.435 0 0-1.914-.158-3.074.356 0 0 1.023-1.196 3.427-.649l1.342-1.094s-2.52-.347-3.588.036c0 0 1.229-1.052 3.95-.299l1.462-.873s-2.147-.463-3.426-.299c0 0 1.348-.729 3.856.06l1.044-.47s-1.573-.299-2.033-.358c-.461-.06-.488-.174-.488-.174a5.426 5.426 0 012.957.329s2.222-.813 2.186-.954z"
+          />
+          <ellipse
+            cx="380.363"
+            cy="298.487"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="8.945"
+            ry="1.513"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M394.956 258.102s-7.125-.43-6.279 4.565a1.218 1.218 0 00.631 1.283s.015-.371.733-.245c.255.042.515.054.774.036.349-.023.681-.159.945-.389.264-.23 2.003-.828 2.783-4.102 0 0 .577-.714.553-.897l-1.196.511s.41.87.087 1.591c0 0-.039-1.558-.269-1.522-.048 0-.625.299-.625.299s.706 1.495.173 2.61c0 0 .204-1.862-.394-2.502l-.846.496s.825 1.561.266 2.834c0 0 .143-1.955-.446-2.714l-.765.598s.774 1.539.299 2.595c0 0-.063-2.275-.469-2.446a4.75 4.75 0 00-.775.834s.532 1.118.204 1.707c0 0-.204-1.515-.368-1.521 0 0-.67 1.001-.739 1.689a3.671 3.671 0 01.577-1.794 2.007 2.007 0 00-1.025.532s.104-.711 1.196-.771c0 0 .553-.763.699-.81 0 0-1.079-.09-1.734.2 0 0 .577-.67 1.932-.365l.759-.619s-1.423-.194-2.024.021c0 0 .694-.598 2.227-.161l.826-.494a7.445 7.445 0 00-1.935-.164s.763-.413 2.174.033l.598-.263s-.897-.177-1.148-.203c-.252-.027-.275-.099-.275-.099a3.078 3.078 0 011.668.185s1.232-.46 1.208-.538z"
+          />
+          <ellipse
+            cx="390.052"
+            cy="264.383"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="5.044"
+            ry="1"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M352.896 262.437s-8.604-.52-7.588 5.51a1.47 1.47 0 00.763 1.549s0-.449.897-.299c.309.052.623.067.935.045a1.923 1.923 0 001.142-.473c.318-.279 2.419-.998 3.361-4.951 0 0 .697-.861.667-1.085l-1.468.622s.496 1.046.104 1.916c0 0-.048-1.877-.326-1.835-.056 0-.753.364-.753.364s.852 1.824.209 3.152c0 0 .245-2.249-.475-3.02l-1.023.598s.996 1.886.32 3.423c0 0 .174-2.359-.535-3.289l-.927.724s.939 1.857.365 3.133c0 0-.072-2.747-.565-2.954 0 0-.81.715-.933 1.008 0 0 .64 1.348.242 2.06 0 0-.245-1.83-.445-1.839 0 0-.804 1.214-.897 2.042.04-.768.28-1.512.697-2.159a2.427 2.427 0 00-1.235.643s.125-.858 1.435-.933c0 0 .667-.92.846-.974 0 0-1.303-.111-2.093.239 0 0 .694-.807 2.329-.44l.915-.747s-1.713-.233-2.442.024c0 0 .837-.715 2.69-.191l.996-.598s-1.462-.314-2.335-.201c0 0 .921-.496 2.625.042l.711-.32s-1.07-.209-1.384-.242c-.314-.033-.329-.119-.329-.119a3.69 3.69 0 012.012.221s1.519-.553 1.492-.646z"
+          />
+          <ellipse
+            cx="346.97"
+            cy="270.022"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="6.09"
+            ry="1.028"
+          />
+          <rect
+            width="51.026"
+            height="91.312"
+            x="303.926"
+            y="69.211"
+            fill="#FFF"
+            fillRule="nonzero"
+            rx="4.737"
+            transform="rotate(-71.99 329.44 114.867)"
+          />
+          <circle
+            cx="303.613"
+            cy="103.507"
+            r="9.376"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.2"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M344.582495 86.4883769L347.150665 86.4883769 347.150665 127.336977 344.582495 127.336977z"
+            opacity="0.2"
+            transform="rotate(-71.99 345.867 106.913)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M333.028401 99.6373982L335.596571 99.6373982 335.596571 120.445898 333.028401 120.445898z"
+            opacity="0.2"
+            transform="rotate(-71.99 334.312 110.042)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M337.109071 101.431004L339.677241 101.431004 339.677241 135.086304 337.109071 135.086304z"
+            opacity="0.2"
+            transform="rotate(-71.99 338.393 118.259)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M338.505494 105.174377L341.073664 105.174377 341.073664 146.022978 338.505494 146.022978z"
+            opacity="0.2"
+            transform="rotate(-71.99 339.79 125.599)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M348.060839 134.648161L353.026769 134.648161 353.026769 145.952261 348.060839 145.952261z"
+            opacity="0.5"
+            transform="rotate(-71.99 350.544 140.3)"
+          />
+          <rect
+            width="50.3"
+            height="78.305"
+            x="291.549"
+            y="174.486"
+            fill="#FFF"
+            fillRule="nonzero"
+            rx="4"
+            transform="rotate(-57.265 316.7 213.638)"
+          />
+          <path
+            fill="#DFE3E8"
+            fillRule="nonzero"
+            d="M278.038439 203.88874L292.269539 203.88874 292.269539 207.23723 278.038439 207.23723z"
+            transform="rotate(-57.57 285.154 205.563)"
+          />
+          <path
+            fill="#DFE3E8"
+            fillRule="nonzero"
+            d="M283.007935 199.201889L314.262535 199.201889 314.262535 202.272339 283.007935 202.272339z"
+            transform="rotate(-57.57 298.635 200.737)"
+          />
+          <path
+            fill="#DFE3E8"
+            fillRule="nonzero"
+            d="M288.543935 202.715889L319.798535 202.715889 319.798535 205.786339 288.543935 205.786339z"
+            transform="rotate(-57.57 304.171 204.251)"
+          />
+          <path
+            fill="#DFE3E8"
+            fillRule="nonzero"
+            d="M294.078936 206.235889L325.333536 206.235889 325.333536 209.306339 294.078936 209.306339z"
+            transform="rotate(-57.57 309.706 207.771)"
+          />
+          <path
+            fill="#DFE3E8"
+            fillRule="nonzero"
+            d="M299.879919 211.40702L331.090719 211.40702 331.090719 214.47316 299.879919 214.47316z"
+            transform="rotate(-57.265 315.485 212.94)"
+          />
+          <path
+            fill="#F4F6F8"
+            fillRule="nonzero"
+            d="M305.149936 213.268889L336.404536 213.268889 336.404536 216.339339 305.149936 216.339339z"
+            transform="rotate(-57.57 320.777 214.804)"
+          />
+          <path
+            fill="#F4F6F8"
+            fillRule="nonzero"
+            d="M310.685935 216.782889L341.940535 216.782889 341.940535 219.853339 310.685935 219.853339z"
+            transform="rotate(-57.57 326.313 218.318)"
+          />
+          <path
+            fill="#DFE3E8"
+            fillRule="nonzero"
+            d="M341.417983 210.406958L349.511163 210.406958 349.511163 218.500138 341.417983 218.500138z"
+            transform="rotate(-57.57 345.465 214.454)"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="nonzero"
+            d="M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+            opacity="0.243"
+          />
+          <path
+            fill="url(#linearGradient-2)"
+            fillRule="nonzero"
+            d="M269.277 168.76l-45.767.493a3.127 3.127 0 00-3.094 3.125v3.782a3.127 3.127 0 01-3.05 3.124l-33.024.792a3.124 3.124 0 01-3.095-2.308l-1.551-5.701a3.124 3.124 0 00-3.053-2.308l-44.113.475a3.125 3.125 0 00-3.05 3.648l17.747 104.449a3.129 3.129 0 003.071 2.604l139.363.598a3.129 3.129 0 003.082-3.714l-20.366-106.521a3.125 3.125 0 00-3.1-2.538z"
+            opacity="0.32"
+          />
+          <ellipse
+            cx="119.593"
+            cy="258.664"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="4.846"
+            ry="1"
+          />
+          <ellipse
+            cx="101.03"
+            cy="260.545"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="4.846"
+            ry="1"
+          />
+          <ellipse
+            cx="108.459"
+            cy="265.905"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="3.444"
+            ry="1"
+          />
+          <ellipse
+            cx="89.193"
+            cy="265.433"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+            rx="3.444"
+            ry="1"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M100.925 260.398s6.796-22.279-1.064-31.204c-5.881-6.676-12.557-5.877-15.547-5.052a5.528 5.528 0 00-3.564 2.963c-1.046 2.254-.858 5.913 6.521 10.186 12.35 7.151 13.119 16.96 13.119 16.96l.535 6.147z"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M85.382 227.302s20.031 6.278 15.546 33.096M97.083 229.547s-2.76 1.86-1.88 4.655M87.39 231.203s1.687-1.716 3.741-.768M95.31 239.832s2.963-1.495 3.728.379M102.638 242.962s-2.224-.176-2.263.897"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M101.2 260.575s-7.961-16.193-10.147-15.846c-1.037.17-1.516 1.196-1.734 2.218a6.516 6.516 0 00.434 3.941c1.13 2.601 4.165 7.519 11.447 9.687z"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M91.113 247.808s8.353 12.115 9.968 12.647"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M90.344 249.701L92.293 249.701"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M92.68 254.132L95.738 254.263"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M94.542 250.586L94.21 252.179"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M97.792 255.432L97.732 256.879"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M100.964 260.575s7.959-16.193 10.144-15.846c1.041.17 1.519 1.196 1.734 2.218a6.514 6.514 0 01-.433 3.941c-1.13 2.601-4.168 7.519-11.445 9.687z"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M111.051 247.808s-8.371 12.115-9.97 12.647"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M111.82 249.701L109.871 249.701"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M109.485 254.132L106.426 254.263"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M107.622 250.586L107.954 252.179"
+          />
+          <path
+            stroke={PRIMARY_DARKER}
+            strokeLinecap="round"
+            strokeWidth="0.5"
+            d="M104.372 255.432L104.432 256.879"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M87.295 264.357a1.375 1.375 0 01-.452-.685.599.599 0 01.317-.697c.3-.11.598.09.837.299.24.21.512.431.81.38a1.237 1.237 0 01-.382-1.16.47.47 0 01.105-.236c.161-.174.454-.099.648.039.598.43.787 1.264.79 2.018.03-.277.03-.555 0-.831a.853.853 0 01.334-.727.938.938 0 01.476-.114.988.988 0 01.774.222.767.767 0 01-.03.947c-.229.257-.5.474-.801.64a1.805 1.805 0 00-.571.547.399.399 0 00-.042.096h-1.74a4.826 4.826 0 01-1.073-.738zM117.626 257.833a1.355 1.355 0 01-.452-.682.599.599 0 01.314-.696c.299-.111.598.089.837.299.239.209.509.436.817.391a1.236 1.236 0 01-.386-1.157.472.472 0 01.107-.236c.162-.173.455-.099.649.036.613.433.787 1.268.79 2.021a4.008 4.008 0 000-.834.852.852 0 01.299-.736.955.955 0 01.475-.11.998.998 0 01.774.218.768.768 0 01-.033.951 2.996 2.996 0 01-.798.64 1.767 1.767 0 00-.571.544.499.499 0 00-.042.098h-1.701a4.78 4.78 0 01-1.079-.747zM107.518 264.357a1.406 1.406 0 01-.455-.685.6.6 0 01.317-.697c.299-.11.598.09.837.299.239.21.505.437.816.395a1.247 1.247 0 01-.385-1.16.472.472 0 01.107-.236c.162-.174.455-.099.649.039.613.43.783 1.264.789 2.018.03-.277.03-.555 0-.832a.855.855 0 01.314-.735.93.93 0 01.476-.114.988.988 0 01.774.222.764.764 0 01-.033.947 3.028 3.028 0 01-.798.64 1.798 1.798 0 00-.571.547.411.411 0 00-.042.096h-1.734c-.385-.2-.742-.45-1.061-.744z"
+          />
+          <circle
+            cx="84.467"
+            cy="87.003"
+            r="6.467"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+          />
+          <circle
+            cx="395.425"
+            cy="138.681"
+            r="6.467"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+          />
+          <circle
+            cx="279.178"
+            cy="66.467"
+            r="6.467"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+          />
+          <circle
+            cx="97.4"
+            cy="122.68"
+            r="10.838"
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            opacity="0.1"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="nonzero"
+            d="M206.029 209.911c-7.975 0-14.44 6.465-14.44 14.44s6.465 14.44 14.44 14.44 14.44-6.465 14.44-14.44-6.465-14.44-14.44-14.44z"
+          />
+          <path
+            fill={PRIMARY_MAIN}
+            fillRule="nonzero"
+            d="M206.029 211.59c7.047 0 12.761 5.714 12.761 12.761 0 7.048-5.714 12.761-12.761 12.761-7.048 0-12.761-5.713-12.761-12.761.006-7.045 5.716-12.754 12.761-12.761"
+            opacity="0.72"
+          />
+          <path
+            fill={PRIMARY_DARK}
+            fillRule="nonzero"
+            d="M200.058 225.406l-.699-.681a.721.721 0 010-1.065l6.127-5.984a.753.753 0 01.546-.231c.206 0 .404.083.545.231l6.127 5.978a.733.733 0 010 1.065l-.699.682a.768.768 0 01-1.091 0l-3.622-3.727v8.843a.725.725 0 01-.219.523.76.76 0 01-.534.217h-1.009a.75.75 0 01-.759-.74v-8.832l-3.622 3.726a.768.768 0 01-1.091-.005z"
+          />
+        </g>
+      </svg>
+    </Box>
+  );
+}
--- a/frontend/src/assets/index.ts
+++ b/frontend/src/assets/index.ts
@@ -0,0 +1,17 @@
+export { default as DocIllustration } from './illustration_doc';
+export { default as SeoIllustration } from './illustration_seo';
+export { default as UploadIllustration } from './illustration_upload';
+export { default as SeverErrorIllustration } from './illustration_500';
+export { default as PageNotFoundIllustration } from './illustration_404';
+export { default as MotivationIllustration } from './illustration_motivation';
+export { default as ComingSoonIllustration } from './illustration_coming_soon';
+export { default as MaintenanceIllustration } from './illustration_maintenance';
+export { default as OrderCompleteIllustration } from './illustration_order_complete';
+export { default as BookingIllustration } from './illustration_booking';
+export { default as CheckInIllustration } from './illustration_checkin';
+export { default as CheckOutIllustration } from './illustration_checkout';
+//
+export { default as SentIcon } from './icon_sent';
+export { default as PlanFreeIcon } from './icon_plan_free';
+export { default as PlanStarterIcon } from './icon_plan_starter';
+export { default as PlanPremiumIcon } from './icon_plan_premium';
--- a/frontend/src/components/BadgeStatus.tsx
+++ b/frontend/src/components/BadgeStatus.tsx
@@ -0,0 +1,100 @@
+// @mui
+import { Theme, useTheme, styled } from '@mui/material/styles';
+import { BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export type BadgeStatusEnum =
+  | 'away'
+  | 'busy'
+  | 'unread'
+  | 'online'
+  | 'offline'
+  | 'invisible'
+  | string;
+
+type BadgeSize = 'small' | 'medium' | 'large';
+
+const RootStyle = styled('span')(
+  ({
+    theme,
+    ownerState,
+  }: {
+    theme: Theme;
+    ownerState: {
+      size: BadgeSize;
+      status: BadgeStatusEnum;
+    };
+  }) => {
+    const { status, size } = ownerState;
+
+    return {
+      width: 10,
+      height: 10,
+      display: 'flex',
+      borderRadius: '50%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:before, &:after': {
+        content: "''",
+        borderRadius: 1,
+        backgroundColor: theme.palette.common.white,
+      },
+
+      ...(size === 'small' && { width: 8, height: 8 }),
+
+      ...(size === 'large' && { width: 12, height: 12 }),
+
+      ...(status === 'offline' && { backgroundColor: 'transparent' }),
+
+      ...(status === 'away' && {
+        backgroundColor: theme.palette.warning.main,
+        '&:before': {
+          width: 2,
+          height: 4,
+          transform: 'translateX(1px) translateY(-1px)',
+        },
+        '&:after': {
+          width: 2,
+          height: 4,
+          transform: 'translateY(1px) rotate(125deg)',
+        },
+      }),
+
+      ...(status === 'busy' && {
+        backgroundColor: theme.palette.error.main,
+        '&:before': { width: 6, height: 2 },
+      }),
+
+      ...(status === 'online' && {
+        backgroundColor: theme.palette.success.main,
+      }),
+
+      ...(status === 'invisible' && {
+        backgroundColor: theme.palette.text.disabled,
+        '&:before': {
+          width: 6,
+          height: 6,
+          borderRadius: '50%',
+        },
+      }),
+
+      ...(status === 'unread' && {
+        backgroundColor: theme.palette.info.main,
+      }),
+    };
+  }
+);
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  size?: BadgeSize;
+  status?: BadgeStatusEnum;
+}
+
+export default function BadgeStatus({ size = 'medium', status = 'offline', sx }: Props) {
+  const theme = useTheme();
+
+  return <RootStyle ownerState={{ status, size }} sx={sx} theme={theme} />;
+}
--- a/frontend/src/components/Iconify.tsx
+++ b/frontend/src/components/Iconify.tsx
@@ -0,0 +1,15 @@
+// icons
+import { Icon, IconifyIcon } from '@iconify/react';
+// @mui
+import { Box, BoxProps, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  sx?: SxProps;
+  icon: IconifyIcon | string;
+}
+
+export default function Iconify({ icon, sx, ...other }: Props) {
+  return <Box component={Icon} icon={icon} sx={{ ...sx }} {...other} />;
+}
--- a/frontend/src/components/Image.tsx
+++ b/frontend/src/components/Image.tsx
@@ -0,0 +1,97 @@
+import { LazyLoadImage, LazyLoadImageProps } from 'react-lazy-load-image-component';
+// @mui
+import { Theme } from '@mui/material/styles';
+import { Box, BoxProps, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export type ImageRato = '4/3' | '3/4' | '6/4' | '4/6' | '16/9' | '9/16' | '21/9' | '9/21' | '1/1';
+
+type IProps = BoxProps & LazyLoadImageProps;
+
+interface Props extends IProps {
+  sx?: SxProps<Theme>;
+  ratio?: ImageRato;
+  disabledEffect?: boolean;
+}
+
+export default function Image({
+  ratio,
+  disabledEffect = false,
+  effect = 'blur',
+  sx,
+  ...other
+}: Props) {
+  if (ratio) {
+    return (
+      <Box
+        component="span"
+        sx={{
+          width: 1,
+          lineHeight: 0,
+          display: 'block',
+          overflow: 'hidden',
+          position: 'relative',
+          pt: getRatio(ratio),
+          '& .wrapper': {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            lineHeight: 0,
+            position: 'absolute',
+            backgroundSize: 'cover !important',
+          },
+          ...sx,
+        }}
+      >
+        <Box
+          component={LazyLoadImage}
+          wrapperClassName="wrapper"
+          effect={disabledEffect ? undefined : effect}
+          placeholderSrc="https://zone-assets-api.vercel.app/assets/img_placeholder.svg"
+          sx={{ width: 1, height: 1, objectFit: 'cover' }}
+          {...other}
+        />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        lineHeight: 0,
+        display: 'block',
+        overflow: 'hidden',
+        '& .wrapper': { width: 1, height: 1, backgroundSize: 'cover !important' },
+        ...sx,
+      }}
+    >
+      <Box
+        component={LazyLoadImage}
+        wrapperClassName="wrapper"
+        effect={disabledEffect ? undefined : effect}
+        placeholderSrc="https://zone-assets-api.vercel.app/assets/img_placeholder.svg"
+        sx={{ width: 1, height: 1, objectFit: 'cover' }}
+        {...other}
+      />
+    </Box>
+  );
+}
+
+// ----------------------------------------------------------------------
+
+function getRatio(ratio = '1/1') {
+  return {
+    '4/3': 'calc(100% / 4 * 3)',
+    '3/4': 'calc(100% / 3 * 4)',
+    '6/4': 'calc(100% / 6 * 4)',
+    '4/6': 'calc(100% / 4 * 6)',
+    '16/9': 'calc(100% / 16 * 9)',
+    '9/16': 'calc(100% / 9 * 16)',
+    '21/9': 'calc(100% / 21 * 9)',
+    '9/21': 'calc(100% / 9 * 21)',
+    '1/1': '100%',
+  }[ratio];
+}
--- a/frontend/src/components/LoadingScreen.tsx
+++ b/frontend/src/components/LoadingScreen.tsx
@@ -0,0 +1,94 @@
+import { m } from 'framer-motion';
+// @mui
+import { alpha, styled } from '@mui/material/styles';
+import { Box, SxProps } from '@mui/material';
+//
+import Logo from './Logo';
+import ProgressBar from './ProgressBar';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('div')(({ theme }) => ({
+  right: 0,
+  bottom: 0,
+  zIndex: 99999,
+  width: '100%',
+  height: '100%',
+  position: 'fixed',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: theme.palette.background.default,
+}));
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  isDashboard?: boolean;
+  sx?: SxProps;
+};
+
+export default function LoadingScreen({ isDashboard, ...other }: Props) {
+  return (
+    <>
+      <ProgressBar />
+
+      {!isDashboard && (
+        <RootStyle {...other}>
+          <m.div
+            initial={{ rotateY: 0 }}
+            animate={{ rotateY: 360 }}
+            transition={{
+              duration: 2,
+              ease: 'easeInOut',
+              repeatDelay: 1,
+              repeat: Infinity,
+            }}
+          >
+            <Logo disabledLink sx={{ width: 64, height: 64 }} />
+          </m.div>
+
+          <Box
+            component={m.div}
+            animate={{
+              scale: [1.2, 1, 1, 1.2, 1.2],
+              rotate: [270, 0, 0, 270, 270],
+              opacity: [0.25, 1, 1, 1, 0.25],
+              borderRadius: ['25%', '25%', '50%', '50%', '25%'],
+            }}
+            transition={{ ease: 'linear', duration: 3.2, repeat: Infinity }}
+            sx={{
+              width: 100,
+              height: 100,
+              borderRadius: '25%',
+              position: 'absolute',
+              border: (theme) => `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`,
+            }}
+          />
+
+          <Box
+            component={m.div}
+            animate={{
+              scale: [1, 1.2, 1.2, 1, 1],
+              rotate: [0, 270, 270, 0, 0],
+              opacity: [1, 0.25, 0.25, 0.25, 1],
+              borderRadius: ['25%', '25%', '50%', '50%', '25%'],
+            }}
+            transition={{
+              ease: 'linear',
+              duration: 3.2,
+              repeat: Infinity,
+            }}
+            sx={{
+              width: 120,
+              height: 120,
+              borderRadius: '25%',
+              position: 'absolute',
+              border: (theme) => `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`,
+            }}
+          />
+        </RootStyle>
+      )}
+    </>
+  );
+}
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -0,0 +1,58 @@
+import { Link as RouterLink } from 'react-router-dom';
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  disabledLink?: boolean;
+}
+
+export default function Logo({ disabledLink = false, sx }: Props) {
+  const theme = useTheme();
+  const PRIMARY_LIGHT = theme.palette.primary.light;
+  const PRIMARY_MAIN = theme.palette.primary.main;
+  const PRIMARY_DARK = theme.palette.primary.dark;
+
+  const logo = (
+    <Box sx={{ width: 40, height: 40, ...sx }}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512">
+        <defs>
+          <linearGradient id="BG1" x1="100%" x2="50%" y1="9.946%" y2="50%">
+            <stop offset="0%" stopColor={PRIMARY_DARK} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} />
+          </linearGradient>
+          <linearGradient id="BG2" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stopColor={PRIMARY_LIGHT} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} />
+          </linearGradient>
+          <linearGradient id="BG3" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stopColor={PRIMARY_LIGHT} />
+            <stop offset="100%" stopColor={PRIMARY_MAIN} />
+          </linearGradient>
+        </defs>
+        <g fill={PRIMARY_MAIN} fillRule="evenodd" stroke="none" strokeWidth="1">
+          <path
+            fill="url(#BG1)"
+            d="M183.168 285.573l-2.918 5.298-2.973 5.363-2.846 5.095-2.274 4.043-2.186 3.857-2.506 4.383-1.6 2.774-2.294 3.939-1.099 1.869-1.416 2.388-1.025 1.713-1.317 2.18-.95 1.558-1.514 2.447-.866 1.38-.833 1.312-.802 1.246-.77 1.18-.739 1.111-.935 1.38-.664.956-.425.6-.41.572-.59.8-.376.497-.537.69-.171.214c-10.76 13.37-22.496 23.493-36.93 29.334-30.346 14.262-68.07 14.929-97.202-2.704l72.347-124.682 2.8-1.72c49.257-29.326 73.08 1.117 94.02 40.927z"
+          />
+          <path
+            fill="url(#BG2)"
+            d="M444.31 229.726c-46.27-80.956-94.1-157.228-149.043-45.344-7.516 14.384-12.995 42.337-25.267 42.337v-.142c-12.272 0-17.75-27.953-25.265-42.337C189.79 72.356 141.96 148.628 95.69 229.584c-3.483 6.106-6.828 11.932-9.69 16.996 106.038-67.127 97.11 135.667 184 137.278V384c86.891-1.611 77.962-204.405 184-137.28-2.86-5.062-6.206-10.888-9.69-16.994"
+          />
+          <path
+            fill="url(#BG3)"
+            d="M450 384c26.509 0 48-21.491 48-48s-21.491-48-48-48-48 21.491-48 48 21.491 48 48 48"
+          />
+        </g>
+      </svg>
+    </Box>
+  );
+
+  if (disabledLink) {
+    return <>{logo}</>;
+  }
+
+  return <RouterLink to="/">{logo}</RouterLink>;
+}
--- a/frontend/src/components/MenuPopover.tsx
+++ b/frontend/src/components/MenuPopover.tsx
@@ -0,0 +1,120 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import { Popover, PopoverProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type Arrow =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-center'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-center'
+  | 'right-bottom';
+
+type ArrowStyleProps = {
+  arrow: Arrow;
+};
+
+const ArrowStyle = styled('span')<ArrowStyleProps>(({ arrow, theme }) => {
+  const SIZE = 12;
+
+  const POSITION = -(SIZE / 2);
+
+  const borderStyle = `solid 1px ${theme.palette.grey[500_12]}`;
+
+  const topStyle = {
+    borderRadius: '0 0 3px 0',
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle,
+  };
+  const bottomStyle = {
+    borderRadius: '3px 0 0 0',
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle,
+  };
+  const leftStyle = {
+    borderRadius: '0 3px 0 0',
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle,
+  };
+  const rightStyle = {
+    borderRadius: '0 0 0 3px',
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle,
+  };
+
+  return {
+    [theme.breakpoints.up('sm')]: {
+      zIndex: 1,
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      position: 'absolute',
+
+      transform: 'rotate(-135deg)',
+      background: theme.palette.background.paper,
+    },
+    // Top
+    ...(arrow === 'top-left' && { ...topStyle, left: 20 }),
+    ...(arrow === 'top-center' && { ...topStyle, left: 0, right: 0, margin: 'auto' }),
+    ...(arrow === 'top-right' && { ...topStyle, right: 20 }),
+    // Bottom
+    ...(arrow === 'bottom-left' && { ...bottomStyle, left: 20 }),
+    ...(arrow === 'bottom-center' && { ...bottomStyle, left: 0, right: 0, margin: 'auto' }),
+    ...(arrow === 'bottom-right' && { ...bottomStyle, right: 20 }),
+    // Left
+    ...(arrow === 'left-top' && { ...leftStyle, top: 20 }),
+    ...(arrow === 'left-center' && { ...leftStyle, top: 0, bottom: 0, margin: 'auto' }),
+    ...(arrow === 'left-bottom' && { ...leftStyle, bottom: 20 }),
+    // Right
+    ...(arrow === 'right-top' && { ...rightStyle, top: 20 }),
+    ...(arrow === 'right-center' && { ...rightStyle, top: 0, bottom: 0, margin: 'auto' }),
+    ...(arrow === 'right-bottom' && { ...rightStyle, bottom: 20 }),
+  };
+});
+
+// ----------------------------------------------------------------------
+
+interface Props extends PopoverProps {
+  arrow?: Arrow;
+  disabledArrow?: boolean;
+}
+
+export default function MenuPopover({
+  children,
+  arrow = 'top-right',
+  disabledArrow,
+  sx,
+  ...other
+}: Props) {
+  return (
+    <Popover
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      PaperProps={{
+        sx: {
+          p: 1,
+          width: 200,
+          overflow: 'inherit',
+          ...sx,
+        },
+      }}
+      {...other}
+    >
+      {!disabledArrow && <ArrowStyle arrow={arrow} />}
+
+      {children}
+    </Popover>
+  );
+}
--- a/frontend/src/components/Page.tsx
+++ b/frontend/src/components/Page.tsx
@@ -0,0 +1,27 @@
+import { Helmet } from 'react-helmet-async';
+import { forwardRef, ReactNode } from 'react';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  children: ReactNode;
+  meta?: ReactNode;
+  title: string;
+}
+
+const Page = forwardRef<HTMLDivElement, Props>(({ children, title = '', meta, ...other }, ref) => (
+  <>
+    <Helmet>
+      <title>{`${title} | Minimal-UI`}</title>
+      {meta}
+    </Helmet>
+
+    <Box ref={ref} {...other}>
+      {children}
+    </Box>
+  </>
+));
+
+export default Page;
--- a/frontend/src/components/ProgressBar.tsx
+++ b/frontend/src/components/ProgressBar.tsx
@@ -0,0 +1,57 @@
+import NProgress from 'nprogress';
+import { useEffect, useMemo } from 'react';
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { GlobalStyles } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+export function ProgressBarStyle() {
+  const theme = useTheme();
+
+  return (
+    <GlobalStyles
+      styles={{
+        '#nprogress': {
+          pointerEvents: 'none',
+          '& .bar': {
+            top: 0,
+            left: 0,
+            height: 2,
+            width: '100%',
+            position: 'fixed',
+            zIndex: theme.zIndex.snackbar,
+            backgroundColor: theme.palette.primary.main,
+            boxShadow: `0 0 2px ${theme.palette.primary.main}`
+          },
+          '& .peg': {
+            right: 0,
+            opacity: 1,
+            width: 100,
+            height: '100%',
+            display: 'block',
+            position: 'absolute',
+            transform: 'rotate(3deg) translate(0px, -4px)',
+            boxShadow: `0 0 10px ${theme.palette.primary.main}, 0 0 5px ${theme.palette.primary.main}`
+          }
+        }
+      }}
+    />
+  );
+}
+
+export default function ProgressBar() {
+  NProgress.configure({
+    showSpinner: false
+  });
+
+  useMemo(() => {
+    NProgress.start();
+  }, []);
+
+  useEffect(() => {
+    NProgress.done();
+  }, []);
+
+  return null;
+}
--- a/frontend/src/components/RtlLayout.tsx
+++ b/frontend/src/components/RtlLayout.tsx
@@ -0,0 +1,29 @@
+import { useEffect, ReactNode } from 'react';
+// rtl
+import rtlPlugin from 'stylis-plugin-rtl';
+// emotion
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+// @mui
+import { useTheme } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function RtlLayout({ children }: Props) {
+  const theme = useTheme();
+
+  useEffect(() => {
+    document.dir = theme.direction;
+  }, [theme.direction]);
+
+  const cacheRtl = createCache({
+    key: theme.direction === 'rtl' ? 'rtl' : 'css',
+    stylisPlugins: theme.direction === 'rtl' ? [rtlPlugin] : [],
+  });
+
+  return <CacheProvider value={cacheRtl}>{children}</CacheProvider>;
+}
--- a/frontend/src/components/ScrollToTop.ts
+++ b/frontend/src/components/ScrollToTop.ts
@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// ----------------------------------------------------------------------
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
--- a/frontend/src/components/Scrollbar.tsx
+++ b/frontend/src/components/Scrollbar.tsx
@@ -0,0 +1,61 @@
+import SimpleBarReact, { Props as ScrollbarProps } from 'simplebar-react';
+// @mui
+import { alpha, styled } from '@mui/material/styles';
+import { Box, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled('div')(() => ({
+  flexGrow: 1,
+  height: '100%',
+  overflow: 'hidden',
+}));
+
+const SimpleBarStyle = styled(SimpleBarReact)(({ theme }) => ({
+  maxHeight: '100%',
+  '& .simplebar-scrollbar': {
+    '&:before': {
+      backgroundColor: alpha(theme.palette.grey[600], 0.48),
+    },
+    '&.simplebar-visible:before': {
+      opacity: 1,
+    },
+  },
+  '& .simplebar-track.simplebar-vertical': {
+    width: 10,
+  },
+  '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
+    height: 6,
+  },
+  '& .simplebar-mask': {
+    zIndex: 'inherit',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+interface Props extends ScrollbarProps {
+  sx?: SxProps;
+}
+
+export default function Scrollbar({ children, sx, ...other }: Props) {
+  const userAgent = typeof navigator === 'undefined' ? 'SSR' : navigator.userAgent;
+
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+
+  if (isMobile) {
+    return (
+      <Box sx={{ overflowX: 'auto', ...sx }} {...other}>
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <RootStyle>
+      <SimpleBarStyle timeout={500} clickOnTrack={false} sx={sx} {...other}>
+        {children}
+      </SimpleBarStyle>
+    </RootStyle>
+  );
+}
--- a/frontend/src/components/SvgIconStyle.tsx
+++ b/frontend/src/components/SvgIconStyle.tsx
@@ -0,0 +1,24 @@
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends BoxProps {
+  src: string;
+}
+
+export default function SvgIconStyle({ src, sx }: Props) {
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: 24,
+        height: 24,
+        display: 'inline-block',
+        bgcolor: 'currentColor',
+        mask: `url(${src}) no-repeat center / contain`,
+        WebkitMask: `url(${src}) no-repeat center / contain`,
+        ...sx,
+      }}
+    />
+  );
+}
--- a/frontend/src/components/ThemeColorPresets.tsx
+++ b/frontend/src/components/ThemeColorPresets.tsx
@@ -0,0 +1,38 @@
+import { ReactNode, useMemo } from 'react';
+// @mui
+import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
+// hooks
+import useSettings from '../hooks/useSettings';
+//
+import componentsOverride from '../theme/overrides';
+
+// ----------------------------------------------------------------------
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function ThemeColorPresets({ children }: Props) {
+  const defaultTheme = useTheme();
+  const { setColor } = useSettings();
+
+  const themeOptions = useMemo(
+    () => ({
+      ...defaultTheme,
+      palette: {
+        ...defaultTheme.palette,
+        primary: setColor,
+      },
+      customShadows: {
+        ...defaultTheme.customShadows,
+        primary: `0 8px 16px 0 ${alpha(setColor.main, 0.24)}`,
+      },
+    }),
+    [setColor, defaultTheme]
+  );
+
+  const theme = createTheme(themeOptions);
+  theme.components = componentsOverride(theme);
+
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
--- a/frontend/src/components/animate/DialogAnimate.tsx
+++ b/frontend/src/components/animate/DialogAnimate.tsx
@@ -0,0 +1,61 @@
+import { m, AnimatePresence } from 'framer-motion';
+// @mui
+import { Dialog, Box, Paper, DialogProps } from '@mui/material';
+//
+import { varFade } from './variants';
+
+// ----------------------------------------------------------------------
+
+export interface Props extends DialogProps {
+  variants?: Record<string, unknown>;
+  onClose?: VoidFunction;
+}
+
+export default function DialogAnimate({
+  open = false,
+  variants,
+  onClose,
+  children,
+  sx,
+  ...other
+}: Props) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <Dialog
+          fullWidth
+          maxWidth="xs"
+          open={open}
+          onClose={onClose}
+          PaperComponent={(props) => (
+            <Box
+              component={m.div}
+              {...(variants ||
+                varFade({
+                  distance: 120,
+                  durationIn: 0.32,
+                  durationOut: 0.24,
+                  easeIn: 'easeInOut',
+                }).inUp)}
+              sx={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Box onClick={onClose} sx={{ width: '100%', height: '100%', position: 'fixed' }} />
+              <Paper sx={sx} {...props}>
+                {props.children}
+              </Paper>
+            </Box>
+          )}
+          {...other}
+        >
+          {children}
+        </Dialog>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/frontend/src/components/animate/FabButtonAnimate.tsx
+++ b/frontend/src/components/animate/FabButtonAnimate.tsx
@@ -0,0 +1,107 @@
+import { m } from 'framer-motion';
+import { forwardRef, ReactNode } from 'react';
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, Fab, FabProps, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends Omit<FabProps, 'color'> {
+  sxWrap?: SxProps;
+  color?:
+    | 'inherit'
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+}
+
+const FabButtonAnimate = forwardRef<HTMLButtonElement, Props>(
+  ({ color = 'primary', size = 'large', children, sx, sxWrap, ...other }, ref) => {
+    const theme = useTheme();
+
+    if (
+      color === 'default' ||
+      color === 'inherit' ||
+      color === 'primary' ||
+      color === 'secondary'
+    ) {
+      return (
+        <AnimateWrap size={size} sxWrap={sxWrap}>
+          <Fab ref={ref} size={size} color={color} sx={sx} {...other}>
+            {children}
+          </Fab>
+        </AnimateWrap>
+      );
+    }
+
+    return (
+      <AnimateWrap size={size} sxWrap={sxWrap}>
+        <Fab
+          ref={ref}
+          size={size}
+          sx={{
+            boxShadow: theme.customShadows[color],
+            color: theme.palette[color].contrastText,
+            bgcolor: theme.palette[color].main,
+            '&:hover': {
+              bgcolor: theme.palette[color].dark,
+            },
+            ...sx,
+          }}
+          {...other}
+        >
+          {children}
+        </Fab>
+      </AnimateWrap>
+    );
+  }
+);
+
+export default FabButtonAnimate;
+
+// ----------------------------------------------------------------------
+
+type AnimateWrapProp = {
+  children: ReactNode;
+  size: 'small' | 'medium' | 'large';
+  sxWrap?: SxProps;
+};
+
+const varSmall = {
+  hover: { scale: 1.07 },
+  tap: { scale: 0.97 },
+};
+
+const varMedium = {
+  hover: { scale: 1.06 },
+  tap: { scale: 0.98 },
+};
+
+const varLarge = {
+  hover: { scale: 1.05 },
+  tap: { scale: 0.99 },
+};
+
+function AnimateWrap({ size, children, sxWrap }: AnimateWrapProp) {
+  const isSmall = size === 'small';
+  const isLarge = size === 'large';
+
+  return (
+    <Box
+      component={m.div}
+      whileTap="tap"
+      whileHover="hover"
+      variants={(isSmall && varSmall) || (isLarge && varLarge) || varMedium}
+      sx={{
+        display: 'inline-flex',
+        ...sxWrap,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
--- a/frontend/src/components/animate/IconButtonAnimate.tsx
+++ b/frontend/src/components/animate/IconButtonAnimate.tsx
@@ -0,0 +1,59 @@
+import { m } from 'framer-motion';
+import { forwardRef, ReactNode } from 'react';
+// @mui
+import { Box, IconButton, IconButtonProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+const IconButtonAnimate = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, size = 'medium', ...other }, ref) => (
+    <AnimateWrap size={size}>
+      <IconButton size={size} ref={ref} {...other}>
+        {children}
+      </IconButton>
+    </AnimateWrap>
+  )
+);
+
+export default IconButtonAnimate;
+
+// ----------------------------------------------------------------------
+
+type AnimateWrapProp = {
+  children: ReactNode;
+  size: 'small' | 'medium' | 'large';
+};
+
+const varSmall = {
+  hover: { scale: 1.1 },
+  tap: { scale: 0.95 },
+};
+
+const varMedium = {
+  hover: { scale: 1.09 },
+  tap: { scale: 0.97 },
+};
+
+const varLarge = {
+  hover: { scale: 1.08 },
+  tap: { scale: 0.99 },
+};
+
+function AnimateWrap({ size, children }: AnimateWrapProp) {
+  const isSmall = size === 'small';
+  const isLarge = size === 'large';
+
+  return (
+    <Box
+      component={m.div}
+      whileTap="tap"
+      whileHover="hover"
+      variants={(isSmall && varSmall) || (isLarge && varLarge) || varMedium}
+      sx={{
+        display: 'inline-flex',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m20.247634 1c1.0125221 0 1.8333334.82081129 1.8333334 1.83333333s-.8208113 1.83333334-1.8333334 1.83333334c-.3158442 0-.6130339-.07986936-.8724738-.22051281l-3.0249251 3.47961717c.1346337.25513483.2108509.5458717.2108509.85441003 0 1.01252204-.8208113 1.83333334-1.8333334 1.83333334-.9820883 0-1.7838173-.7722101-1.8311257-1.74256896l-2.2033918-.75849737c-.336256.40778098-.84535009.66773299-1.41515923.66773299-.32712483 0-.63423886-.08567643-.90012689-.2358141l-2.87560465 2.41277624c.05416355.1730906.08335496.3572185.08335496.5481644 0 1.012522-.8208113 1.8333333-1.83333334 1.8333333s-1.83333333-.8208113-1.83333333-1.8333333c0-1.0125221.82081129-1.83333335 1.83333333-1.83333335.33090488 0 .64133381.08766791.90932763.24104456l2.86960725-2.40787374c-.05621505-.1760311-.0865583-.3636207-.0865583-.55829735 0-1.01252204.8208113-1.83333333 1.83333334-1.83333333.97577423 0 1.77350093.76231258 1.83011983 1.7238777l2.2160025.76325559c.336304-.39976002.8402621-.65379996 1.4035544-.65379996.2130474 0 .4176071.03634016.6078186.10315996l3.1693503-3.64581344c-.0588143-.17965899-.0906208-.37154554-.0906208-.57086091 0-1.01252204.8208113-1.83333333 1.8333333-1.83333333z" opacity=".48"/><path d="m21.1666667 9.60855714c.506261 0 .9166666.41040566.9166666.91666666v10.7540685c0 .2761423-.2238576.5-.5.5h-2.6666666c-.2761424 0-.5-.2238577-.5-.5v-10.7540685c0-.506261.4104056-.91666666.9166666-.91666666zm-5.5 6.42549146c.506261 0 .9166666.4104057.9166666.9166667v4.328577c0 .2761423-.2238576.5-.5.5h-2.6666666c-.2761424 0-.5-.2238577-.5-.5v-4.328577c0-.506261.4104056-.9166667.9166666-.9166667zm-5.5-1.8405511c.506261 0 .9166666.4104057.9166666.9166667v6.1691281c0 .2761423-.2238576.5-.5.5h-2.66666663c-.27614238 0-.5-.2238577-.5-.5v-6.1691281c0-.506261.41040564-.9166667.91666666-.9166667zm-5.50000003 4.7135227c.50626102 0 .91666666.4104057.91666666.9166667v1.4556054c0 .2761423-.22385762.5-.5.5h-2.66666666c-.27614238 0-.5-.2238577-.5-.5v-1.4556054c0-.506261.41040564-.9166667.91666666-.9166667z"/></svg>
				`@@ -0,0 +1 @@`
				<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="#637381"><path d="m16.8125 2.83333h-1.1459v-.91667c0-.50599-.4097-.91666-.9166-.91666s-.9167.41067-.9167.91666v.91667h-7.33331v-.91667c0-.50599-.40975-.91666-.91667-.91666-.50691 0-.91666.41067-.91666.91666v.91667h-1.14583c-1.39058 0-2.52083 1.13025-2.52083 2.52083v10.31244c0 1.5162 1.23383 2.75 2.74999 2.75h4.58333c.50691 0 .91666-.4106.91666-.9166s-.40975-.9167-.91666-.9167h-4.58333c-.50599 0-.91666-.4116-.91666-.9167v-7.33328h14.66667c0 .506.4097.91666.9166.91666s.9167-.41066.9167-.91666v-2.97916c0-1.39058-1.1302-2.52083-2.5208-2.52083z"/><path d="m17.0413 11.0834c-3.2853 0-5.9583 2.673-5.9583 5.9583s2.673 5.9583 5.9583 5.9583 5.9583-2.673 5.9583-5.9583-2.673-5.9583-5.9583-5.9583zm2.7555 4.9545-2.9791 3.4375c-.1669.1925-.4061.3062-.66.3163-.011 0-.022 0-.033 0-.243 0-.4758-.0963-.6481-.2686l-1.6042-1.6042c-.3584-.3584-.3584-.9377 0-1.2961.3584-.3585.9378-.3585 1.2962 0l.9084.9084 2.3338-2.6932c.3318-.3831.9112-.4226 1.2934-.0926.3823.331.4235.9103.0926 1.2925z" opacity=".48"/></g></svg>
				`@@ -0,0 +1 @@`
				`<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(5 3)"><path d="m7 8c2.209139 0 4-1.790861 4-4s-1.790861-4-4-4-4 1.790861-4 4 1.790861 4 4 4z" opacity=".48"/><path d="m13 18.0000001c.5522847 0 1-.4477154 1-1 0-3.8659933-3.1340068-7-7-7-3.86599321 0-7 3.1340067-7 7 0 .5522846.44771525 1 1 1z"/></g></svg>`
				`@@ -0,0 +1 @@`
				<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="100%" x2="50%" y1="5.663%" y2="50%"><stop offset="0" stop-color="#007b55"/><stop offset="1" stop-color="#00ab55"/></linearGradient><linearGradient id="b" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0" stop-color="#5be584"/><stop offset="1" stop-color="#00ab55"/></linearGradient><g fill="none" fill-rule="evenodd" transform="translate(14 128)"><path d="m92.8065878 83.1065019c44.2888442 22.8889511 46.3079382 23.9345951 46.4006692 23.9799821.012248.008728.642121.333419 44.792743 23.152545-26.071507 48.53952-42.693165 77.265922-49.868472 86.179207-10.758587 13.369926-22.495227 23.492946-36.929824 29.333888-30.3458978 14.261953-68.070062 14.928791-97.201704-2.704011z" fill="url(#a)"/><g fill="url(#b)"><path d="m430.310491 101.726093c-46.270793-80.9559274-94.100378-157.2284394-149.043472-45.3437359-7.516227 14.3833977-12.994566 42.3366008-25.267019 42.3366008v-.1420279c-12.272453 0-17.749057-27.9532032-25.265283-42.3366009-54.94483-111.8847034-102.774415-35.6121915-149.0452076 45.3437359-3.4821132 6.105448-6.8270943 11.9321-9.6895094 16.99601 106.037811-67.1266136 97.11034 135.666494 184 137.277897v.142028c86.891396-1.611403 77.962189-204.4045106 184-137.27965-2.860679-5.062157-6.20566-10.888809-9.689509-16.994257"/><path d="m436 256c26.5088 0 48-21.4912 48-48s-21.4912-48-48-48-48 21.4912-48 48 21.4912 48 48 48"/></g></g></svg>