diff --git a/.npmrc b/.npmrc
index 68fbcd57..b07f5c51 100644
--- a/.npmrc
+++ b/.npmrc
@@ -6,3 +6,4 @@ public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*vite-plugin-mock*
 public-hoist-pattern[]=vite
+strict-peer-dependencies=false
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 85ebc47f..0fb2b389 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -32,8 +32,8 @@
     "@vben/hooks": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locale": "workspace:*",
-    "@vben/pinia": "workspace:*",
     "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
diff --git a/apps/admin/src/layout/index.vue b/apps/admin/src/layout/index.vue
index 0f776d75..5c799f0f 100644
--- a/apps/admin/src/layout/index.vue
+++ b/apps/admin/src/layout/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Layout } from '@vben/layouts'
+
 </script>
 
 <template>
diff --git a/apps/admin/src/main.ts b/apps/admin/src/main.ts
index 8f886201..40aa53e7 100644
--- a/apps/admin/src/main.ts
+++ b/apps/admin/src/main.ts
@@ -6,7 +6,7 @@ import { createApp } from 'vue'
 import { router } from '@/router'
 import { setupRouteGuard } from '@/router/guard'
 import { setupI18n } from '@vben/locale'
-import { setupPinia } from '@vben/pinia'
+import { setupPinia } from '@vben/stores'
 import { initApplication } from './init-application'
 import { registerComponents } from '../init-components'
 ;(async () => {
diff --git a/apps/admin/src/pages/sys/login/login.vue b/apps/admin/src/pages/sys/login/login.vue
index 2f2ca608..cf837c4b 100644
--- a/apps/admin/src/pages/sys/login/login.vue
+++ b/apps/admin/src/pages/sys/login/login.vue
@@ -6,7 +6,6 @@ import ForgetPasswordForm from './forget-password-form.vue'
 import RegisterForm from './register-form.vue'
 import MobileForm from './mobile-form.vue'
 import QrCodeForm from './qrcode-form.vue'
-import { DarkModeToggle } from '@vben/layouts'
 const { bem } = createNamespace('login')
 
 defineProps({
diff --git a/apps/admin/src/store/auth.ts b/apps/admin/src/store/auth.ts
index 7aa32aa7..447126cd 100644
--- a/apps/admin/src/store/auth.ts
+++ b/apps/admin/src/store/auth.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { asyncRoutes, PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
 import { filterTree } from '@vben/utils'
 import { Menu } from '@vben/types'
diff --git a/apps/admin/src/store/config.ts b/apps/admin/src/store/config.ts
index 296e9157..c6d54ae0 100644
--- a/apps/admin/src/store/config.ts
+++ b/apps/admin/src/store/config.ts
@@ -6,7 +6,7 @@ import {
   ProjectConfig,
   TransitionSetting,
 } from '@vben/types'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { deepMerge } from '@vben/utils'
 import { APP_DARK_MODE_KEY_, ThemeEnum } from '@vben/constants'
 import { darkMode, projectSetting } from '@/setting'
diff --git a/apps/admin/src/store/lock.ts b/apps/admin/src/store/lock.ts
index b83c1e98..6296215a 100644
--- a/apps/admin/src/store/lock.ts
+++ b/apps/admin/src/store/lock.ts
@@ -1,5 +1,5 @@
 import type { LockInfo } from '@vben/types'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { useUserStore } from '@/store/user'
 
 interface LockState {
diff --git a/apps/admin/src/store/modules/app.ts b/apps/admin/src/store/modules/app.ts
index 03bef14b..6b1afc8c 100644
--- a/apps/admin/src/store/modules/app.ts
+++ b/apps/admin/src/store/modules/app.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 // import { pinia } from '@/pinia'
 import { resetRouter } from '@/router'
 
diff --git a/apps/admin/src/store/multipleTab.ts b/apps/admin/src/store/multipleTab.ts
index 492f88d6..fd896678 100644
--- a/apps/admin/src/store/multipleTab.ts
+++ b/apps/admin/src/store/multipleTab.ts
@@ -4,7 +4,7 @@ import type {
   Router,
 } from 'vue-router'
 import { toRaw, unref } from 'vue'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 
 import { useGo, useRedo } from '@vben/hooks'
 // import { Persistent } from '/@/utils/cache/persistent';
diff --git a/apps/admin/src/store/test.ts b/apps/admin/src/store/test.ts
index 724e63d3..6b6e0c3b 100644
--- a/apps/admin/src/store/test.ts
+++ b/apps/admin/src/store/test.ts
@@ -1,4 +1,4 @@
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 
 export const useTest = defineStore({
   id: 'use--test',
diff --git a/apps/admin/src/store/user.ts b/apps/admin/src/store/user.ts
index b1c6d462..0c1edfee 100644
--- a/apps/admin/src/store/user.ts
+++ b/apps/admin/src/store/user.ts
@@ -1,5 +1,5 @@
 import type { LoginParams } from '@/apis/auth'
-import { defineStore } from '@vben/pinia'
+import { defineStore } from 'pinia'
 import { BASIC_HOME_PATH, BASIC_LOGIN_PATH, PageEnum } from '@vben/constants'
 // import { pinia } from '@/pinia'
 import { router } from '@/router'
diff --git a/apps/grid-admin/.env b/apps/grid-admin/.env
new file mode 100644
index 00000000..41883baa
--- /dev/null
+++ b/apps/grid-admin/.env
@@ -0,0 +1,5 @@
+# spa title
+VITE_GLOB_APP_TITLE = Vben Admin
+
+# spa shortname
+VITE_GLOB_APP_SHORT_NAME = vben_admin
diff --git a/apps/grid-admin/.env.development b/apps/grid-admin/.env.development
new file mode 100644
index 00000000..cbc16168
--- /dev/null
+++ b/apps/grid-admin/.env.development
@@ -0,0 +1,21 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Cross-domain proxy, you can configure multiple
+# Please note that no line breaks
+VITE_PROXY = [["/basic-api","http://localhost:3000"]]
+# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+
+# Whether to enable https and http2 in the development environment
+# it will greatly optimize the loading speed at the first startup
+# 是否在开发环境开启 https 和 http2（开启后将大幅优化首次启动时加载速度）
+VITE_USE_HTTPS = true
+
+# Delete console
+VITE_DROP_CONSOLE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
diff --git a/apps/grid-admin/.env.production b/apps/grid-admin/.env.production
new file mode 100644
index 00000000..ac329c9c
--- /dev/null
+++ b/apps/grid-admin/.env.production
@@ -0,0 +1,28 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false
diff --git a/apps/grid-admin/index.html b/apps/grid-admin/index.html
new file mode 100644
index 00000000..9b193a7f
--- /dev/null
+++ b/apps/grid-admin/index.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <title><%= title %></title>
+    <link rel="icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="app">
+       <style>
+        .app-loading {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          background-color: #f4f7f9;
+        }
+
+        .app-loading .app-loading__wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          display: flex;
+          transform: translate3d(-50%, -50%, 0);
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .app-loading .dots {
+          display: flex;
+          padding: 98px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading-title {
+          display: flex;
+          margin-top: 30px;
+          font-size: 30px;
+          color: rgb(0 0 0 / 85%);
+          justify-content: center;
+          align-items: center;
+        }
+
+        .app-loading .app-loading__logo {
+          display: block;
+          width: 90px;
+          margin: 0 auto;
+          margin-bottom: 20px;
+        }
+
+        .dot {
+          position: relative;
+          display: inline-block;
+          width: 48px;
+          height: 48px;
+          margin-top: 30px;
+          font-size: 32px;
+          transform: rotate(45deg);
+          box-sizing: border-box;
+          animation: antRotate 1.2s infinite linear;
+        }
+
+        .dot i {
+          position: absolute;
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #0065cc;
+          border-radius: 100%;
+          opacity: 30%;
+          transform: scale(0.75);
+          animation: antSpinMove 1s infinite linear alternate;
+          transform-origin: 50% 50%;
+        }
+
+        .dot i:nth-child(1) {
+          top: 0;
+          left: 0;
+        }
+
+        .dot i:nth-child(2) {
+          top: 0;
+          right: 0;
+          animation-delay: 0.4s;
+        }
+
+        .dot i:nth-child(3) {
+          right: 0;
+          bottom: 0;
+          animation-delay: 0.8s;
+        }
+
+        .dot i:nth-child(4) {
+          bottom: 0;
+          left: 0;
+          animation-delay: 1.2s;
+        }
+
+        @keyframes antRotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antRotate {
+          to {
+            transform: rotate(405deg);
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 100%;
+          }
+        }
+
+        @keyframes antSpinMove {
+          to {
+            opacity: 100%;
+          }
+        }
+      </style>
+
+      <div class="app-loading">
+        <div class="app-loading__wrap">
+          <img src="/logo.png" class="app-loading__logo" alt="Logo" />
+          <div class="app-loading-dots">
+            <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+          </div>
+          <div class="app-loading-title"><%= title %></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/grid-admin/init-components.ts b/apps/grid-admin/init-components.ts
new file mode 100644
index 00000000..cf3fa770
--- /dev/null
+++ b/apps/grid-admin/init-components.ts
@@ -0,0 +1,194 @@
+// 按需导入组件
+import naive, {
+  darkTheme,
+  NTag,
+  NCard,
+  NDivider,
+  NSpace,
+  NPopover,
+  NButton,
+  NAvatar,
+  NStatistic,
+  NSelect,
+  NInput,
+  NThing,
+  NPopconfirm,
+  NIcon,
+  NIconWrapper,
+  NCheckbox,
+  NCheckboxGroup,
+  NButtonGroup,
+  NModal,
+  NEmpty,
+  NUpload,
+  NUploadDragger,
+  NTabs,
+  NTabPane,
+  NGrid,
+  NGridItem,
+  NEllipsis,
+  NImage,
+  NMessageProvider,
+  useMessage,
+  NPagination,
+  NRadio,
+  NRadioButton,
+  NRadioGroup,
+  NText,
+  NConfigProvider,
+  NDynamicTags,
+  NColorPicker,
+  NDescriptions,
+  NDescriptionsItem,
+  useNotification,
+  NNotificationProvider,
+  NSwitch,
+  NMenu,
+  // dateZhCN,
+  zhCN,
+  // darkTheme,
+  NBreadcrumb,
+  NBreadcrumbItem,
+  NLayout,
+  NLayoutSider,
+  NLayoutFooter,
+  NLayoutContent,
+  NLayoutHeader,
+  NForm,
+  NFormItem,
+  NDropdown,
+  NInputNumber,
+  NTreeSelect,
+  NBadge,
+  NListItem,
+  NList,
+  NAutoComplete,
+  NCascader,
+  NDatePicker,
+  NTimePicker,
+  NRate,
+  NSlider,
+  NTransfer,
+  NMention,
+  NFormItemGi,
+  NTree,
+  NH1,
+  NH2,
+  NH3,
+  NH4,
+  NH5,
+  NH6,
+  NInputGroupLabel,
+  NInputGroup,
+  NDrawer,
+  NDrawerContent,
+  NDynamicInput,
+  NPopselect,
+  NTime,
+  NScrollbar,
+  NElement,
+  NSkeleton,
+  NTooltip,
+  NTab,
+  NResult,
+  NAffix, NGradientText
+} from 'naive-ui'
+
+import { initVbenComponent, setNotice, setMessage } from '@vben/vbencomponents'
+
+export async function registerComponents(app) {
+  initVbenComponent(app, {
+    Drawer: NDrawer,
+    DrawerContent: NDrawerContent,
+    Tag: NTag,
+    Card: NCard,
+    Menu: NMenu,
+    Divider: NDivider,
+    Space: NSpace,
+    Popover: NPopover,
+    Button: NButton,
+    ButtonGroup: NButtonGroup,
+    Avatar: NAvatar,
+    Statistic: NStatistic,
+    Select: NSelect,
+    Input: NInput,
+    InputGroup: NInputGroup,
+    InputGroupLabel: NInputGroupLabel,
+    InputNumber: NInputNumber,
+    Form: NForm,
+    FormItem: NFormItem,
+    Thing: NThing,
+    Popconfirm: NPopconfirm,
+    Icon: NIcon,
+    IconWrapper: NIconWrapper,
+    Checkbox: NCheckbox,
+    CheckboxGroup: NCheckboxGroup,
+    Breadcrumb: NBreadcrumb,
+    BreadcrumbItem: NBreadcrumbItem,
+    Modal: NModal,
+    Empty: NEmpty,
+    Upload: NUpload,
+    UploadDragger: NUploadDragger,
+    Tabs: NTabs,
+    Tab: NTab,
+    TabPane: NTabPane,
+    Grid: NGrid,
+    GridItem: NGridItem,
+    Ellipsis: NEllipsis,
+    Image: NImage,
+    MessageProvider: NMessageProvider,
+    Pagination: NPagination,
+    Radio: NRadio,
+    RadioButton: NRadioButton,
+    RadioGroup: NRadioGroup,
+    Text: NText,
+    Config: NConfigProvider,
+    DynamicTags: NDynamicTags,
+    ColorPicker: NColorPicker,
+    Descriptions: NDescriptions,
+    DescriptionsItem: NDescriptionsItem,
+    NotificationProvider: NNotificationProvider,
+    Switch: NSwitch,
+    Layout: NLayout,
+    LayoutHeader: NLayoutHeader,
+    LayoutFooter: NLayoutFooter,
+    LayoutSider: NLayoutSider,
+    LayoutContent: NLayoutContent,
+    Dropdown: NDropdown,
+    TreeSelect: NTreeSelect,
+    Badge: NBadge,
+    ListItem: NListItem,
+    List: NList,
+    AutoComplete: NAutoComplete,
+    Cascader: NCascader,
+    DatePicker: NDatePicker,
+    TimePicker: NTimePicker,
+    Rate: NRate,
+    Slider: NSlider,
+    Transfer: NTransfer,
+    Mention: NMention,
+    FormItemGi: NFormItemGi,
+    Tree: NTree,
+    H1: NH1,
+    H2: NH2,
+    H3: NH3,
+    H4: NH4,
+    H5: NH5,
+    H6: NH6,
+    DynamicInput: NDynamicInput,
+    PopSelect: NPopselect,
+    Time: NTime,
+    Scrollbar: NScrollbar,
+    DarkTheme: darkTheme,
+    Element: NElement,
+    Skeleton: NSkeleton,
+    Tooltip: NTooltip,
+    Result: NResult,
+    Affix: NAffix,
+    GradientText: NGradientText
+  })
+  setMessage(useMessage)
+  setNotice(useNotification)
+  // @ts-ignore
+  // app.use(naive)
+}
diff --git a/apps/grid-admin/mock/_mock-server.ts b/apps/grid-admin/mock/_mock-server.ts
new file mode 100644
index 00000000..ff06484a
--- /dev/null
+++ b/apps/grid-admin/mock/_mock-server.ts
@@ -0,0 +1,16 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+
+const modules = import.meta.globEager('./**/*.ts')
+
+const mockModules: any[] = []
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) {
+    return
+  }
+  mockModules.push(...modules[key].default)
+})
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export const setupProdMockServer = () => createProdMockServer(mockModules)
diff --git a/apps/grid-admin/mock/auth.ts b/apps/grid-admin/mock/auth.ts
new file mode 100644
index 00000000..2a6505f0
--- /dev/null
+++ b/apps/grid-admin/mock/auth.ts
@@ -0,0 +1,121 @@
+import { MockMethod } from 'vite-plugin-mock'
+import {
+  resultError,
+  resultSuccess,
+  getRequestToken,
+  requestParams,
+} from '@vben/utils/mock-util'
+
+export function createFakeUserList() {
+  return [
+    {
+      userId: '1',
+      username: 'vben',
+      realname: 'Vben Admin',
+      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
+      desc: 'manager',
+      password: '123456',
+      accessToken: 'fakeToken1',
+      roles: [
+        {
+          name: 'Super Admin',
+          value: 'super',
+        },
+      ],
+    },
+    {
+      userId: '2',
+      username: 'test',
+      password: '123456',
+      realname: 'test user',
+      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
+      desc: 'tester',
+      accessToken: 'fakeToken2',
+      roles: [
+        {
+          name: 'Tester',
+          value: 'test',
+        },
+      ],
+    },
+  ]
+}
+
+const fakeCodeList: any = {
+  '1': ['1000', '3000', '5000'],
+
+  '2': ['2000', '4000', '6000'],
+}
+export default [
+  // mock user login
+  {
+    url: '/basic-api/login',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      const { username, password } = body
+
+      const checkUser = createFakeUserList().find(
+        (item) => item.username === username && password === item.password,
+      )
+
+      if (!checkUser) {
+        return resultError('Incorrect account or password！')
+      }
+
+      return resultSuccess(checkUser)
+    },
+  },
+  {
+    url: '/basic-api/getUserInfo',
+    method: 'get',
+    response: (request: requestParams) => {
+      const accessToken = getRequestToken(request)
+
+      if (!accessToken) return resultError('Invalid accessToken.')
+      const checkUser = createFakeUserList().find(
+        (item) => item.accessToken === accessToken,
+      )
+      if (!checkUser) {
+        return resultError(
+          'The corresponding user information was not obtained!',
+        )
+      }
+      return resultSuccess(checkUser)
+    },
+  },
+  {
+    url: '/basic-api/getPermCode',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const accessToken = getRequestToken(request)
+      if (!accessToken) return resultError('Invalid accessToken.')
+      const checkUser = createFakeUserList().find(
+        (item) => item.accessToken === accessToken,
+      )
+      if (!checkUser) {
+        return resultError('Invalid accessToken.')
+      }
+      const codeList = fakeCodeList[checkUser.userId]
+
+      return resultSuccess(codeList)
+    },
+  },
+  {
+    url: '/basic-api/logout',
+    timeout: 200,
+    method: 'get',
+    response: (request: requestParams) => {
+      const accessToken = getRequestToken(request)
+      if (!accessToken) return resultError('Invalid accessToken.')
+      const checkUser = createFakeUserList().find(
+        (item) => item.accessToken === accessToken,
+      )
+      if (!checkUser) {
+        return resultError('Invalid accessToken.')
+      }
+      return resultSuccess(undefined, { message: 'Token has been destroyed' })
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/mock/demo/form.ts b/apps/grid-admin/mock/demo/form.ts
new file mode 100644
index 00000000..f3f33948
--- /dev/null
+++ b/apps/grid-admin/mock/demo/form.ts
@@ -0,0 +1,271 @@
+import { MockMethod } from 'vite-plugin-mock'
+import { resultError, resultSuccess } from '@vben/utils/mock-util'
+
+export function createSelectData() {
+  return {
+    options: [
+      {
+        label: "Everybody's Got Something to Hide Except Me and My Monkey",
+        value: 'song0',
+        disabled: true,
+      },
+      {
+        label: 'Drive My Car',
+        value: 'song1',
+      },
+      {
+        label: 'Norwegian Wood',
+        value: 'song2',
+      },
+      {
+        label: "You Won't See",
+        value: 'song3',
+        disabled: true,
+      },
+      {
+        label: 'Nowhere Man',
+        value: 'song4',
+      },
+      {
+        label: 'Think For Yourself',
+        value: 'song5',
+      },
+      {
+        label: 'The Word',
+        value: 'song6',
+      },
+      {
+        label: 'Michelle',
+        value: 'song7',
+        disabled: true,
+      },
+      {
+        label: 'What goes on',
+        value: 'song8',
+      },
+      {
+        label: 'Girl',
+        value: 'song9',
+      },
+      {
+        label: "I'm looking through you",
+        value: 'song10',
+      },
+      {
+        label: 'In My Life',
+        value: 'song11',
+      },
+      {
+        label: 'Wait',
+        value: 'song12',
+      },
+    ],
+  }
+}
+
+export function createTreeSelectData() {
+  return {
+    options: [
+      {
+        label: 'Rubber Soul',
+        key: 'Rubber Soul',
+        children: [
+          {
+            label: "Everybody's Got Something to Hide Except Me and My Monkey",
+            key: "Everybody's Got Something to Hide Except Me and My Monkey",
+          },
+          {
+            label: 'Drive My Car',
+            key: 'Drive My Car',
+            disabled: true,
+          },
+          {
+            label: 'Norwegian Wood',
+            key: 'Norwegian Wood',
+          },
+          {
+            label: "You Won't See",
+            key: "You Won't See",
+            disabled: true,
+          },
+          {
+            label: 'Nowhere Man',
+            key: 'Nowhere Man',
+          },
+          {
+            label: 'Think For Yourself',
+            key: 'Think For Yourself',
+          },
+          {
+            label: 'The Word',
+            key: 'The Word',
+          },
+          {
+            label: 'Michelle',
+            key: 'Michelle',
+            disabled: true,
+          },
+          {
+            label: 'What goes on',
+            key: 'What goes on',
+          },
+          {
+            label: 'Girl',
+            key: 'Girl',
+          },
+          {
+            label: "I'm looking through you",
+            key: "I'm looking through you",
+          },
+          {
+            label: 'In My Life',
+            key: 'In My Life',
+          },
+          {
+            label: 'Wait',
+            key: 'Wait',
+          },
+        ],
+      },
+      {
+        label: 'Let It Be',
+        key: 'Let It Be Album',
+        children: [
+          {
+            label: 'Two Of Us',
+            key: 'Two Of Us',
+          },
+          {
+            label: 'Dig A Pony',
+            key: 'Dig A Pony',
+          },
+          {
+            label: 'Across The Universe',
+            key: 'Across The Universe',
+          },
+          {
+            label: 'I Me Mine',
+            key: 'I Me Mine',
+          },
+          {
+            label: 'Dig It',
+            key: 'Dig It',
+          },
+          {
+            label: 'Let It Be',
+            key: 'Let It Be',
+          },
+          {
+            label: 'Maggie Mae',
+            key: 'Maggie Mae',
+          },
+          {
+            label: "I've Got A Feeling",
+            key: "I've Got A Feeling",
+          },
+          {
+            label: 'One After 909',
+            key: 'One After 909',
+          },
+          {
+            label: 'The Long And Winding Road',
+            key: 'The Long And Winding Road',
+          },
+          {
+            label: 'For You Blue',
+            key: 'For You Blue',
+          },
+          {
+            label: 'Get Back',
+            key: 'Get Back',
+          },
+        ],
+      },
+    ],
+  }
+}
+
+export function createRadioData() {
+  return {
+    options: [
+      {
+        label: '选项1',
+        value: '1',
+      },
+      {
+        label: '选项2',
+        value: '2',
+      },
+      {
+        label: '选项3',
+        value: '3',
+        disabled: true,
+      },
+    ],
+  }
+}
+
+export function createCascaderOptions(depth = 3, iterator = 1, prefix = '') {
+  const length = 12
+  const options = []
+  for (let i = 1; i <= length; ++i) {
+    if (iterator === 1) {
+      options.push({
+        value: `v-${i}`,
+        label: `l-${i}`,
+        disabled: i % 5 === 0,
+        children: createCascaderOptions(depth, iterator + 1, '' + String(i)),
+      })
+    } else if (iterator === depth) {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        disabled: i % 5 === 0,
+      })
+    } else {
+      options.push({
+        value: `v-${prefix}-${i}`,
+        label: `l-${prefix}-${i}`,
+        disabled: i % 5 === 0,
+        children: createCascaderOptions(depth, iterator + 1, `${prefix}-${i}`),
+      })
+    }
+  }
+  return options
+}
+
+export default [
+  // mock user login
+  {
+    url: '/basic-api/demo/form/select',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createSelectData())
+    },
+  },
+  {
+    url: '/basic-api/demo/form/treeSelect',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createTreeSelectData())
+    },
+  },
+  {
+    url: '/basic-api/demo/form/radio',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createRadioData())
+    },
+  },
+  {
+    url: '/basic-api/demo/form/cascader',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess({ options: createCascaderOptions() })
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/mock/demo/table.ts b/apps/grid-admin/mock/demo/table.ts
new file mode 100644
index 00000000..1afafa42
--- /dev/null
+++ b/apps/grid-admin/mock/demo/table.ts
@@ -0,0 +1,52 @@
+import { MockMethod } from 'vite-plugin-mock'
+import { resultError, resultSuccess } from '@vben/utils/mock-util'
+
+export function createFakeTableData() {
+  return {
+    items: [
+      {
+        userId: '1',
+        username: 'vben',
+        realname: 'Vben Admin',
+        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640',
+        desc: 'manager',
+        password: '123456',
+        accessToken: 'fakeToken1',
+        roles: [
+          {
+            name: 'Super Admin',
+            value: 'super',
+          },
+        ],
+      },
+      {
+        userId: '2',
+        username: 'test',
+        password: '123456',
+        realname: 'test user',
+        avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
+        desc: 'tester',
+        accessToken: 'fakeToken2',
+        roles: [
+          {
+            name: 'Tester',
+            value: 'test',
+          },
+        ],
+      },
+    ],
+    total: 2,
+  }
+}
+
+export default [
+  // mock user login
+  {
+    url: '/basic-api/demo/table',
+    timeout: 200,
+    method: 'post',
+    response: ({ body }) => {
+      return resultSuccess(createFakeTableData())
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/mock/menu.ts b/apps/grid-admin/mock/menu.ts
new file mode 100644
index 00000000..d20aebd1
--- /dev/null
+++ b/apps/grid-admin/mock/menu.ts
@@ -0,0 +1,269 @@
+import {
+  resultSuccess,
+  resultError,
+  getRequestToken,
+  requestParams,
+} from '@vben/utils/mock-util'
+import { MockMethod } from 'vite-plugin-mock'
+import { createFakeUserList } from './auth'
+
+// single
+const dashboardRoute = {
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: 'LAYOUT',
+  redirect: '/dashboard/analysis',
+  meta: {
+    title: 'routes.dashboard.dashboard',
+    icon: 'bx:bx-home',
+  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: '/dashboard/analysis/index',
+      meta: {
+        title: 'routes.dashboard.analysis',
+        icon: 'bx:bx-home',
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: '/dashboard/workbench/index',
+      meta: {
+        title: 'routes.dashboard.workbench',
+        icon: 'bx:bx-home',
+      },
+    },
+  ],
+}
+
+const backRoute = {
+  path: 'back',
+  name: 'PermissionBackDemo',
+  meta: {
+    title: 'routes.demo.permission.back',
+  },
+
+  children: [
+    {
+      path: 'page',
+      name: 'BackAuthPage',
+      component: '/demo/permission/back/index',
+      meta: {
+        title: 'routes.demo.permission.backPage',
+      },
+    },
+    {
+      path: 'btn',
+      name: 'BackAuthBtn',
+      component: '/demo/permission/back/Btn',
+      meta: {
+        title: 'routes.demo.permission.backBtn',
+      },
+    },
+  ],
+}
+
+const authRoute = {
+  path: '/permission',
+  name: 'Permission',
+  component: 'LAYOUT',
+  redirect: '/permission/front/page',
+  meta: {
+    icon: 'carbon:user-role',
+    title: 'routes.demo.permission.permission',
+  },
+  children: [backRoute],
+}
+
+const levelRoute = {
+  path: '/level',
+  name: 'Level',
+  component: 'LAYOUT',
+  redirect: '/level/menu1/menu1-1',
+  meta: {
+    icon: 'carbon:user-role',
+    title: 'routes.demo.level.level',
+  },
+
+  children: [
+    {
+      path: 'menu1',
+      name: 'Menu1Demo',
+      meta: {
+        title: 'Menu1',
+      },
+      children: [
+        {
+          path: 'menu1-1',
+          name: 'Menu11Demo',
+          meta: {
+            title: 'Menu1-1',
+          },
+          children: [
+            {
+              path: 'menu1-1-1',
+              name: 'Menu111Demo',
+              component: '/demo/level/Menu111',
+              meta: {
+                title: 'Menu111',
+              },
+            },
+          ],
+        },
+        {
+          path: 'menu1-2',
+          name: 'Menu12Demo',
+          component: '/demo/level/Menu12',
+          meta: {
+            title: 'Menu1-2',
+          },
+        },
+      ],
+    },
+    {
+      path: 'menu2',
+      name: 'Menu2Demo',
+      component: '/demo/level/Menu2',
+      meta: {
+        title: 'Menu2',
+      },
+    },
+  ],
+}
+
+const sysRoute = {
+  path: '/system',
+  name: 'System',
+  component: 'LAYOUT',
+  redirect: '/system/account',
+  meta: {
+    icon: 'ion:settings-outline',
+    title: 'routes.demo.system.moduleName',
+  },
+  children: [
+    {
+      path: 'account',
+      name: 'AccountManagement',
+      meta: {
+        title: 'routes.demo.system.account',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/account/index',
+    },
+    {
+      path: 'account_detail/:id',
+      name: 'AccountDetail',
+      meta: {
+        title: 'routes.demo.system.account_detail',
+        ignoreKeepAlive: true,
+        showMenu: false,
+      },
+      component: '/demo/system/account/AccountDetail',
+    },
+    {
+      path: 'role',
+      name: 'RoleManagement',
+      meta: {
+        title: 'routes.demo.system.role',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/role/index',
+    },
+
+    {
+      path: 'menu',
+      name: 'MenuManagement',
+      meta: {
+        title: 'routes.demo.system.menu',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/menu/index',
+    },
+    {
+      path: 'dept',
+      name: 'DeptManagement',
+      meta: {
+        title: 'routes.demo.system.dept',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/dept/index',
+    },
+    {
+      path: 'changePassword',
+      name: 'ChangePassword',
+      meta: {
+        title: 'routes.demo.system.password',
+        ignoreKeepAlive: true,
+      },
+      component: '/demo/system/password/index',
+    },
+  ],
+}
+
+const linkRoute = {
+  path: '/link',
+  name: 'Link',
+  component: 'LAYOUT',
+  meta: {
+    icon: 'ion:tv-outline',
+    title: 'routes.demo.iframe.frame',
+  },
+  children: [
+    {
+      path: 'doc',
+      name: 'Doc',
+      meta: {
+        title: 'routes.demo.iframe.doc',
+      },
+    },
+    {
+      path: 'https://vvbin.cn/doc-next/',
+      name: 'DocExternal',
+      component: 'LAYOUT',
+      meta: {
+        title: 'routes.demo.iframe.docExternal',
+      },
+    },
+  ],
+}
+
+export default [
+  {
+    url: '/basic-api/getMenuList',
+    timeout: 1000,
+    method: 'get',
+    response: (request: requestParams) => {
+      const token = getRequestToken(request)
+      if (!token) {
+        return resultError('Invalid token!')
+      }
+      const checkUser = createFakeUserList().find(
+        (item) => item.token === token,
+      )
+      if (!checkUser) {
+        return resultError('Invalid user token!')
+      }
+      const id = checkUser.userId
+      let menu: Object[]
+      switch (id) {
+        case '1':
+          dashboardRoute.redirect =
+            dashboardRoute.path + '/' + dashboardRoute.children[0].path
+          menu = [dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute]
+          break
+        case '2':
+          dashboardRoute.redirect =
+            dashboardRoute.path + '/' + dashboardRoute.children[1].path
+          menu = [dashboardRoute, authRoute, levelRoute, linkRoute]
+          break
+        default:
+          menu = []
+      }
+
+      return resultSuccess(menu)
+    },
+  },
+] as MockMethod[]
diff --git a/apps/grid-admin/package.json b/apps/grid-admin/package.json
new file mode 100644
index 00000000..9b5dfa3f
--- /dev/null
+++ b/apps/grid-admin/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "@apps/grid-admin",
+  "version": "3.0.0-bata.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "apps/ant-app"
+  },
+  "author": {
+    "name": "vben",
+    "email": "anncwb@126.com",
+    "url": "https://github.com/anncwb"
+  },
+  "scripts": {
+    "build": "pnpm cross-env NODE_ENV=production vite build",
+    "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo",
+    "dev": "vite",
+    "preview": "npm run build && vite preview",
+    "preview:dist": "vite preview",
+    "report": "pnpm cross-env REPORT=true npm run build",
+    "server:br": "pnpx http-server dist --cors --brotli -c-1",
+    "server:gzip": "pnpx http-server dist --cors --gzip -c-1",
+    "type:check": "vue-tsc --noEmit --skipLibCheck"
+  },
+  "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "@iconify/iconify": "^3.1.0",
+    "@vben/components": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/demo": "workspace:*",
+    "@vben/directives": "workspace:*",
+    "@vben/grid-layouts": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/locale": "workspace:*",
+    "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vben/vbencomponents": "workspace:*",
+    "dayjs": "^1.11.7",
+    "mockjs": "^1.1.0",
+    "monaco-editor": "^0.34.1",
+    "nprogress": "^0.2.0",
+    "path-to-regexp": "^6.2.1",
+    "pinia": "2.0.30",
+    "vue": "3.2.47",
+    "vue-demi": "^0.13.11",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@config/css-preprocess": "workspace:*",
+    "@config/vite": "workspace:*",
+    "@types/mockjs": "^1.0.7",
+    "@types/nprogress": "^0.2.0",
+    "@vben/types": "workspace:*",
+    "@vue/compiler-sfc": "3.2.47",
+    "@vue/test-utils": "^2.2.9",
+    "naive-ui": "^2.34.3",
+    "typescript": "^4.9.5",
+    "vite": "4.0.4",
+    "vue-tsc": "^1.0.24"
+  }
+}
diff --git a/apps/grid-admin/postcss.config.js b/apps/grid-admin/postcss.config.js
new file mode 100644
index 00000000..db0f61f9
--- /dev/null
+++ b/apps/grid-admin/postcss.config.js
@@ -0,0 +1 @@
+module.exports = require('@config/css-preprocess/postcss')
diff --git a/apps/grid-admin/public/favicon.ico b/apps/grid-admin/public/favicon.ico
new file mode 100644
index 00000000..d92e0b8c
Binary files /dev/null and b/apps/grid-admin/public/favicon.ico differ
diff --git a/apps/grid-admin/public/logo.png b/apps/grid-admin/public/logo.png
new file mode 100644
index 00000000..cd4c33d8
Binary files /dev/null and b/apps/grid-admin/public/logo.png differ
diff --git a/apps/grid-admin/src/apis/auth.ts b/apps/grid-admin/src/apis/auth.ts
new file mode 100644
index 00000000..d144e2b6
--- /dev/null
+++ b/apps/grid-admin/src/apis/auth.ts
@@ -0,0 +1,57 @@
+import type { ErrorMessageMode } from '@vben/types'
+import { request } from '@vben/request'
+
+export interface RoleInfo {
+  name: string
+  value: string
+}
+
+export interface LoginParams {
+  username: string
+  password: string
+}
+
+export interface LoginResultModel {
+  userId: string | number
+  accessToken: string
+  role: RoleInfo
+}
+
+export interface UserInfoModel {
+  roles: RoleInfo[]
+  userId: string | number
+  username: string
+  realName?: string
+  avatar: string
+  desc?: string
+}
+
+export function doLoginApi(
+  params: LoginParams,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return request.post<LoginResultModel>(
+    {
+      url: '/login',
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+export function getUserInfoApi() {
+  return request.get<UserInfoModel>(
+    { url: '/getUserInfo' },
+    { errorMessageMode: 'none' },
+  )
+}
+
+export function getPermCode() {
+  return request.get<string[]>({ url: '/getPermCode' })
+}
+
+export function doLogoutApi() {
+  return request.get({ url: '/logout' })
+}
diff --git a/apps/grid-admin/src/apis/menu.ts b/apps/grid-admin/src/apis/menu.ts
new file mode 100644
index 00000000..1ba0ccd0
--- /dev/null
+++ b/apps/grid-admin/src/apis/menu.ts
@@ -0,0 +1,29 @@
+import { request } from '@vben/request'
+
+export interface RouteItem {
+  path: string
+  component: any
+  meta: any
+  name?: string
+  alias?: string | string[]
+  redirect?: string
+  caseSensitive?: boolean
+  children?: RouteItem[]
+}
+
+/**
+ * @description: Get menu return value
+ */
+export type GetMenuListResultModel = RouteItem[]
+
+enum Api {
+  GetMenuList = '/getMenuList',
+}
+
+/**
+ * @description: Get user menu based on id
+ */
+
+export const getMenuList = () => {
+  return request.get<GetMenuListResultModel>({ url: Api.GetMenuList })
+}
diff --git a/apps/grid-admin/src/apis/sys/index.ts b/apps/grid-admin/src/apis/sys/index.ts
new file mode 100644
index 00000000..d35d236a
--- /dev/null
+++ b/apps/grid-admin/src/apis/sys/index.ts
@@ -0,0 +1,2 @@
+export * from './menu'
+export * from './user'
diff --git a/apps/grid-admin/src/apis/sys/menu.ts b/apps/grid-admin/src/apis/sys/menu.ts
new file mode 100644
index 00000000..1ba0ccd0
--- /dev/null
+++ b/apps/grid-admin/src/apis/sys/menu.ts
@@ -0,0 +1,29 @@
+import { request } from '@vben/request'
+
+export interface RouteItem {
+  path: string
+  component: any
+  meta: any
+  name?: string
+  alias?: string | string[]
+  redirect?: string
+  caseSensitive?: boolean
+  children?: RouteItem[]
+}
+
+/**
+ * @description: Get menu return value
+ */
+export type GetMenuListResultModel = RouteItem[]
+
+enum Api {
+  GetMenuList = '/getMenuList',
+}
+
+/**
+ * @description: Get user menu based on id
+ */
+
+export const getMenuList = () => {
+  return request.get<GetMenuListResultModel>({ url: Api.GetMenuList })
+}
diff --git a/apps/grid-admin/src/apis/sys/user.ts b/apps/grid-admin/src/apis/sys/user.ts
new file mode 100644
index 00000000..d18a0e04
--- /dev/null
+++ b/apps/grid-admin/src/apis/sys/user.ts
@@ -0,0 +1,84 @@
+import type { ErrorMessageMode } from '@vben/types'
+import { request } from '@vben/request'
+
+/**
+ * @description: Login interface parameters
+ */
+export interface LoginParams {
+  username: string
+  password: string
+}
+
+export interface RoleInfo {
+  roleName: string
+  value: string
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {
+  userId: string | number
+  token: string
+  role: RoleInfo
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetUserInfoModel {
+  roles: RoleInfo[]
+  // 用户id
+  userId: string | number
+  // 用户名
+  username: string
+  // 真实名字
+  realName: string
+  // 头像
+  avatar: string
+  // 介绍
+  desc?: string
+}
+
+enum Api {
+  Login = '/login',
+  Logout = '/logout',
+  GetUserInfo = '/getUserInfo',
+  GetPermCode = '/getPermCode',
+}
+
+/**
+ * @description: user login api
+ */
+export function loginApi(
+  params: LoginParams,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return request.post<LoginResultModel>(
+    {
+      url: Api.Login,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  )
+}
+
+/**
+ * @description: getUserInfo
+ */
+export function getUserInfo() {
+  return request.get<GetUserInfoModel>(
+    { url: Api.GetUserInfo },
+    { errorMessageMode: 'none' },
+  )
+}
+
+export function getPermCode() {
+  return request.get<string[]>({ url: Api.GetPermCode })
+}
+
+export function doLogout() {
+  return request.get({ url: Api.Logout })
+}
diff --git a/apps/grid-admin/src/apis/system/model/useModel.ts b/apps/grid-admin/src/apis/system/model/useModel.ts
new file mode 100644
index 00000000..2415c911
--- /dev/null
+++ b/apps/grid-admin/src/apis/system/model/useModel.ts
@@ -0,0 +1,38 @@
+/**
+ * @description: Login interface parameters
+ */
+export interface LoginParams {
+  username: string;
+  password: string;
+}
+
+export interface RoleInfo {
+  roleName: string;
+  value: string;
+}
+
+/**
+ * @description: Login interface return value
+ */
+export interface LoginResultModel {
+  userId: string | number;
+  token: string;
+  role: RoleInfo;
+}
+
+/**
+ * @description: Get user information return value
+ */
+export interface GetUserInfoModel {
+  roles: RoleInfo[];
+  // 用户id
+  userId: string | number;
+  // 用户名
+  username: string;
+  // 真实名字
+  realName: string;
+  // 头像
+  avatar: string;
+  // 介绍
+  desc?: string;
+}
diff --git a/apps/grid-admin/src/app.vue b/apps/grid-admin/src/app.vue
new file mode 100644
index 00000000..cb506a9e
--- /dev/null
+++ b/apps/grid-admin/src/app.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { useLocale } from '@vben/locale'
+import { useWebTitle } from '@vben/hooks'
+
+import { REDIRECT_NAME } from '@vben/constants'
+import { getGlobalConfig, computedAsync } from '@vben/utils'
+import AppProvider from '@/layout/components/app/AppProvider'
+import { dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui'
+import { useAppStore } from '@/store/modules/app'
+// Support Multi-language
+const { getLocale } = useLocale()
+// Listening to page changes and dynamically changing site titles
+const { title } = getGlobalConfig(import.meta.env)
+useWebTitle(title, (route) => route.name !== REDIRECT_NAME)
+const appStore = useAppStore()
+
+// Dynamic switch component library language
+const dateLocale = computedAsync(async () => {
+  const message = {
+    zh_CN: () => {
+      return dateZhCN
+    },
+    en_US: () => {
+      return dateEnUS
+    },
+  }
+  const mod = await message[getLocale.value]()
+
+  return mod?.default ?? mod
+})
+// Dynamic switch component library language
+const locale = computedAsync(async () => {
+  const message = {
+    zh_CN: () => {
+      import('dayjs/locale/zh-cn')
+      return zhCN
+    },
+    en_US: () => {
+      import('dayjs/locale/en')
+      return enUS
+    },
+  }
+  const mod = await message[getLocale.value]()
+
+  return mod?.default ?? mod
+})
+</script>
+
+<template>
+  <VbenConfig :locale="locale" :date-locale="dateLocale">
+    <VbenNotificationProvider>
+      <VbenMessageProvider>
+        <AppProvider>
+          <router-view />
+        </AppProvider>
+      </VbenMessageProvider>
+    </VbenNotificationProvider>
+  </VbenConfig>
+</template>
diff --git a/apps/grid-admin/src/assets/icons/download-count.svg b/apps/grid-admin/src/assets/icons/download-count.svg
new file mode 100644
index 00000000..1c951958
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/download-count.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356.99 419.8"><defs><style>.cls-1{fill:#ffa546;}.cls-2{fill:#ff6059;opacity:0.4;}.cls-3{fill:#426572;}.cls-4{fill:#ffd947;}</style></defs><title>Asset 91</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M351,380.73v17.59a15.52,15.52,0,0,1-15.47,15.48H21.46A15.52,15.52,0,0,1,6,398.32V380.73a15.51,15.51,0,0,1,15.47-15.47H335.52A15.51,15.51,0,0,1,351,380.73Z"/><path class="cls-2" d="M351,406.85c0,3.95-7,7.19-15.47,7.19H21.46C13,414,6,410.8,6,406.85V380.73a15.51,15.51,0,0,1,15.47-15.47H37.66l3.44,25.27c0,4,7,7.2,15.47,7.2l283.72,12.44,7.38-2.28Z"/><path class="cls-3" d="M335.52,419.8H21.46A21.5,21.5,0,0,1,0,398.32V380.73a21.49,21.49,0,0,1,21.46-21.47H335.52A21.49,21.49,0,0,1,357,380.73v17.59a21.52,21.52,0,0,1-21.46,21.48ZM21.46,371.26A9.48,9.48,0,0,0,12,380.73v17.59a9.48,9.48,0,0,0,9.46,9.48H335.52a9.52,9.52,0,0,0,9.46-9.48V380.73a9.48,9.48,0,0,0-9.46-9.47Z"/><path class="cls-1" d="M247.93,138H233.23V41.7A35.7,35.7,0,0,0,197.53,6H159.45a35.7,35.7,0,0,0-35.7,35.7V138H109.06C80,138,61.84,169.48,76.37,194.64l34.72,60.13,30,52c16.6,28.76,58.12,28.76,74.72,0l30-52,34.72-60.13C295.14,169.48,277,138,247.93,138Z"/><path class="cls-2" d="M280.62,188l-34.73,60.13-30,52c-11.24,19.46-66.68,32.78-52.52,18.88,60.22-59.12,104.3-182.16,104.3-182.16A37.74,37.74,0,0,1,280.62,188Z"/><path class="cls-4" d="M192.3,6c-.22.23-.42.47-.63.72-38.92,45-18.36,116.49-42.85,170.71-10.14,22.45-29.18,41.51-52.15,49.48L78,194.64C63.52,169.48,81.67,138,110.72,138h14.7V41.7A35.7,35.7,0,0,1,161.12,6Z"/><path class="cls-3" d="M178.49,334.39h0a48.64,48.64,0,0,1-42.56-24.57L71.17,197.64A43.75,43.75,0,0,1,109.06,132h8.69V41.7A41.74,41.74,0,0,1,159.45,0h38.09a41.75,41.75,0,0,1,41.7,41.7V132h8.69a43.75,43.75,0,0,1,37.89,65.62L221,309.82A48.64,48.64,0,0,1,178.49,334.39ZM109.06,144a31.75,31.75,0,0,0-27.49,47.62l64.76,112.17a37.14,37.14,0,0,0,64.33,0l64.76-112.17A31.75,31.75,0,0,0,247.92,144H227.23V41.7A29.73,29.73,0,0,0,197.53,12H159.45a29.73,29.73,0,0,0-29.7,29.7V144Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg
new file mode 100644
index 00000000..e1553e50
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.31 560.11"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#b46078;}.cls-7{fill:#96426e;}.cls-8{fill:#fff;}.cls-9{fill:#fefdf5;}.cls-10{fill:#f4eae1;}.cls-11{fill:#f9637c;}.cls-12{fill:#ba4264;}.cls-13{fill:#b13a59;}</style></defs><title>Asset 15</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="45.9" cy="303.35" r="41.4"/><path class="cls-2" d="M78.13,278.08a41.39,41.39,0,0,0-57.27,57.27,41.4,41.4,0,1,1,57.27-57.27Z"/><path class="cls-3" d="M45.9,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,265Z"/><circle class="cls-1" cx="345.41" cy="303.35" r="41.4"/><path class="cls-3" d="M345.42,347.82a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.42,347.82Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.42,265Z"/><path class="cls-1" d="M191.57,88.78h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,193,477.43h0a147.5,147.5,0,0,1-147.5-147.5v-95a146.1,146.1,0,0,1,146.1-146.1Z"/><path class="cls-2" d="M211.7,474.46a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C147.26,95.87,91.42,154.6,81.17,220.06a509,509,0,0,1-13.33,61.86L54.49,328.37C54.49,402.62,140.07,464.5,211.7,474.46Z"/><path class="cls-3" d="M191.41,481.93a152.43,152.43,0,0,1-152-152V234.88A151,151,0,0,1,190,84.28h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM190,93.28a142,142,0,0,0-141.6,141.6v95.05a142.82,142.82,0,0,0,244,101,142,142,0,0,0,42-101V234.88A142,142,0,0,0,192.8,93.28Z"/><path class="cls-4" d="M325.44,305.26v.19C324.89,305.48,325.11,305.35,325.44,305.26Z"/><path class="cls-3" d="M368.43,305.61a3,3,0,0,1-2.94-2.41c-4.06-20.3-24.53-16.89-25.4-16.73a3,3,0,1,1-1-5.91c9.36-1.67,28.17.66,32.33,21.46a3,3,0,0,1-2.35,3.53A3,3,0,0,1,368.43,305.61Z"/><path class="cls-3" d="M21.27,308.26a2.36,2.36,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.75-14.23,7.79-21.26,12.55-24.65a20.94,20.94,0,0,1,10.61-4.05,3,3,0,0,1,.24,6c-.65,0-14.7,1.08-17.45,23.43A3,3,0,0,1,21.27,308.26Z"/><ellipse class="cls-5" cx="184.64" cy="499.11" rx="179.73" ry="52.86"/><path class="cls-6" d="M335.74,353.31c21.15,38.6,14.42,76.22,15.16,112.12l-11.45-12.67a123.72,123.72,0,0,1-30.05,60,44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87A58.87,58.87,0,0,1,233.6,551.2a24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32A51.33,51.33,0,0,1,105.4,511.3c-21.68,1.35-43.33-13.51-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C15.38,468,17.38,382.75,41.91,354.63c0,0,51.63,8.28,83,32.06,8.53,6.48,8.78-2.64,21-7.72,16.48-6.83,45.87-11.63,62.57-11.7,24.41-.11,37.46,30.85,53.1,16.16C303,344.58,335.38,352.66,335.74,353.31Z"/><path class="cls-7" d="M352.35,461,340.9,448.3a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.89,92.89,0,0,1-28.69,48.92A37.38,37.38,0,0,0,267.18,511a58.84,58.84,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.91.11,18.31,4.11,18.65-16.8,2.58-32.53-13.76-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C41.34,476,32.8,461.71,28.19,444.67,44.75,456.74,64.24,465,83.51,472.46c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C349,391.91,351.61,425.08,352.35,461Z"/><path class="cls-3" d="M256.37,560.11l7.72-18.34a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65,9.78-13.42A19.55,19.55,0,0,0,235,535.31c-6.64,5.87-15.71,9.29-25.74,9.47a40.71,40.71,0,0,1-22-5.69c1.08,5.49,1.15,10.37-3.11,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.92-33.69-20.51,1.54,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.05c-18.58,0-36.49-10.43-46.18-26.13l-.46.48-2.31,2.25-2.88-1.46C38,481,27.7,464.56,23.31,441.92c-6.43-33.13.88-73.25,16.66-91.33a4.5,4.5,0,0,1,6.78,5.91c-14.15,16.23-20.57,53-14.61,83.71,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56L61.27,473c5.89,18.64,25.78,32.29,45.3,31.07l3-.19,1.31,2.73c7.82,16.21,18.57,26.05,28.08,30.23A85.81,85.81,0,0,1,135.69,519l-1.27-13.24,9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.85,7.6,14,12.09,24.49,12.09h.66c10.8-.2,20-5,24.71-13l4.51-7.66,3.5,8.16a28.32,28.32,0,0,1,2,14.83,54.25,54.25,0,0,0,19.1-26.84l3.33-10.56,5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.24,88.24,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.58,48.58,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87A127.42,127.42,0,0,1,314.17,513l-4.26,4.66-3-5.54a39.46,39.46,0,0,0-7.37-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="cls-1" d="M158.08,455.14A10.16,10.16,0,0,1,147.94,445V406.25a10.17,10.17,0,0,1,10.14-10.14H229a10.17,10.17,0,0,1,10.13,10.14V445A10.16,10.16,0,0,1,229,455.14"/><path class="cls-2" d="M240.85,410.47v12a10.15,10.15,0,0,0-9.29-6.1H160.61a10.16,10.16,0,0,0-10.14,10.13v26.74a10.1,10.1,0,0,1-.84-4V410.47a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,240.85,410.47Z"/><path class="cls-3" d="M193.13,394.93c7.32,0,14.47,0,21.37.11l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11-.06,2.21c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06,1-.1,1.41,0,.23,0,.45,0,.68s-.05.55-.08.81a12.38,12.38,0,0,1-.77,3.09,12,12,0,0,1-3.1,4.43,10.12,10.12,0,0,1-6.49,2.68,5.06,5.06,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.23,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.68,5.68,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.1-21.37.1s-14.47,0-21.37-.1l-10.17-.12-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.68,5.68,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07,1-.1,1.41,0,.23,0,.45,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a5.06,5.06,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.43,12.38,12.38,0,0,1-.77-3.09c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11v-.68l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C178.66,395,185.81,394.93,193.13,394.93Z"/><path class="cls-3" d="M54.48,374.11a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.72,50.72,0,0,1,.42-5.48,35.47,35.47,0,0,1,1.17-5.68l10.41,4.56a24.21,24.21,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,54.48,374.11Z"/><path class="cls-3" d="M70,382.66c.81,7.4,4.1,14.79,8.86,21.21A47.32,47.32,0,0,1,64.51,384a38.71,38.71,0,0,1-2.31-12.94,35.09,35.09,0,0,1,2.63-13.62l10,5.38C71,367.93,69.21,375.33,70,382.66Z"/><path class="cls-3" d="M98.32,388.23a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,89,366.14l11.2,1.92A47.79,47.79,0,0,0,98.32,388.23Z"/><path class="cls-3" d="M282.66,384.17a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.21,1.71.88,2.72,2.92A27,27,0,0,1,282.66,384.17Z"/><path class="cls-3" d="M305.19,378.25a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,305.19,378.25Z"/><path class="cls-3" d="M328.91,374.58a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,328.91,374.58Z"/><path class="cls-3" d="M63.25,476.89a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.31c0,.93-.12,1.93-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76,75.5,75.5,0,0,0,1.58,7.62c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A27.16,27.16,0,0,1,67,488.7a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,63.25,476.89Z"/><path class="cls-3" d="M95.32,490.74a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,95.32,490.74Z"/><path class="cls-3" d="M133.57,497.43c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S137.74,512.42,133.57,497.43Z"/><path class="cls-3" d="M246.46,509.58c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.78,59.78,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C244.45,515.67,245.5,512.73,246.46,509.58Z"/><path class="cls-3" d="M276.25,498.2c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.85,68.85,0,0,0,3.11-8.29A89.28,89.28,0,0,0,276.25,498.2Z"/><path class="cls-3" d="M306.39,479c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.77-.33.58-.63,1.14-1,1.66l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72L302,493c.2-.53.41-1.08.62-1.66.47-1.12.85-2.38,1.32-3.67C304.79,485,305.63,482.1,306.39,479Z"/><path class="cls-3" d="M316.6,469.6c1.61-4,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76.28,76.28,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.42-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C313.16,477.18,315,473.53,316.6,469.6Z"/><path class="cls-8" d="M36.38,392.54c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S35.63,396.18,36.38,392.54Z"/><path class="cls-8" d="M37.64,432a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,37.64,432Z"/><path class="cls-3" d="M125.55,391.49h-.49c-5.14-.18-9.18-3.25-12.42-5.71l-.2-.15a157,157,0,0,0-68.06-29.49,4.5,4.5,0,0,1,1.51-8.87,166.07,166.07,0,0,1,72,31.19l.19.15c2.47,1.87,5,3.8,7.31,3.89s4.86-1.61,7.58-3.4l.77-.5C149.09,368.55,169,363,189.86,363h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.3,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,1,1,1.51,8.87,157,157,0,0,0-68.06,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C134.6,388.79,130.5,391.49,125.55,391.49Z"/><path class="cls-3" d="M190.39,345.16a4.49,4.49,0,0,1-4.5-4.5V294.07a4.5,4.5,0,0,1,9,0v46.59A4.5,4.5,0,0,1,190.39,345.16Z"/><path class="cls-2" d="M178.07,222.19c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21a103.64,103.64,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.32"/><path class="cls-2" d="M204.25,225.47c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.21a103.61,103.61,0,0,1,30,3.07c8,2.05,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25-17.57-8.26-39.91-12.29-59.61-10.31"/><path class="cls-6" d="M205.19,214.55c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.66-17-15.81-26.45-20.25-17.57-8.26-39.91-12.28-59.6-10.31"/><path class="cls-3" d="M289.6,259.29a22.42,22.42,0,0,1-3.85-.36c-5-.87-9.51-2.84-13.86-4.75a64.83,64.83,0,0,0-9.76-3.68,98.35,98.35,0,0,0-28.71-2.93c-.88,0-1.78.08-2.68.13-8,.44-18,1-24.83-6.89-6.61-7.6-6.88-19.43-5.11-27.26a5.34,5.34,0,0,1,4.29-3.82,123.23,123.23,0,0,1,62,10.72c9.2,4.33,19.88,12.49,27.87,21.3,5.87,6.47,4.76,11.05,3.58,13.2C297.53,256.7,295.17,259.29,289.6,259.29Zm-51.81-20.82a106.54,106.54,0,0,1,26.58,3.31,73,73,0,0,1,11.13,4.16c4,1.77,7.86,3.44,11.79,4.12a12.72,12.72,0,0,0,2.79.22,12.53,12.53,0,0,0-1.83-2.48c-7.24-8-16.83-15.35-25-19.2a114.19,114.19,0,0,0-54.15-10.17c-.7,5.74.13,12.44,3.63,16.47,4,4.56,10.57,4.2,17.55,3.82l2.79-.15C234.63,238.51,236.21,238.47,237.79,238.47Z"/><path class="cls-6" d="M173.31,210.57c1.68,7.42,1.09,17.32-4.12,23.3-6.08,7-15.66,5.57-23.93,5.22a103.27,103.27,0,0,0-30,3.07c-8,2.05-15.14,7-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="cls-3" d="M88.89,255.31c-5.56,0-7.93-2.59-8.89-4.34-1.19-2.15-2.3-6.72,3.58-13.2,8-8.81,18.66-17,27.86-21.29a123,123,0,0,1,62-10.72,5.3,5.3,0,0,1,4.29,3.82c1.77,7.82,1.49,19.65-5.12,27.25-6.86,7.88-16.82,7.33-24.83,6.89l-2.68-.13a98.35,98.35,0,0,0-28.71,2.93,66.24,66.24,0,0,0-9.75,3.68c-4.36,1.91-8.86,3.88-13.87,4.75A22.42,22.42,0,0,1,88.89,255.31Zm-.47-9a12.45,12.45,0,0,0,2.78-.21c3.93-.69,7.75-2.36,11.8-4.13a73.52,73.52,0,0,1,11.12-4.16,107.61,107.61,0,0,1,31.33-3.2c.92,0,1.85.09,2.8.14,7,.38,13.57.75,17.54-3.82,3.51-4,4.33-10.72,3.63-16.47a114.34,114.34,0,0,0-54.15,10.17c-8.19,3.85-17.78,11.21-25,19.2A12.55,12.55,0,0,0,88.42,246.3Z"/><path class="cls-3" d="M183.32,443.66a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.27-6.88c.3.05,30.64,5.45,44.81-4.67a15.44,15.44,0,0,0,6.65-10.76,3.5,3.5,0,1,1,6.92,1.05,22.47,22.47,0,0,1-9.51,15.42C205.9,442.15,193.63,443.66,183.32,443.66Z"/><path class="cls-3" d="M353.48,315.47a3,3,0,0,1-2.91-2.3,38.7,38.7,0,0,1-1.16-13.9A21,21,0,0,1,355.94,286a3,3,0,0,1,4,4.48,15.11,15.11,0,0,0-4.57,9.53,33.19,33.19,0,0,0,1,11.77,3,3,0,0,1-2.22,3.61A2.79,2.79,0,0,1,353.48,315.47Z"/><path class="cls-3" d="M33.65,315.47a2.79,2.79,0,0,1-.7-.08,3,3,0,0,1-2.23-3.61,33.19,33.19,0,0,0,1-11.77,15.1,15.1,0,0,0-4.56-9.53,3,3,0,1,1,4-4.48,21,21,0,0,1,6.53,13.27,38.93,38.93,0,0,1-1.16,13.9A3,3,0,0,1,33.65,315.47Z"/><path class="cls-8" d="M257.31,169.69a45.27,45.27,0,0,1,7.68,4,35.23,35.23,0,0,1,5.5,4.42c2.85,2.87,4,5.23,3.3,6s-3.05,0-6.42-1.57l-5.81-2.68c-2.18-1-4.56-2-7.09-3s-5-1.88-7.24-2.68l-6.07-2c-3.49-1.2-5.77-2.2-5.73-3.28s2.48-2,6.52-2.08a34.71,34.71,0,0,1,7,.58A45.21,45.21,0,0,1,257.31,169.69Z"/><path class="cls-8" d="M37.56,196.45a14.27,14.27,0,0,1,4.18-5.72c1.52-1.16,2.92-1.47,3.78-.87s1.07,2,.85,3.68a23.93,23.93,0,0,1-1.76,5.89,23.77,23.77,0,0,1-3,5.37c-1.06,1.34-2.18,2.15-3.23,1.95s-1.79-1.42-2-3.31A14.32,14.32,0,0,1,37.56,196.45Z"/><path class="cls-8" d="M59.41,173.58c3.26-1.52,6.63-1.21,7.53.71s-1,4.71-4.29,6.23-6.63,1.2-7.53-.71S56.15,175.1,59.41,173.58Z"/><path class="cls-8" d="M74.62,157.15c2.37-5.05,5.43-8.82,7.45-8.15s2.07,5.88-.51,11.39-6.65,8.81-8.43,7.7S72.26,162.2,74.62,157.15Z"/><path class="cls-9" d="M57.89,159.15V82c0-15.57,6.93-29.64,17.59-35.75l38.7-22.17c46.33-26.53,98.7-26.53,145,0l38.71,22.17C308.57,52.33,315.49,66.4,315.49,82v77.18"/><path class="cls-10" d="M312.46,80.79v19.39c-49.22-48.34-115.1-74.62-177.69-59.93-17.18,4-34.87,11.84-45.35,28.33-13.07,20.57-10.54,52.57,5.53,70C106.58,151.12,122,155,137.89,158h-83V80.79c0-15.58,6.92-29.65,17.59-35.76l38.7-22.17c46.32-26.52,98.7-26.52,145,0L294.88,45C305.55,51.14,312.46,65.21,312.46,80.79Z"/><path class="cls-3" d="M315.3,163.91a4.5,4.5,0,0,1-4.5-4.5V82.23c0-14-6-26.52-15.32-31.85L256.77,28.22c-22.36-12.81-46-19.31-70.27-19.31s-47.91,6.5-70.27,19.31L77.52,50.38C68.22,55.71,62.2,68.22,62.2,82.23v77.18a4.5,4.5,0,0,1-9,0V82.23c0-17.18,7.79-32.75,19.85-39.66l38.7-22.16c47.51-27.21,102-27.21,149.5,0L300,42.57C312,49.48,319.8,65.05,319.8,82.23v77.18A4.49,4.49,0,0,1,315.3,163.91Z"/><path class="cls-11" d="M358.91,168a188.7,188.7,0,0,1-7.86,25.11c-1.65,4.39-15.77,41.8-14.06,43.41-34-31.93-86.3-52.37-145-52.37S81.13,204.56,47.14,236.44c-12.27-38.2-42.51-96.29-6.57-129,10.27-9.35,23.35-13.28,36.1-16.5,72.69-18.36,148.62-20.81,221.57-3.88,12,2.79,24,6.15,34.87,12.74s20.46,16.78,25,30C362.43,142.3,361.73,155.35,358.91,168Z"/><path class="cls-12" d="M61.88,102.48C69,96,77.49,92.12,86.27,89.28q-4.09,1-8.18,2c-12.75,3.22-25.83,7.15-36.1,16.5-35.94,32.71-5.7,90.8,6.57,129a163.52,163.52,0,0,1,17-13.88C52.14,185,28.54,132.83,61.88,102.48Z"/><path class="cls-13" d="M104.58,105a1,1,0,0,1-.19-2c6.25-1.26,12.88-2.39,19.71-3.36a1,1,0,0,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,104.58,105Z"/><path class="cls-13" d="M57.19,120.46a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.63-6.73,35.7-12.92a1,1,0,1,1,.48,1.94c-24.75,6.11-35,12.6-35.1,12.66A1,1,0,0,1,57.19,120.46Z"/><path class="cls-13" d="M220.93,96.32h-.09c-6.83-.61-13.48-1-19.79-1.22a1,1,0,0,1,0-2h0c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="cls-13" d="M152,99.31a1,1,0,0,1-.16-2l5.35-.91c10.3-1.78,21-3.62,31.71-3.45a1,1,0,1,1,0,2c-10.58-.16-21.13,1.66-31.34,3.42l-5.37.91Z"/><path class="cls-13" d="M326.33,116.8a1,1,0,0,1-.33-.06c-6.55-2.35-13-4.47-19.07-6.29a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.25-.67c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="cls-13" d="M295.34,107.21a1,1,0,0,1-.24,0C270.44,101,258.75,102,258.64,102a1,1,0,1,1-.19-2c.48,0,12.09-1.07,37.13,5.24a1,1,0,0,1-.24,2Z"/><path class="cls-13" d="M105.15,117.87a1,1,0,0,1-.19-2c6.24-1.26,12.88-2.39,19.71-3.36a1,1,0,1,1,.28,2c-6.79,1-13.39,2.09-19.6,3.34A.68.68,0,0,1,105.15,117.87Z"/><path class="cls-13" d="M57.76,133.34a1,1,0,0,1-.54-1.84c.42-.27,10.63-6.73,35.7-12.92a1,1,0,0,1,.48,1.94c-24.69,6.1-35,12.6-35.1,12.66A1,1,0,0,1,57.76,133.34Z"/><path class="cls-13" d="M221.5,109.2h-.09c-6.83-.61-13.49-1-19.79-1.22a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.33.2,13,.62,19.89,1.23a1,1,0,0,1-.08,2Z"/><path class="cls-13" d="M152.57,112.24a1,1,0,0,1-.35-1.94c.46-.17,11.58-4.16,37.21-4.46a1,1,0,0,1,1,1,1,1,0,0,1-1,1c-25.23.3-36.44,4.3-36.55,4.34A1,1,0,0,1,152.57,112.24Z"/><path class="cls-13" d="M326.9,129.68a1,1,0,0,1-.34-.06c-6.54-2.35-12.95-4.47-19.06-6.29a1,1,0,0,1,.58-1.92c6.13,1.83,12.58,4,19.16,6.33a1,1,0,0,1-.34,1.94Z"/><path class="cls-13" d="M295.91,120.09a1,1,0,0,1-.24,0c-24.72-6.23-36.35-5.2-36.46-5.19a1,1,0,0,1-.2-2c.49,0,12.09-1.07,37.14,5.24a1,1,0,0,1-.24,2Z"/><path class="cls-13" d="M104,132.4a1,1,0,0,1-1-.8,1,1,0,0,1,.78-1.18c6.25-1.25,12.88-2.39,19.71-3.36a1,1,0,0,1,1.14.85,1,1,0,0,1-.85,1.13c-6.8,1-13.4,2.09-19.61,3.34A.65.65,0,0,1,104,132.4Z"/><path class="cls-13" d="M56.62,147.87a1,1,0,0,1-.84-.46,1,1,0,0,1,.3-1.38c.42-.27,10.64-6.73,35.71-12.92a1,1,0,0,1,1.21.73,1,1,0,0,1-.74,1.21c-24.74,6.11-35,12.6-35.1,12.66A1,1,0,0,1,56.62,147.87Z"/><path class="cls-13" d="M220.36,123.73h-.09c-6.83-.62-13.48-1-19.78-1.23a1,1,0,0,1-1-1,1,1,0,0,1,1-1c6.34.2,13,.62,19.9,1.23a1,1,0,0,1-.09,2Z"/><path class="cls-13" d="M151.43,126.77a1,1,0,0,1-.35-1.94c.47-.17,11.58-4.16,37.22-4.46h0a1,1,0,0,1,0,2c-25.29.3-36.43,4.3-36.54,4.34A1.07,1.07,0,0,1,151.43,126.77Z"/><path class="cls-13" d="M325.77,144.22a1,1,0,0,1-.34-.06c-6.54-2.36-12.95-4.48-19.06-6.3a1,1,0,0,1-.67-1.25,1,1,0,0,1,1.24-.67c6.14,1.84,12.59,4,19.16,6.33a1,1,0,0,1-.33,1.95Z"/><path class="cls-13" d="M294.77,134.62l-.24,0c-24.65-6.21-36.35-5.2-36.46-5.19a1,1,0,0,1-.19-2c.48,0,12.08-1.07,37.14,5.24a1,1,0,0,1-.25,2Z"/><path class="cls-8" d="M134.28,55.94a21.68,21.68,0,0,1,9.13,1c2.27.86,3.52,2,3.38,3s-1.6,1.81-3.74,2.36a52.83,52.83,0,0,1-8.1,1.2,52.47,52.47,0,0,1-8.19.23c-2.2-.16-3.76-.65-4.09-1.66s.7-2.36,2.79-3.59A21.52,21.52,0,0,1,134.28,55.94Z"/><path class="cls-8" d="M189.16,54c14.08.87,25.23,3.94,25,6s-11.61,2.48-25.44,1.63S163.63,59,163.64,56.91,175.09,53.15,189.16,54Z"/><path class="cls-3" d="M45,244.59l-2.18-6.77c-1.91-6-4.28-12.43-6.78-19.29-13.82-37.8-31-84.85,1.47-114.42C48.67,94,62.43,89.89,75.57,86.57c75.35-19,152.7-20.37,223.69-3.89C311.33,85.48,324.07,89,335.45,96c12.88,7.83,22.44,19.32,26.92,32.35,4.08,11.86,4.39,25.17.93,40.67h0a191.33,191.33,0,0,1-8,25.71l-.14.4c-10,26.58-13.67,38.62-13.77,40.85a3.89,3.89,0,0,0-1.28-2.7l-6.16,6.56C299.3,207.29,247.58,188.65,192,188.65S84.83,207.26,50.21,239.73ZM197.37,80.24A489.6,489.6,0,0,0,77.77,95.3c-12,3-24.58,6.73-34.17,15.47-28,25.5-12,69.4.92,104.68,1.65,4.52,3.25,8.88,4.7,13.07,36.12-31.14,87.71-48.87,142.8-48.87,54.72,0,106,17.49,142,48.22,1-3.25,2.37-7.53,4.18-12.73,2.27-6.56,5.11-14.37,8.44-23.22l.15-.39A184.81,184.81,0,0,0,354.52,167c3.08-13.83,2.87-25.54-.66-35.78-3.8-11.05-12-20.85-23.09-27.6-9.72-5.91-20.44-9.15-33.54-12.19A441.79,441.79,0,0,0,197.37,80.24ZM358.91,168h0Z"/><path class="cls-8" d="M316.3,283a85,85,0,0,1-.17-10.5c.2-2.77.72-4.63,1.76-4.88s2.37,1.22,3.57,3.91a35.67,35.67,0,0,1,1.44,22.17c-.84,2.82-2,4.45-3,4.34s-1.82-1.89-2.38-4.61A83.3,83.3,0,0,1,316.3,283Z"/><path class="cls-8" d="M310.41,253a8.45,8.45,0,0,1-.74-3.45,4,4,0,0,1,1-2.95,2.9,2.9,0,0,1,3.26-.34,7.5,7.5,0,0,1,3.8,8.75,2.92,2.92,0,0,1-2.48,2.15,4.08,4.08,0,0,1-2.87-1.26A8.5,8.5,0,0,1,310.41,253Z"/><path class="cls-8" d="M300.23,237.15c-1-1.27-.45-3.35,1.22-4.65s3.82-1.33,4.82-.06.44,3.36-1.23,4.66S301.22,238.42,300.23,237.15Z"/><path class="cls-8" d="M258.7,168A36.44,36.44,0,0,1,271.61,173c3,2,4.41,3.89,3.92,4.8s-2.75.81-6,.2-7.55-1.61-12.31-2.55-9.11-1.61-12.36-2.27-5.37-1.37-5.47-2.44,1.91-2.24,5.43-3A36.43,36.43,0,0,1,258.7,168Z"/><path class="cls-8" d="M296.63,182.34a5.05,5.05,0,0,1,2.82,2.8,3,3,0,0,1-.45,3,4.48,4.48,0,0,1-2.58,1.46,4.48,4.48,0,0,1-4.87-2,4.37,4.37,0,0,1-.75-2.87,3,3,0,0,1,1.85-2.44A5.05,5.05,0,0,1,296.63,182.34Z"/><path class="cls-8" d="M320.06,194.45a16.53,16.53,0,0,1,5.18,5.14c1,1.69,1.19,3.15.49,3.94s-2.13.8-3.88.28a28.09,28.09,0,0,1-11.07-7.19c-1.19-1.39-1.77-2.7-1.32-3.67s1.85-1.37,3.8-1.15A16.57,16.57,0,0,1,320.06,194.45Z"/><circle class="cls-3" cx="133.38" cy="300.14" r="22.91"/><circle class="cls-1" cx="143.6" cy="283.11" r="12.7"/><circle class="cls-8" cx="124.18" cy="308.69" r="5.28"/><circle class="cls-3" cx="239.38" cy="305.14" r="22.91"/><circle class="cls-1" cx="249.6" cy="288.11" r="12.7"/><circle class="cls-8" cx="230.18" cy="313.69" r="5.28"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg
new file mode 100644
index 00000000..c4c17223
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.47 510.81"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#ceea57;}.cls-3{fill:#213346;}.cls-4{fill:#95bc4a;}.cls-5{fill:#bfe1ee;}.cls-11,.cls-6{fill:#fff;}.cls-7{fill:#f5a2c6;}.cls-8{fill:#d676a3;}.cls-9{fill:#f9637c;}.cls-10{fill:#cc3656;}.cls-11{opacity:0.5;}.cls-12{fill:#f6aecd;}.cls-13{fill:#86b9f8;}.cls-14{fill:#7662fa;}</style></defs><title>Asset 16</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="191.74" cy="457.95" rx="179.73" ry="52.86"/><circle class="cls-2" cx="334.64" cy="271.05" r="40.33"/><path class="cls-3" d="M334.64,314.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,334.64,314.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,334.64,233.83Z"/><path class="cls-3" d="M356.42,273.33a3,3,0,0,1-2.93-2.41c-3.92-19.6-23.82-16.39-24.67-16.24a3,3,0,0,1-1.05-5.91c9.15-1.63,27.53.65,31.6,21a3,3,0,0,1-2.35,3.53A3.05,3.05,0,0,1,356.42,273.33Z"/><circle class="cls-2" cx="44.83" cy="269.05" r="40.33"/><path class="cls-4" d="M76.23,244.43a40.32,40.32,0,0,0-55.79,55.79,40.33,40.33,0,1,1,55.79-55.79Z"/><path class="cls-3" d="M44.83,312.49a44.83,44.83,0,1,1,44.83-44.83A44.88,44.88,0,0,1,44.83,312.49Zm0-80.66a35.83,35.83,0,1,0,35.83,35.83A35.87,35.87,0,0,0,44.83,231.83Z"/><path class="cls-2" d="M188.76,62h2.72A142.34,142.34,0,0,1,333.82,204.34v92.6a143.7,143.7,0,0,1-143.7,143.7h0a143.7,143.7,0,0,1-143.7-143.7v-92.6A142.34,142.34,0,0,1,188.76,62Z"/><path class="cls-4" d="M208.37,437.76a143.43,143.43,0,0,1-19.77,1.37c-79,0-143.71-64.66-143.71-143.71V200.94c0-77.25,63.22-140.46,140.47-140.46h6.48a136.88,136.88,0,0,1,16.53,1C138.82,69.71,84.43,129.29,84.43,200.94v94.48C84.43,367.76,138.58,428.06,208.37,437.76Z"/><path class="cls-3" d="M188.6,445.15A148.62,148.62,0,0,1,40.39,296.94v-92.6A147.26,147.26,0,0,1,187.24,57.5H190A147.26,147.26,0,0,1,336.8,204.34v92.6A148.62,148.62,0,0,1,188.6,445.15ZM187.24,66.5A138.26,138.26,0,0,0,49.39,204.34v92.6a139,139,0,0,0,237.52,98.31,138.2,138.2,0,0,0,40.89-98.31v-92.6A138.24,138.24,0,0,0,190,66.5Z"/><path class="cls-5" d="M319.19,272.92v.18C318.65,273.12,318.86,273,319.19,272.92Z"/><path class="cls-3" d="M20.84,273.92a2.31,2.31,0,0,1-.37,0,3,3,0,0,1-2.61-3.34c1.7-13.89,7.61-20.76,12.26-24.07a20.44,20.44,0,0,1,10.38-4,3,3,0,0,1,.23,6c-.63,0-14.25,1.06-16.92,22.76A3,3,0,0,1,20.84,273.92Z"/><path class="cls-3" d="M190.57,306.5a3,3,0,0,1-3-3V256.91a3,3,0,1,1,6,0V303.5A3,3,0,0,1,190.57,306.5Z"/><path class="cls-6" d="M40.94,365.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S40.22,369.1,40.94,365.6Z"/><path class="cls-6" d="M42.16,403.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,42.16,403.44Z"/><path class="cls-7" d="M137.75,2.51a33.77,33.77,0,0,0-24.37,10.94,34,34,0,0,0-41.26,46,34,34,0,1,0,38.79,54.36,34,34,0,0,0,54.73-27.46c0-.39,0-.78-.06-1.17a34,34,0,1,0,7.68-66.91,34.46,34.46,0,0,0-5.87.62A33.92,33.92,0,0,0,137.75,2.51Z"/><path class="cls-8" d="M89.32,49.48a33.74,33.74,0,0,0,2.8,12.94,34,34,0,0,0,6.82,64,34.92,34.92,0,0,1-6.91.82A34,34,0,0,1,77.12,62.42a34,34,0,0,1,30.57-47.49,34.27,34.27,0,0,1,8.1.82A34,34,0,0,0,89.32,49.48Z"/><path class="cls-3" d="M86.42,130.69A38.47,38.47,0,0,1,66.54,59.3,38.47,38.47,0,0,1,102.61,9.43a38.62,38.62,0,0,1,9.42,1A38,38,0,0,1,137.67,0h0a38.68,38.68,0,0,1,31.88,16c1.2-.14,2.42-.22,3.63-.24a38.47,38.47,0,0,1,28.34,65.18,38.17,38.17,0,0,1-27,11.75,40.18,40.18,0,0,1-4.53-.19,38.46,38.46,0,0,1-58.66,29.07,38.09,38.09,0,0,1-24.22,9.13ZM103.29,18.42h-.53a29.45,29.45,0,0,0-28.94,30,29,29,0,0,0,2.43,11.22l1.75,4L74,65.5a29.47,29.47,0,1,0,33.65,47.16l2.8-2.92,3.2,2.48A29.45,29.45,0,0,0,161.14,88.4c0-.29,0-.58,0-.87l-.53-6.29,6.12,1.55a29.47,29.47,0,1,0,6.65-58.05,28.71,28.71,0,0,0-5.08.54l-3.08.6-1.63-2.68A29.59,29.59,0,0,0,137.83,9h0a29.21,29.21,0,0,0-21.14,9.5l-1.93,2.09L112,19.75A29.32,29.32,0,0,0,103.29,18.42ZM137.75,4.51h0Z"/><polygon class="cls-3" points="225.1 107.59 226.73 112.26 221.44 110.12 233.38 107.94 235.94 107.48 236.58 109.21 243.09 126.94 231.9 111.73 235.06 112.98 224.2 118.39 221.46 119.76 218.98 116.27 215.87 111.89 194.8 82.23 205.66 66.03 225.1 107.59"/><polygon class="cls-3" points="81.49 154.74 81.53 157.94 84.27 155.47 76.54 156.78 74.89 157.06 74.88 158.25 74.82 170.43 78.27 158.75 76.63 160.2 84.41 161.1 86.37 161.33 87.11 158.67 88.04 155.33 95.65 128.68 84.16 125.25 81.49 154.74"/><polygon class="cls-3" points="197.95 122.51 197.9 126.47 194.51 123.42 204.09 125.03 206.15 125.38 206.16 126.86 206.23 141.99 201.95 127.48 203.99 129.29 194.33 130.4 191.89 130.68 190.97 127.38 189.82 123.23 180.37 90.14 194.63 85.89 197.95 122.51"/><polygon class="cls-3" points="149.78 144.16 144.65 143.61 144.93 142.63 148.61 118.63 135.56 121.73 137.8 143.28 138.05 145.98 138.25 148.13 140.4 147.9 147.64 147.1 148.59 155.26 151.23 145.32 151.49 144.35 149.78 144.16"/><circle class="cls-3" cx="241.03" cy="227.35" r="41.06"/><rect class="cls-9" x="238.09" y="225.78" width="15.99" height="86.04" rx="6.5"/><path class="cls-10" d="M249.78,310.38a5.81,5.81,0,0,1-3.69,1.43c-4.42,0-8-5.69-8-12.71V238.48c0-7,3.58-12.7,8-12.7a5.8,5.8,0,0,1,3.69,1.42c-2.56,2.13-4.31,6.38-4.31,11.28V299.1C245.47,304,247.22,308.25,249.78,310.38Z"/><path class="cls-3" d="M246.09,314.81a11,11,0,0,1-11-11v-70a11,11,0,0,1,22,0v70A11,11,0,0,1,246.09,314.81Zm0-86a5,5,0,0,0-5,5v70a5,5,0,1,0,10,0v-70A5,5,0,0,0,246.09,228.78Z"/><path class="cls-6" d="M296.05,131.36a75.23,75.23,0,0,1,6,11c.74,1.78,1.43,3.47,1.95,5.11s1,3.16,1.31,4.57c1.35,5.68,1.2,9.35.22,9.6-2.16.52-6.69-12.4-15.84-26.1-9-13.81-19.06-23.07-17.73-24.84.61-.81,4.05.51,8.73,4,1.17.87,2.42,1.86,3.69,3s2.58,2.43,3.93,3.81A76.62,76.62,0,0,1,296.05,131.36Z"/><path class="cls-6" d="M313.3,178.31c.48,2.42-.82,4.71-2.89,5.12s-4.15-1.22-4.62-3.64.82-4.72,2.9-5.13S312.83,175.89,313.3,178.31Z"/><path class="cls-6" d="M317,202.62c.54,4.11-.73,7.66-2.82,7.94s-4.24-2.84-4.77-6.94.73-7.66,2.83-7.94S316.48,198.52,317,202.62Z"/><circle class="cls-11" cx="229.78" cy="343.53" r="5.28"/><path class="cls-12" d="M138,52.68a29,29,0,0,0-19.37-.87c-4.89,1.53-7.35,3.77-7.61,3.46-.11-.12.35-.84,1.49-1.84A19.53,19.53,0,0,1,118,50.11a27.32,27.32,0,0,1,9.38-1.92,29,29,0,0,1,11.56,2.13,27.34,27.34,0,0,1,9.7,6.66,27.9,27.9,0,0,1,5.25,8,23.39,23.39,0,0,1,1.74,6.16c.19,1.49.1,2.34-.06,2.36-.42.07-.9-3.21-3.31-7.74a30.26,30.26,0,0,0-5.31-7.14A27.38,27.38,0,0,0,138,52.68Z"/><path class="cls-12" d="M108.26,80.3a20.07,20.07,0,0,1,5.12-6.47,17.38,17.38,0,0,1,5.9-3.25,12.35,12.35,0,0,1,4.47-.59c1.06.08,1.62.29,1.61.45,0,.42-2.29.4-5.44,1.83a19,19,0,0,0-5,3.33,20.41,20.41,0,0,0-4.38,5.83,30,30,0,0,0-2.72,13.22c0,3.56.27,5.81-.11,5.89s-1.22-2.07-1.69-5.78a27.59,27.59,0,0,1,0-6.59A24.21,24.21,0,0,1,108.26,80.3Z"/><path class="cls-12" d="M140.43,20.33a25.58,25.58,0,0,1,7.06,2.46,15.34,15.34,0,0,1,4.81,3.92,8.61,8.61,0,0,1,1.76,3.83c.16,1,0,1.54-.14,1.56-.41.07-.75-2-3-4.19a16.3,16.3,0,0,0-4.52-3,28.82,28.82,0,0,0-6.48-2.05,20.5,20.5,0,0,0-6.69-.31,13.86,13.86,0,0,0-5.09,1.69c-2.71,1.55-3.75,3.39-4.09,3.2-.15-.07-.09-.63.35-1.52a9.55,9.55,0,0,1,2.73-3.17,13.55,13.55,0,0,1,5.72-2.52A19.9,19.9,0,0,1,140.43,20.33Z"/><path class="cls-12" d="M186.89,58.43a31.33,31.33,0,0,0,1.87-9.7,11.92,11.92,0,0,0-2.48-7.23,38.35,38.35,0,0,0-3.72-4.12c-.95-1-1.44-1.54-1.33-1.68s.8.18,2,.91a22.1,22.1,0,0,1,4.49,3.76,12.88,12.88,0,0,1,3.43,8.27,30.14,30.14,0,0,1-1.79,10.58,20.67,20.67,0,0,1-2.38,5.16,14,14,0,0,1-3.87,3.81,16.85,16.85,0,0,1-8.49,2.65,18,18,0,0,1-5.85-.68c-1.33-.39-2-.81-1.95-1,.1-.41,3,.43,7.63-.16a16.46,16.46,0,0,0,7.33-2.79A12.18,12.18,0,0,0,184.85,63,19.79,19.79,0,0,0,186.89,58.43Z"/><path class="cls-12" d="M85.1,87.16A13.11,13.11,0,0,1,81,78.56c-.12-2.47.54-3.89.85-3.83s.39,1.48.94,3.56A14,14,0,0,0,94.08,88.92c2.11.43,3.54.36,3.61.74s-1.3,1-3.78,1.06A13.1,13.1,0,0,1,85.1,87.16Z"/><path class="cls-12" d="M133,92.83a24.28,24.28,0,0,0,4.74-.43,20,20,0,0,0,2-.52,16.5,16.5,0,0,0,1.73-.6c2.1-.83,3.36-1.6,3.61-1.3s-.66,1.54-2.78,2.91a13.24,13.24,0,0,1-1.81,1,16.71,16.71,0,0,1-2.21.82,18.08,18.08,0,0,1-10.7-.22,16.23,16.23,0,0,1-2.18-.92,11.2,11.2,0,0,1-1.76-1c-2.06-1.46-2.88-2.81-2.66-3s1.49.54,3.55,1.46c.52.22,1.08.47,1.71.67s1.3.4,2,.6A24.26,24.26,0,0,0,133,92.83Z"/><path class="cls-12" d="M104.17,42.92a20.9,20.9,0,0,1,4-4,17.67,17.67,0,0,1,2.09-1.33,12.45,12.45,0,0,1,2-.9c2.48-.93,4.14-.86,4.19-.55s-1.36.94-3.41,2.17a17.51,17.51,0,0,0-1.62,1.08c-.58.38-1.13.88-1.74,1.37a23.08,23.08,0,0,0-6,8.07c-.29.72-.6,1.4-.8,2.06s-.4,1.29-.55,1.87c-.59,2.31-.7,3.86-1.09,3.89s-.86-1.53-.7-4.17a13.28,13.28,0,0,1,.3-2.13,16.39,16.39,0,0,1,.66-2.4A20.41,20.41,0,0,1,104.17,42.92Z"/><path class="cls-12" d="M163.78,45.73a23.94,23.94,0,0,0,1.71-3.89,22.19,22.19,0,0,0,.81-3.4c.32-2,.34-3.32.72-3.38s.95,1.21,1.09,3.46a14.52,14.52,0,0,1-.35,3.94A16.69,16.69,0,0,1,163,50.82a14.36,14.36,0,0,1-3.2,2.32c-2,1-3.43,1.14-3.54.85s1-1.06,2.54-2.35a22.65,22.65,0,0,0,2.5-2.45A23.79,23.79,0,0,0,163.78,45.73Z"/><path class="cls-6" d="M173.73,70.51a21.63,21.63,0,0,0,8.47-4.27c1.93-1.57,3-3,3.68-2.73.32.11.49.65.41,1.55a8.73,8.73,0,0,1-1.32,3.5,16.46,16.46,0,0,1-10,6.9,22.68,22.68,0,0,1-11.76-.33c-2.83-.87-4.37-1.93-4.22-2.6s2-.89,4.71-1A47.09,47.09,0,0,0,173.73,70.51Z"/><path class="cls-6" d="M186.07,51.39c.2-1.77,1.49-3.08,2.89-2.93s2.38,1.72,2.19,3.49-1.49,3.08-2.89,2.92S185.88,53.16,186.07,51.39Z"/><path class="cls-6" d="M183.86,41.8a2.6,2.6,0,0,1,4.14-3,2.61,2.61,0,0,1-4.14,3Z"/><path class="cls-13" d="M330,302c20.28,37,13.83,73.05,14.54,107.47l-11-12.15a118.62,118.62,0,0,1-28.8,57.47,42.38,42.38,0,0,0-13.34-14.7A89.09,89.09,0,0,1,263.9,487a35.8,35.8,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29,23.17,23.17,0,0,0,2.52-22.37c-11.17,19-43.3,19.54-55.14,1-.82,3.75-.22,8.67,3.61,9-16.11,2.48-30.85-4.3-41.93-16.25a27.05,27.05,0,0,0,9,17.56,49.18,49.18,0,0,1-40.92-27.17c-20.77,1.29-41.53-12.94-47.8-32.79a9.91,9.91,0,0,1-2.59,9.51c-35.89-18.22-34-99.94-10.46-126.89,0,0,49.48,7.94,79.51,30.74,6.43,4.88,14.43-4.6,23.27-7.4,17.51-5.53,38.32-11.15,56.88-11.22,23.39-.1,35.9,29.56,50.89,15.49C298.57,293.65,329.64,301.39,330,302Z"/><path class="cls-14" d="M345.91,405.22l-11-12.16a118.76,118.76,0,0,1-28.81,57.48,42.3,42.3,0,0,0-13.34-14.7,89,89,0,0,1-27.51,46.89,35.83,35.83,0,0,0-1-29.59,56.4,56.4,0,0,1-30.8,34.29A23.2,23.2,0,0,0,236,465.06c-11.17,19-43.3,19.54-55.14,1-.83,3.75.11,17.55,3.94,17.87-16.1,2.48-31.18-13.18-42.26-25.13.64,6.7,2.31,18.78,7.36,23.23-17.16-.88-31.84-17.37-39.3-32.84-20.78,1.29-41.53-12.95-47.8-32.79a9.91,9.91,0,0,1-2.58,9.51c-12.41-6.3-20.59-20-25-36.31,15.87,11.57,34.55,19.51,53,26.63,12.54,4.82,25.24,9.42,38.46,11.83,12.82,2.33,25.92,2.56,39,2.79,36.17.62,73.84.94,106.53-14.59,9.37-4.45,19.26-12.08,18.93-22.46-.37-11.86-13.35-18.63-24.42-22.88,23.58-3.5,42.91-21.78,53.67-43.05a131.59,131.59,0,0,0,9.48-25.3L333,305C342.73,339,345.19,370.81,345.91,405.22Z"/><path class="cls-3" d="M253.41,500.93l7.73-18.34a31,31,0,0,0,2.25-14.75,61,61,0,0,1-28.12,25.32l-15.22,6.65,9.79-13.42a18.51,18.51,0,0,0,3.37-9.49,38.29,38.29,0,0,1-24.46,8.83,39.29,39.29,0,0,1-20.87-5.26c1,5.16.93,9.73-3.16,11.61l-1.89.86-1.88-.86c-13-6-23.27-12.19-31.89-19.33,1.42,5.57,3,7.6,3.8,8.31l9.71,8.53-12.91-.66c-18.37-.93-33.64-18.1-41.8-33.56-17.77,0-34.88-10-44.23-24.92l-.28.28L61,433l-2.87-1.46c-13.73-7-23.61-22.79-27.84-44.54-6.17-31.81.86-70.33,16-87.71a4.5,4.5,0,1,1,6.78,5.92c-13.31,15.26-19.57,51.18-14,80.07,3.26,16.82,10.08,29.4,19.38,36a5.07,5.07,0,0,0-.1-2.09l8.63-2.54c5.62,17.79,24.6,30.81,43.23,29.66l3-.19,1.31,2.72c7.38,15.29,17.47,24.65,26.45,28.73a83.68,83.68,0,0,1-3-16.73l-1.27-13.24,9.05,9.75c8.53,9.2,18.86,16.65,33,23.73-.31-1.46-.69-2.95-1-4-1.25-5-1.93-7.92-1.4-10.33l2.33-10.64,5.86,9.18c4.71,7.38,13.68,11.69,24,11.5s19.08-4.81,23.52-12.35l4.51-7.66,3.51,8.17a27.18,27.18,0,0,1,2,13.86A51.87,51.87,0,0,0,260,453.4l3.32-10.56,5,9.88a40,40,0,0,1,4.21,17.36,84.32,84.32,0,0,0,15.89-33.6l1.43-6.48,5.49,3.72a47,47,0,0,1,11.36,10.93,115.09,115.09,0,0,0,23.84-50.82l1.7-8.88,10,11.05c2-35.79-3.31-65-16.46-91.39a4.5,4.5,0,1,1,8-4C349,331,354.25,364.9,350.39,407.23l-.93,10.24-12.07-13.36a122.34,122.34,0,0,1-27.94,51.07l-4.26,4.65-3-5.53a37.69,37.69,0,0,0-6.81-9,93.54,93.54,0,0,1-27.08,42.37Z"/><path class="cls-2" d="M159.69,399.62a9.74,9.74,0,0,1-9.71-9.71V352.76a9.74,9.74,0,0,1,9.71-9.71h68a9.75,9.75,0,0,1,9.72,9.71v37.15a9.75,9.75,0,0,1-9.72,9.71"/><path class="cls-4" d="M239,356.81v11.52a9.75,9.75,0,0,0-8.91-5.85h-68a9.74,9.74,0,0,0-9.71,9.71v25.63a9.65,9.65,0,0,1-.81-3.87V356.81a9.75,9.75,0,0,1,9.71-9.72h68A9.76,9.76,0,0,1,239,356.81Z"/><path class="cls-3" d="M193.29,341.91c7,0,13.87,0,20.49.1l9.74.12,2.37,0,1.18,0h.33l.43,0,.85.06a14.26,14.26,0,0,1,6.29,2.29,14.06,14.06,0,0,1,6.23,10.73l0,.78v.65l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.45,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44-.05.66s-.05.52-.08.78a11.57,11.57,0,0,1-.74,3,11.41,11.41,0,0,1-3,4.24,9.64,9.64,0,0,1-6.23,2.57,4.68,4.68,0,0,1-1.7-.26c-.38-.14-.55-.3-.55-.46s.17-.34.49-.52l1.35-.66a10.23,10.23,0,0,0,3.89-3.22,8.51,8.51,0,0,0,1.34-3.09,8,8,0,0,0,.12-1.84l0-.5c0-.22,0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.43l0-.3a5.41,5.41,0,0,0-4.95-4.71h-.73l-1.18,0-2.37,0-9.74.12c-6.62.06-13.47.1-20.49.1s-13.87,0-20.48-.1l-9.74-.12-2.38,0-1.18,0h-.73a5.42,5.42,0,0,0-4.94,4.71l0,.3,0,.16v.27l0,1.07c0,.7,0,1.41-.05,2.11,0,1.39-.09,2.77-.13,4.12-.17,5.41-.37,10.45-.59,15s-.46,8.76-.71,12.42c0,.45-.07.9-.1,1.34,0,.22,0,.44,0,.66l0,.5a7.43,7.43,0,0,0,.13,1.84,8.18,8.18,0,0,0,1.34,3.09,10.21,10.21,0,0,0,3.88,3.22l1.35.66c.32.18.5.35.5.52s-.18.32-.55.46A4.74,4.74,0,0,1,157,404a9.6,9.6,0,0,1-6.22-2.57,11.32,11.32,0,0,1-3-4.24,12,12,0,0,1-.74-3c0-.26-.06-.57-.08-.78s0-.44-.05-.66l-.09-1.34c-.26-3.66-.5-7.82-.72-12.42s-.41-9.63-.59-15c0-1.35-.08-2.73-.12-4.12l-.06-2.11,0-1.07v-.65l0-.78a14.08,14.08,0,0,1,6.22-10.73,14.31,14.31,0,0,1,6.29-2.29l.86-.06.43,0h.32l1.18,0,2.38,0,9.74-.12C179.42,342,186.28,341.91,193.29,341.91Z"/><path class="cls-3" d="M60.39,322a37.09,37.09,0,0,0,.47,9,37.78,37.78,0,0,0,2.92,8.91,39.35,39.35,0,0,1-5.49-8A40.74,40.74,0,0,1,55,322.37a44.5,44.5,0,0,1-1-10.27,49.21,49.21,0,0,1,.4-5.25,33.42,33.42,0,0,1,1.13-5.44l10,4.36a23.19,23.19,0,0,0-1.89,3.53,41.21,41.21,0,0,0-1.54,4A38.35,38.35,0,0,0,60.39,322Z"/><path class="cls-3" d="M75.3,330.15c.78,7.09,3.93,14.18,8.49,20.33A45.39,45.39,0,0,1,70,331.43,37.16,37.16,0,0,1,67.79,319,33.53,33.53,0,0,1,70.32,306l9.59,5.16C76.2,316,74.51,323.12,75.3,330.15Z"/><path class="cls-3" d="M102.41,335.48A49,49,0,0,0,109,355a51.46,51.46,0,0,1-11.83-18.14,54.08,54.08,0,0,1-3.61-22.51l10.73,1.85A45.78,45.78,0,0,0,102.41,335.48Z"/><path class="cls-3" d="M279.1,331.6a25.9,25.9,0,0,1-.28,8.41c-.49,2.14-1.22,3.39-1.88,3.33-1.37-.13-2-5.16-2.7-11.16s-1.3-11,0-11.49c.63-.2,1.64.84,2.61,2.8A25.74,25.74,0,0,1,279.1,331.6Z"/><path class="cls-3" d="M300.7,325.92a34.06,34.06,0,0,1-2.28,11.66c-1.17,2.83-2.4,4.35-3,4.13-1.32-.5.23-7.41.4-15.92s-.91-15.49.43-15.91c.62-.19,1.77,1.39,2.79,4.28A34.18,34.18,0,0,1,300.7,325.92Z"/><path class="cls-3" d="M323.44,322.4a51.55,51.55,0,0,1,.48,8.84,42.08,42.08,0,0,1-.84,7.17c-.86,4-2,6.32-2.66,6.19-1.41-.31-.09-10-1.83-21.5s-5.47-20.53-4.18-21.19c.58-.3,2.31,1.61,4.22,5.24a44.14,44.14,0,0,1,2.79,6.64A53.12,53.12,0,0,1,323.44,322.4Z"/><path class="cls-3" d="M68.8,420.47a39.61,39.61,0,0,1-.25-8.28,35.94,35.94,0,0,1,.5-3.58,25.93,25.93,0,0,1,.76-3c1.14-3.68,2.57-5.64,3.16-5.43s.45,2.52.24,6.05c0,.89-.12,1.85-.12,2.88s0,2.13,0,3.28a59.18,59.18,0,0,0,2.11,14.73c.33,1.1.6,2.17.94,3.14s.63,1.89.92,2.73c1.2,3.32,2,5.46,1.47,5.87s-2.43-1.11-4.56-4.32a23.37,23.37,0,0,1-1.57-2.71,33.94,33.94,0,0,1-1.49-3.3A40.12,40.12,0,0,1,68.8,420.47Z"/><path class="cls-3" d="M99.55,433.75a50.42,50.42,0,0,1-.07-13.35c.45-3.36,1.12-5.4,1.79-5.39s1.24,2.09,1.67,5.4.77,7.81,1.45,12.64c.35,2.41.78,4.67,1.25,6.7.27,1,.47,2,.76,2.85l.38,1.3c.14.41.27.8.39,1.18,1,3,1.81,4.94,1.24,5.37s-2.36-.88-4.34-3.84c-.24-.37-.49-.77-.74-1.18s-.46-.87-.7-1.33a28,28,0,0,1-1.31-3.05A39.4,39.4,0,0,1,99.55,433.75Z"/><path class="cls-3" d="M136.2,440.16c-4-14.35-4.59-26.51-3.28-26.67s4.05,11.36,8,25.35,7.6,25.27,6.32,25.82S140.2,454.53,136.2,440.16Z"/><path class="cls-3" d="M244.41,451.81c1.82-6.05,3.09-11.74,4.22-15.84s2.08-6.65,2.75-6.55.91,2.79.66,7.11a75.23,75.23,0,0,1-2.94,16.7,56.28,56.28,0,0,1-3.52,8.82c-.71,1.29-1.35,2.52-2.1,3.61-.37.54-.71,1.07-1.06,1.56l-1.08,1.38c-2.84,3.46-5.24,4.92-5.69,4.49s.9-2.74,2.8-6.4c.24-.45.48-.93.74-1.43l.74-1.58c.54-1.08,1-2.29,1.55-3.52C242.49,457.64,243.49,454.83,244.41,451.81Z"/><path class="cls-3" d="M273,440.9c1.29-7.37,2-14.28,2.87-19.27s1.74-8,2.41-8,1,3.21,1,8.27a116.76,116.76,0,0,1-1.5,19.83,57.15,57.15,0,0,1-2.95,10.79,40,40,0,0,1-4.24,8.17c-3,4.36-5.79,6.2-6.23,5.76s1.21-3.06,3.23-7.47a65,65,0,0,0,3-7.94A85.72,85.72,0,0,0,273,440.9Z"/><path class="cls-3" d="M301.86,422.49c1.43-6,2.41-11.53,3.33-15.56s1.76-6.53,2.43-6.46,1,2.67,1,6.86a74.69,74.69,0,0,1-2,16.31,56.91,56.91,0,0,1-2.88,8.73c-.61,1.29-1.15,2.53-1.8,3.62-.31.55-.6,1.09-.91,1.59l-.95,1.41c-2.48,3.54-4.67,5.16-5.16,4.77s.59-2.76,2.14-6.45l.6-1.45q.3-.76.6-1.59c.45-1.08.82-2.28,1.26-3.51C300.32,428.25,301.13,425.46,301.86,422.49Z"/><path class="cls-3" d="M311.64,413.48c1.55-3.78,2.81-7.46,3.86-10.85.48-1.71,1-3.33,1.35-4.87s.75-3,1.06-4.28c1.21-5.28,1.85-8.64,2.57-8.62s1.22,3.49.85,9.12c-.1,1.41-.23,2.95-.5,4.59s-.58,3.38-1,5.21a72.61,72.61,0,0,1-9.28,22.38c-1,1.56-2,3-3,4.36s-2,2.53-2.89,3.59c-3.73,4.24-6.6,6.27-7.06,5.84s1.41-3.32,4.28-7.9c.72-1.15,1.51-2.4,2.29-3.78s1.62-2.84,2.49-4.39C308.34,420.75,310.06,417.25,311.64,413.48Z"/><path class="cls-6" d="M42.94,339.6c.72-3.5,2.66-5.94,4-5.52s1.67,3.31,1,6.55-2.1,5.77-3.51,5.62S42.22,343.1,42.94,339.6Z"/><path class="cls-6" d="M44.16,377.44a49.43,49.43,0,0,1-1.78-14.27c.14-3.7.8-5.95,1.48-6,1.47,0,2.43,8.7,5.23,18.9s6.3,18.17,5,18.93c-.59.34-2.31-1.26-4.31-4.37A48.78,48.78,0,0,1,44.16,377.44Z"/><path class="cls-3" d="M128.52,338.8H128c-5-.18-8.88-3.13-12-5.51l-.19-.14a150.17,150.17,0,0,0-65.16-28.23A4.5,4.5,0,0,1,52.19,296,159.48,159.48,0,0,1,121.27,326l.19.15c2.35,1.77,4.77,3.61,6.9,3.69s4.58-1.53,7.15-3.22l.75-.49c14.75-9.64,33.89-14.95,53.9-14.95h0c20,0,39.15,5.31,53.9,14.95l.74.48c2.58,1.7,5,3.3,7.15,3.23s4.56-1.92,6.9-3.69l.19-.15A159.59,159.59,0,0,1,328.13,296a4.5,4.5,0,0,1,1.52,8.88,150.17,150.17,0,0,0-65.16,28.23l-.19.14c-3.13,2.38-7,5.33-12,5.51s-9.12-2.53-12.42-4.7l-.71-.47c-27.47-17.94-70.5-17.94-98,0l-.72.47C137.27,336.2,133.32,338.8,128.52,338.8Z"/><path class="cls-3" d="M210.09,385.31h-36a3.5,3.5,0,1,1,0-7h36a3.5,3.5,0,0,1,0,7Z"/><circle class="cls-14" cx="256.32" cy="340.31" r="34.5"/><circle class="cls-6" cx="246.03" cy="330.35" r="40.04"/><circle class="cls-11" cx="250.78" cy="312.53" r="5.28"/><polygon class="cls-3" points="141.26 29.28 141.29 32.05 143.66 29.92 136.97 31.05 135.54 31.29 135.53 32.32 135.48 42.88 138.47 32.75 137.05 34.01 143.79 34.79 145.49 34.99 146.13 32.68 146.93 29.79 152.37 10.18 143.58 3.72 141.26 29.28"/><polygon class="cls-3" points="131.05 92.41 129.84 89.02 133.69 90.55 125.03 92.19 123.17 92.54 122.7 91.28 117.89 78.43 126.08 89.43 123.78 88.53 131.65 84.56 133.64 83.55 135.46 86.07 137.73 89.24 153.18 110.69 145.37 122.52 131.05 92.41"/><circle class="cls-3" cx="123.96" cy="232.98" r="22.91"/><circle class="cls-2" cx="134.18" cy="215.95" r="12.7"/><circle class="cls-6" cx="114.77" cy="241.53" r="5.28"/><circle class="cls-3" cx="242.84" cy="330.2" r="15.77"/><circle class="cls-6" cx="255.89" cy="340.77" r="10.18"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg
new file mode 100644
index 00000000..81145f9b
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 391.79 532.35"><defs><style>.cls-1{fill:#f9cdb7;}.cls-2{fill:#e2a78d;}.cls-3{fill:#213346;}.cls-4{fill:#bfe1ee;}.cls-5{fill:#dfe7ea;}.cls-6{fill:#e99a4f;}.cls-7{fill:#ce7149;}.cls-8,.cls-9{fill:#fff;}.cls-9{opacity:0.5;}</style></defs><title>Asset 17</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="345.9" cy="275.59" r="41.4"/><path class="cls-2" d="M333.5,312.37a41.4,41.4,0,1,0,0-79.56,41.41,41.41,0,0,1,0,79.56Z"/><circle class="cls-1" cx="45.9" cy="275.59" r="41.4"/><path class="cls-2" d="M55.4,314.37a41.4,41.4,0,1,1,0-79.56,41.41,41.41,0,0,0,0,79.56Z"/><path class="cls-3" d="M45.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,45.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,45.9,237.27Z"/><path class="cls-3" d="M21.27,281a3.1,3.1,0,0,1-.43,0,3.51,3.51,0,0,1-3.05-3.9c1.77-14.41,7.92-21.55,12.76-25a21.46,21.46,0,0,1,10.88-4.14,3.5,3.5,0,0,1,.28,7c-.65,0-14.28,1.11-17,23A3.5,3.5,0,0,1,21.27,281Z"/><path class="cls-3" d="M33.65,288.21a3.88,3.88,0,0,1-.82-.09,3.5,3.5,0,0,1-2.59-4.22,32.88,32.88,0,0,0,1-11.59,14.61,14.61,0,0,0-4.4-9.21,3.5,3.5,0,1,1,4.65-5.23,21.52,21.52,0,0,1,6.69,13.58,39.36,39.36,0,0,1-1.16,14.07A3.5,3.5,0,0,1,33.65,288.21Z"/><path class="cls-3" d="M345.9,320.06a45.9,45.9,0,1,1,45.89-45.9A46,46,0,0,1,345.9,320.06Zm0-82.79a36.9,36.9,0,1,0,36.89,36.89A36.94,36.94,0,0,0,345.9,237.27Z"/><path class="cls-3" d="M370.52,281a3.5,3.5,0,0,1-3.47-3.07c-2.69-21.94-16.39-23-17-23a3.52,3.52,0,0,1-3.32-3.66,3.47,3.47,0,0,1,3.6-3.34,21.46,21.46,0,0,1,10.88,4.14c4.85,3.45,11,10.59,12.76,25A3.5,3.5,0,0,1,371,281,3,3,0,0,1,370.52,281Z"/><path class="cls-3" d="M358.15,288.21a3.49,3.49,0,0,1-3.4-2.69,39.2,39.2,0,0,1-1.17-14.08,21.56,21.56,0,0,1,6.69-13.57,3.5,3.5,0,1,1,4.66,5.23,14.56,14.56,0,0,0-4.4,9.21,32.42,32.42,0,0,0,1,11.59,3.52,3.52,0,0,1-2.6,4.22A3.72,3.72,0,0,1,358.15,288.21Z"/><path class="cls-1" d="M196.57,61h2.79a146.1,146.1,0,0,1,146.1,146.1v95A147.5,147.5,0,0,1,198,449.67h0a147.5,147.5,0,0,1-147.5-147.5v-95A146.1,146.1,0,0,1,196.57,61Z"/><path class="cls-2" d="M216.7,446.7a147.74,147.74,0,0,1-20.29,1.41c-81.14,0-147.5-66.37-147.5-147.5v-97c0-79.3,64.87-144.18,144.17-144.18h6.65a142.14,142.14,0,0,1,17,1C152.26,68.11,96.42,126.84,86.17,192.3a509.6,509.6,0,0,1-13.33,61.87L59.49,300.61C59.49,374.86,145.07,436.74,216.7,446.7Z"/><path class="cls-3" d="M196.41,454.17a152.43,152.43,0,0,1-152-152V207.12A151,151,0,0,1,195,56.52h2.79a151,151,0,0,1,150.61,150.6v95.05a152.45,152.45,0,0,1-152,152ZM195,65.52a142,142,0,0,0-141.6,141.6v95.05a143.43,143.43,0,0,0,143,143h0a143.43,143.43,0,0,0,143-143V207.12A142,142,0,0,0,197.8,65.52Z"/><path class="cls-4" d="M330.44,277.5v.2C329.89,277.72,330.11,277.59,330.44,277.5Z"/><ellipse class="cls-5" cx="189.64" cy="471.35" rx="179.73" ry="52.86"/><path class="cls-6" d="M340.74,325.56c21.15,38.59,14.42,76.21,15.16,112.11L344.45,425A123.67,123.67,0,0,1,314.4,485a44.13,44.13,0,0,0-13.92-15.33,92.89,92.89,0,0,1-28.69,48.92,37.34,37.34,0,0,0-1.06-30.87,58.87,58.87,0,0,1-32.13,35.77,24.22,24.22,0,0,0,2.63-23.34c-11.66,19.79-45.18,20.39-57.53,1-.86,3.91-.23,9.05,3.76,9.38-16.8,2.59-32.18-4.49-43.74-16.95a28.25,28.25,0,0,0,9.37,18.32,51.33,51.33,0,0,1-42.69-28.35c-21.68,1.35-43.33-13.5-49.87-34.21a10.36,10.36,0,0,1-2.7,9.92C20.38,440.24,22.38,355,46.91,326.87c0,0,51.63,8.28,83,32.07,20,15.18,54.48-19.31,83.62-19.43,24.41-.11,37.46,30.85,53.1,16.16C308,316.82,340.38,324.9,340.74,325.56Z"/><path class="cls-7" d="M357.35,433.22,345.9,420.54a123.83,123.83,0,0,1-30,60,44.26,44.26,0,0,0-13.92-15.34,92.85,92.85,0,0,1-28.69,48.92,37.38,37.38,0,0,0-1.06-30.87A58.84,58.84,0,0,1,240.05,519a24.22,24.22,0,0,0,2.63-23.33c-11.66,19.79-45.18,20.39-57.53,1-.87,3.92.11,18.31,4.11,18.65-16.8,2.58-32.53-13.75-44.09-26.22.67,7,2.41,19.59,7.68,24.23-17.9-.91-33.22-18.12-41-34.26-21.68,1.35-43.33-13.5-49.87-34.21a10.38,10.38,0,0,1-2.7,9.93C46.34,448.23,37.8,434,33.19,416.91,49.75,429,69.24,437.27,88.51,444.7c13.08,5,26.33,9.83,40.12,12.34,13.38,2.43,27.05,2.67,40.65,2.91,37.73.65,77,1,111.14-15.22,9.78-4.65,20.09-12.6,19.75-23.43-.39-12.38-13.93-19.44-25.48-23.87,24.6-3.65,44.78-22.73,56-44.92a136.88,136.88,0,0,0,9.89-26.39l3.31,2.58C354,364.15,356.61,397.32,357.35,433.22Z"/><path class="cls-6" d="M180.3,341l-49.84,18.58-82-37.21a62.33,62.33,0,0,0-12.09,21.43A237,237,0,0,1,86,361.31a244.47,244.47,0,0,1,22.74,12.33c4,2.46,12.45,10.51,17.42,9.89a10.29,10.29,0,0,0,4.12-1.85c45.61-29.33,79.08-30.62,132.55-21.06L237.74,346Z"/><path class="cls-3" d="M261.36,532.35,269.09,514a32.54,32.54,0,0,0,2.3-16.08,63.44,63.44,0,0,1-29.54,26.86l-15.22,6.65L236.41,518A19.55,19.55,0,0,0,240,507.55c-6.64,5.87-15.71,9.29-25.74,9.47a40.79,40.79,0,0,1-22.06-5.69c1.1,5.49,1.16,10.38-3.1,12.33l-1.88.87-1.88-.87c-13.79-6.36-24.61-12.91-33.69-20.51,1.53,6.3,3.28,8.56,4.17,9.34l9.71,8.53-12.91-.66c-19.13-1-35-18.9-43.5-35h-.06c-18.58,0-36.48-10.43-46.17-26.13l-.47.48L60.12,462l-2.88-1.46C43,453.25,32.7,436.8,28.31,414.16,21.88,381,29.19,340.91,45,322.83a4.5,4.5,0,1,1,6.78,5.92c-14.15,16.22-20.57,53-14.61,83.7,3.45,17.74,10.68,31,20.55,37.85a5.39,5.39,0,0,0-.06-2.56l8.64-2.54c5.89,18.64,25.8,32.28,45.3,31.07l3-.19,1.32,2.73C123.72,495,134.47,504.86,144,509a85.81,85.81,0,0,1-3.29-17.82L139.42,478l9.05,9.75c9,9.69,19.89,17.53,34.83,25-.35-1.64-.78-3.38-1.09-4.62-1.3-5.17-2-8.22-1.46-10.69l2.33-10.64,5.86,9.18c4.95,7.76,14.36,12.28,25.15,12.09s20-5,24.71-13l4.51-7.66,3.5,8.17a28.27,28.27,0,0,1,2,14.82,54.35,54.35,0,0,0,19.11-26.83L271.21,473l5,9.89a41.62,41.62,0,0,1,4.38,18.57,88.11,88.11,0,0,0,16.95-35.57l1.43-6.48,5.49,3.73a48.76,48.76,0,0,1,11.95,11.55,120.21,120.21,0,0,0,25.08-53.29l1.69-8.89,10.47,11.59c2.16-37.59-3.37-68.28-17.17-95.91a4.5,4.5,0,1,1,8-4c15.83,31.7,21.33,67,17.31,111.15l-.93,10.24-12.53-13.87a127.51,127.51,0,0,1-29.2,53.55l-4.26,4.65-3-5.54a39.94,39.94,0,0,0-7.38-9.62,97.41,97.41,0,0,1-28.29,44.41Z"/><path class="cls-1" d="M163.08,427.38a10.16,10.16,0,0,1-10.14-10.13V378.49a10.17,10.17,0,0,1,10.14-10.14H234a10.17,10.17,0,0,1,10.13,10.14v38.76A10.16,10.16,0,0,1,234,427.38"/><path class="cls-2" d="M245.85,382.71v12a10.15,10.15,0,0,0-9.29-6.1H165.61a10.16,10.16,0,0,0-10.14,10.13V425.5a10.1,10.1,0,0,1-.84-4V382.71a10.16,10.16,0,0,1,10.13-10.13h71A10.16,10.16,0,0,1,245.85,382.71Z"/><path class="cls-3" d="M198.13,367.18c7.32,0,14.47,0,21.37.1l10.16.12,2.48,0,1.23,0h.34l.45,0,.89.06a14.83,14.83,0,0,1,6.56,2.4,14.65,14.65,0,0,1,6.5,11.19l0,.81v.68l0,1.11L248,386c0,1.45-.08,2.89-.13,4.3-.18,5.64-.38,10.9-.61,15.69s-.48,9.14-.75,12.95c0,.48-.06.95-.1,1.41,0,.23,0,.46,0,.68s-.05.55-.08.81a12.57,12.57,0,0,1-.77,3.1,12,12,0,0,1-3.1,4.42A10.12,10.12,0,0,1,236,432a4.84,4.84,0,0,1-1.78-.27c-.39-.15-.58-.31-.58-.49s.19-.35.52-.54l1.41-.68a10.84,10.84,0,0,0,4.06-3.37,8.74,8.74,0,0,0,1.39-3.21,8.13,8.13,0,0,0,.13-1.92l0-.53c0-.22,0-.45-.05-.68,0-.46-.07-.93-.1-1.41-.27-3.81-.52-8.15-.74-12.95s-.44-10.05-.62-15.69c0-1.41-.09-2.85-.13-4.3l-.06-2.21,0-1.11v-.28l0-.16,0-.32a5.7,5.7,0,0,0-2.72-4.14,5.59,5.59,0,0,0-2.44-.77h-.76l-1.23,0-2.48,0-10.16.12c-6.9.07-14.05.11-21.37.11s-14.47,0-21.37-.11L166.59,377l-2.47,0-1.23,0h-.76a5.59,5.59,0,0,0-2.44.77,5.7,5.7,0,0,0-2.72,4.14l0,.32,0,.16v.28l0,1.11-.06,2.21c0,1.45-.09,2.89-.13,4.3-.18,5.64-.39,10.9-.62,15.69s-.47,9.14-.74,12.95c0,.48-.07.95-.1,1.41,0,.23,0,.46,0,.68l0,.53a8.13,8.13,0,0,0,.13,1.92,8.58,8.58,0,0,0,1.39,3.21,10.69,10.69,0,0,0,4.06,3.37l1.4.68c.34.19.52.37.52.54s-.18.34-.57.49a4.84,4.84,0,0,1-1.78.27,10.14,10.14,0,0,1-6.5-2.68,12,12,0,0,1-3.09-4.42,12.57,12.57,0,0,1-.77-3.1c0-.26-.07-.59-.08-.81l-.06-.68c0-.46-.06-.93-.1-1.41-.26-3.81-.51-8.15-.74-12.95s-.43-10.05-.61-15.69c0-1.41-.09-2.85-.13-4.3,0-.73-.05-1.47-.07-2.21l0-1.11V382l0-.81a14.74,14.74,0,0,1,13.06-13.59l.89-.06.45,0h.34l1.23,0,2.47,0,10.17-.12C183.66,367.21,190.81,367.18,198.13,367.18Z"/><path class="cls-3" d="M59.48,346.35a37.83,37.83,0,0,0,.49,9.41,39.45,39.45,0,0,0,3,9.29,40.75,40.75,0,0,1-5.73-8.37,42.54,42.54,0,0,1-3.46-9.9,46.05,46.05,0,0,1-1-10.71,50.92,50.92,0,0,1,.42-5.48,35.69,35.69,0,0,1,1.17-5.68l10.41,4.56a24.7,24.7,0,0,0-2,3.68,43.89,43.89,0,0,0-1.6,4.2A39.74,39.74,0,0,0,59.48,346.35Z"/><path class="cls-3" d="M75,354.9c.81,7.4,4.1,14.8,8.86,21.21a47.35,47.35,0,0,1-14.38-19.87,38.82,38.82,0,0,1-2.31-12.95,35.09,35.09,0,0,1,2.63-13.62l10,5.38C76,340.17,74.21,347.57,75,354.9Z"/><path class="cls-3" d="M103.32,360.47a51,51,0,0,0,6.84,20.32,54,54,0,0,1-12.35-18.93A56.65,56.65,0,0,1,94,338.38l11.2,1.92A47.79,47.79,0,0,0,103.32,360.47Z"/><path class="cls-3" d="M287.66,356.41a26.93,26.93,0,0,1-.31,8.78c-.5,2.23-1.26,3.53-2,3.48-1.43-.15-2-5.39-2.82-11.65s-1.36-11.51,0-12c.66-.22,1.71.87,2.72,2.91A27,27,0,0,1,287.66,356.41Z"/><path class="cls-3" d="M310.19,350.49a35.36,35.36,0,0,1-2.39,12.16c-1.21,3-2.49,4.54-3.14,4.31-1.37-.52.25-7.73.42-16.61s-.95-16.16.45-16.6c.65-.19,1.85,1.45,2.91,4.47A35.62,35.62,0,0,1,310.19,350.49Z"/><path class="cls-3" d="M333.91,346.82a53,53,0,0,1,.5,9.22,44.45,44.45,0,0,1-.88,7.48c-.89,4.19-2.12,6.59-2.77,6.45-1.47-.31-.09-10.37-1.91-22.42s-5.7-21.42-4.36-22.11c.6-.31,2.41,1.68,4.41,5.46a46.7,46.7,0,0,1,2.91,6.93A56.29,56.29,0,0,1,333.91,346.82Z"/><path class="cls-3" d="M68.25,449.13a41,41,0,0,1-.26-8.64,36.07,36.07,0,0,1,.52-3.73,28.41,28.41,0,0,1,.79-3.18c1.19-3.83,2.68-5.88,3.3-5.66s.47,2.63.25,6.32c0,.92-.12,1.92-.13,3s0,2.22,0,3.41a68.87,68.87,0,0,0,.61,7.76A75.5,75.5,0,0,0,74.89,456c.34,1.15.63,2.26,1,3.27s.66,2,1,2.85c1.24,3.47,2.14,5.7,1.53,6.13s-2.54-1.16-4.76-4.51A26.15,26.15,0,0,1,72,460.94a35.74,35.74,0,0,1-1.55-3.44A41.24,41.24,0,0,1,68.25,449.13Z"/><path class="cls-3" d="M100.32,463a52.94,52.94,0,0,1-.06-13.92c.47-3.51,1.17-5.64,1.87-5.63s1.28,2.19,1.74,5.63.8,8.16,1.51,13.2c.37,2.51.82,4.86,1.3,7,.29,1,.5,2.06.8,3q.19.7.39,1.35l.41,1.23c1,3.14,1.89,5.16,1.29,5.61s-2.46-.92-4.52-4l-.78-1.23c-.25-.43-.48-.9-.73-1.39a31.63,31.63,0,0,1-1.37-3.18A41.46,41.46,0,0,1,100.32,463Z"/><path class="cls-3" d="M138.57,469.67c-4.22-15-4.79-27.65-3.43-27.82s4.23,11.85,8.35,26.45,7.93,26.36,6.6,26.93S142.74,484.66,138.57,469.67Z"/><path class="cls-3" d="M251.46,481.82c1.89-6.31,3.22-12.24,4.4-16.52s2.17-6.94,2.88-6.83.94,2.91.68,7.41a78.07,78.07,0,0,1-3.07,17.43,59.38,59.38,0,0,1-3.67,9.2,42.39,42.39,0,0,1-2.2,3.76c-.37.57-.73,1.13-1.1,1.64l-1.13,1.43c-3,3.61-5.46,5.14-5.93,4.69s.94-2.87,2.92-6.68c.25-.47.5-1,.77-1.49l.78-1.65c.56-1.12,1-2.39,1.62-3.67C249.45,487.91,250.5,485,251.46,481.82Z"/><path class="cls-3" d="M281.25,470.44c1.34-7.68,2-14.9,3-20.1s1.81-8.37,2.51-8.31,1.07,3.35,1.08,8.62a122.32,122.32,0,0,1-1.55,20.69,60.77,60.77,0,0,1-3.08,11.26,42.45,42.45,0,0,1-4.42,8.53c-3.14,4.54-6,6.46-6.51,6s1.27-3.2,3.37-7.8a68.21,68.21,0,0,0,3.11-8.29A89.28,89.28,0,0,0,281.25,470.44Z"/><path class="cls-3" d="M311.39,451.23c1.49-6.22,2.52-12,3.48-16.23s1.83-6.81,2.54-6.73,1.08,2.78,1,7.15a78.88,78.88,0,0,1-2.11,17,58.26,58.26,0,0,1-3,9.11c-.63,1.35-1.19,2.63-1.87,3.78-.33.57-.63,1.13-1,1.65l-1,1.47c-2.59,3.69-4.87,5.39-5.38,5s.61-2.87,2.22-6.72c.2-.48.42-1,.64-1.51s.41-1.08.62-1.66c.47-1.12.85-2.38,1.32-3.67C309.79,457.25,310.63,454.34,311.39,451.23Z"/><path class="cls-3" d="M321.6,441.84c1.61-3.95,2.93-7.79,4-11.33.5-1.78,1-3.46,1.41-5.07s.78-3.1,1.1-4.47c1.26-5.5,1.93-9,2.68-9s1.27,3.64.89,9.52c-.1,1.46-.24,3.07-.52,4.78s-.61,3.53-1,5.44a76,76,0,0,1-9.69,23.34c-1.07,1.63-2.07,3.19-3.13,4.56s-2.05,2.64-3,3.74c-3.89,4.43-6.89,6.55-7.37,6.09s1.47-3.46,4.47-8.24c.75-1.2,1.57-2.5,2.39-3.94s1.69-3,2.6-4.58C318.16,449.42,320,445.77,321.6,441.84Z"/><path class="cls-8" d="M41.38,364.78c.75-3.65,2.73-6.2,4.07-5.78s1.62,3.43.93,6.81-2.14,6-3.55,5.89S40.63,368.42,41.38,364.78Z"/><path class="cls-8" d="M42.64,404.21a53,53,0,0,1-1.88-14.87c.13-3.85.79-6.2,1.47-6.2,1.47,0,2.42,9.08,5.35,19.74s6.63,19,5.37,19.72c-.59.34-2.36-1.34-4.42-4.6A51.58,51.58,0,0,1,42.64,404.21Z"/><path class="cls-3" d="M130.55,363.73h-.49c-5.14-.18-9.18-3.24-12.42-5.71l-.2-.15a157,157,0,0,0-68.07-29.49,4.5,4.5,0,0,1,1.52-8.87,166.07,166.07,0,0,1,72,31.19l.2.15c2.46,1.87,5,3.8,7.3,3.89s4.87-1.61,7.58-3.4l.77-.5c15.36-10,35.29-15.56,56.13-15.56h0c20.83,0,40.77,5.52,56.13,15.56l.77.5c2.71,1.79,5.25,3.48,7.58,3.4s4.84-2,7.3-3.89l.2-.15a166.07,166.07,0,0,1,72-31.19,4.5,4.5,0,0,1,1.52,8.87,157,157,0,0,0-68.07,29.49l-.2.15c-3.24,2.46-7.28,5.53-12.42,5.71s-9.43-2.62-12.85-4.87l-.74-.49c-28.72-18.76-73.71-18.76-102.43,0l-.74.49C139.6,361,135.5,363.73,130.55,363.73Z"/><path class="cls-3" d="M195.39,318.4a3.5,3.5,0,0,1-3.5-3.5V268.31a3.5,3.5,0,0,1,7,0V314.9A3.5,3.5,0,0,1,195.39,318.4Z"/><path class="cls-2" d="M209.25,194.71c-1.68,7.42-1.08,17.32,4.13,23.31,6.07,7,15.65,5.56,23.92,5.22a103.26,103.26,0,0,1,30,3.06c8,2,15.14,6.95,23.27,8.36,8.91,1.55,11-3.19,5.06-9.72-6.94-7.66-17-15.81-26.44-20.25a118.77,118.77,0,0,0-59.61-10.31"/><path class="cls-6" d="M210.19,183.79c-1.68,7.41-1.09,17.31,4.12,23.3,6.07,7,15.65,5.57,23.92,5.22a103.23,103.23,0,0,1,30,3.07c8,2.05,15.15,6.94,23.27,8.36,8.91,1.55,11-3.2,5.07-9.73-6.95-7.65-17-15.81-26.45-20.24a118.64,118.64,0,0,0-59.6-10.32"/><path class="cls-3" d="M294.6,227.53a21.4,21.4,0,0,1-3.68-.35c-4.88-.84-9.33-2.79-13.63-4.67a65.63,65.63,0,0,0-9.91-3.74,99.68,99.68,0,0,0-29-3c-.89,0-1.79.08-2.69.13-7.79.43-17.48,1-24-6.55-6.37-7.32-6.62-18.78-4.9-26.37a3.52,3.52,0,0,1,1.16-1.91,3.48,3.48,0,0,1,2.26-1.14,122,122,0,0,1,61.44,10.63c9.08,4.27,19.64,12.34,27.55,21.06,5.45,6,4.5,10.13,3.44,12.05C301.77,225.25,299.66,227.53,294.6,227.53Zm-51.81-18.82A105.61,105.61,0,0,1,269.13,212a72.87,72.87,0,0,1,11,4.1c4.1,1.8,8,3.49,12,4.2a8.67,8.67,0,0,0,4.3,0c-.08-.54-.6-1.9-2.43-3.91-7.32-8.08-17-15.53-25.34-19.44a115.35,115.35,0,0,0-55.46-10.2c-.91,6.15-.12,13.61,3.76,18.07,4.29,4.93,11.12,4.55,18.35,4.15l2.78-.14C239.66,208.75,241.23,208.71,242.79,208.71Z"/><path class="cls-2" d="M183.07,186.43c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.65,5.56-23.92,5.21A103.64,103.64,0,0,0,125,218c-8,2-15.14,6.95-23.27,8.36-8.9,1.55-11-3.2-5.06-9.72,7-7.66,17-15.82,26.45-20.25,17.56-8.26,39.91-12.29,59.6-10.31"/><path class="cls-6" d="M178.31,175.81c1.68,7.42,1.09,17.32-4.12,23.31-6.08,7-15.66,5.56-23.93,5.21a103.27,103.27,0,0,0-30,3.07c-8,2-15.14,6.95-23.27,8.36-8.91,1.55-11-3.2-5.06-9.72,6.94-7.66,17-15.82,26.45-20.25,17.56-8.26,39.9-12.29,59.6-10.32"/><path class="cls-3" d="M93.9,219.55c-5.06,0-7.17-2.27-8-3.82-1.05-1.92-2-6,3.44-12,7.91-8.72,18.47-16.8,27.56-21.07A122.07,122.07,0,0,1,178.31,172a3.5,3.5,0,0,1,2.25,1.14,3.44,3.44,0,0,1,1.16,1.91c1.72,7.59,1.47,19.05-4.89,26.37-6.54,7.52-16.23,7-24,6.56l-2.69-.14a99.71,99.71,0,0,0-29,3,66,66,0,0,0-9.91,3.74c-4.3,1.88-8.75,3.83-13.63,4.68A21.29,21.29,0,0,1,93.9,219.55Zm-1.83-7.24a8.88,8.88,0,0,0,4.3,0c4-.7,7.93-2.4,12-4.19a72.1,72.1,0,0,1,11-4.11,106.66,106.66,0,0,1,31-3.17c.91,0,1.84.09,2.78.14,7.23.4,14.06.77,18.36-4.16,3.87-4.46,4.66-11.92,3.75-18.07A115.18,115.18,0,0,0,119.85,189c-8.31,3.9-18,11.35-25.35,19.43C92.67,210.41,92.15,211.77,92.07,212.31Z"/><path class="cls-7" d="M340.46,243.84c-6-46.08-35.17-92.93-58.18-123.34l-7-5.27,60-2.06C346.81,155.27,349.82,201.11,340.46,243.84Z"/><path class="cls-8" d="M249.46,120.86a38.06,38.06,0,0,1,6.86,3.6,29.12,29.12,0,0,1,4.87,4c2.51,2.63,3.45,4.8,2.77,5.58s-2.86.14-5.88-1.15c-1.51-.65-3.27-1.42-5.19-2.28s-4-1.75-6.26-2.65-4.4-1.67-6.37-2.4-3.8-1.34-5.34-1.9c-3.08-1.15-5.09-2.14-5-3.22s2.22-2,5.84-2.14a29.39,29.39,0,0,1,6.3.43A38.48,38.48,0,0,1,249.46,120.86Z"/><path class="cls-6" d="M92.19,132.81c29.19-4.84,58.37,3.32,87,9,29,5.73,57,5.91,86-.74,38.4-8.81,88.08-27.83,106.7-71.12A76.9,76.9,0,0,0,375,61.34c-20.42,14.6-47.12,12.59-69.71,3s-42.46-25.77-63.5-39.17S197.13.91,173.16,3.63c-23.29,2.64-47.76,17.86-65.39,35A78.55,78.55,0,0,0,91.53,60.7C88,68.12,87.33,78.9,81.26,84.4c-2.86,2.59-6.59,3.46-10,5.08-15.49,7.47-21.13,29-23.64,48-5.17,39-3.54,79,1.88,118"/><path class="cls-3" d="M344,247a4.31,4.31,0,0,1-1.12-.15,4.5,4.5,0,0,1-3.24-5.48c11.44-44.36,5.43-83.13-7.1-127.69a4.5,4.5,0,1,1,8.66-2.44c12.93,46,19.09,86.07,7.16,132.38A4.51,4.51,0,0,1,344,247Z"/><path class="cls-7" d="M84.69,146.36c0,1.6,0,3.18-.09,4.75L75.34,178.6l-3.12,9.24c-3.13,5.88-6.5,11.7-9.62,17.59S59.57,217,57.35,223a130.31,130.31,0,0,0-6.44,22.57c-2-10.35-6-20.67-7.22-31.15,4.9-4.13,7.94-10.22,9.47-16.49,1.66-6.79,1.69-13.86,1.72-20.85a34.9,34.9,0,0,1,7.45,16.14c.05-.22.1-.46.15-.69q4.08-19.68,6.46-39.66c.72,1.35,1.38,2.72,2,4.13a71.28,71.28,0,0,1,2.81,9.87c0-.33.09-.64.12-1Q76,150.39,76.69,134.7A48.12,48.12,0,0,1,84.69,146.36Z"/><path class="cls-7" d="M338,110.71a155.88,155.88,0,0,1-30.76,16c-2.21.87-4.44,1.72-6.67,2.52-4.79,1.72-9.61,3.25-14.4,4.64-8.59,2.5-17.07,4.5-25.07,6.1-29,5.82-57,5.66-86,.65-15.34-2.66-30.82-5.94-46.39-7.76h0l-37.41.79c0,.4.09.81.12,1.21l-1.06.14-1.67,4.22h0l-1.12,2.81c.18-1.56.3-3.14.34-4.74a56.14,56.14,0,0,0-.35-8.13l35.56-.75a95,95,0,0,1-13.84,2l1.47,0a70.84,70.84,0,0,0,14.31-2h0c10-2.44,23.3-8.24,32.64-12.89-1.21,3.52-4,10.23-7.47,11.6,13.7.77,23.75-2.55,37.16-5.45a30.37,30.37,0,0,1-12.68,10.25l-.52.22c.56,0,1.12,0,1.69,0,.17-.09.33-.19.49-.29a49.15,49.15,0,0,0,6.42-4.7s-3.72,6-3.72,6h0a103,103,0,0,0,44.29-4.43l5.39-1.77,5.76-.8c-1.71,1.75-6.58,3.31-8.61,4.67a34.78,34.78,0,0,1-9.85,4.61c1.37,0,3.49,2.12,4.85,2,10.13-.7,19.39-4.89,29.33-7.14,3.41-.77,7.56-2.33,11-3.14,3-.73,12.1-3.72,15-4.82L275,125.25l3.61-.08-2.11-.59-3,3c.11,0-.86,1.54-.75,1.5,16.8-4.79,47.23-14.23,63.65-20.18h1.07C337.63,109.47,337.82,110.08,338,110.71Z"/><path class="cls-3" d="M49.07,260.3a4.4,4.4,0,0,1-1.42-.23,4.51,4.51,0,0,1-2.85-5.69c3-8.87,40.51-120.88,40.89-122a4.5,4.5,0,0,1,8.54,2.86c-.38,1.13-37.94,113.13-40.89,122A4.5,4.5,0,0,1,49.07,260.3Z"/><path class="cls-8" d="M53.66,144.87a12,12,0,0,1,3.85-5.08c1.42-1,2.76-1.21,3.62-.61s1.14,1.88,1,3.42A20.34,20.34,0,0,1,58,152.52c-1,1.17-2.11,1.87-3.16,1.67s-1.81-1.31-2.09-3A12,12,0,0,1,53.66,144.87Z"/><path class="cls-8" d="M73.29,124.32c2.9-1.35,6-.89,6.87,1s-.73,4.57-3.63,5.93-6,.89-6.87-1S70.39,125.68,73.29,124.32Z"/><path class="cls-8" d="M86.6,109.93c2.1-4.46,5-7.73,7-7.06s2.24,5.38-.07,10.31-6.09,7.77-7.88,6.65S84.52,114.4,86.6,109.93Z"/><path class="cls-3" d="M70.57,69.83a55.25,55.25,0,0,0-9.49-9.16c-2.74-2-4.72-2.87-5.16-2.37-.89,1.07,4.59,7,10.86,14.67l2.69,3.26a17.67,17.67,0,0,0-6.57-.85c-2,.18-3.16.77-3.19,1.43s1,1.34,2.69,2,3.87,1.45,6.3,2.34,4.61,1.76,6.3,2.31l.77.23c1.72,1.88,2.94,2.92,3.46,2.62s.07-2.44-1.41-5.5A56.54,56.54,0,0,0,70.57,69.83Z"/><path class="cls-3" d="M189.84,121.17c-.54.28-1.18.64-1.9,1.06s-1.52.9-2.37,1.43l-1.32.83-1.38.88-2.93,1.88-1.53,1c-.26.16-.51.32-.78.47l-.78.48q-1.57.94-3.18,1.83c-1.07.57-2.15,1.12-3.22,1.63l-.82.36c-.26.13-.53.24-.81.36l-1.6.65c-1.07.4-2.11.8-3.13,1.09-.51.18-1,.29-1.49.44s-1,.24-1.43.37l-1.35.3-1.25.23c-.79.12-1.5.23-2.1.29s-1.08.11-1.41.15l-.52.07.41.31a10.67,10.67,0,0,0,1.24.79,16.92,16.92,0,0,0,2.09,1l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09a22.9,22.9,0,0,0,4-.34,18.43,18.43,0,0,0,2.06-.44l1-.28,1-.34a27.94,27.94,0,0,0,4-1.77,34.42,34.42,0,0,0,3.63-2.31l.84-.64c.27-.21.53-.44.79-.66.53-.44,1-.89,1.51-1.36a33.1,33.1,0,0,0,2.6-2.77c.39-.46.75-.92,1.1-1.37l.95-1.32c.59-.87,1.1-1.68,1.52-2.42s.77-1.4,1-2,.46-1,.59-1.32l.19-.49-.47.22C190.82,120.66,190.38,120.88,189.84,121.17Z"/><path class="cls-3" d="M232.08,127.34l-2.08.93c-.79.37-1.67.79-2.64,1.22-.47.23-1,.48-1.47.71l-1.57.75L221,132.56c-.58.26-1.16.55-1.75.84-.3.15-.59.29-.9.42l-.9.43c-1.2.59-2.44,1.13-3.65,1.73s-2.46,1.15-3.68,1.68l-.91.41c-.3.15-.6.28-.9.41-.61.26-1.2.52-1.78.81-1.18.49-2.31,1.05-3.4,1.51-.55.24-1.08.47-1.59.72s-1,.44-1.5.66c-1,.46-1.86.86-2.65,1.22l-2.08,1c-.58.28-1,.52-1.35.69l-.48.27.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.55,0,1.13-.05,1.73-.1s1.2-.13,1.84-.21c1.26-.15,2.57-.42,3.93-.72.67-.16,1.35-.35,2-.55.34-.09.69-.19,1-.3l1-.36c1.39-.45,2.74-1,4.1-1.63s2.66-1.31,3.9-2.07l.94-.55c.31-.19.6-.39.9-.59.59-.4,1.18-.79,1.74-1.2,1.1-.85,2.16-1.66,3.09-2.53l1.35-1.27c.42-.42.81-.86,1.19-1.26a26,26,0,0,0,1.94-2.33,21.05,21.05,0,0,0,1.34-1.93c.35-.55.6-1,.77-1.31l.26-.49-.52.19C233.14,126.89,232.67,127.08,232.08,127.34Z"/><path class="cls-3" d="M285.59,114.78c-.58.47-1.29,1-2.1,1.64-.4.31-.82.65-1.26,1l-1.41,1.09c-.48.38-1,.79-1.49,1.19L277.72,121c-1.08.88-2.28,1.73-3.45,2.67-.62.44-1.22.91-1.84,1.38-.3.23-.61.47-.93.69l-.95.69c-1.25,1-2.58,1.85-3.86,2.79s-2.62,1.84-3.94,2.7l-1,.65c-.31.23-.64.44-1,.65-.65.42-1.29.83-1.92,1.26-1.28.78-2.49,1.63-3.69,2.34l-1.73,1.1c-.55.36-1.12.66-1.64,1l-1.51,1-1.38.84c-.87.54-1.63,1-2.27,1.42s-1.13.72-1.47,1l-.52.36h.63c.41,0,1,0,1.76-.05a26.4,26.4,0,0,0,2.72-.26l1.67-.25c.58-.11,1.18-.24,1.81-.39s1.3-.29,2-.48,1.36-.41,2.07-.63c1.42-.44,2.87-1,4.37-1.67.74-.33,1.48-.69,2.23-1.06.38-.18.76-.36,1.13-.57l1.11-.62c1.5-.81,2.94-1.78,4.39-2.74s2.79-2.05,4.07-3.18l1-.84c.32-.27.62-.57.92-.86.6-.59,1.2-1.16,1.76-1.74,1.1-1.2,2.15-2.35,3.05-3.54l1.3-1.73c.41-.57.76-1.15,1.12-1.68s.68-1.07,1-1.58l.8-1.48a24.8,24.8,0,0,0,1.17-2.47c.29-.7.5-1.26.64-1.64l.2-.59-.52.36C286.65,114,286.17,114.32,285.59,114.78Z"/><path class="cls-3" d="M75.07,168.26c0-.33,0-.66-.07-1-.07-.66-.14-1.3-.21-1.94s-.22-1.25-.33-1.86a16,16,0,0,0-.4-1.75c-.16-.57-.32-1.11-.47-1.64s-.38-1-.56-1.5-.38-.92-.55-1.35-.42-.8-.61-1.17a13.83,13.83,0,0,0-1.09-1.82c-.34-.49-.61-.86-.79-1.11l-.29-.39.11.47.35,1.3c.17.55.33,1.23.49,2,.09.38.18.79.28,1.22s.14.89.22,1.37.2,1,.24,1.47.12,1,.18,1.59.1,1.1.14,1.67.11,1.15.1,1.75,0,1.2,0,1.81c0,.31,0,.62,0,.93l0,.93q0,.94-.06,1.89c0,.64-.06,1.27-.11,1.91-.11,1.27-.2,2.55-.36,3.8l-.1.94-.12.94c-.08.61-.15,1.22-.23,1.83-.19,1.19-.32,2.37-.51,3.47-.08.56-.16,1.1-.23,1.62s-.16,1-.24,1.52c-.14,1-.27,1.87-.39,2.67s-.2,1.5-.27,2.07-.13,1-.16,1.35,0,.48,0,.48l.23-.42.61-1.21c.26-.53.55-1.17.88-1.92s.67-1.59,1-2.53l.54-1.47q.24-.76.51-1.59c.36-1.09.65-2.27,1-3.49.15-.61.28-1.24.41-1.87l.2-1,.15-1c.23-1.3.37-2.65.48-4,.06-.67.06-1.36.09-2a19.44,19.44,0,0,0,0-2Z"/><path class="cls-3" d="M62.89,191.23l-.23-.94c-.08-.31-.17-.62-.27-.92-.19-.61-.36-1.21-.59-1.78a24.73,24.73,0,0,0-1.44-3.24c-.26-.5-.52-1-.8-1.43s-.56-.88-.84-1.28a22.14,22.14,0,0,0-1.65-2.09c-.53-.59-1-1.07-1.44-1.45s-.77-.66-1-.84l-.37-.27.22.4c.14.26.36.64.62,1.13s.57,1.07.89,1.75.68,1.46,1,2.31c.18.42.35.86.52,1.33s.34.94.5,1.43c.34,1,.64,2,.92,3.14.15.54.26,1.11.39,1.67.07.29.13.57.18.86l.16.87c.21,1.16.37,2.35.5,3.55s.19,2.39.21,3.58v.89a8.42,8.42,0,0,1,0,.87c0,.59,0,1.16,0,1.73s-.05,1.13-.1,1.67-.09,1.09-.16,1.61-.11,1-.18,1.52-.13,1-.22,1.43c-.14.91-.31,1.75-.46,2.5s-.31,1.4-.43,1.94l-.3,1.26c-.07.3-.1.45-.1.45l.27-.37c.18-.24.44-.6.75-1.07s.66-1.07,1-1.77a24.08,24.08,0,0,0,1.12-2.41c.2-.45.35-.93.53-1.43s.33-1,.48-1.56.29-1.1.41-1.68.24-1.17.33-1.78.17-1.23.23-1.86c0-.32.06-.64.08-.95l0-1a32.15,32.15,0,0,0-.12-3.92A35.27,35.27,0,0,0,62.89,191.23Z"/><path class="cls-3" d="M340.52,135.12c-.56-.33-2.35,1.41-4.39,4.82a31.05,31.05,0,0,0-1.53,2.85c-.53,1-1,2.19-1.5,3.41a54.73,54.73,0,0,0-2.4,8.19,53.3,53.3,0,0,0-1,8.48c0,1.31,0,2.55,0,3.72s.16,2.24.29,3.22c.54,3.94,1.5,6.24,2.14,6.16,1.42-.19,1-9.55,3.37-20.59S341.75,135.85,340.52,135.12Z"/><path class="cls-3" d="M332.65,76.3q.6-.6,1.08-1.11c1.28-1.36,1.88-2.21,1.67-2.46s-1.68.43-4.06,1.79q.2-.28.12-.42c-.32-.6-3.28.45-8,1.89-1.18.36-2.47.76-3.87,1.11s-2.89.74-4.46,1.13c-3.16.7-6.64,1.35-10.34,1.81s-7.24.61-10.48.67c-1.61,0-3.15,0-4.59,0s-2.79-.11-4-.17c-4.93-.3-8-.62-8.21,0s2.72,2,7.75,3.17a39.25,39.25,0,0,0,4.15.75c1.5.25,3.12.36,4.83.49a68.2,68.2,0,0,0,11.11-.34,68,68,0,0,0,10.48-2.16A105.26,105.26,0,0,1,303,86.69a105.34,105.34,0,0,1-13.4,2.42c-2.09.18-4.08.41-5.94.45-.94,0-1.84.12-2.71.12l-2.51,0c-6.38,0-10.4-.39-10.54.3-.06.31.87.77,2.65,1.35l1.48.45c.55.14,1.15.26,1.79.4a42.19,42.19,0,0,0,4.43.73l2.6.29c.9.08,1.85.09,2.83.14,2,.12,4.05,0,6.26,0a78.72,78.72,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9c2-1,3.85-1.92,5.51-3,.84-.51,1.66-1,2.42-1.48l2.14-1.5a44.2,44.2,0,0,0,3.53-2.77C331.77,77.08,332.24,76.69,332.65,76.3Z"/><path class="cls-3" d="M258.59,56.35c.84-.51,1.67-1,2.42-1.49l2.14-1.49a42.47,42.47,0,0,0,3.53-2.77c.5-.43,1-.82,1.38-1.21s.77-.77,1.09-1.11c1.27-1.36,1.87-2.22,1.67-2.46s-1.69.43-4.07,1.79c.13-.19.17-.33.12-.43-.32-.59-3.27.46-8,1.9-1.18.35-2.47.75-3.87,1.11s-2.89.74-4.46,1.13c-3.15.7-6.64,1.35-10.34,1.8s-7.24.61-10.47.68c-1.62,0-3.16,0-4.6,0s-2.79-.11-4-.18c-4.92-.29-8-.61-8.21,0s2.72,2,7.75,3.17c1.26.28,2.65.56,4.15.75s3.12.36,4.83.49a67.15,67.15,0,0,0,11.11-.35,66.79,66.79,0,0,0,10.48-2.16,104.66,104.66,0,0,1-12.79,4.27A105.34,105.34,0,0,1,225,62.2c-2.09.18-4.07.41-5.94.45-.94,0-1.84.12-2.71.12l-2.5,0c-6.39,0-10.41-.39-10.55.29-.06.31.87.78,2.65,1.36l1.48.45c.55.14,1.15.26,1.79.4a42.64,42.64,0,0,0,4.43.73l2.6.28c.9.09,1.85.1,2.83.15,2,.12,4,0,6.26,0a79.62,79.62,0,0,0,14.2-2.19,78.61,78.61,0,0,0,13.5-4.9C255.05,58.32,256.93,57.4,258.59,56.35Z"/><path class="cls-3" d="M195.19,30.86c.37-.2.73-.43,1.11-.66.73-.47,1.54-.92,2.32-1.45.41-.24.8-.5,1.2-.76.21-.13.41-.27.62-.39l.61-.4c.81-.54,1.66-1.05,2.48-1.62s1.64-1.1,2.47-1.63l.6-.41c.2-.15.4-.28.6-.41.41-.27.81-.53,1.19-.81.79-.52,1.53-1.08,2.26-1.57l1-.76c.34-.26.67-.49,1-.72l1.76-1.33c.52-.43,1-.8,1.37-1.1s.68-.59.88-.77l.15-.14.21-.06,1.73-.51.62-.2-.62-.19c-.41-.12-1-.29-1.77-.45s-1.69-.35-2.77-.5-2.3-.26-3.64-.33c-.67,0-1.37,0-2.1,0s-1.47,0-2.23.07a47,47,0,0,0-4.82.5c-.83.13-1.67.29-2.52.47l-1.28.28-1.28.32A43.6,43.6,0,0,0,191.24,17a39.83,39.83,0,0,0-4.92,2.38c-.39.22-.78.45-1.16.69l-1.13.73c-.73.51-1.46,1-2.13,1.56a28.65,28.65,0,0,0-3.65,3.44l-.78.89-.7.92a17.84,17.84,0,0,0-1.22,1.8,15.91,15.91,0,0,0-1,1.75c-.14.28-.27.55-.41.82s-.21.55-.31.81a18.1,18.1,0,0,0-.83,2.76,13.93,13.93,0,0,0-.26,1.82c0,.41,0,.63,0,.63l.41-.49c.28-.32.61-.81,1.11-1.37s1.07-1.25,1.8-2l.54-.55.61-.56c.41-.38.83-.78,1.31-1.15s.93-.8,1.47-1.18l.78-.59.83-.58c1.11-.79,2.36-1.53,3.64-2.28l2-1.09,1-.52q.51-.27,1.05-.51c1.42-.69,2.91-1.31,4.4-1.92,1.16-.46,2.32-.9,3.5-1.32l0,0-.63.53c-.21.18-.4.37-.6.56-.39.37-.77.74-1.13,1.12a27.05,27.05,0,0,0-2,2.33c-.28.39-.56.76-.81,1.14s-.48.76-.69,1.13a18.31,18.31,0,0,0-1,2.06,12.12,12.12,0,0,0-.65,1.69c-.16.48-.26.87-.33,1.13l-.09.42.39-.17c.25-.11.61-.28,1.05-.5l1.53-.82,1.9-1.07Z"/><path class="cls-3" d="M107.52,78.93q-.13-.72-.33-1.71l-.46-2.13c-.1-.38-.19-.78-.29-1.19s-.2-.82-.31-1.25c-.23-.84-.42-1.75-.7-2.65-.1-.46-.23-.91-.37-1.38-.07-.23-.13-.46-.19-.7l-.2-.7c-.28-.94-.51-1.9-.81-2.84s-.57-1.9-.83-2.85l-.21-.7c-.09-.23-.15-.46-.22-.69-.14-.46-.27-.92-.43-1.37-.25-.91-.57-1.78-.83-2.62l-.41-1.23c-.15-.4-.27-.79-.4-1.17l-.75-2.06-.65-1.64c-.18-.46-.35-.82-.47-1.07l-.09-.18v-.22c0-.77,0-1.39,0-1.8s0-.65,0-.65l-.36.53c-.24.35-.57.87-1,1.55s-.83,1.52-1.29,2.51-.93,2.12-1.4,3.38c-.21.63-.44,1.29-.66,2s-.4,1.42-.6,2.16c-.37,1.49-.7,3.09-.94,4.75q-.18,1.24-.3,2.55L92,66.84q0,.66-.06,1.32A42.83,42.83,0,0,0,92,73.58a39.33,39.33,0,0,0,.82,5.4c.09.44.19.88.31,1.31l.37,1.3c.27.85.54,1.69.86,2.49a29.54,29.54,0,0,0,2.21,4.51l.62,1,.67.93a19.84,19.84,0,0,0,1.36,1.7,15.78,15.78,0,0,0,1.39,1.43l.67.63.68.54a17.42,17.42,0,0,0,2.39,1.6,12.55,12.55,0,0,0,1.66.79l.59.24-.35-.54c-.22-.36-.59-.82-1-1.47s-.88-1.39-1.34-2.3l-.37-.67-.35-.75c-.24-.5-.5-1-.72-1.59s-.49-1.13-.69-1.75c-.11-.3-.22-.61-.34-.92l-.3-1c-.43-1.3-.76-2.71-1.11-4.15-.14-.74-.29-1.48-.44-2.23L99.44,79a11.19,11.19,0,0,1-.18-1.16c-.24-1.55-.39-3.16-.54-4.76-.1-1.25-.17-2.49-.22-3.74v0l.32.75c.11.25.23.5.35.74.25.48.48,1,.74,1.41a28.05,28.05,0,0,0,1.65,2.55c.29.38.57.76.86,1.11s.58.69.87,1A18.9,18.9,0,0,0,105,78.52a12.68,12.68,0,0,0,1.42,1.12c.41.3.75.51,1,.65l.37.21s0-.15,0-.42S107.6,79.41,107.52,78.93Z"/><path class="cls-3" d="M157.63,30.1c.21-.26.41-.52.63-.76l.62-.77c.82-1,1.69-2.06,2.5-3.13s1.66-2.11,2.5-3.13l.6-.79c.19-.27.4-.52.6-.78.41-.51.81-1,1.18-1.54.8-1,1.52-2,2.25-3,.36-.48.7-1,1-1.41s.66-.92,1-1.35l1.7-2.45c.5-.77.93-1.44,1.3-2s.63-1,.81-1.36l.13-.24.25-.17,2-1.38.71-.52h-.87c-.58,0-1.41.06-2.46.17s-2.34.26-3.79.52-3.07.63-4.82,1.1c-.87.26-1.78.52-2.71.83s-1.88.66-2.85,1c-1.94.76-4,1.64-6,2.67-1,.52-2,1.07-3,1.66l-1.53.9-1.51.95a65.41,65.41,0,0,0-5.9,4.36,52.74,52.74,0,0,0-5.32,5.14c-.42.44-.82.9-1.21,1.37l-1.14,1.41c-.73,1-1.45,1.92-2.09,2.91a39.74,39.74,0,0,0-3.25,6q-.31.75-.63,1.47t-.51,1.47a25.35,25.35,0,0,0-.81,2.83,22.86,22.86,0,0,0-.5,2.66c0,.42-.11.83-.17,1.23s0,.79-.06,1.17a22.82,22.82,0,0,0,.1,3.9,18.82,18.82,0,0,0,.42,2.44l.2.85.32-.81c.23-.53.45-1.3.86-2.23s.85-2.06,1.49-3.28l.46-.94.55-1a23.46,23.46,0,0,1,1.2-2c.44-.69.86-1.42,1.39-2.12l.76-1.1.83-1.09c1.09-1.49,2.39-3,3.72-4.47l2.11-2.23L141.81,32c.36-.38.74-.75,1.13-1.11,1.54-1.47,3.19-2.89,4.85-4.31,1.3-1.08,2.61-2.13,4-3.17l0,0-.59.95c-.19.31-.36.64-.53,1-.34.65-.68,1.28-1,1.93a38.56,38.56,0,0,0-1.52,3.8c-.2.63-.4,1.23-.57,1.82s-.29,1.18-.41,1.74a27.31,27.31,0,0,0-.49,3.1,18.32,18.32,0,0,0-.12,2.44c0,.68,0,1.23,0,1.6l.06.57L147,42c.28-.25.67-.62,1.14-1.09l1.63-1.69,2-2.18c.35-.4.71-.82,1.09-1.24s.75-.87,1.14-1.32c.75-.92,1.6-1.84,2.38-2.84C156.83,31.11,157.23,30.61,157.63,30.1Z"/><path class="cls-3" d="M188.32,415.9a115.94,115.94,0,0,1-19.23-1.61,3.5,3.5,0,1,1,1.26-6.88c.31,0,30.65,5.45,44.82-4.67A15.44,15.44,0,0,0,221.82,392a3.5,3.5,0,1,1,6.92,1,22.47,22.47,0,0,1-9.51,15.42C210.9,414.39,198.63,415.9,188.32,415.9Z"/><circle class="cls-9" cx="260.6" cy="260.93" r="5.28"/><circle class="cls-3" cx="245.8" cy="264.38" r="22.91"/><circle class="cls-1" cx="256.02" cy="247.35" r="12.7"/><path class="cls-8" d="M300.59,168.74c1.29,2.37,1.34,4.85.1,5.52s-3.29-.7-4.58-3.08-1.34-4.85-.1-5.52S299.3,166.36,300.59,168.74Z"/><path class="cls-8" d="M310.25,189.88c1.94,3.62,2.51,7.1,1.27,7.77s-3.83-1.73-5.77-5.36-2.52-7.1-1.27-7.77S308.3,186.25,310.25,189.88Z"/><path class="cls-2" d="M299.47,144.54a262.36,262.36,0,0,1-35.32,10.62c-29,6.65-57,6.47-86,.74-25.17-5-50.77-11.88-76.43-10.17q2.81-6.3,6.16-12.27l18.41-.39c10.64,1.22,21.21,3.34,31.78,5.55.36.16.75.32,1.18.49l1.36.43c.48.12,1,.24,1.54.35s1.12.18,1.71.23,1.22.09,1.85.09h.06c7.43,1.54,14.86,3,22.32,4.12,2.23.33,4.49.63,6.8.88l-.46.26.53.12c.35.07.86.16,1.5.25a21.78,21.78,0,0,0,2.34.23,30.35,30.35,0,0,0,3,0c.53,0,1.1-.05,1.68-.1,27.91,1.92,60.1-1.45,89.18-11.39C295,137.79,297.22,141.11,299.47,144.54Z"/><path class="cls-3" d="M48.53,260.48a4.48,4.48,0,0,1-4.45-3.88c-6.29-45.25-7.1-84.24-2.47-119.22C45.3,109.48,53.85,92.67,67.76,86c1.14-.55,2.28-1,3.38-1.45a18.15,18.15,0,0,0,5.5-2.92c3.46-3.14,5-8.42,6.69-14a62.23,62.23,0,0,1,4-10.82C101,30.15,129.81,8.13,159,2c40.31-8.54,71.8,12.57,102.27,33,14.23,9.53,28.94,19.39,44.16,25.83,24.66,10.44,48.47,9.52,65.33-2.54l10.62-7.6-3.69,12.53a80.3,80.3,0,0,1-3.28,9.09C365.33,93.3,343.91,122,293.34,139c-32.79,11-72.38,14.65-105.89,9.64-9.25-1.38-18.56-3.32-27.56-5.2-23.42-4.88-45.55-9.49-68.56-5.67a4.5,4.5,0,0,1-1.47-8.88c24.66-4.09,48.66.91,71.87,5.74,8.87,1.85,18.05,3.77,27.05,5.11,32.17,4.81,70.18,1.35,101.69-9.27,25.37-8.54,58.45-25.6,74.21-58.63-18,7.64-40.17,6.76-62.78-2.81-16-6.78-31.08-16.88-45.66-26.65C226,22.14,197.43,3,160.84,10.75c-26.25,5.56-53.21,26.18-65.55,50.13A54.71,54.71,0,0,0,92,70.14c-1.85,6.24-3.95,13.3-9.28,18.13a25.88,25.88,0,0,1-8.19,4.6c-1,.4-1.95.79-2.83,1.21-10.95,5.28-17.87,19.83-21.13,44.48C46,172.72,46.82,210.93,53,255.37a4.5,4.5,0,0,1-3.84,5.07A4.4,4.4,0,0,1,48.53,260.48Z"/><path class="cls-3" d="M343.6,255.94a4.49,4.49,0,0,1-4.5-4.47c-.3-40.92-49.59-113.6-50.09-114.33a4.5,4.5,0,1,1,7.44-5.08c2.09,3.07,51.33,75.71,51.65,119.35a4.51,4.51,0,0,1-4.47,4.53Z"/><path class="cls-8" d="M327.53,239.22a114.3,114.3,0,0,1,1,14c0,2.15,0,4.2-.15,6.11s-.26,3.69-.45,5.31c-.76,6.47-2,10.34-2.64,10.25-1.5-.19-.14-15.93-2.82-35-2.51-19.06-8.05-33.86-6.65-34.44.61-.26,2.82,3.14,5.29,9.17.62,1.51,1.26,3.17,1.86,5s1.19,3.78,1.78,5.85A114.05,114.05,0,0,1,327.53,239.22Z"/><circle class="cls-3" cx="145.8" cy="264.38" r="22.91"/><circle class="cls-1" cx="156.02" cy="247.35" r="12.7"/><circle class="cls-8" cx="136.6" cy="272.93" r="5.28"/><circle class="cls-8" cx="239.6" cy="272.93" r="5.28"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg
new file mode 100644
index 00000000..e586ed4e
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 464.12 605.75"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#f0d7c2;}.cls-3{fill:#d7ad8c;}.cls-4{fill:#c4987a;}.cls-5{fill:#8376a5;}.cls-6{fill:#655a8e;}.cls-7{fill:#ebcbac;}.cls-16,.cls-8,.cls-9{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-8{stroke-linecap:round;}.cls-8,.cls-9{stroke-width:10px;}.cls-9{stroke-linecap:square;}.cls-10{fill:#dcb79b;}.cls-11{fill:#fff;}.cls-12{fill:#40565a;}.cls-13{fill:#a699d6;}.cls-14{fill:#485d63;}.cls-15{fill:#796f9c;}.cls-16{stroke-width:11px;}.cls-17{fill:#325560;}</style></defs><title>Asset 120</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="236.82" cy="551.53" rx="184.33" ry="54.22"/><path class="cls-2" d="M30.24,275.91A69.67,69.67,0,0,0,21.69,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="cls-3" d="M18,366.5c3.62,6.7,8.36,12.95,14.66,17.24,2.69,1.84,7,1.57,11.13,1.27-5.9-4.26-10.4-10.26-13.86-16.68-15.65-29-9.35-68.14,14.59-90.75H68.76v-1.84H32.58C8.64,298.37,2.34,337.52,18,366.5Z"/><path class="cls-3" d="M419,275a69.67,69.67,0,0,1,29.75,88.61c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><path class="cls-4" d="M411.42,386.76a29.59,29.59,0,0,0,19.15-4.19c6.72-4,11.79-10.17,15.61-16.77A67.58,67.58,0,0,0,453.47,316c-4.12-16.58-18.64-31.49-33.49-41l-1,13.49c7.89,8.45,16.35,18.74,19.1,29.76a67.58,67.58,0,0,1-7.29,49.78c-3.82,6.6-8.9,12.74-15.61,16.77A30.36,30.36,0,0,1,411.42,386.76Z"/><path class="cls-5" d="M452.36,118.46c-8.78-30.07-32.4-57-62.92-63.67a46.85,46.85,0,0,0-9.71-17.86c-5.41-6.13-12.35-10.72-19.61-14.48-36.17-18.7-79.26-17-119.65-11.85-16.15,2.07-32.27,4.63-48,8.91C128.34,37,73,84.38,45.91,145.09s-22.25,133.54,7.56,193L262.36,185.91V334.35H414.7c-8.85-26.74-4.64-73.12,7.76-98.72,9.21-19,22.61-32.09,28.47-53.07C457,160.94,458.72,140.29,452.36,118.46Z"/><path class="cls-6" d="M454.65,186.37C452,196,447.72,203.88,443,211.49c-.82-48.6-11-97.83-36.11-139.38A92.48,92.48,0,0,0,398.41,60c28,8.43,49.4,34,57.66,62.31C462.44,144.1,460.69,164.75,454.65,186.37Z"/><path class="cls-7" d="M53.69,331.22c15.1-11.09,21.39-30.36,26.05-48.51A691.24,691.24,0,0,0,99.16,167.36l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370,167.87s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62l-.21.12a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.47,469.8,52,405.33,52.78,332.34"/><path class="cls-2" d="M146.18,528.31c-48.31-54-94-118-93.24-190.45l.91-1.13c15.09-11.09,21.39-30.36,26-48.51A690.78,690.78,0,0,0,99.31,172.88l28.18,8.41C118.46,222.82,83,409.19,146.18,528.31Z"/><path class="cls-3" d="M323.51,525.35a270.7,270.7,0,0,1-19.2,19.85c22.46-40.14,35.38-85.8,40-131.73,6.33-63.1-2.24-126.93-17.2-188.56-.55-2.26-1.17-4.63-2.75-6.34-2.47-2.67-6.5-3-10.13-3.13-20.76-.84-41.76-1.81-61.63-7.87a105.08,105.08,0,0,1-17.44-7c19.43-4.07,37.77-14.78,56.7-21.88A165.11,165.11,0,0,1,367,169.1s7.49,121.69,48.83,164.46C416.61,406.56,372.26,471,323.51,525.35Z"/><path class="cls-8" d="M390.57,54.45c31.3,6,55.6,33.41,64.53,64,6.37,21.82,4.61,42.47-1.43,64.1-5.86,21-19.26,34.06-28.47,53.07-12.4,25.6-14.78,71.07-5.93,97.81"/><path class="cls-8" d="M27.49,275.91A69.67,69.67,0,0,0,18.93,369c4.48,6,10.06,11.3,16.89,14.32s15,3.46,21.65,0"/><path class="cls-8" d="M422.38,274.38A69.67,69.67,0,0,1,452.13,363c-3,6.84-7.19,13.32-13.14,17.82s-13.82,6.82-21.06,5"/><polygon class="cls-3" points="237.17 353.31 237.17 432.24 264.71 432.24 237.17 353.31"/><polyline class="cls-9" points="237.32 357.44 236.19 423.51 236.11 428.1"/><path class="cls-10" d="M344.27,308.58c.57,5-.41,9-1.09,8.93s-.9-4-1.45-8.65-1.2-8.52-.51-8.75S343.71,303.58,344.27,308.58Z"/><path class="cls-11" d="M160.6,204.75a109.34,109.34,0,0,1,22.25,7.54c5.49,2.71,8.48,5.28,8,6.57s-4.34,1.18-10.15.31-13.7-2.41-22.45-4.49A144,144,0,0,1,136,207.81c-5.57-2.38-8.76-4.67-8.36-6s4.24-1.55,10.15-1A175.83,175.83,0,0,1,160.6,204.75Z"/><path class="cls-12" d="M397.3,128.18a75.72,75.72,0,0,1,1.9,14c0,2.17.07,4.23-.09,6.16-.07,1-.1,1.89-.21,2.78l-.35,2.55c-1,6.48-2.82,10.19-3.8,10s-1.24-4.15-1.61-10.27L393,151c0-.83-.16-1.7-.23-2.59-.11-1.78-.38-3.68-.6-5.67-.54-4-1.27-8.29-2.32-12.78s-2.39-8.66-3.69-12.45c-.71-1.87-1.32-3.68-2-5.33-.34-.83-.63-1.65-1-2.41l-.95-2.21c-2.43-5.63-4.08-9.23-3.19-9.9s4.05,1.91,7.9,7.22l1.46,2.11c.5.74.95,1.55,1.44,2.38,1,1.65,1.9,3.5,2.85,5.46A75.74,75.74,0,0,1,397.3,128.18Z"/><path class="cls-12" d="M435.13,118.25a108.47,108.47,0,0,1-2.34,18.33c-.67,2.76-1.29,5.39-2.1,7.78-.39,1.2-.73,2.37-1.14,3.46L428.33,151a55.23,55.23,0,0,1-2.41,5.25c-.39.76-.74,1.46-1.11,2.09s-.74,1.19-1.08,1.69c-1.34,2-2.3,3-2.79,2.77-1-.47.38-5.47,2.21-13.44l.71-3.13c.25-1.08.43-2.23.67-3.4.51-2.34.86-4.87,1.31-7.51A173.57,173.57,0,0,0,427.48,118a173.79,173.79,0,0,0-.37-17.39c-.26-2.66-.43-5.21-.77-7.58-.16-1.18-.25-2.34-.42-3.44l-.48-3.17c-1.25-8.08-2.3-13.17-1.24-13.56.5-.18,1.38.87,2.58,3q.45.79,1,1.76c.32.66.62,1.38,1,2.17a55.19,55.19,0,0,1,2,5.41l1,3.21c.33,1.12.59,2.31.89,3.54.64,2.45,1.06,5.11,1.53,7.91A108.47,108.47,0,0,1,435.13,118.25Z"/><path class="cls-12" d="M407,237.87a61.19,61.19,0,0,1,3-13.43,51.88,51.88,0,0,1,2.35-5.53c.43-.84.8-1.66,1.25-2.41l1.31-2.14a30.51,30.51,0,0,1,2.52-3.48c.4-.49.77-.95,1.14-1.34s.75-.73,1.09-1c1.35-1.2,2.28-1.69,2.71-1.38.91.66-.62,4.15-2.6,9.64l-.77,2.16c-.27.75-.48,1.55-.74,2.36-.56,1.61-1,3.38-1.49,5.21A83.83,83.83,0,0,0,414.29,251c.13,1.9.18,3.72.4,5.4.1.85.14,1.68.25,2.46l.32,2.27c.83,5.79,1.62,9.51.59,10-.48.21-1.3-.46-2.37-1.9q-.4-.54-.85-1.23c-.29-.46-.55-1-.84-1.54A30.49,30.49,0,0,1,410,262.5l-.85-2.36c-.28-.83-.48-1.71-.73-2.61a51.91,51.91,0,0,1-1.18-5.89A61.23,61.23,0,0,1,407,237.87Z"/><path class="cls-13" d="M338.06,11a505.1,505.1,0,0,0-65.52,7.53c-9.44,1.72-18.9,3.72-27.78,7.32C237.13,29,230,33.22,222.27,36.08l-1,.35c-15.13,5.37-33.2,6.48-43.21,19L179.81,52q1.31-2.53,2.6-5.07a64.64,64.64,0,0,0-39.5,17c-.84.79-1.73,1.54-2.63,2.27-9,7.24-20.27,11.3-28.87,19.81q-.45-4.32-.89-8.65-2,1.23-3.94,2.52c-9.37,6.19-18,13.53-24.81,22.49-7.31,9.7-12.31,21.4-12.89,33.52a2.76,2.76,0,0,0-1.28-1.65c-.22.33-.44.67-.65,1a164.8,164.8,0,0,0-25.72,75.23q-1.39-4.56-2.77-9.1c-.08,1.17-.16,2.37-.21,3.63a304,304,0,0,0,3.3,57.5,58,58,0,0,1-13.19-23.61,221.08,221.08,0,0,1,5.31-59.68A200.24,200.24,0,0,1,46,142.48a217.66,217.66,0,0,1,18.72-33.54A52.26,52.26,0,0,1,66.84,100a231.53,231.53,0,0,1,78.78-67.78,147.77,147.77,0,0,0-11.25,10A223.1,223.1,0,0,1,179,21.07q6.69-2.31,13.52-4.18a312,312,0,0,1,36.29-7.31c3.89-.58,7.79-1.1,11.68-1.61,10.4-1.34,21-2.43,31.56-3C294.53,3.75,317,4.85,338.06,11Z"/><path class="cls-8" d="M50.86,335.92C21,276.49,16.19,203.66,43.3,142.95S125.73,34.84,189.89,17.37c15.71-4.28,31.83-6.84,48-8.91,40.39-5.18,83.48-6.85,119.65,11.85,7.26,3.75,14.2,8.35,19.61,14.48C388.79,48,392,67.82,386,84.4s-20.53,29.56-37.4,34.67"/><path class="cls-12" d="M119.45,55.71a122.27,122.27,0,0,1,11.37-12.29c1.91-1.73,3.71-3.37,5.52-4.79s3.48-2.72,5.07-3.83c6.39-4.44,10.89-6.3,11.46-5.47,1.28,1.85-13.39,13.4-27.43,31.16C111.22,78.11,103.19,95,101.1,94.13c-.93-.38-.12-5.17,2.8-12.39.74-1.8,1.58-3.75,2.62-5.79s2.18-4.19,3.45-6.44A122.24,122.24,0,0,1,119.45,55.71Z"/><path class="cls-12" d="M152.92,44.74a155.46,155.46,0,0,1,12.6-13.37c2.09-1.91,4.07-3.71,6-5.29s3.78-3,5.5-4.29c6.91-5,11.74-7.28,12.34-6.46,1.32,1.81-14.6,14.92-30.58,34.31C142.68,68.9,132.71,87,130.69,86c-.91-.44.42-5.6,4.09-13.32.92-1.92,2-4,3.21-6.2s2.61-4.49,4.1-6.89A155.46,155.46,0,0,1,152.92,44.74Z"/><path class="cls-12" d="M193,32.11a87.62,87.62,0,0,1,14.89-12.4,79.37,79.37,0,0,1,14-7.35c8.37-3.31,14-3.82,14.24-2.87s-4.55,3.39-11.85,7.73a121.7,121.7,0,0,0-25.76,20.23c-8.94,9.23-15.89,18.86-21.16,25.73s-8.78,11.07-9.7,10.51,1-5.67,5.14-13.44A127.77,127.77,0,0,1,193,32.11Z"/><path class="cls-12" d="M246.25,15.32A101.07,101.07,0,0,1,263,7.14a76.92,76.92,0,0,1,14.74-4c8.63-1.37,14-.51,14.08.47s-5,2.2-12.8,4.79a141.76,141.76,0,0,0-28.82,13.45c-10.67,6.49-19.73,13.51-26.43,18.52s-11.06,8-11.8,7.22,2.32-5.1,8.21-11.27A131.37,131.37,0,0,1,246.25,15.32Z"/><path class="cls-12" d="M38.39,192.46a120.8,120.8,0,0,0,3.08,13.79c.66,2.07,1.22,4.08,1.91,5.9.33.91.6,1.82.94,2.67l.95,2.43c2.44,6.21,4.26,10.1,3.34,10.76-.43.31-1.43-.29-2.9-1.67q-.55-.52-1.19-1.18c-.41-.45-.81-1-1.26-1.52a38.32,38.32,0,0,1-2.81-3.91L39,217.34c-.5-.84-.94-1.75-1.43-2.68a65,65,0,0,1-2.76-6.13,71.66,71.66,0,0,1-4.66-30.3,64.9,64.9,0,0,1,.79-6.68c.19-1,.33-2,.56-3l.69-2.72a38.34,38.34,0,0,1,1.5-4.57c.26-.66.49-1.27.74-1.83s.53-1,.78-1.48c1-1.76,1.76-2.63,2.26-2.47,1.07.35.52,4.61.05,11.26l-.17,2.61c-.06.9,0,1.85-.09,2.82-.11,1.94,0,4,0,6.2A120.86,120.86,0,0,0,38.39,192.46Z"/><path class="cls-12" d="M36.06,250.75a94.42,94.42,0,0,0,5.12,8.54c.9,1.25,1.71,2.48,2.56,3.55.42.55.8,1.1,1.2,1.6l1.16,1.45c3,3.71,5,6.11,4.35,7s-3.77,0-8.06-3.08l-1.65-1.24c-.57-.44-1.1-1-1.68-1.47a42.43,42.43,0,0,1-3.46-3.52,47.69,47.69,0,0,1-10.33-19.94,42.32,42.32,0,0,1-.88-4.85c-.09-.77-.19-1.5-.23-2.22s0-1.4-.06-2.06c0-5.26,1.13-8.39,2.13-8.36s1.91,3.05,3.23,7.61l.52,1.78c.18.62.41,1.25.62,1.91.38,1.32.92,2.69,1.42,4.14A94.39,94.39,0,0,0,36.06,250.75Z"/><path class="cls-12" d="M67.93,123.65A94.35,94.35,0,0,0,69.15,133c.31,1.43.54,2.81.87,4.07.16.64.27,1.27.43,1.86l.44,1.71c1.13,4.37,1.93,7.26,1,7.85s-3.35-1.43-6-5.72l-1-1.71c-.33-.6-.61-1.25-.92-1.92a40.14,40.14,0,0,1-1.7-4.39,45.45,45.45,0,0,1-1.49-21.39,40.27,40.27,0,0,1,1.08-4.58c.22-.71.4-1.39.64-2l.73-1.83c2-4.61,4.21-6.91,5.12-6.49s.62,3.42.11,7.91l-.2,1.76c-.07.61-.1,1.25-.17,1.9-.15,1.3-.19,2.7-.3,4.16A94.26,94.26,0,0,0,67.93,123.65Z"/><path class="cls-6" d="M355.66,174.31a165.11,165.11,0,0,0-59.78,10.43c-10.63,4-21.07,9.1-31.63,13.56v-4.12L252.17,203a106,106,0,0,1-14.22,3.9c-1.55.3-3.11.56-4.69.78a69.08,69.08,0,0,1-11.64.58c-10.43-.39-20.55-3.4-30.53-6.38l-56.29-16.8-14.54-4.34-20.14-6q-2.75,33.38-8.73,66.39Q87.06,265.14,81,288.82c-.1.41-.21.82-.31,1.23-4.66,18.14-10.95,37.42-26,48.5l-.92,1.13c0,1.12,0,2.25,0,3.36Q50.69,336.71,48,330.2c11.22-9.15,18.92-22.41,22.74-36.44,4.32-15.88,4-32.73,1.4-49a1.49,1.49,0,0,0,1.43.57c1.44-.21,3-2.36,3.4-4.18a188.87,188.87,0,0,0,4.36-49.24c0-.66-.06-1.31-.09-2l3.23,3.4c6-11.47,4.25-31.47,6.3-44.25,13.89,12.88,48.77,13.2,66.08,5.51-4.33,3.77-5,12.86-10.1,15.6,1.53,0-8.28,5-6.75,4.94a129.75,129.75,0,0,0,65.78-21.6c-5.24,11-14.41,26.68-26,30.42,1.69.36,2.65-6.32,4.34-6q12.47,2.51,25.09,4.17c12.06,1.61,24.59,2.62,36.17-1.11,14.49-4.66,25.64-16.08,36.16-27.09q0,2.9-.35,5.8a65.84,65.84,0,0,1-5,19.31l32.61-13.88c.05.5.09,1,.12,1.51a27,27,0,0,1-3.55,14.74q25.15-11.8,49.59-25A27.75,27.75,0,0,1,355.66,174.31Z"/><path class="cls-6" d="M411.74,319.21c-8.3-10.85-15.05-25-20.53-40.32-.08-.22-.16-.44-.23-.65-11.25-33.09-16.84-70.92-19.39-93.54,10.71,26.93,25,59.59,39.5,85.45h0C408.88,287.05,408.92,304.81,411.74,319.21Z"/><path class="cls-14" d="M269.63,176.7c24.26-13.66,43.82-25.11,45.05-23.33s-16.68,16.14-41.28,30-46.18,21.74-47,19.86S245.4,190.42,269.63,176.7Z"/><path class="cls-14" d="M257.18,173.65c4.41-4.6,8.39-9.18,11.9-13.46,1.71-2.18,3.38-4.21,4.84-6.2.74-1,1.49-1.92,2.16-2.85l1.94-2.68c4.93-6.84,8-11.24,9-10.75s-.41,5.73-4.33,13.56l-1.59,3c-.56,1.05-1.22,2.11-1.87,3.22-1.28,2.24-2.84,4.51-4.47,6.91a121.8,121.8,0,0,1-26.14,27c-2.34,1.71-4.56,3.34-6.75,4.7-1.09.69-2.12,1.38-3.15,2l-3,1.69c-7.7,4.18-13,5.67-13.41,4.78s3.78-4.16,10.45-9.32l2.61-2c.91-.7,1.81-1.48,2.78-2.25,1.94-1.52,3.92-3.26,6-5C248.28,182.34,252.73,178.22,257.18,173.65Z"/><path class="cls-12" d="M167.43,170.51a127.73,127.73,0,0,0,20.86-7.38c3-1.53,6-2.88,8.6-4.48,1.31-.77,2.63-1.44,3.82-2.21l3.41-2.23c2.24-1.34,4.06-2.84,5.78-4,.84-.61,1.67-1.15,2.38-1.68s1.35-1.06,1.94-1.5c2.38-1.77,3.91-2.61,4.3-2.26s-.39,1.87-2.19,4.37q-.68.93-1.54,2c-.6.72-1.3,1.44-2,2.23a55.67,55.67,0,0,1-5.34,5.13l-3.32,2.77c-1.17.95-2.49,1.79-3.81,2.73a89.12,89.12,0,0,1-8.83,5.42,103.88,103.88,0,0,1-22.17,8.5,103.87,103.87,0,0,1-23.57,2.85,89.14,89.14,0,0,1-10.34-.66c-1.61-.22-3.17-.34-4.64-.63l-4.23-.9a55.7,55.7,0,0,1-7.12-2c-1-.36-2-.66-2.85-1s-1.63-.75-2.32-1.09c-2.76-1.36-4.16-2.34-4-2.84s1.92-.47,4.86,0c.73.11,1.54.26,2.42.42s1.86.23,2.89.37c2.07.25,4.38.72,7,.86l4.06.38c1.41.13,2.89.1,4.41.17,3,.2,6.29,0,9.69-.06A127.74,127.74,0,0,0,167.43,170.51Z"/><path class="cls-12" d="M132.77,165a101.23,101.23,0,0,0,11.59-5.33c1.7-1,3.36-1.87,4.83-2.84.74-.47,1.49-.89,2.17-1.36l2-1.33c5-3.41,8.07-5.83,8.93-5.11.4.34.13,1.39-.74,3q-.33.61-.76,1.34c-.3.47-.67.95-1.06,1.47a32.16,32.16,0,0,1-2.84,3.38L155,160c-.64.63-1.36,1.21-2.09,1.85a54.7,54.7,0,0,1-4.91,3.75,60.59,60.59,0,0,1-26.34,9.87,54.62,54.62,0,0,1-6.16.4c-1,0-1.9,0-2.79,0l-2.57-.2a32.13,32.13,0,0,1-4.36-.68c-.64-.14-1.23-.26-1.76-.41s-1-.34-1.45-.5c-1.73-.66-2.62-1.27-2.54-1.8.17-1.11,4.09-1.32,10.09-2l2.35-.29c.81-.1,1.65-.27,2.52-.4,1.74-.23,3.58-.66,5.51-1A101.21,101.21,0,0,0,132.77,165Z"/><path class="cls-12" d="M72.26,253c-3.94-18.19-10.05-32.28-8.1-33.34.9-.48,3.66,2.5,6.83,8.12.79,1.41,1.62,3,2.4,4.69S75,236,75.75,238a99.8,99.8,0,0,1,4,13.3,99.82,99.82,0,0,1,2,13.73c.12,2.13.24,4.15.2,6.05s-.07,3.66-.19,5.27c-.5,6.44-1.74,10.3-2.76,10.25C76.78,286.49,76.37,271.13,72.26,253Z"/><path class="cls-12" d="M82.64,210.52c-.93-5.11-1.91-9.93-2.87-14.31-.52-2.17-1-4.26-1.47-6.19l-.69-2.81-.68-2.58c-1.72-6.58-2.86-10.76-1.87-11.26s3.8,3,6.94,9.37l1.19,2.53c.4.89.76,1.83,1.15,2.8.8,1.94,1.5,4.06,2.24,6.29a126.38,126.38,0,0,1,3.6,14.79,156.62,156.62,0,0,1,2.4,27.28c0,7-.65,11.34-1.7,11.43s-2.36-4.11-3.69-10.92S84.46,220.74,82.64,210.52Z"/><path class="cls-12" d="M344.09,154.54c1.54-2,2.91-4,4.14-5.82.58-.94,1.18-1.81,1.68-2.67s1-1.65,1.46-2.38c1.79-2.95,3.1-4.91,4.17-4.69s1.56,2.67.92,6.54a22.28,22.28,0,0,1-.74,3.1,30,30,0,0,1-1.27,3.44A34.57,34.57,0,0,1,344.2,165.2a30,30,0,0,1-3,2.07,22.28,22.28,0,0,1-2.83,1.48c-3.59,1.57-6.13,1.62-6.56.71s1.11-2.74,3.53-5.19c.6-.62,1.27-1.27,2-2s1.41-1.49,2.18-2.28C340.94,158.34,342.52,156.53,344.09,154.54Z"/><path class="cls-8" d="M53.84,333.37C68.95,322.28,75.23,303,79.9,284.86A691.24,691.24,0,0,0,99.31,169.51l91,27.16c10,3,20.12,6,30.54,6.38,26.17,1,49.73-14.31,74.25-23.5A165.16,165.16,0,0,1,370.19,170s7.5,121.7,48.83,164.47c.81,73-43.54,137.46-92.3,191.78-11.27,12.55-23,25.08-37.55,33.62L289,560a72.52,72.52,0,0,1-36.5,10.2l-29.86.15a71.65,71.65,0,0,1-36.73-9.91l-1-.56c-14.55-8.54-26.28-21.06-37.55-33.62C98.62,472,52.12,407.48,52.93,334.49"/><path class="cls-15" d="M366.79,83c3.56-9.19,4.7-18.51,5.61-25.39s1.67-11.38,3.11-11.5,3.15,4.16,4.11,11.49a63.11,63.11,0,0,1,.29,13.08,57.22,57.22,0,0,1-3.61,16A46.21,46.21,0,0,1,367.44,101a36.74,36.74,0,0,1-11,8.3,22.84,22.84,0,0,1-8.9,2.45c-2.21.06-3.45-.39-3.59-1.06-.32-1.48,3.72-3.27,8.61-7.49A48.83,48.83,0,0,0,360.21,95,53.81,53.81,0,0,0,366.79,83Z"/><path class="cls-15" d="M393.72,82.48c.87-4.87,1.17-9.75,1.81-13.49s1.62-6.21,3-6.35,2.93,2,4.17,5.79a32.63,32.63,0,0,1,1.39,6.9,33.45,33.45,0,0,1-.35,9,27.19,27.19,0,0,1-3.21,8.81,20.26,20.26,0,0,1-5.08,5.9,11.07,11.07,0,0,1-4.8,2.28c-1.31.2-2.17-.08-2.53-.67-.73-1.26.54-3.35,1.86-6.32A49.1,49.1,0,0,0,393.72,82.48Z"/><path class="cls-15" d="M363.5,116.33c3.72-2.45,7.13-4.62,9.92-6.06s5-2.06,6-1.12.74,3.29-1,6.3a32.08,32.08,0,0,1-21.71,14.25c-3.46.41-5.77-.25-6.18-1.58s1-3.12,3.44-5.1S359.77,118.77,363.5,116.33Z"/><path class="cls-15" d="M405.25,202a22.88,22.88,0,0,1,7.56-8.1c2.52-1.51,4.63-1.74,5.6-.75s.76,3-.12,5.45a57,57,0,0,1-4.2,8.5,57,57,0,0,1-5.26,7.89c-1.67,2-3.28,3.19-4.65,2.83s-2.2-2.28-2.16-5.22A22.88,22.88,0,0,1,405.25,202Z"/><path class="cls-11" d="M46.05,163.48a38.77,38.77,0,0,1,3.68-7.13,28.5,28.5,0,0,1,4.21-5c2.78-2.58,5.19-3.49,6.27-2.63s.8,3.3-.21,6.55-2.66,7.39-4.44,12-3.35,8.72-4.8,11.81-2.84,5.08-4.27,5-2.54-2.4-2.85-6.18a28.52,28.52,0,0,1,.3-6.56A38.81,38.81,0,0,1,46.05,163.48Z"/><path class="cls-11" d="M77.47,109.21a11.49,11.49,0,0,1,6.45-3c2-.16,3.51.49,4.17,1.73a4.9,4.9,0,0,1-.29,4.37,16,16,0,0,1-8.4,7.53,4.9,4.9,0,0,1-4.37-.18c-1.16-.79-1.64-2.38-1.27-4.33A11.49,11.49,0,0,1,77.47,109.21Z"/><ellipse class="cls-11" cx="210.56" cy="221.64" rx="5.11" ry="8.76" transform="translate(-22.94 418.97) rotate(-86.67)"/><path class="cls-9" d="M224.78,442.79h22.94"/><path class="cls-9" d="M20.87,340A35.55,35.55,0,0,1,42,316.79"/><path class="cls-9" d="M442.19,340A35.55,35.55,0,0,0,421,316.79"/><path class="cls-11" d="M36.71,359.23a58.7,58.7,0,0,1,4.48,7.36c1.06,2.29,1.34,4.25.37,5.29s-2.92,1-5.37-.08a19.33,19.33,0,0,1-8-6.91c-2.49-3.68-3.38-8-2.81-11.09a7,7,0,0,1,1.47-3.46,2.37,2.37,0,0,1,2.07-.95c1.42.21,2.44,1.71,3.61,3.43S35.05,356.75,36.71,359.23Z"/><path class="cls-3" d="M306.74,281.15a53.41,53.41,0,0,0-19.38,5.9c-4.86,2.45-8,4.52-9.27,3.52-.59-.47-.59-1.67.1-3.41a20.9,20.9,0,0,1,4.39-6.38,33.08,33.08,0,0,1,4-3.56,37.32,37.32,0,0,1,5.31-3.26,38.1,38.1,0,0,1,28.15-2.45,37.32,37.32,0,0,1,5.79,2.29,33.07,33.07,0,0,1,4.6,2.8,20.9,20.9,0,0,1,5.43,5.52c1,1.6,1.18,2.78.69,3.34-1.07,1.2-4.53-.29-9.74-1.86A53.41,53.41,0,0,0,306.74,281.15Z"/><path class="cls-9" d="M342.4,280.36a49.37,49.37,0,0,0-70.8,6.17"/><path class="cls-16" d="M264.12,323.48c12.85-5.69,25.89-11.31,39.71-13.84s28.68-1.72,41.06,4.94"/><path class="cls-17" d="M326.2,321.18a17.9,17.9,0,0,1-35.79,0c0-9.88,8-13.77,17.9-13.77S326.2,311.3,326.2,321.18Z"/><path class="cls-3" d="M167.36,281.15a53.41,53.41,0,0,1,19.38,5.9c4.86,2.45,8,4.52,9.27,3.52.59-.47.59-1.67-.1-3.41a20.9,20.9,0,0,0-4.39-6.38,33.08,33.08,0,0,0-4-3.56,37.32,37.32,0,0,0-5.31-3.26A38.1,38.1,0,0,0,154,271.51a37.32,37.32,0,0,0-5.79,2.29,33.07,33.07,0,0,0-4.6,2.8,20.9,20.9,0,0,0-5.43,5.52c-1,1.6-1.18,2.78-.69,3.34,1.07,1.2,4.53-.29,9.74-1.86A53.41,53.41,0,0,1,167.36,281.15Z"/><path class="cls-9" d="M131.69,280.36a49.37,49.37,0,0,1,70.8,6.17"/><path class="cls-16" d="M210,323.48c-12.85-5.69-25.89-11.31-39.71-13.84s-28.68-1.72-41.06,4.94"/><path class="cls-17" d="M147.9,321.18a17.9,17.9,0,0,0,35.79,0c0-9.88-8-13.77-17.9-13.77S147.9,311.3,147.9,321.18Z"/><path class="cls-9" d="M206,498.28A59.24,59.24,0,0,0,236,503c14.26-1.51,29.15-10,32.35-24"/><circle class="cls-2" cx="237.17" cy="528.6" r="10.55" transform="translate(-329.15 406.34) rotate(-53.65)"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg
new file mode 100644
index 00000000..746e4b88
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 485.29 648.83"><defs><style>.cls-1{fill:#485d63;}.cls-2{fill:#dfe7ea;}.cls-3{fill:#f0d7c2;}.cls-4{fill:#e8bc70;}.cls-5{fill:#9e8863;}.cls-6{fill:#eace9b;}.cls-7{fill:#ebcbac;}.cls-8{fill:#d7ad8c;}.cls-9{fill:#fff;}.cls-10{fill:#ebdce8;}.cls-11,.cls-12,.cls-13,.cls-15,.cls-16{fill:none;stroke:#42565e;stroke-miterlimit:10;}.cls-11{stroke-linecap:square;}.cls-11,.cls-15,.cls-16{stroke-width:10px;}.cls-12,.cls-13{stroke-width:8px;}.cls-13,.cls-15{stroke-linecap:round;}.cls-14{fill:#dcb79b;}.cls-17{fill:#325560;}.cls-18{fill:#f9d7a5;}.cls-19{fill:#aa9777;}</style></defs><title>Asset 110</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M443.55,323.66c2.62-14.83,4.62-26.94,6.06-26.84s1.64,12.6-1,27.72-7.13,26.8-8.45,26.42S441,338.5,443.55,323.66Z"/><ellipse class="cls-2" cx="268.35" cy="594.61" rx="184.33" ry="54.22"/><path class="cls-3" d="M428.34,469.65c0-8.3,16.78-.48,23.63-5.16s12-11.49,16-18.79c17.05-31.58,10.19-74.24-15.9-98.88H412.62V469.59S428.34,471.71,428.34,469.65Z"/><path class="cls-4" d="M434.11,381c-9.53,46,36-85,40.14-131.84A277.35,277.35,0,0,0,475.52,220a190.51,190.51,0,0,0-21.46-84.42c-9.77-18.73-24.42-37-45-41.73H276.62V389.38S434.59,378.69,434.11,381Z"/><path class="cls-5" d="M472.25,252.2C468.11,299,422.58,430,432.11,384c.12-.56-8.91-.38-22.68.23,8.3-26.32,15.11-53,19.16-80.32,7-47.44,5.38-96.92-11.08-142a79.81,79.81,0,0,1-9.11,39,99.38,99.38,0,0,0-66.89-53.24,146.34,146.34,0,0,1-3.3,57.77,113.39,113.39,0,0,0-63.59-35.83V96.83H407.05c20.59,4.74,35.24,23,45,41.73A190.51,190.51,0,0,1,473.52,223,276.87,276.87,0,0,1,472.25,252.2Z"/><path class="cls-4" d="M358.56,191.68c18.18-3.38,30.29-20.74,37.35-37.83A161.36,161.36,0,0,0,407.4,107,85.23,85.23,0,0,0,382.46,38.8h0A82.69,82.69,0,0,0,364,24.87C291.64-14.73,216.06,17,145.47,66.21,71.2,118,29.88,211,34.33,301.46c1.21,24.66,5.52,49.05,8,73.62,3,30.75,3.14,61.7,3.24,92.6.09,28.69.18,57.42-2,86s-9.05,60.95-33.71,75.78C25,638.32,41.63,645.8,59.15,645.74c32.19-.11,59.91-26.75,69.67-57.43s4.74-64.17-4.61-95"/><path class="cls-6" d="M127.21,490.34c9.35,30.8,14.36,64.3,4.61,95s-37.48,57.33-69.67,57.43c-17.52.06-34.2-7.41-49.34-16.24.81-.49,1.59-1,2.36-1.51,40.57-1.44,79.75-27.29,96.16-64.58a37.9,37.9,0,0,1-38,.64A52.25,52.25,0,0,0,111.77,525a51.18,51.18,0,0,1-32.54,2.87c10.53-2.58,18.3-12,22.13-22.1s4.42-21.18,5.43-32c1.93-20.56,5.55-41.07,12.68-60.45,15.06-40.93,44.72-74.4,74.56-106.4q7.86,36.69,19.35,72.48Z"/><path class="cls-7" d="M115.17,463.89C130.26,540.2,184.36,587,245.46,628.51c8.84,6,18.31,12.23,29,12.65,10.49.41,20.28-4.85,29.28-10.26,49.1-29.54,94.28-70.57,113.42-124.58,13-36.78,13.08-76.71,13-115.73-.09-35-1-72.74-21.94-100.84-13.87-18.64-36-32.23-42.17-54.64-4.65-16.91,0-38.12-16.91-48a29.44,29.44,0,0,0-9.22-3.32c-27.55-5.42-55,14.79-81.91,8.28-11.58-2.8-21.58-10.31-33.12-13.26-15-3.84-31.36.63-44.2,9.35s-22.58,21.33-30.6,34.61c-28.1,46.52-37,101.94-42.33,156l0,.43a214,214,0,0,0,3.08,62.46Z"/><path class="cls-3" d="M418.83,302s34.47,218.5-141.37,339.17c-8.65,5.93,20.28-4.85,29.27-10.26,49.1-29.54,94.28-70.57,113.43-124.58,13-36.78,13.08-76.71,13-115.73-.08-30.16-.78-62.3-14.31-88.6"/><path class="cls-8" d="M367.25,203.16c-.15.26-.31.51-.47.77-17,27.27-46.39,49.11-78.51,48-11.52-.41-23-3.7-34.44-2.2-17.75,2.32-32,15.69-42.92,29.89C168,335.51,159.1,412.77,176.93,481c7.78,29.76,20.24,58.34,25.29,88.69a75.28,75.28,0,0,1,.81,21.66c-39.62-33.48-70.95-73.23-81.86-128.43l-4.39-22.2a213.9,213.9,0,0,1-3.08-62.46c0-.14,0-.28,0-.43,5.35-54.09,14.23-109.5,42.33-156,8-13.29,17.76-25.89,30.6-34.62s29.16-13.18,44.2-9.34c11.55,3,21.54,10.46,33.12,13.25,26.94,6.51,54.36-13.7,81.92-8.28a29.37,29.37,0,0,1,9.22,3.32C362.15,190.21,365.45,196.27,367.25,203.16Z"/><path class="cls-9" d="M384.43,338.52c-13.54,10.91-12.77,39.26-34.85,41-14.66,1.18-44.11-16.07-34.5-26.74,5-5.5,25-11.47,25-11.47Z"/><path class="cls-10" d="M384.43,338.52c-13.53,10.91-12.77,39.26-34.85,41-14.66,1.19-44.11-16.07-34.5-26.74a15.69,15.69,0,0,1,3.11-2.48c4.63,9.4,24.27,19.12,35.39,18.22,16.34-1.32,20.17-17.18,26.54-29.76Z"/><path class="cls-8" d="M356,316.88c-12.09,1.06-22.72,5.35-30.26,9.22s-12.51,7-14.47,5.49c-.92-.74-.92-2.6.15-5.33a32.62,32.62,0,0,1,6.86-10,51.64,51.64,0,0,1,6.32-5.55,58.26,58.26,0,0,1,8.29-5.08,59.48,59.48,0,0,1,43.94-3.83,58.26,58.26,0,0,1,9,3.57,51.62,51.62,0,0,1,7.18,4.38,32.64,32.64,0,0,1,8.47,8.62c1.53,2.5,1.85,4.33,1.07,5.22-1.66,1.87-7.07-.45-15.21-2.9S368.11,315.84,356,316.88Z"/><path class="cls-11" d="M411.69,319.94a77.07,77.07,0,0,0-110.53,9.63"/><path class="cls-12" d="M300.9,360.34c13.2-7.76,26.61-15.47,41.26-19.92s30.84-5.43,45.06.23"/><path class="cls-13" d="M313.72,357c5.68,13.18,20.84,23.93,35.5,22.74,22.08-1.78,20.31-29.13,33.85-40"/><path class="cls-14" d="M365.83,389.68a35.49,35.49,0,0,1-7.48,2.76,30.48,30.48,0,0,1-3.43.6,22.93,22.93,0,0,1-3,.2c-3.71,0-5.91-.66-5.87-1s2.27-.36,5.74-.84c.87-.12,1.81-.26,2.81-.49s2.06-.49,3.17-.78a39.27,39.27,0,0,0,13.18-6.78c.88-.73,1.75-1.4,2.48-2.12s1.43-1.37,2-2c2.4-2.54,3.67-4.38,4-4.18s-.46,2.33-2.63,5.33a22.9,22.9,0,0,1-1.92,2.33,30.56,30.56,0,0,1-2.48,2.44A35.49,35.49,0,0,1,365.83,389.68Z"/><path class="cls-14" d="M324.31,390.28a20.85,20.85,0,0,1-5.91-3.69c-1.32-1.22-1.92-2.18-1.69-2.44.49-.55,3.92,1.86,8.59,3.78s8.77,2.73,8.72,3.47c0,.34-1.13.6-2.93.51A20.86,20.86,0,0,1,324.31,390.28Z"/><path class="cls-9" d="M163.16,338.52c13.54,10.91,12.77,39.26,34.85,41,14.66,1.18,44.11-16.07,34.5-26.74-5-5.5-25-11.47-25-11.47Z"/><path class="cls-10" d="M163.16,338.52c13.53,10.91,12.77,39.26,34.85,41,14.66,1.19,44.11-16.07,34.5-26.74a15.69,15.69,0,0,0-3.11-2.48c-4.63,9.4-24.27,19.12-35.39,18.22-16.34-1.32-20.17-17.18-26.54-29.76Z"/><path class="cls-8" d="M191.58,316.88c12.09,1.06,22.72,5.35,30.26,9.22s12.51,7,14.47,5.49c.92-.74.92-2.6-.15-5.33a32.62,32.62,0,0,0-6.86-10,51.64,51.64,0,0,0-6.32-5.55,58.26,58.26,0,0,0-8.29-5.08,59.48,59.48,0,0,0-43.94-3.83,58.26,58.26,0,0,0-9,3.57,51.62,51.62,0,0,0-7.18,4.38,32.64,32.64,0,0,0-8.47,8.62c-1.53,2.5-1.85,4.33-1.07,5.22,1.66,1.87,7.07-.45,15.21-2.9S179.48,315.84,191.58,316.88Z"/><path class="cls-11" d="M135.9,319.94a77.07,77.07,0,0,1,110.53,9.63"/><path class="cls-12" d="M246.69,360.34c-13.2-7.76-26.61-15.47-41.26-19.92s-30.84-5.43-45.06.23"/><path class="cls-13" d="M233.87,357c-5.68,13.18-20.84,23.93-35.5,22.74-22.08-1.78-20.31-29.13-33.85-40"/><path class="cls-14" d="M182.94,387.41a43.84,43.84,0,0,0,6.92,2.76c1.11.29,2.16.61,3.17.78s1.94.37,2.81.49c3.47.47,5.69.44,5.74.84s-2.16,1-5.87,1a22.93,22.93,0,0,1-3-.2,30.47,30.47,0,0,1-3.43-.6,33.07,33.07,0,0,1-14.08-7.24,30.55,30.55,0,0,1-2.48-2.44,22.9,22.9,0,0,1-1.92-2.33c-2.18-3-2.9-5.2-2.63-5.33s1.62,1.63,4,4.18c.61.63,1.26,1.32,2,2s1.6,1.39,2.48,2.12A43.84,43.84,0,0,0,182.94,387.41Z"/><path class="cls-14" d="M222.31,387.93c4.67-1.92,8.1-4.33,8.59-3.78.22.26-.37,1.23-1.69,2.44a21.64,21.64,0,0,1-12.7,5.31c-1.79.09-2.9-.17-2.93-.51C213.54,390.66,217.66,389.9,222.31,387.93Z"/><path class="cls-15" d="M118.17,465.89C133.26,542.2,187.36,589,248.46,630.51c8.84,6,18.31,12.23,29,12.65,10.49.41,20.28-4.85,29.28-10.26,49.1-29.54,94.28-70.57,113.42-124.58,13-36.78,13.08-76.71,13-115.73-.09-35-1-72.74-21.94-100.84-13.87-18.64-36-32.23-42.17-54.64-4.65-16.91,0-38.12-16.91-48a29.44,29.44,0,0,0-9.22-3.32c-27.55-5.42-55,14.79-81.91,8.28-11.58-2.8-21.58-10.31-33.12-13.26-15-3.84-31.36.63-44.2,9.35s-22.58,21.33-30.6,34.61c-28.1,46.52-37,101.94-42.33,156l0,.43a214,214,0,0,0,3.08,62.46Z"/><path class="cls-15" d="M408.06,91.27c20.59,4.74,35.24,23,45,41.73a190.51,190.51,0,0,1,21.46,84.42,277.35,277.35,0,0,1-1.27,29.22c-4.14,46.8-11.45,94.63-40.14,131.84"/><path class="cls-15" d="M431.34,466.89c8.08,1.87,16.78-.48,23.63-5.16s12-11.49,16-18.79c17.05-31.58,10.19-74.24-15.9-98.88"/><polygon class="cls-3" points="274.12 398.32 274.12 484.32 304.12 484.32 274.12 398.32"/><polyline class="cls-11" points="274.28 402.83 273.05 474.82 272.96 479.82"/><path class="cls-9" d="M363.87,259.63c2.39,2.34,5,4.47,7.37,6.54a66.27,66.27,0,0,1,6.23,6,21.72,21.72,0,0,1,3.45,5c.59,1.36.69,2.25.28,2.58s-1.28.1-2.47-.56-2.79-1.64-4.78-2.86-4.34-2.7-7-4.47a59.84,59.84,0,0,1-8.45-6.68,30.66,30.66,0,0,1-6.65-9.31,26.37,26.37,0,0,1-2.3-9,17.4,17.4,0,0,1,.59-6.16c.45-1.41,1-2.13,1.55-2.09,1.1.08,1.66,3,3.17,7.19a39.37,39.37,0,0,0,3.26,6.83A35.88,35.88,0,0,0,363.87,259.63Z"/><ellipse class="cls-9" cx="351.31" cy="225.49" rx="3.83" ry="5.04" transform="translate(-15.6 26.39) rotate(-4.21)"/><path class="cls-1" d="M65.56,459.91c-.07-30.74-1.78-55.72.4-56,1-.13,2.79,6,4.36,16.12.79,5.06,1.49,11.11,2,17.86s.84,14.18.88,22-.25,15.25-.71,22-1.13,12.81-1.88,17.87c-1.49,10.13-3.21,16.28-4.23,16.16C64.22,515.65,65.74,490.65,65.56,459.91Z"/><path class="cls-1" d="M111.93,261.4a45.42,45.42,0,0,1,5.4-11.7c1.89-2.77,3.61-4.19,4.56-3.75,1.93.92.15,8.64-2.65,17.73s-5.74,16.44-7.86,16.11c-1-.18-1.65-2.32-1.64-5.67A45.45,45.45,0,0,1,111.93,261.4Z"/><path class="cls-1" d="M77.62,398.25c-4-26.89-6.89-48.82-4.79-49.26s8.3,21,12.36,48.12,4.42,49.44,2.35,49.63S81.69,425.13,77.62,398.25Z"/><path class="cls-1" d="M427.32,123.89a91.18,91.18,0,0,1,3.08,13c.28,2,.56,4,.67,5.81s.21,3.53.22,5.08c0,6.23-.81,10-1.47,10-1.53,0-1.71-15.08-7.36-32.38C417,108.09,408.4,95.73,409.62,94.82c.52-.4,3.4,2.2,7,7.28.9,1.27,1.85,2.68,2.77,4.26s1.88,3.29,2.83,5.11A91.15,91.15,0,0,1,427.32,123.89Z"/><path class="cls-1" d="M435.53,122.29a80.51,80.51,0,0,1,5,12.58c.55,2,1.09,3.91,1.43,5.73.18.91.38,1.78.5,2.62l.33,2.44c.74,6.25.25,10.13-.4,10.17s-1.55-3.67-3.14-9.47l-.63-2.27c-.22-.79-.51-1.59-.76-2.44-.49-1.69-1.15-3.45-1.79-5.32a107.91,107.91,0,0,0-11.54-22.83c-1.12-1.62-2.14-3.2-3.22-4.6-.53-.71-1-1.41-1.51-2.06L418.35,105c-3.72-4.72-6.25-7.57-5.76-8.15s3.83,1.41,8.42,5.71l1.77,1.72c.61.6,1.19,1.28,1.81,2,1.27,1.35,2.48,2.91,3.77,4.55A80.56,80.56,0,0,1,435.53,122.29Z"/><path class="cls-1" d="M437.62,333.7c-.34-15.36-3.9-27.55-2.48-28.05.63-.22,2.37,2.59,4.09,7.59a64,64,0,0,1,2.31,9,74.61,74.61,0,0,1,.62,22.7,63.92,63.92,0,0,1-1.82,9.1c-1.44,5.09-3,8-3.67,7.8C435.24,361.42,438.12,349.06,437.62,333.7Z"/><path class="cls-16" d="M433.65,395.23a27.4,27.4,0,0,1,25.66,32.54"/><path class="cls-17" d="M184.12,352.09a15.92,15.92,0,1,0,31.84,0c0-8.79-7.13-13.92-15.92-13.92S184.12,343.29,184.12,352.09Z"/><circle class="cls-9" cx="206.12" cy="357.33" r="2.5"/><path class="cls-17" d="M364,352.09a15.92,15.92,0,1,1-31.84,0c0-8.79,7.13-13.92,15.92-13.92S364,343.29,364,352.09Z"/><circle class="cls-9" cx="341.95" cy="357.33" r="2.5"/><circle class="cls-3" cx="314.12" cy="599.33" r="11.5"/><path class="cls-8" d="M332.64,526.83c-1.48,3.18-4.8,5.06-8.08,6.31-13,5-25.52,2.38-36.86-5-4.46,3.84-9.18,5.62-14.07,5.29l.4-5.84c3.77.25,7.57-1.5,11.3-5.23l1.72-1.72,2,1.37c7.57,5.19,36.55-.44,42.56-1.18"/><path class="cls-8" d="M209.56,521.86c-3.46-2.9-5.74-5-5.94-5l3-3c6,.75,45.11,13.37,52.68,8.18l2-1.37,1.72,1.72c3.73,3.73,7.53,5.48,11.3,5.23l.4,5.84c-4.88.33-9.61-1.44-14.07-5.29-1.94,1.26-5.62,2.48-10,3.53A46.93,46.93,0,0,1,209.56,521.86Z"/><path class="cls-16" d="M271.67,524.41c3.93.27,8.6-1.11,13.57-6.08,0,0,1.62,1.11,4.16,2.68A33,33,0,0,0,330,516.25h0"/><path class="cls-16" d="M272.36,524.41c-3.93.27-8.6-1.11-13.57-6.08l-.1.07a37.13,37.13,0,0,1-47.07-4.52l-3.53-3.53"/><path class="cls-18" d="M390.67,49.67a524.8,524.8,0,0,0-73-15.76c-22.42-3.1-45.46-4.46-67.51.61-21.72,5-42.56,16.9-54.62,35.6a34.67,34.67,0,0,0,4.79-12.35c.11-.6.21-1.2.28-1.8a71.27,71.27,0,0,0-45.38,38.41,54.12,54.12,0,0,0,4-14.52,52.4,52.4,0,0,0,.43-8.21,96.11,96.11,0,0,0-45.21,47.18c-.65,1.46-1.26,3-1.82,4.45a1.23,1.23,0,0,0-.32-.17c-1.85-.64-3.67.94-4.91,2.45a58.38,58.38,0,0,0-12.54,27.11l-.06-9.87-.51.44a66.28,66.28,0,0,0-22.54,56.07q-.63-3-1.27-6c-.38.65-.75,1.3-1.12,2a87.78,87.78,0,0,0-9.45,57.92A37.49,37.49,0,0,0,54,243.29c-.67-.81-1.38-1.6-2.12-2.35a73.15,73.15,0,0,0-.2,50.58,11.34,11.34,0,0,0-3.33-3q-.41-.24-.84-.45c-.5,15.72-.26,31.47.71,47.16q-2.35-2.53-4.63-5.15c-2.08-8.34-4.19-16.69-6.18-25.05.35,6.55.92,13.09,1.61,19.61-.4-.47-.78-1-1.15-1.43-.68-6.57-1.22-13.15-1.55-19.75q-.3-6.09-.32-12.19a276.58,276.58,0,0,1,2.33-35,282.81,282.81,0,0,1,8.88-42.43,275.52,275.52,0,0,1,52.85-100.1,243.92,243.92,0,0,1,47.39-43.55c9.57-6.67,19.23-13,29-18.91,1.1-1.38,2.25-2.74,3.43-4.06,21-12.49,42.38-22.77,63.85-29.51q-3.33,2-6.52,4.15C280.13,7,323.61,5.69,366,28.88a79.64,79.64,0,0,1,9.72,6.31,87,87,0,0,1,15,14.48Z"/><path class="cls-15" d="M358.56,189.68c18.18-3.38,30.29-20.74,37.35-37.83A161.36,161.36,0,0,0,407.4,105,85.23,85.23,0,0,0,382.46,36.8h0A82.69,82.69,0,0,0,364,22.87C291.64-16.73,216.06,15,145.47,64.21,71.2,116,29.88,209,34.33,299.46c1.21,24.66,5.52,49.05,8,73.62,3,30.75,3.14,61.7,3.24,92.6.09,28.69.18,57.42-2,86s-9.05,60.95-33.71,75.78C25,636.32,41.63,643.8,59.15,643.74c32.19-.11,59.91-26.75,69.67-57.43s4.74-64.17-4.61-95"/><path class="cls-1" d="M46.16,273.53c3.26,8.9,6.48,17,8.51,23s2.9,10,1.93,10.42-3.52-2.66-6.84-8.14A133.92,133.92,0,0,1,39,276.15,109.19,109.19,0,0,1,35,262.74c-.42-2.12-.83-4.12-1.06-6-.12-1-.26-1.87-.34-2.76l-.18-2.56c-.35-6.55.52-10.59,1.53-10.63s2.16,3.78,3.82,9.76l.65,2.35.75,2.53c.48,1.75,1.09,3.6,1.67,5.55C43.12,264.82,44.55,269.08,46.16,273.53Z"/><path class="cls-1" d="M54.21,234.57c1.33,3.41,2.73,6.6,4.06,9.5.7,1.43,1.32,2.82,2,4.08s1.23,2.47,1.78,3.57c2.2,4.38,3.55,7.28,2.72,8s-3.63-1-7.18-4.91a39.82,39.82,0,0,1-2.72-3.31c-1-1.22-1.84-2.6-2.78-4.06a61.19,61.19,0,0,1-8.07-21c-.28-1.71-.55-3.34-.66-4.88a39.84,39.84,0,0,1-.19-4.28c0-5.25,1-8.44,2-8.45s2,3,3.34,7.76c.33,1.18.66,2.47,1.07,3.84s.83,2.83,1.27,4.36C51.81,227.84,52.91,231.15,54.21,234.57Z"/><path class="cls-1" d="M69.46,183.31A92.69,92.69,0,0,0,72,193.87c.54,1.58,1,3.13,1.55,4.52.27.7.49,1.4.75,2l.76,1.87c2,4.78,3.38,7.85,2.51,8.56-.41.33-1.31,0-2.6-1q-.49-.36-1-.84c-.36-.32-.72-.7-1.11-1.11A26.41,26.41,0,0,1,70.36,205l-1.3-1.82c-.44-.64-.83-1.35-1.26-2.07a45.69,45.69,0,0,1-2.42-4.77,51.11,51.11,0,0,1-4.07-24A45.6,45.6,0,0,1,62,167c.17-.82.3-1.61.5-2.36l.63-2.14A26.44,26.44,0,0,1,64.53,159c.23-.51.45-1,.68-1.41s.48-.8.71-1.14c.9-1.34,1.63-2,2.13-1.79,1.05.38.72,3.75.45,8.91l-.1,2c0,.7,0,1.43,0,2.18-.07,1.5,0,3.1,0,4.77A92.67,92.67,0,0,0,69.46,183.31Z"/><path class="cls-1" d="M89,131.24a74.29,74.29,0,0,1,2.76-13.29c.66-2,1.28-3.86,2-5.56.37-.85.69-1.68,1.07-2.45l1.12-2.2c3-5.56,5.78-8.38,6.65-7.89s-.08,4.2-1.62,9.9l-.61,2.23c-.21.77-.38,1.59-.6,2.43-.45,1.66-.8,3.47-1.23,5.34-.76,3.78-1.48,7.93-2,12.33s-.65,8.62-.72,12.47c0,1.92,0,3.76.06,5.48,0,.86,0,1.7.06,2.5l.11,2.31c.29,5.9.53,9.7-.54,10s-3.08-3.06-4.81-9.13l-.63-2.39c-.21-.84-.35-1.72-.52-2.63-.37-1.82-.58-3.79-.8-5.87A74.3,74.3,0,0,1,89,131.24Z"/><path class="cls-1" d="M113.68,100.1a74.8,74.8,0,0,1,7.45-12.67,63.61,63.61,0,0,1,4.07-4.95c.68-.74,1.31-1.47,2-2.11l2-1.83a37.12,37.12,0,0,1,3.55-2.91c.54-.4,1-.77,1.54-1.09s1-.57,1.39-.8c1.7-.91,2.78-1.21,3.12-.8.72.86-1.83,4.07-5.57,9.22l-1.46,2c-.51.7-1,1.47-1.51,2.23-1.08,1.51-2.09,3.22-3.21,5a126.11,126.11,0,0,0-6.32,11.89,126.2,126.2,0,0,0-4.81,12.58c-.58,2-1.2,3.88-1.63,5.68-.23.9-.5,1.76-.69,2.6l-.56,2.43c-1.43,6.2-2.17,10.24-3.29,10.26-.53,0-1-1-1.45-2.88q-.16-.7-.31-1.57c-.09-.57-.13-1.2-.19-1.87a37.14,37.14,0,0,1-.14-4.59l.1-2.67c0-.93.18-1.89.29-2.88A63.54,63.54,0,0,1,109,114,74.81,74.81,0,0,1,113.68,100.1Z"/><path class="cls-1" d="M154,73.71A101.68,101.68,0,0,1,161.36,60c1.33-2,2.6-3.88,3.92-5.55.65-.84,1.26-1.66,1.9-2.42L169,49.87c4.85-5.38,8.61-7.92,9.35-7.24,1.66,1.52-9.16,15-17.39,34.15-8.45,19.07-11,36.15-13.21,36-1-.08-1.69-4.56-1.05-11.78l.3-2.82c.12-1,.31-2,.48-3,.32-2.11.85-4.32,1.4-6.65A101.72,101.72,0,0,1,154,73.71Z"/><path class="cls-1" d="M202.65,42a130.36,130.36,0,0,1,14.27-14.29c2.4-2,4.67-3.85,6.94-5.42,1.13-.8,2.19-1.6,3.26-2.29l3.11-2c2-1.27,3.86-2.23,5.51-3.09.83-.42,1.59-.82,2.32-1.15s1.41-.59,2-.83c2.46-.94,3.93-1.23,4.19-.77.56,1-4,4.45-10.88,10.24l-2.7,2.28c-.94.79-1.87,1.67-2.86,2.54-2,1.71-4,3.69-6.18,5.7-4.23,4.13-8.73,8.82-13.15,14s-8.25,10.43-11.62,15.29c-1.62,2.47-3.24,4.78-4.59,7-.69,1.12-1.41,2.18-2,3.24l-1.79,3c-4.56,7.77-7.22,12.82-8.28,12.43-.5-.18-.45-1.68.07-4.26q.19-1,.48-2.14c.2-.77.47-1.59.75-2.48.58-1.76,1.21-3.8,2.13-5.94L185,69.82c.51-1.18,1.12-2.36,1.72-3.6,1.17-2.5,2.65-5.05,4.19-7.75A130.38,130.38,0,0,1,202.65,42Z"/><path class="cls-1" d="M404.92,184.19A38,38,0,0,1,412,199.47c.83,4.26.44,7-.22,7s-1.62-2.32-3.23-6a65.1,65.1,0,0,0-7.68-13.26A56.35,56.35,0,0,0,395.3,181a40.81,40.81,0,0,0-5.17-4.37c-3.08-2.17-5.53-2.54-5.57-3.28,0-.34.64-.73,1.93-.86a11.71,11.71,0,0,1,5.3.94,26.48,26.48,0,0,1,6.61,4A38.63,38.63,0,0,1,404.92,184.19Z"/><path class="cls-1" d="M426.85,221.88c-3.16-30-9.14-53.8-7.67-54.21.64-.18,3,5.57,5.63,15.23,1.33,4.82,2.68,10.63,3.94,17.13s2.34,13.7,3.18,21.3,1.25,14.87,1.45,21.49.08,12.58-.19,17.58c-.52,10-1.57,16.12-2.24,16.08C429.42,276.39,430.17,251.84,426.85,221.88Z"/><path class="cls-19" d="M380.87,146.32A106.55,106.55,0,0,0,391,112.41a124.37,124.37,0,0,0,.3-29.22c-1.82-16.69-6.12-26.48-5-27,.44-.21,2.1,2,4.21,6.39a72.26,72.26,0,0,1,3.24,8.3,88.36,88.36,0,0,1,2.92,11.47A110,110,0,0,1,398,113.2a103.85,103.85,0,0,1-10.25,36.55,85.57,85.57,0,0,1-18,24.27l-4.9,4.58-1.2-6.53c-1.62-8.83-4.94-17-7.77-24.34l-2.08-5.41c-.66-1.78-1.27-3.33-1.94-4.88a69.07,69.07,0,0,0-4.23-8.2,59.88,59.88,0,0,0-8-10.43c-2.15-2.25-3.42-3.45-3.18-3.84s1.94.18,4.73,2a41.67,41.67,0,0,1,10.23,9.73,61.38,61.38,0,0,1,5.38,8.41c.83,1.57,1.68,3.34,2.43,5l2.41,5.24c1.65,3.62,3.4,7.5,5,11.7a85.72,85.72,0,0,1,4.18,13.7l-6.1-2A84.44,84.44,0,0,0,380.87,146.32Z"/><path class="cls-5" d="M355.62,172.83c.9,6.31-1.07,6.63-1,13-1.26-1.84-16.19-21.71-17.49-23.52-9.26-12.88-20.25-25.65-35.12-31.05l-.86-.31c-8.47-2.9-17.55-3.15-26.53-2.35l-2,.19c-1.94.21-3.88.46-5.8.74a206.66,206.66,0,0,0-62.9,19.75c-7.52,3.76-15,8.21-20.48,14.49a112.31,112.31,0,0,1,27.42-27.11c17.7-12.23,39.63-21,61.76-23.36l2-.2a100.49,100.49,0,0,1,29.26,1.53c22,4.57,34.59,18.37,42.26,35.86C344,149.82,357.85,173.33,355.62,172.83Z"/><path class="cls-16" d="M164.14,208.58c8-29.33,23.69-55.63,48.72-72.92,26.11-18,61.42-28.59,93-22,36.59,7.59,47.1,40.71,52.4,73.85"/><path class="cls-1" d="M215.74,147.22a100.7,100.7,0,0,1,26.07-3.78c6.69-.08,10.83.5,10.94,1.54s-3.87,2.39-10.3,3.84-15.26,3.05-24.56,5.75a101.18,101.18,0,0,0-22.64,9.55c-5.48,3.16-8.72,5.67-9.56,4.92-.38-.35-.08-1.46,1-3.12a30.21,30.21,0,0,1,5.4-6.17,51.65,51.65,0,0,1,10-6.95A70.64,70.64,0,0,1,215.74,147.22Z"/><path class="cls-1" d="M309.26,130.58a66.63,66.63,0,0,1,7.25,11.53,56.48,56.48,0,0,1,2.3,5.48c.31.88.63,1.71.87,2.54l.65,2.39a32.74,32.74,0,0,1,.81,4.18c.08.62.17,1.19.2,1.73s0,1,0,1.48c0,1.79-.29,2.81-.81,2.92-1.09.23-2.67-3.22-5.32-8.44l-1-2c-.36-.71-.79-1.42-1.19-2.17-.78-1.52-1.75-3.06-2.7-4.71A99.37,99.37,0,0,0,295,126.14c-1.39-1.31-2.66-2.61-4-3.71-.64-.56-1.23-1.15-1.84-1.66l-1.75-1.48c-4.47-3.77-7.47-6.1-7-7.11.23-.48,1.28-.5,3-.11q.66.15,1.44.37c.51.16,1.05.37,1.64.6a32.82,32.82,0,0,1,3.88,1.75l2.18,1.18c.75.42,1.49.93,2.27,1.43a56.59,56.59,0,0,1,4.8,3.5A66.67,66.67,0,0,1,309.26,130.58Z"/><path class="cls-1" d="M61.4,607.71a117.32,117.32,0,0,0,16.11-10.4C79.9,595.56,82,593.67,84,592l2.81-2.59c.45-.42.91-.81,1.33-1.22L89.4,587c6.42-6.34,10-10.83,11-10.22.82.48-1.2,6.11-6.94,13.78L92.38,592c-.39.49-.81,1-1.23,1.47l-2.67,3.08c-2,2-4.05,4.2-6.49,6.23a91.29,91.29,0,0,1-17,11.7A88.58,88.58,0,0,1,45.76,622l-2.27.6c-.75.17-1.51.31-2.24.46-1.48.27-2.9.6-4.3.78a74.11,74.11,0,0,1-7.8.73c-1.2,0-2.32.09-3.41.1a8.86,8.86,0,0,1-3.91-.72,5.16,5.16,0,0,1-1.69-1.33,7,7,0,0,1-.87-1.36c-.39-.8-.62-1.42-.83-1.84a2.56,2.56,0,0,0-.66-.9,2.74,2.74,0,0,0-.69-.47c-.39-.21-.81-.1-1-.27s-.14-.24-.06-.49a1.5,1.5,0,0,1,.83-.77,3.81,3.81,0,0,1,3.89,1c.63.58,1.11,1.22,1.58,1.73a3.45,3.45,0,0,0,.65.58,1,1,0,0,0,.5.16,7.4,7.4,0,0,0,1.91-.18l3.16-.63c2.22-.36,4.61-1,7.18-1.58,1.28-.3,2.58-.73,3.93-1.09l2-.58,2.07-.7A112.21,112.21,0,0,0,61.4,607.71Z"/><path class="cls-1" d="M93.87,544.17a90.31,90.31,0,0,0,6.1-6.67c.85-1.1,1.72-2.12,2.44-3.14.37-.51.76-1,1.1-1.46l1-1.38c2.5-3.52,4.14-5.89,5.2-5.56s1.14,3.36-.35,8l-.63,1.79c-.23.62-.53,1.23-.83,1.88a37.89,37.89,0,0,1-2.15,4,42.83,42.83,0,0,1-14.82,14.37,37.88,37.88,0,0,1-4.06,2c-.66.27-1.28.56-1.9.77l-1.8.58c-4.65,1.34-7.72,1.07-8,.1s2.12-2.63,5.72-5l1.41-.93c.49-.32,1-.7,1.49-1.05,1-.69,2.09-1.53,3.22-2.34A90.35,90.35,0,0,0,93.87,544.17Z"/><path class="cls-1" d="M95.45,496.29c2.6-8.77,4-17.18,5.28-23.3s2.5-10,3.56-9.87,1.74,4,1.83,10.4a86.21,86.21,0,0,1-3.33,25,60.1,60.1,0,0,1-5.63,13.06A44.34,44.34,0,0,1,90,520.81a26.34,26.34,0,0,1-6.29,4.73c-1.68.84-2.78,1-3.09.6-.67-.9,2-3.78,5.2-8.78A80.56,80.56,0,0,0,95.45,496.29Z"/><path class="cls-9" d="M306.51,19.4a82.38,82.38,0,0,1,10.9,3.14,62.75,62.75,0,0,1,8.43,3.81c4.63,2.56,7.07,4.86,6.63,5.79-1,2-12.76-2.18-27.55-5.25s-27.21-4.21-27.31-6.4c0-1,3.14-2.13,8.41-2.59a62.76,62.76,0,0,1,9.26-.06A82.38,82.38,0,0,1,306.51,19.4Z"/><path class="cls-9" d="M357.75,44.44a32.45,32.45,0,0,1,6.12,10.68c1,3.06.87,5.19-.07,5.63s-2.59-.79-4.62-2.92-4.52-5.16-7.29-8.45-5.32-6.26-7.09-8.62-2.71-4.17-2.09-5,2.71-.57,5.56.89A32.45,32.45,0,0,1,357.75,44.44Z"/><path class="cls-9" d="M367.32,553.4c2.58-2.66,5-5.26,7.12-7.65l5.7-6.46c3.28-3.7,5.55-6,6.51-5.45s.28,3.75-2,8.45a57.59,57.59,0,0,1-4.68,7.85,71.75,71.75,0,0,1-15.58,16,57.59,57.59,0,0,1-7.72,4.89c-4.64,2.4-7.87,3.11-8.39,2.22s1.66-3.27,5.27-6.65l6.31-5.87C362.19,558.5,364.72,556,367.32,553.4Z"/><path class="cls-9" d="M399.53,493.29c2-9.66,4.13-17.57,6.27-17.45,1,.08,1.87,2.22,2.19,5.66a52.17,52.17,0,0,1-5.22,25.92c-1.63,3.06-3.22,4.71-4.21,4.38C396.53,511.09,397.61,503,399.53,493.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg b/apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg
new file mode 100644
index 00000000..b2432f22
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/dynamic-avatar-6.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586.2 682.51"><defs><style>.cls-1{fill:#dfe7ea;}.cls-2{fill:#b0d7e9;}.cls-3{fill:#54b9d3;}.cls-4{fill:#f2c7a5;}.cls-20,.cls-5{opacity:0.5;}.cls-6{fill:#ffac89;}.cls-14,.cls-7{fill:none;stroke-miterlimit:10;stroke-width:10px;}.cls-7{stroke:#274b5b;}.cls-20,.cls-8{fill:#ef997b;}.cls-9{fill:#fcdac3;}.cls-10{fill:#fff;}.cls-11{fill:#274b5b;}.cls-12{fill:#3b535c;}.cls-13{fill:#d9edf4;}.cls-14{stroke:#42565e;stroke-linecap:round;}.cls-15{fill:#ebcbac;}.cls-16{fill:#d7ad8c;}.cls-17{fill:#3f565e;}.cls-18{fill:#f2dcca;}.cls-19{fill:#ce956e;}</style></defs><title>Asset 100</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="289.02" cy="618.52" rx="184.33" ry="54.22"/><path class="cls-2" d="M518.48,204.9l16.76,4.24,42.08,10.65a7.19,7.19,0,0,1,2.5,12.76L516.64,279a7.19,7.19,0,0,0-.88,10.82l54.39,55.65a7.19,7.19,0,0,1-1.52,11.23l-60.92,35.54a7.19,7.19,0,0,0-3,9l23.9,56.16a7.19,7.19,0,0,1-7.12,10L448.38,459l-305.16,3.1L67.8,467.44a7.19,7.19,0,0,1-7.12-10l23.9-56.16a7.19,7.19,0,0,0-3-9L20.67,356.73a7.19,7.19,0,0,1-1.52-11.23l54.39-55.65A7.19,7.19,0,0,0,72.65,279L9.48,232.55A7.19,7.19,0,0,1,12,219.79l44.73-11.32,23.55-6L125.78,191,90.1,107.72A7.19,7.19,0,0,1,98.83,98l119.89,37.21L233.83,14.4a7.19,7.19,0,0,1,13.82-1.75l45.43,114.84"/><path class="cls-2" d="M492,198.21,463.51,191l35.69-83.27a7.19,7.19,0,0,0-8.74-9.7L370.57,135.23l-6.09-48.76-3.73-29.86L355.46,14.4a7.19,7.19,0,0,0-13.82-1.75L296.22,127.48l-7.39,3.1"/><path class="cls-3" d="M233,368q0,46-1.73,92l-86.5.88-75.42,5.37a7.2,7.2,0,0,1-7.13-10l23.9-56.17a7.17,7.17,0,0,0-3-9L22.21,355.52a7.2,7.2,0,0,1-1.52-11.25l54.39-55.64a7.18,7.18,0,0,0-.88-10.81L11,231.34a7.19,7.19,0,0,1,2.49-12.76l44.74-11.32,23.56-5.95,45.51-11.52L91.64,106.5a7.19,7.19,0,0,1,8.75-9.7L142,109.72c-2,20.85-.12,41.93,7.5,61.34,3.36,8.54,7.81,16.73,10,25.65,4.38,18.17-1.25,37.39-10,53.89s-20.63,31.17-30.05,47.31c-5.36,9.22-10,19.27-10.24,29.93s5,22,14.75,26.29c14.89,6.55,31.1-5.22,42.57-16.76S192,312.6,207.88,316c10.25,2.17,18,11.15,21.52,21S233,357.54,233,368Z"/><circle class="cls-4" cx="145.54" cy="410.18" r="47.25"/><g class="cls-5"><path class="cls-6" d="M162,452.3a47.25,47.25,0,1,1-18-90.91,48.21,48.21,0,0,1,6.74.48A47.25,47.25,0,0,0,162,452.3Z"/></g><circle class="cls-7" cx="144" cy="410.18" r="47.25"/><circle class="cls-4" cx="439.86" cy="410.18" r="47.25"/><g class="cls-5"><path class="cls-6" d="M423.36,452.3a47.25,47.25,0,1,0,18-90.91,48.21,48.21,0,0,0-6.74.48,47.25,47.25,0,0,1-11.31,90.43Z"/></g><circle class="cls-7" cx="441.41" cy="410.18" r="47.25"/><path class="cls-4" d="M174.94,538q-4.07-6.33-7.72-13.08c-16.85-31.19-26.7-68.82-26.7-109.33,0-107.79,69.7-195.18,155.68-195.18S451.87,307.81,451.87,415.6,382.17,610.78,296.2,610.78c-39.91,0-76.31-18.83-103.86-49.78"/><g class="cls-5"><path class="cls-8" d="M312.5,609.72a126,126,0,0,1-16.3,1.05c-39.92,0-76.32-18.82-103.86-49.79l-17.4-23q-4.09-6.34-7.73-13.09c-16.85-31.2-26.69-68.82-26.69-109.33,0-107.8,69.69-195.18,155.68-195.18a125.57,125.57,0,0,1,16.26,1.05c-78.33,10.19-139.41,93.2-139.41,194.12,0,40.51,9.84,78.13,26.69,109.33q3.65,6.74,7.73,13.09l17.4,23C248.63,587.7,279,605.37,312.5,609.72Z"/></g><g class="cls-5"><path class="cls-9" d="M278.39,608.72a126,126,0,0,0,16.3,1.05C334.6,609.78,371,591,398.55,560l17.4-23q4.09-6.34,7.73-13.09c16.85-31.2,26.69-68.82,26.69-109.33,0-107.8-69.69-195.18-155.68-195.18a125.57,125.57,0,0,0-16.26,1.05c78.33,10.19,139.41,93.2,139.41,194.12,0,40.51-9.84,78.13-26.69,109.33q-3.65,6.74-7.73,13.09L366,560C342.25,586.7,311.91,604.37,278.39,608.72Z"/></g><path class="cls-7" d="M416.2,294.56c20.42,33,32.58,74.47,32.58,119.49,0,107.79-69.7,195.18-155.68,195.18-39.91,0-76.31-18.83-103.86-49.78"/><path class="cls-7" d="M386.26,257.67a174,174,0,0,1,17.85,19.56"/><path class="cls-7" d="M171.84,536.47q-4.07-6.33-7.72-13.08c-16.85-31.19-26.7-68.82-26.7-109.33,0-107.79,69.7-195.18,155.68-195.18,25.65,0,49.85,7.78,71.19,21.55"/><path class="cls-10" d="M281.08,387.72a43.37,43.37,0,0,1-86.75,0"/><path class="cls-1" d="M279.21,387.62a43.37,43.37,0,1,1-86.75,0h1.36a43.39,43.39,0,0,0,84,0Z"/><path class="cls-7" d="M278,387.72a43.37,43.37,0,0,1-86.75,0"/><circle class="cls-11" cx="233.06" cy="401.66" r="10.84"/><circle class="cls-10" cx="245.46" cy="398.56" r="7.75"/><path class="cls-10" d="M403.46,387.72a43.37,43.37,0,0,1-86.75,0"/><path class="cls-1" d="M400,387.62a43.37,43.37,0,0,1-86.75,0h1.36a43.39,43.39,0,0,0,84,0Z"/><path class="cls-7" d="M400.36,387.72a43.37,43.37,0,1,1-86.75,0"/><circle class="cls-11" cx="355.44" cy="401.66" r="10.84"/><circle class="cls-10" cx="367.83" cy="398.56" r="7.75"/><path class="cls-12" d="M108.89,340.21a50,50,0,0,1-1.71-8.58,50.56,50.56,0,0,1-.16-8.11,45.27,45.27,0,0,1,2.89-13.28,31.43,31.43,0,0,1,4.37-8c1.36-1.67,2.38-2.4,2.82-2.14,1,.57-.72,4.78-2,11.6a62,62,0,0,0-1,12,59.64,59.64,0,0,0,.55,7,55.64,55.64,0,0,0,1.6,7.31c.4,1.21.76,2.43,1.21,3.58a27,27,0,0,0,1.43,3.15,13.38,13.38,0,0,0,1.74,2.56l.47.58.53.52a9.35,9.35,0,0,0,1.1,1,27.49,27.49,0,0,0,10.2,4.72c3.33.91,6.22,1.44,8.21,2s3.12,1,3.11,1.58-1.15,1-3.23,1.39a36.81,36.81,0,0,1-9,.37,31.7,31.7,0,0,1-6.37-1.1,24,24,0,0,1-7.12-3.28,14.79,14.79,0,0,1-1.73-1.33l-.85-.74-.78-.82a19.33,19.33,0,0,1-2.78-3.69,30.37,30.37,0,0,1-2-4.07C109.8,343.06,109.36,341.65,108.89,340.21Z"/><path class="cls-12" d="M137.29,260.49C144,249.27,149.5,240,151.5,240.83c1,.4.82,3.3-.45,7.63a78.09,78.09,0,0,1-17.71,29.88c-3.19,3.19-5.66,4.71-6.48,4.06C125.2,281,130.66,271.75,137.29,260.49Z"/><path class="cls-12" d="M150.36,180c-3.32-14-7.15-25.25-5.2-26.23.93-.45,3.15,1.86,5.66,6.22a75.14,75.14,0,0,1,9.05,37.63c-.25,5-1.17,8.09-2.21,8.11C155.48,205.77,153.78,194,150.36,180Z"/><path class="cls-2" d="M444.61,469.61c26,26,14.79,78.17,15.55,115l-11.74-13a126.89,126.89,0,0,1-30.82,61.49,45.3,45.3,0,0,0-14.28-15.73,95.16,95.16,0,0,1-29.43,50.17,38.29,38.29,0,0,0-1.09-31.66,60.36,60.36,0,0,1-33,36.69,24.83,24.83,0,0,0,2.7-23.94c-12,20.29-46.33,20.91-59,1.06-.88,4-.23,9.28,3.86,9.62-17.23,2.65-33-4.61-44.86-17.39a29,29,0,0,0,9.61,18.79,52.63,52.63,0,0,1-43.78-29.08c-22.23,1.38-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.77,10.18C116,587.24,118.1,499.8,143.26,471c0,0,43.88,33.13,85.07,32.88,25.75-.15,55.88-19.8,85.76-19.93,25-.11,35.94,34.12,52,19.06C408.52,463.13,444.07,469.07,444.61,469.61Z"/><path class="cls-3" d="M461,579.41l-11.74-13a127,127,0,0,1-30.82,61.5,45.32,45.32,0,0,0-14.28-15.73,95.26,95.26,0,0,1-29.43,50.18,38.33,38.33,0,0,0-1.08-31.66,60.34,60.34,0,0,1-33,36.69,24.83,24.83,0,0,0,2.69-23.94c-12,20.3-46.33,20.91-59,1.07-.88,4,.12,18.77,4.22,19.12-17.23,2.65-33.36-14.1-45.22-26.89.68,7.17,2.47,20.1,7.87,24.85-18.36-.94-34.06-18.58-42.05-35.14-22.23,1.39-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.76,10.18c-13.27-6.74-22-21.38-26.76-38.85,17,12.38,37,20.88,56.73,28.49,13.42,5.16,27,10.08,41.15,12.66,13.72,2.49,27.74,2.75,41.69,3,38.71.67,79,1,114-15.61,10-4.76,20.61-12.93,20.26-24-.4-12.69-14.29-19.93-26.14-24.48,25.24-3.74,45.92-23.31,57.43-46.07a140.7,140.7,0,0,0,10.14-27.06l3.39,2.64C453.92,508.44,460.27,542.6,461,579.41Z"/><path class="cls-13" d="M279.44,484.79l-51.11,19.06-84.11-38.17a63.86,63.86,0,0,0-12.41,22,243.36,243.36,0,0,1,51,18,250.66,250.66,0,0,1,23.32,12.64c4.12,2.52,12.77,10.78,17.87,10.15a10.52,10.52,0,0,0,4.23-1.9c46.77-30.08,81.11-31.4,135.95-21.6l-25.77-15Z"/><path class="cls-14" d="M443.74,469.61C461,504.23,464.64,541.56,461,581.14l-11.74-13a126.89,126.89,0,0,1-30.82,61.49,45.3,45.3,0,0,0-14.28-15.73,95.16,95.16,0,0,1-29.43,50.17,38.29,38.29,0,0,0-1.09-31.66,60.36,60.36,0,0,1-33,36.69,24.83,24.83,0,0,0,2.7-23.94c-12,20.29-46.33,20.91-59,1.06-.88,4,6,20,2.13,21.75-17-7.82-31.27-16.74-43.13-29.52.69,7.17,2.46,21,7.87,25.72-18.36-.94-34.06-19.45-42.05-36-22.23,1.38-44.43-13.85-51.15-35.09a10.63,10.63,0,0,1-2.77,10.18c-38.41-19.5-36.36-105.21-11.2-134"/><path class="cls-15" d="M261.78,573.43a10.43,10.43,0,0,1-10.4-10.4V523.29a10.43,10.43,0,0,1,10.4-10.4h72.77a10.43,10.43,0,0,1,10.4,10.4V563a10.43,10.43,0,0,1-10.4,10.4"/><path class="cls-16" d="M346.68,527.62v12.33a10.43,10.43,0,0,0-9.53-6.26H264.38a10.43,10.43,0,0,0-10.4,10.4V571.5a10.29,10.29,0,0,1-.87-4.13V527.62a10.43,10.43,0,0,1,10.4-10.4h72.77A10.43,10.43,0,0,1,346.68,527.62Z"/><path class="cls-17" d="M297.73,509.18c7.51,0,14.84.05,21.92.16l10.42.19,2.54.06,1.26,0h.36l.53,0,1.06.08a17.57,17.57,0,0,1,7.76,2.86,17.26,17.26,0,0,1,7.6,13.23l0,1v.76l0,1.14-.09,2.26-.2,4.41c-.28,5.79-.59,11.18-.94,16.1s-.73,9.37-1.13,13.28l-.15,1.44-.19,1.61a13.71,13.71,0,0,1-.95,3.46,13,13,0,0,1-3.6,4.84,10.45,10.45,0,0,1-7.27,2.58c-1.75-.16-2.53-.78-2.52-1.27s.76-1,1.87-1.75a11.19,11.19,0,0,0,3.55-3.62,8,8,0,0,0,1-3,7.12,7.12,0,0,0,0-1.68l-.29-2.61c-.41-3.91-.79-8.36-1.13-13.28s-.66-10.31-.94-16.1l-.2-4.41-.09-2.26,0-1.14v-.29l0-.11a2,2,0,0,1,0-.2,3.62,3.62,0,0,0-1.85-2.5,3.46,3.46,0,0,0-1.47-.38l-4.35.1-10.42.19c-7.08.1-14.41.16-21.92.16s-14.84-.05-21.92-.16l-10.42-.19-4.35-.1a3.46,3.46,0,0,0-1.47.38,3.62,3.62,0,0,0-1.86,2.5,2,2,0,0,1,0,.2l0,.11v.29l0,1.14-.09,2.26-.2,4.41c-.28,5.79-.59,11.18-.94,16.1s-.73,9.37-1.13,13.28l-.29,2.61a7.13,7.13,0,0,0,0,1.68,8,8,0,0,0,1,3,11.2,11.2,0,0,0,3.55,3.62c1.1.73,1.87,1.19,1.87,1.75s-.78,1.11-2.52,1.27a10.45,10.45,0,0,1-7.27-2.58,13,13,0,0,1-3.6-4.84,13.71,13.71,0,0,1-.95-3.46l-.19-1.61-.15-1.44c-.41-3.91-.79-8.36-1.13-13.28s-.66-10.31-.94-16.1l-.2-4.41-.09-2.26,0-1.14v-.76l0-1a17.26,17.26,0,0,1,7.6-13.23,17.57,17.57,0,0,1,7.76-2.86l1.06-.08.53,0h.36l1.26,0,2.54-.06,10.42-.19C282.89,509.23,290.22,509.18,297.73,509.18Z"/><path class="cls-17" d="M302.86,552.58a54.43,54.43,0,0,0,5.71-1.73,48,48,0,0,0,5-2.23,39.67,39.67,0,0,0,7.71-5.1c2-1.73,3.52-3.4,4.81-4.61s2.25-2,3.11-1.78,1.44,1.34,1.56,3.45a17.79,17.79,0,0,1-2.29,8.39,29.29,29.29,0,0,1-8.6,9.58,38.08,38.08,0,0,1-6.48,3.82,42.55,42.55,0,0,1-7.57,2.62c-1.33.33-2.67.56-4,.77s-2.65.32-3.9.37a47.38,47.38,0,0,1-7.23-.2A41.23,41.23,0,0,1,279,563a23.64,23.64,0,0,1-7-4.26c-1.44-1.37-2-2.56-1.64-3.35.75-1.65,4.79-1.39,10.66-1.18,2.94.11,6.36.18,10.08,0,1.86-.1,3.8-.26,5.79-.51,1-.11,2-.3,2.95-.45S301.87,552.83,302.86,552.58Z"/><path class="cls-17" d="M155.46,490.33A39.37,39.37,0,0,0,156,500a41,41,0,0,0,3.15,9.52,42.44,42.44,0,0,1-5.84-8.6,43.67,43.67,0,0,1-3.52-10.15,47.59,47.59,0,0,1-1-11c0-.93.08-1.86.14-2.79s.15-1.87.31-2.81a36.46,36.46,0,0,1,1.21-5.8l10.41,4.56a25.27,25.27,0,0,0-2,3.8c-.33.69-.58,1.41-.87,2.12l-.76,2.2A40.47,40.47,0,0,0,155.46,490.33Z"/><path class="cls-17" d="M171.41,499.11c.85,7.6,4.25,15.18,9.15,21.74a48.54,48.54,0,0,1-14.67-20.41,39.56,39.56,0,0,1-2.34-13.25,35.77,35.77,0,0,1,2.72-13.91l10,5.38C172.32,484,170.54,491.58,171.41,499.11Z"/><path class="cls-17" d="M200.42,504.82a52.28,52.28,0,0,0,7.09,20.82,55.13,55.13,0,0,1-12.6-19.43,57.85,57.85,0,0,1-3.79-24l11.2,1.92A49.27,49.27,0,0,0,200.42,504.82Z"/><path class="cls-17" d="M389.49,500.65a28,28,0,0,1-.29,9c-.5,2.28-1.27,3.62-2,3.56-1.43-.14-2-5.52-2.82-12S383,489.45,384.35,489c.66-.22,1.72.9,2.74,3A28,28,0,0,1,389.49,500.65Z"/><path class="cls-17" d="M413.62,499.69a36.83,36.83,0,0,1-2.43,12.46c-1.23,3-2.53,4.66-3.17,4.43-1.37-.52.31-7.91.5-17s-1-16.59.39-17c.65-.19,1.87,1.5,2.94,4.59A36.83,36.83,0,0,1,413.62,499.69Z"/><path class="cls-17" d="M436.93,497a55.34,55.34,0,0,1,.52,9.45,45.63,45.63,0,0,1-.89,7.66c-.91,4.3-2.14,6.77-2.8,6.63-1.47-.31,0-10.64-1.89-23s-5.89-22-4.54-22.67c.6-.31,2.44,1.74,4.48,5.63a47.93,47.93,0,0,1,3,7.1A57.59,57.59,0,0,1,436.93,497Z"/><path class="cls-17" d="M164.59,595.73a42.25,42.25,0,0,1-.27-8.85,35.84,35.84,0,0,1,.53-3.82,26.8,26.8,0,0,1,.8-3.26c1.21-3.93,2.72-6,3.34-5.81s.45,2.69.21,6.47c-.06.95-.13,2-.14,3.08s0,2.28,0,3.51a62.81,62.81,0,0,0,2.26,15.79c.35,1.18.65,2.32,1,3.36s.68,2,1,2.92c1.29,3.56,2.22,5.84,1.61,6.27s-2.57-1.21-4.84-4.65a26.73,26.73,0,0,1-1.68-2.91,35.79,35.79,0,0,1-1.58-3.52A42.25,42.25,0,0,1,164.59,595.73Z"/><path class="cls-17" d="M197.49,609.93a54.89,54.89,0,0,1-.09-14.27c.47-3.6,1.18-5.78,1.87-5.77s1.28,2.24,1.74,5.77.81,8.37,1.53,13.54c.38,2.58.84,5,1.34,7.18.3,1.07.52,2.12.83,3.06l.4,1.38.43,1.26c1.09,3.22,2,5.28,1.36,5.73s-2.5-1-4.6-4.13l-.79-1.26c-.25-.45-.49-.93-.74-1.43a32.2,32.2,0,0,1-1.4-3.26A42.34,42.34,0,0,1,197.49,609.93Z"/><path class="cls-17" d="M236.71,616.79c-4.33-15.35-4.94-28.35-3.58-28.52s4.28,12.17,8.5,27.14,8.17,27,6.83,27.61S241,632.15,236.71,616.79Z"/><path class="cls-17" d="M346.34,623.13c1.94-6.48,3.3-12.56,4.5-17s2.2-7.12,2.9-7,.94,3,.66,7.6a81.29,81.29,0,0,1-3.17,17.86,60.46,60.46,0,0,1-3.75,9.43c-.76,1.38-1.45,2.7-2.24,3.86-.39.58-.75,1.15-1.13,1.68l-1.15,1.47c-3,3.7-5.58,5.28-6,4.83s1-2.91,3-6.82l.8-1.53.8-1.69c.58-1.15,1.08-2.45,1.67-3.76C344.27,629.38,345.35,626.36,346.34,623.13Z"/><path class="cls-17" d="M376.89,610.42c1.38-7.88,2.09-15.29,3-20.62s1.84-8.6,2.54-8.54,1.06,3.43,1.06,8.84a126.52,126.52,0,0,1-1.62,21.21,61.86,61.86,0,0,1-3.15,11.54,43.31,43.31,0,0,1-4.52,8.74c-3.21,4.66-6.17,6.64-6.63,6.19s1.33-3.26,3.49-8a69.42,69.42,0,0,0,3.21-8.5A91.9,91.9,0,0,0,376.89,610.42Z"/><path class="cls-17" d="M414,597.91c1.53-6.39,2.57-12.34,3.55-16.65s1.85-7,2.56-6.92,1.08,2.86,1,7.33a81.07,81.07,0,0,1-2.17,17.44,61.49,61.49,0,0,1-3.08,9.33c-.64,1.38-1.22,2.7-1.91,3.87-.33.59-.64,1.16-1,1.7l-1,1.51c-2.65,3.79-5,5.54-5.48,5.13s.65-2.93,2.32-6.87l.65-1.55.65-1.7c.48-1.16.88-2.44,1.36-3.77C412.32,604.08,413.18,601.1,414,597.91Z"/><path class="cls-17" d="M424.42,588.28c1.66-4,3-8,4.13-11.62.51-1.83,1.05-3.56,1.44-5.21s.79-3.18,1.12-4.59c1.28-5.65,2-9.25,2.7-9.22s1.27,3.73.87,9.75c-.11,1.5-.26,3.15-.54,4.9s-.63,3.62-1,5.57a78.08,78.08,0,0,1-9.93,23.93c-1.09,1.67-2.12,3.27-3.21,4.67s-2.1,2.71-3.09,3.84c-4,4.54-7,6.72-7.52,6.27s1.53-3.53,4.62-8.43c.77-1.23,1.62-2.56,2.46-4s1.74-3,2.67-4.7C420.89,596.06,422.73,592.32,424.42,588.28Z"/><path class="cls-18" d="M137,509.24c.76-3.74,2.77-6.36,4.11-5.94s1.6,3.5.9,7-2.17,6.21-3.58,6.05S136.26,513,137,509.24Z"/><path class="cls-18" d="M138.33,549.64a54.36,54.36,0,0,1-1.95-15.24c.12-3.95.78-6.35,1.46-6.36,1.47,0,2.42,9.33,5.42,20.26s6.83,19.45,5.58,20.21c-.59.34-2.39-1.39-4.5-4.73A53.49,53.49,0,0,1,138.33,549.64Z"/><path class="cls-14" d="M442.82,467.33A165.7,165.7,0,0,0,371,498.45c-3.11,2.36-6.43,4.93-10.32,5.07-4.14.15-7.78-2.48-11.25-4.75a88.22,88.22,0,0,0-21-10.34c-7.89-2.54-16.26-3.27-24.5-3.47s-16.56-.42-24.68.2a82.67,82.67,0,0,0-20.63,4.06,87.16,87.16,0,0,0-19.26,9.55c-3.47,2.26-7.11,4.89-11.25,4.75-3.9-.14-7.22-2.72-10.32-5.07a165.7,165.7,0,0,0-71.82-31.12"/><line class="cls-19" x1="228.33" y1="503.85" x2="263.97" y2="487.62"/><path class="cls-3" d="M219.34,122.68a55.94,55.94,0,0,1,29.93,12.77c.6-22.61-11.09-43.51-22.43-63.08A20.72,20.72,0,0,1,250,76.94a162.61,162.61,0,0,0-14.86-54.86c-4.94,2.27-6.38,8.48-7.16,13.85a673.21,673.21,0,0,0-6.9,86.47"/><path class="cls-12" d="M248.91,75a148.5,148.5,0,0,1,16.63,15.51,144.21,144.21,0,0,0-20.85-8.11,139.78,139.78,0,0,0-21.24-4.65l6.15-15.9A152.75,152.75,0,0,1,248.91,75Z"/><path class="cls-12" d="M246.73,129.61c7.6,7.08,14.49,15.09,19.26,24-7.16-7.34-15.61-12.79-24.45-17.26s-18.17-8-27.69-11.66l8.85-14.58C230.8,116.24,239.12,122.51,246.73,129.61Z"/><path class="cls-12" d="M41.67,334.64c5.88-2.52,11.18-5.31,15.27-7.08s6.9-2.54,7.48-1.65-1.16,3.21-4.57,6.22a58.45,58.45,0,0,1-15.18,9.57c-6.61,2.85-13.35,3.82-18.13,3.34s-7.5-2-7.33-3,2.94-1.5,7-2.42A86.51,86.51,0,0,0,41.67,334.64Z"/><path class="cls-3" d="M292,123.06A73,73,0,0,1,312.67,143a111.15,111.15,0,0,0,10.74-54.92l7.34,11.35A218.87,218.87,0,0,0,342,35.73c.18-6.89-.08-14.2-3.84-20a574.49,574.49,0,0,0-39.41,98"/><path class="cls-12" d="M329.81,92.79a148.49,148.49,0,0,1,8.38,21.15,144.21,144.21,0,0,0-15.36-16.27,139.76,139.76,0,0,0-17.2-13.31L318,72.64A152.73,152.73,0,0,1,329.81,92.79Z"/><path class="cls-12" d="M314.81,132.79a148.49,148.49,0,0,1,8.38,21.15,144.21,144.21,0,0,0-15.36-16.27,139.76,139.76,0,0,0-17.2-13.31L303,112.64A152.73,152.73,0,0,1,314.81,132.79Z"/><path class="cls-3" d="M400,125.72l3.05,20.6a98.07,98.07,0,0,0,40.39-35,165.29,165.29,0,0,1,1.82,34.87c18.29-2.58,31.49-18.24,42.86-32.79,3.7-4.74,7.52-9.73,8.59-15.65"/><path class="cls-12" d="M405.83,140.91a148.49,148.49,0,0,1-4.13,22.37,144.24,144.24,0,0,0-4.38-21.94,139.8,139.8,0,0,0-7.51-20.41l16.71-3.37A152.75,152.75,0,0,1,405.83,140.91Z"/><path class="cls-12" d="M448.83,134.91a148.49,148.49,0,0,1-4.13,22.37,144.24,144.24,0,0,0-4.38-21.94,139.8,139.8,0,0,0-7.51-20.41l16.71-3.37A152.75,152.75,0,0,1,448.83,134.91Z"/><path class="cls-3" d="M464.55,183.7a38,38,0,0,1-28.72,20.79c5,2.49,10.14,5,15.66,6,10.25,1.84,20.63-1.73,30.28-5.63,2.76-1.11,5.91-2.76,6.27-5.71.26-2.14-1.18-4.2-3-5.33a17.78,17.78,0,0,0-6.15-1.91c-5.36-1-11-2.31-14.88-6.17"/><path class="cls-3" d="M549.55,205.7a38,38,0,0,1-28.72,20.79c5,2.49,10.14,5,15.66,6,10.25,1.84,20.63-1.73,30.28-5.63,2.76-1.11,5.91-2.76,6.27-5.71.26-2.14-1.18-4.2-3-5.33a17.78,17.78,0,0,0-6.15-1.91c-5.36-1-11-2.31-14.88-6.17"/><path class="cls-12" d="M448.64,203.38a148.49,148.49,0,0,1-22,5.87,144.21,144.21,0,0,0,17.94-13.38,139.79,139.79,0,0,0,15.21-15.54L470,194A152.72,152.72,0,0,1,448.64,203.38Z"/><path class="cls-7" d="M78.71,199.41l45.52-11.52L88.55,104.62a7.19,7.19,0,0,1,8.74-9.7l119.89,37.21L232.28,11.3A7.19,7.19,0,0,1,246.1,9.55l46.43,116.84"/><path class="cls-7" d="M38.24,364.79,19.12,353.64A7.19,7.19,0,0,1,17.6,342.4L72,286.75a7.19,7.19,0,0,0-.88-10.82L7.93,229.45a7.19,7.19,0,0,1,2.5-12.76l44.73-11.32"/><path class="cls-7" d="M141.67,459l-75.42,5.37a7.19,7.19,0,0,1-7.12-10L83,398.2a7.19,7.19,0,0,0-3-9L53.83,373.89"/><path class="cls-7" d="M359.19,53.51,353.92,11.3A7.19,7.19,0,0,0,340.1,9.55L292.67,126.39"/><path class="cls-7" d="M490.47,195.11,462,187.9l35.69-83.27a7.19,7.19,0,0,0-8.74-9.7L369,132.13l-6.09-48.76"/><path class="cls-7" d="M511.25,417.2l-8.09-19a7.19,7.19,0,0,1,3-9l60.92-35.54a7.19,7.19,0,0,0,1.52-11.23l-54.39-55.65a7.19,7.19,0,0,1,.88-10.82l63.17-46.49a7.19,7.19,0,0,0-2.5-12.76L533.69,206l-16.76-4.24"/><path class="cls-7" d="M446.83,455.88l73.12,8.47a7.19,7.19,0,0,0,7.12-10l-7.48-17.57"/><path class="cls-12" d="M530.64,225.38a148.49,148.49,0,0,1-22,5.87,144.21,144.21,0,0,0,17.94-13.38,139.79,139.79,0,0,0,15.21-15.54L552,216A152.72,152.72,0,0,1,530.64,225.38Z"/><path class="cls-10" d="M350.55,248.54a42,42,0,0,1,7.24,3.77,31.91,31.91,0,0,1,5.16,4.21c2.66,2.74,3.69,5,3,5.76s-2.95.06-6.13-1.33l-5.47-2.47c-2-.9-4.28-1.87-6.65-2.83s-4.67-1.77-6.77-2.52l-5.67-2c-3.27-1.17-5.41-2.17-5.36-3.25s2.34-2,6.15-2.11a31.91,31.91,0,0,1,6.64.5A41.94,41.94,0,0,1,350.55,248.54Z"/><path class="cls-10" d="M387.87,278.37a26.41,26.41,0,0,1,4.24,10.33c.43,2.88,0,4.8-1,5.11s-2.39-1-4-3-3.49-5-5.6-8.13-4.06-6-5.38-8.27-2-4-1.3-4.85,2.6-.49,5.11,1A26.41,26.41,0,0,1,387.87,278.37Z"/><path class="cls-10" d="M513.06,362.54c7.17-4.16,14-5.44,14.87-3.54s-4.19,6.2-11,10.17-13.09,6.23-14.32,4.49S505.88,366.68,513.06,362.54Z"/><ellipse class="cls-10" cx="543.85" cy="350.52" rx="5.22" ry="3.83" transform="translate(-99.25 279.43) rotate(-26.49)"/><ellipse class="cls-10" cx="513.36" cy="253.47" rx="11.08" ry="3.83" transform="translate(-32.22 427.05) rotate(-43.93)"/><path class="cls-10" d="M222.9,474a12.54,12.54,0,0,1,6.13,4.21c1.17,1.61,1.35,3.07.67,3.86s-2.05.89-3.66.66a45.65,45.65,0,0,1-10.88-3.6c-1.43-.77-2.48-1.64-2.55-2.71s.94-2.1,2.84-2.7A12.54,12.54,0,0,1,222.9,474Z"/><path class="cls-10" d="M262.35,467.89a49.09,49.09,0,0,1,8.52-.84,37.07,37.07,0,0,1,7,.59c3.93.75,6.21,2,6.1,3s-2.51,1.75-6.16,2.39c-1.83.31-4,.66-6.35,1s-4.94.82-7.64,1.33-5.25,1.08-7.59,1.58-4.46,1-6.28,1.38c-3.63.75-6.11,1-6.61.05s1.17-2.92,4.55-5.06a37.07,37.07,0,0,1,6.26-3.12A49.09,49.09,0,0,1,262.35,467.89Z"/><rect class="cls-20" x="312.3" y="359.24" width="89" height="10"/><line class="cls-7" x1="312.3" y1="359.24" x2="401.3" y2="359.24"/><rect class="cls-20" x="187.3" y="359.24" width="89" height="10"/><line class="cls-7" x1="187.3" y1="359.24" x2="276.3" y2="359.24"/><path class="cls-7" d="M113.3,415.55a22.64,22.64,0,0,1,23-12.58"/><path class="cls-7" d="M473.26,415.55a22.64,22.64,0,0,0-23-12.58"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/moon.svg b/apps/grid-admin/src/assets/icons/moon.svg
new file mode 100644
index 00000000..e6667f0d
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/moon.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 499.712 499.712" style="enable-background: new 0 0 499.712 499.712;" xml:space="preserve">
+<path style="fill: #FFD93B;" d="M146.88,375.528c126.272,0,228.624-102.368,228.624-228.64c0-55.952-20.16-107.136-53.52-146.88
+	C425.056,33.096,499.696,129.64,499.696,243.704c0,141.392-114.608,256-256,256c-114.064,0-210.608-74.64-243.696-177.712
+	C39.744,355.368,90.944,375.528,146.88,375.528z"/>
+<path style="fill: #F4C534;" d="M401.92,42.776c34.24,43.504,54.816,98.272,54.816,157.952c0,141.392-114.608,256-256,256
+	c-59.68,0-114.448-20.576-157.952-54.816c46.848,59.472,119.344,97.792,200.928,97.792c141.392,0,256-114.608,256-256
+	C499.712,162.12,461.392,89.64,401.92,42.776z"/>
+<g>
+	<polygon style="fill: #FFD83B;" points="128.128,99.944 154.496,153.4 213.472,161.96 170.8,203.56 180.864,262.296
+		128.128,234.568 75.376,262.296 85.44,203.56 42.768,161.96 101.744,153.4"/>
+	<polygon style="fill: #FFD83B;" points="276.864,82.84 290.528,110.552 321.104,114.984 298.976,136.552 304.208,166.984
+		276.864,152.616 249.52,166.984 254.752,136.552 232.624,114.984 263.2,110.552"/>
+</g>
+</svg>
diff --git a/apps/grid-admin/src/assets/icons/sun.svg b/apps/grid-admin/src/assets/icons/sun.svg
new file mode 100644
index 00000000..a3997cbf
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/sun.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 60 60" style="enable-background: new 0 0 60 60;" xml:space="preserve">
+<g>
+	<path style="fill: #F0C419;" d="M30,0c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1V1C31,0.448,30.552,0,30,0z"/>
+	<path style="fill: #F0C419;" d="M30,52c-0.552,0-1,0.448-1,1v6c0,0.552,0.448,1,1,1s1-0.448,1-1v-6C31,52.448,30.552,52,30,52z"/>
+	<path style="fill: #F0C419;" d="M59,29h-6c-0.552,0-1,0.448-1,1s0.448,1,1,1h6c0.552,0,1-0.448,1-1S59.552,29,59,29z"/>
+	<path style="fill: #F0C419;" d="M8,30c0-0.552-0.448-1-1-1H1c-0.552,0-1,0.448-1,1s0.448,1,1,1h6C7.552,31,8,30.552,8,30z"/>
+	<path style="fill: #F0C419;" d="M46.264,14.736c0.256,0,0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414
+		s-1.023-0.391-1.414,0l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C45.752,14.639,46.008,14.736,46.264,14.736z"/>
+	<path style="fill: #F0C419;" d="M13.029,45.557l-5.736,5.736c-0.391,0.391-0.391,1.023,0,1.414C7.488,52.902,7.744,53,8,53
+		s0.512-0.098,0.707-0.293l5.736-5.736c0.391-0.391,0.391-1.023,0-1.414S13.42,45.166,13.029,45.557z"/>
+	<path style="fill: #F0C419;" d="M46.971,45.557c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
+		C51.488,52.902,51.744,53,52,53s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.971,45.557z"/>
+	<path style="fill: #F0C419;" d="M8.707,7.293c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414l5.736,5.736
+		c0.195,0.195,0.451,0.293,0.707,0.293s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L8.707,7.293z"/>
+	<path style="fill: #F0C419;" d="M50.251,21.404c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
+		c0.508-0.216,0.746-0.803,0.53-1.311s-0.804-0.746-1.311-0.53l-2.762,1.172C50.272,20.309,50.035,20.896,50.251,21.404z"/>
+	<path style="fill: #F0C419;" d="M9.749,38.596c-0.216-0.508-0.803-0.746-1.311-0.53l-2.762,1.172
+		c-0.508,0.216-0.746,0.803-0.53,1.311c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08l2.762-1.172
+		C9.728,39.691,9.965,39.104,9.749,38.596z"/>
+	<path style="fill: #F0C419;" d="M54.481,38.813L51.7,37.688c-0.511-0.207-1.095,0.041-1.302,0.553
+		c-0.207,0.512,0.041,1.095,0.553,1.302l2.782,1.124c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
+		C55.241,39.603,54.994,39.02,54.481,38.813z"/>
+	<path style="fill: #F0C419;" d="M5.519,21.188L8.3,22.312c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626
+		c0.207-0.512-0.041-1.095-0.553-1.302l-2.782-1.124c-0.513-0.207-1.095,0.04-1.302,0.553C4.759,20.397,5.006,20.98,5.519,21.188z"
+		/>
+	<path style="fill: #F0C419;" d="M39.907,50.781c-0.216-0.508-0.803-0.745-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311
+		l1.172,2.762c0.162,0.381,0.532,0.61,0.921,0.61c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311L39.907,50.781z"
+		/>
+	<path style="fill: #F0C419;" d="M21.014,9.829c0.13,0,0.263-0.026,0.39-0.08c0.508-0.216,0.746-0.803,0.53-1.311l-1.172-2.762
+		c-0.215-0.509-0.802-0.747-1.311-0.53c-0.508,0.216-0.746,0.803-0.53,1.311l1.172,2.762C20.254,9.6,20.625,9.829,21.014,9.829z"/>
+	<path style="fill: #F0C419;" d="M21.759,50.398c-0.511-0.205-1.095,0.04-1.302,0.553l-1.124,2.782
+		c-0.207,0.512,0.041,1.095,0.553,1.302c0.123,0.049,0.25,0.073,0.374,0.073c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782
+		C22.519,51.188,22.271,50.605,21.759,50.398z"/>
+	<path style="fill: #F0C419;" d="M38.615,9.675c0.396,0,0.771-0.236,0.928-0.626l1.124-2.782c0.207-0.512-0.041-1.095-0.553-1.302
+		c-0.511-0.207-1.095,0.041-1.302,0.553L37.688,8.3c-0.207,0.512,0.041,1.095,0.553,1.302C38.364,9.651,38.491,9.675,38.615,9.675z"
+		/>
+</g>
+<circle style="fill: #F0C419;" cx="30" cy="30" r="20"/>
+<circle style="fill: #EDE21B;" cx="30" cy="30" r="15"/>
+</svg>
diff --git a/apps/grid-admin/src/assets/icons/total-sales.svg b/apps/grid-admin/src/assets/icons/total-sales.svg
new file mode 100644
index 00000000..eff79640
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/total-sales.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 445 271.8"><defs><style>.cls-1{fill:#32caf8;}.cls-2{fill:#00aaf8;opacity:0.5;}.cls-3{fill:#fff;}.cls-4{fill:#426572;}</style></defs><title>Asset 500</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="6" y="8.17" width="433" height="259.8" rx="12" ry="12"/><path class="cls-2" d="M439,21.16V255a13,13,0,0,1-13,13H28.72l381-259.8H426A13,13,0,0,1,439,21.16Z"/><path class="cls-3" d="M328,33.24h88.92c3.86,0,3.87-6,0-6H328c-3.86,0-3.87,6,0,6Z"/><path class="cls-3" d="M283.49,33.24H312.6c3.86,0,3.87-6,0-6H283.49c-3.86,0-3.87,6,0,6Z"/><path class="cls-4" d="M427,271.8H18a18,18,0,0,1-18-18V18A18,18,0,0,1,18,0H427a18,18,0,0,1,18,18V253.8A18,18,0,0,1,427,271.8ZM18,12a6,6,0,0,0-6,6V253.8a6,6,0,0,0,6,6H427a6,6,0,0,0,6-6V18a6,6,0,0,0-6-6Z"/><rect class="cls-4" x="37.89" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="55.93" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="73.97" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="92.01" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="118.71" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="136.76" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="154.8" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="172.84" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="199.54" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="217.58" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="235.63" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="253.67" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="280.37" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="298.41" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="316.45" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="334.49" y="125.08" width="12" height="20.57"/><rect class="cls-4" x="43.89" y="177.53" width="161.29" height="12"/><rect class="cls-4" x="43.89" y="204.59" width="68.2" height="12"/><circle class="cls-3" cx="379.46" cy="207.35" r="23.82"/><rect class="cls-3" x="43.89" y="36.31" width="72.53" height="47.63" rx="12" ry="12"/><path class="cls-4" d="M104.42,88.86H55.89a18,18,0,0,1-18-18V47.23a18,18,0,0,1,18-18h48.53a18,18,0,0,1,18,18V70.86A18,18,0,0,1,104.42,88.86ZM55.89,41.23a6,6,0,0,0-6,6V70.86a6,6,0,0,0,6,6h48.53a6,6,0,0,0,6-6V47.23a6,6,0,0,0-6-6Z"/><path class="cls-4" d="M379.46,241.49a29.81,29.81,0,1,1,29.82-29.82A29.85,29.85,0,0,1,379.46,241.49Zm0-47.63a17.81,17.81,0,1,0,17.82,17.81A17.84,17.84,0,0,0,379.46,193.86Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/transaction.svg b/apps/grid-admin/src/assets/icons/transaction.svg
new file mode 100644
index 00000000..7ba9e2f0
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/transaction.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 392.49 390.69"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f3aa9f;}.cls-3{fill:#e1978f;}.cls-4,.cls-6{fill:#426572;}.cls-5{fill:#e1d2d5;}.cls-6{font-size:100.43px;font-family:Dosis-ExtraBold, Dosis;font-weight:700;}</style></defs><title>Asset 480</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M383.9,162H199.69V2.19q4-.19,8.16-.19A176.87,176.87,0,0,1,383.9,162Z"/><path class="cls-2" d="M355.38,210a176.83,176.83,0,0,1-95.72,157.18l-.15.07A176.88,176.88,0,1,1,101.72,50.67l.15-.07a175.93,175.93,0,0,1,72.82-17.4V191H354.37A177.9,177.9,0,0,1,355.38,210Z"/><path class="cls-3" d="M357.53,212.16a176,176,0,0,1-17.44,76.66,1,1,0,0,1-.07.15A176.89,176.89,0,0,1,73.47,352.79l1.23.38q6,1.86,12.26,3.29A177,177,0,0,0,303.49,191h52.78A178.15,178.15,0,0,1,357.53,212.16Z"/><path class="cls-4" d="M182.85,390.69a182.87,182.87,0,0,1-84-345.31l.41-.2a180.59,180.59,0,0,1,75.13-20l6.27-.28V185H364.36l.51,5.44c.54,5.77.82,11.62.82,17.4a180.72,180.72,0,0,1-20.18,83.56c-.06.12-.12.26-.2.41a184.39,184.39,0,0,1-83,80.77l-.18.08,0,0A181.06,181.06,0,0,1,182.85,390.69ZM104.33,56.08A170.88,170.88,0,0,0,256.9,361.85l.17-.08,0,0a172.34,172.34,0,0,0,77.5-75.38l.15-.29a168.84,168.84,0,0,0,18.93-78.23c0-3.6-.11-7.23-.34-10.84H168.69V37.58a168.41,168.41,0,0,0-64.07,18.35Z"/><path class="cls-5" d="M382.9,158H309.11c-2.89-46.4-18.43-98.49-36.89-144.29l1.33.51a177.49,177.49,0,0,1,92.51,83.56A175.63,175.63,0,0,1,382.9,158Z"/><path class="cls-4" d="M392.49,172H195.69V.47L201.4.2C204.11.07,207,0,209.85,0a182.87,182.87,0,0,1,182,165.44Zm-184.8-12H379.18A170.89,170.89,0,0,0,209.85,12h-2.16Z"/><text class="cls-6" transform="translate(232.67 133.93)">%</text><path class="cls-1" d="M101.22,81.14a166.34,166.34,0,0,1,34.83-18c3.58-1.34,2-7.14-1.6-5.79A172.89,172.89,0,0,0,98.19,76c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-1" d="M36.28,166.34c2.62-8.63,6.74-16.94,11.05-24.83A180.58,180.58,0,0,1,87.86,91.34c2.93-2.52-1.33-6.75-4.24-4.24-23.3,20.06-44.07,47.84-53.12,77.65-1.12,3.7,4.67,5.29,5.79,1.6Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/icons/visit-count.svg b/apps/grid-admin/src/assets/icons/visit-count.svg
new file mode 100644
index 00000000..ba2a3061
--- /dev/null
+++ b/apps/grid-admin/src/assets/icons/visit-count.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.23 419.23"><defs><style>.cls-1{fill:#fbc907;}.cls-2{fill:#f3a70f;}.cls-3{fill:#426572;}.cls-4,.cls-9{fill:#fff;}.cls-5{fill:#e8e8e8;}.cls-6{fill:#dadada;}.cls-7{opacity:0.1;}.cls-8{fill:#55e0ff;}.cls-9{opacity:0.4;}</style></defs><title>Asset 510</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="210.66" cy="209.62" r="203.61"/><path class="cls-2" d="M27.21,209.62A203.61,203.61,0,0,1,220.72,6.26q-5-.25-10.08-.25C98.19,4.86,6.11,95.09,5,207.54S94.05,412.07,206.5,413.21q2.07,0,4.13,0,5.06,0,10.08-.25A203.61,203.61,0,0,1,27.21,209.62Z"/><path class="cls-3" d="M209.61,419.23C94,419.23,0,325.19,0,209.61S94,0,209.61,0,419.23,94,419.23,209.61,325.19,419.23,209.61,419.23Zm0-407.23C100.65,12,12,100.65,12,209.61s88.65,197.61,197.61,197.61,197.61-88.65,197.61-197.61S318.58,12,209.61,12Z"/><path class="cls-4" d="M111.69,60.1a195,195,0,0,1,41.08-21.2c3.59-1.34,2-7.14-1.6-5.79a201.47,201.47,0,0,0-42.51,21.8c-3.18,2.15-.18,7.35,3,5.18Z"/><path class="cls-4" d="M35.09,160.61c3.09-10.2,8-20,13.05-29.32A212.37,212.37,0,0,1,95.87,72.18c2.93-2.52-1.33-6.75-4.24-4.24A217.08,217.08,0,0,0,43,128.26C37.63,138,32.54,148.34,29.31,159c-1.12,3.7,4.67,5.29,5.79,1.6Z"/><circle class="cls-5" cx="211.45" cy="212.12" r="156.89"/><path class="cls-6" d="M67.05,232.07a156.89,156.89,0,0,1,283.33-92.82A156.91,156.91,0,1,0,85,304.92,156.19,156.19,0,0,1,67.05,232.07Z"/><path class="cls-5" d="M211.32,152.25h0a9.16,9.16,0,0,1,9.16,9.16V210.5a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V161.41A9.16,9.16,0,0,1,211.32,152.25Z"/><circle class="cls-5" cx="211.14" cy="221.32" r="15.94"/><path class="cls-3" d="M210.48,92.62c6.29,0,6.29-9.77,0-9.77S204.19,92.62,210.48,92.62Z"/><path class="cls-3" d="M210.48,343.89c6.29,0,6.29-9.77,0-9.77S204.19,343.89,210.48,343.89Z"/><path class="cls-3" d="M339.84,218.25c6.29,0,6.29-9.77,0-9.77S333.55,218.25,339.84,218.25Z"/><path class="cls-3" d="M81.13,218.25c6.29,0,6.29-9.77,0-9.77S74.84,218.25,81.13,218.25Z"/><path class="cls-3" d="M205.56,153.32h0a9.16,9.16,0,0,1,9.16,9.16v49.09a9.16,9.16,0,0,1-9.16,9.16h0a9.16,9.16,0,0,1-9.16-9.16V162.49A9.16,9.16,0,0,1,205.56,153.32Z"/><circle class="cls-3" cx="205.38" cy="221.15" r="15.94"/><path class="cls-3" d="M135.78,272.58l135.16-89.89L290.11,170c5.22-3.46.33-11.94-4.92-8.44L150,251.4l-19.17,12.74C125.64,267.6,130.52,276.08,135.78,272.58Z"/><g class="cls-7"><ellipse class="cls-8" cx="210.2" cy="211.21" rx="156.89" ry="154.23"/></g><path class="cls-9" d="M243.13,60.17,84.37,301.88a162.18,162.18,0,0,1-18.58-47.29L193.5,60.21a153.88,153.88,0,0,1,49.67,0Z"/><path class="cls-9" d="M289.69,72.6,115.93,325.78a155.09,155.09,0,0,1-14.77-15L270,64.76A155.38,155.38,0,0,1,289.69,72.6Z"/><path class="cls-9" d="M362.16,171.75h0L232.51,360.68h0a160.93,160.93,0,0,1-42.54.43L346.63,132.84A151.63,151.63,0,0,1,362.16,171.75Z"/><path class="cls-3" d="M210.12,369.75c-89.82,0-162.89-71.88-162.89-160.23S120.31,49.29,210.12,49.29,373,121.17,373,209.52,299.94,369.75,210.12,369.75Zm0-308.46c-83.2,0-150.89,66.5-150.89,148.23s67.69,148.23,150.89,148.23S361,291.25,361,209.52,293.32,61.29,210.12,61.29Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/images/header.jpg b/apps/grid-admin/src/assets/images/header.jpg
new file mode 100644
index 00000000..977584b6
Binary files /dev/null and b/apps/grid-admin/src/assets/images/header.jpg differ
diff --git a/apps/grid-admin/src/assets/images/logo.png b/apps/grid-admin/src/assets/images/logo.png
new file mode 100644
index 00000000..16f2e7ab
Binary files /dev/null and b/apps/grid-admin/src/assets/images/logo.png differ
diff --git a/apps/grid-admin/src/assets/svg/illustration.svg b/apps/grid-admin/src/assets/svg/illustration.svg
new file mode 100644
index 00000000..b45215b0
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/illustration.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 676.99 384.01"><defs><style>.cls-1{fill:#f7bd3d;}.cls-19,.cls-2{fill:#181828;}.cls-10,.cls-13,.cls-3,.cls-42,.cls-5,.cls-6,.cls-64{fill:#fff;}.cls-3{opacity:0.48;}.cls-4{fill:#d39021;}.cls-6{opacity:0.61;}.cls-10,.cls-7{opacity:0.2;}.cls-8{fill:#113c47;}.cls-9{fill:#df8a3a;}.cls-10,.cls-41,.cls-42,.cls-43,.cls-46,.cls-56,.cls-57{isolation:isolate;}.cls-11{fill:#c0dbe2;}.cls-12{fill:#f7b14b;}.cls-13{opacity:0.7;}.cls-14{fill:#91dcdc;}.cls-15{fill:#5ba3ba;}.cls-16{fill:#d17e1c;}.cls-17{fill:#6f6372;}.cls-18{fill:#63456b;}.cls-19{opacity:0.5;}.cls-20{fill:#f04d6a;}.cls-21{fill:#928f93;}.cls-22{fill:#83c3db;}.cls-23{fill:#c0f3ff;}.cls-24,.cls-30,.cls-41,.cls-43{fill:#e89176;}.cls-25{fill:#ce7057;}.cls-26{fill:#ffbb59;}.cls-27{fill:#ffdbab;}.cls-28{fill:#f4a031;}.cls-29{fill:#fdc6a2;}.cls-30{opacity:0.62;}.cls-31{fill:#ffdbc7;}.cls-32{fill:#ffe8dc;}.cls-33{fill:#b4e4f9;}.cls-34{fill:#73c7e5;}.cls-35{fill:#eefbff;}.cls-36{opacity:0.15;}.cls-37{fill:#1b3c47;}.cls-38{fill:#e59328;}.cls-39{fill:#ffd097;}.cls-40{fill:#1b1b2b;}.cls-41{opacity:0.49;}.cls-42{opacity:0.55;}.cls-43{opacity:0.62;}.cls-44{fill:#ffc1b3;}.cls-45,.cls-64{opacity:0.25;}.cls-46{fill:#dff5f7;}.cls-46,.cls-56{opacity:0.8;}.cls-47{fill:#f1665d;}.cls-48{fill:#f7bd3b;}.cls-49{fill:#56c643;}.cls-50{fill:none;}.cls-51{fill:#8c7f93;}.cls-52{fill:#5ffd9f;}.cls-53{fill:#aeffcf;}.cls-54{fill:#7dc4ff;}.cls-55{fill:#12dd65;}.cls-56{fill:#b5e5e8;}.cls-57{fill:#c08976;opacity:0.39;}.cls-58{fill:#af143b;}.cls-59{fill:#91052d;}.cls-60{fill:#ffdede;}.cls-61{fill:#ea3d90;}.cls-62{fill:#c60c6e;}.cls-63{fill:#ff7dc7;}</style></defs><title>Asset 336</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M603.5,207.07h30.4a0,0,0,0,1,0,0v32.48a15.2,15.2,0,0,1-15.2,15.2h0a15.2,15.2,0,0,1-15.2-15.2V207.07A0,0,0,0,1,603.5,207.07Z"/><path class="cls-2" d="M618.86,256.08a16.43,16.43,0,0,1-16.42-16.42V207.19a1.21,1.21,0,0,1,1.22-1.22h30.4a1.22,1.22,0,0,1,1.22,1.22v32.47A16.44,16.44,0,0,1,618.86,256.08Zm-14-47.68v31.26a14,14,0,0,0,14,14h0a14,14,0,0,0,14-14V208.4Z"/><path class="cls-1" d="M585.23,168.9a61.1,61.1,0,0,0-12-21.92c11-4.5,23.31-3.22,32.37,4.56"/><path class="cls-3" d="M601.05,157.52c-2.43-8.05-19.31-10.2-28.95-9.36,11-4.5,23.31-3.22,32.37,4.56"/><path class="cls-4" d="M574.58,146.18c.44.51-1.37,1.19-.94,1.73,10.1-3.5,21.09-2.45,29.51,4.11l1.56-1.14C595.7,143.14,585.66,141.67,574.58,146.18Z"/><path class="cls-2" d="M590.78,164.39,585,169a61.12,61.12,0,0,0-11.2-22.31h0A60.89,60.89,0,0,1,590.78,164.39Z"/><path class="cls-2" d="M586.21,159a1,1,0,0,1-.8-.44c-4.91-8.05-11.82-9.68-11.93-9.68a.93.93,0,0,1-.71-1.07,1,1,0,0,1,1.08-.71c.31.07,7.79,1.84,13.11,10.54a.92.92,0,0,1-.3,1.27h0A1,1,0,0,1,586.21,159Z"/><path class="cls-5" d="M588.78,149.94a7.18,7.18,0,0,0-2.63-.62.3.3,0,0,1-.29-.31.31.31,0,0,1,.31-.29,8,8,0,0,1,2.86.65.31.31,0,0,1,.16.41.31.31,0,0,1-.41.16Z"/><ellipse class="cls-6" cx="581.68" cy="148.43" rx="1.08" ry="1.35" transform="translate(422.05 727.14) rotate(-88.89)"/><path class="cls-2" d="M584.67,170.12a1.21,1.21,0,0,1-1.16-.87,59.48,59.48,0,0,0-11.72-21.48,1.22,1.22,0,0,1-.25-1.07,1.2,1.2,0,0,1,.72-.84c11.92-4.87,24.49-3.09,33.63,4.76a1.21,1.21,0,0,1,.13,1.71,1.22,1.22,0,0,1-1.72.13c-8-6.89-19-8.69-29.56-4.94a61.72,61.72,0,0,1,11.1,21,1.21,1.21,0,0,1-.82,1.51A1,1,0,0,1,584.67,170.12Z"/><g class="cls-7"><path class="cls-8" d="M645.38,180.89a2.69,2.69,0,0,1-2.69-2.68V163a2.69,2.69,0,0,1,5.38,0v15.22a2.68,2.68,0,0,1-2.68,2.7Z"/><path class="cls-8" d="M645.38,158.72a2.69,2.69,0,0,1-2.69-2.69v-5.69a2.69,2.69,0,0,1,5.38,0V156A2.68,2.68,0,0,1,645.38,158.72Z"/></g><path class="cls-1" d="M650.18,160.47a60.69,60.69,0,0,1,11.94-21.92c-11-4.5-23.32-3.23-32.38,4.56"/><path class="cls-3" d="M631.27,154.46c2.42-8.05,18.52-16.64,30.85-15.91-11-4.5-23.32-3.23-32.38,4.56"/><path class="cls-5" d="M630.12,149.4c2.42-8.05,22.41-14.4,32.37-10.48-11-4.49-23.31-3.22-32.37,4.57"/><path class="cls-2" d="M646.3,151.07l5.14,7.34c2.15-8.13,5.86-14,11.09-20.56l.1-1.75C655.85,140.78,650.66,144.09,646.3,151.07Z"/><path class="cls-1" d="M615.4,142.72h6.12A35.47,35.47,0,0,1,657,178.19h0a35.47,35.47,0,0,1-35.48,35.48H615.4a35.47,35.47,0,0,1-35.48-35.48h0A35.47,35.47,0,0,1,615.4,142.72Z"/><path class="cls-5" d="M615.4,142.72h6.12A35.47,35.47,0,0,1,657,178.19h0c-4.23-15.44-15.3-31.14-34.89-31.14H616c-19.59,0-29.82,13.42-36.06,31.14h0A35.47,35.47,0,0,1,615.4,142.72Z"/><path class="cls-9" d="M657.57,177.76a35.47,35.47,0,0,1-35.47,35.47H616a35.47,35.47,0,0,1-35.47-35.47c0-.76,0-1.52.07-2.27a35.47,35.47,0,0,0,35.47,33.21h6.13a35.46,35.46,0,0,0,35.4-33.21C657.55,176.24,657.57,177,657.57,177.76Z"/><path class="cls-2" d="M652.77,197.23c-7.41-1.75-6.87-.88-13.6-8.53,0,0-2,9.61,5.58,15.2Z"/><path class="cls-2" d="M646.41,202.39s-5.81-.82-11.32-6.66c0,0-1.25,7.92,4.41,12.09Z"/><path class="cls-2" d="M666.3,186.94a1,1,0,0,1-.77-.42c-1.77-2.68-3.45-2.93-6.26-3.32a33.71,33.71,0,0,1-3.74-.69,33.62,33.62,0,0,0-5.37-.89,1,1,0,0,1-.84-1,.91.91,0,0,1,1-.84h0a35.1,35.1,0,0,1,5.67.93,30.78,30.78,0,0,0,3.55.66c2.85.41,5.31.75,7.52,4.12a.93.93,0,0,1-.26,1.3,1,1,0,0,1-.51.16Z"/><path class="cls-2" d="M676.05,196.14a.93.93,0,0,1-.78-.42c-1.75-2.66-8.95-5.77-19.74-8.6a35,35,0,0,0-5.37-.88.94.94,0,0,1,.17-1.86,36.26,36.26,0,0,1,5.67.94c8.06,2.09,18.27,5.38,20.83,9.34a.92.92,0,0,1-.25,1.29h0A.89.89,0,0,1,676.05,196.14Z"/><path class="cls-2" d="M664.45,198.15h-.16a13.49,13.49,0,0,1-8-4.15,16,16,0,0,0-3.85-2.88,34.55,34.55,0,0,0-5.07-2,.92.92,0,0,1-.6-1.16v0a.94.94,0,0,1,1.16-.6,38.43,38.43,0,0,1,5.38,2.15,19.06,19.06,0,0,1,4.29,3.17c1.86,1.71,3.47,3.23,7,3.68a.94.94,0,0,1-.14,1.86Z"/><path class="cls-2" d="M570.92,186.94a1,1,0,0,0,.78-.42c1.76-2.68,3.45-2.93,6.25-3.32a33.71,33.71,0,0,0,3.74-.69,33.8,33.8,0,0,1,5.37-.89,1,1,0,0,0,.84-1,.91.91,0,0,0-1-.84h0a35.1,35.1,0,0,0-5.67.93,30.78,30.78,0,0,1-3.55.66c-2.85.41-5.31.75-7.52,4.12a.93.93,0,0,0,.26,1.3,1,1,0,0,0,.51.16Z"/><path class="cls-2" d="M561.17,196.14a.93.93,0,0,0,.78-.42c1.75-2.66,8.95-5.77,19.74-8.6a35,35,0,0,1,5.37-.88.94.94,0,0,0-.17-1.86,36.26,36.26,0,0,0-5.67.94c-8.06,2.09-18.27,5.38-20.83,9.34a.92.92,0,0,0,.25,1.29h0A.89.89,0,0,0,561.17,196.14Z"/><path class="cls-2" d="M572.77,198.15h.16a13.49,13.49,0,0,0,8-4.15,16.2,16.2,0,0,1,3.86-2.88,34,34,0,0,1,5.06-2,.92.92,0,0,0,.6-1.16v0a.94.94,0,0,0-1.16-.6,38.43,38.43,0,0,0-5.38,2.15,19.06,19.06,0,0,0-4.29,3.17c-1.86,1.71-3.46,3.23-7,3.68a.94.94,0,0,0,.14,1.86Z"/><rect class="cls-5" x="591.72" y="158.31" width="23.8" height="28.97" rx="11.89"/><circle class="cls-2" cx="603.35" cy="173.72" r="8.79"/><circle class="cls-10" cx="605.84" cy="177.47" r="2.22"/><ellipse class="cls-5" cx="601.53" cy="170.34" rx="4.45" ry="3.39"/><rect class="cls-5" x="622.82" y="158.31" width="23.8" height="28.97" rx="11.89"/><circle class="cls-2" cx="634.45" cy="173.72" r="8.79"/><circle class="cls-10" cx="636.94" cy="177.47" r="2.22"/><ellipse class="cls-5" cx="632.62" cy="170.34" rx="4.45" ry="3.39"/><path class="cls-5" d="M602.74,152.19a26.51,26.51,0,0,1,5.66-1.95,29.63,29.63,0,0,1,5.93-.69.64.64,0,0,1,.64.62.63.63,0,0,1-.59.63,29.54,29.54,0,0,0-5.61,1,32.59,32.59,0,0,0-5.33,1.92.83.83,0,0,1-1.09-.42A.82.82,0,0,1,602.74,152.19Z"/><ellipse class="cls-5" cx="618.54" cy="150.08" rx="1.08" ry="1.35" transform="translate(456.54 765.61) rotate(-88.89)"/><path class="cls-2" d="M621.52,214.89H615.4a36.7,36.7,0,1,1,0-73.39h6.12a36.7,36.7,0,1,1,0,73.39Zm-6.12-71a34.26,34.26,0,0,0,0,68.52h6.12a34.26,34.26,0,0,0,0-68.52Z"/><path class="cls-2" d="M652.35,160.22a1.33,1.33,0,0,1-.28,0,1.21,1.21,0,0,1-.91-1.46,57.79,57.79,0,0,1,8.94-20.92c-10.81-3.06-21.62-.57-29.18,6.83a1.22,1.22,0,1,1-1.71-1.74c8.61-8.41,21-11,33.26-6.91a1.24,1.24,0,0,1,.59,1.89c-4.57,6.11-7.51,12.71-9.53,21.4A1.22,1.22,0,0,1,652.35,160.22Z"/><ellipse class="cls-9" cx="624.94" cy="205.15" rx="2.59" ry="0.97"/><circle class="cls-9" cx="620.04" cy="205.36" r="1"/><ellipse class="cls-5" cx="644.21" cy="145.01" rx="1.82" ry="0.89" transform="translate(13.8 341.53) rotate(-30)"/><circle class="cls-5" cx="646.3" cy="146.64" r="0.41"/><path class="cls-2" d="M617.76,185.47a1.74,1.74,0,0,0-1.32,2.89c.79.87,1.93,1.91,3.2,1.91s2.41-1,3.19-1.91a1.74,1.74,0,0,0-.16-2.46,1.8,1.8,0,0,0-1.1-.43Z"/><rect class="cls-11" x="376.08" y="323.79" width="23.87" height="2.17"/><polygon class="cls-11" points="402.27 298.71 402.06 301.15 372.83 301.15 372.62 298.71 402.27 298.71"/><path class="cls-2" d="M396.56,346.71H378.87a3.2,3.2,0,0,1-3.17-2.92l-3.81-46.08a1,1,0,0,1,1-1.09h29.65a1,1,0,0,1,.74.32,1,1,0,0,1,.27.77L401,328.07a1,1,0,1,1-2-.16l2.42-29.28H374l3.73,45a1.17,1.17,0,0,0,1.16,1.07h17.69a1.17,1.17,0,0,0,1.16-1.07l.93-11.2a1,1,0,0,1,1.09-.92,1,1,0,0,1,.92,1.09l-.93,11.19A3.2,3.2,0,0,1,396.56,346.71Z"/><rect class="cls-5" x="368.19" y="293.28" width="39.06" height="4.7"/><path class="cls-2" d="M404.89,299.16H370.54a3.32,3.32,0,1,1,0-6.64h34.35a3.32,3.32,0,0,1,0,6.64Zm-34.35-4.7a1.38,1.38,0,1,0,0,2.76h34.35a1.38,1.38,0,1,0,0-2.76Z"/><path class="cls-2" d="M373.8,294.18h0a.72.72,0,0,1-.68-.76c0-.22.36-5.38,4.8-7.07a.73.73,0,0,1,1,.68v6a.72.72,0,0,1-1.44,0v-4.84c-2.67,1.7-2.9,5.28-2.91,5.32A.71.71,0,0,1,373.8,294.18Z"/><circle class="cls-5" cx="392.19" cy="305.08" r="0.2"/><circle class="cls-11" cx="394.3" cy="301.76" r="1.56"/><circle class="cls-11" cx="397.38" cy="304.44" r="0.44"/><circle class="cls-11" cx="398.57" cy="301.89" r="0.41"/><circle class="cls-11" cx="391.41" cy="301.11" r="0.98"/><circle class="cls-11" cx="394.6" cy="307.28" r="0.37"/><polygon class="cls-12" points="370.95 305.89 372.22 322.52 403.63 322.52 405.08 305.89 370.95 305.89"/><path class="cls-2" d="M403.45,324.07H372a1,1,0,0,1-1-.93l-1.26-16.63a1,1,0,0,1,1-1.08h34.12a1,1,0,0,1,.75.32,1,1,0,0,1,.26.77l-1.45,16.63A1,1,0,0,1,403.45,324.07Zm-30.48-2h29.56l1.27-14.62H371.86Z"/><path class="cls-2" d="M381.05,311.24h-9a.47.47,0,0,1,0-.93h9a.47.47,0,1,1,0,.93Z"/><ellipse class="cls-13" cx="378.25" cy="316.8" rx="3.68" ry="2.89" transform="translate(-113.22 360.25) rotate(-45)"/><ellipse class="cls-13" cx="384.01" cy="314.43" rx="1.44" ry="1.14" transform="translate(-109.86 363.63) rotate(-45)"/><rect class="cls-14" x="210.13" y="327.96" width="112.38" height="17.46"/><rect class="cls-15" x="210.13" y="327.96" width="112.38" height="4.12"/><path class="cls-2" d="M322.52,346.88H210.13a1.45,1.45,0,0,1-1.45-1.46V328a1.45,1.45,0,0,1,1.45-1.45H322.52A1.45,1.45,0,0,1,324,328v17.46A1.45,1.45,0,0,1,322.52,346.88ZM211.59,344H321.06V329.42H211.59Z"/><path class="cls-12" d="M115.69,353.62h516.7a0,0,0,0,1,0,0v0a30.24,30.24,0,0,1-30.24,30.24H145.94a30.24,30.24,0,0,1-30.24-30.24v0a0,0,0,0,1,0,0Z"/><path class="cls-16" d="M631.59,360.3a28.37,28.37,0,0,1-1.23,4H117.73a28.37,28.37,0,0,1-1.23-4Z"/><path class="cls-2" d="M602.15,384H145.94a31.44,31.44,0,0,1-31.4-31.4,1.16,1.16,0,0,1,2.31,0,29.12,29.12,0,0,0,29.09,29.09H602.15a29.12,29.12,0,0,0,29.09-29.09,1.15,1.15,0,1,1,2.3,0A31.43,31.43,0,0,1,602.15,384Z"/><rect class="cls-17" x="568.49" y="220.97" width="95.09" height="124.14" rx="16.2"/><path class="cls-18" d="M595.82,344.38H584.68a16.19,16.19,0,0,1-16.19-16.19V236.45a16.19,16.19,0,0,1,16.19-16.2h11.14a16.2,16.2,0,0,0-16.2,16.2v91.74A16.19,16.19,0,0,0,595.82,344.38Z"/><circle class="cls-19" cx="616.03" cy="254.16" r="10.16"/><circle class="cls-19" cx="616.03" cy="254.16" r="7.19"/><path class="cls-2" d="M616,265.54a11.38,11.38,0,1,1,11.38-11.38A11.4,11.4,0,0,1,616,265.54Zm0-20.33a8.95,8.95,0,1,0,9,8.95A9,9,0,0,0,616,245.21Z"/><circle class="cls-19" cx="616.03" cy="297.71" r="22.14"/><circle class="cls-19" cx="616.03" cy="297.71" r="15.65"/><path class="cls-2" d="M616,321.4a23.69,23.69,0,1,1,23.69-23.69A23.72,23.72,0,0,1,616,321.4Zm0-44.28a20.59,20.59,0,1,0,20.59,20.59A20.61,20.61,0,0,0,616,277.12Z"/><path class="cls-2" d="M590.23,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,590.23,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,590.23,230.88Z"/><path class="cls-2" d="M641.84,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,641.84,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,641.84,230.88Z"/><circle class="cls-20" cx="616.03" cy="229.95" r="3.54"/><path class="cls-2" d="M616,234.42a4.47,4.47,0,1,1,4.48-4.47A4.47,4.47,0,0,1,616,234.42Zm0-7.08a2.61,2.61,0,1,0,2.61,2.61A2.61,2.61,0,0,0,616,227.34Z"/><path class="cls-2" d="M590.23,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,590.23,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,590.23,332Z"/><path class="cls-2" d="M641.84,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,641.84,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,641.84,332Z"/><rect class="cls-18" x="577.8" y="271.47" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="657.91" y="248.02" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="657.91" y="308.2" width="4.36" height="19.09" rx="1.62"/><path class="cls-2" d="M647.38,346.66H584.69a17.77,17.77,0,0,1-17.75-17.75V237.17a17.77,17.77,0,0,1,17.75-17.75h62.69a17.77,17.77,0,0,1,17.75,17.75v91.74A17.77,17.77,0,0,1,647.38,346.66ZM584.69,222.53A14.66,14.66,0,0,0,570,237.17v91.74a14.66,14.66,0,0,0,14.65,14.65h62.69A14.66,14.66,0,0,0,662,328.91V237.17a14.66,14.66,0,0,0-14.64-14.64Z"/><rect class="cls-17" x="93.02" y="220.97" width="95.09" height="124.14" rx="16.2"/><path class="cls-18" d="M120.35,344.38H109.22A16.19,16.19,0,0,1,93,328.19V236.45a16.2,16.2,0,0,1,16.2-16.2h11.13a16.2,16.2,0,0,0-16.2,16.2v91.74A16.19,16.19,0,0,0,120.35,344.38Z"/><circle class="cls-19" cx="140.57" cy="254.16" r="10.16"/><circle class="cls-19" cx="140.57" cy="254.16" r="7.19"/><path class="cls-2" d="M140.57,265.54A11.38,11.38,0,1,1,152,254.16,11.39,11.39,0,0,1,140.57,265.54Zm0-20.33a8.95,8.95,0,1,0,8.94,8.95A9,9,0,0,0,140.57,245.21Z"/><circle class="cls-19" cx="140.57" cy="297.71" r="22.14"/><circle class="cls-19" cx="140.57" cy="297.71" r="15.65"/><path class="cls-2" d="M140.57,321.4a23.69,23.69,0,1,1,23.69-23.69A23.72,23.72,0,0,1,140.57,321.4Zm0-44.28a20.59,20.59,0,1,0,20.58,20.59A20.61,20.61,0,0,0,140.57,277.12Z"/><path class="cls-2" d="M114.76,236.47a3.73,3.73,0,1,1,3.72-3.72A3.73,3.73,0,0,1,114.76,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,114.76,230.88Z"/><path class="cls-2" d="M166.37,236.47a3.73,3.73,0,1,1,3.73-3.72A3.73,3.73,0,0,1,166.37,236.47Zm0-5.59a1.87,1.87,0,1,0,1.86,1.87A1.87,1.87,0,0,0,166.37,230.88Z"/><path class="cls-2" d="M114.76,337.61a3.72,3.72,0,1,1,3.72-3.72A3.73,3.73,0,0,1,114.76,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,114.76,332Z"/><path class="cls-2" d="M166.37,337.61a3.72,3.72,0,1,1,3.73-3.72A3.73,3.73,0,0,1,166.37,337.61Zm0-5.58a1.86,1.86,0,1,0,1.86,1.86A1.86,1.86,0,0,0,166.37,332Z"/><rect class="cls-18" x="102.33" y="271.47" width="4.36" height="19.09" rx="2.18"/><rect class="cls-21" x="182.44" y="248.02" width="4.36" height="19.09" rx="1.62"/><rect class="cls-21" x="182.44" y="308.2" width="4.36" height="19.09" rx="1.62"/><path class="cls-2" d="M171.91,346.66H109.22a17.77,17.77,0,0,1-17.75-17.75V237.17a17.77,17.77,0,0,1,17.75-17.75h62.69a17.77,17.77,0,0,1,17.75,17.75v91.74A17.77,17.77,0,0,1,171.91,346.66ZM109.22,222.53a14.66,14.66,0,0,0-14.64,14.64v91.74a14.66,14.66,0,0,0,14.64,14.65h62.69a14.66,14.66,0,0,0,14.65-14.65V237.17a14.66,14.66,0,0,0-14.65-14.64Z"/><path class="cls-22" d="M331.21,343.91a18,18,0,1,1,35.92,0"/><path class="cls-23" d="M352.41,326.07a18,18,0,0,0-15.82,17.84H332.3a18,18,0,0,1,18-18A16.89,16.89,0,0,1,352.41,326.07Z"/><path class="cls-2" d="M367.13,345.15a1.24,1.24,0,0,1-1.23-1.24,16.63,16.63,0,0,0-2.71-9.12,1.24,1.24,0,0,1,2.08-1.36,19.16,19.16,0,0,1,3.1,10.48A1.24,1.24,0,0,1,367.13,345.15Z"/><path class="cls-2" d="M331.21,345.15a1.24,1.24,0,0,1-1.24-1.24,19.2,19.2,0,0,1,31.21-15,1.24,1.24,0,1,1-1.55,1.93,16.57,16.57,0,0,0-10.46-3.67,16.75,16.75,0,0,0-16.73,16.73A1.24,1.24,0,0,1,331.21,345.15Z"/><path class="cls-24" d="M488.94,54.37a25.94,25.94,0,0,1-51.87,0c0-14.33,11.61-27.18,25.93-27.18S488.94,40,488.94,54.37Z"/><path class="cls-25" d="M487.66,55.17a25.69,25.69,0,0,1-.75,5.57h-1.16a51.46,51.46,0,0,1-36.52-15.13,52.23,52.23,0,0,1-6.82-8.42,25.09,25.09,0,0,1,2.32-2.29,51.1,51.1,0,0,0,4.5,5.14,51.46,51.46,0,0,0,36.52,15.13Z"/><path class="cls-2" d="M463,81.67a27.29,27.29,0,0,1-24-14.35,1.36,1.36,0,1,1,2.4-1.29,24.58,24.58,0,0,0,46.21-11.66c0-14-11.26-25.82-24.58-25.82s-24.57,11.82-24.57,25.82a24.8,24.8,0,0,0,.83,6.37,1.36,1.36,0,1,1-2.63.7,27.06,27.06,0,0,1-.93-7.07c0-15.48,12.5-28.55,27.3-28.55s27.31,13.07,27.31,28.55A27.34,27.34,0,0,1,463,81.67Z"/><path class="cls-24" d="M521.88,72.42a25.94,25.94,0,0,0,51.88,0c0-14.33-11.61-27.18-25.94-27.18S521.88,58.09,521.88,72.42Z"/><path class="cls-25" d="M523.16,73.22a25.69,25.69,0,0,0,.76,5.57h1.16a51.7,51.7,0,0,0,43.33-23.55A26.28,26.28,0,0,0,566.1,53c-1.39,1.81-4.91.48-6.52,2.09-9.34,9.35-20.24,18.18-34.5,18.18Z"/><path class="cls-2" d="M547.82,99.72a27.34,27.34,0,0,1-27.3-27.3c0-15.48,12.5-28.55,27.3-28.55s27.3,13.07,27.3,28.55a27.62,27.62,0,0,1-.92,7.08,1.37,1.37,0,0,1-2.64-.71,24.38,24.38,0,0,0,.84-6.37c0-14-11.26-25.82-24.58-25.82s-24.57,11.82-24.57,25.82a24.58,24.58,0,0,0,46.21,11.66,1.36,1.36,0,1,1,2.4,1.29A27.3,27.3,0,0,1,547.82,99.72Z"/><path class="cls-26" d="M450.17,338.66l-52.1,11.16v-95a26.05,26.05,0,0,1,26.05-26.06h0a26.05,26.05,0,0,1,26.05,26.06Z"/><path class="cls-27" d="M426.66,228.91a26,26,0,0,0-23,25.87v93.73l-6.15,1.31v-95a26.05,26.05,0,0,1,26.06-26.05A23.88,23.88,0,0,1,426.66,228.91Z"/><path class="cls-2" d="M398.07,351a1.21,1.21,0,0,1-.77-.27,1.24,1.24,0,0,1-.45-.95v-95a27.27,27.27,0,1,1,54.54,0v83.88a1.22,1.22,0,0,1-1,1.19L398.32,351A1.07,1.07,0,0,1,398.07,351Zm26.05-121.1a24.86,24.86,0,0,0-24.83,24.84v93.54L449,337.68v-82.9A24.86,24.86,0,0,0,424.12,229.94Zm26.05,108.72h0Z"/><path class="cls-26" d="M512.58,199h0a42.11,42.11,0,0,1,42.11,42.11V352.61a0,0,0,0,1,0,0H412.1a0,0,0,0,1,0,0V299.48A100.48,100.48,0,0,1,512.58,199Z"/><path class="cls-28" d="M554.55,241.9h0a0,0,0,0,1,0,0V348.38a0,0,0,0,1,0,0H544a0,0,0,0,1,0,0v-96A10.53,10.53,0,0,1,554.55,241.9Z"/><path class="cls-27" d="M517.36,199.22a100.51,100.51,0,0,0-93.67,100.26v53.13h-11.2V299.48A100.49,100.49,0,0,1,513,199,42.29,42.29,0,0,1,517.36,199.22Z"/><path class="cls-2" d="M554.69,353.83H412.1a1.21,1.21,0,0,1-1.22-1.22V299.48a101.81,101.81,0,0,1,101.7-101.7,43.37,43.37,0,0,1,43.33,43.32V352.61A1.22,1.22,0,0,1,554.69,353.83Zm-141.37-2.44H553.47V241.1a40.94,40.94,0,0,0-40.89-40.89,99.38,99.38,0,0,0-99.26,99.27Z"/><rect class="cls-26" x="531.05" y="226.8" width="41.81" height="115.09" rx="20.9"/><path class="cls-27" d="M555.56,341.78c-.72.07-1.44.11-2.18.11A20.91,20.91,0,0,1,532.48,321V247.7a20.9,20.9,0,0,1,20.9-20.9c.74,0,1.46,0,2.18.11a20.91,20.91,0,0,0-18.73,20.79V321A20.92,20.92,0,0,0,555.56,341.78Z"/><path class="cls-2" d="M552,343.11A22.15,22.15,0,0,1,529.84,321V247.7a22.12,22.12,0,0,1,44.24,0V321A22.15,22.15,0,0,1,552,343.11ZM552,228a19.71,19.71,0,0,0-19.69,19.68V321a19.69,19.69,0,1,0,39.38,0V247.7A19.71,19.71,0,0,0,552,228Z"/><rect class="cls-26" x="502.84" y="271.92" width="35.41" height="115.09" rx="17.71" transform="translate(850.01 -191.08) rotate(90)"/><path class="cls-2" d="M560.38,348.39H480.71a18.93,18.93,0,0,1,0-37.85h79.67a18.93,18.93,0,1,1,0,37.85ZM480.71,313a16.49,16.49,0,1,0,0,33h79.67a16.49,16.49,0,1,0,0-33Z"/><ellipse class="cls-29" cx="457.99" cy="329.89" rx="22.56" ry="17.62"/><path class="cls-30" d="M460.53,347a1.53,1.53,0,0,1-.23-3h0a27.23,27.23,0,0,0,7.8-2.68c4.95-2.66,7.59-6.4,7.84-11.11a1.51,1.51,0,0,1,1.61-1.45,1.54,1.54,0,0,1,1.45,1.61c-.31,5.8-3.6,10.54-9.53,13.69a30.37,30.37,0,0,1-8.72,3Z"/><path class="cls-2" d="M458,348.63c-6.56,0-13.09-2.12-17.75-6.26-4.15-3.7-6.27-8.47-5.95-13.42.32-5.17,3.22-9.87,8.15-13.25a1.15,1.15,0,1,1,1.3,1.9c-4.33,3-6.88,7-7.16,11.49-.27,4.24,1.58,8.34,5.19,11.56,7.84,7,21.49,7.66,30.43,1.53,4.33-3,6.87-7.05,7.16-11.49.26-4.24-1.58-8.34-5.2-11.56a1.15,1.15,0,0,1,1.53-1.72c4.16,3.7,6.27,8.47,6,13.42-.33,5.17-3.22,9.87-8.15,13.25A27.61,27.61,0,0,1,458,348.63Z"/><ellipse class="cls-31" cx="454.12" cy="325.7" rx="10.47" ry="6.34"/><rect class="cls-32" x="426.41" y="310.9" width="3.64" height="19.62" rx="1.82"/><rect class="cls-32" x="540.6" y="253.08" width="3.64" height="19.62" rx="1.82"/><rect class="cls-32" x="407.4" y="251.12" width="3.64" height="19.62" rx="1.82"/><rect class="cls-15" x="148.16" y="298.4" width="58.16" height="54.73" transform="translate(354.48 651.53) rotate(-180)"/><path class="cls-2" d="M206.32,354.37H148.16a1.25,1.25,0,0,1-1.24-1.24V298.4a1.24,1.24,0,0,1,1.24-1.24h58.16a1.24,1.24,0,0,1,1.24,1.24v54.73A1.25,1.25,0,0,1,206.32,354.37Zm-56.92-2.48h55.68V299.64H149.4Z"/><rect class="cls-14" x="160.05" y="298.4" width="58.16" height="54.73" transform="translate(378.26 651.53) rotate(-180)"/><path class="cls-2" d="M218.21,354.37H160.05a1.24,1.24,0,0,1-1.24-1.24V298.4a1.23,1.23,0,0,1,1.24-1.24h58.16a1.24,1.24,0,0,1,1.24,1.24v54.73A1.25,1.25,0,0,1,218.21,354.37Zm-56.92-2.48H217V299.64H161.29Z"/><path class="cls-15" d="M165.79,316.48H203a0,0,0,0,1,0,0v8.68a0,0,0,0,1,0,0H165.79a4.34,4.34,0,0,1-4.34-4.34v0A4.34,4.34,0,0,1,165.79,316.48Z" transform="translate(364.4 641.64) rotate(-180)"/><rect class="cls-15" x="47.73" y="129.98" width="259.84" height="185.06" rx="11.92" transform="translate(355.3 445.02) rotate(-180)"/><path class="cls-2" d="M295.65,316.28h-236a13.18,13.18,0,0,1-13.16-13.16V141.9a13.18,13.18,0,0,1,13.16-13.16h117a1.24,1.24,0,1,1,0,2.48h-117A10.69,10.69,0,0,0,49,141.9V303.12A10.69,10.69,0,0,0,59.65,313.8h236a10.69,10.69,0,0,0,10.68-10.68V141.9a10.69,10.69,0,0,0-10.68-10.68H251.48a1.24,1.24,0,1,1,0-2.48h44.17a13.18,13.18,0,0,1,13.16,13.16V303.12A13.18,13.18,0,0,1,295.65,316.28Z"/><rect class="cls-14" x="59.02" y="129.98" width="259.84" height="185.06" rx="11.92" transform="translate(377.88 445.02) rotate(-180)"/><rect class="cls-33" x="70.43" y="139.79" width="240.91" height="167.83" rx="7.94" transform="translate(381.77 447.41) rotate(-180)"/><ellipse class="cls-15" cx="188.68" cy="325.28" rx="1.54" ry="0.66"/><circle class="cls-15" cx="185.3" cy="327.96" r="0.9"/><circle class="cls-15" cx="191.39" cy="327.51" r="0.9"/><circle class="cls-15" cx="172.02" cy="324.46" r="2.11"/><circle class="cls-15" cx="194.17" cy="324.46" r="2.11"/><circle class="cls-15" cx="177.29" cy="327.53" r="0.95"/><circle class="cls-15" cx="172.11" cy="329.98" r="0.94"/><circle class="cls-15" cx="167.73" cy="327.96" r="0.43"/><circle class="cls-15" cx="169.45" cy="327.53" r="0.95"/><rect class="cls-34" x="303.75" y="200.35" width="6.76" height="94.24" rx="3.38" transform="translate(614.25 494.94) rotate(180)"/><rect class="cls-34" x="303.75" y="154.37" width="6.76" height="29.8" rx="3.38"/><rect class="cls-35" x="71.77" y="192.66" width="6.76" height="44.67" rx="3.38" transform="translate(150.3 429.98) rotate(-180)"/><rect class="cls-35" x="71.77" y="147.07" width="6.76" height="29.8" rx="3.38" transform="translate(150.3 323.94) rotate(180)"/><rect class="cls-35" x="71.77" y="259.42" width="6.76" height="13.27" rx="3.38" transform="translate(150.3 532.12) rotate(-180)"/><path class="cls-2" d="M70.43,170.51a1.25,1.25,0,0,1-1.24-1.24V147.73a9.19,9.19,0,0,1,9.18-9.18H245.21a1.24,1.24,0,1,1,0,2.48H78.37a6.71,6.71,0,0,0-6.7,6.7v21.54A1.25,1.25,0,0,1,70.43,170.51Z"/><path class="cls-2" d="M303.4,308.86H125.51a1.24,1.24,0,1,1,0-2.48H303.4a6.71,6.71,0,0,0,6.7-6.7v-152a6.71,6.71,0,0,0-6.7-6.7H256.07a1.24,1.24,0,1,1,0-2.48H303.4a9.19,9.19,0,0,1,9.18,9.18v152A9.19,9.19,0,0,1,303.4,308.86Z"/><path class="cls-2" d="M115.61,308.86H78.37a9.19,9.19,0,0,1-9.18-9.18v-48a1.24,1.24,0,0,1,2.48,0v48a6.71,6.71,0,0,0,6.7,6.7h37.24a1.24,1.24,0,0,1,0,2.48Z"/><path class="cls-2" d="M70.43,242.72a1.25,1.25,0,0,1-1.24-1.24V179.22a1.24,1.24,0,1,1,2.48,0v62.26A1.25,1.25,0,0,1,70.43,242.72Z"/><rect class="cls-15" x="56.94" y="149.8" width="10.21" height="5.59" rx="2.79" transform="translate(214.64 90.54) rotate(90)"/><rect class="cls-15" x="54.88" y="252.11" width="14.34" height="5.59" rx="2.79" transform="translate(316.95 192.86) rotate(90)"/><rect class="cls-15" x="56.94" y="186.47" width="10.21" height="5.59" rx="2.79" transform="translate(251.31 127.22) rotate(90)"/><path class="cls-2" d="M306.94,316.28h-236a13.18,13.18,0,0,1-13.16-13.16V141.9a13.18,13.18,0,0,1,13.16-13.16H225.66a1.24,1.24,0,1,1,0,2.48H70.94A10.69,10.69,0,0,0,60.26,141.9V303.12A10.69,10.69,0,0,0,70.94,313.8h236a10.69,10.69,0,0,0,10.68-10.68V141.9a10.69,10.69,0,0,0-10.68-10.68H235.07a1.24,1.24,0,1,1,0-2.48h71.87A13.18,13.18,0,0,1,320.1,141.9V303.12A13.18,13.18,0,0,1,306.94,316.28Z"/><g class="cls-36"><path class="cls-37" d="M392.13,192.34H379V170.15h39.07a1.58,1.58,0,1,1,0,3.16H382.17v15.87h10a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M402.47,192.34h-5.69a1.58,1.58,0,1,1,0-3.16h5.69a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M406.86,192.34h-.12a1.58,1.58,0,1,1,0-3.16h.12a1.58,1.58,0,0,1,0,3.16Z"/><path class="cls-37" d="M434.51,192.34H411.28a1.58,1.58,0,0,1,0-3.16h20.08V173.31h-7a1.58,1.58,0,1,1,0-3.16h10.18Z"/><path class="cls-37" d="M407.91,173.31H352.42V151.17h55.49Zm-52.35-3.16h49.19V154.32H355.57Z"/></g><g class="cls-36"><path class="cls-37" d="M110.6,112H97.45V89.83h39.08a1.58,1.58,0,0,1,0,3.15H100.64v15.88h10a1.58,1.58,0,1,1,0,3.15Z"/><path class="cls-37" d="M121,112h-5.7a1.58,1.58,0,0,1,0-3.15H121a1.58,1.58,0,0,1,0,3.15Z"/><path class="cls-37" d="M125.33,112h-.11a1.58,1.58,0,1,1,0-3.15h.11a1.58,1.58,0,1,1,0,3.15Z"/><path class="cls-37" d="M153,112H129.76a1.58,1.58,0,1,1,0-3.15h20.07V93h-7a1.58,1.58,0,1,1,0-3.15H153Z"/><path class="cls-37" d="M126.38,93H70.89V70.84h55.49ZM74,89.83h49.19V74H74.05Z"/></g><g class="cls-36"><path class="cls-37" d="M625.65,103.13H612.5V80.94h39.07a1.58,1.58,0,0,1,0,3.16H615.69V100h10a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M636,103.13H630.3a1.58,1.58,0,1,1,0-3.16H636a1.58,1.58,0,1,1,0,3.16Z"/><path class="cls-37" d="M640.38,103.13h-.12a1.58,1.58,0,0,1,0-3.16h.12a1.58,1.58,0,0,1,0,3.16Z"/><path class="cls-37" d="M668,103.13H644.8a1.58,1.58,0,0,1,0-3.16h20.08V84.1h-7a1.58,1.58,0,1,1,0-3.16h10.17Z"/><path class="cls-37" d="M641.43,84.1H585.94V62h55.49Zm-52.35-3.16h49.19V65.11H589.09Z"/></g><path class="cls-2" d="M295.59,345.9H283.86a.93.93,0,1,1,0-1.86h11.73a.93.93,0,0,1,0,1.86Z"/><path class="cls-2" d="M295.59,350.71H283.86a.94.94,0,1,1,0-1.87h11.73a.94.94,0,0,1,0,1.87Z"/><ellipse class="cls-5" cx="262.75" cy="354.03" rx="1.4" ry="2.12"/><circle class="cls-5" cx="262.34" cy="359.31" r="0.99"/><circle class="cls-2" cx="298.2" cy="358.11" r="1.02"/><rect class="cls-12" x="96.1" y="344.59" width="553.37" height="14.95" rx="7.48"/><rect class="cls-12" x="96.1" y="344.59" width="553.37" height="14.95" rx="7.48"/><path class="cls-38" d="M649.46,351.72A7.48,7.48,0,0,1,642,359.2H103.57a7.48,7.48,0,0,1-7.48-7.48,7.27,7.27,0,0,1,.61-2.92,7.46,7.46,0,0,0,6.87,4.54H642a7.49,7.49,0,0,0,5.28-2.18,7.33,7.33,0,0,0,1.59-2.36A7.26,7.26,0,0,1,649.46,351.72Z"/><path class="cls-2" d="M547.49,345.48h-20a1.15,1.15,0,1,1,0-2.3h20a1.15,1.15,0,1,1,0,2.3Z"/><path class="cls-2" d="M117.9,350.63H96.74a.89.89,0,0,1,0-1.77H117.9a.89.89,0,1,1,0,1.77Z"/><path class="cls-2" d="M125.91,350.63h-3.49a.89.89,0,0,1,0-1.77h3.49a.89.89,0,0,1,0,1.77Z"/><rect class="cls-39" x="276.5" y="345.23" width="61.99" height="4.29" rx="2.15"/><rect class="cls-39" x="233.27" y="345.23" width="34.64" height="4.29" rx="2.15"/><rect class="cls-39" x="160.62" y="345.23" width="34.64" height="4.29" rx="2.15"/><path class="cls-2" d="M642,360.43H103.57a8.63,8.63,0,0,1,0-17.25H515.86a1.15,1.15,0,1,1,0,2.3H103.57a6.33,6.33,0,0,0,0,12.65H642a6.33,6.33,0,0,0,0-12.65H560.24a1.15,1.15,0,1,1,0-2.3H642a8.63,8.63,0,1,1,0,17.25Z"/><path class="cls-29" d="M446.88,100.57l6.66.13a15.76,15.76,0,0,1,15.4,16h0A15.68,15.68,0,0,1,453,132.15h0l-6.66-.13a15.76,15.76,0,0,1-15.42-16h0a15.68,15.68,0,0,1,15.95-15.41Z"/><path class="cls-2" d="M430.4,117.12h0a1.36,1.36,0,0,1-1.35-1.38,16.8,16.8,0,0,1,3.32-9.82,1.36,1.36,0,1,1,2.19,1.62,14.06,14.06,0,0,0-2.78,8.24A1.36,1.36,0,0,1,430.4,117.12Z"/><path class="cls-2" d="M452.75,133.31h-.3l-6.68-.13a17.08,17.08,0,0,1-15.65-11,1.37,1.37,0,0,1,.79-1.76,1.36,1.36,0,0,1,1.76.79,14.33,14.33,0,0,0,13.16,9.27l6.64.14a14.38,14.38,0,0,0,.55-28.75l-6.65-.14a14.28,14.28,0,0,0-7.47,1.91,1.36,1.36,0,0,1-1.86-.49,1.37,1.37,0,0,1,.49-1.87,17,17,0,0,1,8.9-2.27l6.65.13a17.11,17.11,0,0,1-.33,34.21Z"/><path class="cls-24" d="M449.18,113.44l3.46.06a8.19,8.19,0,0,1,8,8.34h0a8.18,8.18,0,0,1-8.32,8l-3.46-.07a8.19,8.19,0,0,1-8-8.33h0A8.17,8.17,0,0,1,449.18,113.44Z"/><path class="cls-5" d="M437.52,110.88a5.8,5.8,0,0,1,2.91-3.17c1.16-.45.69-2.34-.51-1.88a7.7,7.7,0,0,0-4.1,4.09c-.48,1.14,1.19,2.13,1.68,1Z"/><ellipse class="cls-5" cx="435.31" cy="114.5" rx="1.55" ry="1.24" transform="matrix(0.15, -0.99, 0.99, 0.15, 258.45, 528.41)"/><path class="cls-29" d="M557,100.57l6.66.13a15.76,15.76,0,0,1,15.42,16h0a15.68,15.68,0,0,1-15.95,15.41h0l-6.65-.13A15.76,15.76,0,0,1,541,116h0a15.68,15.68,0,0,1,16-15.41Z"/><path class="cls-2" d="M563.36,133.33h-.29l-6.69-.14a17.16,17.16,0,0,1-16.76-17.43,17.05,17.05,0,0,1,17-16.75H557l6.65.13a17.09,17.09,0,0,1-.28,34.18Zm-6.69-31.59a14.32,14.32,0,0,0-14.32,14.07,14.43,14.43,0,0,0,14.09,14.66l6.65.13a14.36,14.36,0,0,0,.5-28.72l-6.65-.14h-.27Z"/><path class="cls-24" d="M559.79,113.44l3.47.06a8.2,8.2,0,0,1,8,8.33v0h0a8.19,8.19,0,0,1-8.33,8l-3.45-.07a8.19,8.19,0,0,1-8-8.33h0A8.18,8.18,0,0,1,559.79,113.44Z"/><path class="cls-40" d="M440.47,118.54a1,1,0,0,1-.79-1.67,13.55,13.55,0,0,1,7.79-4.71,1,1,0,0,1,.41,2,11.43,11.43,0,0,0-6.61,4A1,1,0,0,1,440.47,118.54Z"/><path class="cls-40" d="M572.07,118.54a1,1,0,0,1-.8-.38,11.46,11.46,0,0,0-6.61-4,1,1,0,0,1,.41-2,13.55,13.55,0,0,1,7.79,4.71,1,1,0,0,1-.15,1.44A1,1,0,0,1,572.07,118.54Z"/><path class="cls-29" d="M545.17,34.62c.69.59,1.29,1.21,1.91,1.83a58.21,58.21,0,0,1,17.11,41.29V130a58.4,58.4,0,1,1-116.8,1.27c0-.42,0-.84,0-1.27V77.74a58.25,58.25,0,0,1,19-43.13C487.62,15.24,523.88,15.37,545.17,34.62Z"/><path class="cls-24" d="M547.4,36.72c-.62-.62-1.26-1.23-1.91-1.82a57.94,57.94,0,0,1-6,3.18c.28.28.53.58.79.88l2.11,2.47A62,62,0,0,1,550.29,54h-70a6.29,6.29,0,0,0,6.29,6.28h66.17a52.7,52.7,0,0,1,2.48,16.29V130.3a58.4,58.4,0,0,1-53.77,58.22c1.52.12,3.07.18,4.62.18a58.39,58.39,0,0,0,58.4-58.4V78A58.21,58.21,0,0,0,547.4,36.72Z"/><path class="cls-29" d="M518.28,199.55c0,2.51.71,5.34-.47,7.3-2.34,3.91-8.07,5.9-13.06,5.81h0a13.65,13.65,0,0,1-13.35-13.85l.68-10.89v-.68l27,.13"/><path class="cls-41" d="M520,188.4l-1.7,14.13a15.92,15.92,0,0,1-9.25-.74,75.12,75.12,0,0,0-16.28-5.19h-.13l.14-8.18a77.57,77.57,0,0,0,27.22,0Z"/><circle class="cls-42" cx="482.74" cy="182.33" r="0.72"/><circle class="cls-42" cx="492.76" cy="185.81" r="0.95"/><path class="cls-5" d="M511,187.58c-1.49.11-3,.17-4.53.17-32.25,0-61.86-25.73-58.4-58.4V77.06a58.24,58.24,0,0,1,19-43.12c1.85,1.12,1.45,2.17,3.53,3.13-9.83,10.44-17.44,24.54-17.44,40v52.29C453.22,160.09,476.9,186.57,511,187.58Z"/><circle class="cls-29" cx="538.87" cy="96.14" r="4.28"/><path class="cls-2" d="M452.37,154.8a1.37,1.37,0,0,1-1.23-.78,21.42,21.42,0,0,1-1.46-4,1.37,1.37,0,1,1,2.65-.66,18.26,18.26,0,0,0,1.27,3.52,1.36,1.36,0,0,1-.64,1.82A1.38,1.38,0,0,1,452.37,154.8Z"/><ellipse class="cls-43" cx="486.67" cy="111.98" rx="7.51" ry="9.5"/><ellipse class="cls-2" cx="486.33" cy="109.92" rx="7.4" ry="9.38"/><ellipse class="cls-5" cx="483.69" cy="106.51" rx="2.73" ry="2.98"/><ellipse class="cls-43" cx="525.69" cy="111.98" rx="7.51" ry="9.5"/><ellipse class="cls-2" cx="525.36" cy="109.92" rx="7.4" ry="9.38"/><ellipse class="cls-5" cx="522.71" cy="106.51" rx="2.73" ry="2.98"/><path class="cls-2" d="M505.75,189.86A60,60,0,0,1,454.3,160.5a1.37,1.37,0,1,1,2.35-1.39,57.25,57.25,0,0,0,49.1,28h.07a57.11,57.11,0,0,0,57-57.11V77.74a57.23,57.23,0,0,0-16.7-40.33L546,37.3c-.58-.58-1.13-1.13-1.74-1.66-9.94-9-24-14.13-38.52-14.15h-.09c-14.75,0-28.36,5-38.33,14.13a57,57,0,0,0-18.59,42.12V130a58.27,58.27,0,0,0,.92,10.3,1.37,1.37,0,0,1-2.69.48A60.86,60.86,0,0,1,446,130V77.74A59.79,59.79,0,0,1,465.46,33.6c21.71-19.84,58.61-19.85,80.59,0,.66.57,1.27,1.18,1.86,1.77l.1.11a60,60,0,0,1,17.51,42.26V130a59.84,59.84,0,0,1-59.7,59.84Z"/><path class="cls-2" d="M505.3,213.89a14.28,14.28,0,0,1-9.67-3.79A15.06,15.06,0,0,1,490.72,199V188.42a1.36,1.36,0,1,1,2.72,0V199a12.35,12.35,0,0,0,4,9.11,11.58,11.58,0,0,0,9,3l.82-.1a12.11,12.11,0,0,0,10.11-12V188.4a1.37,1.37,0,1,1,2.73,0V199a14.84,14.84,0,0,1-12.43,14.68c-.33.05-.65.09-1,.12A12.75,12.75,0,0,1,505.3,213.89Z"/><rect class="cls-32" x="456.56" y="88.86" width="4.25" height="22.93" rx="2.12"/><path class="cls-2" d="M508.12,130.22a1.37,1.37,0,0,1-1.27-.88,37,37,0,0,1-2.33-10.85V102.54a1.36,1.36,0,0,1,2.72,0v15.83a34.27,34.27,0,0,0,2.16,10,1.36,1.36,0,0,1-.79,1.76A1.41,1.41,0,0,1,508.12,130.22Z"/><path class="cls-24" d="M531.07,17.71H502.38A39.35,39.35,0,0,0,471.06,2.16H435.38c0,28.52,22.88,52.88,51.1,52.88h80.3C566.78,35.11,550.79,17.71,531.07,17.71Z"/><path class="cls-25" d="M550.67,23.51c9.25,6.54,15.3,18.55,15.3,30.74H484.8A51.54,51.54,0,0,1,444.2,34.5a51.41,51.41,0,0,0,31.9,11h65.65c10.45,0,16.37-13.63,9.45-21.46l-.53-.57"/><rect class="cls-44" x="453.54" y="-5.07" width="4.25" height="22.93" rx="2.12" transform="translate(462.07 -449.27) rotate(90)"/><ellipse class="cls-23" cx="337.53" cy="339.19" rx="0.96" ry="1.51"/><circle class="cls-23" cx="339.35" cy="336.6" r="0.52"/><circle class="cls-23" cx="339.01" cy="334.92" r="0.52"/><circle class="cls-23" cx="340.89" cy="334.74" r="0.43"/><circle class="cls-23" cx="340.19" cy="338.89" r="0.32"/><circle class="cls-23" cx="338.49" cy="338.89" r="0.77"/><circle class="cls-23" cx="337.05" cy="340.91" r="0.48"/><circle class="cls-23" cx="339.35" cy="340.43" r="0.34"/><circle class="cls-23" cx="340.67" cy="336.81" r="0.22"/><circle class="cls-23" cx="338.27" cy="341.39" r="0.22"/><circle class="cls-23" cx="339.69" cy="337.68" r="0.22"/><ellipse class="cls-16" cx="162.43" cy="364.29" rx="8.96" ry="3.08"/><circle class="cls-16" cx="179.44" cy="364.45" r="2.15"/><circle class="cls-16" cx="178.34" cy="372.11" r="1.1"/><circle class="cls-16" cx="171.18" cy="369.18" r="1.1"/><circle class="cls-16" cx="162.43" cy="372.11" r="1.07"/><circle class="cls-16" cx="161.69" cy="367.73" r="1.07"/><circle class="cls-16" cx="146.4" cy="363.99" r="2.61"/><circle class="cls-16" cx="153.47" cy="373.03" r="2.75"/><circle class="cls-16" cx="145.37" cy="368.06" r="2.75"/><ellipse class="cls-16" cx="555.88" cy="364.98" rx="8.96" ry="3.08"/><circle class="cls-16" cx="572.89" cy="365.14" r="2.15"/><circle class="cls-16" cx="571.79" cy="372.8" r="1.1"/><circle class="cls-16" cx="564.63" cy="369.87" r="1.1"/><circle class="cls-16" cx="561.82" cy="373.87" r="1.07"/><circle class="cls-16" cx="555.88" cy="372.8" r="1.07"/><circle class="cls-16" cx="555.14" cy="368.42" r="1.07"/><circle class="cls-16" cx="539.86" cy="364.68" r="2.61"/><circle class="cls-16" cx="546.92" cy="373.72" r="2.75"/><circle class="cls-16" cx="538.82" cy="368.74" r="2.75"/><ellipse class="cls-18" cx="579.86" cy="250.5" rx="1.69" ry="4.9"/><circle class="cls-18" cx="579.94" cy="241.19" r="1.18"/><circle class="cls-18" cx="584.13" cy="241.79" r="0.6"/><circle class="cls-18" cx="582.53" cy="245.71" r="0.6"/><circle class="cls-18" cx="584.72" cy="247.25" r="0.59"/><circle class="cls-18" cx="584.13" cy="250.5" r="0.59"/><circle class="cls-18" cx="581.74" cy="250.91" r="0.59"/><circle class="cls-18" cx="579.69" cy="259.27" r="1.43"/><circle class="cls-18" cx="584.64" cy="255.4" r="1.5"/><circle class="cls-18" cx="581.92" cy="259.84" r="1.5"/><ellipse class="cls-44" cx="444.36" cy="22.97" rx="1.23" ry="3.58" transform="translate(43.04 215.13) rotate(-28.54)"/><circle class="cls-44" cx="441.16" cy="16.96" r="0.86"/><circle class="cls-44" cx="444.06" cy="15.89" r="0.44"/><circle class="cls-44" cx="444.4" cy="18.96" r="0.44"/><circle class="cls-44" cx="446.34" cy="19.18" r="0.43"/><circle class="cls-44" cx="447.1" cy="21.47" r="0.43"/><circle class="cls-44" cx="445.71" cy="22.57" r="0.43"/><path class="cls-44" d="M446.82,27.74a1,1,0,0,1,1.41.41c.28.51.09,2.38-.42,2.66a1,1,0,0,1-1.41-.42C446.13,29.89,446.31,28,446.82,27.74Z"/><circle class="cls-44" cx="449.14" cy="24.44" r="1.1"/><path class="cls-44" d="M448.41,27.28a1.09,1.09,0,0,1,1.49.44c.29.53.1,2.44-.44,2.73s-1.2-1.15-1.48-1.69A1.08,1.08,0,0,1,448.41,27.28Z"/><ellipse class="cls-18" cx="580.23" cy="306.8" rx="1.69" ry="4.9"/><circle class="cls-18" cx="580.32" cy="297.49" r="1.18"/><circle class="cls-18" cx="584.51" cy="298.09" r="0.6"/><circle class="cls-18" cx="582.91" cy="302.01" r="0.6"/><circle class="cls-18" cx="585.1" cy="303.55" r="0.59"/><circle class="cls-18" cx="584.51" cy="306.8" r="0.59"/><circle class="cls-18" cx="582.12" cy="307.21" r="0.59"/><circle class="cls-18" cx="580.07" cy="315.57" r="1.43"/><circle class="cls-18" cx="585.01" cy="311.7" r="1.5"/><circle class="cls-18" cx="582.29" cy="316.14" r="1.5"/><path class="cls-2" d="M616,320.4a.62.62,0,0,1-.62-.62V274.65A.62.62,0,0,1,616,274a.62.62,0,0,1,.62.62v45.13A.62.62,0,0,1,616,320.4Z"/><path class="cls-2" d="M612.49,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,612.49,319.16Z"/><path class="cls-2" d="M608.89,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,608.89,319.16Z"/><path class="cls-2" d="M605.3,316.67a.62.62,0,0,1-.63-.62V279a.63.63,0,0,1,1.25,0v37.05A.62.62,0,0,1,605.3,316.67Z"/><path class="cls-2" d="M601.7,315.43a.62.62,0,0,1-.62-.62V280.86a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v33.95A.62.62,0,0,1,601.7,315.43Z"/><path class="cls-2" d="M598.1,312.32a.61.61,0,0,1-.62-.62V284a.61.61,0,0,1,.62-.62.62.62,0,0,1,.62.62V311.7A.62.62,0,0,1,598.1,312.32Z"/><path class="cls-2" d="M619.66,319.78a.62.62,0,0,1-.62-.62V276.51a.63.63,0,0,1,1.25,0v42.65A.63.63,0,0,1,619.66,319.78Z"/><path class="cls-2" d="M623.26,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,623.26,319.78Z"/><path class="cls-2" d="M626.86,317.29a.62.62,0,0,1-.62-.62V279.62a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v37.05A.61.61,0,0,1,626.86,317.29Z"/><path class="cls-2" d="M630.46,316.05a.62.62,0,0,1-.62-.62V281.48a.62.62,0,0,1,1.24,0v33.95A.62.62,0,0,1,630.46,316.05Z"/><path class="cls-2" d="M634.06,311.7a.62.62,0,0,1-.62-.62V284.59a.62.62,0,1,1,1.24,0v26.49A.62.62,0,0,1,634.06,311.7Z"/><g class="cls-45"><path class="cls-2" d="M615,320.4a.62.62,0,0,1-.62-.62V274.65a.62.62,0,1,1,1.24,0v45.13A.62.62,0,0,1,615,320.4Z"/><path class="cls-2" d="M611.44,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v42.65A.62.62,0,0,1,611.44,319.16Z"/><path class="cls-2" d="M607.84,319.16a.62.62,0,0,1-.62-.62V275.89a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,607.84,319.16Z"/><path class="cls-2" d="M604.24,316.67a.62.62,0,0,1-.62-.62V279a.62.62,0,0,1,1.24,0v37.05A.62.62,0,0,1,604.24,316.67Z"/><path class="cls-2" d="M600.64,315.43a.62.62,0,0,1-.62-.62V280.86a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v33.95A.62.62,0,0,1,600.64,315.43Z"/><path class="cls-2" d="M597,310.46a.62.62,0,0,1-.62-.62V285.21a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v24.63A.62.62,0,0,1,597,310.46Z"/><path class="cls-2" d="M618.61,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,618.61,319.78Z"/><path class="cls-2" d="M622.21,319.78a.62.62,0,0,1-.62-.62V276.51a.62.62,0,0,1,1.24,0v42.65A.62.62,0,0,1,622.21,319.78Z"/><path class="cls-2" d="M625.81,317.29a.61.61,0,0,1-.62-.62V279.62a.62.62,0,0,1,.62-.62.62.62,0,0,1,.62.62v37.05A.62.62,0,0,1,625.81,317.29Z"/><path class="cls-2" d="M629.41,316.05a.63.63,0,0,1-.63-.62V281.48a.63.63,0,0,1,1.25,0v33.95A.62.62,0,0,1,629.41,316.05Z"/><path class="cls-2" d="M633,313a.63.63,0,0,1-.62-.63V284.59a.63.63,0,0,1,1.25,0v27.73A.63.63,0,0,1,633,313Z"/></g><path class="cls-2" d="M332.3,337.92H261.69a21.89,21.89,0,0,1-21.87-21.87,1.24,1.24,0,0,1,2.48,0,19.41,19.41,0,0,0,19.39,19.39H332.3a1.24,1.24,0,0,1,0,2.48Z"/><path class="cls-44" d="M487.69,9.36a2.27,2.27,0,0,1-.72-.12l-6.62-2.32a31.93,31.93,0,0,0-10.57-1.79H440.87a2.18,2.18,0,1,1,0-4.35h28.91a36.12,36.12,0,0,1,12,2l6.61,2.31a2.18,2.18,0,0,1-.71,4.23Z"/><path class="cls-44" d="M447.38,35.83a2.19,2.19,0,0,1-1.63-.73c-7.95-9-9.87-21.16-9.95-21.67a2.18,2.18,0,1,1,4.3-.66h0c0,.11,1.82,11.42,8.91,19.45a2.17,2.17,0,0,1-1.63,3.61Z"/><path class="cls-2" d="M523.49,18.28h-6.17a1.37,1.37,0,0,1,0-2.73h6.17a1.37,1.37,0,1,1,0,2.73Z"/><path class="cls-2" d="M566.78,55.61H485.61a51.89,51.89,0,0,1-37.49-16.16A54.5,54.5,0,0,1,432.61,1.36,1.36,1.36,0,0,1,434,0H470a41.13,41.13,0,0,1,32.32,15.55h9a1.37,1.37,0,0,1,0,2.73h-9.69a1.32,1.32,0,0,1-1.07-.53A38.4,38.4,0,0,0,470,2.73H435.35a51.86,51.86,0,0,0,14.72,34.82,49.19,49.19,0,0,0,35.54,15.33h79.78c-.72-18.89-16.32-34.6-34.7-34.6h-1.44a1.37,1.37,0,1,1,0-2.73h1.44c20.3,0,37.45,17.72,37.45,38.7A1.36,1.36,0,0,1,566.78,55.61Z"/><path class="cls-34" d="M217,257.27h88.39a0,0,0,0,1,0,0v24.27a0,0,0,0,1,0,0H227.6A10.63,10.63,0,0,1,217,270.91V257.27A0,0,0,0,1,217,257.27Z"/><rect class="cls-5" x="216.97" y="180.49" width="139.42" height="92.63" rx="7.36"/><path class="cls-46" d="M356.39,253.49v9.11a9.7,9.7,0,0,1-9.69,9.7h-120a9.7,9.7,0,0,1-9.69-9.7v-9.11a9.69,9.69,0,0,0,9.69,9.69h120A9.69,9.69,0,0,0,356.39,253.49Z"/><line class="cls-5" x1="216.97" y1="195.71" x2="350.96" y2="195.71"/><path class="cls-2" d="M348.89,274.35H224.47a8.75,8.75,0,0,1-8.74-8.73V188a8.75,8.75,0,0,1,8.74-8.73H348.89a8.75,8.75,0,0,1,8.74,8.73v77.64A8.75,8.75,0,0,1,348.89,274.35ZM224.47,181.73a6.26,6.26,0,0,0-6.26,6.25v77.64a6.27,6.27,0,0,0,6.26,6.26H348.89a6.27,6.27,0,0,0,6.26-6.26V188a6.26,6.26,0,0,0-6.26-6.25Z"/><path class="cls-2" d="M344.75,196.64H217a.93.93,0,1,1,0-1.86H344.75a.93.93,0,1,1,0,1.86Z"/><circle class="cls-47" cx="228.01" cy="188.79" r="2.28"/><circle class="cls-48" cx="236.44" cy="188.72" r="2.28"/><circle class="cls-49" cx="244.86" cy="188.64" r="2.28"/><path class="cls-2" d="M227.65,191.49h-.31a2.82,2.82,0,0,1-2.48-3.1,2.73,2.73,0,0,1,1-1.88,2.8,2.8,0,1,1,1.75,5Zm0-4.56a1.77,1.77,0,0,0-1.75,1.56,1.76,1.76,0,1,0,1.95-1.55Z"/><path class="cls-2" d="M236.08,191.42h-.32a2.81,2.81,0,0,1,.63-5.58,2.8,2.8,0,0,1,2.47,3.1A2.81,2.81,0,0,1,236.08,191.42Zm0-4.56a1.76,1.76,0,1,0,1.75,1.95,1.77,1.77,0,0,0-.37-1.29,1.74,1.74,0,0,0-1.18-.65h-.2Z"/><path class="cls-2" d="M244.5,191.35a1.62,1.62,0,0,1-.31,0,2.76,2.76,0,0,1-1.88-1,2.81,2.81,0,0,1-.6-2.07,2.77,2.77,0,0,1,1-1.88,2.82,2.82,0,0,1,2.06-.59,2.82,2.82,0,0,1,2.48,3.1,2.86,2.86,0,0,1-1,1.88A2.78,2.78,0,0,1,244.5,191.35Zm0-4.56a1.75,1.75,0,0,0-1.74,1.56,1.77,1.77,0,0,0,1.55,1.94,1.75,1.75,0,0,0,1.29-.37,1.76,1.76,0,0,0-.9-3.12Z"/><line class="cls-50" x1="264.05" y1="229.89" x2="264.06" y2="223.98"/><path class="cls-2" d="M273.69,217.59a.71.71,0,0,1,0-1.42l54-.48h0a.71.71,0,0,1,.71.7.72.72,0,0,1-.71.72l-54,.48Z"/><path class="cls-2" d="M273.69,222.38a.72.72,0,0,1-.71-.7.7.7,0,0,1,.7-.71l38.51-.48h0a.71.71,0,1,1,0,1.41l-38.51.48Z"/><path class="cls-2" d="M273.69,227.18a.71.71,0,0,1,0-1.42l21.11-.48a.73.73,0,0,1,.72.7.7.7,0,0,1-.69.72l-21.11.48Z"/><path class="cls-2" d="M273.69,235.35a.71.71,0,0,1,0-1.42l54-.48h0a.71.71,0,0,1,.71.7.72.72,0,0,1-.71.72l-54,.48Z"/><path class="cls-2" d="M273.69,240.14a.72.72,0,0,1-.71-.7.7.7,0,0,1,.7-.71l38.51-.48h0a.71.71,0,1,1,0,1.41l-38.51.48Z"/><path class="cls-2" d="M273.69,244.94a.71.71,0,0,1,0-1.42l21.11-.48a.73.73,0,0,1,.72.7.7.7,0,0,1-.69.72l-21.11.48Z"/><rect class="cls-51" x="257.48" y="212.17" width="8.09" height="1.55" rx="0.77" transform="translate(17.78 446.02) rotate(-82.87)"/><rect class="cls-51" x="260.13" y="216.69" width="8.09" height="1.55" rx="0.77" transform="translate(15.61 452.61) rotate(-82.87)"/><rect class="cls-51" x="255.62" y="241.14" width="4.64" height="0.89" rx="0.44" transform="translate(-13.78 467.56) rotate(-82.87)"/><line class="cls-50" x1="267.43" y1="233.8" x2="267.44" y2="227.89"/><path class="cls-52" d="M267.46,221.23l0-8.57a4.25,4.25,0,0,0-4.23-4.27h0l-29.82-.06a4.26,4.26,0,0,0-4.28,4.23v0l-.07,36.07a4.26,4.26,0,0,0,4.23,4.28h0l29.82.06a4.26,4.26,0,0,0,4.28-4.23v-7.59"/><path class="cls-53" d="M230.14,229.91a.94.94,0,0,1-.95-.92l-.11-16.73c-.07-4.25,3.15-4.42,7.4-4.5a.94.94,0,1,1,.27,1.87h-.23a5.85,5.85,0,0,0-5.72,6l.26,13.36A1,1,0,0,1,230.14,229.91Z"/><ellipse class="cls-53" cx="231.23" cy="226.12" rx="1.13" ry="1.42" transform="translate(-4.31 4.49) rotate(-1.1)"/><circle class="cls-53" cx="232.51" cy="224.11" r="0.3"/><circle class="cls-54" cx="232.1" cy="228.38" r="0.36"/><circle class="cls-53" cx="233.33" cy="226.37" r="0.56"/><circle class="cls-53" cx="231" cy="219.97" r="0.53"/><circle class="cls-53" cx="231.44" cy="222.62" r="0.15"/><circle class="cls-53" cx="232.51" cy="217.27" r="0.47"/><circle class="cls-53" cx="232.33" cy="214.58" r="0.3"/><circle class="cls-53" cx="232.76" cy="211.34" r="0.79"/><path class="cls-2" d="M262.79,253.07h0L232.94,253a5,5,0,0,1-3.57-1.49,5,5,0,0,1-1.44-3.55l.07-36.08a5,5,0,0,1,5-5h0l29.83.06a5,5,0,0,1,5,5v8.57h0l-.06,27.54a5,5,0,0,1-1.49,3.56A4.94,4.94,0,0,1,262.79,253.07ZM233,208.39a3.5,3.5,0,0,0-3.49,3.47L229.45,248a3.47,3.47,0,0,0,3.47,3.51l29.85.06a3.53,3.53,0,0,0,2.48-1,3.44,3.44,0,0,0,1-2.46l.08-36.13a3.51,3.51,0,0,0-3.49-3.5L233,208.39Zm34.09,12.13h0Z"/><path class="cls-55" d="M262.75,236h0a1.19,1.19,0,0,1,1.2,1.19l.05,9.2a1.2,1.2,0,0,1-1.19,1.2h0a1.19,1.19,0,0,1-1.2-1.19l-.05-9.2A1.19,1.19,0,0,1,262.75,236Z"/><path class="cls-5" d="M231.74,226.78h0a.92.92,0,0,1,.92.92l0,7.07a.92.92,0,0,1-.91.92h0a.92.92,0,0,1-.93-.91l0-7.07A.93.93,0,0,1,231.74,226.78Z"/><path class="cls-34" d="M71.77,275.23v8.18l15.11,5.29s3.39,13,16.45,13,15.27-17.42,15.27-17.42Z"/><rect class="cls-5" x="55.12" y="233.44" width="9.07" height="72.78" transform="translate(-215.16 240.76) rotate(-71.49)"/><path class="cls-2" d="M92.73,286.79a1,1,0,0,1-.35-.06l-69-23.1a1.07,1.07,0,0,1-.63-.55,1.09,1.09,0,0,1-.06-.85l2.88-8.6a1.09,1.09,0,0,1,1.39-.69L96,276a1.1,1.1,0,0,1,.63.55,1.11,1.11,0,0,1,.06.84L93.77,286A1.09,1.09,0,0,1,92.73,286.79Zm-67.62-24.9L92,284.29l2.18-6.51-66.92-22.4Z"/><circle class="cls-5" cx="15.54" cy="255.17" r="14.43"/><path class="cls-2" d="M15.57,270.7a15.52,15.52,0,1,1,7.49-1.93A15.53,15.53,0,0,1,15.57,270.7Zm-.05-28.87a13.35,13.35,0,0,0-12.79,9.65A13.33,13.33,0,0,0,22,266.84a13.33,13.33,0,0,0-2.76-24.48A13.47,13.47,0,0,0,15.52,241.83Z"/><circle class="cls-20" cx="15.54" cy="255.17" r="7.98"/><path class="cls-2" d="M15.56,264.25a9.09,9.09,0,1,1,4.37-1.13A9,9,0,0,1,15.56,264.25Zm0-16a6.81,6.81,0,0,0-3.31.86,6.9,6.9,0,0,0-2.7,9.35,6.88,6.88,0,1,0,7.93-9.94A7,7,0,0,0,15.53,248.29Z"/><circle class="cls-34" cx="123.54" cy="210.16" r="12.18"/><rect class="cls-5" x="108.02" y="204.21" width="9.07" height="72.78" transform="translate(165.2 500.96) rotate(-166.36)"/><path class="cls-56" d="M122.67,217.83l-1.1,4.52a14.42,14.42,0,0,1-8.65-2.82l.93-3.85A14.45,14.45,0,0,0,122.67,217.83Z"/><path class="cls-2" d="M108.38,278.14a.82.82,0,0,1-.26,0L99.31,276a1.09,1.09,0,0,1-.81-1.33l17.16-70.73a1.08,1.08,0,0,1,.5-.68,1.1,1.1,0,0,1,.83-.13l8.82,2.14a1.1,1.1,0,0,1,.81,1.33l-17.17,70.72a1.11,1.11,0,0,1-1.07.85Zm-7.48-4.06,6.67,1.62,16.65-68.58-6.68-1.62Z"/><circle class="cls-5" cx="121.67" cy="203.06" r="14.43"/><path class="cls-2" d="M121.69,218.59a15.52,15.52,0,1,1,7.49-1.93A15.53,15.53,0,0,1,121.69,218.59Zm0-28.86A13.32,13.32,0,0,0,110,209.51a13.33,13.33,0,1,0,11.64-19.78Z"/><circle class="cls-20" cx="121.67" cy="203.06" r="7.98"/><path class="cls-2" d="M121.68,212.14a9.08,9.08,0,1,1,7.93-13.47h0a9.07,9.07,0,0,1-7.93,13.47Zm0-16a6.88,6.88,0,1,0,6,3.55h0A6.91,6.91,0,0,0,121.65,196.18Z"/><circle class="cls-5" cx="104.16" cy="283.21" r="14.43"/><path class="cls-2" d="M104.19,298.74a15.53,15.53,0,1,1,13.57-23.05h0a15.53,15.53,0,0,1-13.57,23.05Zm0-28.87a13.21,13.21,0,0,0-6.43,1.67,13.33,13.33,0,1,0,18.12,5.22,13.4,13.4,0,0,0-11.69-6.89Z"/><circle class="cls-20" cx="104.16" cy="283.21" r="7.98"/><path class="cls-2" d="M104.17,292.29a9.08,9.08,0,1,1,7.94-13.47h0a9.08,9.08,0,0,1-7.94,13.47Zm0-16a6.88,6.88,0,1,0,6,3.55h0a6.83,6.83,0,0,0-4.12-3.28A6.94,6.94,0,0,0,104.15,276.33Z"/><path class="cls-2" d="M520.55,311.3a1.17,1.17,0,0,1-1.17-1.17V279.48a1.17,1.17,0,0,1,2.34,0v30.65A1.17,1.17,0,0,1,520.55,311.3Z"/><path class="cls-2" d="M520.55,273.51a1.17,1.17,0,0,1-1.17-1.17v-5.8a1.17,1.17,0,0,1,2.34,0v5.8A1.17,1.17,0,0,1,520.55,273.51Z"/><path class="cls-57" d="M538.86,152.62c0,19.29-14.61,34.93-32.68,35h-1.33c-17.68-.07-32.1-15.12-32.65-34l-.31-14.83c1.42-5.57,5.44-6.1,10.47-7.16h46c5,1.05,9.05.09,10.48,5.7Z"/><path class="cls-58" d="M482,139.28h47.82v10.57a23.91,23.91,0,0,1-23.91,23.91h0A23.91,23.91,0,0,1,482,149.85V139.28Z"/><path class="cls-59" d="M510.83,173.21a23.91,23.91,0,0,1-28.34-18.45,23.3,23.3,0,0,1-.52-4.92V139.28h9.93v10.56A23.9,23.9,0,0,0,510.83,173.21Z"/><rect class="cls-5" x="490.11" y="139.28" width="39.66" height="14.51"/><rect class="cls-60" x="490.11" y="139.28" width="39.66" height="6.05"/><path class="cls-61" d="M527.58,155.37v2.78c0,8.41-6.81,14-15.22,14-2.65,0-5.15,1.84-7.32.63l-.11-.92a16.81,16.81,0,0,1-.28-2.93,15.48,15.48,0,0,1,22.84-13.59Z"/><path class="cls-62" d="M515.17,172.05a15.06,15.06,0,0,1-2.76.24c-2.66,0-5.15,1.85-7.32.63L505,172a16.06,16.06,0,0,1-.28-2.93,15.65,15.65,0,0,1,.27-2.9C506.9,170.34,510.64,171,515.17,172.05Z"/><path class="cls-2" d="M505,173.25a.8.8,0,0,1-.79-.66,16.28,16.28,0,0,1,23.75-17.36.81.81,0,0,1-.77,1.42,14.67,14.67,0,0,0-21.4,15.64.79.79,0,0,1-.64.94Z"/><path class="cls-63" d="M508.67,161.49a.34.34,0,0,1-.23-.08.4.4,0,0,1-.09-.56A15,15,0,0,1,519,154.91a.4.4,0,1,1,.07.79A14.19,14.19,0,0,0,509,161.33.36.36,0,0,1,508.67,161.49Z"/><ellipse class="cls-63" cx="510.25" cy="160.57" rx="1.52" ry="0.97" transform="translate(86.51 487.04) rotate(-55.08)"/><circle class="cls-63" cx="512.9" cy="159.8" r="0.49"/><circle class="cls-63" cx="511.91" cy="162.43" r="0.49"/><path class="cls-2" d="M528.5,155.06H490.11a1.27,1.27,0,0,1-1.27-1.27V139.9a1.27,1.27,0,0,1,2.53,0v12.62H528.5a1.27,1.27,0,0,1,0,2.54Z"/><path class="cls-2" d="M506.93,174.94h-2.12a24.08,24.08,0,0,1-24.05-24v-9.42a3.41,3.41,0,0,1,3.41-3.41h43.39a3.41,3.41,0,0,1,3.41,3.4v9.41a24.05,24.05,0,0,1-24.05,24.06Zm-22.76-34.45a1,1,0,0,0-.7.29,1,1,0,0,0-.29.7v9.42a21.64,21.64,0,0,0,21.62,21.61h2.12a21.59,21.59,0,0,0,21.62-21.63v-9.4a1,1,0,0,0-1-1Z"/><path class="cls-5" d="M545.93,133.71h-2.72a2,2,0,0,1-2-1.63L533,89.3a2,2,0,0,1,2-2.39h2.72a2,2,0,0,1,2,1.63l8.26,42.78A2,2,0,0,1,545.93,133.71Z"/><path class="cls-64" d="M535,132.44h0a2,2,0,0,1-2-1.63L524.73,88a2,2,0,0,1,2-2.39h0a2,2,0,0,1,2,1.63l8.26,42.78A2,2,0,0,1,535,132.44Z"/><path class="cls-17" d="M535.58,82.54a27.59,27.59,0,1,0,27.58,27.58A27.58,27.58,0,0,0,535.58,82.54Zm0,47.7a20.13,20.13,0,1,1,20.12-20.12A20.12,20.12,0,0,1,535.58,130.24Z"/><path class="cls-21" d="M563.16,110.12c0,.53,0,1.07,0,1.6a27.58,27.58,0,0,0-55.07,0c0-.53-.06-1.07-.06-1.6a27.59,27.59,0,1,1,55.18,0Z"/><path class="cls-2" d="M535.81,138.56a28.84,28.84,0,1,1,28.84-28.84A28.87,28.87,0,0,1,535.81,138.56Zm0-55.18a26.34,26.34,0,1,0,26.33,26.34A26.37,26.37,0,0,0,535.81,83.38Z"/><path class="cls-2" d="M535.81,131.09a21.38,21.38,0,1,1,21.37-21.37A21.4,21.4,0,0,1,535.81,131.09Zm0-40.24a18.87,18.87,0,1,0,18.87,18.87A18.88,18.88,0,0,0,535.81,90.85Z"/><path class="cls-5" d="M485.85,133.71h-2.72a2,2,0,0,1-2-1.63L472.9,89.3a2,2,0,0,1,2-2.39h2.71a2,2,0,0,1,2,1.63l8.25,42.78A2,2,0,0,1,485.85,133.71Z"/><path class="cls-64" d="M474.88,132.44h0a2,2,0,0,1-2-1.63L464.65,88a2,2,0,0,1,2-2.39h0a2,2,0,0,1,2,1.63l8.25,42.78A2,2,0,0,1,474.88,132.44Z"/><path class="cls-17" d="M475.49,82.54a27.59,27.59,0,1,0,27.59,27.58A27.58,27.58,0,0,0,475.49,82.54Zm0,47.7a20.13,20.13,0,1,1,20.12-20.12A20.12,20.12,0,0,1,475.49,130.24Z"/><path class="cls-21" d="M503.08,110.12c0,.53,0,1.07-.06,1.6a27.58,27.58,0,0,0-55.06,0c0-.53-.06-1.07-.06-1.6a27.59,27.59,0,1,1,55.18,0Z"/><path class="cls-2" d="M475.72,138.56a28.84,28.84,0,1,1,28.84-28.84A28.88,28.88,0,0,1,475.72,138.56Zm0-55.18a26.34,26.34,0,1,0,26.34,26.34A26.37,26.37,0,0,0,475.72,83.38Z"/><path class="cls-2" d="M475.72,131.09a21.38,21.38,0,1,1,21.38-21.37A21.4,21.4,0,0,1,475.72,131.09Zm0-40.24a18.87,18.87,0,1,0,18.87,18.87A18.89,18.89,0,0,0,475.72,90.85Z"/><ellipse class="cls-5" cx="481.22" cy="176.24" rx="2.89" ry="1.66" transform="translate(162.51 577.56) rotate(-71.66)"/><circle class="cls-42" cx="486.45" cy="177.86" r="0.93"/><path class="cls-42" d="M483.61,178.8a.72.72,0,1,1,0,1.44.72.72,0,0,1,0-1.44Z"/><circle class="cls-42" cx="484.56" cy="172.87" r="0.95"/><path class="cls-2" d="M543.44,180.22a1.16,1.16,0,0,1-.87-.39L538,174.78a1.17,1.17,0,0,1,1.74-1.56l4.53,5.05a1.17,1.17,0,0,1-.09,1.65A1.19,1.19,0,0,1,543.44,180.22Z"/><path class="cls-2" d="M556,166.12a1.16,1.16,0,0,1-.87-.39l-4.53-5a1.17,1.17,0,0,1,1.74-1.56l4.53,5a1.17,1.17,0,0,1-.09,1.65A1.16,1.16,0,0,1,556,166.12Z"/><path class="cls-2" d="M525.26,189.2a1.17,1.17,0,0,1-1.1-.78L521.9,182a1.17,1.17,0,1,1,2.2-.77l2.26,6.39a1.16,1.16,0,0,1-.71,1.49A1.07,1.07,0,0,1,525.26,189.2Z"/><path class="cls-2" d="M533.49,187.45a1.17,1.17,0,0,1-1.1-.78l-1.46-4.14a1.17,1.17,0,0,1,2.21-.77l1.46,4.13a1.17,1.17,0,0,1-.72,1.49A1.07,1.07,0,0,1,533.49,187.45Z"/><path class="cls-2" d="M534.13,169.55a1.15,1.15,0,0,1-1-.62l-1.66-3.08a1.17,1.17,0,1,1,2-1.11l1.66,3.09a1.16,1.16,0,0,1-.47,1.58A1.25,1.25,0,0,1,534.13,169.55Z"/><path class="cls-2" d="M545.37,166.94a1.16,1.16,0,0,1-1-.48l-2.08-2.89a1.17,1.17,0,0,1,1.89-1.37l2.09,2.9a1.17,1.17,0,0,1-.27,1.62A1.15,1.15,0,0,1,545.37,166.94Z"/><path class="cls-2" d="M467.31,180.22a1.19,1.19,0,0,1-.78-.3,1.17,1.17,0,0,1-.09-1.65l4.53-5.05a1.17,1.17,0,1,1,1.74,1.56l-4.53,5.05A1.16,1.16,0,0,1,467.31,180.22Z"/><path class="cls-2" d="M454.75,166.12a1.16,1.16,0,0,1-.78-.3,1.17,1.17,0,0,1-.09-1.65l4.53-5a1.17,1.17,0,1,1,1.74,1.56l-4.53,5A1.16,1.16,0,0,1,454.75,166.12Z"/><path class="cls-2" d="M485.49,189.2a1.07,1.07,0,0,1-.39-.07,1.16,1.16,0,0,1-.71-1.49l2.26-6.39a1.17,1.17,0,1,1,2.2.77l-2.26,6.4A1.17,1.17,0,0,1,485.49,189.2Z"/><path class="cls-2" d="M477.26,187.45a1,1,0,0,1-.39-.07,1.17,1.17,0,0,1-.72-1.49l1.46-4.13a1.17,1.17,0,0,1,2.21.77l-1.46,4.14A1.17,1.17,0,0,1,477.26,187.45Z"/><path class="cls-2" d="M476.62,169.55a1.25,1.25,0,0,1-.55-.14,1.16,1.16,0,0,1-.47-1.58l1.66-3.09a1.17,1.17,0,1,1,2.05,1.11l-1.66,3.08A1.15,1.15,0,0,1,476.62,169.55Z"/><path class="cls-2" d="M465.38,166.94a1.15,1.15,0,0,1-.68-.22,1.17,1.17,0,0,1-.27-1.62l2.08-2.9a1.17,1.17,0,0,1,1.9,1.37l-2.08,2.89A1.16,1.16,0,0,1,465.38,166.94Z"/><path class="cls-2" d="M473.22,156.66a1.17,1.17,0,0,1-1-1.72l1.66-3.09a1.17,1.17,0,0,1,2.06,1.11l-1.66,3.09A1.16,1.16,0,0,1,473.22,156.66Z"/><path class="cls-2" d="M462,154.06a1.2,1.2,0,0,1-.68-.22,1.16,1.16,0,0,1-.27-1.63l2.08-2.89a1.16,1.16,0,0,1,1.63-.27,1.18,1.18,0,0,1,.27,1.63l-2.08,2.89A1.17,1.17,0,0,1,462,154.06Z"/><path class="cls-2" d="M542.11,155.08a1.16,1.16,0,0,1-1-.61l-1.66-3.09a1.17,1.17,0,1,1,2.05-1.11l1.67,3.09a1.17,1.17,0,0,1-1,1.72Z"/><path class="cls-2" d="M553.35,152.48a1.17,1.17,0,0,1-1-.49l-2.08-2.89a1.17,1.17,0,1,1,1.9-1.36l2.08,2.89a1.17,1.17,0,0,1-.27,1.63A1.13,1.13,0,0,1,553.35,152.48Z"/><circle class="cls-1" cx="638.68" cy="220.25" r="8.47"/><path class="cls-5" d="M647.15,220.25a8.47,8.47,0,0,1-16.94,0c0-4.68,3.79,1.05,8.47,1.05S647.15,215.57,647.15,220.25Z"/><path class="cls-2" d="M638.68,229.93a9.69,9.69,0,1,1,9.69-9.68A9.69,9.69,0,0,1,638.68,229.93Zm0-16.93a7.25,7.25,0,1,0,7.25,7.25A7.26,7.26,0,0,0,638.68,213Z"/><circle class="cls-1" cx="598.1" cy="220.25" r="8.47"/><path class="cls-5" d="M606.57,220.25a8.47,8.47,0,0,1-16.94,0c0-4.68,3.79,1.05,8.47,1.05S606.57,215.57,606.57,220.25Z"/><path class="cls-2" d="M598.1,229.93a9.69,9.69,0,1,1,9.68-9.68A9.7,9.7,0,0,1,598.1,229.93Zm0-16.93a7.25,7.25,0,1,0,7.25,7.25A7.26,7.26,0,0,0,598.1,213Z"/></g></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/svg/login-bg-dark.svg b/apps/grid-admin/src/assets/svg/login-bg-dark.svg
new file mode 100644
index 00000000..888da7af
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/login-bg-dark.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1080" viewBox="0 0 6395 1080">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_73" data-name="Rectangle 73" width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.631" y1="0.5" x2="0.958" y2="0.488" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2e364a"/>
+      <stop offset="1" stop-color="#2c344a"/>
+    </linearGradient>
+  </defs>
+  <g id="Web_1920_1" data-name="Web 1920 – 1" clip-path="url(#clip-Web_1920_1)">
+    <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
+      <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
+        <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383)" fill="#2d3750"/>
+        <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022h5599.8V0h759.7s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/apps/grid-admin/src/assets/svg/login-bg.svg b/apps/grid-admin/src/assets/svg/login-bg.svg
new file mode 100644
index 00000000..7b66bafc
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/login-bg.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1079" viewBox="0 0 6395 1079">
+  <defs>
+    <clipPath id="clip-path">
+      <rect  width="6395" height="1079" transform="translate(-5391)" fill="#fff"/>
+    </clipPath>
+    <linearGradient id="linear-gradient" x1="0.747" y1="0.222" x2="0.973" y2="0.807" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#2c41b4"/>
+      <stop offset="1" stop-color="#1b4fab"/>
+    </linearGradient>
+  </defs>
+  <g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)">
+    <g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)">
+      <path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383 0)" fill="#f1f5f8"/>
+      <path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022H-2631.1V0H-1871.4s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/>
+    </g>
+  </g>
+</svg>
diff --git a/apps/grid-admin/src/assets/svg/login-box-bg.svg b/apps/grid-admin/src/assets/svg/login-box-bg.svg
new file mode 100644
index 00000000..ee7dbdc2
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/login-box-bg.svg
@@ -0,0 +1 @@
+<svg id="a622e68e-7a65-46e9-94a9-d455de519afc" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="971.44" height="502" viewBox="0 0 971.44 502"><defs><linearGradient id="341b0e5e-a21f-44db-b85f-76180f33f0d3" x1="599.5" y1="668.05" x2="599.5" y2="199" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient><linearGradient id="9c19d1ba-0c1d-4cca-8c15-e6f3831a5e67" x1="485.72" y1="258.88" x2="485.72" y2="71.12" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/><linearGradient id="fe76f7c7-2126-4e48-920d-21143a22d340" x1="132" y1="515" x2="303" y2="515" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/><linearGradient id="2cf89a04-5a05-413b-983a-d2bc296cbb5e" x1="933" y1="568.28" x2="1031" y2="568.28" xlink:href="#341b0e5e-a21f-44db-b85f-76180f33f0d3"/></defs><title>responsive</title><g opacity="0.7"><path d="M852.69,199H346.31A16.37,16.37,0,0,0,330,215.42V563.94a16.37,16.37,0,0,0,16.31,16.42H520.47v60.16h-7.94a8.3,8.3,0,0,0-8.27,8.33v12.07h16.21v7.14H678.53v-7.14h16.21V648.85a8.3,8.3,0,0,0-8.27-8.33H679V640h-.51V580.36H852.69A16.37,16.37,0,0,0,869,563.94V215.42A16.37,16.37,0,0,0,852.69,199Z" transform="translate(-114.28 -199)" fill="url(#341b0e5e-a21f-44db-b85f-76180f33f0d3)"/></g><rect x="407.72" y="371" width="156" height="92" fill="#bdbdbd"/><g opacity="0.1"><path d="M525.07,579H675.24c1.81-7.87,3.26-13,3.26-13h-157S523.11,571.11,525.07,579Z" transform="translate(-114.28 -199)"/></g><path d="M235.82,3h499.8a16.1,16.1,0,0,1,16.1,16.1V327a0,0,0,0,1,0,0h-532a0,0,0,0,1,0,0V19.1A16.1,16.1,0,0,1,235.82,3Z" fill="#535461"/><path d="M849.9,576H350.1A16.1,16.1,0,0,1,334,559.9V526H866v33.9A16.1,16.1,0,0,1,849.9,576Z" transform="translate(-114.28 -199)" fill="#bdbdbd"/><circle cx="485.72" cy="352" r="9" fill="#535461"/><path d="M399.89,436H571.55a8.17,8.17,0,0,1,8.17,8.17V456a0,0,0,0,1,0,0h-188a0,0,0,0,1,0,0V444.17A8.17,8.17,0,0,1,399.89,436Z" fill="#bdbdbd"/><g opacity="0.5"><rect x="320.72" y="71.12" width="330" height="187.76" rx="4.5" ry="4.5" fill="url(#9c19d1ba-0c1d-4cca-8c15-e6f3831a5e67)"/></g><rect x="324.95" y="72.5" width="321.54" height="183.96" rx="4.5" ry="4.5" fill="#fff"/><g opacity="0.5"><rect x="414.52" y="98.91" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="98.91" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="109.55" width="79.54" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><g opacity="0.5"><rect x="414.52" y="148.53" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="148.53" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="159.16" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><g opacity="0.5"><rect x="414.52" y="198.15" width="35.44" height="31.9" rx="4.5" ry="4.5" fill="#0960bd"/></g><rect x="460.59" y="198.15" width="95.69" height="3.54" rx="1.77" ry="1.77" fill="#e0e0e0"/><rect x="460.59" y="208.78" width="96.33" height="3.54" rx="1.59" ry="1.59" fill="#e0e0e0"/><line x1="485.72" y1="42" x2="485.72" y2="20" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="79" x2="485.72" y2="50.13" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="79" r="4" fill="#0960bd"/><circle cx="485.72" cy="46" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><line x1="485.72" y1="42" x2="485.72" y2="20" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="79" x2="485.72" y2="50.13" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="79" r="4" fill="#0960bd"/><circle cx="485.72" cy="46" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><line x1="485.72" y1="279" x2="485.72" y2="310" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="485.72" y1="251" x2="485.72" y2="279.87" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="485.72" cy="251" r="4" fill="#0960bd"/><line x1="305.72" y1="168.5" x2="274.22" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="333.22" y1="168.5" x2="304.35" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="333.22" cy="168.5" r="4" fill="#0960bd"/><g opacity="0.1"><rect x="408.22" y="435.5" width="156" height="3"/></g><g opacity="0.7"><path d="M293.48,566.06H221.08l1-8.14c20.46-18.37,33.69-67.31,33.69-67.31a6.78,6.78,0,0,0-.87.18c-12,2.42-20.54,7.35-26.51,13.28l2.54-21.66c37.8-8.14,52.79-58.14,52.79-58.14-24.12,5.35-39.16,13.63-48.5,21.49l3.72-31.82c25.56,8.77,52-37.82,52-37.82l-1-.21.5-.32-.76.27c-28.25-6.09-43.35,10.06-48.25,16.77l.37-3.12q-1.12,3-2.18,5.88h0l0,.08q-3,8.13-5.49,16.06l0,0h0q-2.17,6.77-4.06,13.4l0-.06s-1.17-28.46-31.18-35.95c0,0,3.15,62.07,26.93,51.91h0c-2.2,9-4,17.66-5.56,26.07h0q-1.49,8.21-2.6,16l-.14.16.14-.12-.06.41v0h0q-1,7.07-1.7,13.78c.46-8.62-1.11-33.52-30.45-56.92,0,0-39,68.54,27.5,82,.15.13.3.26.44.38l-.1-.31.6.13.27-3.52a369.39,369.39,0,0,0,.23,44.1h0c.07,1,.14,2,.21,2.95H141.37c-27.94,57.79,15.52,89.46,15.52,89.46h120C323.49,596.66,293.48,566.06,293.48,566.06Zm-78-65.68h0v0Z" transform="translate(-114.28 -199)" fill="url(#fe76f7c7-2126-4e48-920d-21143a22d340)"/></g><path d="M217,588s-19-83,23-190" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="3" opacity="0.6"/><path d="M143,563H290s29,37-16,92H158S116,617,143,563Z" transform="translate(-114.28 -199)" fill="#0960bd"/><path d="M237.89,403.5s14.61-26,49.61-18c0,0-28.93,49.26-55,33.13Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M228.63,431.09S227.5,404.5,198.5,397.5c0,0,3,58,26,48.5Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M219.15,470.36s5.35-27.86,61.35-39.86c0,0-17.86,57.62-63.93,55.31Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M214.61,501.63s5.89-29.13-29.11-56.13c0,0-38,64.67,27.48,76.83Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M213.56,541.67S209.5,500.5,253.5,492.5c0,0-16.07,57.49-40,67.74Z" transform="translate(-114.28 -199)" fill="#4db6ac"/><path d="M233,419s38-29,54-34" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M216.5,485.5s46-49,64-55" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M198.5,397.5s28,38,26,48" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M185.5,445.5s15,68,27,77" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><path d="M213.5,560.5s24-66,40-68" transform="translate(-114.28 -199)" fill="none" stroke="#535461" stroke-miterlimit="10" opacity="0.3"/><g opacity="0.1"><path d="M290,563H143c-.33.67-.65,1.34-1,2H285s28.29,36.11-14.4,90H274C319,600,290,563,290,563Z" transform="translate(-114.28 -199)"/></g><rect y="455.6" width="971.44" height="32.93" fill="#e0e0e0"/><rect x="41.16" y="488.53" width="889.11" height="13.47" fill="#e0e0e0"/><rect x="41.16" y="488.53" width="889.11" height="4.49" opacity="0.1"/><line x1="690.22" y1="168.5" x2="696.22" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><line x1="637.22" y1="168.5" x2="682.1" y2="168.5" stroke="#0960bd" stroke-miterlimit="10" stroke-width="2"/><circle cx="637.22" cy="168.5" r="4" fill="#0960bd"/><circle cx="686.22" cy="168.5" r="4" fill="none" stroke="#fff" stroke-miterlimit="10"/><g opacity="0.7"><path d="M1027,643.88l.1-.15q.31-.48.61-1l.11-.19q.29-.49.55-1l.09-.17c.2-.39.39-.78.56-1.19h0a23.79,23.79,0,0,0,.94-2.51l.1-.33c.09-.31.18-.62.26-.93l.1-.44q.1-.42.18-.85c0-.16.06-.32.09-.48s.09-.56.13-.85,0-.33.06-.49.06-.61.08-.92c0-.14,0-.29,0-.43,0-.45,0-.91,0-1.36V548h-13.85V507.52h-17V548H988.39V489.86h-17V548H965V481.55h-17V548H933V630.6c0,13.48,11.21,24.4,25,24.4H1006a25.19,25.19,0,0,0,20.24-10.06l0,0Q1026.61,644.41,1027,643.88Z" transform="translate(-114.28 -199)" fill="url(#2cf89a04-5a05-413b-983a-d2bc296cbb5e)"/></g><rect x="835.72" y="321" width="16" height="100" fill="#535461"/><rect x="835.72" y="288" width="16" height="33" fill="#3ad29f"/><rect x="857.72" y="329" width="16" height="100" fill="#535461"/><rect x="857.72" y="296" width="16" height="33" fill="#4d8af0"/><rect x="884.72" y="346" width="16" height="100" fill="#535461"/><rect x="884.72" y="313" width="16" height="33" fill="#f55f44"/><path d="M821.72,352h92a0,0,0,0,1,0,0v79.5a23.5,23.5,0,0,1-23.5,23.5h-45a23.5,23.5,0,0,1-23.5-23.5V352A0,0,0,0,1,821.72,352Z" fill="#0960bd"/><g opacity="0.1"><path d="M936,551v4h88v79.5a23.39,23.39,0,0,1-5,14.49,23.45,23.45,0,0,0,9-18.49V551Z" transform="translate(-114.28 -199)"/></g></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/svg/net-error.svg b/apps/grid-admin/src/assets/svg/net-error.svg
new file mode 100644
index 00000000..81f20044
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/net-error.svg
@@ -0,0 +1 @@
+<svg id="ac370e99-250f-4203-ae2c-c306a69114f3" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1144" height="697.99" viewBox="0 0 1144 697.99"><defs><linearGradient id="b5f20e7f-16f1-44c3-85ac-2c33fb8e67f8" x1="2612.03" y1="795.18" x2="2612.03" y2="399.52" gradientTransform="matrix(-1, 0, 0, 1, 3436, 0)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>personal settings</title><path d="M1172,516.31a180.56,180.56,0,0,1-26.12,93.88c0,34.62-16.14,66-42.32,88.87a144.74,144.74,0,0,1-21.08,15.28c-.3.19-.61.37-.92.55-.56.33-1.12.66-1.69,1l-.53.31h0A164.61,164.61,0,0,1,998.24,737H245.17q-9,0-17.84-.72a211.15,211.15,0,0,1-61.06-14.14q-5.72-2.26-11.22-4.86-2.62-1.23-5.19-2.53c-1.07-.54-2.14-1.1-3.2-1.66A187.42,187.42,0,0,1,112.2,689.7c-34-29.23-55.08-69.61-55.08-114.21A180.5,180.5,0,0,1,28,476.82c0-99.14,79.24-179.51,177-179.51,3,0,6,.09,9,.25.43,0,.85,0,1.28.06,16.48-28.09,38.51-53.9,65-76.62,72.24-61.9,177.82-100.92,295.43-100.92,98.82,0,189.15,27.55,258.34,73.07A174.18,174.18,0,0,1,920,170.6c97.74,0,177,80.37,177,179.51a184.9,184.9,0,0,1-1,18.78A180,180,0,0,1,1172,516.31Z" transform="translate(-28 -101)" fill="#0960bd" opacity="0.1"/><g opacity="0.2"><path d="M166.37,720.79c0,.46-.05.91-.1,1.35q-5.72-2.26-11.22-4.86a9.1,9.1,0,0,1-5.19-2.53c-1.07-.54-2.14-1.1-3.2-1.66a13.68,13.68,0,0,1,.81-1.46c2.06-3.26,5.19-5.3,8.64-5.19s6.44,2.34,8.29,5.71A16.87,16.87,0,0,1,166.37,720.79Z" transform="translate(-28 -101)" fill="#3f3d56"/><path d="M166.91,703.67a16.88,16.88,0,0,1-2.51,8.48c-2.06,3.25-5.19,5.29-8.64,5.18l-.71-.05a9.1,9.1,0,0,1-5.19-2.53,12.53,12.53,0,0,1-2.39-3.12,17.55,17.55,0,0,1,.54-17.12c2.06-3.26,5.19-5.3,8.64-5.19s6.44,2.34,8.29,5.71A16.87,16.87,0,0,1,166.91,703.67Z" transform="translate(-28 -101)" fill="#3f3d56"/><ellipse cx="156.75" cy="686.21" rx="14.01" ry="10.7" transform="translate(-562.06 720.24) rotate(-88.19)" fill="#3f3d56"/><ellipse cx="157.29" cy="669.09" rx="14.01" ry="10.7" transform="translate(-544.43 704.2) rotate(-88.19)" fill="#3f3d56"/><ellipse cx="157.83" cy="651.97" rx="14.01" ry="10.7" transform="matrix(0.03, -1, 1, 0.03, -526.79, 688.16)" fill="#3f3d56"/><path d="M121.47,533.55a49.66,49.66,0,0,1-3.8-6l28.26-3.73-30.42-.73a51.38,51.38,0,0,1,.31-40.64l40.12,22.45-36.75-28.85a51.28,51.28,0,1,1,82.84,60,51.12,51.12,0,0,1,5.55,9.53l-37.09,17.81,39.33-11.83A51.34,51.34,0,0,1,200,599.47a51.28,51.28,0,1,1-80.56-2.54,51.28,51.28,0,0,1,2-63.38Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M212,568.13a51.06,51.06,0,0,1-12,31.34,51.28,51.28,0,1,1-80.56-2.54C112.87,588,212.18,562.37,212,568.13Z" transform="translate(-28 -101)" opacity="0.1"/></g><path d="M986,239.41V718.59A18.41,18.41,0,0,1,967.59,737H232.41a18.13,18.13,0,0,1-5.08-.72A18.38,18.38,0,0,1,214,718.59V504.75c0-1.09,0-2.17,0-3.25V297.56c.43,0,.85,0,1.28.06,16.48-28.09,38.51-53.9,65-76.62H967.59A18.41,18.41,0,0,1,986,239.41Z" transform="translate(-28 -101)" fill="#fff"/><rect x="712.17" y="182.23" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="188.24" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="189.55" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="200.21" r="6.66" fill="#fff"/><rect x="712.17" y="419.28" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="425.29" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="426.6" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="437.26" r="6.66" fill="#fff"/><rect x="712.17" y="537.8" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="543.82" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><rect x="794.73" y="545.13" width="43.28" height="21.31" rx="10.65" fill="#0960bd"/><circle cx="816.04" cy="555.78" r="6.66" fill="#fff"/><rect x="294" y="159.59" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="189.55" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="219.52" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><g opacity="0.5"><rect x="294" y="278.11" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="308.08" width="167" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="338.04" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/></g><rect x="294" y="396.64" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="426.6" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="456.57" width="139" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="515.16" width="80.57" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="545.13" width="223.73" height="21.31" rx="10.65" fill="#0960bd"/><rect x="294" y="575.09" width="180" height="21.31" rx="10.65" fill="#0960bd"/><line x1="260" y1="259.99" x2="912" y2="259.99" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="380.49" x2="912" y2="380.49" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="500.99" x2="912" y2="500.99" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><line x1="260" y1="624.49" x2="912" y2="624.49" fill="none" stroke="#3f3d56" stroke-linecap="round" stroke-miterlimit="10" opacity="0.7"/><ellipse cx="795" cy="687.49" rx="147.68" ry="10.5" fill="#0960bd" opacity="0.1"/><circle cx="70.52" cy="141.18" r="21.63" fill="#0960bd" opacity="0.1"/><circle cx="160.67" cy="21.63" r="21.63" fill="#0960bd" opacity="0.1"/><circle cx="153.34" cy="103.76" r="36.25" fill="#0960bd" opacity="0.1"/><rect x="712.17" y="300.75" width="137.83" height="35.96" rx="17.98" fill="#3f3d56"/><rect x="721.15" y="306.77" width="119.86" height="23.93" rx="11.97" opacity="0.1"/><path d="M753.17,762c1.57-.23,3.14-.55,4.68-.91a14.62,14.62,0,0,1-1.32,4.44c-1.53,2.9-4.52,4.65-7.27,6.43a2.25,2.25,0,0,0-2.84-.19c-3.31,2-5.95,4.82-9.46,6.54-1.23.6-2.51,1.08-3.71,1.75a20,20,0,0,0-7,7.23c-1,1.55-1.81,3.59-.83,5.13a4.44,4.44,0,0,0,1.42,1.27,8.08,8.08,0,0,0,4.87,1.45c1-.09,2-.47,3.09-.64,1.37-.24,2.77-.12,4.15-.24a24.26,24.26,0,0,0,5.84-1.51l6.87-2.4a39.68,39.68,0,0,0,5.65-2.32c1.09-.59,2.12-1.28,3.23-1.82a26,26,0,0,1,3.86-1.36l3.9-1.14a3.8,3.8,0,0,1,1.76-.23c.54.1,1,.44,1.55.58a4.68,4.68,0,0,0,2.5-.24l4.52-1.28a8.52,8.52,0,0,0,2.69-1.12c2.07-1.47,2.44-4.39,2.43-6.94A52.57,52.57,0,0,0,782.45,763a3.57,3.57,0,0,0-1.47,1.11,21.44,21.44,0,0,0-1.49-1.87,22.31,22.31,0,0,1-4.51-8.33,14.66,14.66,0,0,0,4-4.52c-2.39-9.11-4.84-18.36-9.7-26.4-1.59-2.62-3.41-5.08-5-7.66-4.73-7.5-5.7-17-11.11-24a4.16,4.16,0,0,1,0-4.88c.62-.82,1.62-1.59,1.43-2.61-.14-.73-.9-1.4-.61-2.08.14-.33.48-.51.74-.75.92-.86.8-2.31.89-3.57.2-3.18,2.09-6,3.91-8.56a5.26,5.26,0,0,1,1.44-1.56c.49-.3,1.07-.44,1.56-.74,1.72-1.09,1.6-3.62,2.42-5.5,1.08-2.48,3.8-3.73,5.58-5.74,2.27-2.56,2.85-6.12,5.24-8.35a6.13,6.13,0,0,1,.79-.64A40.24,40.24,0,0,0,775.15,658c-.23,13.53,3.13,27.53,1.56,41-1.24,10.66,5.27,21.29,14.5,26.62a69.31,69.31,0,0,0,11.29,4.79c5.78,2.07,11.54,4.2,17.21,6.58q6,2.52,11.84,5.41a147.35,147.35,0,0,1,14,7.81c5.56,3.57,11.13,7.19,15.08,12.52a11.94,11.94,0,0,0,6.66-2.45c1.52,1.2,3.36,2.11,4.79,3.44a14.46,14.46,0,0,1,3.8,7.46l-.6,0c.07,1.33.13,2.66.2,4a1.7,1.7,0,0,1-.15,1,1.81,1.81,0,0,1-.54.49l-3.08,2.09c-2.24,1.51-4.71,3.42-4.83,6.13a3.12,3.12,0,0,0,.67,2.19,4.72,4.72,0,0,0,2.74,1.24c5.36,1.13,10.85,2.23,16.28,1.5,2.58-.35,5.25-1.2,6.93-3.2,1.54-1.82,2-4.29,2.42-6.64.67-4,1.23-8.09,1.67-12.15a26.86,26.86,0,0,1,1.66-8.07,1,1,0,0,1,.43-.54c.23-.1.5,0,.74-.1s.4-.47.48-.77a47.71,47.71,0,0,0,1.43-12.08,8.14,8.14,0,0,0-.47-3.11,6.28,6.28,0,0,0-4.28-3.3,34.09,34.09,0,0,0-5.53-.66,27.46,27.46,0,0,1-4.59-.84,4.2,4.2,0,0,0-1.91-.25,1.34,1.34,0,0,0-1.16,1.33,1.71,1.71,0,0,0,.24.65l-1.56-.31c-1.26-.23-3-.78-4.89-1.24q0-.48.06-1a1.89,1.89,0,0,0-1.06-1.72l-26.42-14.12-4.94-2.64c-10.82-5.79-22-11.14-32.85-16.93-.72.22-1.32-.61-1.53-1.35s-.36-1.62-1.05-1.95c-.34-.16-.79-.15-1-.44a1.19,1.19,0,0,1-.19-.89c.35-5.27,4.12-10.13,3.37-15.35-.32-2.23-1.47-4.43-1-6.62.35-1.51,1.43-2.74,2-4.18,1.3-3.22,0-7.09,1.42-10.24a23.71,23.71,0,0,0,1.91-6.52,44.79,44.79,0,0,1,4-12.94,23.35,23.35,0,0,1,3.72-5.67c.79-.86,1.68-1.63,2.44-2.52,2.3-2.75,3.15-6.41,3.8-10,1.18-6.41,2-13.06.52-19.42-.5-2.16-1.26-4.31-1.23-6.53,0-2.66,1.07-5.71-.22-7.84a6.9,6.9,0,0,0,2.49-4.27,5.52,5.52,0,0,1,.35-1.77,5.14,5.14,0,0,1,1.67-1.5,6.91,6.91,0,0,0,2.58-6.87c1.37.62,2.81-.77,3.46-2.14s1.14-3,2.53-3.62c.94-.4,2-.16,3-.42,1.59-.41,2.56-2,3.68-3.17,2.28-2.46,5.51-3.73,8.5-5.24,8.86-4.51,16.08-11.64,23.15-18.66a78.38,78.38,0,0,0,10-11.26c.79-1.17,1.51-2.38,2.19-3.62l.18-.09.06.22c.11.44.24.88.37,1.31.32,1,.68,2.07,1,3.09,1.08,3,2.25,6.2,4.45,8.47a10.48,10.48,0,0,0,2.28,1.77,15.3,15.3,0,0,0,5.87,1.76c.78.1,1.57.16,2.36.2s1.58.07,2.36.09l16.18.43c-5.56-8.06-6-18.54-5.63-28.35.93-25.2,5.84-50.63,1.28-75.43-.55-3-1.28-6-3.11-8.41-2.4-3.15-6.34-4.67-10.18-5.56s-7.83-1.32-11.42-2.93c-3-1.37-5.76-3.57-9-4.29a19.82,19.82,0,0,0-7.2.12q-4.38.65-8.71,1.54l-.7.15H874l-.48.11-.13,0-.43.1-.16,0-.4.11-.18.05-.37.12-.21.07-.34.11-.22.09-.32.12-.24.1-.29.13-.24.12-.27.13-.24.14-.25.14-.24.16-.23.15-.24.17-.2.16-.23.2-.19.17a2.39,2.39,0,0,0-.22.23l-.17.17a3,3,0,0,0-.22.28c0,.05-.09.1-.13.16s-.18.26-.27.41l0,.06a6.09,6.09,0,0,0-.55,1.19c-.07.21-.14.42-.19.63a9.54,9.54,0,0,0-.22,1.3c0,.22,0,.45-.05.67,0,.44,0,.89,0,1.33a19.62,19.62,0,0,0,.25,2.24,24.37,24.37,0,0,0-1.16,41.23,10.94,10.94,0,0,1,.08,1.19v.26a33,33,0,0,1-.44,4.22,58.66,58.66,0,0,0-12-1.07c-2.4,0-4.82.22-7.24.41a109.13,109.13,0,0,1-7.24-9.8l-5.34-7.83a74.58,74.58,0,0,1-5-8c-1.31-2.54-2.33-5.24-3.79-7.7-3-5.07-7.9-9.38-8.51-15.25l-1.41.29c-.77-1.26-1.74-2.59-2.1-3.32a65.55,65.55,0,0,1-4.44-13c-.49-2.32-.86-4.74-2.13-6.74a15.19,15.19,0,0,0-3.11-3.3,20.57,20.57,0,0,0-6.66-4.2,8.61,8.61,0,0,0-6.81.4,10,10,0,0,0-1-.4,8.25,8.25,0,0,0-7.56.88c-2.1,1.61-3,4.37-3.32,7a17.28,17.28,0,0,0,1.78,10.62c2,3.58,5.58,6,8.54,8.84a34.59,34.59,0,0,1,5.37,6.68,73.16,73.16,0,0,1-.41,16.21c-.38,2.3-1,4.56-1.18,6.88-.73,8.38,3.63,16.76,2.07,25a6.1,6.1,0,0,0,2.83,6.47c2.24,1.21,4.86,1.37,7.32,2,4.83,1.24,9,4.33,13.88,5.48,2.25.54,4.59.64,6.83,1.24l.35.11a16.27,16.27,0,0,0-3.59,6.82c-1,4.2-.06,8.69-1.06,12.89-.82,3.46-2.88,6.48-4.91,9.41q-5.86,8.48-11.74,17a104.13,104.13,0,0,1-8.65,11.37c-5.39,5.89-14.69,10.56-17.43,17.64-.06-.17-.14-.34-.2-.51-3.88,2.85-5.33,8.16-8.42,11.85-1.51,1.79-3.37,3.24-5,4.9a56.54,56.54,0,0,0-5.53,6.87c-4.6,6.38-9.23,12.79-12.52,19.94-1.72,3.72-3.05,7.59-4.42,11.44-5.38,15.17-14.16,29.56-17.81,45.25-.89,3.83-3.22,7.29-3.57,11.21-.39,4.18,1.52,8.2,3.5,11.89,3,5.64,6.34,11.12,9,16.92,1.57,3.38,2.93,6.87,4.68,10.17,1.91,3.6,4.25,6.94,6.25,10.49C747.78,742,750.58,752.07,753.17,762Zm66.16-286.55-.48-.24A16.57,16.57,0,0,1,814,472c-4.31-4.6-6.16-11.53-7.51-17.72-.16-.74-.3-1.47-.43-2.21C811.29,459.5,816.23,467.18,819.33,475.47Z" transform="translate(-28 -101)" fill="url(#b5f20e7f-16f1-44c3-85ac-2c33fb8e67f8)"/><path d="M799.68,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2.05,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,799.68,415.4Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M799.68,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2.05,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,799.68,415.4Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M868.85,481.23a58.88,58.88,0,0,0-16.18-2c-9.11.13-18.49,2.34-27.17-.46A47.4,47.4,0,0,1,819,476a16.58,16.58,0,0,1-4.86-3.19c-4.32-4.57-6.18-11.46-7.52-17.6a117.44,117.44,0,0,1-2.05-18.73c-2.25,1.05-4.63,2.08-7.1,1.87s-5-2.11-5-4.59c.37,5.82.64,11.71-.33,17.45-.38,2.28-1,4.53-1.17,6.83-.74,8.33,3.63,16.65,2.07,24.86a6,6,0,0,0,2.83,6.42c2.24,1.21,4.87,1.36,7.33,2,4.83,1.23,9,4.3,13.9,5.45,2.25.53,4.6.63,6.84,1.23,3.19.85,6.1,2.68,9.36,3.25,2.44.44,5,.14,7.43.35,2.15.18,4.25.74,6.41.8,5.28.13,10.26-2.85,13.76-6.81S866.63,486,868.85,481.23Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M868.85,481.23a58.88,58.88,0,0,0-16.18-2c-9.11.13-18.49,2.34-27.17-.46A47.4,47.4,0,0,1,819,476a16.58,16.58,0,0,1-4.86-3.19c-4.32-4.57-6.18-11.46-7.52-17.6a117.44,117.44,0,0,1-2.05-18.73c-2.25,1.05-4.63,2.08-7.1,1.87s-5-2.11-5-4.59c.37,5.82.64,11.71-.33,17.45-.38,2.28-1,4.53-1.17,6.83-.74,8.33,3.63,16.65,2.07,24.86a6,6,0,0,0,2.83,6.42c2.24,1.21,4.87,1.36,7.33,2,4.83,1.23,9,4.3,13.9,5.45,2.25.53,4.6.63,6.84,1.23,3.19.85,6.1,2.68,9.36,3.25,2.44.44,5,.14,7.43.35,2.15.18,4.25.74,6.41.8,5.28.13,10.26-2.85,13.76-6.81S866.63,486,868.85,481.23Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M883.31,738.67a13.69,13.69,0,0,1,4.67,1.46,11,11,0,0,1,4.06,5.48c2.18,5.38,2.63,11.3,2.73,17.11.08,4.69-.08,9.49-1.76,13.87a8.83,8.83,0,0,1-2.31,3.63,8.33,8.33,0,0,1-3.18,1.54c-2.51.69-5.41.68-7.46-.92-2.28-1.78-2.85-4.93-3.33-7.78-.65-3.84-1.57-7.93-4.43-10.58-2.12-2-5.16-3-6.7-5.42-1.84-2.91-.87-6.71.3-9.95,1-2.81,2.51-8.5,5.45-9.94S880.26,738.12,883.31,738.67Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M775,752.47a22.15,22.15,0,0,0,4.58,8.51c1.3,1.5,2.93,3.32,2.25,5.18a4.82,4.82,0,0,1-1.23,1.65c-9.66,9.44-23.17,14-36.57,15.72a1.29,1.29,0,0,1-.65,0c-.39-.17-.49-.67-.53-1.1a13.51,13.51,0,0,1,0-4.21c.65-3.27,3.52-5.58,6.33-7.39s5.88-3.55,7.44-6.5c1.95-3.66,1.13-8.43,3.45-11.86,1.88-2.79,5.38-4,8.71-4.5,1.15-.18,3.6-1.44,4.58-.86S774.66,751.32,775,752.47Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M884.63,738.33a1.33,1.33,0,0,1,1.16-1.32,4.35,4.35,0,0,1,1.91.24,26.5,26.5,0,0,0,4.59.85,34.07,34.07,0,0,1,5.54.65,6.27,6.27,0,0,1,4.29,3.27,8.12,8.12,0,0,1,.47,3.1,47.06,47.06,0,0,1-1.43,12c-.08.3-.2.65-.49.76s-.5,0-.73.11a.9.9,0,0,0-.43.54,26.42,26.42,0,0,0-1.67,8c-.44,4-1,8.06-1.67,12.06-.39,2.34-.88,4.8-2.42,6.6-1.69,2-4.36,2.83-6.94,3.18-5.44.72-10.93-.37-16.3-1.49a4.77,4.77,0,0,1-2.75-1.23,3.09,3.09,0,0,1-.67-2.18c.12-2.69,2.6-4.59,4.83-6.09l3.09-2.07a1.6,1.6,0,0,0,.54-.49,1.67,1.67,0,0,0,.15-1l-.2-4a11.33,11.33,0,0,1,9.87,6.14c.42.85.83,1.84,1.71,2.17a2.26,2.26,0,0,0,2.69-1.63,6.93,6.93,0,0,0-.09-3.47c-1.81-9.67-1.38-19.61-2.48-29.38a6.63,6.63,0,0,0-1-3.1C885.73,739.88,884.74,739.23,884.63,738.33Z" transform="translate(-28 -101)" fill="#f86d70"/><rect x="752.15" y="409.08" width="43.28" height="21.31" rx="10.65" transform="translate(1519.58 738.47) rotate(180)" fill="#0960bd"/><circle cx="746.12" cy="318.73" r="6.66" fill="#fff"/><path d="M750.11,775.82c-.45.75-1.16,1.33-1.58,2.1a1.8,1.8,0,0,0,.34,2.35,2.32,2.32,0,0,0,1.43.14,48.11,48.11,0,0,0,26-11.78,18.21,18.21,0,0,0,3.19-3.49c.85-1.29,1.57-2.87,3-3.41a51.92,51.92,0,0,1,1.34,11.45c0,2.54-.36,5.43-2.43,6.9a8.63,8.63,0,0,1-2.7,1.1l-4.52,1.28a4.81,4.81,0,0,1-2.51.24c-.53-.14-1-.48-1.55-.58a3.8,3.8,0,0,0-1.76.23l-3.91,1.14a24.86,24.86,0,0,0-3.86,1.35c-1.12.53-2.15,1.21-3.24,1.8a38.78,38.78,0,0,1-5.66,2.3l-6.87,2.39a24.91,24.91,0,0,1-5.85,1.5c-1.38.12-2.79,0-4.16.23-1,.18-2,.56-3.1.64a8.11,8.11,0,0,1-4.87-1.44,4.53,4.53,0,0,1-1.42-1.26c-1-1.53-.13-3.55.83-5.1a20.16,20.16,0,0,1,7-7.18c1.2-.66,2.49-1.14,3.72-1.74,3.51-1.7,6.16-4.54,9.47-6.48C749.57,768.67,751.58,773.4,750.11,775.82Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M846.69,498.94a28.57,28.57,0,0,0,12.16,4.73,49.5,49.5,0,0,0,6.88.37,174.85,174.85,0,0,0,28.63-2.39c-3.76-4.15-7.57-8.59-9-14a23.11,23.11,0,0,1-.44-8.77,66,66,0,0,1,2.68-11,77.63,77.63,0,0,1-12.1-.31c-2.29-.24-7.91-2.32-9.9-.74s-.46,6.67-.43,9.06a2.26,2.26,0,0,1,0,.26,28.93,28.93,0,0,1-2.31,10.58C860,493.19,853.8,498.51,846.69,498.94Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M865.18,475.84a24.06,24.06,0,0,0,19.75,3,66,66,0,0,1,2.68-11,77.63,77.63,0,0,1-12.1-.31c-2.29-.24-7.91-2.32-9.9-.74S865.15,473.45,865.18,475.84Z" transform="translate(-28 -101)" opacity="0.1"/><circle cx="850.38" cy="353.54" r="24.11" fill="#fbbebe"/><path d="M776.09,576.53a11.23,11.23,0,0,0,5.44,9.67,21.69,21.69,0,0,0,5.9,2.08c11,2.66,22.32,4.8,33.65,4.15a18.49,18.49,0,0,0,7.14-1.5,7.66,7.66,0,0,0,4.41-5.51,5.18,5.18,0,0,1,.34-1.75,5.11,5.11,0,0,1,1.67-1.49,6.84,6.84,0,0,0,2.59-6.82c1.37.62,2.81-.77,3.46-2.13s1.15-3,2.53-3.59c.94-.4,2-.16,3-.42,1.59-.41,2.56-2,3.68-3.15,2.28-2.44,5.53-3.7,8.51-5.21,8.88-4.47,16.11-11.56,23.2-18.53a77.76,77.76,0,0,0,10-11.18,41.2,41.2,0,0,0,2.2-3.6,101.82,101.82,0,0,0,5.55-12.71c.9-2.34,1.81-4.8,1.44-7.28,0-.22-.08-.44-.13-.67a14,14,0,0,0-2.19-4.42c-2.45-3.6-5.66-7-9.88-8.12s-8.42.23-12.71,1.14a31.85,31.85,0,0,1-4.31.66c-4.54.32-9-.9-13.42-2.11l-4.78-1.32c-2.39-.66-3.59-3.55-6-4.06a8.12,8.12,0,0,0-3.25.17c-4.91.93-9.87,2.14-14.2,4.64a21.32,21.32,0,0,0-2.76,1.88,17.47,17.47,0,0,0-6.42,9.47c-1,4.17-.06,8.63-1.06,12.8-.82,3.44-2.89,6.44-4.91,9.34L803,543.83a104.13,104.13,0,0,1-8.66,11.28C788,562,776.26,567.18,776.09,576.53Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M807.53,415.4c-.49-2.31-.85-4.71-2.12-6.69a15.16,15.16,0,0,0-3.12-3.28,20.74,20.74,0,0,0-6.68-4.17,8.34,8.34,0,0,0-7.56.87c-2.11,1.6-3,4.34-3.33,7a17.07,17.07,0,0,0,1.78,10.55c2,3.56,5.59,5.94,8.56,8.78a34.39,34.39,0,0,1,5.58,7,20.21,20.21,0,0,0,2.54,3.72,4.84,4.84,0,0,0,4,1.61,7,7,0,0,0,3.27-1.93c1.22-1.07,4.5-3,4.6-4.67.08-1.37-2.48-4.47-3.11-5.76A65.41,65.41,0,0,1,807.53,415.4Z" transform="translate(-28 -101)" fill="#fbbebe"/><path d="M722.81,694.64c3,5.6,6.34,11,9.05,16.8,1.57,3.37,2.93,6.83,4.68,10.11,1.91,3.57,4.26,6.89,6.26,10.41,5,8.9,7.83,18.94,10.42,28.83a57.39,57.39,0,0,0,20.52-7.22,12.9,12.9,0,0,0,1.23-.79,14.52,14.52,0,0,0,4.14-4.57c-2.39-9-4.84-18.23-9.71-26.22-1.59-2.6-3.41-5-5-7.61-4.73-7.45-5.71-16.84-11.12-23.81a4.08,4.08,0,0,1,0-4.84c.62-.81,1.62-1.58,1.43-2.59-.14-.73-.9-1.39-.61-2.07.14-.33.48-.51.74-.75.92-.84.8-2.29.89-3.53.2-3.16,2.09-5.93,3.92-8.51a5.34,5.34,0,0,1,1.44-1.55c.49-.3,1.07-.44,1.56-.74,1.72-1.07,1.6-3.59,2.43-5.46,1.08-2.46,3.8-3.71,5.59-5.7,2.27-2.54,2.84-6.07,5.24-8.29a7.11,7.11,0,0,1,.79-.64,39.7,39.7,0,0,0-1.41,11.61c-.23,13.44,3.13,27.34,1.56,40.69-1.24,10.58,5.28,21.14,14.52,26.44a70.28,70.28,0,0,0,11.31,4.76c5.78,2.05,11.56,4.16,17.23,6.53,4,1.66,8,3.46,11.86,5.37a146,146,0,0,1,14,7.76c5.57,3.54,11.15,7.14,15.1,12.43,3.83-.1,7.34-2.4,9.76-5.37s3.93-6.56,5.34-10.11c1.23-3.07,2.45-6.22,2.54-9.53a1.9,1.9,0,0,0-1.06-1.71l-26.46-14-5-2.62c-10.83-5.75-22-11.07-32.89-16.81-.73.21-1.33-.62-1.54-1.34s-.36-1.62-1.05-1.94c-.35-.16-.79-.16-1-.44a1.2,1.2,0,0,1-.18-.88c.35-5.24,4.13-10.06,3.37-15.25-.32-2.22-1.47-4.4-1-6.57.35-1.51,1.43-2.73,2-4.16,1.29-3.2,0-7,1.42-10.17a23.34,23.34,0,0,0,1.91-6.48,43.88,43.88,0,0,1,4.05-12.84,23.18,23.18,0,0,1,3.72-5.64c.8-.85,1.69-1.62,2.44-2.5,2.31-2.73,3.15-6.37,3.81-9.88,1.18-6.37,2-13,.52-19.29-.5-2.15-1.26-4.28-1.23-6.49,0-2.91,1.31-6.32-.71-8.43a6.6,6.6,0,0,0-3-1.52,90.43,90.43,0,0,0-14.35-2.65L790.22,582a20.28,20.28,0,0,1-7.35-1.91c-3-1.65-5-4.72-6.2-7.92-3.88,2.83-5.34,8.1-8.43,11.76-1.51,1.79-3.37,3.23-5,4.87a55.11,55.11,0,0,0-5.54,6.83c-4.61,6.33-9.25,12.71-12.55,19.8-1.71,3.69-3,7.54-4.42,11.36-5.39,15.07-14.18,29.37-17.83,44.94-.9,3.81-3.23,7.24-3.58,11.14C718.91,687,720.82,691,722.81,694.64Z" transform="translate(-28 -101)" fill="#434175"/><path d="M838.53,569.54a6.85,6.85,0,0,1,.81,3.26c-.49-2.44-3.85-3.79-4.06-6.2-.1-1.11.1-1.06.79-.47C837.12,567,837.57,568.58,838.53,569.54Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M828.32,576.94a5.15,5.15,0,0,1,1.53,2.26,5.75,5.75,0,0,1,.3,3.93c-.49-.23-.66-.83-.81-1.36a9.38,9.38,0,0,0-1-2.33c-.4-.63-2.23-2.13-2.21-2.82C826.1,575.58,827.83,576.57,828.32,576.94Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M827.14,495.35a25.23,25.23,0,0,0,5.08,3.38c4.78,2.42,10.07,3.69,14.88,6a72.17,72.17,0,0,1,6.9,4c4.77,3,9.53,6,14.29,9.05a15.75,15.75,0,0,1,3.15,2.39c1.72,1.84,1.71,5,3.28,7a9.4,9.4,0,0,0,6.93,3.2,22.5,22.5,0,0,0,7.73-1.3,38.24,38.24,0,0,0,4.42-1.61,20.47,20.47,0,0,0,4.24-2.42,12.19,12.19,0,0,0,5-7.89,15.58,15.58,0,0,0-.85-6.44,25.11,25.11,0,0,0-1.52-3.91,15.17,15.17,0,0,0-1.22-2.05c-3.28-4.65-9.06-6.84-14.65-7.93-2.95-.57-5.95-.92-8.91-1.42a31.85,31.85,0,0,1-4.31.66c-4.54.32-9-.9-13.42-2.11l-4.78-1.32c-2.39-.66-3.59-3.55-6-4.06a8.12,8.12,0,0,0-3.25.17c-4.91.93-9.87,2.14-14.2,4.64A21.32,21.32,0,0,0,827.14,495.35Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M815.49,431.36c.61,5.83,5.53,10.11,8.53,15.14,1.46,2.45,2.48,5.13,3.79,7.66a75,75,0,0,0,5,8l5.35,7.77c3.15,4.57,6.33,9.18,10.35,13,7,1.19,12.9,6.4,19.55,8.93,5.33,2,11.13,2.3,16.72,3.39s11.37,3.27,14.65,7.93a20.83,20.83,0,0,1,2.74,6,15.54,15.54,0,0,1,.85,6.43,12.19,12.19,0,0,1-5,7.9,27.71,27.71,0,0,1-8.65,4,22.74,22.74,0,0,1-7.73,1.3,9.44,9.44,0,0,1-6.94-3.2c-1.56-2-1.55-5.19-3.27-7a15.75,15.75,0,0,0-3.15-2.39l-14.29-9a72.17,72.17,0,0,0-6.9-4c-4.81-2.35-10.1-3.62-14.88-6s-9.23-6.41-10.17-11.68c-2.91-16.19-14.12-29.84-23.7-43.21.31-.06.22-.78.33-1.08a14,14,0,0,1,7-7.08C808.75,432.5,812.17,432.07,815.49,431.36Z" transform="translate(-28 -101)" fill="#f86d70"/><path d="M866,431.48a8.87,8.87,0,0,1,1-5.08c1.59-2.64,4.91-3.57,7.93-4.19s5.8-1.1,8.72-1.52a20.1,20.1,0,0,1,7.21-.13c3.26.72,6,2.91,9,4.26,3.6,1.61,7.6,2,11.44,2.92s7.79,2.39,10.2,5.52c1.83,2.37,2.56,5.4,3.11,8.35,4.57,24.63-.35,49.89-1.28,74.92-.37,9.74.07,20.15,5.64,28.16l-16.21-.43c-4.15-.11-8.61-.33-11.87-2.89-2.88-2.25-4.24-5.88-5.46-9.31a29,29,0,0,1-2.08-8.35c-.25-5.88,3.09-11.65,2-17.44-.81-4.32-4-7.82-7.32-10.65s-7.1-5.3-9.83-8.75c-4.85-6.15-5.78-14.54-5.18-22.35.36-4.64,1.2-9.29.79-13.93a17.53,17.53,0,0,0-3.67-9.76C867.59,437.75,866.24,435.83,866,431.48Z" transform="translate(-28 -101)" fill="#434175"/><path d="M867,426.4c1.56-2.6,4.8-3.54,7.77-4.15a7.67,7.67,0,0,0-3.85,3,9,9,0,0,0-1,5.09c.22,4.35,1.57,6.27,4.15,9.35a17.44,17.44,0,0,1,3.68,9.76c.4,4.64-.43,9.28-.79,13.93-.61,7.8.32,16.2,5.18,22.35,2.72,3.45,6.47,5.91,9.83,8.75s6.51,6.33,7.32,10.65c1.08,5.78-2.26,11.56-2,17.44a28.51,28.51,0,0,0,2.07,8.34c1.23,3.44,2.59,7.07,5.46,9.32,3.26,2.56,7.73,2.78,11.88,2.89l11.48.3c.25.42.52.84.8,1.25l-16.21-.43c-4.15-.11-8.61-.33-11.87-2.89-2.88-2.25-4.24-5.88-5.46-9.31a29,29,0,0,1-2.08-8.35c-.25-5.88,3.09-11.65,2-17.44-.81-4.32-4-7.82-7.32-10.65s-7.1-5.3-9.83-8.75c-4.85-6.15-5.78-14.54-5.18-22.35.36-4.64,1.2-9.29.79-13.93a17.53,17.53,0,0,0-3.67-9.76c-2.58-3.08-3.93-5-4.16-9.35A8.87,8.87,0,0,1,867,426.4Z" transform="translate(-28 -101)" opacity="0.1"/><path d="M745.22,680.23,775,752.78a14.52,14.52,0,0,0,4.14-4.57c-2.39-9-4.84-18.23-9.71-26.22-1.59-2.6-3.41-5-5-7.61-4.73-7.45-5.71-16.84-11.12-23.81a4.08,4.08,0,0,1,0-4.84c.62-.81,1.62-1.58,1.43-2.59-.14-.73-.9-1.39-.61-2.07.14-.33.48-.51.74-.75.92-.84.8-2.29.89-3.53.2-3.16,2.09-5.93,3.92-8.51a5.34,5.34,0,0,1,1.44-1.55c.49-.3,1.07-.44,1.56-.74,1.72-1.07,1.6-3.59,2.43-5.46,1.08-2.46,3.8-3.71,5.59-5.7,2.27-2.54,2.84-6.07,5.24-8.29l.21-.52-2.25-14Z" transform="translate(-28 -101)" opacity="0.1"/><ellipse cx="977.05" cy="659.35" rx="33.95" ry="6.53" fill="#0960bd"/><ellipse cx="977.62" cy="656.57" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="650.25" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="643.92" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="637.6" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="631.27" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="624.95" rx="3.95" ry="5.17" fill="#3f3d56"/><ellipse cx="977.62" cy="618.63" rx="3.95" ry="5.17" fill="#3f3d56"/><path d="M990.82,676.35a18.78,18.78,0,0,1-1.47-2.17l10.38-1.71-11.23.09a19,19,0,0,1-.36-15l15.07,7.81-13.9-10.21a18.94,18.94,0,1,1,31.27,21.19,18.34,18.34,0,0,1,2.16,3.45l-13.48,7,14.38-4.82a19.07,19.07,0,0,1,1,6.07,18.85,18.85,0,0,1-4.06,11.71,18.93,18.93,0,1,1-29.76,0,18.94,18.94,0,0,1,0-23.41Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M1024.64,688.05a18.85,18.85,0,0,1-4.06,11.71,18.93,18.93,0,1,1-29.76,0C988.28,696.54,1024.64,685.93,1024.64,688.05Z" transform="translate(-28 -101)" opacity="0.1"/><ellipse cx="1043.17" cy="586.83" rx="22.83" ry="4.39" fill="#0960bd"/><ellipse cx="1043.56" cy="584.97" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="580.72" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="576.46" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="572.21" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="567.96" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="563.71" rx="2.66" ry="3.48" fill="#3f3d56"/><ellipse cx="1043.56" cy="559.45" rx="2.66" ry="3.48" fill="#3f3d56"/><path d="M1061.61,631.36a11,11,0,0,1-1-1.46l7-1.15-7.55.06a12.62,12.62,0,0,1-1.17-5.32,12.78,12.78,0,0,1,.92-4.77l10.14,5.26-9.35-6.87a12.73,12.73,0,1,1,21,14.25,12.56,12.56,0,0,1,1.45,2.32l-9.06,4.71,9.66-3.25a12.77,12.77,0,0,1-2.05,12,12.74,12.74,0,1,1-20,0,12.71,12.71,0,0,1,0-15.74Z" transform="translate(-28 -101)" fill="#0960bd"/><path d="M1084.34,639.23a12.72,12.72,0,0,1-2.72,7.87,12.74,12.74,0,1,1-20,0C1059.9,644.93,1084.34,637.8,1084.34,639.23Z" transform="translate(-28 -101)" opacity="0.1"/></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/assets/svg/no-data.svg b/apps/grid-admin/src/assets/svg/no-data.svg
new file mode 100644
index 00000000..2b9f2570
--- /dev/null
+++ b/apps/grid-admin/src/assets/svg/no-data.svg
@@ -0,0 +1 @@
+<svg id="e4fde902-34f0-42ac-83bb-70aac2088463" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="855.41839" height="610.77534" viewBox="0 0 855.41839 610.77534"><circle cx="39.53587" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="80.42757" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="121.31927" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="162.21097" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="203.10267" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="243.99437" cy="110.72662" r="13.63057" fill="#e6e6e6"/><circle cx="284.88607" cy="110.72662" r="13.63057" fill="#e6e6e6"/><path d="M488.67447,271.93783H180.32909a5.55346,5.55346,0,0,1-5.54693-5.54693V244.28714a5.55345,5.55345,0,0,1,5.54693-5.54693H488.67447a5.55346,5.55346,0,0,1,5.54693,5.54693V266.3909A5.55347,5.55347,0,0,1,488.67447,271.93783ZM180.32909,240.959a3.3318,3.3318,0,0,0-3.32816,3.32816V266.3909a3.3318,3.3318,0,0,0,3.32816,3.32815H488.67447a3.33179,3.33179,0,0,0,3.32815-3.32815V244.28714a3.33179,3.33179,0,0,0-3.32815-3.32816Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M246.31694,147.79938a3.19065,3.19065,0,0,1,3.187,3.187V220.049a3.19065,3.19065,0,0,1-3.187,3.187h-67.652a3.19065,3.19065,0,0,1-3.187-3.187V150.98643a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.18705h-67.652a6.3741,6.3741,0,0,0-6.3741,6.3741V220.049a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.37411,6.37411,0,0,0,6.3741-6.3741V150.98643a6.37411,6.37411,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M235.76469,165.95293H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,177.23755H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,188.52139H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,199.806H190.62778a1.59353,1.59353,0,1,1,0-3.187h45.13691a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M235.76469,211.09063H190.62778a1.59353,1.59353,0,1,1,0-3.18706h45.13691a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M477.37812,147.79938a3.19065,3.19065,0,0,1,3.187,3.187V220.049a3.19065,3.19065,0,0,1-3.187,3.187h-67.652a3.19065,3.19065,0,0,1-3.187-3.187V150.98643a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.18705h-67.652a6.3741,6.3741,0,0,0-6.3741,6.3741V220.049a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.3741,6.3741,0,0,0,6.3741-6.3741V150.98643a6.3741,6.3741,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M466.82588,165.95293H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,177.23755H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,188.52139H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,199.806H421.689a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M466.82588,211.09063H421.689a1.59353,1.59353,0,1,1,0-3.18706h45.13692a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M707.317,280.59077a3.19065,3.19065,0,0,1,3.187,3.187v69.06255a3.19066,3.19066,0,0,1-3.187,3.187H639.665a3.19066,3.19066,0,0,1-3.187-3.187V283.77782a3.19065,3.19065,0,0,1,3.187-3.187h67.652m0-3.187H639.665a6.3741,6.3741,0,0,0-6.3741,6.3741v69.06255a6.3741,6.3741,0,0,0,6.3741,6.3741h67.652a6.37411,6.37411,0,0,0,6.3741-6.3741V283.77782a6.3741,6.3741,0,0,0-6.3741-6.3741Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,298.74432H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,310.02894H651.62784a1.59353,1.59353,0,0,1,0-3.18706h45.13692a1.59353,1.59353,0,0,1,0,3.18706Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,321.31278H651.62784a1.59352,1.59352,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,332.59739H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M696.76476,343.882H651.62784a1.59353,1.59353,0,1,1,0-3.187h45.13692a1.59353,1.59353,0,0,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M362.73282,226.42308H293.30943a7.08972,7.08972,0,0,1-7.08139-7.08138V169.66541a7.08988,7.08988,0,0,1,7.08139-7.08216h69.42339a7.09,7.09,0,0,1,7.08217,7.08216V219.3417A7.08988,7.08988,0,0,1,362.73282,226.42308ZM293.30943,165.7703a3.89917,3.89917,0,0,0-3.89434,3.89511V219.3417a3.89851,3.89851,0,0,0,3.89434,3.89433h69.42339a3.89917,3.89917,0,0,0,3.89511-3.89433V169.66541a3.89983,3.89983,0,0,0-3.89511-3.89511Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M350.59,184.81246H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M350.59,196.09708H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M350.59,207.38092H305.45305a1.59353,1.59353,0,0,1,0-3.187H350.59a1.59353,1.59353,0,1,1,0,3.187Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M593.09111,253.95025,526.41486,234.6141a7.08971,7.08971,0,0,1-4.82882-8.77351l13.83608-47.71054a7.08988,7.08988,0,0,1,8.77372-4.82958l66.67625,19.33615a7.09,7.09,0,0,1,4.82935,8.77447l-13.83608,47.71055A7.08988,7.08988,0,0,1,593.09111,253.95025Zm-49.78294-77.58884a3.89916,3.89916,0,0,0-4.82511,2.65631L524.647,226.72827a3.89851,3.89851,0,0,0,2.65557,4.8249l66.67624,19.33614a3.89918,3.89918,0,0,0,4.82565-2.65535l13.83608-47.71054a3.89985,3.89985,0,0,0-2.65609-4.82587Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M593.01835,210.60411l-43.3508-12.57175a1.59353,1.59353,0,0,1,.88767-3.06094L593.906,207.54318a1.59352,1.59352,0,1,1-.88768,3.06093Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M589.87531,221.44219,546.5245,208.87043a1.59352,1.59352,0,1,1,.88767-3.06093L590.763,218.38125a1.59353,1.59353,0,0,1-.88767,3.06094Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M586.73248,232.27951l-43.35081-12.57175a1.59353,1.59353,0,0,1,.88767-3.06094l43.35081,12.57176a1.59352,1.59352,0,0,1-.88767,3.06093Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><rect x="156.10589" y="607.77534" width="699.3125" height="3" fill="#e6e6e6"/><polygon points="562.14 603.085 448.421 603.085 452.276 552.973 558.285 552.973 562.14 603.085" fill="#e6e6e6"/><rect x="442.63878" y="597.3034" width="127.21043" height="11.5646" fill="#e6e6e6"/><path d="M895.37073,374.74021H460.73514a11.56458,11.56458,0,0,0-11.56458,11.56458h0V651.3265H906.93533V386.30479a11.56457,11.56457,0,0,0-11.56456-11.56458Z" transform="translate(-172.29081 -144.61233)" fill="#3f3d56"/><path d="M449.17056,651.3265v43.36719a11.56457,11.56457,0,0,0,11.56458,11.56457H895.37073a11.56459,11.56459,0,0,0,11.5646-11.56457h0V651.3265Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><rect x="300.00891" y="254.22076" width="412.47016" height="231.29169" fill="#e6e6e6"/><circle cx="506.244" cy="533.69821" r="11.56459" fill="#3f3d56"/><circle cx="312.86987" cy="261.79534" r="2.19466" fill="#fff"/><circle cx="321.20026" cy="261.79534" r="2.19466" fill="#fff"/><circle cx="329.53064" cy="261.79534" r="2.19466" fill="#fff"/><rect x="310.6752" y="269.25275" width="389.91608" height="194.24707" fill="#fff"/><path d="M508.885,443.41111a1.37973,1.37973,0,0,0-1.37842,1.37842v69.67578a1.37973,1.37973,0,0,0,1.37842,1.37841H589.3493a1.37973,1.37973,0,0,0,1.37842-1.37841V444.78953a1.37973,1.37973,0,0,0-1.37842-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M638.08075,443.63523a1.37984,1.37984,0,0,0-1.37891,1.37842v69.45166a1.37984,1.37984,0,0,0,1.37891,1.37841h80.208a1.37963,1.37963,0,0,0,1.37793-1.37841V445.01365a1.37963,1.37963,0,0,0-1.37793-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M765.92157,442.9072a1.37963,1.37963,0,0,0-1.37793,1.37842v70.17969a1.37962,1.37962,0,0,0,1.37793,1.37841h81.042a1.37962,1.37962,0,0,0,1.37793-1.37841V444.28562a1.37963,1.37963,0,0,0-1.37793-1.37842Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,563.88865a2.8501,2.8501,0,0,0,0,5.70019h34.062a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M640.94012,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65235a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M640.94012,563.88865a2.8501,2.8501,0,0,0,0,5.70019h34.0625a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/><path d="M768.26044,550.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M510.35614,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M640.94012,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65235a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M768.26044,536.333a2.84986,2.84986,0,0,0,0,5.69971h75.65234a2.84986,2.84986,0,0,0,0-5.69971Z" transform="translate(-172.29081 -144.61233)" fill="#e6e6e6"/><path d="M768.26044,563.88865a2.8501,2.8501,0,0,0,0,5.70019H802.322a2.8501,2.8501,0,0,0,0-5.70019Z" transform="translate(-172.29081 -144.61233)" fill="#0960bd"/></svg>
\ No newline at end of file
diff --git a/apps/grid-admin/src/config.ts b/apps/grid-admin/src/config.ts
new file mode 100644
index 00000000..c73c4148
--- /dev/null
+++ b/apps/grid-admin/src/config.ts
@@ -0,0 +1,26 @@
+import type { StaticConfig, DynamicConfig } from '@vben/types'
+
+// github repo url
+export const GITHUB_URL = 'https://github.com/vbenjs/vben3'
+
+// vue-vben-admin-next-doc
+export const DOC_URL = 'https://vbenjs.github.io/vben3-doc/'
+
+// site url
+export const SITE_URL = 'http://vben.mufei88.com/'
+
+const dynamicConfig: DynamicConfig = {
+  __: '',
+}
+
+// ! You need to clear the browser cache after the change
+const staticConfig: StaticConfig = {
+  authType: 'frontend',
+
+  // enable
+  enableProgress: true,
+}
+
+export const config = { ...staticConfig, ...dynamicConfig }
+
+export const siteSetting = {GITHUB_URL, DOC_URL, SITE_URL}
diff --git a/apps/grid-admin/src/init-application.ts b/apps/grid-admin/src/init-application.ts
new file mode 100644
index 00000000..e4e198eb
--- /dev/null
+++ b/apps/grid-admin/src/init-application.ts
@@ -0,0 +1,70 @@
+import { initRequest } from '@vben/request'
+import { useUserStoreWithout } from '@/store/user'
+import { useI18n, useLocale } from '@vben/locale'
+import { getGlobalConfig } from '@vben/utils'
+import { useConfigStore } from '@/store/config'
+import { initComp } from '@vben/vbencomponents'
+import { localeList } from '@vben/locale/src/config'
+import { useAppStore } from '@/store/modules/app'
+// To decouple the modules below `packages/*`, they no longer depend on each other
+// If the modules are heavily dependent on each other, you need to provide a decoupling method, and the caller will pass the parameters
+// Each module needs to provide `bridge` file as a decoupling method
+
+// 为了解耦 `packages/*` 下面各模块，不再相互依赖
+// 如果模块相互依赖严重，则需要对外提供解耦方式，由调用方去进行参数传递
+// 各个模块需要提供 `bridge` 文件作为解耦方式
+async function initPackages() {
+  const _initRequest = async () => {
+    const { apiUrl } = getGlobalConfig(import.meta.env)
+    const { t } = useI18n()
+    await initRequest(() => {
+      return {
+        apiUrl,
+        getTokenFunction: () => {
+          const userStore = useUserStoreWithout()
+          return userStore.getAccessToken
+        },
+        errorFunction: null,
+        noticeFunction: null,
+        errorModalFunction: null,
+        timeoutFunction: () => {
+          const userStore = useUserStoreWithout()
+          userStore.setAccessToken(undefined)
+          userStore.logout(true)
+        },
+        unauthorizedFunction: (msg?: string) => {
+          const userStore = useUserStoreWithout()
+          userStore.setAccessToken(undefined)
+          userStore.logout(true)
+          return msg || t('sys.api.errMsg401')
+        },
+        handleErrorFunction: (msg, mode) => {
+          if (mode === 'modal') {
+            Modal.error({ title: t('sys.api.errorTip'), content: msg })
+          } else if (mode === 'message') {
+            message.error(msg)
+          }
+        },
+      }
+    })
+  }
+
+  const _initComp = async () => {
+    await initComp(() => {
+      return {
+        useLocale,
+        localeList,
+        useAppStore,
+        useConfigStore,
+      }
+    })
+
+    await Promise.all([_initRequest(), _initComp()])
+  }
+}
+
+export async function initApplication() {
+  // ! Need to pay attention to the timing of execution
+  // ! 需要注意调用时机
+  await initPackages()
+}
diff --git a/apps/grid-admin/src/layout/components/app/AppProvider.tsx b/apps/grid-admin/src/layout/components/app/AppProvider.tsx
new file mode 100644
index 00000000..a6f328ff
--- /dev/null
+++ b/apps/grid-admin/src/layout/components/app/AppProvider.tsx
@@ -0,0 +1,46 @@
+import {
+  createMediaPrefersColorSchemeListen,
+  createBreakpointListen,
+} from '@vben/hooks'
+import { namespace } from '@/setting'
+import { defineComponent, toRefs, ref } from 'vue'
+import { createAppProviderContext } from '@vben/hooks'
+import { useMsg, useNotice } from '@vben/vbencomponents'
+import { setMsg, setNoice } from '@vben/request'
+
+const props = {
+  /**
+   * class style prefix
+   */
+  prefixCls: { type: String, default: namespace },
+}
+
+export default defineComponent({
+  name: 'AppProvider',
+  inheritAttrs: false,
+  props,
+  setup(props, { slots }) {
+    const isMobile = ref(false)
+    //注册msg以及notice，方便全局使用
+    const msg = useMsg()
+    const notice = useNotice()
+    setMsg(msg)
+    setNoice(notice)
+    // Monitor screen breakpoint information changes
+    createBreakpointListen(({ screenMap, sizeEnum, width }) => {
+      const lgWidth = screenMap.get(sizeEnum.LG)
+      if (lgWidth) {
+        isMobile.value = width.value - 1 < lgWidth
+      }
+    })
+    // Listen for system theme changes
+    createMediaPrefersColorSchemeListen()
+
+    const { prefixCls } = toRefs(props)
+
+    // Inject variables into the global
+    createAppProviderContext({ prefixCls, isMobile })
+
+    return () => slots.default?.()
+  },
+})
diff --git a/apps/grid-admin/src/layout/components/logo.vue b/apps/grid-admin/src/layout/components/logo.vue
new file mode 100644
index 00000000..d27bc974
--- /dev/null
+++ b/apps/grid-admin/src/layout/components/logo.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import { BASIC_HOME_PATH } from '@vben/constants'
+import { createNamespace, getGlobalConfig } from '@vben/utils'
+import logo from '@/assets/images/logo.png'
+
+const { bem } = createNamespace('app-logo')
+
+const props = defineProps({
+  /**
+   * Whether to show title
+   */
+  showTitle: { type: Boolean, default: true },
+
+  /**
+   * Click to jump to which path
+   */
+  homePath: { type: String, default: BASIC_HOME_PATH },
+})
+
+const { push } = useRouter()
+const { title } = getGlobalConfig(import.meta.env)
+
+function goHome() {
+  push(props.homePath)
+}
+</script>
+
+<template>
+  <div :class="bem()" @click="goHome">
+    <img :src="logo" alt="logo" />
+    <div
+      class="ml-2 truncate md:opacity-100"
+      :class="bem('title')"
+      v-show="showTitle"
+    >
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.app-logo {
+  display: flex;
+  align-items: center;
+  padding-left: 7px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  height: 48px;
+  background: transparent;
+  box-sizing: border-box;
+
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    transition: all 0.5s;
+    line-height: normal;
+  }
+
+  img {
+    width: 32px;
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/layout/components/useLockPage.ts b/apps/grid-admin/src/layout/components/useLockPage.ts
new file mode 100644
index 00000000..2d7ed1e5
--- /dev/null
+++ b/apps/grid-admin/src/layout/components/useLockPage.ts
@@ -0,0 +1,66 @@
+import { computed, onUnmounted, watchEffect } from 'vue'
+import { useThrottleFn } from '@vben/utils'
+import { useLockStore } from '@/store/lock'
+import { useUserStore } from '@/store/user'
+
+export function useLockPage() {
+  const lockStore = useLockStore()
+  const userStore = useUserStore()
+
+  let timeId: TimeoutHandle
+
+  function clear(): void {
+    window.clearTimeout(timeId)
+  }
+
+  function resetCalcLockTimeout(): void {
+    // not login
+    if (!userStore.getToken) {
+      clear()
+      return
+    }
+    const lockTime = 0
+    if (!lockTime || lockTime < 1) {
+      clear()
+      return
+    }
+    clear()
+
+    timeId = setTimeout(() => {
+      lockPage()
+    }, lockTime * 60 * 1000)
+  }
+
+  function lockPage(): void {
+    lockStore.setLockInfo({
+      isLock: true,
+      pwd: undefined,
+    })
+  }
+
+  watchEffect((onClean) => {
+    if (userStore.getToken) {
+      resetCalcLockTimeout()
+    } else {
+      clear()
+    }
+    onClean(() => {
+      clear()
+    })
+  })
+
+  onUnmounted(() => {
+    clear()
+  })
+
+  const keyupFn = useThrottleFn(resetCalcLockTimeout, 2000)
+
+  return computed(() => {
+    if (0) {
+      return { onKeyup: keyupFn, onMousemove: keyupFn }
+    } else {
+      clear()
+      return {}
+    }
+  })
+}
diff --git a/apps/grid-admin/src/layout/feature/index.vue b/apps/grid-admin/src/layout/feature/index.vue
new file mode 100644
index 00000000..528bc88b
--- /dev/null
+++ b/apps/grid-admin/src/layout/feature/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import LayoutLockPage from '@/pages/sys/lock/index.vue'
+const getTarget = () => document.body
+</script>
+
+<template>
+  <layout-lock-page />
+  <a-back-top :target="getTarget" />
+</template>
diff --git a/apps/grid-admin/src/layout/index.vue b/apps/grid-admin/src/layout/index.vue
new file mode 100644
index 00000000..d460f8f5
--- /dev/null
+++ b/apps/grid-admin/src/layout/index.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+// import { Layout } from '@vben/layouts'
+import { Layout } from  '@vben/grid-layouts'
+
+</script>
+
+<template>
+  <layout>
+    <template #main>
+      <RouterView />
+    </template>
+  </layout>
+</template>
diff --git a/apps/grid-admin/src/logics/mitt/routeChange.ts b/apps/grid-admin/src/logics/mitt/routeChange.ts
new file mode 100644
index 00000000..0c4e3571
--- /dev/null
+++ b/apps/grid-admin/src/logics/mitt/routeChange.ts
@@ -0,0 +1,30 @@
+/**
+ * Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow
+ */
+
+import type { RouteLocationNormalized } from 'vue-router';
+import { getRawRoute, mitt } from "@vben/utils";
+
+const emitter = mitt();
+
+const key = Symbol();
+
+let lastChangeTab: RouteLocationNormalized;
+
+export function setRouteChange(lastChangeRoute: RouteLocationNormalized) {
+  const r = getRawRoute(lastChangeRoute);
+  emitter.emit(key, r);
+  lastChangeTab = r;
+}
+
+export function listenerRouteChange(
+  callback: (route: RouteLocationNormalized) => void,
+  immediate = true,
+) {
+  emitter.on(key, callback);
+  immediate && lastChangeTab && callback(lastChangeTab);
+}
+
+export function removeTabChangeListener() {
+  emitter.clear();
+}
diff --git a/apps/grid-admin/src/main.ts b/apps/grid-admin/src/main.ts
new file mode 100644
index 00000000..40aa53e7
--- /dev/null
+++ b/apps/grid-admin/src/main.ts
@@ -0,0 +1,36 @@
+import '@vben/styles'
+// import 'ant-design-vue/dist/antd.variable.css'
+import 'virtual:svg-icons-register'
+import App from './app.vue'
+import { createApp } from 'vue'
+import { router } from '@/router'
+import { setupRouteGuard } from '@/router/guard'
+import { setupI18n } from '@vben/locale'
+import { setupPinia } from '@vben/stores'
+import { initApplication } from './init-application'
+import { registerComponents } from '../init-components'
+;(async () => {
+  const app = createApp(App)
+
+  setupPinia(app)
+
+  await registerComponents(app)
+
+  await initApplication()
+  // Register Global Components
+
+  // Multilingual configuration
+  // Asynchronous case: language files may be obtained from the server side
+  await setupI18n(app)
+  // Init Router
+  app.use(router)
+  await setupRouteGuard(router)
+  await router.isReady()
+  app.mount('#app')
+  // When Closing mock, Tree Shaking `mockjs` dep
+  if (__VITE_USE_MOCK__) {
+    import('../mock/_mock-server').then(({ setupProdMockServer }) =>
+      setupProdMockServer(),
+    )
+  }
+})()
diff --git a/apps/grid-admin/src/pages/dashboard/analysis/index.vue b/apps/grid-admin/src/pages/dashboard/analysis/index.vue
new file mode 100644
index 00000000..ea15ff2c
--- /dev/null
+++ b/apps/grid-admin/src/pages/dashboard/analysis/index.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+
+</script>
+<template>
+  <div class="p-4">analysis</div>
+</template>
diff --git a/apps/grid-admin/src/pages/dashboard/workbench/index.vue b/apps/grid-admin/src/pages/dashboard/workbench/index.vue
new file mode 100644
index 00000000..96ac82c0
--- /dev/null
+++ b/apps/grid-admin/src/pages/dashboard/workbench/index.vue
@@ -0,0 +1 @@
+<template>workbench</template>
diff --git a/apps/grid-admin/src/pages/demo/Card.vue b/apps/grid-admin/src/pages/demo/Card.vue
new file mode 100644
index 00000000..2a70d82a
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Card.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Card } from '@vben/demo'
+</script>
+<template>
+  <Card />
+</template>
diff --git a/apps/grid-admin/src/pages/demo/Draggable.vue b/apps/grid-admin/src/pages/demo/Draggable.vue
new file mode 100644
index 00000000..28be7eb1
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Draggable.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+</script>
+<template>
+  <div>拖拽</div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/apps/grid-admin/src/pages/demo/Form.vue b/apps/grid-admin/src/pages/demo/Form.vue
new file mode 100644
index 00000000..229db5c3
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Form.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Form } from '@vben/demo'
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/grid-admin/src/pages/demo/Table.vue b/apps/grid-admin/src/pages/demo/Table.vue
new file mode 100644
index 00000000..81dde2a3
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/Table.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import { Table } from '@vben/demo'
+</script>
+<template>
+  <Table />
+</template>
diff --git a/apps/grid-admin/src/pages/demo/editor/monaco-editor.vue b/apps/grid-admin/src/pages/demo/editor/monaco-editor.vue
new file mode 100644
index 00000000..c66a9f90
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/editor/monaco-editor.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import * as monaco from 'monaco-editor'
+import { onMounted } from 'vue'
+let editor = $ref(null)
+onMounted(() => {
+  initEditor()
+})
+const initEditor = () => {
+  // Initialize editor , Make sure dom Has rendered
+  editor = monaco.editor.create(document.getElementById('codeEditBox'), {
+    value: 'console.log("Hello, world")',
+    language: 'javascript',
+  })
+}
+</script>
+<template>
+  <div id="codeEditBox" style="height: 70vh"></div>
+</template>
diff --git a/apps/grid-admin/src/pages/demo/page/index.vue b/apps/grid-admin/src/pages/demo/page/index.vue
new file mode 100644
index 00000000..5db5b320
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/page/index.vue
@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>PageTest</template>
+
+<style scoped></style>
diff --git a/apps/grid-admin/src/pages/demo/table/BasicTable.vue b/apps/grid-admin/src/pages/demo/table/BasicTable.vue
new file mode 100644
index 00000000..2ce0dfc9
--- /dev/null
+++ b/apps/grid-admin/src/pages/demo/table/BasicTable.vue
@@ -0,0 +1,6 @@
+<template>
+  <BasicTable/>
+</template>
+<script lang="ts" setup>
+import { BasicTable } from '@vben/demo'
+</script>
diff --git a/apps/grid-admin/src/pages/sys/exception/index.vue b/apps/grid-admin/src/pages/sys/exception/index.vue
new file mode 100644
index 00000000..8085eb6c
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/exception/index.vue
@@ -0,0 +1,167 @@
+<script lang="tsx">
+import type { PropType } from 'vue'
+import { defineComponent, ref, computed, unref } from 'vue'
+import { BASIC_LOGIN_PATH } from '@vben/constants'
+import { useRoute } from 'vue-router'
+import { useI18n } from '@vben/locale'
+import { createNamespace } from '@vben/utils/src/bem'
+import notDataSvg from '@/assets/svg/no-data.svg'
+import netWorkSvg from '@/assets/svg/net-error.svg'
+
+/**
+ * Exception related enumeration
+ */
+enum ExceptionEnum {
+  // page not access
+  PAGE_NOT_ACCESS = 403,
+
+  // page not found
+  PAGE_NOT_FOUND = 404,
+
+  // error
+  ERROR = 500,
+
+  // net work error
+  NET_WORK_ERROR = 10000,
+
+  // No data on the page. In fact, it is not an exception page
+  PAGE_NOT_DATA = 10100,
+}
+
+interface MapValue {
+  title: string
+  subTitle: string
+  btnText?: string
+  icon?: string
+  handler?: AnyFunction<any>
+  status?: string
+}
+
+export default defineComponent({
+  name: 'ErrorPage',
+  props: {
+    // 状态码
+    status: {
+      type: Number as PropType<number>,
+      default: ExceptionEnum.PAGE_NOT_FOUND,
+    },
+
+    title: {
+      type: String as PropType<string>,
+      default: '',
+    },
+
+    subTitle: {
+      type: String as PropType<string>,
+      default: '',
+    },
+
+    full: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  setup(props) {
+    const statusMapRef = ref(new Map<string | number, MapValue>())
+
+    const { query } = useRoute()
+    const go = function (_arg?: any) {}
+    const redo = function (_arg?: any) {}
+    const { t } = useI18n()
+    const { bem } = createNamespace('app-exception-page')
+
+    const getStatus = computed(() => {
+      const { status: routeStatus } = query
+      const { status } = props
+      return Number(routeStatus) || status
+    })
+
+    const getMapValue = computed((): MapValue => {
+      return unref(statusMapRef).get(unref(getStatus)) as MapValue
+    })
+
+    const backLoginI18n = t('sys.exception.backLogin')
+    const backHomeI18n = t('sys.exception.backHome')
+
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_ACCESS, {
+      title: '403',
+      status: `${ExceptionEnum.PAGE_NOT_ACCESS}`,
+      subTitle: t('sys.exception.subTitle403'),
+      btnText: props.full ? backLoginI18n : backHomeI18n,
+      handler: () => (props.full ? go(BASIC_LOGIN_PATH) : go()),
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_FOUND, {
+      title: '404',
+      status: `${ExceptionEnum.PAGE_NOT_FOUND}`,
+      subTitle: t('sys.exception.subTitle404'),
+      btnText: props.full ? backLoginI18n : backHomeI18n,
+      handler: () => (props.full ? go(BASIC_LOGIN_PATH) : go()),
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.ERROR, {
+      title: '500',
+      status: `${ExceptionEnum.ERROR}`,
+      subTitle: t('sys.exception.subTitle500'),
+      btnText: backHomeI18n,
+      handler: () => go(),
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.PAGE_NOT_DATA, {
+      title: t('sys.exception.noDataTitle'),
+      subTitle: '',
+      btnText: t('common.redo'),
+      handler: () => redo(),
+      icon: notDataSvg,
+    })
+
+    unref(statusMapRef).set(ExceptionEnum.NET_WORK_ERROR, {
+      title: t('sys.exception.networkErrorTitle'),
+      subTitle: t('sys.exception.networkErrorSubTitle'),
+      btnText: t('common.redo'),
+      handler: () => redo(),
+      icon: netWorkSvg,
+    })
+
+    return () => {
+      const { title, subTitle, btnText, icon, handler, status } =
+        unref(getMapValue) || {}
+
+      // const img = () => (icon ? <img src={icon} /> : null)
+
+      return (
+        <VbenResult
+          class={bem() + ' m-4'}
+          status={status as any}
+          title={props.title || title}
+          description={props.subTitle || subTitle}
+        >
+          {{
+            footer: () =>
+              btnText && (
+                <VbenButton type="primary" onClick={handler}>
+                  {() => btnText}
+                </VbenButton>
+              ),
+            icon: () => (icon ? <img src={icon} /> : null),
+          }}
+        </VbenResult>
+      )
+    }
+  },
+})
+</script>
+<style lang="less">
+.app-exception-page {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  .ant-result-icon {
+    img {
+      max-width: 400px;
+      max-height: 300px;
+    }
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue b/apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue
new file mode 100644
index 00000000..7b8b46cb
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/iframe/FrameBlank.vue
@@ -0,0 +1,3 @@
+<template>
+  <div></div>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/lock/index.vue b/apps/grid-admin/src/pages/sys/lock/index.vue
new file mode 100644
index 00000000..5195a055
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/lock/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <transition name="fade-bottom" mode="out-in">
+    <lock-page v-if="isLockPage" />
+  </transition>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useLockStore } from '@/store/lock'
+import LockPage from './lock-page.vue'
+
+const lockStore = useLockStore()
+const isLockPage = computed(() => lockStore?.getLockInfo?.isLock ?? false)
+</script>
diff --git a/apps/grid-admin/src/pages/sys/lock/lock-page.vue b/apps/grid-admin/src/pages/sys/lock/lock-page.vue
new file mode 100644
index 00000000..65679232
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/lock/lock-page.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import {ref, computed, unref} from 'vue'
+import { useUserStore } from '@/store/user'
+import { useLockStore } from '@/store/lock'
+import { useI18n } from '@vben/locale'
+import { useNow } from './use-now'
+import { createNamespace } from '@vben/utils'
+import headerImg from '@/assets/images/header.jpg'
+import {router} from "@/router";
+
+const password = ref('')
+const loading = ref(false)
+const errMsg = ref(false)
+const showDate = ref(true)
+
+const { bem } = createNamespace('lock-page')
+
+const lockStore = useLockStore()
+const userStore = useUserStore()
+
+const { hour, month, minute, meridiem, year, day, week } = useNow(true)
+
+const { t } = useI18n()
+
+const userInfo = computed(() => userStore.getUserInfo || {})
+
+/**
+ * @description: unLock
+ */
+async function unLock() {
+  if (!password.value) {
+    return
+  }
+  try {
+    loading.value = true
+    const res = await lockStore.unLock(password.value)
+    errMsg.value = !res
+    if (res) {
+      const redirect = unref(router.currentRoute).query?.redirect as string || '/';
+      await router.replace({ path: redirect })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+function goLogin() {
+  userStore.logout(true)
+  lockStore.resetLockInfo()
+}
+
+function handleShowForm(show = false) {
+  showDate.value = show
+}
+</script>
+
+<template>
+  <div
+    :class="bem()"
+    class="fixed inset-0 flex items-center justify-center w-screen h-screen bg-black"
+  >
+    <div
+      :class="bem('unlock')"
+      class="absolute top-0 flex flex-col items-center justify-center h-16 pt-5 text-white transform translate-x-1/2 cursor-pointer left-1/2 sm:text-md xl:text-xl"
+      @click="handleShowForm(false)"
+      v-show="showDate"
+    >
+      <VbenIconify icon="ant-design:lock-outlined" />
+      <span>{{ t('sys.lock.unlock') }}</span>
+    </div>
+
+    <div class="flex items-center justify-center w-screen h-screen">
+      <div
+        :class="bem('hour')"
+        class="relative w-2/5 mr-5 md:mr-20 h-2/5 md:h-4/5"
+      >
+        <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px">{{ hour }}</span>
+        <span
+          class="absolute left-5 top-5 text-md"
+          v-show="showDate"
+        >
+          {{ meridiem }}
+        </span>
+      </div>
+      <div :class="`${bem('minute')} w-2/5 h-2/5 md:h-4/5 `">
+        <span class="text-44px sm:text-90px md:text-160px lg:text-220px xl:text-260px 2xl:text-320px"> {{ minute }}</span>
+      </div>
+    </div>
+    <transition name="fade-slide">
+      <div :class="bem('entry')" v-show="!showDate">
+        <div :class="bem('entry-content')">
+          <div :class="`${bem('entry-header')} enter-x`">
+            <img
+              :src="userInfo.avatar || headerImg"
+              :class="`${bem('entry-header-img')}`"
+            />
+            <p :class="`${bem('entry-header-name')}`">
+              {{ userInfo.realName }}
+            </p>
+          </div>
+          <VbenInput
+            type="password"
+            show-password-on="mousedown"
+            :placeholder="t('sys.lock.placeholder')"
+            class="enter-x"
+            v-model:value="password"
+          />
+          <span :class="`${bem('err-msg')} enter-x`" v-if="errMsg">
+            {{ t('sys.lock.alert') }}
+          </span>
+          <div :class="`${bem('footer')} enter-x`">
+            <VbenButton
+              quaternary
+              type="info"
+              size="small"
+              class="mt-2 mr-2 enter-x text-gray-300"
+              :disabled="loading"
+              @click="handleShowForm(true)"
+            >
+              {{ t('common.back') }}
+            </VbenButton>
+            <VbenButton
+              quaternary
+              type="info"
+              size="small"
+              class="mt-2 mr-2 enter-x text-gray-300"
+              :disabled="loading"
+              @click="goLogin"
+            >
+              {{ t('sys.lock.backToLogin') }}
+            </VbenButton>
+            <VbenButton
+              class="mt-2 text-gray-300"
+              quaternary
+              type="info"
+              size="small"
+              @click="unLock()"
+              :loading="loading"
+            >
+              {{ t('sys.lock.entry') }}
+            </VbenButton>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <div
+      class="absolute w-full text-center text-gray-300 bottom-5 xl:text-xl 2xl:text-3xl enter-y"
+    >
+      <div class="mb-4 text-5xl enter-x" v-show="!showDate">
+        {{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
+      </div>
+      <div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.lock-page {
+  z-index: 9999;
+
+  &__unlock {
+    transform: translate(-50%, 0);
+  }
+
+  &__hour,
+  &__minute {
+    display: flex;
+    font-weight: 700;
+    color: #bababa;
+    background-color: #141313;
+    border-radius: 30px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__entry {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(8px);
+    justify-content: center;
+    align-items: center;
+
+    &-content {
+      width: 260px;
+    }
+
+    &-header {
+      text-align: center;
+
+      &-img {
+        width: 70px;
+        margin: 0 auto;
+        border-radius: 50%;
+      }
+
+      &-name {
+        margin-top: 5px;
+        font-weight: 500;
+        color: #bababa;
+      }
+    }
+  }
+
+  &__err-msg {
+    display: inline-block;
+    margin-top: 10px;
+    color: var(--error-color);
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/pages/sys/lock/use-now.ts b/apps/grid-admin/src/pages/sys/lock/use-now.ts
new file mode 100644
index 00000000..ce04b7cb
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/lock/use-now.ts
@@ -0,0 +1,60 @@
+import { dateUtil } from '@vben/utils'
+import { tryOnMounted, tryOnUnmounted } from '@vben/utils'
+import { reactive, toRefs } from 'vue'
+
+export function useNow(immediate = true) {
+  let timer: IntervalHandle
+
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: '',
+    day: 0,
+    hour: '',
+    minute: '',
+    second: 0,
+    meridiem: '',
+  })
+
+  const update = () => {
+    const now = dateUtil()
+
+    const h = now.format('HH')
+    const m = now.format('mm')
+    const s = now.get('s')
+
+    state.year = now.get('y')
+    state.month = now.get('M') + 1
+    state.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][now.day()]
+    state.day = now.get('date')
+    state.hour = h
+    state.minute = m
+    state.second = s
+
+    state.meridiem = now.format('A')
+  }
+
+  function start() {
+    update()
+    clearInterval(timer)
+    timer = setInterval(() => update(), 1000)
+  }
+
+  function stop() {
+    clearInterval(timer)
+  }
+
+  tryOnMounted(() => {
+    immediate && start()
+  })
+
+  tryOnUnmounted(() => {
+    stop()
+  })
+
+  return {
+    ...toRefs(state),
+    start,
+    stop,
+  }
+}
diff --git a/apps/grid-admin/src/pages/sys/login/forget-password-form.vue b/apps/grid-admin/src/pages/sys/login/forget-password-form.vue
new file mode 100644
index 00000000..c5dc5637
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/forget-password-form.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { reactive, ref, computed, unref } from 'vue'
+import { useLoginState, useFormRules, LoginStateEnum } from './use-login'
+import { CountDownInput } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import LoginFormTitle from './login-form-title.vue'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+
+const formRef = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  account: '',
+  mobile: '',
+  sms: '',
+})
+
+const show = computed(
+  () => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD,
+)
+
+async function handleReset() {
+  const form = unref(formRef)
+  if (!form) return
+  await form.resetFields()
+}
+</script>
+
+<template>
+  <template v-if="show">
+    <login-form-title class="enter-x" />
+    <vben-form :model="formData" :rules="getFormRules" ref="formRef">
+      <vben-form-item name="account" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.account"
+          :placeholder="t('sys.login.userName')"
+        />
+      </vben-form-item>
+
+      <vben-form-item name="mobile" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+        />
+      </vben-form-item>
+      <vben-form-item name="sms" class="enter-x" inline :show-label="false">
+        <count-down-input
+          size="large"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </vben-form-item>
+
+      <div class="enter-x">
+        <vben-button
+          type="primary"
+          size="large"
+          block
+          @click="handleReset"
+          :loading="loading"
+        >
+          {{ t('common.resetText') }}
+        </vben-button>
+        <vben-button size="large" block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </vben-button>
+      </div>
+    </vben-form>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/login-form-title.vue b/apps/grid-admin/src/pages/sys/login/login-form-title.vue
new file mode 100644
index 00000000..cf793d38
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/login-form-title.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import { useI18n } from '@vben/locale'
+import { LoginStateEnum, useLoginState } from './use-login'
+
+const { t } = useI18n()
+
+const { getLoginState } = useLoginState()
+
+const formTitle = computed(() => {
+  const titleMap = {
+    [LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
+    [LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
+    [LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
+    [LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
+    [LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
+  }
+  return titleMap[unref(getLoginState)]
+})
+</script>
+<template>
+  <h2
+    class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left"
+  >
+    {{ formTitle }}
+  </h2>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/login-form.vue b/apps/grid-admin/src/pages/sys/login/login-form.vue
new file mode 100644
index 00000000..b81002d1
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/login-form.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import { reactive, ref, unref, computed } from 'vue';
+import {
+  GithubFilled,
+  WechatFilled,
+  AlipayCircleFilled,
+  GoogleCircleFilled,
+  TwitterCircleFilled
+} from '@ant-design/icons-vue';
+import { useI18n } from '@vben/locale';
+import { notice } from '@vben/vbencomponents'
+import { useUserStore } from '@/store/user';
+import {
+  LoginStateEnum,
+  useLoginState,
+  useFormRules,
+  useFormValid
+} from './use-login';
+import LoginFormTitle from './login-form-title.vue';
+
+const formRef = ref();
+const loading = ref(false);
+const rememberMe = ref(false);
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const { setLoginState, getLoginState } = useLoginState();
+const { getFormRules } = useFormRules();
+
+const formData = reactive({
+  account: 'vben',
+  password: '123456'
+});
+
+const { validForm } = useFormValid(formRef);
+//onKeyStroke('Enter', handleLogin);
+
+const show = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
+
+async function handleLogin() {
+  // 暂时不做校验
+  // const data = await validForm()
+  // if (!data) return
+  try {
+    loading.value = true;
+    const userInfo = await userStore.login({
+      password: formData.password,
+      username: formData.account,
+      mode: 'none' //不要默认的错误提示
+    });
+
+    if (userInfo) {
+      notice.success({
+        content: t('sys.login.loginSuccessTitle'),
+        meta: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realname}`,
+        duration: 3000
+      });
+    }
+  } catch (error) {
+    // dialog.error({
+    //   title: t('sys.api.errorTip'),
+    //   content:
+    //     (error as unknown as Error).message || t('sys.api.networkExceptionMsg')
+    // });
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+<template>
+  <login-form-title v-show="show" class="enter-x" />
+  <vben-form
+    :model="formData"
+    :rules="getFormRules"
+    ref="formRef"
+    v-show="show"
+    @keypress.enter="handleLogin"
+  >
+    <vben-form-item class="enter-x" inline :show-label="false" >
+      <vben-input
+        size="large"
+        v-model:value="formData.account"
+        :placeholder="t('sys.login.userName')"
+        class="fix-auto-fill"
+      />
+    </vben-form-item>
+    <vben-form-item class="enter-x" inline :show-label="false">
+      <vben-input
+        type="password"
+        show-password-on="click"
+        size="large"
+        v-model:value="formData.password"
+        :placeholder="t('sys.login.password')"
+      />
+    </vben-form-item>
+
+    <vben-grid class="enter-x">
+      <vben-grid-item :span="12">
+        <vben-form-item inline :show-label="false">
+          <!-- No logic, you need to deal with it yourself -->
+          <vben-checkbox v-model:checked="rememberMe" size="small">
+            {{t('sys.login.rememberMe')}}
+          </vben-checkbox>
+        </vben-form-item>
+      </vben-grid-item>
+      <vben-grid-item :span="12" >
+        <vben-form-item inline :show-label="false" class="justify-items-end" >
+          <!-- No logic, you need to deal with it yourself -->
+          <vben-button
+            text
+            tag="a"
+            type="primary"
+            size="small"
+            @click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
+          >
+            {{t('sys.login.forgetPassword')}}
+          </vben-button>
+        </vben-form-item>
+      </vben-grid-item>
+    </vben-grid>
+
+    <vben-form-item class="enter-x" inline :show-label="false" >
+      <vben-button
+        type="primary"
+        size="large"
+        block
+        @click="handleLogin"
+        :loading="loading"
+      >
+        {{t('sys.login.loginButton')}}
+      </vben-button>
+    </vben-form-item>
+
+    <vben-grid class="enter-x" :cols="3">
+      <vben-grid-item :md="8" :xs="24">
+        <vben-button block @click="setLoginState(LoginStateEnum.MOBILE)">
+          {{t('sys.login.mobileSignInFormTitle')}}
+        </vben-button>
+      </vben-grid-item>
+      <vben-grid-item :md="8" :xs="24" class="!my-2 md:!my-0 xs:mx-0 md:mx-2">
+        <vben-button block @click="setLoginState(LoginStateEnum.QR_CODE)">
+          {{t('sys.login.qrSignInFormTitle')}}
+        </vben-button>
+      </vben-grid-item>
+      <vben-grid-item :md="7" :xs="24">
+        <vben-button block @click="setLoginState(LoginStateEnum.REGISTER)">
+          {{t('sys.login.registerButton')}}
+        </vben-button>
+      </vben-grid-item>
+    </vben-grid>
+
+    <vben-divider class="enter-x">{{t('sys.login.otherSignIn')}}</vben-divider>
+
+    <div class="flex justify-evenly enter-x" :class="`sign-in-way`">
+      <github-filled />
+      <wechat-filled />
+      <alipay-circle-filled />
+      <google-circle-filled />
+      <twitter-circle-filled />
+    </div>
+  </vben-form>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/login.vue b/apps/grid-admin/src/pages/sys/login/login.vue
new file mode 100644
index 00000000..cf837c4b
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/login.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import { useI18n } from '@vben/locale'
+import { createNamespace, getGlobalConfig } from '@vben/utils'
+import LoginForm from './login-form.vue'
+import ForgetPasswordForm from './forget-password-form.vue'
+import RegisterForm from './register-form.vue'
+import MobileForm from './mobile-form.vue'
+import QrCodeForm from './qrcode-form.vue'
+const { bem } = createNamespace('login')
+
+defineProps({
+  sessionTimeout: {
+    type: Boolean,
+  },
+})
+
+const { title } = getGlobalConfig(import.meta.env)
+const { t } = useI18n()
+</script>
+
+<template>
+  <div :class="bem()">
+    <div :class="bem('slogan')" class="hidden xl:flex">
+      <div :class="bem('logo')">
+        <img :title="title" :alt="title" src="@/assets/images/logo.png" />
+        <div :class="[bem('logo-title'), 'truncate']">{{ title }}</div>
+      </div>
+
+      <div class="my-auto">
+        <img
+          :alt="title"
+          src="@/assets/svg/login-box-bg.svg"
+          class="w-2/3 -enter-x"
+        />
+        <div class="mt-10 font-medium text-white -enter-x">
+          <span class="inline-block mt-4 text-2xl">
+            {{ t('sys.login.signInTitle') }}</span
+          >
+        </div>
+        <div class="mt-4 font-normal text-white text-md -enter-x">
+          {{ t('sys.login.signInDesc') }}
+        </div>
+      </div>
+    </div>
+    <div :class="[bem('form'), 'enter-x']">
+      <!--      <div class="absolute mt-4 right-4"><DarkModeToggle /></div>-->
+      <div
+        class="sm:w-4/6 xl:w-4/5 w-full mx-auto my-auto p-4 rounded-md shadow-md xl:shadow-none"
+      >
+        <vben-card>
+          <login-form />
+          <forget-password-form />
+          <register-form />
+          <mobile-form />
+          <qr-code-form />
+        </vben-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+//@dark-bg: #293146;
+
+.login {
+  height: 100%;
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+
+  &__slogan {
+    min-height: 100%;
+    padding-left: 50px;
+    margin-right: 40px;
+    flex-direction: column;
+  }
+
+  &__slogan,
+  &__form {
+    flex: 1;
+  }
+
+  &__form {
+    display: flex;
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin-left: -48%;
+    background-image: url(@/assets/svg/login-bg.svg);
+    background-position: 100%;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    content: '';
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    padding-left: 7px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: absolute;
+    top: 12px;
+    height: 80px;
+    &-title {
+      font-size: 24px;
+      color: #fff;
+      margin-left: 8px;
+    }
+    img {
+      width: 48px;
+    }
+  }
+
+  .sign-in-way {
+    .anticon {
+      font-size: 22px;
+      color: #888;
+      cursor: pointer;
+
+      &:hover {
+        color: var(--primary-color);
+      }
+    }
+  }
+
+  .count-down-input input {
+    min-width: unset;
+  }
+}
+</style>
diff --git a/apps/grid-admin/src/pages/sys/login/mobile-form.vue b/apps/grid-admin/src/pages/sys/login/mobile-form.vue
new file mode 100644
index 00000000..92dfec74
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/mobile-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { reactive, ref, computed, unref } from 'vue'
+import { CountDownInput } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import {
+  useLoginState,
+  useFormRules,
+  useFormValid,
+  LoginStateEnum,
+} from './use-login'
+import LoginFormTitle from './login-form-title.vue'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const { getFormRules } = useFormRules()
+
+const formRef = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  mobile: '',
+  sms: '',
+})
+
+const { validForm } = useFormValid(formRef)
+
+const show = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE)
+
+async function handleLogin() {
+  const data = await validForm()
+  if (!data) return
+  console.log(data)
+}
+</script>
+<template>
+  <template v-if="show">
+    <login-form-title class="enter-x" />
+    <vben-form
+      class="rd-2"
+      :model="formData"
+      :rules="getFormRules"
+      ref="formRef"
+    >
+      <vben-form-item name="mobile" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </vben-form-item>
+      <vben-form-item name="sms" class="enter-x" inline :show-label="false">
+        <count-down-input
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </vben-form-item>
+
+      <div class="enter-x">
+        <vben-button
+          type="primary"
+          size="large"
+          block
+          @click="handleLogin"
+          :loading="loading"
+        >
+          {{ t('sys.login.loginButton') }}
+        </vben-button>
+        <vben-button block class="mt-4" @click="handleBackLogin">
+          {{ t('sys.login.backSignIn') }}
+        </vben-button>
+      </div>
+    </vben-form>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/qrcode-form.vue b/apps/grid-admin/src/pages/sys/login/qrcode-form.vue
new file mode 100644
index 00000000..7d36f9bd
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/qrcode-form.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import { QrCode } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import { useLoginState, LoginStateEnum } from './use-login'
+import LoginFormTitle from './login-form-title.vue'
+
+const testQrCodeUrl = 'https://vvbin.cn/next/login'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+const show = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)
+</script>
+
+<template>
+  <template v-if="show">
+    <login-form-title class="enter-x" />
+    <div class="enter-x min-w-64 min-h-64">
+      <qr-code
+        :value="testQrCodeUrl"
+        class="flex flex-col justify-center items-center enter-x xl:justify-start"
+        :width="280"
+      />
+      <vben-divider class="enter-x">{{ t('sys.login.scanSign') }}</vben-divider>
+      <vben-button
+        size="large"
+        block
+        class="mt-4 enter-x"
+        @click="handleBackLogin"
+      >
+        {{ t('sys.login.backSignIn') }}
+      </vben-button>
+    </div>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/register-form.vue b/apps/grid-admin/src/pages/sys/login/register-form.vue
new file mode 100644
index 00000000..702b6fdf
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/register-form.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { reactive, ref, unref, computed } from 'vue'
+import { CountDownInput } from '@vben/components'
+import { useI18n } from '@vben/locale'
+import {
+  useLoginState,
+  useFormRules,
+  useFormValid,
+  LoginStateEnum,
+} from './use-login'
+import LoginFormTitle from './login-form-title.vue'
+
+const { t } = useI18n()
+const { handleBackLogin, getLoginState } = useLoginState()
+
+const formRef = ref()
+const loading = ref(false)
+
+const formData = reactive({
+  account: '',
+  password: '',
+  confirmPassword: '',
+  mobile: '',
+  sms: '',
+  policy: false,
+})
+
+const { getFormRules } = useFormRules(formData)
+const { validForm } = useFormValid(formRef)
+
+const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)
+
+async function handleRegister() {
+  const data = await validForm()
+  if (!data) return
+  console.log(data)
+}
+</script>
+
+<template>
+  <template v-if="getShow">
+    <login-form-title class="enter-x" />
+    <vben-form :model="formData" :rules="getFormRules" ref="formRef">
+      <vben-form-item name="account" class="enter-x" inline :show-label="false">
+        <vben-input
+          class="fix-auto-fill"
+          size="large"
+          v-model:value="formData.account"
+          :placeholder="t('sys.login.userName')"
+        />
+      </vben-form-item>
+      <vben-form-item name="mobile" class="enter-x" inline :show-label="false">
+        <vben-input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </vben-form-item>
+      <vben-form-item name="sms" class="enter-x" inline :show-label="false">
+        <count-down-input
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </vben-form-item>
+      <vben-form-item
+        name="password"
+        class="enter-x"
+        inline
+        :show-label="false"
+      >
+        <vben-input
+          size="large"
+          visibilityToggle
+          v-model:value="formData.password"
+          :placeholder="t('sys.login.password')"
+        />
+      </vben-form-item>
+      <vben-form-item
+        name="confirmPassword"
+        class="enter-x"
+        inline
+        :show-label="false"
+      >
+        <vben-input
+          size="large"
+          type="password"
+          visibilityToggle
+          v-model:value="formData.confirmPassword"
+          :placeholder="t('sys.login.confirmPassword')"
+        />
+      </vben-form-item>
+
+      <vben-form-item class="enter-x" name="policy" inline :show-label="false">
+        <!-- No logic, you need to deal with it yourself -->
+        <vben-checkbox v-model:checked="formData.policy" size="small">
+          {{ t('sys.login.policy') }}
+        </vben-checkbox>
+      </vben-form-item>
+
+      <vben-button
+        type="primary"
+        class="enter-x"
+        size="large"
+        block
+        @click="handleRegister"
+        :loading="loading"
+      >
+        {{ t('sys.login.registerButton') }}
+      </vben-button>
+      <vben-button
+        size="large"
+        block
+        class="mt-4 enter-x"
+        @click="handleBackLogin"
+      >
+        {{ t('sys.login.backSignIn') }}
+      </vben-button>
+    </vben-form>
+  </template>
+</template>
diff --git a/apps/grid-admin/src/pages/sys/login/use-login.ts b/apps/grid-admin/src/pages/sys/login/use-login.ts
new file mode 100644
index 00000000..8e443cb8
--- /dev/null
+++ b/apps/grid-admin/src/pages/sys/login/use-login.ts
@@ -0,0 +1,129 @@
+import { ref, computed, unref, Ref } from 'vue'
+import { useI18n } from '@vben/locale'
+
+export enum LoginStateEnum {
+  LOGIN,
+  REGISTER,
+  RESET_PASSWORD,
+  MOBILE,
+  QR_CODE,
+}
+
+const currentState = ref(LoginStateEnum.LOGIN)
+
+export function useLoginState() {
+  function setLoginState(state: LoginStateEnum) {
+    currentState.value = state
+  }
+
+  const getLoginState = computed(() => currentState.value)
+
+  function handleBackLogin() {
+    setLoginState(LoginStateEnum.LOGIN)
+  }
+
+  return { setLoginState, getLoginState, handleBackLogin }
+}
+
+export function useFormValid<T extends Object = any>(formRef: Ref<any>) {
+  async function validForm() {
+    const form = unref(formRef)
+    if (!form) return
+    const data = await form.validate()
+    return data as T
+  }
+
+  return { validForm }
+}
+
+export function useFormRules(formData?: Recordable<any>) {
+  const { t } = useI18n()
+
+  const getAccountFormRule = computed(() =>
+    createRule(t('sys.login.accountPlaceholder')),
+  )
+  const getPasswordFormRule = computed(() =>
+    createRule(t('sys.login.passwordPlaceholder')),
+  )
+  const getSmsFormRule = computed(() =>
+    createRule(t('sys.login.smsPlaceholder')),
+  )
+  const getMobileFormRule = computed(() =>
+    createRule(t('sys.login.mobilePlaceholder')),
+  )
+
+  const validatePolicy = async (_: any, value: boolean) => {
+    return !value
+      ? Promise.reject(t('sys.login.policyPlaceholder'))
+      : Promise.resolve()
+  }
+
+  const validateConfirmPassword = (password: string) => {
+    return async (_: any, value: string) => {
+      if (!value) {
+        return Promise.reject(t('sys.login.passwordPlaceholder'))
+      }
+      if (value !== password) {
+        return Promise.reject(t('sys.login.diffPwd'))
+      }
+      return Promise.resolve()
+    }
+  }
+
+  const getFormRules = computed((): { [k: string]: any | any[] } => {
+    const accountFormRule = unref(getAccountFormRule)
+    const passwordFormRule = unref(getPasswordFormRule)
+    const smsFormRule = unref(getSmsFormRule)
+    const mobileFormRule = unref(getMobileFormRule)
+
+    const mobileRule = {
+      sms: smsFormRule,
+      mobile: mobileFormRule,
+    }
+    switch (unref(currentState)) {
+      // register form rules
+      case LoginStateEnum.REGISTER:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+          confirmPassword: [
+            {
+              validator: validateConfirmPassword(formData?.password),
+              trigger: 'change',
+            },
+          ],
+          policy: [{ validator: validatePolicy, trigger: 'change' }],
+          ...mobileRule,
+        }
+
+      // reset password form rules
+      case LoginStateEnum.RESET_PASSWORD:
+        return {
+          account: accountFormRule,
+          ...mobileRule,
+        }
+
+      // mobile form rules
+      case LoginStateEnum.MOBILE:
+        return mobileRule
+
+      // login form rules
+      default:
+        return {
+          account: accountFormRule,
+          password: passwordFormRule,
+        }
+    }
+  })
+  return { getFormRules }
+}
+
+function createRule(message: string): any[] {
+  return [
+    {
+      required: true,
+      message,
+      trigger: 'change',
+    },
+  ]
+}
diff --git a/apps/grid-admin/src/router/guard.ts b/apps/grid-admin/src/router/guard.ts
new file mode 100644
index 00000000..867a3aef
--- /dev/null
+++ b/apps/grid-admin/src/router/guard.ts
@@ -0,0 +1,240 @@
+import type { Router } from 'vue-router'
+import nProgress from 'nprogress'
+import { config } from '@/config'
+import {
+  BASIC_LOCK_PATH,
+  BASIC_LOGIN_PATH,
+  PageEnum,
+  PermissionModeEnum,
+} from '@vben/constants'
+import { useUserStoreWithout } from '@/store/user'
+import { useAuthStoreWithout } from '@/store/auth'
+import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes/basic'
+import { setRouteChange } from '@/logics/mitt/routeChange'
+import { ROOT_ROUTE } from './routes'
+import { useLockStore } from '@/store/lock'
+import type { Menu } from '@vben/types'
+import { useConfigStoreWithOut } from '@/store/config'
+import { projectSetting } from '@/setting'
+import { configureDynamicParamsMenu } from '@/router/helper'
+
+const LOADED_PAGE_POOL = new Map<string, boolean>()
+const LOCK_PATH = BASIC_LOCK_PATH
+const LOGIN_PATH = BASIC_LOGIN_PATH
+const whitePathList: string[] = [LOGIN_PATH, LOCK_PATH]
+const ROOT_PATH = ROOT_ROUTE.path
+
+async function setupRouteGuard(router: Router) {
+  const { enableProgress } = config
+  router.beforeEach(async (to) => {
+    // The page has already been loaded, it will be faster to open it again, you don’t need to do loading and other processing
+    to.meta.loaded = !!LOADED_PAGE_POOL.get(to.path)
+
+    // Display a progress bar at the top when switching pages
+    // Only works when the page is loaded for the first time
+    if (enableProgress && !to.meta.loaded) {
+      nProgress.start()
+    }
+    return true
+  })
+
+  router.afterEach((to) => {
+    // Indicates that the page has been loaded
+    // When opening again, you can turn off some progress display interactions
+    LOADED_PAGE_POOL.set(to.path, true)
+    // console.log(to)
+    // Close the page loading progress bar
+    if (enableProgress && !to.meta.loaded) {
+      nProgress.done()
+    }
+  })
+  createAuthGuard(router)
+  createTabsGuard(router)
+  createParamMenuGuard(router) // must after createPermissionGuard (menu has been built.)
+}
+
+export function createAuthGuard(router: Router) {
+  const userStore = useUserStoreWithout()
+  const permissionStore = useAuthStoreWithout()
+  const lockStore = useLockStore()
+  const configStore = useConfigStoreWithOut()
+  router.beforeEach(async (to, from, next) => {
+    if (
+      from.path === ROOT_PATH &&
+      to.path === PageEnum.BASE_HOME &&
+      userStore.getUserInfo?.homePath &&
+      userStore.getUserInfo?.homePath !== PageEnum.BASE_HOME
+    ) {
+      next(userStore.getUserInfo?.homePath)
+      return
+    }
+
+    const token = userStore.getAccessToken
+
+    // TODO Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      if (to.path === LOGIN_PATH && token) {
+        const isSessionTimeout = userStore.getSessionTimeout
+        try {
+          await userStore.afterLoginAction()
+          if (!isSessionTimeout) {
+            next((to.query?.redirect as string) || '/')
+            return
+          }
+        } catch {}
+      }
+      if (to.path === LOCK_PATH && !lockStore.getLockInfo?.isLock) {
+        next({ path: from.path })
+        return
+      }
+      next()
+      return
+    }
+    // token does not exist
+    if (!token) {
+      // You can access without permission. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next()
+        return
+      }
+
+      // redirect login page
+      const redirectData: {
+        path: string
+        replace: boolean
+        query?: Recordable<string>
+      } = {
+        path: LOGIN_PATH,
+        replace: true,
+      }
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        }
+      }
+
+      next(redirectData)
+      return
+    }
+
+    if (lockStore.getLockInfo?.isLock) {
+      // redirect lock page
+      const redirectData: {
+        path: string
+        replace: boolean
+        query?: Recordable<string>
+      } = {
+        path: LOCK_PATH,
+        replace: true,
+      }
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path,
+        }
+      }
+      next(redirectData)
+      return
+    }
+
+    // Jump to the 404 page after processing the login
+    if (
+      from.path === LOGIN_PATH &&
+      to.name === PAGE_NOT_FOUND_ROUTE.name &&
+      to.fullPath !== (userStore.getUserInfo?.homePath || PageEnum.BASE_HOME)
+    ) {
+      next(userStore.getUserInfo?.homePath || PageEnum.BASE_HOME)
+      return
+    }
+    const { permissionMode = projectSetting.permissionMode } =
+      configStore.getProjectConfig
+    // TODO get userinfo while last fetch time is empty
+    if (
+      userStore.getLastUpdateTime === 0 &&
+      permissionMode == PermissionModeEnum.BACK
+    ) {
+      try {
+        await userStore.getUserInfoAction()
+      } catch (err) {
+        next()
+        return
+      }
+    }
+    // console.log(permissionStore.getIsDynamicAddedRoute, to)
+    if (permissionStore.getIsDynamicAddedRoute) {
+      next()
+      return
+    }
+
+    // console.log(to.params)
+    const routes = await permissionStore.buildRoutesAction()
+
+    routes.forEach((route) => {
+      router.addRoute(route)
+    })
+
+    router.addRoute(PAGE_NOT_FOUND_ROUTE)
+
+    permissionStore.setDynamicAddedRoute(true)
+
+    if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true, query: to.query })
+    } else {
+      const redirectPath = (from.query.redirect || to.path) as string
+      const redirect = decodeURIComponent(redirectPath)
+      const nextData =
+        to.path === redirect ? { ...to, replace: true } : { path: redirect }
+      next(nextData)
+    }
+  })
+}
+
+// 路由守卫：进入路由，增加Tabs
+export function createTabsGuard(router: Router) {
+  router.beforeEach(async (to) => {
+    if (whitePathList.includes(to.path)) return
+    // Notify routing changes
+    setRouteChange(to)
+  })
+}
+
+function createParamMenuGuard(router: Router) {
+  const authStore = useAuthStoreWithout()
+  router.beforeEach(async (to, _, next) => {
+    // filter no name route
+    if (!to.name) {
+      next()
+      return
+    }
+
+    // menu has been built.
+    if (!authStore.getIsDynamicAddedRoute) {
+      next()
+      return
+    }
+    let menus: Menu[] = []
+    if (isBackMode()) {
+      menus = authStore.getBackMenuList
+    } else if (isRouteMappingMode()) {
+      menus = authStore.getFrontMenuList
+    }
+    menus.forEach((item) => configureDynamicParamsMenu(item, to.params))
+    next()
+  })
+}
+const getPermissionMode = () => {
+  const configStore = useConfigStoreWithOut()
+  const { permissionMode = projectSetting.permissionMode } =
+    configStore.getProjectConfig
+  return permissionMode
+}
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK
+}
+const isRouteMappingMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROUTE_MAPPING
+}
+
+export { setupRouteGuard }
diff --git a/apps/grid-admin/src/router/helper/index.ts b/apps/grid-admin/src/router/helper/index.ts
new file mode 100644
index 00000000..4637bce6
--- /dev/null
+++ b/apps/grid-admin/src/router/helper/index.ts
@@ -0,0 +1,2 @@
+export * from './menu'
+export * from './route'
diff --git a/apps/grid-admin/src/router/helper/menu.ts b/apps/grid-admin/src/router/helper/menu.ts
new file mode 100644
index 00000000..485ca352
--- /dev/null
+++ b/apps/grid-admin/src/router/helper/menu.ts
@@ -0,0 +1,105 @@
+import { isUrl, cloneDeep, findParentPath, mapTree } from '@vben/utils'
+import { RouteParams } from 'vue-router'
+import { toRaw } from 'vue'
+import { Menu, MenuModule } from '@vben/types'
+
+export function getAllParentPath<T = Recordable<any>>(
+  treeData: T[],
+  path: string,
+) {
+  const menuList = findParentPath(treeData, (n) => n.path === path) as Menu[]
+  return (menuList || []).map((item) => item.path)
+}
+
+function joinParentPath(menus: RouteRecordItem[], parentPath = '') {
+  for (let index = 0; index < menus.length; index++) {
+    const menu = menus[index]
+    // https://next.router.vuejs.org/guide/essentials/nested-routes.html
+    // Note that nested paths that start with / will be treated as a root path.
+    // This allows you to leverage the component nesting without having to use a nested URL.
+    if (!(menu.path.startsWith('/') || isUrl(menu.path))) {
+      // path doesn't start with /, nor is it a url, join parent path
+      menu.path = `${parentPath}/${menu.path}`
+    }
+    if (menu?.children?.length) {
+      joinParentPath(
+        menu.children,
+        menu.meta?.hidePathForChildren ? parentPath : menu.path,
+      )
+    }
+  }
+}
+
+// Parsing the menu module
+export function transformMenuModule(menuModule: MenuModule): Menu {
+  const { menu } = menuModule
+
+  const menuList = [menu]
+
+  joinParentPath(menuList)
+  return menuList[0]
+}
+
+export function transformRouteToMenu(
+  routeModList: RouteRecordItem[],
+  routerMapping = false,
+) {
+  const cloneRouteModList = cloneDeep(routeModList)
+  const routeList: RouteRecordItem[] = []
+
+  cloneRouteModList.forEach((item) => {
+    if (
+      routerMapping &&
+      item.meta?.hideChildrenInMenu &&
+      typeof item.redirect === 'string'
+    ) {
+      item.path = item.redirect
+    }
+    if (item.meta?.single) {
+      const realItem = item?.children?.[0]
+      realItem && routeList.push(realItem)
+    } else {
+      routeList.push(item)
+    }
+  })
+  const list = mapTree(routeList, {
+    conversion: (node: RouteRecordItem) => {
+      const { meta: { hideMenu = false } = {} } = node
+
+      return {
+        ...(node.meta || {}),
+        meta: node.meta,
+        name: node.name,
+        hideMenu,
+        path: node.path,
+        ...(node.redirect ? { redirect: node.redirect } : {}),
+      }
+    },
+  })
+  joinParentPath(list)
+  return cloneDeep(list)
+}
+
+/**
+ * config menu with given params
+ */
+const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g
+export function configureDynamicParamsMenu(menu: Menu, params: RouteParams) {
+  const { path, paramPath } = toRaw(menu)
+  let realPath = paramPath ? paramPath : path
+  const matchArr = realPath.match(menuParamRegex)
+
+  matchArr?.forEach((it) => {
+    const realIt = it.substr(1)
+    if (params[realIt]) {
+      realPath = realPath.replace(`:${realIt}`, params[realIt] as string)
+    }
+  })
+  // save original param path.
+  if (!paramPath && matchArr && matchArr.length > 0) {
+    menu.paramPath = path
+  }
+  menu.path = realPath
+  // children
+  menu.children?.forEach((item) => configureDynamicParamsMenu(item, params))
+}
diff --git a/apps/grid-admin/src/router/helper/route.ts b/apps/grid-admin/src/router/helper/route.ts
new file mode 100644
index 00000000..719a2b91
--- /dev/null
+++ b/apps/grid-admin/src/router/helper/route.ts
@@ -0,0 +1,182 @@
+import type { RouteMeta, Router, RouteRecordNormalized } from 'vue-router'
+
+import { omit, cloneDeep } from '@vben/utils'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { LAYOUT, PARENT_LAYOUT } from '../routes'
+
+export type LayoutMapKey = 'LAYOUT'
+
+const IFRAME = () => import('@/pages/sys/iframe/FrameBlank.vue')
+export const EXCEPTION_COMPONENT = () =>
+  import('@/pages/sys/exception/index.vue')
+
+const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>()
+
+LayoutMap.set('LAYOUT', LAYOUT)
+LayoutMap.set('IFRAME', IFRAME)
+
+let dynamicViewsModules: Record<string, () => Promise<Recordable<any>>>
+
+// Dynamic introduction
+function asyncImportRoute(routes: RouteRecordItem[] | undefined) {
+  dynamicViewsModules =
+    dynamicViewsModules || import.meta.glob('../../pages/**/*.{vue,tsx}')
+
+  if (!routes) return
+  routes.forEach((item: any) => {
+    if (!item.component && item.meta?.frameSrc) {
+      item.component = 'IFRAME'
+    }
+    const { component, name } = item
+    const { children } = item
+    if (component) {
+      const layoutFound = LayoutMap.get(component.toUpperCase())
+      if (layoutFound) {
+        item.component = layoutFound
+      } else {
+        item.component = dynamicImport(dynamicViewsModules, component as string)
+      }
+    } else if (name) {
+      item.component = PARENT_LAYOUT()
+    }
+    children && asyncImportRoute(children)
+  })
+}
+
+function dynamicImport(
+  dynamicViewsModules: Record<string, () => Promise<Recordable<any>>>,
+  component: string,
+) {
+  const keys = Object.keys(dynamicViewsModules)
+  const matchKeys = keys.filter((key) => {
+    const k = key.replace('../../pages', '')
+    const startFlag = component.startsWith('/')
+    const endFlag = component.endsWith('.vue') || component.endsWith('.tsx')
+    const startIndex = startFlag ? 0 : 1
+    const lastIndex = endFlag ? k.length : k.lastIndexOf('.')
+    return k.substring(startIndex, lastIndex) === component
+  })
+  if (matchKeys?.length === 1) {
+    const matchKey = matchKeys[0]
+    return dynamicViewsModules[matchKey]
+  } else if (matchKeys?.length > 1) {
+    console.warn(
+      'Please do not create `.vue` and `.TSX` files with the same file name in the same hierarchical directory under the views folder. This will cause dynamic introduction failure',
+    )
+    return
+  } else {
+    console.warn(
+      '在src/views/下找不到`' +
+        component +
+        '.vue` 或 `' +
+        component +
+        '.tsx`, 请自行创建!',
+    )
+    return EXCEPTION_COMPONENT
+  }
+}
+
+// Turn background objects into routing objects
+export function transformObjToRoute<T = RouteRecordItem>(
+  routeList: RouteRecordItem[],
+): T[] {
+  routeList.forEach((route) => {
+    const _route: any = route
+    const component = _route.component as string
+    if (component) {
+      console.log(component)
+      if (component.toUpperCase() === 'LAYOUT') {
+        route.component = LayoutMap.get(component.toUpperCase())
+      } else {
+        route.children = [cloneDeep(route)]
+        route.component = LAYOUT
+        route.name = `${_route.name}Parent`
+        route.path = ''
+        const meta = route.meta || ({} as RouteMeta)
+        meta.single = true
+        meta.affix = false
+        route.meta = meta
+      }
+    } else {
+      console.warn('请正确配置路由：' + _route?.name + '的component属性')
+    }
+    route.children && asyncImportRoute(route.children)
+  })
+  return routeList as unknown as T[]
+}
+
+/**
+ * Convert multi-level routing to level 2 routing
+ */
+export function flatMultiLevelRoutes(routeModules: RouteRecordItem[]) {
+  const modules: RouteRecordItem[] = cloneDeep(routeModules)
+  for (let index = 0; index < modules.length; index++) {
+    const routeModule = modules[index]
+    if (!isMultipleRoute(routeModule)) {
+      continue
+    }
+    promoteRouteLevel(routeModule)
+  }
+  return modules
+}
+
+// Routing level upgrade
+function promoteRouteLevel(routeModule: RouteRecordItem) {
+  // Use vue-router to splice menus
+  let router: Router | null = createRouter({
+    routes: [routeModule as unknown as RouteRecordNormalized],
+    history: createWebHashHistory(),
+  })
+
+  const routes = router.getRoutes()
+  addToChildren(routes, routeModule.children || [], routeModule)
+  router = null
+  routeModule.children = routeModule.children?.map((item): any =>
+    omit(item, 'children'),
+  )
+}
+
+// Add all sub-routes to the secondary route
+function addToChildren(
+  routes: RouteRecordNormalized[],
+  children: RouteRecordItem[],
+  routeModule: RouteRecordItem,
+) {
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index]
+    const route = routes.find((item) => item.name === child.name)
+    if (!route) {
+      continue
+    }
+    routeModule.children = routeModule.children || []
+    if (!routeModule.children.find((item) => item.name === route.name)) {
+      routeModule.children?.push(route as unknown as RouteRecordItem)
+    }
+    if (child.children?.length) {
+      addToChildren(routes, child.children, routeModule)
+    }
+  }
+}
+
+// Determine whether the level exceeds 2 levels
+function isMultipleRoute(routeModule: RouteRecordItem) {
+  if (
+    !routeModule ||
+    !Reflect.has(routeModule, 'children') ||
+    !routeModule.children?.length
+  ) {
+    return false
+  }
+
+  const children = routeModule.children
+
+  let flag = false
+  for (let index = 0; index < children.length; index++) {
+    const child = children[index]
+    if (child.children?.length) {
+      flag = true
+      break
+    }
+  }
+  return flag
+}
diff --git a/apps/grid-admin/src/router/index.ts b/apps/grid-admin/src/router/index.ts
new file mode 100644
index 00000000..6b9d96fa
--- /dev/null
+++ b/apps/grid-admin/src/router/index.ts
@@ -0,0 +1,37 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes } from './routes'
+
+export * from './menus'
+export * from './helper'
+
+// The whitelist should contain basic static routes
+const WHITE_NAME_LIST: string[] = []
+;(() => {
+  const getRouteNames = (routeRecords: RouteRecordItem[]) =>
+    routeRecords.forEach((item) => {
+      WHITE_NAME_LIST.push(item.name)
+      if (item?.children?.length) {
+        getRouteNames(item.children)
+      }
+    })
+
+  getRouteNames(routes)
+})()
+
+// app router
+export const router = createRouter({
+  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
+  routes,
+  strict: true,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})
+
+// reset router
+export function resetRouter() {
+  router.getRoutes().forEach((route) => {
+    const { name } = route
+    if (name && !WHITE_NAME_LIST.includes(name as string)) {
+      router.hasRoute(name) && router.removeRoute(name)
+    }
+  })
+}
diff --git a/apps/grid-admin/src/router/menus/index.ts b/apps/grid-admin/src/router/menus/index.ts
new file mode 100644
index 00000000..f06ffa34
--- /dev/null
+++ b/apps/grid-admin/src/router/menus/index.ts
@@ -0,0 +1,106 @@
+import type { RouteRecordNormalized } from 'vue-router'
+
+import { useAuthStoreWithout } from '@/store/auth'
+import { getAllParentPath } from '@/router/helper/menu'
+import { isUrl, filterTree } from '@vben/utils'
+import { router } from '@/router'
+import { PermissionModeEnum } from '@vben/constants'
+import { pathToRegexp } from 'path-to-regexp'
+import { useConfigStoreWithOut } from '@/store/config'
+import { Menu } from '@vben/types'
+
+// ===========================
+// ==========Helper===========
+// ===========================
+
+const getPermissionMode = () => {
+  const appStore = useConfigStoreWithOut()
+  return appStore.getProjectConfig.permissionMode
+}
+const isBackMode = () => {
+  return getPermissionMode() === PermissionModeEnum.BACK
+}
+
+const isRoleMode = () => {
+  return getPermissionMode() === PermissionModeEnum.ROLE
+}
+
+async function getAsyncMenus() {
+  const permissionStore = useAuthStoreWithout()
+  if (isBackMode()) {
+    return permissionStore.getBackMenuList.filter(
+      (item) => !item.meta?.hideMenu && !item.hideMenu,
+    )
+  }
+
+  return permissionStore.getFrontMenuList.filter(
+    (item) => !item.hideMenu && !item.meta?.hideMenu,
+  )
+}
+
+export const getMenus = async (): Promise<Menu[]> => {
+  const menus = await getAsyncMenus()
+
+  if (isRoleMode()) {
+    const routes = router.getRoutes()
+    return filterTree(menus, basicFilter(routes))
+  }
+  return menus
+}
+
+export async function getCurrentParentPath(currentPath: string) {
+  const menus = await getAsyncMenus()
+  const allParentPath = await getAllParentPath(menus, currentPath)
+  return allParentPath?.[0]
+}
+
+// Get the level 1 menu, delete children
+export async function getShallowMenus(): Promise<Menu[]> {
+  const menus = await getAsyncMenus()
+  const shallowMenuList = menus.map((item) => ({
+    ...item,
+    children: undefined,
+  }))
+  if (isRoleMode()) {
+    const routes = router.getRoutes()
+    return shallowMenuList.filter(basicFilter(routes))
+  }
+  return shallowMenuList
+}
+
+// Get the children of the menu
+export async function getChildrenMenus(parentPath: string) {
+  const menus = await getMenus()
+  const parent = menus.find((item) => item.path === parentPath)
+  if (!parent || !parent.children || !!parent?.meta?.hideChildrenInMenu) {
+    return [] as Menu[]
+  }
+  if (isRoleMode()) {
+    const routes = router.getRoutes()
+    return filterTree(parent.children, basicFilter(routes))
+  }
+  return parent.children
+}
+
+function basicFilter(routes: RouteRecordNormalized[]) {
+  return (menu: Menu) => {
+    const matchRoute = routes.find((route) => {
+      if (isUrl(menu.path)) return true
+
+      if (route.meta?.carryParam) {
+        return pathToRegexp(route.path).test(menu.path)
+      }
+      const isSame = route.path === menu.path
+      if (!isSame) return false
+
+      if (route.meta?.ignoreAuth) return true
+
+      return isSame || pathToRegexp(route.path).test(menu.path)
+    })
+
+    if (!matchRoute) return false
+    menu.icon = (menu.icon || matchRoute.meta.icon) as string
+    menu.meta = matchRoute.meta
+    return true
+  }
+}
diff --git a/apps/grid-admin/src/router/routes/basic.ts b/apps/grid-admin/src/router/routes/basic.ts
new file mode 100644
index 00000000..d084d2ab
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/basic.ts
@@ -0,0 +1,95 @@
+import {
+  REDIRECT_NAME,
+  PAGE_NOT_FOUND_NAME,
+  BASIC_HOME_PATH,
+} from '@vben/constants'
+import { Redirect } from '@vben/components'
+import { t } from '@vben/locale'
+
+const LAYOUT = () => import('@/layout/index.vue')
+
+const PARENT_LAYOUT = () => () =>
+  new Promise((resolve) => {
+    resolve({ name: 'ParentLayout' })
+  })
+
+const PAGE_NOT_FOUND_ROUTE: RouteRecordItem = {
+  path: '/:path(.*)*',
+  name: PAGE_NOT_FOUND_NAME,
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorPage',
+    key: 333,
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: PAGE_NOT_FOUND_NAME,
+      component: () => import('@/pages/sys/exception/index.vue'),
+      meta: {
+        title: 'ErrorPage',
+        key: 3333,
+      },
+    },
+  ],
+}
+
+// 404 on a page
+const REDIRECT_ROUTE: RouteRecordItem = {
+  path: '/redirect',
+  component: LAYOUT,
+  name: 'RedirectTo',
+  meta: {
+    title: REDIRECT_NAME,
+    hideBreadcrumb: true,
+    hideMenu: true,
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: REDIRECT_NAME,
+      component: Redirect,
+      meta: {
+        title: REDIRECT_NAME,
+        hideBreadcrumb: true,
+      },
+    },
+  ],
+}
+
+const ROOT_ROUTE: RouteRecordItem = {
+  path: '/',
+  name: 'Root',
+  redirect: BASIC_HOME_PATH,
+  meta: {
+    title: 'Root',
+  },
+}
+
+const LOGIN_ROUTE: RouteRecordItem = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('@/pages/sys/login/login.vue'),
+  meta: {
+    title: t('routes.basic.login'),
+  },
+}
+
+const LOCK_SCREEN_ROUTE: RouteRecordItem = {
+  path: '/lock',
+  name: 'Lock',
+  component: () => import('@/pages/sys/lock/index.vue'),
+  meta: {
+    title: t('routes.basic.lock'),
+  },
+}
+
+export {
+  LAYOUT,
+  PARENT_LAYOUT,
+  PAGE_NOT_FOUND_ROUTE,
+  REDIRECT_ROUTE,
+  ROOT_ROUTE,
+  LOGIN_ROUTE,
+  LOCK_SCREEN_ROUTE
+}
diff --git a/apps/grid-admin/src/router/routes/index.ts b/apps/grid-admin/src/router/routes/index.ts
new file mode 100644
index 00000000..4e8cdff6
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/index.ts
@@ -0,0 +1,30 @@
+import {
+  LOGIN_ROUTE,
+  PAGE_NOT_FOUND_ROUTE,
+  REDIRECT_ROUTE,
+  ROOT_ROUTE,
+  LOCK_SCREEN_ROUTE
+} from './basic'
+
+export * from './basic'
+
+const routeModuleRecord = import.meta.globEager('./modules/**/*.ts') as any
+
+const routeModules: RouteRecordItem[] = []
+
+Object.keys(routeModuleRecord).forEach((key) => {
+  const routeModule = routeModuleRecord[key].default || {}
+  routeModules.push(
+    ...(Array.isArray(routeModule) ? [...routeModule] : [routeModule]),
+  )
+})
+
+export const asyncRoutes = [...routeModules]
+
+export const routes = [
+  LOGIN_ROUTE,
+  LOCK_SCREEN_ROUTE,
+  ROOT_ROUTE,
+  REDIRECT_ROUTE,
+  PAGE_NOT_FOUND_ROUTE,
+]
diff --git a/apps/grid-admin/src/router/routes/modules/dashboard.ts b/apps/grid-admin/src/router/routes/modules/dashboard.ts
new file mode 100644
index 00000000..c58bacef
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,34 @@
+import { LAYOUT } from '../basic'
+
+const dashboard: RouteRecordItem = {
+  path: '/dashboard',
+  name: 'Dashboard',
+  component: LAYOUT,
+  redirect: '/dashboard/analysis',
+  meta: {
+    orderNo: 1,
+    icon: 'mdi:monitor-dashboard',
+    title: 'routes.dashboard.dashboard',
+  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: () => import('@/pages/dashboard/analysis/index.vue'),
+      meta: {
+        icon: 'mdi:monitor-dashboard',
+        title: 'routes.dashboard.analysis',
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: () => import('@/pages/dashboard/workbench/index.vue'),
+      meta: {
+        title: 'routes.dashboard.workbench',
+      },
+    },
+  ],
+}
+
+export default dashboard
diff --git a/apps/grid-admin/src/router/routes/modules/demo/demo.ts b/apps/grid-admin/src/router/routes/modules/demo/demo.ts
new file mode 100644
index 00000000..4dee29aa
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/demo/demo.ts
@@ -0,0 +1,57 @@
+import {LAYOUT} from '../../basic'
+
+const dashboard: RouteRecordItem = {
+  path: '/demo',
+  name: 'Demo',
+  component: LAYOUT,
+  redirect: '/dashboard/form',
+  meta: {
+    orderNo: 2,
+    icon: 'line-md:clipboard-list-twotone',
+    title: 'routes.demo.demo',
+  },
+  children: [
+    {
+      path: 'table',
+      name: 'Table',
+      redirect: '/demo/form/basic',
+      meta: {
+        title: 'routes.demo.table.table',
+      },
+      children: [{
+        path: 'useTable',
+        name: 'UseTableDemo',
+        component: () => import('@/pages/demo/table/BasicTable.vue'),
+        meta: {
+          title: 'routes.demo.table.basic',
+        },
+      }]
+    },
+    {
+      path: 'form',
+      name: 'Form',
+      component: () => import('@/pages/demo/Form.vue'),
+      meta: {
+        title: 'routes.demo.form',
+      },
+    },
+    {
+      path: 'card',
+      name: 'Card',
+      component: () => import('@/pages/demo/Card.vue'),
+      meta: {
+        title: 'routes.demo.card',
+      },
+    },
+    {
+      path: 'draggable',
+      name: 'Draggable',
+      component: () => import('@/pages/demo/Draggable.vue'),
+      meta: {
+        title: '拖拽',
+      },
+    },
+  ],
+}
+
+export default dashboard
diff --git a/apps/grid-admin/src/router/routes/modules/demo/editor.ts b/apps/grid-admin/src/router/routes/modules/demo/editor.ts
new file mode 100644
index 00000000..72955692
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/demo/editor.ts
@@ -0,0 +1,24 @@
+import { LAYOUT } from '@/router/routes'
+
+const Editor: RouteRecordItem = {
+  path: '/editor',
+  name: 'Editor',
+  component: LAYOUT,
+  meta: {
+    orderNo: 3,
+    title: '编辑器',
+    icon: 'openmoji:code-editor'
+  },
+  children: [
+    {
+      path: 'monaco-editor',
+      name: 'monaco-editor',
+      component: () => import('@/pages/demo/editor/monaco-editor.vue'),
+      meta: {
+        title: 'monaco-editor',
+      },
+    },
+  ],
+}
+
+export default Editor
diff --git a/apps/grid-admin/src/router/routes/modules/demo/page.ts b/apps/grid-admin/src/router/routes/modules/demo/page.ts
new file mode 100644
index 00000000..2c7099b2
--- /dev/null
+++ b/apps/grid-admin/src/router/routes/modules/demo/page.ts
@@ -0,0 +1,13 @@
+const Page: RouteRecordItem = {
+  path: '/pageTest',
+  name: 'PageTest',
+  component: () => import('@/pages/demo/page/index.vue'),
+  meta: {
+    orderNo: 4,
+    title: '非框架页面',
+    icon: 'tabler:frame-off',
+    hideTab: true
+  },
+}
+
+export default Page
diff --git a/apps/grid-admin/src/setting/design.ts b/apps/grid-admin/src/setting/design.ts
new file mode 100644
index 00000000..6ec88ce9
--- /dev/null
+++ b/apps/grid-admin/src/setting/design.ts
@@ -0,0 +1,23 @@
+import {
+  ThemeEnum,
+  SIDE_BAR_BG_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  APP_PRESET_COLOR_LIST
+} from '@vben/constants'
+
+
+export const namespace = 'vben'
+
+export const primaryColor = '#0960bd'
+
+export const darkMode = ThemeEnum.LIGHT
+
+
+export {
+  // app theme preset color
+  SIDE_BAR_BG_COLOR_LIST,
+  // header preset color
+  HEADER_PRESET_BG_COLOR_LIST,
+  // sider preset color
+  APP_PRESET_COLOR_LIST
+}
diff --git a/apps/grid-admin/src/setting/index.ts b/apps/grid-admin/src/setting/index.ts
new file mode 100644
index 00000000..0632d759
--- /dev/null
+++ b/apps/grid-admin/src/setting/index.ts
@@ -0,0 +1,2 @@
+export * from './design'
+export * from './project'
diff --git a/apps/grid-admin/src/setting/project.ts b/apps/grid-admin/src/setting/project.ts
new file mode 100644
index 00000000..b0958a52
--- /dev/null
+++ b/apps/grid-admin/src/setting/project.ts
@@ -0,0 +1,185 @@
+import { ProjectConfig } from '@vben/types'
+import {
+  CacheTypeEnum,
+  ContentLayoutEnum,
+  MenuModeEnum,
+  MenuTypeEnum,
+  MixSidebarTriggerEnum,
+  PermissionModeEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  ThemeEnum,
+  TriggerEnum,
+  RouterTransitionEnum,
+} from '@vben/constants'
+
+import {
+  SIDE_BAR_BG_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  primaryColor,
+} from './design'
+
+// ! You need to clear the browser cache after the change
+export const projectSetting: ProjectConfig = {
+  // Whether to show the configuration button
+  showSettingButton: true,
+
+  // Whether to show the theme switch button
+  showDarkModeToggle: true,
+
+  // `Settings` button position
+  settingButtonPosition: SettingButtonPositionEnum.AUTO,
+
+  // Permission mode
+  permissionMode: PermissionModeEnum.ROUTE_MAPPING,
+
+  // Permission-related cache is stored in sessionStorage or localStorage
+  permissionCacheType: CacheTypeEnum.LOCAL,
+
+  // Session timeout processing
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+
+  // color
+  themeColor: primaryColor,
+
+  // Website gray mode, open for possible mourning dates
+  grayMode: false,
+
+  // Color Weakness Mode
+  colorWeak: false,
+
+  // Whether to cancel the menu, the top, the multi-tab page display, for possible embedded in other systems
+  fullContent: false,
+
+  // content mode
+  contentMode: ContentLayoutEnum.FULL,
+
+  // Whether to display the logo
+  showLogo: true,
+
+  // Whether to show footer
+  showFooter: false,
+
+  // Header configuration
+  headerSetting: {
+    // header bg color
+    bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+    // Fixed at the top
+    fixed: true,
+    // Whether to show top
+    show: true,
+    // theme
+    theme: ThemeEnum.LIGHT,
+    // Whether to enable the lock screen function
+    useLockPage: true,
+    // Whether to show the full screen button
+    showFullScreen: true,
+    // Whether to show the document button
+    showDoc: true,
+    // Whether to show the notification button
+    showNotice: true,
+    // Whether to display the menu search
+    showSearch: true,
+    showLocalePicker: true,
+  },
+
+  // Menu configuration
+  menuSetting: {
+    // sidebar menu bg color
+    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+    //  Whether to fix the left menu
+    fixed: true,
+    // Menu collapse
+    collapsed: false,
+    // Whether to display the menu name when folding the menu
+    collapsedShowTitle: false,
+    // Whether it can be dragged
+    // Only limited to the opening of the left menu, the mouse has a drag bar on the right side of the menu
+    canDrag: false,
+    // Whether to show no dom
+    show: true,
+    // Whether to show dom
+    hidden: false,
+    // Menu width
+    menuWidth: 210,
+    // Menu mode
+    mode: MenuModeEnum.INLINE,
+    // Menu type
+    type: MenuTypeEnum.SIDEBAR,
+    // Menu theme
+    theme: ThemeEnum.DARK,
+    // Split menu
+    split: false,
+    // Top menu layout
+    topMenuAlign: 'center',
+    // Fold trigger position
+    trigger: TriggerEnum.HEADER,
+    // Turn on accordion mode, only show a menu
+    accordion: true,
+    // Switch page to close menu
+    closeMixSidebarOnChange: false,
+    // Module opening method ‘click’ |'hover'
+    mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+    // Fixed expanded menu
+    mixSideFixed: false,
+  },
+  // Transition Setting
+  transitionSetting: {
+    //  Whether to open the page switching animation
+    // The disabled state will also disable pageLoading
+    enable: true,
+
+    // Route basic switching animation
+    basicTransition: RouterTransitionEnum.FADE_SIDE,
+
+    // Whether to open page switching loading
+    // Only open when enable=true
+    openPageLoading: true,
+
+    // Whether to open the top progress bar
+    openNProgress: false,
+  },
+
+  // Multi-label
+  multiTabsSetting: {
+    cache: false,
+    // Turn on
+    show: true,
+    // Is it possible to drag and drop sorting tabs
+    canDrag: true,
+    // Turn on quick actions
+    showQuick: true,
+    // Whether to show the refresh button
+    showRedo: true,
+    // Whether to show the collapse button
+    showFold: true,
+  },
+
+  // Whether to open the top progress bar
+  openNProgress: false,
+
+  // Whether to enable KeepAlive cache is best to close during development, otherwise the cache needs to be cleared every time
+  openKeepAlive: true,
+
+  // Automatic screen lock time, 0 does not lock the screen. Unit minute default 0
+  lockTime: 0,
+
+  // Whether to show breadcrumbs
+  showBreadCrumb: true,
+
+  // Whether to show the breadcrumb icon
+  showBreadCrumbIcon: true,
+
+  // Whether to open back to top
+  useOpenBackTop: true,
+
+  //  Is it possible to embed iframe pages
+  canEmbedIFramePage: true,
+
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: true,
+
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  // If it is enabled, I want to overwrite a single interface. Can be set in a separate interface
+  removeAllHttpPending: false,
+}
diff --git a/apps/grid-admin/src/store/auth.ts b/apps/grid-admin/src/store/auth.ts
new file mode 100644
index 00000000..447126cd
--- /dev/null
+++ b/apps/grid-admin/src/store/auth.ts
@@ -0,0 +1,210 @@
+import { defineStore } from 'pinia'
+import { asyncRoutes, PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
+import { filterTree } from '@vben/utils'
+import { Menu } from '@vben/types'
+import { useConfigStoreWithOut } from './config'
+import { useUserStore } from './user'
+import { getPermCode } from '@/apis/auth'
+import { toRaw } from 'vue'
+import { projectSetting } from '@/setting'
+import { PermissionModeEnum, PageEnum } from '@vben/constants'
+import {
+  flatMultiLevelRoutes,
+  transformObjToRoute,
+  transformRouteToMenu,
+} from '@/router'
+import { getMenuList } from '@/apis/sys'
+
+interface AuthState {
+  // Permission code list
+  permCodeList: string[] | number[]
+  // Whether the route has been dynamically added
+  isDynamicAddedRoute: boolean
+  // To trigger a menu update
+  lastBuildMenuTime: number
+  // Backstage menu list
+  backMenuList: Menu[]
+  frontMenuList: Menu[]
+}
+
+export const useAuthStore = defineStore({
+  id: 'app-auth-store',
+  state: (): AuthState => ({
+    permCodeList: [],
+    // Whether the route has been dynamically added
+    isDynamicAddedRoute: false,
+    // To trigger a menu update
+    lastBuildMenuTime: 0,
+    // Backstage menu list
+    backMenuList: [],
+    // menu List
+    frontMenuList: [],
+  }),
+  getters: {
+    getPermCodeList(): string[] | number[] {
+      return this.permCodeList
+    },
+    getBackMenuList(): Menu[] {
+      return this.backMenuList
+    },
+    getFrontMenuList(): Menu[] {
+      return this.frontMenuList
+    },
+    getLastBuildMenuTime(): number {
+      return this.lastBuildMenuTime
+    },
+    getIsDynamicAddedRoute(): boolean {
+      return this.isDynamicAddedRoute
+    },
+  },
+  actions: {
+    setPermCodeList(codeList: string[]) {
+      this.permCodeList = codeList
+    },
+
+    setBackMenuList(list: Menu[]) {
+      this.backMenuList = list
+      list?.length > 0 && this.setLastBuildMenuTime()
+    },
+
+    setFrontMenuList(list: Menu[]) {
+      this.frontMenuList = list
+    },
+
+    setLastBuildMenuTime() {
+      this.lastBuildMenuTime = new Date().getTime()
+    },
+
+    setDynamicAddedRoute(added: boolean) {
+      this.isDynamicAddedRoute = added
+    },
+    resetState(): void {
+      this.isDynamicAddedRoute = false
+      this.permCodeList = []
+      this.backMenuList = []
+      this.lastBuildMenuTime = 0
+    },
+    async changePermissionCode() {
+      const codeList = await getPermCode()
+      this.setPermCodeList(codeList)
+    },
+    async buildRoutesAction(): Promise<RouteRecordItem[]> {
+      // const { t } = useI18n()
+      const userStore = useUserStore()
+      const configStore = useConfigStoreWithOut()
+
+      let routes: RouteRecordItem[] = []
+      const roleList = toRaw(userStore.getRoles) || []
+      const { permissionMode = projectSetting.permissionMode } =
+        configStore.getProjectConfig
+
+      const routeFilter = (route: RouteRecordItem) => {
+        const { meta } = route
+        const { roles } = meta || {}
+        if (!roles) return true
+        return roleList.some((role) => roles.includes(role))
+      }
+
+      const routeRemoveIgnoreFilter = (route: RouteRecordItem) => {
+        const { meta } = route
+        const { ignoreRoute } = meta || {}
+        return !ignoreRoute
+      }
+
+      /**
+       * @description 根据设置的首页path，修正routes中的affix标记（固定首页）
+       * */
+      const patchHomeAffix = (routes: RouteRecordItem[]) => {
+        if (!routes || routes.length === 0) return
+        let homePath: string =
+          userStore.getUserInfo?.homePath || PageEnum.BASE_HOME
+        function patcher(routes: RouteRecordItem[], parentPath = '') {
+          if (parentPath) parentPath = parentPath + '/'
+          routes.forEach((route: RouteRecordItem) => {
+            const { path, children, redirect } = route
+            const currentPath = path.startsWith('/') ? path : parentPath + path
+            if (currentPath === homePath) {
+              if (redirect) {
+                homePath = route.redirect! as string
+              } else {
+                route.meta = Object.assign({}, route.meta, { affix: true })
+                throw new Error('end')
+              }
+            }
+            children && children.length > 0 && patcher(children, currentPath)
+          })
+        }
+        try {
+          patcher(routes)
+        } catch (e) {
+          // 已处理完毕跳出循环
+        }
+        return
+      }
+
+      switch (permissionMode) {
+        case PermissionModeEnum.ROLE:
+          routes = filterTree(asyncRoutes, routeFilter)
+          routes = routes.filter(routeFilter)
+          // Convert multi-level routing to level 2 routing
+          routes = flatMultiLevelRoutes(routes)
+          break
+
+        case PermissionModeEnum.ROUTE_MAPPING:
+          routes = filterTree(asyncRoutes, routeFilter)
+          routes = routes.filter(routeFilter)
+          const menuList = transformRouteToMenu(routes, true)
+          routes = filterTree(routes, routeRemoveIgnoreFilter)
+          routes = routes.filter(routeRemoveIgnoreFilter)
+          menuList.sort((a, b) => {
+            return (a.meta?.orderNo || 0) - (b.meta?.orderNo || 0)
+          })
+
+          this.setFrontMenuList(menuList as Menu[])
+
+          // Convert multi-level routing to level 2 routing
+          routes = flatMultiLevelRoutes(routes)
+          break
+
+        //  If you are sure that you do not need to do background dynamic permissions, please comment the entire judgment below
+        case PermissionModeEnum.BACK:
+          // const { createMessage } = useMessage()
+
+          // createMessage.loading(t('sys.app.menuLoading'))
+
+          // !Simulate to obtain permission codes from the background,
+          // this function may only need to be executed once, and the actual project can be put at the right time by itself
+          let routeList: RouteRecordItem[] = []
+          try {
+            this.changePermissionCode()
+            routeList = (await getMenuList()) as RouteRecordItem[]
+          } catch (error) {
+            console.error(error)
+          }
+
+          // Dynamically introduce components
+          routeList = transformObjToRoute(routeList)
+
+          //  Background routing to menu structure
+          const backMenuList = transformRouteToMenu(routeList)
+          this.setBackMenuList(backMenuList as Menu[])
+
+          // remove meta.ignoreRoute item
+          routeList = filterTree(routeList, routeRemoveIgnoreFilter)
+          routeList = routeList.filter(routeRemoveIgnoreFilter)
+
+          routeList = flatMultiLevelRoutes(routeList)
+          routes = [PAGE_NOT_FOUND_ROUTE, ...routeList]
+          break
+      }
+
+      patchHomeAffix(routes)
+      return routes
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useAuthStoreWithout() {
+  return useAuthStore()
+}
diff --git a/apps/grid-admin/src/store/config.ts b/apps/grid-admin/src/store/config.ts
new file mode 100644
index 00000000..c6d54ae0
--- /dev/null
+++ b/apps/grid-admin/src/store/config.ts
@@ -0,0 +1,87 @@
+import {
+  BeforeMiniState,
+  HeaderSetting,
+  MenuSetting,
+  MultiTabsSetting,
+  ProjectConfig,
+  TransitionSetting,
+} from '@vben/types'
+import { defineStore } from 'pinia'
+import { deepMerge } from '@vben/utils'
+import { APP_DARK_MODE_KEY_, ThemeEnum } from '@vben/constants'
+import { darkMode, projectSetting } from '@/setting'
+
+export interface ConfigStoreState {
+  darkMode?: ThemeEnum
+  // Page loading status
+  pageLoading: boolean
+  // project config
+  projectConfig: ProjectConfig | null
+  // When the window shrinks, remember some states, and restore these states when the window is restored
+  beforeMiniInfo: BeforeMiniState
+}
+
+export const useConfigStore = defineStore({
+  id: 'app-config-store',
+  persist: {
+    paths: ['darkMode', 'projectConfig'],
+  },
+  state: (): ConfigStoreState => ({
+    darkMode: undefined,
+    pageLoading: false,
+    projectConfig: {} as any,
+    beforeMiniInfo: {},
+  }),
+  getters: {
+    getDarkMode(): ThemeEnum {
+      return (
+        this.darkMode ||
+        (localStorage.getItem(APP_DARK_MODE_KEY_) as ThemeEnum) ||
+        darkMode
+      )
+    },
+    getBeforeMiniInfo(): BeforeMiniState {
+      return this.beforeMiniInfo
+    },
+    getProjectConfig(): ProjectConfig {
+      return this.projectConfig || ({} as ProjectConfig)
+    },
+    getHeaderSetting(): HeaderSetting {
+      return this.getProjectConfig.headerSetting
+    },
+    getMenuSetting(): MenuSetting {
+      return this.getProjectConfig.menuSetting
+    },
+    getMultiTabsSetting(): MultiTabsSetting {
+      return this.getProjectConfig.multiTabsSetting
+    },
+    getPageLoading(): boolean {
+      return this.pageLoading
+    },
+    getTransitionSetting(): TransitionSetting {
+      return this.getProjectConfig.transitionSetting
+    },
+  },
+  actions: {
+    setBeforeMiniInfo(state: BeforeMiniState): void {
+      this.beforeMiniInfo = state
+    },
+    setProjectConfig(config: DeepPartial<ProjectConfig>): void {
+      this.projectConfig = deepMerge(this.projectConfig || {}, config)
+    },
+    setDarkMode(mode: ThemeEnum): void {
+      this.darkMode = mode
+      localStorage.setItem(APP_DARK_MODE_KEY_, mode)
+    },
+    async setPageLoadingAction(loading: boolean): Promise<void> {
+      console.log(loading)
+    },
+    resetProjectConfig() {
+      this.setProjectConfig(projectSetting)
+    },
+  },
+})
+
+export function useConfigStoreWithOut() {
+  return useConfigStore()
+}
diff --git a/apps/grid-admin/src/store/lock.ts b/apps/grid-admin/src/store/lock.ts
new file mode 100644
index 00000000..6296215a
--- /dev/null
+++ b/apps/grid-admin/src/store/lock.ts
@@ -0,0 +1,55 @@
+import type { LockInfo } from '@vben/types'
+import { defineStore } from 'pinia'
+import { useUserStore } from '@/store/user'
+
+interface LockState {
+  lockInfo: Nullable<LockInfo>
+}
+
+export const useLockStore = defineStore({
+  id: 'app-lock',
+  persist: {
+    paths: ['lockInfo'],
+  },
+  state: (): LockState => ({
+    lockInfo: {},
+  }),
+  getters: {
+    getLockInfo(): Nullable<LockInfo> {
+      return this.lockInfo
+    },
+  },
+  actions: {
+    setLockInfo(info: LockInfo) {
+      this.lockInfo = Object.assign({}, this.lockInfo, info)
+    },
+    resetLockInfo() {
+      this.lockInfo = null
+    },
+    async unLock(password?: string) {
+      const userStore = useUserStore()
+      if (this.lockInfo?.pwd === password) {
+        this.resetLockInfo()
+        return true
+      }
+      const tryLogin = async () => {
+        try {
+          const username = userStore.getUserInfo?.username ?? ''
+          const res = await userStore.login({
+            username,
+            password: password!,
+            goHome: false,
+            mode: 'none',
+          })
+          if (res) {
+            this.resetLockInfo()
+          }
+          return res
+        } catch (error) {
+          return false
+        }
+      }
+      return await tryLogin()
+    },
+  },
+})
diff --git a/apps/grid-admin/src/store/modules/app.ts b/apps/grid-admin/src/store/modules/app.ts
new file mode 100644
index 00000000..6b1afc8c
--- /dev/null
+++ b/apps/grid-admin/src/store/modules/app.ts
@@ -0,0 +1,45 @@
+import { defineStore } from 'pinia'
+// import { pinia } from '@/pinia'
+import { resetRouter } from '@/router'
+
+interface AppState {
+  pageLoading: boolean
+}
+let timeId: TimeoutHandle
+export const useAppStore = defineStore({
+  id: 'app',
+  state: (): AppState => ({
+    pageLoading: false,
+  }),
+  getters: {
+    getPageLoading(): boolean {
+      return this.pageLoading
+    },
+  },
+  actions: {
+    setPageLoading(loading: boolean): void {
+      this.pageLoading = loading
+    },
+    async resetAllState() {
+      resetRouter()
+      // Persistent.clearAll()
+    },
+    async setPageLoadingAction(loading: boolean): Promise<void> {
+      if (loading) {
+        clearTimeout(timeId)
+        // Prevent flicker
+        timeId = setTimeout(() => {
+          this.setPageLoading(loading)
+        }, 50)
+      } else {
+        this.setPageLoading(loading)
+        clearTimeout(timeId)
+      }
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useAppStoreWithOut() {
+  return useAppStore()
+}
diff --git a/apps/grid-admin/src/store/multipleTab.ts b/apps/grid-admin/src/store/multipleTab.ts
new file mode 100644
index 00000000..fd896678
--- /dev/null
+++ b/apps/grid-admin/src/store/multipleTab.ts
@@ -0,0 +1,387 @@
+import type {
+  RouteLocationNormalized,
+  RouteLocationRaw,
+  Router,
+} from 'vue-router'
+import { toRaw, unref } from 'vue'
+import { defineStore } from 'pinia'
+
+import { useGo, useRedo } from '@vben/hooks'
+// import { Persistent } from '/@/utils/cache/persistent';
+
+import { PageEnum } from '@vben/constants'
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '@/router/routes/basic'
+import { getRawRoute, RemovableRef } from '@vben/utils'
+import { useUserStore } from '@/store/user'
+// import { useRouter, useRoute } from 'vue-router'
+// import { router } from '@/router'
+// import {debug} from "util";
+//
+// import projectSetting from '/@/settings/projectSetting';
+// import { useUserStore } from '/@/store/user';
+// useUserStore
+export interface MultipleTabState {
+  cacheTabList: Set<string>
+  tabList: RouteLocationNormalized[] | RemovableRef<RouteLocationNormalized[]>
+  lastDragEndIndex: number
+}
+
+function handleGotoPage(router: Router) {
+  const go = useGo(router)
+  go(unref(router.currentRoute).path, true)
+}
+
+const getToTarget = (tabItem: RouteLocationNormalized) => {
+  const { params, path, query } = tabItem
+  return {
+    params: params || {},
+    path,
+    query: query || {},
+  }
+}
+// const TabsStorage = useLocalStorage('MULTIPLE_TABS_KEY', [])
+// const cacheTab = true
+// const cacheTab = projectSetting.multiTabsSetting.cache
+
+export const useMultipleTabStore = defineStore({
+  id: 'app-multiple-tab',
+  persist: {
+    paths: ['tabList'],
+  },
+  state: (): MultipleTabState => ({
+    // Tabs that need to be cached
+    cacheTabList: new Set(),
+    // multiple tab list
+    tabList: [],
+    // Index of the last moved tab
+    lastDragEndIndex: 0,
+  }),
+  getters: {
+    getTabList(): RouteLocationNormalized[] {
+      return this.tabList
+    },
+    getCachedTabList(): string[] {
+      return Array.from(this.cacheTabList)
+    },
+    getLastDragEndIndex(): number {
+      return this.lastDragEndIndex
+    },
+  },
+  actions: {
+    /**
+     * Update the cache according to the currently opened tabs
+     */
+    async updateCacheTab() {
+      const cacheMap: Set<string> = new Set()
+
+      for (const tab of this.tabList) {
+        const item = getRawRoute(tab)
+        // Ignore the cache
+        const needCache = !item.meta?.ignoreKeepAlive
+        if (!needCache) {
+          continue
+        }
+        const name = item.name as string
+        cacheMap.add(name)
+      }
+      this.cacheTabList = cacheMap
+    },
+
+    /**
+     * Refresh tabs
+     */
+    async refreshPage(router: Router) {
+      const { currentRoute } = router
+      const route = unref(currentRoute)
+      const name = route.name
+
+      const findTab = this.getCachedTabList.find((item) => item === name)
+      if (findTab) {
+        this.cacheTabList.delete(findTab)
+      }
+      const redo = useRedo(router)
+      await redo()
+    },
+    clearCacheTabs(): void {
+      this.cacheTabList = new Set()
+    },
+    resetState(): void {
+      this.tabList = []
+      this.clearCacheTabs()
+    },
+    goToPage(router: Router) {
+      const go = useGo(router)
+      const len = this.tabList.length
+      const { path } = unref(router.currentRoute)
+
+      let toPath: PageEnum | string = PageEnum.BASE_HOME
+
+      if (len > 0) {
+        const page = this.tabList[len - 1]
+        const p = page.fullPath || page.path
+        if (p) {
+          toPath = p
+        }
+      }
+      // Jump to the current page and report an error
+      path !== toPath && go(toPath as PageEnum, true)
+    },
+    async checkTab(route: RouteLocationNormalized) {
+      // await router.isReady()
+
+      const { path, name, meta } = getRawRoute(route)
+      // 404  The page does not need to add a tab
+      if (
+        [PageEnum.ERROR_PAGE, PageEnum.BASE_LOGIN, PageEnum.BASE_LOCK].includes(
+          path as PageEnum,
+        ) ||
+        meta?.hideTab ||
+        !name ||
+        [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(
+          name as string,
+        )
+      ) {
+        return
+      }
+      await this.addTab(route)
+    },
+    async addTab(route: RouteLocationNormalized) {
+      const { path, fullPath, params, query, meta } = getRawRoute(route)
+
+      let updateIndex = -1
+      // Existing pages, do not add tabs repeatedly
+      const tabHasExits = this.tabList.some((tab, index) => {
+        updateIndex = index
+        return (tab.fullPath || tab.path) === (fullPath || path)
+      })
+      // If the tab already exists, perform the update operation
+      if (tabHasExits) {
+        const curTab = toRaw(this.tabList)[updateIndex]
+        if (!curTab) {
+          return
+        }
+        curTab.params = params || curTab.params
+        curTab.query = query || curTab.query
+        curTab.fullPath = fullPath || curTab.fullPath
+        this.tabList.splice(updateIndex, 1, curTab)
+      } else {
+        // Add tab
+        // 获取动态路由打开数，超过 0 即代表需要控制打开数
+        const dynamicLevel = meta?.dynamicLevel ?? -1
+        if (dynamicLevel > 0) {
+          // 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
+          // 首先获取到真实的路由，使用配置方式减少计算开销.
+          // const realName: string = path.match(/(\S*)\//)![1];
+          const realPath = meta?.realPath ?? ''
+          // 获取到已经打开的动态路由数, 判断是否大于某一个值
+          if (
+            this.tabList.filter((e) => e.meta?.realPath ?? '' === realPath)
+              .length >= dynamicLevel
+          ) {
+            // 关闭第一个
+            const index = this.tabList.findIndex(
+              (item) => item.meta.realPath === realPath,
+            )
+            index !== -1 && this.tabList.splice(index, 1)
+          }
+        }
+        this.tabList.push(route)
+      }
+      await this.updateCacheTab()
+      // cacheTab && Persistent.setLocal(MULTIPLE_TABS_KEY, this.tabList)
+    },
+
+    async closeTab(tab: RouteLocationNormalized, router: Router) {
+      const close = (route: RouteLocationNormalized) => {
+        const { fullPath, meta: { affix } = {} } = route
+        if (affix) {
+          return
+        }
+        const index = this.tabList.findIndex(
+          (item) => item.fullPath === fullPath,
+        )
+        index !== -1 && this.tabList.splice(index, 1)
+      }
+
+      const { currentRoute, replace } = router
+
+      const { path } = unref(currentRoute)
+      if (path !== tab.path) {
+        // Closed is not the activation tab
+        close(tab)
+        return
+      }
+
+      // Closed is activated atb
+      let toTarget: RouteLocationRaw = {}
+
+      const index = this.tabList.findIndex((item) => item.path === path)
+
+      // If the current is the leftmost tab
+      if (index === 0) {
+        // There is only one tab, then jump to the homepage, otherwise jump to the right tab
+        if (this.tabList.length === 1) {
+          const userStore = useUserStore()
+          toTarget = userStore.getUserInfo?.homePath || PageEnum.BASE_HOME
+        } else {
+          //  Jump to the right tab
+          const page = this.tabList[index + 1]
+          toTarget = getToTarget(page)
+        }
+      } else {
+        // Close the current tab
+        const page = this.tabList[index - 1]
+        toTarget = getToTarget(page)
+      }
+      close(currentRoute.value)
+      await replace(toTarget)
+    },
+
+    // Close according to key
+    async closeTabByKey(key: string, router: Router) {
+      const index = this.tabList.findIndex(
+        (item) => (item.fullPath || item.path) === key,
+      )
+      if (index !== -1) {
+        await this.closeTab(this.tabList[index], router)
+        const { currentRoute, replace } = router
+        // 检查当前路由是否存在于tabList中
+        const isActivated = this.tabList.findIndex((item) => {
+          return item.fullPath === currentRoute.value.fullPath
+        })
+        // 如果当前路由不存在于TabList中，尝试切换到其它路由
+        if (isActivated === -1) {
+          let pageIndex
+          if (index > 0) {
+            pageIndex = index - 1
+          } else if (index < this.tabList.length - 1) {
+            pageIndex = index + 1
+          } else {
+            pageIndex = -1
+          }
+          if (pageIndex >= 0) {
+            const page = this.tabList[index - 1]
+            const toTarget = getToTarget(page)
+            await replace(toTarget)
+          }
+        }
+      }
+    },
+
+    // Sort the tabs
+    async sortTabs(oldIndex: number, newIndex: number) {
+      const currentTab = this.tabList[oldIndex]
+      this.tabList.splice(oldIndex, 1)
+      this.tabList.splice(newIndex, 0, currentTab)
+      this.lastDragEndIndex = this.lastDragEndIndex + 1
+    },
+
+    // Close the tab on the right and jump
+    async closeLeftTabs(route: RouteLocationNormalized, router: Router) {
+      const index = this.tabList.findIndex((item) => item.path === route.path)
+
+      if (index > 0) {
+        const leftTabs = this.tabList.slice(0, index)
+        const pathList: string[] = []
+        for (const item of leftTabs) {
+          const affix = item?.meta?.affix ?? false
+          if (!affix) {
+            pathList.push(item.fullPath)
+          }
+        }
+        this.bulkCloseTabs(pathList)
+      }
+      this.updateCacheTab()
+      handleGotoPage(router)
+    },
+
+    // Close the tab on the left and jump
+    async closeRightTabs(route: RouteLocationNormalized, router: Router) {
+      const index = this.tabList.findIndex(
+        (item) => item.fullPath === route.fullPath,
+      )
+
+      if (index >= 0 && index < this.tabList.length - 1) {
+        const rightTabs = this.tabList.slice(index + 1, this.tabList.length)
+
+        const pathList: string[] = []
+        for (const item of rightTabs) {
+          const affix = item?.meta?.affix ?? false
+          if (!affix) {
+            pathList.push(item.fullPath)
+          }
+        }
+        this.bulkCloseTabs(pathList)
+      }
+      this.updateCacheTab()
+      handleGotoPage(router)
+    },
+
+    async closeAllTab(router: Router) {
+      this.tabList = this.tabList.filter((item) => item?.meta?.affix ?? false)
+      this.clearCacheTabs()
+      this.goToPage(router)
+    },
+
+    /**
+     * Close other tabs
+     */
+    async closeOtherTabs(route: RouteLocationNormalized, router: Router) {
+      const closePathList = this.tabList.map((item) => item.fullPath)
+
+      const pathList: string[] = []
+
+      for (const path of closePathList) {
+        if (path !== route.fullPath) {
+          const closeItem = this.tabList.find((item) => item.path === path)
+          if (!closeItem) {
+            continue
+          }
+          const affix = closeItem?.meta?.affix ?? false
+          if (!affix) {
+            pathList.push(closeItem.fullPath)
+          }
+        }
+      }
+      this.bulkCloseTabs(pathList)
+      this.updateCacheTab()
+      handleGotoPage(router)
+    },
+
+    /**
+     * Close tabs in bulk
+     */
+    async bulkCloseTabs(pathList: string[]) {
+      this.tabList = this.tabList.filter(
+        (item) => !pathList.includes(item.fullPath),
+      )
+    },
+
+    /**
+     * Set tab's title
+     */
+    async setTabTitle(title: string, route: RouteLocationNormalized) {
+      const findTab = this.getTabList.find((item) => item === route)
+      if (findTab) {
+        findTab.meta.title = title
+        await this.updateCacheTab()
+      }
+    },
+    /**
+     * replace tab's path
+     * **/
+    async updateTabPath(fullPath: string, route: RouteLocationNormalized) {
+      const findTab = this.getTabList.find((item) => item === route)
+      if (findTab) {
+        findTab.fullPath = fullPath
+        findTab.path = fullPath
+        await this.updateCacheTab()
+      }
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useMultipleTabWithOut() {
+  return useMultipleTabStore()
+}
diff --git a/apps/grid-admin/src/store/test.ts b/apps/grid-admin/src/store/test.ts
new file mode 100644
index 00000000..6b6e0c3b
--- /dev/null
+++ b/apps/grid-admin/src/store/test.ts
@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia'
+
+export const useTest = defineStore({
+  id: 'use--test',
+  state: () => ({
+    test: '人孔盖福利卡',
+  }),
+  persist: true,
+})
diff --git a/apps/grid-admin/src/store/user.ts b/apps/grid-admin/src/store/user.ts
new file mode 100644
index 00000000..0c1edfee
--- /dev/null
+++ b/apps/grid-admin/src/store/user.ts
@@ -0,0 +1,166 @@
+import type { LoginParams } from '@/apis/auth'
+import { defineStore } from 'pinia'
+import { BASIC_HOME_PATH, BASIC_LOGIN_PATH, PageEnum } from '@vben/constants'
+// import { pinia } from '@/pinia'
+import { router } from '@/router'
+import { doLogoutApi, getUserInfoApi, doLoginApi } from '@/apis/auth'
+import { PAGE_NOT_FOUND_ROUTE } from '@/router/routes'
+import { useAuthStoreWithout } from './auth'
+import { GetUserInfoModel } from '@/apis/sys/user'
+import { UserInfo, RoleInfo } from '@vben/types'
+import { ErrorMessageMode } from '@vben/types'
+import { isArray } from '@vben/utils'
+
+interface UserState {
+  userInfo: Nullable<UserInfo>
+  accessToken?: string
+  roles: RoleInfo[]
+  sessionTimeout?: boolean
+  lastUpdateTime: number
+}
+
+export const useUserStore = defineStore({
+  id: 'app-user-store',
+  persist: {
+    paths: ['userInfo', 'accessToken', 'roles'],
+  },
+  state: (): UserState => ({
+    userInfo: null,
+    accessToken: undefined,
+    roles: [],
+    // Whether the login expired
+    sessionTimeout: false,
+    // Last fetch time
+    lastUpdateTime: 0,
+  }),
+  getters: {
+    getUserInfo(): UserInfo | null {
+      return this.userInfo
+    },
+    getAccessToken(): string | undefined {
+      return this.accessToken
+    },
+    getRoles(): RoleInfo[] {
+      return this.roles.length > 0 ? this.roles : []
+    },
+    getSessionTimeout(): boolean {
+      return !!this.sessionTimeout
+    },
+    getLastUpdateTime(): number {
+      return this.lastUpdateTime
+    },
+  },
+  actions: {
+    setAccessToken(info: string | undefined) {
+      this.accessToken = info ? info : ''
+    },
+    setRoles(roles: RoleInfo[]) {
+      this.roles = roles
+    },
+    setUserInfo(info: UserInfo | null) {
+      this.userInfo = info
+      this.lastUpdateTime = new Date().getTime()
+    },
+    setSessionTimeout(flag: boolean) {
+      this.sessionTimeout = flag
+    },
+    resetState() {
+      this.userInfo = null
+      this.accessToken = undefined
+      this.roles = []
+      this.sessionTimeout = false
+    },
+
+    async login(
+      params: LoginParams & {
+        goHome?: boolean
+        mode?: ErrorMessageMode
+      },
+    ): Promise<UserInfo | null> {
+      try {
+        const { goHome = true, mode, ...loginParams } = params
+        const { accessToken } = await doLoginApi(loginParams, mode)
+
+        // save token
+        this.setAccessToken(accessToken)
+        if (!this.getAccessToken) {
+          return null
+        }
+        const userInfo = await this.getUserInfoAction()
+        if (goHome) {
+          await router.replace(BASIC_HOME_PATH)
+        }
+        return userInfo
+      } catch (error) {
+        return Promise.reject(error)
+      }
+    },
+    async afterLoginAction(goHome?: boolean): Promise<GetUserInfoModel | null> {
+      if (!this.getAccessToken) {
+        return null
+      }
+      // get user info
+      const userInfo = await this.getUserInfoAction()
+
+      const sessionTimeout = this.sessionTimeout
+      if (sessionTimeout) {
+        this.setSessionTimeout(false)
+      } else {
+        const permissionStore = useAuthStoreWithout()
+        if (!permissionStore.isDynamicAddedRoute) {
+          const routes = await permissionStore.buildRoutesAction()
+          routes.forEach((route) => {
+            router.addRoute(route)
+          })
+          router.addRoute(PAGE_NOT_FOUND_ROUTE)
+          permissionStore.setDynamicAddedRoute(true)
+        }
+        goHome &&
+          (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME))
+      }
+      return userInfo
+    },
+
+    async getUserInfoAction(): Promise<UserInfo | null> {
+      if (!this.getAccessToken) {
+        return null
+      }
+
+      const userInfo = (await getUserInfoApi()) as unknown as UserInfo
+      const { roles = [] } = userInfo
+      if (isArray(roles)) {
+        const roleList = roles.map(
+          (item) => item.value,
+        ) as unknown as RoleInfo[]
+        this.setRoles(roleList)
+      } else {
+        userInfo.roles = []
+        this.setRoles([])
+      }
+      this.setUserInfo(userInfo)
+
+      return userInfo
+    },
+
+    async logout(goLogin = false) {
+      if (this.getAccessToken) {
+        try {
+          await doLogoutApi()
+        } catch (error: any) {
+          console.log('logout error:' + error.toString())
+        }
+      }
+      this.setAccessToken(undefined)
+      this.setSessionTimeout(false)
+      this.setUserInfo(null)
+      if (goLogin) {
+        router.push(BASIC_LOGIN_PATH)
+      }
+    },
+  },
+})
+
+// Need to be used outside the setup
+export function useUserStoreWithout() {
+  return useUserStore()
+}
diff --git a/apps/grid-admin/tsconfig.json b/apps/grid-admin/tsconfig.json
new file mode 100644
index 00000000..7cfe3b67
--- /dev/null
+++ b/apps/grid-admin/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "#/*": ["src/*"]
+    },
+    "lib": ["dom", "esnext"],
+    "types": [
+      "vite/client",
+      "@vben/constant",
+      "@vben/types/shims/pinia",
+      "@vben/types/shims/vue-router",
+    ]
+  },
+  "include": [
+    "src",
+    "mock",
+    "vite.config.ts",
+    "../../node_modules/.pnpm/vue@3.2.45/node_modules/vue/macros-global.d.ts"
+  ]
+}
diff --git a/apps/grid-admin/vite.config.ts b/apps/grid-admin/vite.config.ts
new file mode 100644
index 00000000..62f5a739
--- /dev/null
+++ b/apps/grid-admin/vite.config.ts
@@ -0,0 +1,7 @@
+import { createViteConfig } from '@config/vite'
+import { defineConfig, UserConfig } from 'vite'
+
+export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
+  const cfg = await createViteConfig(command, mode, process.cwd(), { preset: 'antd' })
+  return cfg
+})
diff --git a/configs/vite/src/plugins/unocss.ts b/configs/vite/src/plugins/unocss.ts
index 6a534e6f..2b6dd01e 100644
--- a/configs/vite/src/plugins/unocss.ts
+++ b/configs/vite/src/plugins/unocss.ts
@@ -11,6 +11,7 @@ export function configUnocssPlugin() {
     presets: [presetIcons(), presetMini({ dark: 'class' })],
     shortcuts: {
       'flex-center': 'flex justify-center items-center',
+      'grid-center': 'grid place-content-center',
     },
     theme: {
       colors: {
diff --git a/packages/constants/src/appEnum.ts b/packages/constants/src/appEnum.ts
index 8fe8a722..90f32045 100644
--- a/packages/constants/src/appEnum.ts
+++ b/packages/constants/src/appEnum.ts
@@ -11,6 +11,20 @@ export enum ThemeEnum {
   LIGHT = 'light',
 }
 
+/**
+ * @description: Navigation bar mode
+ */
+export enum NavBarModeEnum {
+  // left menu
+  SIDEBAR = 'sidebar',
+  // mix-sidebar
+  MIX_SIDEBAR = 'mix-sidebar',
+  // mixin menu
+  MIX = 'mix',
+  // top menu
+  TOP_MENU = 'top-menu',
+}
+
 export enum SettingButtonPositionEnum {
   AUTO = 'auto',
   HEADER = 'header',
diff --git a/packages/constants/src/menuEnum.ts b/packages/constants/src/menuEnum.ts
index 5903c3e1..98289e33 100644
--- a/packages/constants/src/menuEnum.ts
+++ b/packages/constants/src/menuEnum.ts
@@ -18,6 +18,8 @@ export enum TriggerEnum {
   NONE = 'NONE',
   // 菜单底部
   FOOTER = 'FOOTER',
+  // 菜单中间
+  CENTER = 'CENTER',
   // 头部
   HEADER = 'HEADER',
 }
diff --git a/packages/grid-layouts/index.ts b/packages/grid-layouts/index.ts
new file mode 100644
index 00000000..25ad9b79
--- /dev/null
+++ b/packages/grid-layouts/index.ts
@@ -0,0 +1 @@
+export { default as Layout } from './src/index.vue'
diff --git a/packages/grid-layouts/package.json b/packages/grid-layouts/package.json
new file mode 100644
index 00000000..966f580c
--- /dev/null
+++ b/packages/grid-layouts/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@vben/grid-layouts",
+  "version": "3.0.0-bata.1",
+  "main": "index.ts",
+  "module": "index.ts",
+  "license": "MIT",
+  "scripts": {
+    "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo"
+  },
+  "dependencies": {
+    "@vben/constants": "workspace:*",
+    "@vben/directives": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/locale": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vben/vbencomponents": "workspace:*",
+    "pinia": "^2.0.30",
+    "vue": "3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
+  }
+}
diff --git a/packages/grid-layouts/src/components/Layout.vue b/packages/grid-layouts/src/components/Layout.vue
new file mode 100644
index 00000000..65e9cd9d
--- /dev/null
+++ b/packages/grid-layouts/src/components/Layout.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import LayoutHeader from './composables/LayoutHeader.vue'
+import LayoutSidebar from './composables/LayoutSidebar.vue'
+import LayoutContent from './composables/LayoutContent.vue'
+import LayoutTab from './composables/LayoutTab.vue'
+import Feature from './feature/index.vue'
+import { StoreGeneric, storeToRefs } from 'pinia'
+import {
+  useLayoutHeader,
+  useLayoutSidebar,
+  useLayoutTab,
+  useLayoutContent,
+} from '@vben/stores'
+import {useAppConfig, createGridLayoutListen, createThemeColorListen} from '@vben/hooks'
+import {nextTick, ref} from 'vue'
+import { MaybeElementRef } from '@vben/utils'
+
+const { headerRef } = storeToRefs(useLayoutHeader() as StoreGeneric)
+const { sidebarRef } = storeToRefs(useLayoutSidebar() as StoreGeneric)
+const { tabRef } = storeToRefs(useLayoutTab() as StoreGeneric)
+const { contentRef } = storeToRefs(useLayoutContent() as StoreGeneric)
+const containerRef = ref<MaybeElementRef>(null)
+
+const { navBarMode } = useAppConfig()
+nextTick(()=>{
+  createGridLayoutListen(containerRef)
+  createThemeColorListen(containerRef)
+})
+</script>
+<template>
+  <section
+    ref="containerRef"
+    class="grid-layout-container h-full w-full filter-invert-80"
+    :class="[`${navBarMode}`]"
+  >
+    <LayoutHeader ref="headerRef" />
+    <LayoutSidebar ref="sidebarRef" />
+    <LayoutTab ref="tabRef" />
+    <LayoutContent ref="contentRef" />
+    <Feature />
+  </section>
+</template>
+<style lang="scss">
+.grid-layout-container {
+  display: grid;
+  grid-template-columns: minmax(0, var(--aside-width)) minmax(640px, 1fr);
+  grid-template-rows: var(--header-height) var(--tab-bar-height) 1fr;
+  transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
+  transition-timing-function: var(--transition-bezier);
+  &.sidebar,
+  &.mix-sidebar {
+    grid-template-areas:
+      'grid-sidebar grid-header'
+      'grid-sidebar grid-tab-bar'
+      'grid-sidebar grid-content';
+  }
+  &.mix,
+  &.top-menu {
+    grid-template-areas:
+      'grid-header grid-header'
+      'grid-sidebar grid-tab-bar'
+      'grid-sidebar grid-content';
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/Main.vue b/packages/grid-layouts/src/components/Main.vue
new file mode 100644
index 00000000..7ca3398d
--- /dev/null
+++ b/packages/grid-layouts/src/components/Main.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { useLayoutHeader } from '@vben/stores'
+import {useAppConfig, useAppInject} from '@vben/hooks'
+import { StoreGeneric, storeToRefs } from 'pinia'
+
+const { headerWidth, headerHeight } = storeToRefs(
+  useLayoutHeader() as StoreGeneric,
+)
+const { sidebar } = useAppConfig()
+
+const { isMobile } = useAppInject()
+</script>
+<template>
+  <main class="vben-grid-layout-main">
+    <div>headerWidth: {{ headerWidth }}, headerHeight: {{ headerHeight }}</div>
+    ___________________________________________________________________________
+    <div>useAppConfig : {{ sidebar }}</div>
+    <div>isMobile: {{ isMobile }}</div>
+
+    <VbenButton>
+      大丰收的
+    </VbenButton>
+    <!--    <RouterView />-->
+  </main>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/breadcrumb/index.vue b/packages/grid-layouts/src/components/breadcrumb/index.vue
new file mode 100644
index 00000000..bfb0aba5
--- /dev/null
+++ b/packages/grid-layouts/src/components/breadcrumb/index.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { useAppConfig } from '@vben/hooks'
+
+const { header } = useAppConfig()
+</script>
+<template>
+  <!--  <VbenBreadcrumb>-->
+  <!--    <VbenBreadcrumbItem>-->
+  <!--      -->
+  <!--    </VbenBreadcrumbItem>-->
+  <!--  </VbenBreadcrumb>-->
+  <div v-if="header.showBreadCrumb">breadcrumb</div>
+</template>
diff --git a/packages/grid-layouts/src/components/comm/SecondaryBorder.vue b/packages/grid-layouts/src/components/comm/SecondaryBorder.vue
new file mode 100644
index 00000000..f69f0c49
--- /dev/null
+++ b/packages/grid-layouts/src/components/comm/SecondaryBorder.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  top: { type: Boolean, default: false },
+  bottom: { type: Boolean, default: false },
+  right: { type: Boolean, default: false },
+  left: { type: Boolean, default: false },
+  shadow: { type: Boolean, default: false },
+})
+</script>
+<template>
+  <div
+    class="content-none absolute right-0 bg-[var(--layout-border-color)] transition-colors-300"
+    :class="[
+      top || bottom ? 'h-1px w-full' : 'h-full w-1px',
+      {
+        'top-0': right || left || top,
+        'right-0': right,
+        'bottom-0': bottom,
+        'left-0': left || top || bottom,
+        shadow: shadow,
+      },
+    ]"
+  ></div>
+</template>
diff --git a/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue b/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
new file mode 100644
index 00000000..2ae01435
--- /dev/null
+++ b/packages/grid-layouts/src/components/comm/TopButtonWrapper.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+<template>
+  <!-- 2424 -->
+  <div
+    class="h-full p-x-12px grid-center cursor-pointer hover:bg-[var(--header-action-hover-bg-color)] transition-colors-300"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutContent.vue b/packages/grid-layouts/src/components/composables/LayoutContent.vue
new file mode 100644
index 00000000..3bf776e7
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutContent.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import LayoutFooter from './LayoutFooter.vue'
+import Main from '../Main.vue'
+import { useLayoutFooter } from '@vben/stores'
+import { StoreGeneric, storeToRefs } from 'pinia'
+const { footerRef } = storeToRefs(useLayoutFooter() as StoreGeneric)
+</script>
+<template>
+  <div class="grid-layout-content grid-area-[grid-content] grid">
+    <Main />
+    <LayoutFooter ref="footerRef" />
+  </div>
+</template>
+<style lang="scss">
+.grid-layout-content {
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr minmax(0, var(--footer-height));
+  transition: grid-template-columns 0.3s, grid-template-rows 0.3s;
+  transition-timing-function: var(--transition-bezier);
+}
+</style>
diff --git a/packages/grid-layouts/src/components/composables/LayoutFooter.vue b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
new file mode 100644
index 00000000..6889813f
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutFooter.vue
@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import { useAppConfig } from '@vben/hooks'
+
+const { footer } = useAppConfig()
+</script>
+<template>
+  <footer
+    class="overflow-hidden relative"
+    :class="[footer.visible ? 'visible' : 'invisible']"
+  >
+    footer
+    <SecondaryBorder top />
+  </footer>
+</template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutHeader.vue b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
new file mode 100644
index 00000000..e4687b56
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutHeader.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import Breadcrumb from '../breadcrumb/index.vue'
+import Logo from '../logo/index.vue'
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import FullScreen from '../widgets/FullScreen.vue'
+import Search from '../widgets/Search.vue'
+import Locale from '../widgets/Locale.vue'
+import UserDropdown from '../widgets/UserDropdown.vue'
+import Notify from '../notify/index.vue'
+import Setting from '../widgets/Setting.vue'
+import HeaderTrigger from '../widgets/HeaderTrigger.vue'
+import { useAppConfig } from '@vben/hooks'
+import { computed, unref } from 'vue'
+import { TriggerEnum } from '@vben/constants'
+
+const { isMixSidebar, isTopMenu, isMix, sidebar, menu, header } = useAppConfig()
+
+const showHeaderTrigger = computed(() => {
+  if (
+    unref(isTopMenu) ||
+    (unref(isMix) && unref(menu.split)) ||
+    unref(isMixSidebar)
+  )
+    return false
+  return unref(sidebar).trigger === TriggerEnum.HEADER
+})
+
+const showHeaderLogo = computed(() => {
+  return unref(isTopMenu) || unref(isMix)
+})
+</script>
+<template>
+  <header
+    class="grid-area-[grid-header] grid grid-cols-2 content-center
+    overflow-hidden relative bg-[var(--header-background-color)]
+    color-[var(--header-text-color)] transition-colors-300"
+    :class="[header.visible ? 'visible' : 'invisible']"
+  >
+    <div class="h-[var(--header-height)] grid-col-start-1 grid-col-end-3 flex">
+      <Logo v-if="showHeaderLogo" />
+      <HeaderTrigger v-if="showHeaderTrigger" />
+      <Breadcrumb />
+    </div>
+    <div class="h-[var(--header-height)] grid-col-[min-content] flex">
+      <Search />
+      <Notify />
+      <FullScreen />
+      <Locale />
+      <UserDropdown />
+      <Setting />
+    </div>
+    <SecondaryBorder bottom shadow />
+  </header>
+</template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutSidebar.vue b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
new file mode 100644
index 00000000..4198b098
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutSidebar.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import Logo from '../logo/index.vue'
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import SiderFooterTrigger from '../widgets/SiderFooterTrigger.vue'
+import SiderCenterTrigger from '../widgets/SiderCenterTrigger.vue'
+import { useAppConfig } from '@vben/hooks'
+import { computed, unref } from 'vue'
+import { TriggerEnum } from '@vben/constants'
+
+
+const { isMixSidebar, isTopMenu, sidebar, isSidebar } = useAppConfig()
+
+const showFooterTrigger = computed(() => {
+  if (unref(isMixSidebar)) return true
+  return unref(sidebar).trigger === TriggerEnum.FOOTER
+})
+
+const showCenterTrigger = computed(() => {
+  if (unref(isMixSidebar) || unref(isTopMenu)) return false
+  return unref(sidebar).trigger === TriggerEnum.CENTER
+})
+
+const showSidebarLogo = computed(()=>{
+  return unref(isSidebar) || unref(isMixSidebar)
+})
+</script>
+<template>
+  <div
+    class="grid-area-[grid-sidebar] relative bg-[var(--aside-background-color)] transition-colors-300 color-[var(--aside-text-color)]"
+    :class="[
+      { 'pb-40px': showFooterTrigger },
+      sidebar.visible ? 'visible' : 'invisible overflow-hidden',
+    ]"
+  >
+    <div>
+      <Logo v-if="showSidebarLogo" />
+    </div>
+    <SiderFooterTrigger v-if="showFooterTrigger" />
+    <SiderCenterTrigger v-if="showCenterTrigger" />
+    <SecondaryBorder right />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/composables/LayoutTab.vue b/packages/grid-layouts/src/components/composables/LayoutTab.vue
new file mode 100644
index 00000000..63a847f5
--- /dev/null
+++ b/packages/grid-layouts/src/components/composables/LayoutTab.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import TabRedo from '../tab-bar/TabRedo.vue'
+import TabQuick from '../tab-bar/TabQuick.vue'
+import FoldButton from '../tab-bar/FoldButton.vue'
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+import { useAppConfig } from '@vben/hooks'
+
+const { tabTar } = useAppConfig()
+</script>
+<template>
+  <div
+    class="grid-area-[grid-tab-bar] grid grid-cols-2 content-center overflow-hidden relative dark:dark-800"
+    :class="[tabTar.visible ? 'visible' : 'invisible']"
+  >
+    <div class="h-[var(--tab-bar-height)] grid-col-start-1 grid-col-end-3">
+      Multiple Tab
+    </div>
+    <!--border-b border-[var(&#45;&#45;layout-border-color)]-->
+    <div class="h-[var(--tab-bar-height)] grid-col-[min-content] flex relative">
+      <TabRedo v-if="tabTar.showRedo" />
+      <TabQuick v-if="tabTar.showQuick" />
+      <FoldButton v-if="tabTar.showFold" />
+      <SecondaryBorder bottom />
+    </div>
+    <SecondaryBorder bottom />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/constant.ts b/packages/grid-layouts/src/components/constant.ts
new file mode 100644
index 00000000..98080870
--- /dev/null
+++ b/packages/grid-layouts/src/components/constant.ts
@@ -0,0 +1,112 @@
+import {
+  MenuModeEnum,
+  MenuTypeEnum,
+  ContentLayoutEnum,
+  TopMenuAlignEnum,
+  TriggerEnum,
+  RouterTransitionEnum,
+  MixSidebarTriggerEnum,
+} from '@vben/constants'
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+
+export const navigationBarTypeList = [
+  {
+    title: t('layout.setting.menuTypeSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.SIDEBAR,
+  },
+  {
+    title: t('layout.setting.menuTypeMix'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX,
+  },
+
+  {
+    title: t('layout.setting.menuTypeTopMenu'),
+    mode: MenuModeEnum.HORIZONTAL,
+    type: MenuTypeEnum.TOP_MENU,
+  },
+  {
+    title: t('layout.setting.menuTypeMixSidebar'),
+    mode: MenuModeEnum.INLINE,
+    type: MenuTypeEnum.MIX_SIDEBAR,
+  },
+]
+
+export const contentModeOptions = [
+  {
+    value: ContentLayoutEnum.FULL,
+    label: t('layout.setting.contentModeFull'),
+  },
+  {
+    value: ContentLayoutEnum.FIXED,
+    label: t('layout.setting.contentModeFixed'),
+  },
+]
+
+export const topMenuAlignOptions = [
+  {
+    value: TopMenuAlignEnum.CENTER,
+    label: t('layout.setting.topMenuAlignRight'),
+  },
+  {
+    value: TopMenuAlignEnum.START,
+    label: t('layout.setting.topMenuAlignLeft'),
+  },
+  {
+    value: TopMenuAlignEnum.END,
+    label: t('layout.setting.topMenuAlignCenter'),
+  },
+]
+
+export const getMenuTriggerOptions = (split: boolean) => {
+  return [
+    {
+      value: TriggerEnum.NONE,
+      label: t('layout.setting.menuTriggerNone'),
+    },
+    {
+      value: TriggerEnum.FOOTER,
+      label: t('layout.setting.menuTriggerBottom'),
+    },
+    {
+      value: TriggerEnum.CENTER,
+      label: t('layout.setting.menuTriggerCenter'),
+    },
+    ...(split
+      ? []
+      : [
+          {
+            value: TriggerEnum.HEADER,
+            label: t('layout.setting.menuTriggerTop'),
+          },
+        ]),
+  ]
+}
+
+export const routerTransitionOptions = [
+  RouterTransitionEnum.ZOOM_FADE,
+  RouterTransitionEnum.FADE,
+  RouterTransitionEnum.ZOOM_OUT,
+  RouterTransitionEnum.FADE_SIDE,
+  RouterTransitionEnum.FADE_BOTTOM,
+  RouterTransitionEnum.FADE_SCALE,
+].map((item) => {
+  return {
+    label: item,
+    value: item,
+  }
+})
+
+export const mixSidebarTriggerOptions = [
+  {
+    value: MixSidebarTriggerEnum.HOVER,
+    label: t('layout.setting.triggerHover'),
+  },
+  {
+    value: MixSidebarTriggerEnum.CLICK,
+    label: t('layout.setting.triggerClick'),
+  },
+]
diff --git a/packages/grid-layouts/src/components/feature/index.vue b/packages/grid-layouts/src/components/feature/index.vue
new file mode 100644
index 00000000..df3d2c9c
--- /dev/null
+++ b/packages/grid-layouts/src/components/feature/index.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import SettingDrawer from '../setting-drawer/index.vue'
+import FixedSetting from '../widgets/FixedSetting.vue'
+</script>
+<template>
+  <FixedSetting />
+  <SettingDrawer />
+</template>
diff --git a/packages/grid-layouts/src/components/logo/index.vue b/packages/grid-layouts/src/components/logo/index.vue
new file mode 100644
index 00000000..93436a3c
--- /dev/null
+++ b/packages/grid-layouts/src/components/logo/index.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import logoImg from '@/assets/images/logo.png'
+import { useAppConfig } from '@vben/hooks'
+
+const { isMixSidebar, sidebar, isSidebar, logo, header } = useAppConfig()
+
+const getWidth = computed(() => {
+  if (unref(isSidebar) && unref(sidebar).collapsed)
+    return unref(sidebar).collapsedWidth
+  if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
+  return unref(sidebar).width
+})
+
+const showLogoTitle = computed(() => {
+  if (unref(isSidebar)) return !unref(sidebar).collapsed
+  if (unref(isMixSidebar)) return false
+  return true
+})
+
+const getStyles = computed(() => {
+  return {
+    width: `${unref(getWidth)}px`,
+    height: `${unref(header).height}px`,
+    transition: 'all 0.3s var(--transition-bezier)',
+    'grid-template-columns': `32px ${
+      unref(showLogoTitle) ? 'minmax(0, 1fr)' : 0
+    }`,
+  }
+})
+const title = 'Vben Admin'
+</script>
+<template>
+  <div
+    v-if="logo.show"
+    class="grid grid-cols-2 content-center grid-rows-none pl-8px transition-all-300"
+    :style="getStyles"
+  >
+    <div class="h-32px w-32px">
+      <img class="h-full w-full" :src="logoImg" alt="logo" />
+    </div>
+    <div
+      class="p-x-8px truncate grid content-center font-700 text-16px"
+      :class="[showLogoTitle ? 'visible' : 'invisible']"
+    >
+      <span class="block truncate">
+        {{ title }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/notify/index.vue b/packages/grid-layouts/src/components/notify/index.vue
new file mode 100644
index 00000000..7f0f7655
--- /dev/null
+++ b/packages/grid-layouts/src/components/notify/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <!--    <VbenIconify icon="system-uicons:bell-ringing" />-->
+    <VbenIconify icon="system-uicons:bell-snooze" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/render.ts b/packages/grid-layouts/src/components/render.ts
new file mode 100644
index 00000000..4e287e53
--- /dev/null
+++ b/packages/grid-layouts/src/components/render.ts
@@ -0,0 +1,7 @@
+import { h } from 'vue'
+import { VbenIconify } from '@vben/vbencomponents'
+
+export const renderIcon = (icon: string) => {
+  if (!icon) return undefined
+  return () => h(VbenIconify, { icon })
+}
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
new file mode 100644
index 00000000..68bcaaae
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/DarkModeToggle.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { HandlerSettingEnum, ThemeEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
+
+const { baseHandler, theme } = useAppConfig()
+const handlerThemeModeToggle = (v) => {
+  baseHandler(HandlerSettingEnum.CHANGE_THEME, v)
+}
+</script>
+
+<template>
+  <VbenSpace justify="center">
+    <VbenSwitch
+      :value="theme === ThemeEnum.DARK"
+      @update:value="handlerThemeModeToggle"
+    >
+      <template #checked-icon>
+        <VbenIconify icon="emojione:crescent-moon" hoverPointer />
+      </template>
+      <template #unchecked-icon>
+        <VbenIconify icon="emojione:sun-with-face" hoverPointer />
+      </template>
+    </VbenSwitch>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue b/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
new file mode 100644
index 00000000..2e80e63b
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/HandleButtons.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useI18n } from '@vben/locale'
+import { useAppConfig } from '@vben/hooks'
+
+const { t } = useI18n()
+
+const { copyConfigs, resetAllConfig, clearAndRedo } = useAppConfig()
+</script>
+<template>
+  <VbenSpace vertical>
+    <VbenButton type="info" block @click="copyConfigs">
+      <template #icon>
+        <VbenIconify icon="ant-design:snippets-twotone" />
+      </template>
+      {{ t('layout.setting.copyBtn') }}
+    </VbenButton>
+    <VbenButton type="warning" @click="resetAllConfig" block>
+      <template #icon>
+        <VbenIconify icon="ant-design:reload-outlined" />
+      </template>
+      {{ t('common.resetText') }}
+    </VbenButton>
+    <VbenButton type="error" block @click="clearAndRedo">
+      <template #icon>
+        <VbenIconify icon="ant-design:redo-outlined" />
+      </template>
+      {{ t('layout.setting.clearBtn') }}
+    </VbenButton>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
new file mode 100644
index 00000000..8f638ed7
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InputNumberItem.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup name="InputNumberItem">
+import { PropType } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  def: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  disabled: {
+    type: Boolean,
+  },
+  suffix: { type: String, default: '' },
+})
+
+const { baseHandler } = useAppConfig()
+const onChange = (value) => {
+  baseHandler(props.event, value)
+}
+</script>
+<template>
+  <VbenSpace justify="space-between" align="center">
+    <span>{{ title }}</span>
+    <VbenInputNumber
+      class="w-130px"
+      size="small"
+      v-bind="$attrs"
+      :value="def"
+      :disabled="disabled"
+      @update:value="onChange"
+    >
+      <template #suffix>
+        {{ suffix }}
+      </template>
+    </VbenInputNumber>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
new file mode 100644
index 00000000..7ea8ebc9
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceDisplay.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import SwitchItem from './SwitchItem.vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { useI18n } from '@vben/locale'
+import { useAppConfig } from '@vben/hooks'
+
+const { t } = useI18n()
+
+const {
+  header,
+  sidebar,
+  isHorizontal,
+  isMixSidebar,
+  tabTar,
+  footer,
+  content,
+  grayMode,
+  colorWeak,
+  logo,
+} = useAppConfig()
+</script>
+<template>
+  <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.header')"
+      :def="header.visible"
+      :event="HandlerSettingEnum.HEADER_SHOW"
+    />
+    <SwitchItem
+      :title="t('layout.setting.breadcrumb')"
+      :def="header.showBreadCrumb"
+      :event="HandlerSettingEnum.SHOW_BREADCRUMB"
+      :disabled="!header.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.breadcrumbIcon')"
+      :def="header.showBreadCrumbIcon"
+      :event="HandlerSettingEnum.SHOW_BREADCRUMB_ICON"
+      :disabled="!header.showBreadCrumb || !header.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.sidebar')"
+      :def="sidebar.visible"
+      :event="HandlerSettingEnum.MENU_SHOW_SIDEBAR"
+      :disabled="isHorizontal"
+    />
+    <SwitchItem
+      title="Logo"
+      :def="logo.visible"
+      :event="HandlerSettingEnum.SHOW_LOGO"
+      :disabled="isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabs')"
+      :def="tabTar.visible"
+      :event="HandlerSettingEnum.TABS_SHOW"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabsRedoBtn')"
+      :def="tabTar.showRedo"
+      :event="HandlerSettingEnum.TABS_SHOW_REDO"
+      :disabled="!tabTar.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabsQuickBtn')"
+      :def="tabTar.showQuick"
+      :event="HandlerSettingEnum.TABS_SHOW_QUICK"
+      :disabled="!tabTar.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.tabsFoldBtn')"
+      :def="tabTar.showFold"
+      :event="HandlerSettingEnum.TABS_SHOW_FOLD"
+      :disabled="!tabTar.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.footer')"
+      :def="footer.visible"
+      :event="HandlerSettingEnum.SHOW_FOOTER"
+    />
+    <SwitchItem
+      :title="t('layout.setting.fullContent')"
+      :def="content.fullScreen"
+      :event="HandlerSettingEnum.FULL_CONTENT"
+    />
+    <SwitchItem
+      :title="t('layout.setting.grayMode')"
+      :def="grayMode"
+      :event="HandlerSettingEnum.GRAY_MODE"
+    />
+    <SwitchItem
+      :title="t('layout.setting.colorWeak')"
+      :def="colorWeak"
+      :event="HandlerSettingEnum.COLOR_WEAK"
+    />
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
new file mode 100644
index 00000000..5f51dcb0
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/InterfaceFunction.vue
@@ -0,0 +1,149 @@
+<script lang="ts" setup>
+import SwitchItem from './SwitchItem.vue'
+import SelectItem from './SelectItem.vue'
+import InputNumberItem from './InputNumberItem.vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import {
+  mixSidebarTriggerOptions,
+  topMenuAlignOptions,
+  contentModeOptions,
+  getMenuTriggerOptions,
+} from '../../constant'
+import { useI18n } from '@vben/locale'
+import { useAppConfig } from '@vben/hooks'
+
+const { t } = useI18n()
+
+const {
+  header,
+  sidebar,
+  isHorizontal,
+  isMixSidebar,
+  isTopMenu,
+  content,
+  isMix,
+  menu,
+  lockTime,
+  closeMixSidebarOnChange,
+} = useAppConfig()
+
+const triggerOptions = getMenuTriggerOptions(menu.split)
+</script>
+<template>
+  <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.splitMenu')"
+      :def="menu.split"
+      :event="HandlerSettingEnum.MENU_SPLIT"
+      :disabled="!isMix"
+    />
+    <SwitchItem
+      :title="t('layout.setting.mixSidebarFixed')"
+      :def="menu.mixSideFixed"
+      :event="HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR"
+      :disabled="!isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.closeMixSidebarOnChange')"
+      :def="closeMixSidebarOnChange"
+      :event="HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE"
+      :disabled="!isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuCollapse')"
+      :def="sidebar.collapsed"
+      :event="HandlerSettingEnum.MENU_COLLAPSED"
+      :disabled="isTopMenu"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuDrag')"
+      :def="menu.canDrag"
+      :event="HandlerSettingEnum.MENU_HAS_DRAG"
+      :disabled="!sidebar.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuSearch')"
+      :def="header.showSearch"
+      :event="HandlerSettingEnum.HEADER_SEARCH"
+      :disabled="!header.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.menuAccordion')"
+      :def="menu.accordion"
+      :event="HandlerSettingEnum.MENU_ACCORDION"
+      :disabled="!sidebar.visible || !menu.accordion"
+    />
+    <SwitchItem
+      :title="t('layout.setting.collapseMenuDisplayName')"
+      :def="menu.collapsedShowLabel"
+      :event="HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE"
+      :disabled="!sidebar.collapsed || sidebar.visible || isMixSidebar"
+    />
+    <SwitchItem
+      :title="t('layout.setting.fixedHeader')"
+      :def="header.fixed"
+      :event="HandlerSettingEnum.HEADER_FIXED"
+      :disabled="!header.visible"
+    />
+    <SwitchItem
+      :title="t('layout.setting.fixedSideBar')"
+      :def="sidebar.fixed"
+      :event="HandlerSettingEnum.MENU_FIXED"
+      :disabled="!sidebar.show || isHorizontal || isMixSidebar"
+    />
+    <SelectItem
+      :title="t('layout.setting.mixSidebarTrigger')"
+      :options="mixSidebarTriggerOptions"
+      :def="menu.mixSideTrigger"
+      :event="HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR"
+      :disabled="!isMixSidebar"
+    />
+    <SelectItem
+      :title="t('layout.setting.topMenuLayout')"
+      :options="topMenuAlignOptions"
+      :def="menu.topMenuAlign"
+      :event="HandlerSettingEnum.MENU_TOP_ALIGN"
+      :disabled="
+        !sidebar.show ||
+        isHorizontal ||
+        menu.split ||
+        (!isTopMenu && !menu.split) ||
+        isMixSidebar
+      "
+    />
+    <SelectItem
+      :title="t('layout.setting.menuCollapseButton')"
+      :options="triggerOptions"
+      :def="sidebar.trigger"
+      :event="HandlerSettingEnum.MENU_TRIGGER"
+      :disabled="isMixSidebar || isTopMenu || (isMix && isHorizontal)"
+    />
+    <SelectItem
+      :title="t('layout.setting.contentMode')"
+      :options="contentModeOptions"
+      :def="content.mode"
+      :event="HandlerSettingEnum.CONTENT_MODE"
+    />
+    <InputNumberItem
+      :title="t('layout.setting.autoScreenLock')"
+      :min="0"
+      :def="lockTime"
+      :event="HandlerSettingEnum.LOCK_TIME"
+      :suffix="
+        lockTime === 0
+          ? t('layout.setting.notAutoScreenLock')
+          : t('layout.setting.minute')
+      "
+    />
+    <InputNumberItem
+      :title="t('layout.setting.expandedMenuWidth')"
+      :min="100"
+      :max="240"
+      :step="10"
+      :def="sidebar.width"
+      suffix="px"
+      :event="HandlerSettingEnum.MENU_WIDTH"
+      :disabled="!sidebar.visible"
+    />
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/NavigationBarPicker.vue b/packages/grid-layouts/src/components/setting-drawer/components/NavigationBarPicker.vue
new file mode 100644
index 00000000..37fff21d
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/NavigationBarPicker.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup name="NavigationBarPicker">
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+defineProps({
+  typeList: {
+    type: Array as PropType<object[]>,
+    default: () => [],
+  },
+  def: {
+    type: String,
+    default: '',
+  },
+})
+const emits = defineEmits(['handler'])
+const handlerPicker = (data) => {
+  emits('handler', data)
+}
+</script>
+<template>
+  <div class="setting-navigation-bar-picker">
+    <VbenSpace justify="space-between">
+      <template v-for="(item, index) in typeList" :key="index">
+        <VbenTooltip placement="bottom" trigger="hover">
+          <template #trigger>
+            <div
+              class="h-48px w-56px bg-gray-300 rounded relative shadow-inner box-border cursor-pointer overflow-hidden bar-item"
+              :class="[`bar-item__${item.type}`, { active: item.type == def }]"
+              @click="handlerPicker(item)"
+            >
+              <div class="mix-sidebar"></div>
+            </div>
+          </template>
+          <span>{{ t(item.title) }}</span>
+        </VbenTooltip>
+      </template>
+    </VbenSpace>
+  </div>
+</template>
+<style lang="scss" scoped>
+.setting-navigation-bar-picker {
+  .bar-item {
+    box-shadow: 0px 1px 5px rgba(156, 163, 173, 1);
+    &:hover,
+    &.active {
+      border: 2px solid rgba(6, 96, 189, 1);
+    }
+    &:before,
+    &:after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    &:before {
+      width: 33%;
+      height: 100%;
+      z-index: 1;
+      background-color: rgba(12, 33, 53, 1);
+    }
+    &:after {
+      width: 100%;
+      height: 25%;
+      background-color: rgba(249, 250, 251, 1);
+    }
+  }
+  .bar-item__sidebar {
+    &:before {
+      z-index: 1;
+    }
+  }
+  .bar-item__mix {
+    &:before {
+      width: 33%;
+      height: 100%;
+      background-color: rgba(249, 250, 251, 1);
+    }
+    &:after {
+      z-index: 1;
+      background-color: rgba(12, 33, 53, 1);
+    }
+  }
+  .bar-item__top-menu {
+    &:before {
+      display: none;
+    }
+    &:after {
+      z-index: 1;
+      width: 100%;
+      height: 25%;
+      background-color: rgba(12, 33, 53, 1);
+    }
+  }
+  .bar-item__mix-sidebar {
+    &:before {
+      width: 25%;
+      z-index: 1;
+    }
+    .mix-sidebar {
+      width: 18%;
+      height: 100%;
+      background-color: rgba(249, 250, 251, 1);
+      margin-left: 25%;
+    }
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
new file mode 100644
index 00000000..d1498c96
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/SelectItem.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup name="SelectItem">
+import { PropType, h } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { useI18n } from '@vben/locale'
+import { useAppConfig } from '@vben/hooks'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  def: {
+    type: [String, Number] as PropType<string | number>,
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  disabled: {
+    type: Boolean,
+  },
+  options: { type: Array, default: () => [] },
+})
+
+const { baseHandler } = useAppConfig()
+const onChange = (value) => {
+  baseHandler(props.event, value)
+}
+/*
+ * options 数据传入时,多语言会失效,这里再渲染一遍
+ * */
+function renderLabel(option: { label: string; value: string | number }) {
+  return h('span', {}, t(option.label))
+}
+</script>
+<template>
+  <div class="switch-item">
+    <VbenSpace justify="space-between" align="center">
+      <span>{{ title }}</span>
+      <VbenSelect
+        class="w-130px"
+        size="small"
+        :value="def"
+        :options="options"
+        :disabled="disabled"
+        @update:value="onChange"
+        :render-label="renderLabel"
+      />
+    </VbenSpace>
+  </div>
+</template>
+<style lang="less" scoped></style>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue b/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
new file mode 100644
index 00000000..5661b0e6
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/SwitchItem.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup name="SwitchItem">
+import { PropType } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
+
+const props = defineProps({
+  title: { type: String, default: '' },
+  def: {
+    type: Boolean as PropType<boolean>,
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  disabled: {
+    type: Boolean,
+  },
+})
+
+const { baseHandler } = useAppConfig()
+const onChange = (value) => {
+  baseHandler(props.event, value)
+}
+</script>
+<template>
+  <VbenSpace justify="space-between" align="center">
+    <span>{{ title }}</span>
+    <VbenSwitch :value="def" :disabled="disabled" @update:value="onChange">
+      <template #checked-icon>
+        <VbenIconify icon="ant-design:check-outlined" color="#18A058" />
+      </template>
+      <template #unchecked-icon>
+        <VbenIconify icon="ant-design:close-outlined" color="#BEBEBE" />
+      </template>
+    </VbenSwitch>
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue b/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
new file mode 100644
index 00000000..715f8bca
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/ThemeColorPicker.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup name="ThemeColorPicker">
+import { PropType } from 'vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
+
+const props = defineProps({
+  colorList: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  event: {
+    type: Number as PropType<HandlerSettingEnum>,
+  },
+  def: {
+    type: String,
+    default: '',
+  },
+})
+
+const { baseHandler } = useAppConfig()
+const handleClick = (color) => {
+  baseHandler(props.event, color)
+}
+</script>
+<template>
+  <div class="theme-color-picker">
+    <VbenSpace justify="space-between" :size="0" :wrap="false">
+      <template v-for="color in colorList" :key="color">
+        <span
+          @click="handleClick(color)"
+          class="h-20px w-20px cursor-pointer border rounded-sm box-border border-gray-300 inline-block color-item"
+          :class="{ active: def == color }"
+          :style="{ background: color }"
+        >
+          <VbenSpace v-if="def == color" justify="center">
+            <VbenIconify
+              icon="mingcute:check-fill"
+              color="#D1D5DB"
+              size="18"
+              hover-color="#D1D5DB"
+            />
+          </VbenSpace>
+        </span>
+      </template>
+    </VbenSpace>
+  </div>
+</template>
+<style lang="less" scoped>
+.color-item {
+  &:hover,
+  &.active {
+    border-color: rgba(6, 96, 189, 1);
+  }
+}
+</style>
diff --git a/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
new file mode 100644
index 00000000..6b6a259f
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/components/Transitions.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import SwitchItem from './SwitchItem.vue'
+import SelectItem from './SelectItem.vue'
+import { HandlerSettingEnum } from '@vben/constants'
+import { routerTransitionOptions } from '../../constant'
+import { useI18n } from '@vben/locale'
+import { useAppConfig } from '@vben/hooks'
+
+const { t } = useI18n()
+
+const { transition } = useAppConfig()
+</script>
+<template>
+  <VbenSpace vertical>
+    <SwitchItem
+      :title="t('layout.setting.progress')"
+      :def="transition.openNProgress"
+      :event="HandlerSettingEnum.OPEN_PROGRESS"
+    />
+    <SwitchItem
+      :title="t('layout.setting.switchLoading')"
+      :def="transition.openPageLoading"
+      :event="HandlerSettingEnum.OPEN_PAGE_LOADING"
+    />
+    <SwitchItem
+      :title="t('layout.setting.switchAnimation')"
+      :def="transition.enable"
+      :event="HandlerSettingEnum.OPEN_ROUTE_TRANSITION"
+    />
+    <SelectItem
+      :title="t('layout.setting.animationType')"
+      :options="routerTransitionOptions"
+      :def="transition.basicTransition"
+      :event="HandlerSettingEnum.ROUTER_TRANSITION"
+      :disabled="!transition.enable"
+    />
+  </VbenSpace>
+</template>
diff --git a/packages/grid-layouts/src/components/setting-drawer/index.vue b/packages/grid-layouts/src/components/setting-drawer/index.vue
new file mode 100644
index 00000000..3acf86ce
--- /dev/null
+++ b/packages/grid-layouts/src/components/setting-drawer/index.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { useI18n } from '@vben/locale'
+import { navigationBarTypeList } from '../constant'
+import {
+  HandlerSettingEnum,
+  APP_PRESET_COLOR_LIST,
+  HEADER_PRESET_BG_COLOR_LIST,
+  SIDE_BAR_BG_COLOR_LIST,
+} from '@vben/constants'
+
+import DarkModeToggle from './components/DarkModeToggle.vue'
+import NavigationBarPicker from './components/NavigationBarPicker.vue'
+import ThemeColorPicker from './components/ThemeColorPicker.vue'
+import Transitions from './components/Transitions.vue'
+import InterfaceFunction from './components/InterfaceFunction.vue'
+import InterfaceDisplay from './components/InterfaceDisplay.vue'
+import HandleButtons from './components/HandleButtons.vue'
+import { useAppConfig } from '@vben/hooks'
+const { baseHandler } = useAppConfig()
+
+const { t } = useI18n()
+const {
+  openSettingDrawer,
+  toggleOpenSettingDrawer,
+  isHorizontal,
+  navBarMode,
+  themeColor,
+  header,
+  sidebar,
+} = useAppConfig()
+</script>
+
+<template>
+  <VbenDrawer
+    :show="openSettingDrawer"
+    @update:show="toggleOpenSettingDrawer"
+    :width="330"
+  >
+    <VbenDrawerContent closable>
+      <template #header>{{ t('layout.setting.drawerTitle') }}</template>
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.darkMode') }}
+      </VbenDivider>
+      <DarkModeToggle />
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.navMode') }}
+      </VbenDivider>
+      <NavigationBarPicker
+        :def="navBarMode"
+        :type-list="navigationBarTypeList"
+        @handler="
+          (item) => {
+            baseHandler(HandlerSettingEnum.CHANGE_LAYOUT, {
+              mode: item.mode,
+              type: item.type,
+              split: isHorizontal ? false : undefined,
+            })
+          }
+        "
+      />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.sysTheme') }}
+      </VbenDivider>
+      <ThemeColorPicker
+        :def="themeColor"
+        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.headerTheme') }}
+      </VbenDivider>
+      <ThemeColorPicker
+        :def="header.bgColor"
+        :event="HandlerSettingEnum.HEADER_THEME"
+        :color-list="HEADER_PRESET_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sidebarTheme')
+      }}</VbenDivider>
+
+      <ThemeColorPicker
+        :def="sidebar.bgColor"
+        :event="HandlerSettingEnum.MENU_THEME"
+        :color-list="SIDE_BAR_BG_COLOR_LIST"
+      />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.interfaceFunction') }}
+      </VbenDivider>
+      <InterfaceFunction />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.interfaceDisplay') }}
+      </VbenDivider>
+      <InterfaceDisplay />
+
+      <VbenDivider title-placement="left">
+        {{ t('layout.setting.animation') }}
+      </VbenDivider>
+      <Transitions />
+      <VbenDivider />
+
+      <HandleButtons />
+    </VbenDrawerContent>
+  </VbenDrawer>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/components/tab-bar/FoldButton.vue b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
new file mode 100644
index 00000000..8af927ce
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/FoldButton.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import SuffixItemWrapper from './SuffixItemWrapper.vue'
+import { useAppConfig } from '@vben/hooks'
+import { triggerWindowResize } from '@vben/utils'
+
+const { sidebar, header, setAppConfig } = useAppConfig()
+const getIsUnFold = computed(
+  () => !unref(sidebar).visible && !unref(header).visible,
+)
+
+function handleFold() {
+  const isUnFold = unref(getIsUnFold)
+  setAppConfig({
+    sidebar: { visible: isUnFold, show: isUnFold },
+    header: { visible: isUnFold, show: isUnFold },
+  })
+  triggerWindowResize()
+}
+</script>
+
+<template>
+  <SuffixItemWrapper @click.stop="handleFold">
+    <VbenIconify
+      :icon="getIsUnFold ? 'codicon:screen-normal' : 'codicon:screen-full'"
+    />
+  </SuffixItemWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue b/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
new file mode 100644
index 00000000..12671ca9
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/SuffixItemWrapper.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import SecondaryBorder from '../comm/SecondaryBorder.vue'
+</script>
+<template>
+  <div class="h-full w-36px grid-center cursor-pointer relative color-blue-gray-400 hover:color-blue-gray-800 dark:hover:color-blue-gray-50">
+    <slot></slot>
+    <SecondaryBorder left />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabQuick.vue b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
new file mode 100644
index 00000000..18872a37
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/TabQuick.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import SuffixItemWrapper from './SuffixItemWrapper.vue'
+</script>
+<template>
+  <SuffixItemWrapper>
+    <VbenIconify
+      icon="material-symbols:double-arrow-rounded"
+      class="rotate-90"
+      rotate="90deg"
+    />
+  </SuffixItemWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/tab-bar/TabRedo.vue b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
new file mode 100644
index 00000000..8c4c8b4f
--- /dev/null
+++ b/packages/grid-layouts/src/components/tab-bar/TabRedo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { usePromise } from '@vben/hooks'
+import SuffixItemWrapper from './SuffixItemWrapper.vue'
+
+function reload() {
+  return new Promise(async (resolve) => {
+    // await refreshPage()
+    setTimeout(() => {
+      resolve({})
+    }, 1000)
+  })
+}
+
+const { loading, handleFn: handleRedo } = usePromise(reload, {
+  immediate: false,
+})
+</script>
+
+<template>
+  <SuffixItemWrapper @click="handleRedo">
+    <VbenIconify icon="ep:refresh-right" size="18" :infinite="loading" />
+  </SuffixItemWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/FixedSetting.vue b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
new file mode 100644
index 00000000..5229a269
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/FixedSetting.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { computed, unref } from 'vue'
+import { SettingButtonPositionEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
+const { toggleOpenSettingDrawer, header, settingButtonPosition, content } =
+  useAppConfig()
+
+const getShowSettingFixedButton = computed(() => {
+  if (!unref(header).showSetting) {
+    return false
+  }
+  if (unref(settingButtonPosition) === SettingButtonPositionEnum.AUTO) {
+    return (
+      !unref(header).show ||
+      !unref(header).showSetting ||
+      unref(content).fullScreen
+    )
+  }
+  return unref(settingButtonPosition) === SettingButtonPositionEnum.FIXED
+})
+</script>
+<template>
+  <div
+    v-if="getShowSettingFixedButton"
+    @click.stop="toggleOpenSettingDrawer"
+    class="p-6px grid-center z-999 text-white fixed right-0 top-1/2 translate-y--1/2 border-rd-l bg-[rgba(9,96,189,.9)] cursor-pointer"
+  >
+    <VbenIconify icon="fluent:settings-48-regular" />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/FullScreen.vue b/packages/grid-layouts/src/components/widgets/FullScreen.vue
new file mode 100644
index 00000000..c3837b40
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/FullScreen.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import { useFullscreen } from '@vben/utils'
+import { computed, unref } from 'vue'
+import { useI18n } from '@vben/locale'
+
+const { t } = useI18n()
+
+/**
+ * F11 event cannot be listened to
+ */
+const { isFullscreen, toggle } = useFullscreen()
+
+const getTitle = computed(() => {
+  return unref(isFullscreen)
+    ? t('layout.header.tooltipExitFull')
+    : t('layout.header.tooltipEntryFull')
+})
+</script>
+<template>
+  <VbenPopover :title="getTitle" placement="bottom" :duration="500">
+    <template #trigger>
+      <TopButtonWrapper @click.stop="toggle">
+        <VbenIconify
+          :icon="
+            isFullscreen
+              ? 'mingcute:fullscreen-exit-line'
+              : 'mingcute:fullscreen-line'
+          "
+        />
+      </TopButtonWrapper>
+    </template>
+    <span>{{ getTitle }}</span>
+  </VbenPopover>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue b/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
new file mode 100644
index 00000000..0d3adef2
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/HeaderTrigger.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import { useAppConfig } from '@vben/hooks'
+
+const { sidebar, toggleCollapse } = useAppConfig()
+</script>
+<template>
+  <TopButtonWrapper @click.stop="toggleCollapse">
+    <VbenIconify
+      color="var(--trigger-icon-color)"
+      size="22"
+      :icon="
+        sidebar.collapsed ? 'line-md:menu-fold-right' : 'line-md:menu-fold-left'
+      "
+    />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Locale.vue b/packages/grid-layouts/src/components/widgets/Locale.vue
new file mode 100644
index 00000000..18aecf29
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/Locale.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <VbenIconify icon="carbon:ibm-watson-language-translator" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Search.vue b/packages/grid-layouts/src/components/widgets/Search.vue
new file mode 100644
index 00000000..31d4eb48
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/Search.vue
@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+</script>
+<template>
+  <TopButtonWrapper>
+    <VbenIconify icon="fluent:search-16-regular" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/Setting.vue b/packages/grid-layouts/src/components/widgets/Setting.vue
new file mode 100644
index 00000000..6cb4f996
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/Setting.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import { computed, unref } from 'vue'
+import { SettingButtonPositionEnum } from '@vben/constants'
+import { useAppConfig } from '@vben/hooks'
+
+const { toggleOpenSettingDrawer, header, settingButtonPosition } =
+  useAppConfig()
+
+const getShowSetting = computed(() => {
+  if (!unref(header).showSetting) {
+    return false
+  }
+  if (unref(settingButtonPosition) === SettingButtonPositionEnum.AUTO) {
+    return unref(header).show
+  }
+  return unref(settingButtonPosition) === SettingButtonPositionEnum.HEADER
+})
+</script>
+<template>
+  <TopButtonWrapper
+    v-if="getShowSetting"
+    @click.stop="toggleOpenSettingDrawer"
+  >
+    <VbenIconify icon="fluent:settings-48-regular" />
+  </TopButtonWrapper>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
new file mode 100644
index 00000000..b75bb586
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/SiderCenterTrigger.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useAppConfig } from '@vben/hooks'
+
+const { sidebar, toggleCollapse } = useAppConfig()
+</script>
+<template>
+  <div
+    class="h-24px w-24px cursor-pointer grid-center absolute top-1/2 right-0 z-1 rounded-1/2 translate-1/2 border border-[var(--trigger-border-color)] bg-[var(--trigger-color)] shadow shadow-color-[rgb(0 0 0 / 6%)]"
+    @click.stop="toggleCollapse"
+  >
+    <VbenIconify
+      :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
+      icon="ph:caret-left-bold"
+      hover-color="var(--trigger-hover-icon-color)"
+      color="var(--trigger-icon-color)"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue b/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
new file mode 100644
index 00000000..a13ddb97
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/SiderFooterTrigger.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useAppConfig } from '@vben/hooks'
+
+const { sidebar, toggleCollapse } = useAppConfig()
+</script>
+<template>
+  <div
+    class="h-36px w-full absolute bottom-0 cursor-pointer grid-center bg-[#3b3b3b]"
+    @click.stop="toggleCollapse"
+  >
+    <VbenIconify
+      :class="[sidebar.collapsed ? '-rotate-180' : 'rotate-0']"
+      color="rgba(255, 255, 255, .65)"
+      hover-color="rgba(255, 255, 255, 1)"
+      icon="ph:caret-double-left-bold"
+    />
+  </div>
+</template>
diff --git a/packages/grid-layouts/src/components/widgets/UserDropdown.vue b/packages/grid-layouts/src/components/widgets/UserDropdown.vue
new file mode 100644
index 00000000..21d435b8
--- /dev/null
+++ b/packages/grid-layouts/src/components/widgets/UserDropdown.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import TopButtonWrapper from '../comm/TopButtonWrapper.vue'
+import avatar from '@/assets/images/header.jpg'
+</script>
+<template>
+  <TopButtonWrapper>
+    <div class="flex items-center">
+      <img :src="avatar" class="rd-1/2 w-6 h-6 mr-3" alt="avatar" />
+      <span>Vben Admin</span>
+    </div>
+  </TopButtonWrapper>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/src/index.vue b/packages/grid-layouts/src/index.vue
new file mode 100644
index 00000000..2db24aa0
--- /dev/null
+++ b/packages/grid-layouts/src/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import Layout from './components/Layout.vue'
+</script>
+<template>
+  <Layout></Layout>
+</template>
+<style lang="scss" scoped></style>
diff --git a/packages/grid-layouts/tsconfig.json b/packages/grid-layouts/tsconfig.json
new file mode 100644
index 00000000..53114773
--- /dev/null
+++ b/packages/grid-layouts/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": ".",
+    "lib": ["dom", "esnext"]
+  },
+  "include": []
+}
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index a554c255..07103d22 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -8,8 +8,9 @@
     "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo"
   },
   "dependencies": {
-  "@vben/locale": "workspace:*",
     "@vben/constants": "workspace:*",
+    "@vben/locale": "workspace:*",
+    "@vben/stores": "workspace:*",
     "@vben/utils": "workspace:*",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
@@ -17,6 +18,5 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.6",
     "@vben/types": "workspace:*"
-
   }
 }
diff --git a/packages/hooks/src/config/index.ts b/packages/hooks/src/config/index.ts
new file mode 100644
index 00000000..ddfcd2b2
--- /dev/null
+++ b/packages/hooks/src/config/index.ts
@@ -0,0 +1 @@
+export * from './useAppConfig'
diff --git a/packages/hooks/src/config/useAppConfig.ts b/packages/hooks/src/config/useAppConfig.ts
new file mode 100644
index 00000000..d787a0d0
--- /dev/null
+++ b/packages/hooks/src/config/useAppConfig.ts
@@ -0,0 +1,239 @@
+import {
+  StoreGeneric,
+  storeToRefs,
+  useAppConfig as appConfigStore,
+} from '@vben/stores'
+import { DefineAppConfigOptions } from '@vben/types'
+import { HandlerSettingEnum, ThemeEnum } from '@vben/constants'
+import { _merge, toggleClass } from '@vben/utils'
+import { reactive, unref } from 'vue'
+import { useClipboard, _omit } from '@vben/utils'
+
+type DefineAppConfigStoreGetters = {
+  isSidebar: boolean
+  isTopMenu: boolean
+  isMixSidebar: boolean
+  isMix: boolean
+  isMixMode: boolean
+  isHorizontal: boolean
+}
+export const useAppConfig = () => {
+  const useAppConfigStore = appConfigStore()
+  const appConfigOptions = storeToRefs(
+    useAppConfigStore as StoreGeneric,
+  ) as unknown as DefineAppConfigOptions & DefineAppConfigStoreGetters
+  const { openSettingDrawer, sidebar, grayMode, colorWeak } = appConfigOptions
+  const setAppConfig = (configs: DeepPartial<DefineAppConfigOptions>) => {
+    useAppConfigStore.$patch((state) => {
+      _merge(state, configs)
+    })
+  }
+
+  function toggleOpenSettingDrawer() {
+    useAppConfigStore.setOpenSettingDrawer(!unref(openSettingDrawer))
+  }
+
+  function toggleCollapse() {
+    useAppConfigStore.setSidebar({ collapsed: !unref(sidebar).collapsed })
+  }
+
+  function baseHandler(event: HandlerSettingEnum, value: any) {
+    setAppConfig(handlerResults(event, value, appConfigOptions))
+  }
+
+  function toggleGrayMode(isGrayMode = unref(grayMode)) {
+    toggleClass(isGrayMode, 'gray-mode', document.body)
+  }
+
+  function toggleColorWeak(isColorWeak = colorWeak) {
+    toggleClass(isColorWeak, 'color-weak', document.body)
+  }
+
+  async function copyConfigs() {
+    try {
+      const { copy, isSupported } = useClipboard()
+      if (!isSupported)
+        return console.error('Your browser does not support Clipboard API')
+      const source = reactive(_omit(appConfigOptions, ['openSettingDrawer']))
+      await copy(JSON.stringify(source))
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  function clearAndRedo() {
+    localStorage.clear()
+    sessionStorage.clear()
+    location.reload()
+  }
+
+  function resetAllConfig() {
+    useAppConfigStore.$reset()
+  }
+  return {
+    ...appConfigOptions,
+    setAppConfig,
+    toggleOpenSettingDrawer,
+    baseHandler,
+    copyConfigs,
+    clearAndRedo,
+    resetAllConfig,
+    toggleCollapse,
+    toggleGrayMode,
+    toggleColorWeak,
+  }
+}
+
+function handlerResults(
+  event: HandlerSettingEnum,
+  value: any,
+  configOptions: DefineAppConfigOptions,
+): DeepPartial<DefineAppConfigOptions> {
+  const { themeColor, theme, sidebar, header } = configOptions
+  switch (event) {
+    case HandlerSettingEnum.CHANGE_LAYOUT:
+      const { mode, type, split } = value
+      const splitOpt = split === undefined ? { split } : {}
+      return {
+        navBarMode: type,
+        menu: {
+          ...splitOpt,
+          mode,
+        },
+      }
+
+    case HandlerSettingEnum.CHANGE_THEME_COLOR:
+      if (unref(themeColor) === value) {
+        return {}
+      }
+      // changeTheme(value);
+      return { themeColor: value }
+
+    case HandlerSettingEnum.CHANGE_THEME:
+      if (unref(theme) === value) {
+        return {}
+      }
+      // updateDarkTheme(value);
+      return { theme: value ? ThemeEnum.DARK : ThemeEnum.LIGHT }
+
+    case HandlerSettingEnum.MENU_HAS_DRAG:
+      return { menu: { canDrag: value } }
+
+    case HandlerSettingEnum.MENU_ACCORDION:
+      return { menu: { accordion: value } }
+
+    case HandlerSettingEnum.MENU_TRIGGER:
+      return { sidebar: { trigger: value } }
+
+    case HandlerSettingEnum.MENU_TOP_ALIGN:
+      return { menu: { topMenuAlign: value } }
+
+    case HandlerSettingEnum.MENU_COLLAPSED:
+      return { sidebar: { collapsed: value } }
+
+    case HandlerSettingEnum.MENU_WIDTH:
+      return { sidebar: { width: value } }
+
+    case HandlerSettingEnum.MENU_SHOW_SIDEBAR:
+      return { sidebar: { show: value, visible: value } }
+
+    case HandlerSettingEnum.MENU_COLLAPSED_SHOW_TITLE:
+      return { menu: { collapsedShowLabel: value } }
+
+    case HandlerSettingEnum.MENU_THEME:
+      // updateSidebarBgColor(value);
+      if (unref(sidebar).bgColor === value) return {}
+      return { sidebar: { bgColor: value } }
+
+    case HandlerSettingEnum.MENU_SPLIT:
+      return { menu: { split: value } }
+
+    case HandlerSettingEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
+      return { closeMixSidebarOnChange: value }
+
+    case HandlerSettingEnum.MENU_FIXED:
+      return { sidebar: { fixed: value } }
+
+    case HandlerSettingEnum.MENU_TRIGGER_MIX_SIDEBAR:
+      return { menu: { mixSideTrigger: value } }
+
+    case HandlerSettingEnum.MENU_FIXED_MIX_SIDEBAR:
+      return { menu: { mixSideFixed: value } }
+
+    // ============transition==================
+    case HandlerSettingEnum.OPEN_PAGE_LOADING:
+      return { transition: { openPageLoading: value } }
+
+    case HandlerSettingEnum.ROUTER_TRANSITION:
+      return { transition: { basicTransition: value } }
+
+    case HandlerSettingEnum.OPEN_ROUTE_TRANSITION:
+      return { transition: { enable: value } }
+
+    case HandlerSettingEnum.OPEN_PROGRESS:
+      return { transition: { openNProgress: value } }
+    // ============root==================
+
+    case HandlerSettingEnum.LOCK_TIME:
+      return { lockTime: value }
+
+    case HandlerSettingEnum.FULL_CONTENT:
+      return {
+        content: { fullScreen: value },
+        sidebar: { visible: !value, show: !value },
+        header: { visible: !value, show: !value },
+        tabTar: { visible: !value, show: !value },
+      }
+
+    case HandlerSettingEnum.CONTENT_MODE:
+      return { content: { mode: value } }
+
+    case HandlerSettingEnum.SHOW_BREADCRUMB:
+      return { header: { showBreadCrumb: value } }
+
+    case HandlerSettingEnum.SHOW_BREADCRUMB_ICON:
+      return { header: { showBreadCrumbIcon: value } }
+
+    case HandlerSettingEnum.GRAY_MODE:
+      return { grayMode: value }
+
+    case HandlerSettingEnum.SHOW_FOOTER:
+      return { footer: { show: value, visible: value } }
+
+    case HandlerSettingEnum.COLOR_WEAK:
+      return { colorWeak: value }
+
+    case HandlerSettingEnum.SHOW_LOGO:
+      return { logo: { show: value, visible: value } }
+
+    // ============tabs==================
+    case HandlerSettingEnum.TABS_SHOW_QUICK:
+      return { tabTar: { showQuick: value } }
+
+    case HandlerSettingEnum.TABS_SHOW:
+      return { tabTar: { show: value, visible: value } }
+
+    case HandlerSettingEnum.TABS_SHOW_REDO:
+      return { tabTar: { showRedo: value } }
+
+    case HandlerSettingEnum.TABS_SHOW_FOLD:
+      return { tabTar: { showFold: value } }
+
+    // ============header==================
+    case HandlerSettingEnum.HEADER_THEME:
+      // updateHeaderBgColor(value);
+      if (unref(header).bgColor === value) return {}
+      return { header: { bgColor: value } }
+
+    case HandlerSettingEnum.HEADER_SEARCH:
+      return { header: { showSearch: value } }
+
+    case HandlerSettingEnum.HEADER_FIXED:
+      return { header: { fixed: value } }
+
+    case HandlerSettingEnum.HEADER_SHOW:
+      return { header: { show: value, visible: value } }
+    default:
+      return {}
+  }
+}
diff --git a/packages/hooks/src/event/index.ts b/packages/hooks/src/event/index.ts
new file mode 100644
index 00000000..9db1c087
--- /dev/null
+++ b/packages/hooks/src/event/index.ts
@@ -0,0 +1,2 @@
+export * from './use-breakpoint'
+export * from './use-scroll-to'
diff --git a/packages/hooks/src/event/use-breakpoint.ts b/packages/hooks/src/event/use-breakpoint.ts
new file mode 100644
index 00000000..079dc353
--- /dev/null
+++ b/packages/hooks/src/event/use-breakpoint.ts
@@ -0,0 +1,91 @@
+import { ref, computed, ComputedRef, unref } from 'vue'
+import { screenMap, ScreenSizeEnum, ScreenValueEnum } from '@vben/constants'
+import { useEventListener } from './use-event-listener'
+
+let globalScreenRef: ComputedRef<ScreenSizeEnum | undefined>
+let globalWidthRef: ComputedRef<number>
+let globalRealWidthRef: ComputedRef<number>
+
+export interface CreateCallbackParams {
+  screen: ComputedRef<ScreenSizeEnum | undefined>
+  width: ComputedRef<number>
+  realWidth: ComputedRef<number>
+  screenEnum: typeof ScreenValueEnum
+  screenMap: Map<ScreenSizeEnum, number>
+  sizeEnum: typeof ScreenSizeEnum
+}
+
+export function useBreakpoint() {
+  return {
+    screenRef: computed(() => unref(globalScreenRef)),
+    widthRef: globalWidthRef,
+    screenEnum: ScreenValueEnum,
+    realWidthRef: globalRealWidthRef,
+  }
+}
+
+// Just call it once
+export function createBreakpointListen(
+  fn?: (opt: CreateCallbackParams) => void,
+) {
+  const screenRef = ref<ScreenSizeEnum>(ScreenSizeEnum.XL)
+  const realWidthRef = ref(window.innerWidth)
+
+  function getWindowWidth() {
+    const width = document.body.clientWidth
+    const xs = screenMap.get(ScreenSizeEnum.XS)!
+    const sm = screenMap.get(ScreenSizeEnum.SM)!
+    const md = screenMap.get(ScreenSizeEnum.MD)!
+    const lg = screenMap.get(ScreenSizeEnum.LG)!
+    const xl = screenMap.get(ScreenSizeEnum.XL)!
+    if (width < xs) {
+      screenRef.value = ScreenSizeEnum.XS
+    } else if (width < sm) {
+      screenRef.value = ScreenSizeEnum.SM
+    } else if (width < md) {
+      screenRef.value = ScreenSizeEnum.MD
+    } else if (width < lg) {
+      screenRef.value = ScreenSizeEnum.LG
+    } else if (width < xl) {
+      screenRef.value = ScreenSizeEnum.XL
+    } else {
+      screenRef.value = ScreenSizeEnum.XXL
+    }
+    realWidthRef.value = width
+  }
+
+  useEventListener({
+    el: window,
+    name: 'resize',
+
+    listener: () => {
+      getWindowWidth()
+      resizeFn()
+    },
+    // wait: 100,
+  })
+
+  getWindowWidth()
+  globalScreenRef = computed(() => unref(screenRef))
+  globalWidthRef = computed((): number => screenMap.get(unref(screenRef)!)!)
+  globalRealWidthRef = computed((): number => unref(realWidthRef))
+
+  function resizeFn() {
+    fn?.({
+      screen: globalScreenRef,
+      width: globalWidthRef,
+      realWidth: globalRealWidthRef,
+      screenEnum: ScreenValueEnum,
+      screenMap,
+      sizeEnum: ScreenSizeEnum,
+    })
+  }
+
+  resizeFn()
+  return {
+    screenRef: globalScreenRef,
+    screenEnum: ScreenValueEnum,
+    widthRef: globalWidthRef,
+    realWidthRef: globalRealWidthRef,
+  }
+}
diff --git a/packages/hooks/src/event/use-event-listener.ts b/packages/hooks/src/event/use-event-listener.ts
new file mode 100644
index 00000000..f1bb9f99
--- /dev/null
+++ b/packages/hooks/src/event/use-event-listener.ts
@@ -0,0 +1,61 @@
+import type { Ref } from 'vue'
+import { ref, watch, unref } from 'vue'
+import { useThrottleFn, useDebounceFn } from '@vben/utils'
+
+export type RemoveEventFn = () => void
+export interface UseEventParams {
+  el?: Element | Ref<Element | undefined> | Window | any
+  name: string
+  listener: EventListener
+  options?: boolean | AddEventListenerOptions
+  autoRemove?: boolean
+  isDebounce?: boolean
+  wait?: number
+}
+export function useEventListener({
+  el = window,
+  name,
+  listener,
+  options,
+  autoRemove = true,
+  isDebounce = true,
+  wait = 80,
+}: UseEventParams): { removeEvent: RemoveEventFn } {
+  /* eslint-disable-next-line */
+  let remove: RemoveEventFn = () => {}
+  const isAddRef = ref(false)
+
+  if (el) {
+    const element = ref(el as Element) as Ref<Element>
+
+    const handler = isDebounce
+      ? useDebounceFn(listener, wait)
+      : useThrottleFn(listener, wait)
+    const realHandler = wait ? handler : listener
+    const removeEventListener = (e: Element) => {
+      isAddRef.value = true
+      e.removeEventListener(name, realHandler, options)
+    }
+    const addEventListener = (e: Element) =>
+      e.addEventListener(name, realHandler, options)
+
+    const removeWatch = watch(
+      element,
+      (v, _ov, cleanUp) => {
+        if (v) {
+          !unref(isAddRef) && addEventListener(v)
+          cleanUp(() => {
+            autoRemove && removeEventListener(v)
+          })
+        }
+      },
+      { immediate: true },
+    )
+
+    remove = () => {
+      removeEventListener(element.value)
+      removeWatch()
+    }
+  }
+  return { removeEvent: remove }
+}
diff --git a/packages/hooks/src/event/use-scroll-to.ts b/packages/hooks/src/event/use-scroll-to.ts
new file mode 100644
index 00000000..9ce3e257
--- /dev/null
+++ b/packages/hooks/src/event/use-scroll-to.ts
@@ -0,0 +1,65 @@
+import { isFunction, isUndefined } from '@vben/utils'
+import { ref, unref } from 'vue'
+
+export interface ScrollToParams {
+  el: any
+  to: number
+  duration?: number
+  callback?: () => any
+}
+
+const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
+  t /= d / 2
+  if (t < 1) {
+    return (c / 2) * t * t + b
+  }
+  t--
+  return (-c / 2) * (t * (t - 2) - 1) + b
+}
+const move = (el: HTMLElement, amount: number) => {
+  el.scrollTop = amount
+}
+
+const position = (el: HTMLElement) => {
+  return el.scrollTop
+}
+
+export function useScrollTo({
+  el,
+  to,
+  duration = 500,
+  callback,
+}: ScrollToParams) {
+  const isActiveRef = ref(false)
+  const start = position(el)
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = isUndefined(duration) ? 500 : duration
+
+  const animateScroll = function () {
+    if (!unref(isActiveRef)) {
+      return
+    }
+    currentTime += increment
+    const val = easeInOutQuad(currentTime, start, change, duration)
+    move(el, val)
+    if (currentTime < duration && unref(isActiveRef)) {
+      requestAnimationFrame(animateScroll)
+    } else {
+      if (callback && isFunction(callback)) {
+        callback()
+      }
+    }
+  }
+  const run = () => {
+    isActiveRef.value = true
+    animateScroll()
+  }
+
+  const stop = () => {
+    isActiveRef.value = false
+  }
+
+  return { start: run, stop }
+}
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 1b3a62b3..3f367a53 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -4,3 +4,5 @@ export * from './useTitle'
 export * from './usePage'
 export * from './useContext'
 export * from './useRefs'
+export * from './config'
+export * from './event'
diff --git a/packages/hooks/src/web/index.ts b/packages/hooks/src/web/index.ts
index 8b82d36f..f47471e8 100644
--- a/packages/hooks/src/web/index.ts
+++ b/packages/hooks/src/web/index.ts
@@ -1 +1,5 @@
 export * from './useCopyToClipboard'
+export * from './useLayout'
+export * from './useTheme'
+export * from './useAppInject'
+export * from './useAppContext'
diff --git a/packages/hooks/src/web/useAppContext.ts b/packages/hooks/src/web/useAppContext.ts
new file mode 100644
index 00000000..0ccd38f3
--- /dev/null
+++ b/packages/hooks/src/web/useAppContext.ts
@@ -0,0 +1,17 @@
+import { createContext, useContext } from '../useContext'
+import { InjectionKey, Ref } from 'vue'
+
+export interface AppProviderContextProps {
+  prefixCls: Ref<string>
+  isMobile: Ref<boolean>
+}
+
+const key: InjectionKey<AppProviderContextProps> = Symbol()
+
+export function createAppProviderContext(context: AppProviderContextProps) {
+  return createContext<AppProviderContextProps>(context, key)
+}
+
+export function useAppProviderContext() {
+  return useContext<AppProviderContextProps>(key)
+}
diff --git a/packages/hooks/src/web/useAppInject.ts b/packages/hooks/src/web/useAppInject.ts
new file mode 100644
index 00000000..77d7e2e9
--- /dev/null
+++ b/packages/hooks/src/web/useAppInject.ts
@@ -0,0 +1,10 @@
+import { computed, unref } from 'vue'
+import { useAppProviderContext } from './useAppContext'
+
+export function useAppInject() {
+  const values = useAppProviderContext()
+
+  return {
+    isMobile: computed(() => unref(values.isMobile)),
+  }
+}
diff --git a/packages/hooks/src/web/useCopyToClipboard.ts b/packages/hooks/src/web/useCopyToClipboard.ts
index dc0a7c61..88ccb7a1 100644
--- a/packages/hooks/src/web/useCopyToClipboard.ts
+++ b/packages/hooks/src/web/useCopyToClipboard.ts
@@ -1,78 +1,79 @@
-import { ref, watch } from 'vue';
+import { ref, watch } from 'vue'
 
-import { isUndefined } from '@vben/utils';
+import { isUndefined } from '@vben/utils'
 interface Options {
-  target?: HTMLElement;
+  target?: HTMLElement
 }
 export function useCopyToClipboard(initial?: string) {
-  const clipboardRef = ref(initial || '');
-  const isSuccessRef = ref(false);
-  const copiedRef = ref(false);
+  const clipboardRef = ref(initial || '')
+  const isSuccessRef = ref(false)
+  const copiedRef = ref(false)
   watch(
     clipboardRef,
     (str?: string) => {
       if (!isUndefined(str)) {
-        copiedRef.value = true;
-        isSuccessRef.value = copyTextToClipboard(str);
+        copiedRef.value = true
+        isSuccessRef.value = copyTextToClipboard(str)
       }
     },
     { immediate: !!initial, flush: 'sync' },
-  );
+  )
 
-  return { clipboardRef, isSuccessRef, copiedRef };
+  return { clipboardRef, isSuccessRef, copiedRef }
 }
 
-
-export async function writeTextToClipboard(initial: string){
+export async function writeTextToClipboard(initial: string) {
   try {
-    await navigator.clipboard.writeText(initial);
-  }catch (err: any){
-    throw new Error(err);
+    await navigator.clipboard.writeText(initial)
+  } catch (err: any) {
+    throw new Error(err)
   }
 }
 
-export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
-  console.log('dsfasdf',input)
-  const element = document.createElement('textarea');
-  const previouslyFocusedElement = document.activeElement;
-
-  element.value = input;
+export function copyTextToClipboard(
+  input: string,
+  { target = document.body }: Options = {},
+) {
+  console.log('dsfasdf', input)
+  const element = document.createElement('textarea')
+  const previouslyFocusedElement = document.activeElement
 
-  element.setAttribute('readonly', '');
+  element.value = input
 
-  (element.style as any).contain = 'strict';
-  element.style.position = 'absolute';
-  element.style.left = '-9999px';
-  element.style.fontSize = '12pt';
+  element.setAttribute('readonly', '')
+  ;(element.style as any).contain = 'strict'
+  element.style.position = 'absolute'
+  element.style.left = '-9999px'
+  element.style.fontSize = '12pt'
 
-  const selection = document.getSelection();
-  let originalRange;
+  const selection = document.getSelection()
+  let originalRange
   if (selection && selection.rangeCount > 0) {
-    originalRange = selection.getRangeAt(0);
+    originalRange = selection.getRangeAt(0)
   }
 
-  target.append(element);
-  element.select();
+  target.append(element)
+  element.select()
 
-  element.selectionStart = 0;
-  element.selectionEnd = input.length;
+  element.selectionStart = 0
+  element.selectionEnd = input.length
 
-  let isSuccess = false;
+  let isSuccess = false
   try {
-    isSuccess = document.execCommand('copy');
+    isSuccess = document.execCommand('copy')
   } catch (e: any) {
-    throw new Error(e);
+    throw new Error(e)
   }
 
-  element.remove();
+  element.remove()
 
   if (originalRange && selection) {
-    selection.removeAllRanges();
-    selection.addRange(originalRange);
+    selection.removeAllRanges()
+    selection.addRange(originalRange)
   }
 
   if (previouslyFocusedElement) {
-    (previouslyFocusedElement as HTMLElement).focus();
+    ;(previouslyFocusedElement as HTMLElement).focus()
   }
-  return isSuccess;
+  return isSuccess
 }
diff --git a/packages/hooks/src/web/useLayout.ts b/packages/hooks/src/web/useLayout.ts
new file mode 100644
index 00000000..ee83e92e
--- /dev/null
+++ b/packages/hooks/src/web/useLayout.ts
@@ -0,0 +1,147 @@
+import { useAppConfig } from '../config'
+import { unref, watchEffect } from 'vue'
+import { useLayoutHeader, useLayoutSidebar } from '@vben/stores'
+import {
+  useCssVar,
+  MaybeElementRef,
+  lighten,
+  pickTextColorBasedOnBgColor,
+  darken,
+  addClass,
+} from '@vben/utils'
+
+const HEADER_HEIGHT = '--header-height'
+const HEADER_BG_COLOR_VAR = '--header-background-color'
+const HEADER_TEXT_COLOR_VAR = '--header-text-color'
+const HEADER_ACTION_HOVER_BG_COLOR_VAR = '--header-action-hover-bg-color'
+
+const ASIDE_WIDTH = '--aside-width'
+const ASIDE_DARK_BG_COLOR = '--aside-background-color'
+const ASIDE_TEXT_COLOR_VAR = '--aside-text-color'
+
+const TAB_BAR_HEIGHT = '--tab-bar-height'
+
+const FOOTER_HEIGHT = '--footer-height'
+
+const LIGHT_TEXT_COLOR = 'rgba(0,0,0,.85)'
+const DARK_TEXT_COLOR = '#fff'
+
+export function createThemeColorListen(el: MaybeElementRef | null) {
+  const {
+    sidebar,
+    header,
+    grayMode,
+    colorWeak,
+    theme,
+    toggleGrayMode,
+    toggleColorWeak,
+  } = useAppConfig()
+
+  const { sidebarRef } = useLayoutSidebar()
+  const { headerRef } = useLayoutHeader()
+
+  const headerBgColor = useCssVar(
+    HEADER_BG_COLOR_VAR,
+    headerRef as MaybeElementRef,
+    {
+      initialValue: `${unref(header).bgColor}px`,
+    },
+  )
+
+  const headerTextColor = useCssVar(
+    HEADER_TEXT_COLOR_VAR,
+    headerRef as MaybeElementRef,
+    {
+      initialValue: LIGHT_TEXT_COLOR,
+    },
+  )
+  const headerActionHoverBgColor = useCssVar(
+    HEADER_ACTION_HOVER_BG_COLOR_VAR,
+    headerRef as MaybeElementRef,
+  )
+
+  const sidebarBgColor = useCssVar(
+    ASIDE_DARK_BG_COLOR,
+    sidebarRef as MaybeElementRef,
+    {
+      initialValue: `${unref(sidebar).bgColor}px`,
+    },
+  )
+
+  const asideTextColor = useCssVar(
+    ASIDE_TEXT_COLOR_VAR,
+    sidebarRef as MaybeElementRef,
+    {
+      initialValue: LIGHT_TEXT_COLOR,
+    },
+  )
+
+  watchEffect(() => {
+    headerBgColor.value = unref(header).bgColor
+    headerTextColor.value = pickTextColorBasedOnBgColor(
+      unref(header).bgColor,
+      LIGHT_TEXT_COLOR,
+      DARK_TEXT_COLOR,
+    )
+    headerActionHoverBgColor.value = ['#fff', '#ffffff'].includes(
+      unref(header).bgColor.toLowerCase(),
+    )
+      ? darken(unref(header).bgColor, 6)
+      : lighten(unref(header).bgColor, 6)
+
+    sidebarBgColor.value = unref(sidebar).bgColor
+    asideTextColor.value = pickTextColorBasedOnBgColor(
+      unref(sidebar).bgColor,
+      LIGHT_TEXT_COLOR,
+      DARK_TEXT_COLOR,
+    )
+    toggleGrayMode(unref(grayMode))
+    toggleColorWeak(unref(colorWeak))
+    addClass(document.documentElement, unref(theme))
+  })
+}
+
+export function createGridLayoutListen(el: MaybeElementRef | null) {
+  const { isTopMenu, isMixSidebar, sidebar, header, footer, tabTar } =
+    useAppConfig()
+  const asideWidth = useCssVar(ASIDE_WIDTH, el, {
+    initialValue: `${unref(sidebar).width}px`,
+  })
+  const headerHeight = useCssVar(HEADER_HEIGHT, el, {
+    initialValue: `${unref(header).height}px`,
+  })
+  const tabBarHeight = useCssVar(TAB_BAR_HEIGHT, el, {
+    initialValue: `${unref(tabTar).height}px`,
+  })
+  const footerHeight = useCssVar(FOOTER_HEIGHT, el, {
+    initialValue: `${unref(footer).height}px`,
+  })
+
+  watchEffect(() => {
+    const getAsideWidth = () => {
+      if (unref(isTopMenu) || !unref(sidebar).visible) return 0
+      if (unref(sidebar).collapsed) return unref(sidebar).collapsedWidth
+      if (unref(isMixSidebar)) return unref(sidebar).mixSidebarWidth
+      return unref(sidebar).width
+    }
+
+    const getHeaderHeight = () => {
+      if (!unref(header).visible) return 0
+      return unref(header).height
+    }
+
+    const getTabBarHeight = () => {
+      if (!unref(tabTar).visible) return 0
+      return unref(tabTar).height
+    }
+
+    const getFooterHeight = () => {
+      if (!unref(footer).visible) return 0
+      return unref(footer).height
+    }
+    asideWidth.value = `${getAsideWidth()}px`
+    headerHeight.value = `${getHeaderHeight()}px`
+    tabBarHeight.value = `${getTabBarHeight()}px`
+    footerHeight.value = `${getFooterHeight()}px`
+  })
+}
diff --git a/packages/hooks/src/web/useTheme.ts b/packages/hooks/src/web/useTheme.ts
new file mode 100644
index 00000000..e245daaa
--- /dev/null
+++ b/packages/hooks/src/web/useTheme.ts
@@ -0,0 +1,27 @@
+import { useAppConfig } from '../config'
+import { ThemeEnum } from '@vben/constants'
+import { useEventListener } from '@vben/utils'
+import { computed, unref } from 'vue'
+
+export function createMediaPrefersColorSchemeListen() {
+  const { setAppConfig } = useAppConfig()
+  // 监听系统主题
+  useEventListener(
+    window.matchMedia('(prefers-color-scheme: dark)'),
+    'change',
+    (e: Event) => {
+      // @ts-ignore
+      setAppConfig({ theme: e.matches ? ThemeEnum.DARK : ThemeEnum.LIGHT })
+    },
+  )
+}
+
+export const useAppTheme = () => {
+  const { theme } = useAppConfig()
+
+  const isDark = computed(() => {
+    return unref(theme) === ThemeEnum.DARK
+  })
+
+  return { isDark, theme }
+}
diff --git a/packages/layouts/package.json b/packages/layouts/package.json
index 5f6124f4..248f1c4d 100644
--- a/packages/layouts/package.json
+++ b/packages/layouts/package.json
@@ -12,7 +12,6 @@
     "@vben/directives": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/locale": "workspace:*",
-    "@vben/pinia": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/vbencomponents": "workspace:*",
diff --git a/packages/layouts/src/components/lock/LockModal.vue b/packages/layouts/src/components/lock/LockModal.vue
index 8c9b66e8..19219198 100644
--- a/packages/layouts/src/components/lock/LockModal.vue
+++ b/packages/layouts/src/components/lock/LockModal.vue
@@ -1,25 +1,25 @@
 <script lang="ts" setup>
-import {defineProps, computed, ref} from "vue";
-import {useI18n} from '@vben/locale'
-import {useForm} from '@vben/vbencomponents'
-import {context} from '../../../bridge'
+import { computed, ref } from 'vue'
+import { useI18n } from '@vben/locale'
+import { useForm } from '@vben/vbencomponents'
+import { context } from '../../../bridge'
 import headerImg from '@/assets/images/header.jpg'
 
-const {t} = useI18n();
+const { t } = useI18n()
 
 const props = defineProps({
   show: {
-    type: Boolean
-  }
+    type: Boolean,
+  },
 })
 
-const {useUserStore, useLockStore} = context
+const { useUserStore, useLockStore } = context
 const userStore = useUserStore()
 const lockStore = useLockStore()
 const getUserInfo = computed(() => {
-  const {realName = 'Vben Admin', avatar, desc} = userStore.getUserInfo || {}
+  const { realName = 'Vben Admin', avatar, desc } = userStore.getUserInfo || {}
 
-  return {realName, avatar: avatar || headerImg, desc}
+  return { realName, avatar: avatar || headerImg, desc }
 })
 const emits = defineEmits(['update:show'])
 
@@ -27,11 +27,11 @@ const showModal = computed({
   get: () => props.show,
   set: (val) => {
     emits('update:show', val)
-  }
+  },
 })
 
 const formRef = ref(undefined)
-const [register, {getFieldValue, validate}] = useForm({
+const [register, { getFieldValue, validate }] = useForm({
   schemas: [
     {
       gridItemProps: {
@@ -42,52 +42,54 @@ const [register, {getFieldValue, validate}] = useForm({
       component: 'InputPassword',
       componentProps: {
         placeholder: t('layout.header.lockScreenPassword'),
-        showPasswordOn: 'mousedown'
+        showPasswordOn: 'mousedown',
       },
       rule: {
         required: true,
         message: t('layout.header.lockScreenPassword'),
-        trigger: ['input', 'blur']
-      }
-    }
-  ]
+        trigger: ['input', 'blur'],
+      },
+    },
+  ],
 })
 
 const formModel = ref({
-  password: ''
+  password: '',
 })
 
 const handleLock = async () => {
   await validate((errors) => {
     if (!errors) {
-      const {password} = getFieldValue();
+      const { password } = getFieldValue()
       lockStore.setLockInfo({
         isLock: true,
         pwd: password,
-      });
+      })
     }
   })
 }
-
 </script>
 
 <template>
-  <VbenModal v-model:show="showModal" :title="t('layout.header.lockScreen')" preset="card">
+  <VbenModal
+    v-model:show="showModal"
+    :title="t('layout.header.lockScreen')"
+    preset="card"
+  >
     <VbenSpace vertical align="center">
-      <VbenAvatar
-        round
-        :size="64"
-        :src="getUserInfo.avatar"
-      />
+      <VbenAvatar round :size="64" :src="getUserInfo.avatar" />
       <VbenH5>{{ getUserInfo.realName }}</VbenH5>
     </VbenSpace>
-    <VbenForm @register="register" ref="formRef" v-model:model="formModel" label-placement="left"/>
+    <VbenForm
+      @register="register"
+      ref="formRef"
+      v-model:model="formModel"
+      label-placement="left"
+    />
     <VbenButton type="info" block @click="handleLock">
-      {{ t('layout.header.lockScreenBtn')}}
+      {{ t('layout.header.lockScreenBtn') }}
     </VbenButton>
   </VbenModal>
 </template>
 
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>
diff --git a/packages/layouts/src/components/setting/components/SettingDrawer.vue b/packages/layouts/src/components/setting/components/SettingDrawer.vue
index 7ab1992f..6b0c2b20 100644
--- a/packages/layouts/src/components/setting/components/SettingDrawer.vue
+++ b/packages/layouts/src/components/setting/components/SettingDrawer.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {ref, defineProps} from 'vue'
 import DarkModeToggle from './DarkModeToggle.vue'
 import NavigationBarPicker from './NavigationBarPicker.vue'
 import ThemeColorPicker from './ThemeColorPicker.vue'
@@ -12,35 +11,27 @@ import {
   APP_PRESET_COLOR_LIST,
   HEADER_PRESET_BG_COLOR_LIST,
   SIDE_BAR_BG_COLOR_LIST,
-  HandlerSettingEnum
+  HandlerSettingEnum,
 } from '@vben/constants'
-import {context} from '../../../../bridge'
-import {navigationBarTypeList} from '../constant'
-import {useI18n} from '@vben/locale'
+import { context } from '../../../../bridge'
+import { navigationBarTypeList } from '../constant'
+import { useI18n } from '@vben/locale'
 
-const {t} = useI18n();
+const { t } = useI18n()
 
-const {
-  useMenuSetting,
-  useHeaderSetting,
-  useRootSetting,
-} = context
+const { useMenuSetting, useHeaderSetting, useRootSetting } = context
 
-const {
-  getShowDarkModeToggle,
-  getThemeColor,
-} = useRootSetting();
-const {getIsHorizontal,getMenuType, getMenuBgColor} = useMenuSetting();
-const {getHeaderBgColor} = useHeaderSetting();
+const { getShowDarkModeToggle, getThemeColor } = useRootSetting()
+const { getIsHorizontal, getMenuType, getMenuBgColor } = useMenuSetting()
+const { getHeaderBgColor } = useHeaderSetting()
 
 defineProps({
-  visible: {type: Boolean, default: false}
+  visible: { type: Boolean, default: false },
 })
-const emit = defineEmits(["update:visible"]);
-const onVisible = (show: boolean)=>{
+const emit = defineEmits(['update:visible'])
+const onVisible = (show: boolean) => {
   emit('update:visible', show)
 }
-
 </script>
 
 <template>
@@ -48,32 +39,65 @@ const onVisible = (show: boolean)=>{
     <VbenDrawerContent closable>
       <template #header>{{ t('layout.setting.drawerTitle') }}</template>
       <template v-if="getShowDarkModeToggle">
-        <VbenDivider title-placement="left">{{ t('layout.setting.darkMode') }}</VbenDivider>
-        <DarkModeToggle/>
+        <VbenDivider title-placement="left">{{
+          t('layout.setting.darkMode')
+        }}</VbenDivider>
+        <DarkModeToggle />
       </template>
-      <VbenDivider title-placement="left">{{ t('layout.setting.navMode') }}</VbenDivider>
-      <NavigationBarPicker :def="getMenuType" :type-list="navigationBarTypeList" @handler="(item)=>{
-          baseHandler(HandlerSettingEnum.CHANGE_LAYOUT,{
-            mode: item.mode,
-            type: item.type,
-            split: getIsHorizontal ? false : undefined,
-          })
-        }"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.sysTheme') }}</VbenDivider>
-      <ThemeColorPicker :def="getThemeColor" :event="HandlerSettingEnum.CHANGE_THEME_COLOR" :color-list="APP_PRESET_COLOR_LIST"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.headerTheme') }}</VbenDivider>
-      <ThemeColorPicker :def="getHeaderBgColor" :event="HandlerSettingEnum.HEADER_THEME" :color-list="HEADER_PRESET_BG_COLOR_LIST"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.sidebarTheme') }}</VbenDivider>
-      <ThemeColorPicker :def="getMenuBgColor" :event="HandlerSettingEnum.MENU_THEME" :color-list="SIDE_BAR_BG_COLOR_LIST"/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.interfaceFunction') }}
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.navMode')
+      }}</VbenDivider>
+      <NavigationBarPicker
+        :def="getMenuType"
+        :type-list="navigationBarTypeList"
+        @handler="
+          (item) => {
+            baseHandler(HandlerSettingEnum.CHANGE_LAYOUT, {
+              mode: item.mode,
+              type: item.type,
+              split: getIsHorizontal ? false : undefined,
+            })
+          }
+        "
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sysTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getThemeColor"
+        :event="HandlerSettingEnum.CHANGE_THEME_COLOR"
+        :color-list="APP_PRESET_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.headerTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getHeaderBgColor"
+        :event="HandlerSettingEnum.HEADER_THEME"
+        :color-list="HEADER_PRESET_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.sidebarTheme')
+      }}</VbenDivider>
+      <ThemeColorPicker
+        :def="getMenuBgColor"
+        :event="HandlerSettingEnum.MENU_THEME"
+        :color-list="SIDE_BAR_BG_COLOR_LIST"
+      />
+      <VbenDivider title-placement="left"
+        >{{ t('layout.setting.interfaceFunction') }}
       </VbenDivider>
-      <Features/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.interfaceDisplay') }}</VbenDivider>
-      <Content/>
-      <VbenDivider title-placement="left">{{ t('layout.setting.animation') }}</VbenDivider>
-      <Transitions/>
-      <VbenDivider/>
-      <FooterButtons/>
+      <Features />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.interfaceDisplay')
+      }}</VbenDivider>
+      <Content />
+      <VbenDivider title-placement="left">{{
+        t('layout.setting.animation')
+      }}</VbenDivider>
+      <Transitions />
+      <VbenDivider />
+      <FooterButtons />
     </VbenDrawerContent>
   </VbenDrawer>
 </template>
diff --git a/packages/layouts/src/store/modules/test.ts b/packages/layouts/src/store/modules/test.ts
deleted file mode 100644
index cec98ad0..00000000
--- a/packages/layouts/src/store/modules/test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineStore } from '@vben/pinia'
-
-export const useLayoutTest = defineStore({
-  id: 'use--layout--test',
-  state: () => ({
-    test: 'layout 测试',
-  }),
-  actions: {
-    setTest(value: string) {
-      this.test = value
-    },
-  },
-  persist: true,
-})
diff --git a/packages/locale/src/lang/en/layout.ts b/packages/locale/src/lang/en/layout.ts
index d3c0390c..01824e06 100644
--- a/packages/locale/src/lang/en/layout.ts
+++ b/packages/locale/src/lang/en/layout.ts
@@ -39,6 +39,7 @@ export default {
     menuTriggerNone: 'Not Show',
     menuTriggerBottom: 'Bottom',
     menuTriggerTop: 'Top',
+    menuTriggerCenter: 'Sideways',
     // menu type
     menuTypeSidebar: 'Left menu mode',
     menuTypeMixSidebar: 'Left menu mixed mode',
diff --git a/packages/locale/src/lang/zh-CN/layout.ts b/packages/locale/src/lang/zh-CN/layout.ts
index 3e4e50c0..40f091c4 100644
--- a/packages/locale/src/lang/zh-CN/layout.ts
+++ b/packages/locale/src/lang/zh-CN/layout.ts
@@ -40,6 +40,7 @@ export default {
     menuTriggerNone: '不显示',
     menuTriggerBottom: '底部',
     menuTriggerTop: '顶部',
+    menuTriggerCenter: '侧边',
     // menu type
     menuTypeSidebar: '左侧菜单模式',
     menuTypeMixSidebar: '左侧菜单混合模式',
diff --git a/packages/pinia/src/index.ts b/packages/pinia/src/index.ts
deleted file mode 100644
index 231b2ab8..00000000
--- a/packages/pinia/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pinia'
diff --git a/packages/pinia/index.ts b/packages/stores/index.ts
similarity index 100%
rename from packages/pinia/index.ts
rename to packages/stores/index.ts
diff --git a/packages/pinia/package.json b/packages/stores/package.json
similarity index 73%
rename from packages/pinia/package.json
rename to packages/stores/package.json
index 140c16a1..6098203d 100644
--- a/packages/pinia/package.json
+++ b/packages/stores/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@vben/pinia",
+  "name": "@vben/stores",
   "version": "3.0.0-bata.1",
   "main": "index.ts",
   "module": "index.ts",
@@ -8,9 +8,13 @@
     "clean": "pnpm rimraf node_modules && pnpm rimraf dist && pnpm rimraf .turbo"
   },
   "dependencies": {
+    "@vben/constants": "workspace:*",
     "@vben/utils": "workspace:*",
     "pinia": "^2.0.30",
     "pinia-plugin-persistedstate": "^3.0.2",
     "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
   }
 }
diff --git a/packages/stores/src/index.ts b/packages/stores/src/index.ts
new file mode 100644
index 00000000..354a2cf4
--- /dev/null
+++ b/packages/stores/src/index.ts
@@ -0,0 +1,2 @@
+export * from './pinia'
+export * from './modules/index'
diff --git a/packages/stores/src/modules/appConfig.ts b/packages/stores/src/modules/appConfig.ts
new file mode 100644
index 00000000..878b6621
--- /dev/null
+++ b/packages/stores/src/modules/appConfig.ts
@@ -0,0 +1,244 @@
+import { defineStore } from 'pinia'
+import {
+  ContentConfigOptions,
+  DefineAppConfigOptions,
+  FooterConfigOptions,
+  HeaderConfigOptions,
+  LogoConfigOptions,
+  MenuConfigOptions,
+  SidebarConfigOptions,
+  TabTbrConfigOptions,
+  TransitionConfigOptions,
+} from '@vben/types'
+import { _assign } from '@vben/utils'
+import {
+  CacheTypeEnum,
+  ContentLayoutEnum,
+  HEADER_PRESET_BG_COLOR_LIST,
+  MenuModeEnum,
+  MixSidebarTriggerEnum,
+  NavBarModeEnum,
+  PermissionModeEnum,
+  RouterTransitionEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  SIDE_BAR_BG_COLOR_LIST,
+  ThemeEnum,
+  TriggerEnum,
+} from '@vben/constants'
+
+export const useAppConfig = defineStore({
+  id: 'APP_CONFIG',
+  state: (): DefineAppConfigOptions => ({
+    theme: ThemeEnum.LIGHT,
+    navBarMode: NavBarModeEnum.SIDEBAR,
+    themeColor: '',
+    showThemeModeToggle: true,
+    openKeepAlive: true,
+    useOpenBackTop: true,
+    closeMessageOnSwitch: false,
+    removeAllHttpPending: true,
+    permissionCacheType: CacheTypeEnum.LOCAL,
+    settingButtonPosition: SettingButtonPositionEnum.AUTO,
+    openSettingDrawer: false,
+    permissionMode: PermissionModeEnum.BACK,
+    sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
+    grayMode: false,
+    colorWeak: false,
+    lockTime: 0,
+    useLockPage: false,
+    canEmbedIFramePage: true,
+    closeMixSidebarOnChange: false,
+    sidebar: {
+      show: true,
+      visible: true,
+      bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+      fixed: false,
+      width: 210,
+      mixSidebarWidth: 80,
+      collapsedWidth: 48,
+      collapsed: false,
+      trigger: TriggerEnum.CENTER,
+    },
+    menu: {
+      canDrag: false,
+      split: false,
+      mode: MenuModeEnum.INLINE,
+      accordion: false,
+      collapsedShowLabel: false,
+      mixSideTrigger: MixSidebarTriggerEnum.CLICK,
+      mixSideFixed: false,
+      topMenuAlign: 'start',
+      dropdownPlacement: 'top-start',
+    },
+    header: {
+      show: true,
+      visible: true,
+      bgColor: HEADER_PRESET_BG_COLOR_LIST[0],
+      fixed: false,
+      height: 48,
+      showDoc: true,
+      showBreadCrumb: true,
+      showBreadCrumbIcon: true,
+      showFullScreen: true,
+      showNotice: true,
+      showSearch: true,
+      showLocalePicker: true,
+      showSetting: true,
+    },
+    logo: {
+      show: true,
+      visible: true,
+      showTitle: true,
+    },
+    tabTar: {
+      show: true,
+      visible: true,
+      height: 36,
+      cache: true,
+      canDrag: false,
+      showFold: true,
+      showQuick: true,
+      showRedo: true,
+    },
+    content: {
+      fullScreen: false,
+      mode: ContentLayoutEnum.FULL,
+    },
+    footer: {
+      height: 60,
+      show: false,
+      visible: false,
+    },
+    transition: {
+      enable: true,
+      basicTransition: RouterTransitionEnum.FADE_SIDE,
+      openPageLoading: true,
+      openNProgress: false,
+    },
+  }),
+  getters: {
+    isSidebar: (state) => state.navBarMode === NavBarModeEnum.SIDEBAR,
+    isTopMenu: (state) => state.navBarMode === NavBarModeEnum.TOP_MENU,
+    isMixSidebar: (state) => state.navBarMode === NavBarModeEnum.MIX_SIDEBAR,
+    isMix: (state) => state.navBarMode === NavBarModeEnum.MIX,
+    isMixMode: (state) =>
+      state.menu.mode === MenuModeEnum.INLINE &&
+      state.navBarMode === NavBarModeEnum.MIX,
+    isHorizontal: (state) => state.menu.mode === MenuModeEnum.HORIZONTAL,
+  },
+  actions: {
+    setTheme(value: ThemeEnum) {
+      this.theme = value
+    },
+    setNavBarMode(value: NavBarModeEnum) {
+      this.navBarMode = value
+    },
+    setThemeColor(value: string) {
+      this.themeColor = value
+    },
+    setShowThemeModeToggle(value: boolean) {
+      this.showThemeModeToggle = value
+    },
+    setOpenKeepAlive(value: boolean) {
+      this.openKeepAlive = value
+    },
+    setUseOpenBackTop(value: boolean) {
+      this.useOpenBackTop = value
+    },
+    setCloseMessageOnSwitch(value: boolean) {
+      this.closeMessageOnSwitch = value
+    },
+    setRemoveAllHttpPending(value: boolean) {
+      this.removeAllHttpPending = value
+    },
+    setPermissionCacheType(value: CacheTypeEnum) {
+      this.permissionCacheType = value
+    },
+    setSettingButtonPosition(value: SettingButtonPositionEnum) {
+      this.settingButtonPosition = value
+    },
+    setOpenSettingDrawer(value: boolean) {
+      this.openSettingDrawer = value
+    },
+    setPermissionMode(value: PermissionModeEnum) {
+      this.permissionMode = value
+    },
+    setSessionTimeoutProcessing(value: SessionTimeoutProcessingEnum) {
+      this.sessionTimeoutProcessing = value
+    },
+    setGrayMode(value: boolean) {
+      this.grayMode = value
+    },
+    setColorWeak(value: boolean) {
+      this.colorWeak = value
+    },
+    setLockTime(value: number) {
+      this.lockTime = value
+    },
+    setUseLockPage(value: boolean) {
+      this.useLockPage = value
+    },
+    setCanEmbedIFramePage(value: boolean) {
+      this.canEmbedIFramePage = value
+    },
+    setSidebar(
+      value: Partial<
+        Omit<SidebarConfigOptions, 'mixSidebarWidth' | 'collapsedWidth'>
+      >,
+    ) {
+      _assign(this.sidebar, value)
+    },
+    setMenu(value: Partial<MenuConfigOptions>) {
+      _assign(this.menu, value)
+    },
+    setHeader(value: Partial<Omit<HeaderConfigOptions, 'height'>>) {
+      _assign(this.header, value)
+    },
+    setLogo(value: Partial<LogoConfigOptions>) {
+      _assign(this.logo, value)
+    },
+    setTabTar(value: Partial<TabTbrConfigOptions>) {
+      _assign(this.tabTar, value)
+    },
+    setContent(value: Partial<ContentConfigOptions>) {
+      _assign(this.content, value)
+    },
+    setFooter(value: Partial<Omit<FooterConfigOptions, 'height'>>) {
+      _assign(this.footer, value)
+    },
+    setTransition(value: Partial<TransitionConfigOptions>) {
+      _assign(this.transition, value)
+    },
+  },
+  persist: {
+    // excludedPaths: ['openSettingDrawer'], // Temporarily invalid
+    paths: [
+      'theme',
+      'navBarMode',
+      'themeColor',
+      'showThemeModeToggle',
+      'openKeepAlive',
+      'useOpenBackTop',
+      'closeMessageOnSwitch',
+      'removeAllHttpPending',
+      'permissionCacheType',
+      'settingButtonPosition',
+      'permissionMode',
+      'sessionTimeoutProcessing',
+      'grayMode',
+      'colorWeak',
+      'lockTime',
+      'useLockPage',
+      'canEmbedIFramePage',
+      'sidebar',
+      'menu',
+      'header',
+      'logo',
+      'tabTar',
+      'content',
+      'footer',
+      'transition',
+    ],
+  },
+})
diff --git a/packages/stores/src/modules/index.ts b/packages/stores/src/modules/index.ts
new file mode 100644
index 00000000..fc809df8
--- /dev/null
+++ b/packages/stores/src/modules/index.ts
@@ -0,0 +1,2 @@
+export * from './layoutComposables'
+export * from './appConfig'
diff --git a/packages/stores/src/modules/layoutComposables.ts b/packages/stores/src/modules/layoutComposables.ts
new file mode 100644
index 00000000..b9dfb3f3
--- /dev/null
+++ b/packages/stores/src/modules/layoutComposables.ts
@@ -0,0 +1,65 @@
+import { defineStore } from 'pinia'
+import { useElementSize } from '@vben/utils'
+import { ref } from 'vue'
+
+export const useLayoutHeader = defineStore('LAYOUT_HEADER', () => {
+  const headerRef = ref<HTMLElement>()
+
+  const { height: headerHeight, width: headerWidth } = useElementSize(headerRef)
+
+  return {
+    headerRef,
+    headerHeight,
+    headerWidth,
+  }
+})
+
+export const useLayoutSidebar = defineStore('LAYOUT_SIDEBAR', () => {
+  const sidebarRef = ref<HTMLElement>()
+
+  const { height: sidebarHeight, width: sidebarWidth } =
+    useElementSize(sidebarRef)
+
+  return {
+    sidebarRef,
+    sidebarHeight,
+    sidebarWidth,
+  }
+})
+
+export const useLayoutTab = defineStore('LAYOUT_TAB', () => {
+  const tabRef = ref<HTMLElement>()
+
+  const { height: tabHeight, width: tabWidth } = useElementSize(tabRef)
+
+  return {
+    tabRef,
+    tabHeight,
+    tabWidth,
+  }
+})
+
+export const useLayoutContent = defineStore('LAYOUT_FOOTER', () => {
+  const contentRef = ref<HTMLElement>()
+
+  const { height: contentHeight, width: contentWidth } =
+    useElementSize(contentRef)
+
+  return {
+    contentRef,
+    contentHeight,
+    contentWidth,
+  }
+})
+
+export const useLayoutFooter = defineStore('LAYOUT_FOOTER', () => {
+  const footerRef = ref<HTMLElement>()
+
+  const { height: footerHeight, width: footerWidth } = useElementSize(footerRef)
+
+  return {
+    footerRef,
+    footerHeight,
+    footerWidth,
+  }
+})
diff --git a/packages/pinia/src/persist.ts b/packages/stores/src/persist.ts
similarity index 100%
rename from packages/pinia/src/persist.ts
rename to packages/stores/src/persist.ts
diff --git a/packages/pinia/src/pinia.ts b/packages/stores/src/pinia.ts
similarity index 96%
rename from packages/pinia/src/pinia.ts
rename to packages/stores/src/pinia.ts
index 4355df16..37c34961 100644
--- a/packages/pinia/src/pinia.ts
+++ b/packages/stores/src/pinia.ts
@@ -7,6 +7,7 @@ import { createStorageName } from '@vben/utils'
 const pinia = createPinia()
 
 pinia.use(
+  // @ts-ignore
   createPersistedState(persistGlobalConfig(createStorageName(import.meta.env))),
 )
 
diff --git a/packages/styles/src/common.css b/packages/styles/src/common.css
index fca86706..62ab6c4f 100644
--- a/packages/styles/src/common.css
+++ b/packages/styles/src/common.css
@@ -10,6 +10,9 @@ body {
   overflow: visible !important;
   overflow-x: hidden !important;
 }
+*{
+  box-sizing: border-box;
+}
 
 a:focus,
 a:active,
diff --git a/packages/styles/src/variables.css b/packages/styles/src/variables.css
index aebc45ec..5c0887c1 100644
--- a/packages/styles/src/variables.css
+++ b/packages/styles/src/variables.css
@@ -7,12 +7,56 @@
   /* component */
   --component-background-color: #fff;
 
+  /* transition */
+  --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-all: all 0.3s var(--transition-bezier);
+
+  /* layout start */
+
+  --layout-color: #fff;
+  --layout-border-color: rgb(239, 239, 245);
+
+  /* header */
+  --header-height: 48px;
+  --header-width: calc(100% - var(--aside-width));
+  --header-background-color: #fff;
+  --header-text-color: rgba(0,0,0,0.85);
+  --header-icon-color: var(--header-text-color);
+  --header-action-hover-bg-color: #f6f6f6;
+
+  /* tab */
+  --tab-bar-height: 36px;
+  --tab-bar-width: calc(100% - var(--aside-width));
+
   /* aside */
-  --aside-background-color: #001628;
+  --aside-height: calc(100% - var(--header-height));
+  --aside-width: 210px;
+  --aside-background-color: #001529;
   --aside-submenu-background-color: #0c2135;
+  --aside-text-color: #fff;
+
+  --trigger-color: rgb(72, 72, 78);
+  --trigger-border: 1px solid rgb(239, 239, 245);
+  --trigger-border-color: rgb(239, 239, 245);
+  /*--trigger-border-color: rgb(239, 239, 245);*/
+  --trigger-icon-color: #f3f1f1;
+  /*--trigger-icon-color: rgb(51, 54, 57);*/
+  --trigger-hover-icon-color: #fff;
+
+  /* main */
+  --main-height: calc(100% - var(--footer-height));
+  --main-width: 100%;
+
+  /* footer */
+  --footer-height: 60px;
+  --footer-width: 100%;
+
+  /* layout end */
+
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    visibility: visible;
   }
 }
diff --git a/packages/types/src/config.ts b/packages/types/src/config.ts
index de51fc39..df796429 100644
--- a/packages/types/src/config.ts
+++ b/packages/types/src/config.ts
@@ -1,3 +1,17 @@
+import {
+  CacheTypeEnum,
+  ContentLayoutEnum,
+  MenuModeEnum,
+  NavBarModeEnum,
+  MixSidebarTriggerEnum,
+  PermissionModeEnum,
+  SessionTimeoutProcessingEnum,
+  SettingButtonPositionEnum,
+  ThemeEnum,
+  TriggerEnum,
+  RouterTransitionEnum,
+} from '@vben/constants'
+
 export type LocaleType = 'zh_CN' | 'en'
 
 export interface LocaleConfig {
@@ -42,3 +56,143 @@ export interface GlobEnvConfig {
   // Project abbreviation
   VITE_GLOB_APP_SHORT_NAME: string
 }
+
+export interface DefineAppConfigOptions {
+  // Navigation bar mode
+  navBarMode: NavBarModeEnum
+  // Theme
+  theme: ThemeEnum
+  // Theme color
+  themeColor: string
+  // Whether to show the theme switch button
+  showThemeModeToggle: boolean
+  // pageLayout whether to enable keep-alive
+  openKeepAlive: boolean
+  // Whether to open back to top
+  useOpenBackTop: boolean
+  // Is it possible to embed iframe pages
+  canEmbedIFramePage: boolean
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: boolean
+  closeMixSidebarOnChange: boolean
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  removeAllHttpPending: boolean
+  // Storage location of permission related information
+  permissionCacheType: CacheTypeEnum
+  // Configure where the button is displayed
+  settingButtonPosition: SettingButtonPositionEnum
+  // Configuration setting drawer open
+  openSettingDrawer: boolean
+  // Permission mode
+  permissionMode: PermissionModeEnum
+  // Session timeout processing
+  sessionTimeoutProcessing: SessionTimeoutProcessingEnum
+  // Website gray mode, open for possible mourning dates
+  grayMode: boolean
+  // Whether to turn on the color weak mode
+  colorWeak: boolean
+  // Lock screen time
+  lockTime: number
+  // Whether to show the lock screen
+  useLockPage: boolean
+  sidebar: SidebarConfigOptions
+  menu: MenuConfigOptions
+  header: HeaderConfigOptions
+  logo: LogoConfigOptions
+  tabTar: TabTbrConfigOptions
+  content: ContentConfigOptions
+  footer: FooterConfigOptions
+  transition: TransitionConfigOptions
+}
+
+export interface SidebarConfigOptions {
+  show: boolean
+  visible: boolean
+  fixed: boolean
+  bgColor: string
+  collapsed: boolean
+  width: number
+  trigger: TriggerEnum
+  readonly mixSidebarWidth: number
+  readonly collapsedWidth: number
+}
+export interface MenuConfigOptions {
+  canDrag: boolean
+  split: boolean
+  mode: MenuModeEnum
+  accordion: boolean
+  collapsedShowLabel: boolean
+  mixSideTrigger: MixSidebarTriggerEnum
+  mixSideFixed: boolean
+  topMenuAlign: 'start' | 'center' | 'end'
+  dropdownPlacement:
+    | 'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end'
+}
+
+export interface HeaderConfigOptions {
+  show: boolean
+  visible: boolean
+  bgColor: string
+  fixed: boolean
+  showFullScreen: boolean
+  showDoc: boolean
+  showNotice: boolean
+  showSearch: boolean
+  showLocalePicker: boolean
+  showSetting: boolean
+  readonly height: number
+  // Show breadcrumbs
+  showBreadCrumb: boolean
+  // Show breadcrumb icon
+  showBreadCrumbIcon: boolean
+}
+
+export interface LogoConfigOptions {
+  show: boolean
+  visible: boolean
+  showTitle: boolean
+}
+
+export interface TabTbrConfigOptions {
+  show: boolean
+  visible: boolean
+  cache: boolean
+  canDrag: boolean
+  showQuick: boolean
+  showRedo: boolean
+  showFold: boolean
+  readonly height: number
+}
+
+export interface ContentConfigOptions {
+  fullScreen: boolean
+  mode: ContentLayoutEnum
+}
+
+export interface FooterConfigOptions {
+  show: boolean
+  visible: boolean
+  readonly height: number
+}
+
+export interface TransitionConfigOptions {
+  //  Whether to open the page switching animation
+  enable: boolean
+  // Route basic switching animation
+  basicTransition: RouterTransitionEnum
+  // Whether to open page switching loading
+  openPageLoading: boolean
+  // Whether to open the top progress bar
+  openNProgress: boolean
+}
diff --git a/packages/types/src/global.ts b/packages/types/src/global.ts
index 87e3ed03..97426155 100644
--- a/packages/types/src/global.ts
+++ b/packages/types/src/global.ts
@@ -1,7 +1,7 @@
 import type { VNodeChild, PropType as VuePropType } from 'vue'
 import type { RouteRecordItem as IRouteRecordItem } from './router'
 
-declare  global {
+declare global {
   // define global
   const __VITE_USE_MOCK__: boolean
   const __APP_INFO__: {
@@ -35,33 +35,33 @@ declare  global {
   }
 
   interface Fn<T = any, R = T> {
-    (...arg: T[]): R;
+    (...arg: T[]): R
   }
 
   interface PromiseFn<T = any, R = T> {
-    (...arg: T[]): Promise<R>;
+    (...arg: T[]): Promise<R>
   }
 
-  type RefType<T> = T | null;
+  type RefType<T> = T | null
 
   type LabelValueOptions = {
-    label: string;
-    value: any;
-    [key: string]: string | number | boolean;
-  }[];
+    label: string
+    value: any
+    [key: string]: string | number | boolean
+  }[]
 
-  type EmitType = (event: string, ...args: any[]) => void;
+  type EmitType = (event: string, ...args: any[]) => void
 
-  type TargetContext = '_self' | '_blank';
+  type TargetContext = '_self' | '_blank'
 
   interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
-    $el: T;
+    $el: T
   }
 
-  type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
-
-  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
+  type ComponentRef<T extends HTMLElement = HTMLDivElement> =
+    ComponentElRef<T> | null
 
+  type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>
 
   // import.meta
   interface ImportMetaEnv extends ViteEnv {
diff --git a/packages/types/src/setting.ts b/packages/types/src/setting.ts
index 02614616..e40ee86c 100644
--- a/packages/types/src/setting.ts
+++ b/packages/types/src/setting.ts
@@ -9,7 +9,7 @@ import {
   SettingButtonPositionEnum,
   ThemeEnum,
   TriggerEnum,
-  RouterTransitionEnum
+  RouterTransitionEnum,
 } from '@vben/constants'
 import { LocaleType } from './config'
 // export type LocaleType = 'zh_CN' | 'en' | 'ru' | 'ja' | 'ko'
@@ -33,21 +33,27 @@ export interface MenuSetting {
   collapsedShowTitle: boolean
   mixSideTrigger: MixSidebarTriggerEnum
   mixSideFixed: boolean
+  readonly width: number
+  readonly mixSidebarWidth: number
+  readonly collapsedWidth: number
 }
 
 export interface MultiTabsSetting {
   cache: boolean
   show: boolean
+  hidden: boolean
   showQuick: boolean
   canDrag: boolean
   showRedo: boolean
   showFold: boolean
+  readonly height: number
 }
 
 export interface HeaderSetting {
   bgColor: string
   fixed: boolean
   show: boolean
+  hidden: boolean
   theme: ThemeEnum
   // Turn on full screen
   showFullScreen: boolean
@@ -59,6 +65,7 @@ export interface HeaderSetting {
   showNotice: boolean
   showSearch: boolean
   showLocalePicker: boolean
+  readonly height: number
 }
 
 export interface LocaleSetting {
@@ -73,16 +80,34 @@ export interface LocaleSetting {
 
 export interface TransitionSetting {
   //  Whether to open the page switching animation
-  enable: boolean;
+  enable: boolean
   // Route basic switching animation
-  basicTransition: RouterTransitionEnum;
+  basicTransition: RouterTransitionEnum
   // Whether to open page switching loading
-  openPageLoading: boolean;
+  openPageLoading: boolean
   // Whether to open the top progress bar
-  openNProgress: boolean;
+  openNProgress: boolean
 }
 
-export interface ProjectConfig {
+export interface SporadicSetting {
+  // Whether to open the top progress bar
+  openNProgress: boolean
+  // pageLayout whether to enable keep-alive
+  openKeepAlive: boolean
+  // Lock screen time
+  lockTime: number
+  // Show breadcrumbs
+  showBreadCrumb: boolean
+  // Show breadcrumb icon
+  showBreadCrumbIcon: boolean
+  // Whether to open back to top
+  useOpenBackTop: boolean
+  // Is it possible to embed iframe pages
+  canEmbedIFramePage: boolean
+  // Whether to delete unclosed messages and notify when switching the interface
+  closeMessageOnSwitch: boolean
+  // Whether to cancel the http request that has been sent but not responded when switching the interface.
+  removeAllHttpPending: boolean
   // Storage location of permission related information
   permissionCacheType: CacheTypeEnum
   // Whether to show the configuration button
@@ -91,6 +116,8 @@ export interface ProjectConfig {
   showDarkModeToggle: boolean
   // Configure where the button is displayed
   settingButtonPosition: SettingButtonPositionEnum
+  // Configure where the Setting Drawer is displayed
+  showSettingDrawer: boolean
   // Permission mode
   permissionMode: PermissionModeEnum
   // Session timeout processing
@@ -110,6 +137,11 @@ export interface ProjectConfig {
   showLogo: boolean
   // Whether to show the global footer
   showFooter: boolean
+  hiddenFooter: boolean
+  readonly footerHeight: number
+}
+
+export interface ProjectConfig extends SporadicSetting {
   // menuType: MenuTypeEnum;
   headerSetting: HeaderSetting
   // menuSetting
@@ -117,23 +149,5 @@ export interface ProjectConfig {
   // Multi-tab settings
   multiTabsSetting: MultiTabsSetting
   // Animation configuration
-  transitionSetting: TransitionSetting;
-  // Whether to open the top progress bar
-  openNProgress: false
-  // pageLayout whether to enable keep-alive
-  openKeepAlive: boolean
-  // Lock screen time
-  lockTime: number
-  // Show breadcrumbs
-  showBreadCrumb: boolean
-  // Show breadcrumb icon
-  showBreadCrumbIcon: boolean
-  // Whether to open back to top
-  useOpenBackTop: boolean
-  // Is it possible to embed iframe pages
-  canEmbedIFramePage: boolean
-  // Whether to delete unclosed messages and notify when switching the interface
-  closeMessageOnSwitch: boolean
-  // Whether to cancel the http request that has been sent but not responded when switching the interface.
-  removeAllHttpPending: boolean
+  transitionSetting: TransitionSetting
 }
diff --git a/packages/utils/index.ts b/packages/utils/index.ts
index 986b306b..41e86323 100644
--- a/packages/utils/index.ts
+++ b/packages/utils/index.ts
@@ -8,6 +8,10 @@ export {
   clone,
   isArray,
   isString,
+  toString,
+  assign as _assign,
+  merge as _merge,
+  omit as _omit,
 } from 'lodash-es'
 // @ts-ignore
 import Sortable from 'sortablejs'
diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts
new file mode 100644
index 00000000..6347797a
--- /dev/null
+++ b/packages/utils/src/color.ts
@@ -0,0 +1,178 @@
+/**
+ * 判断是否 十六进制颜色值.
+ * 输入形式可为 #fff000 #f00
+ *
+ * @param   String  color   十六进制颜色值
+ * @return  Boolean
+ */
+export function isHexColor(color: string) {
+  const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/
+  return reg.test(color)
+}
+
+/**
+ * RGB 颜色值转换为 十六进制颜色值.
+ * r, g, 和 b 需要在 [0, 255] 范围内
+ *
+ * @return  String          类似#ff00ff
+ * @param r
+ * @param g
+ * @param b
+ */
+export function rgbToHex(r: number, g: number, b: number) {
+  // tslint:disable-next-line:no-bitwise
+  const hex = ((r << 16) | (g << 8) | b).toString(16)
+  return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex
+}
+
+/**
+ * Transform a HEX color to its RGB representation
+ * @param {string} hex The color to transform
+ * @returns The RGB representation of the passed color
+ */
+export function hexToRGB(hex: string) {
+  let sHex = hex.toLowerCase()
+  if (isHexColor(hex)) {
+    if (sHex.length === 4) {
+      let sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1))
+      }
+      sHex = sColorNew
+    }
+    const sColorChange: number[] = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)))
+    }
+    return 'RGB(' + sColorChange.join(',') + ')'
+  }
+  return sHex
+}
+
+export function colorIsDark(color: string) {
+  if (!isHexColor(color)) return
+  const [r, g, b] = hexToRGB(color)
+    .replace(/(?:\(|\)|rgb|RGB)*/g, '')
+    .split(',')
+    .map((item) => Number(item))
+  return r * 0.299 + g * 0.578 + b * 0.114 < 192
+}
+
+/**
+ * Darkens a HEX color given the passed percentage
+ * @param {string} color The color to process
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The HEX representation of the processed color
+ */
+export function darken(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
+    color.substring(2, 4),
+    amount,
+  )}${subtractLight(color.substring(4, 6), amount)}`
+}
+
+/**
+ * Lightens a 6 char HEX color according to the passed percentage
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed color represented as HEX
+ */
+export function lighten(color: string, amount: number) {
+  color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color
+  amount = Math.trunc((255 * amount) / 100)
+  return `#${addLight(color.substring(0, 2), amount)}${addLight(
+    color.substring(2, 4),
+    amount,
+  )}${addLight(color.substring(4, 6), amount)}`
+}
+
+/* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
+/**
+ * Sums the passed percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function addLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) + amount
+  const c = cc > 255 ? 255 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+/**
+ * Calculates luminance of an rgb color
+ * @param {number} r red
+ * @param {number} g green
+ * @param {number} b blue
+ */
+function luminanace(r: number, g: number, b: number) {
+  const a = [r, g, b].map((v) => {
+    v /= 255
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+  })
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+}
+
+/**
+ * Calculates contrast between two rgb colors
+ * @param {string} rgb1 rgb color 1
+ * @param {string} rgb2 rgb color 2
+ */
+function contrast(rgb1: string[], rgb2: number[]) {
+  return (
+    (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
+    (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
+  )
+}
+
+/**
+ * Determines what the best text color is (black or white) based con the contrast with the background
+ * @param hexColor - Last selected color by the user
+ */
+export function calculateBestTextColor(hexColor: string) {
+  const rgbColor = hexToRGB(hexColor.substring(1))
+  const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0])
+
+  return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'
+}
+
+/**
+ * Subtracts the indicated percentage to the R, G or B of a HEX color
+ * @param {string} color The color to change
+ * @param {number} amount The amount to change the color by
+ * @returns {string} The processed part of the color
+ */
+function subtractLight(color: string, amount: number) {
+  const cc = parseInt(color, 16) - amount
+  const c = cc < 0 ? 0 : cc
+  return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
+}
+
+/**
+ * Pick text color based on background color
+ * @param bgColor {string}
+ * @param lightColor {string}
+ * @param darkColor {string}
+ * @returns {string} text color
+ */
+export function pickTextColorBasedOnBgColor(
+  bgColor: string,
+  lightColor: string,
+  darkColor: string,
+) {
+  const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor
+  const r = parseInt(color.substring(0, 2), 16) // hexToR
+  const g = parseInt(color.substring(2, 4), 16) // hexToG
+  const b = parseInt(color.substring(4, 6), 16) // hexToB
+  const uicolors = [r / 255, g / 255, b / 255]
+  const c = uicolors.map((col) => {
+    if (col <= 0.03928) {
+      return col / 12.92
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4)
+  })
+  const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
+  return L < 0.8 ? darkColor : lightColor
+}
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 621b5f7e..b7455ccc 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -9,3 +9,4 @@ export * from './tree'
 export * from './router'
 export * from './mitt'
 export * from './theme'
+export * from './color'
diff --git a/packages/vbenComponents/package.json b/packages/vbenComponents/package.json
index 4a9e303b..0d0134ab 100644
--- a/packages/vbenComponents/package.json
+++ b/packages/vbenComponents/package.json
@@ -10,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "@iconify/iconify": "^3.0.0",
+    "@vben/hooks": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/constants": "workspace:*",
     "sass": "^1.55.0",
diff --git a/packages/vbenComponents/src/config/src/Config.vue b/packages/vbenComponents/src/config/src/Config.vue
index ee20bd3b..fc004ad0 100644
--- a/packages/vbenComponents/src/config/src/Config.vue
+++ b/packages/vbenComponents/src/config/src/Config.vue
@@ -1,18 +1,15 @@
 <script lang="ts" setup name="VbenConfig">
 import { maps } from '#/index'
-import { computed } from 'vue'
-import { ThemeEnum } from '@vben/constants'
+import { computed, unref } from 'vue'
+import { useAppTheme } from '@vben/hooks'
 const Config = maps.get('Config')
 const darkTheme = maps.get('DarkTheme')
-import { context } from '../../../bridge'
-const { useConfigStore } = context
-const configStore = useConfigStore()
-const theme = computed(() =>
-  configStore.getDarkMode == ThemeEnum.DARK ? darkTheme : null,
-)
+
+const { isDark } = useAppTheme()
+const appTheme = computed(() => (unref(isDark) ? darkTheme : null))
 </script>
 <template>
-  <Config v-bind="$attrs" abstract :theme="theme"> <slot></slot></Config>
+  <Config v-bind="$attrs" abstract :theme="appTheme"> <slot></slot></Config>
 </template>
 
 <style scoped></style>
diff --git a/packages/vbenComponents/src/iconify/src/Iconify.vue b/packages/vbenComponents/src/iconify/src/Iconify.vue
index e901d333..607a8b9f 100644
--- a/packages/vbenComponents/src/iconify/src/Iconify.vue
+++ b/packages/vbenComponents/src/iconify/src/Iconify.vue
@@ -87,7 +87,7 @@ onMounted(update)
 <style lang="less" scoped>
 .iconify {
   display: inline-block;
-  transition: color 0.5s;
+  transition: color 0.3s, transform .3s;
   &:hover{
     color: v-bind(hoverColor) !important;
   }
diff --git a/scripts/src/base.ts b/scripts/src/base.ts
index eb2daa65..aea71ec7 100644
--- a/scripts/src/base.ts
+++ b/scripts/src/base.ts
@@ -7,15 +7,15 @@ import {
 } from './helper'
 import { isArray, isString } from '@vben/utils'
 import { DEFAULT_SELECT_TYPE } from './constant'
-import ora from 'ora'
-const spinner = ora({
-  text: 'Loading...',
-  color: 'yellow',
-})
+// import ora from 'ora'
+// const spinner = ora({
+//   text: 'Loading...',
+//   color: 'yellow',
+// })
 const prompts = require('prompts')
 
 async function runScript(argv: string[], script: string) {
-  spinner.stop()
+  // spinner.stop()
   execa('pnpm', ['-w', 'run', `turbo:${script}`].concat(argv), {
     stdio: 'inherit',
     preferLocal: true,
@@ -72,7 +72,7 @@ async function baseScript(command: string, isFilterWorkspace: boolean) {
 }
 
 export function run(command: string, isFilterWorkspace = false) {
-  spinner.start()
+  // spinner.start()
   baseScript(command, isFilterWorkspace).catch((err) => {
     error(err)
     process.exit(1)