diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
index 435ab24..540b7a8 100644
Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ
diff --git a/package.json b/package.json
index 81ac179..65f42b3 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.24.0",
-    "msw": "^2.3.0",
+    "msw": "^2.3.5",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "postcss": "^8.4.38",
     "typescript": "^5.4.4"
   },
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index bdfdb11..15751fa 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.3.0'
+const PACKAGE_VERSION = '2.3.5'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
diff --git a/quasar.config.cjs b/quasar.config.cjs
index 85a391c..94b7165 100644
--- a/quasar.config.cjs
+++ b/quasar.config.cjs
@@ -43,21 +43,21 @@ module.exports = configure(function (ctx) {
     // https://github.com/quasarframework/quasar/tree/dev/extras
     extras: [
       // 'ionicons-v4',
-      // 'mdi-v5',
+      'mdi-v7',
       // 'fontawesome-v6',
       // 'eva-icons',
       // 'themify',
       // 'line-awesome',
       // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
-      'roboto-font', // optional, you are not bound to it
-      'material-symbols-rounded' // optional, you are not bound to it
+      'roboto-font' // optional, you are not bound to it
+      // 'material-symbols-rounded' // optional, you are not bound to it
     ],
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
     build: {
       target: {
-        browser: ['es2022', 'edge88', 'firefox115', 'chrome115', 'safari14'],
+        browser: ['es2022', 'edge115', 'firefox115', 'chrome115', 'safari14'],
         node: 'node20'
       },
 
@@ -125,7 +125,7 @@ module.exports = configure(function (ctx) {
         }
       },
 
-      iconSet: 'material-symbols-rounded', // Quasar icon set
+      iconSet: 'mdi-v7', // Quasar icon set
       lang: 'en-US', // Quasar language pack
 
       // For special cases outside of where the auto-import strategy can have an impact
@@ -136,7 +136,7 @@ module.exports = configure(function (ctx) {
       // directives: [],
 
       // Quasar plugins
-      plugins: ['Notify', 'SessionStorage']
+      plugins: ['Notify', 'Cookies']
     },
 
     // animations: 'all', // --- includes all animations
diff --git a/src/api/privileges.ts b/src/api/privileges.ts
new file mode 100644
index 0000000..b9d8018
--- /dev/null
+++ b/src/api/privileges.ts
@@ -0,0 +1,5 @@
+import { api } from 'boot/axios'
+
+export const retrievePrivilegeTree = (username: string) => {
+  return api.get(`/privileges/${username}/tree`)
+}
diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index 2808281..52daaf2 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -1,11 +1,15 @@
 import { boot } from 'quasar/wrappers'
 import { createI18n } from 'vue-i18n'
-import messages from 'src/i18n'
+import { messages } from 'src/i18n'
+
+import { useLocaleStore } from 'stores/locale-store'
+
+const localeStore = useLocaleStore()
 
 export default boot(({ app }) => {
   const i18n = createI18n({
-    locale: 'en-US',
     legacy: false,
+    locale: localeStore.lang || 'zh-CN',
     messages
   })
 
diff --git a/src/boot/router.ts b/src/boot/router.ts
index 1eaf5f5..f5d2090 100644
--- a/src/boot/router.ts
+++ b/src/boot/router.ts
@@ -1,15 +1,40 @@
 import { boot } from 'quasar/wrappers'
 import { useUserStore } from 'stores/user-store'
+import { Cookies } from 'quasar'
+import type { RouteRecordRaw } from 'vue-router'
+import type { PrivilegeTreeNode } from 'src/models'
 
 export default boot(({ router, store }) => {
   router.beforeEach((to, from, next) => {
     // Now you need to add your authentication logic here, like calling an API endpoint
     const userStore = useUserStore(store)
-    if (userStore.getUsername) {
+    if (userStore.user?.username && Cookies.get('logged_in')) {
       if (to.path === '/login') {
-        next('/')
+        next({ path: '/' })
       } else {
-        next()
+        // 获取权限，注册路由表
+        if (to.path !== '/' && !userStore.routes.length) {
+          const routes = generateRoutes(userStore.privileges as PrivilegeTreeNode[])
+
+          // 动态添加可访问路由表
+          userStore.updateRoutes(routes)
+          routes.forEach((route) => {
+            router.addRoute(route as RouteRecordRaw)
+          })
+          // 捕获所有未匹配的路径，放在配置的末尾
+          router.addRoute({
+            path: '/:cacheAll(.*)*',
+            name: 'ErrorNotFound',
+            component: () => import('src/pages/ErrorNotFound.vue')
+          })
+
+          const redirectPath = from.query.redirect || to.path
+          const redirect = decodeURIComponent(redirectPath as string)
+          const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
+          next(nextData)
+        } else {
+          next()
+        }
       }
     } else {
       if (to.path === '/login') {
@@ -20,3 +45,38 @@ export default boot(({ router, store }) => {
     }
   })
 })
+
+// 生成路由
+const MainLayout = () => import('src/layouts/MainLayout.vue')
+const BlankLayout = () => import('src/layouts/BlankLayout.vue')
+
+const modules = import.meta.glob('../pages/**/*.{vue,tsx}')
+
+export const generateRoutes = (routes: PrivilegeTreeNode[]): RouteRecordRaw[] => {
+  const res: RouteRecordRaw[] = []
+  for (const route of routes) {
+    const data: RouteRecordRaw = {
+      path: route.path as string,
+      name: route.name,
+      redirect: route.redirect,
+      component: null,
+      children: []
+    }
+    if (route.component) {
+      const comModule = modules[`../${route.component}.vue`]
+      const component = route.component as string
+      if (comModule) {
+        // 动态加载路由文件
+        data.component = comModule
+      } else if (component.includes('#')) {
+        data.component = component === '#' ? MainLayout : BlankLayout
+      }
+    }
+    // recursive child routes
+    if (route.children) {
+      data.children = generateRoutes(route.children)
+    }
+    res.push(data)
+  }
+  return res
+}
diff --git a/src/components/EssentialLink.vue b/src/components/EssentialLink.vue
index 0239589..7f96015 100644
--- a/src/components/EssentialLink.vue
+++ b/src/components/EssentialLink.vue
@@ -1,24 +1,28 @@
 <template>
-  <q-item v-ripple exact :to="link">
+  <q-item clickable v-ripple exact :to="pathResolve(parentPath, path)">
     <q-item-section v-if="icon" avatar>
       <q-icon :name="icon" />
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ $t(title) }}</q-item-label>
+      <q-item-label>{{ $t(name) }}</q-item-label>
     </q-item-section>
   </q-item>
 </template>
 
 <script setup lang="ts">
-export interface EssentialLinkProps {
-  title: string;
-  link?: string;
-  icon?: string;
-}
-withDefaults(defineProps<EssentialLinkProps>(), {
-  title: '',
-  link: '#',
-  icon: ''
+import { pathResolve } from 'src/utils'
+
+withDefaults(defineProps<{
+  name: string
+  path: string
+  icon: string
+  parentPath?: string
+}>(), {
+  name: '',
+  path: '#',
+  icon: '',
+  parentPath: ''
 })
+
 </script>
diff --git a/src/components/EssentialList.vue b/src/components/EssentialList.vue
new file mode 100644
index 0000000..b553578
--- /dev/null
+++ b/src/components/EssentialList.vue
@@ -0,0 +1,27 @@
+<template>
+  <template v-for="link in essentialLinks" :key="link.name">
+    <q-expansion-item v-if="link.children" :icon="link.icon" :label="$t(link.name)">
+      <q-card>
+        <q-card-section>
+          <!-- children -->
+          <EssentialList :essentialLinks="link.children" :parent-path="pathResolve(parentPath, link.path)" />
+        </q-card-section>
+      </q-card>
+    </q-expansion-item>
+    <!-- single item -->
+    <EssentialLink v-else v-bind="{ ...link, parentPath }" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import EssentialLink from 'components/EssentialLink.vue'
+import type { PrivilegeTreeNode } from 'src/models'
+import { pathResolve } from 'src/utils'
+
+withDefaults(defineProps<{
+  essentialLinks: PrivilegeTreeNode[]
+  parentPath?: string
+}>(), {
+  parentPath: ''
+})
+</script>
diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
new file mode 100644
index 0000000..f319176
--- /dev/null
+++ b/src/components/LanguageSelector.vue
@@ -0,0 +1,34 @@
+<template>
+  <q-btn title="language" icon="mdi-translate" round flat dense>
+    <q-menu>
+      <q-list dense separator>
+        <q-item clickable v-close-popup v-for="option in localeOptions" :key="option.value"
+          :active="locale === option.value" @click="changeLocale(option.value)">
+          <q-item-section>{{ option.label }}</q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { localeOptions } from 'src/i18n'
+import { useLocaleStore } from 'stores/locale-store'
+
+const { locale } = useI18n({ useScope: 'global' })
+const localeStore = useLocaleStore()
+
+function changeLocale(lang: string = 'en-US') {
+  locale.value = lang
+  localeStore.changeLang(lang)
+  changeHtmlLang(lang)
+}
+
+function changeHtmlLang(lang: string) {
+  const htmlElement = document.querySelector('html')
+  if (htmlElement) {
+    htmlElement.setAttribute('lang', lang)
+  }
+}
+</script>
diff --git a/src/components/ThemeToogle.vue b/src/components/ThemeToogle.vue
new file mode 100644
index 0000000..5ecead8
--- /dev/null
+++ b/src/components/ThemeToogle.vue
@@ -0,0 +1,14 @@
+<template>
+  <q-toggle size="sm" v-model="$q.dark.isActive" icon="mdi-weather-night" unchecked-icon="mdi-white-balance-sunny"
+    :color="$q.dark.isActive ? 'black' : ''" @update:model-value="handleChange" />
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+function handleChange(value: boolean) {
+  $q.dark.set(value)
+}
+</script>
diff --git a/src/css/app.scss b/src/css/app.scss
index 329d8c0..e21ba5d 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -5,17 +5,21 @@
 }
 
 .bg-negative-gradient {
-    background: radial-gradient(circle at center bottom, #e05969, $negative);
+    background: radial-gradient(circle at center left, $red-6, $negative);
 }
 
 .bg-positive-gradient {
-    background: radial-gradient(circle at center right, #26A69A, $positive);
+    background: radial-gradient(circle at center right, $light-green, $positive);
 }
 
 .bg-warning-gradient {
-    background: radial-gradient(circle at bottom left, #cf9900, $warning);
+    background: radial-gradient(circle at center top, $amber, $warning);
 }
 
 .rounded-full {
     border-radius: 50%;
+}
+
+.bg-dark-page {
+  background-color: var(--q-dark-page);
 }
\ No newline at end of file
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 728ecff..fb30029 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -2,16 +2,7 @@
 // so you can safely delete all default props below
 
 export default {
-  application: 'Application',
-  reload: 'Reload Data',
-  pagation: 'The records in rows {page} - {size} ，of {total} total.',
-  deletion: 'Do you want to confirm the deletion?',
-  note: 'This information will be deleted and will not be recovered once deleted.',
-  viewMore: 'View More',
-  unreadTotal: 'unread total',
-
   search: 'Search...',
-  select: 'Plesse Select',
   profile: 'Profile',
   settings: 'Settings',
   help: 'Help',
@@ -20,10 +11,6 @@ export default {
   signup: 'Sign Up',
   signout: 'Sign Out',
 
-  accesslogs: 'Access Logs',
-  account: 'Account Settings',
-  security: 'Account Security',
-
   no: 'NO.',
   name: 'Name',
   id: 'ID',
@@ -35,6 +22,7 @@ export default {
   password: 'Password',
   firstname: 'First Name',
   lastname: 'Last Name',
+  fullname: 'Full Name',
   accountLocked: 'Account Locked',
   accountExpiresAt: 'User Expires At',
   credentialsExpiresAt: 'Credentials Expires At',
@@ -47,22 +35,6 @@ export default {
 
   areaCode: 'Area Code',
   postalCode: 'Postal Code',
-  userCount: 'User Count',
-  roleCount: 'Role Count',
-  postsCount: 'Posts Count',
-
-  unread: 'Unread',
-  readed: 'Readed',
-
-  title: 'Title',
-  context: 'Context',
-  cover: 'Cover',
-  tags: 'Tags',
-  category: 'Category',
-  viewed: 'Viewed',
-  likes: 'Likes',
-  comments: 'Comments',
-  downloads: 'Downloads',
 
   enabled: 'Is Enabled',
   enable: 'Enable',
@@ -74,7 +46,7 @@ export default {
   confirm: 'Confirm',
   commit: 'Commit',
   cancle: 'Cancle',
-  add: 'Add New',
+  add: 'Add',
   edit: 'Edit',
   delete: 'Delete',
   unlock: 'Unlock',
@@ -82,19 +54,18 @@ export default {
   members: 'memberss',
 
   home: 'Home',
-  dashboard: 'Dashboard',
   system: 'System',
   groups: 'Groups',
   roles: 'Roles',
-  components: 'Components',
+  privileges: 'Privileges',
   users: 'Users',
   dictionaries: 'Dictionaries',
-  posts: 'Posts',
-  categories: 'Categroies',
   regions: 'Regions',
-  statitics: 'Statitics',
-  messages: 'Notifications',
-  status: 'Status',
+  logs: 'Logs',
+  operationLog: 'Operation Log',
+  accessLog: 'Access Log',
+  auditLog: 'Audit Log',
+  schedulerLog: 'Scheduler Log',
 
   welcome: 'Hi! Welcome Back.',
   subtitle: 'Please sign in to continue exploring.',
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 63b26bd..2c050c9 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -2,7 +2,13 @@ import enUS from './en-US'
 import zhCN from './zh-CN'
 import zhTW from './zh-TW'
 
-export default {
+export const localeOptions = [
+  { value: 'en-US', label: 'English(US)' },
+  { value: 'zh-CN', label: '中文（简体）' },
+  { value: 'zh-TW', label: '中文（繁體）' }
+]
+
+export const messages = {
   'en-US': enUS,
   'zh-CN': zhCN,
   'zh-TW': zhTW
diff --git a/src/i18n/zh-CN/index.ts b/src/i18n/zh-CN/index.ts
index 8c4b2bd..b9110f6 100644
--- a/src/i18n/zh-CN/index.ts
+++ b/src/i18n/zh-CN/index.ts
@@ -2,16 +2,7 @@
 // so you can safely delete all default props below
 
 export default {
-  application: '系统',
-  reload: '重载数据',
-  pagation: '第 {page} - {size} 行记录，共 {total} 条记录',
-  deletion: '是否确认删除？',
-  note: '将要删除本条信息，一旦删除将不可恢复。',
-  viewMore: '查看更多',
-  unreadTotal: '未读消息',
-
   search: '搜索...',
-  select: '请选择',
   profile: '个人中心',
   settings: '设置',
   help: '帮助',
@@ -20,10 +11,6 @@ export default {
   signup: '注 册',
   signout: '退出登录',
 
-  accesslogs: '操作日志',
-  account: '账号设置',
-  security: '账号安全',
-
   no: '序号',
   name: '名称',
   id: '主键',
@@ -35,6 +22,7 @@ export default {
   password: '密码',
   firstname: '姓',
   lastname: '名字',
+  fullname: '姓名',
   accountLocked: '账号锁状态',
   accountExpiresAt: '账号失效时间',
   credentialsExpiresAt: '密码失效时间',
@@ -47,26 +35,8 @@ export default {
 
   areaCode: '区号',
   postalCode: '邮编',
-  userCount: '用户数',
-  roleCount: '角色数',
-  postsCount: '贴子数',
-
-  unread: '未读',
-  readed: '已读',
-
-  title: '标题',
-  cover: '封面',
-  tags: '标签',
-  context: '内容',
-  category: '分类',
-  viewed: '浏览量',
-  likes: '点赞数',
-  comments: '评论数',
-  downloads: '下载量',
 
   enabled: '是否启用',
-  enable: '启用',
-  disable: '禁用',
 
   actions: '操作',
   import: '导入',
@@ -82,19 +52,18 @@ export default {
   members: '成员',
 
   home: '首页',
-  dashboard: '控制台',
   system: '系统管理',
   groups: '分组',
   roles: '角色',
-  components: '权限',
+  privileges: '权限',
   users: '用户',
   dictionaries: '字典',
-  posts: '帖子管理',
-  categories: '类目管理',
   regions: '行政区划',
-  statitics: '数据统计',
-  messages: '消息通知',
-  status: '状态',
+  logs: '日志记录',
+  operationLog: '操作日志',
+  accessLog: '访问日志',
+  auditLog: '审计日志',
+  schedulerLog: '调度日志',
 
   welcome: '嗨！欢迎回来',
   subtitle: '请填写您的账号和密码，让我们继续探索',
diff --git a/src/i18n/zh-TW/index.ts b/src/i18n/zh-TW/index.ts
index 98109fc..ef4a3d4 100644
--- a/src/i18n/zh-TW/index.ts
+++ b/src/i18n/zh-TW/index.ts
@@ -2,16 +2,7 @@
 // so you can safely delete all default props below
 
 export default {
-  application: '系統',
-  reload: '重載數據',
-  pagation: '第 {page} - {size} 行記錄，共 {total} 條記錄',
-  deletion: '是否確認刪除？',
-  note: '將要刪除本條信息，一旦刪除將不可恢復。',
-  viewMore: '查看更多',
-  unreadTotal: '未讀消息',
-
   search: '搜索...',
-  select: '請選擇',
   profile: '個人中心',
   settings: '設置',
   help: '幫助',
@@ -20,10 +11,6 @@ export default {
   signup: '註 冊',
   signout: '退出登錄',
 
-  accesslogs: '操作日誌',
-  account: '賬號設置',
-  security: '賬號安全',
-
   no: '序號',
   name: '名稱',
   id: '主鍵',
@@ -35,6 +22,7 @@ export default {
   password: '密碼',
   firstname: '姓',
   lastname: '名字',
+  fullname: '姓名',
   accountLocked: '賬號鎖狀態',
   accountExpiresAt: '賬號失效時間',
   credentialsExpiresAt: '密碼失效時間',
@@ -47,22 +35,6 @@ export default {
 
   areaCode: '區號',
   postalCode: '郵編',
-  userCount: '用戶數',
-  roleCount: '角色數',
-  postsCount: '貼子數',
-
-  unread: '未讀',
-  readed: '已讀',
-
-  title: '標題',
-  cover: '封面',
-  tags: '標籤',
-  context: '內容',
-  category: '分類',
-  viewed: '瀏覽量',
-  likes: '點贊數',
-  comments: '評論數',
-  downloads: '下載量',
 
   enabled: '是否啟用',
   enable: '啟用',
@@ -82,19 +54,18 @@ export default {
   members: '成員',
 
   home: '首頁',
-  dashboard: '控制台',
   system: '系統管理',
   groups: '分組',
   roles: '角色',
-  components: '權限',
+  privileges: '權限',
   users: '用戶',
   dictionaries: '字典',
-  posts: '帖子管理',
-  categories: '類目管理',
   regions: '行政區劃',
-  statitics: '數據統計',
-  messages: '消息通知',
-  status: '狀態',
+  logs: '日誌管理',
+  accessLog: '訪問紀錄',
+  operationLog: '操作紀錄',
+  auditLog: '審計日誌',
+  schedulerLog: '調度日誌',
 
   welcome: '嗨！歡迎回來',
   subtitle: '請填寫您的帳號和密碼，讓我們繼續探索',
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 36100a7..1f4d5ab 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,52 +1,31 @@
 <template>
   <q-layout view="hHh LpR lff">
-    <q-header elevated>
+    <q-header>
       <q-toolbar>
         <q-toolbar-title :shrink="true">
-          <q-img alt="logo" src="/logo-only.svg" style="width: 2em; height: 2em;" />
+          <q-img alt="logo" src="/logo-only.svg" width="2em" height="2em" />
           <span>Management System</span>
         </q-toolbar-title>
         <q-toolbar-title>
-          <q-btn title="drawer" type="button" dense flat round icon="sym_r_menu"
-            @click="leftDrawerOpen = !leftDrawerOpen" aria-disabled="false" />
+          <q-btn title="drawer" type="button" dense flat round icon="mdi-menu" @click="leftDrawerOpen = !leftDrawerOpen"
+            aria-disabled="false" />
         </q-toolbar-title>
+        <!-- language -->
+        <LanguageSelector />
+        <!-- theme -->
+        <ThemeToogle />
 
-        <!-- <q-breadcrumbs class="q-ma-sm" active-color="white" style="font-size: 16px">
-          <q-breadcrumbs-el v-for="(route, index) in $route.matched" :key="index"
-            :label="$t(route.name ? route.name.toString() : '')"
-            :icon="route.meta.icon ? route.meta.icon.toString() : undefined" />
-        </q-breadcrumbs> -->
-
-        <q-btn title="language" icon="sym_r_language" round flat dense>
-          <q-menu>
-            <q-list dense separator>
-              <q-item clickable v-close-popup :active="locale === 'en-US'" @click="locale = 'en-US'">
-                <q-item-section>English(US)</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup :active="locale === 'zh-CN'" @click="locale = 'zh-CN'">
-                <q-item-section>中文（简体）</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup :active="locale === 'zh-TW'" @click="locale = 'zh-TW'">
-                <q-item-section>中文（繁體）</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-
-        <q-toggle size="sm" v-model="$q.dark.isActive" icon="sym_r_dark_mode" unchecked-icon="sym_r_light_mode"
-          :color="$q.dark.isActive ? 'black' : ''" />
-
-        <q-chip clickable color="primary" text-color="white">
-          <q-avatar size="28px">
-            <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png" width="28px" height="29px">
-          </q-avatar>{{ userStore.getUsername }}
+        <q-chip clickable color="primary" size="md" text-color="white">
+          <q-avatar size="2em">
+            <img alt="avatar" src="https://cdn.quasar.dev/img/avatar.png" width="2em" height="2em">
+          </q-avatar>{{ userStore.user?.username }}
           <q-menu>
             <q-list dense separator>
               <q-item clickable v-close-popup>
-                <q-item-section>Change Password</q-item-section>
+                <q-item-section>{{ $t('profile') }}</q-item-section>
               </q-item>
               <q-item clickable v-close-popup @click="onLogout">
-                <q-item-section>Sign Out</q-item-section>
+                <q-item-section>{{ $t('signout') }}</q-item-section>
               </q-item>
             </q-list>
           </q-menu>
@@ -54,45 +33,57 @@
       </q-toolbar>
     </q-header>
 
-    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" elevated :width="230">
-      <SideBarLeft />
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered :width="220">
+      <q-list>
+        <!-- home -->
+        <EssentialLink v-bind="{
+          name: 'home',
+          icon: 'mdi-home-outline',
+          path: '/'
+        }" />
+        <!-- privileges -->
+        <EssentialList :essentialLinks="essentialLinks" />
+      </q-list>
     </q-drawer>
 
     <q-page-container class="overflow-hidden">
       <router-view />
-      <slot></slot>
     </q-page-container>
 
     <q-footer class="bg-transparent">
-      <p class="text-center text-black">Copyright &copy; 2018 - {{ new Date().getFullYear() }}
-        All rights reserved.</p>
+      <q-toolbar>
+        <q-toolbar-title class="text-center text-body2" :class="$q.dark.isActive ? '' : 'text-black'">
+          &copy; {{ new Date().getFullYear() }} All Rights Reserved.
+        </q-toolbar-title>
+      </q-toolbar>
     </q-footer>
   </q-layout>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useUserStore } from 'stores/user-store'
 import { useRouter } from 'vue-router'
 import { useQuasar } from 'quasar'
-import { api } from 'boot/axios'
 
-import SideBarLeft from './SideBarLeft.vue'
+import EssentialLink from 'components/EssentialLink.vue'
+import EssentialList from 'components/EssentialList.vue'
+import LanguageSelector from 'components/LanguageSelector.vue'
+import ThemeToogle from 'components/ThemeToogle.vue'
+
+import type { PrivilegeTreeNode } from 'src/models'
 
 const userStore = useUserStore()
 const { replace } = useRouter()
-const $q = useQuasar()
 
-const { locale } = useI18n({ useScope: 'global' })
+const $q = useQuasar()
 
 const leftDrawerOpen = ref<boolean>(false)
 
-function onLogout() {
-  api.post('/logout').then(() => {
-    userStore.clearUser()
+const essentialLinks: PrivilegeTreeNode[] = userStore.privileges as PrivilegeTreeNode[]
 
-    replace('/login')
-  }).catch(error => $q.notify({ type: 'negative', message: error.message }))
+function onLogout() {
+  userStore.logout().then(() => replace('/login'))
+    .catch(error => $q.notify({ type: 'negative', message: error.message }))
 }
 </script>
diff --git a/src/layouts/SideBarLeft.vue b/src/layouts/SideBarLeft.vue
deleted file mode 100644
index c7588ec..0000000
--- a/src/layouts/SideBarLeft.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <q-list>
-    <q-list>
-      <EssentialLink v-bind="{
-        title: 'home',
-        icon: 'sym_r_home',
-        link: '/'
-      }" />
-      <q-expansion-item expand-separator icon="sym_r_settings" :label="$t('system')" default-opened>
-        <q-card>
-          <q-card-section>
-            <EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
-          </q-card-section>
-        </q-card>
-      </q-expansion-item>
-
-    </q-list>
-  </q-list>
-</template>
-
-<script setup lang="ts">
-import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue'
-
-const essentialLinks: EssentialLinkProps[] = [
-  {
-    title: 'users',
-    icon: 'sym_r_manage_accounts',
-    link: '/system/users'
-  },
-  {
-    title: 'groups',
-    icon: 'sym_r_group',
-    link: '/system/groups'
-  },
-  {
-    title: 'roles',
-    icon: 'sym_r_admin_panel_settings',
-    link: '/system/roles'
-  },
-  {
-    title: 'dictionaries',
-    icon: 'sym_r_menu_book',
-    link: '/system/dictionaries'
-  },
-  {
-    title: 'regions',
-    icon: 'sym_r_public',
-    link: '/system/regions'
-  }
-]
-</script>
diff --git a/src/mocks/common.ts b/src/mocks/common.ts
index 0e8a479..9a514c4 100644
--- a/src/mocks/common.ts
+++ b/src/mocks/common.ts
@@ -6,7 +6,11 @@ export const commonHandlers = [
 
     const username = info.get('username')
     // Read the intercepted request body.
-    return HttpResponse.json({ username })
+    return HttpResponse.json({ user: { username, avatar: '' }, access_token: 'sfa23asdfasdfasdf' }, {
+      headers: {
+        'Set-Cookie': 'logged_in=yes'
+      }
+    })
   }),
   http.post('/api/logout', ({ cookies }) => {
     if (!cookies.logged_in) {
diff --git a/src/mocks/dictionaries.ts b/src/mocks/dictionaries.ts
index fb29785..fe174c5 100644
--- a/src/mocks/dictionaries.ts
+++ b/src/mocks/dictionaries.ts
@@ -8,12 +8,12 @@ for (let i = 0; i < 20; i++) {
   const data: Dictionary = {
     id: i,
     name: 'dictionary_' + i,
-    description: 'this is description for this row',
     enabled: i % 3 > 0,
+    description: 'This is dictionary description about xxx',
     lastModifiedDate: new Date()
   }
   for (let j = 0; j < i; j++) {
-    const data: Dictionary = {
+    const subData: Dictionary = {
       id: j,
       name: 'dictionary_' + i + '_' + j,
       superiorId: i,
@@ -21,7 +21,7 @@ for (let i = 0; i < 20; i++) {
       description: 'description',
       lastModifiedDate: new Date()
     }
-    subDatas.push(data)
+    subDatas.push(subData)
   }
   datas.push(data)
 }
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 9250de0..c90a952 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -4,6 +4,7 @@ import { groupsHandlers } from './groups'
 import { regionsHandlers } from './regions'
 import { rolesHandlers } from './roles'
 import { usersHandlers } from './users'
+import { privilegessHandlers } from './privileges'
 
 export const handlers = [
   ...commonHandlers,
@@ -11,5 +12,6 @@ export const handlers = [
   ...groupsHandlers,
   ...regionsHandlers,
   ...rolesHandlers,
-  ...usersHandlers
+  ...usersHandlers,
+  ...privilegessHandlers
 ]
diff --git a/src/mocks/privileges.ts b/src/mocks/privileges.ts
index 5a8b057..c558f57 100644
--- a/src/mocks/privileges.ts
+++ b/src/mocks/privileges.ts
@@ -1,24 +1,251 @@
 import { http, HttpResponse } from 'msw'
-import type { Privilege } from 'src/models'
+import type { Privilege, PrivilegeTreeNode } from 'src/models'
 
-const datas: Privilege[] = []
+const datas: Privilege[] = [
+  {
+    id: 1,
+    path: '/system',
+    component: '#',
+    redirect: '/system/users',
+    name: 'system',
+    order: 1,
+    enabled: true,
+    icon: 'mdi-cog-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 7,
+    path: '/logs',
+    component: '#',
+    redirect: '/logs/operation',
+    name: 'logs',
+    order: 2,
+    enabled: true,
+    icon: 'mdi-clipboard-list-outline',
+    description: 'this is description for this row'
+  }
+]
+
+const subDatas: Privilege[] = [
+  {
+    id: 2,
+    superiorId: 1,
+    path: 'groups',
+    component: 'pages/system/groups/IndexPage',
+    name: 'groups',
+    order: 1,
+    enabled: true,
+    icon: 'mdi-account-multiple-plus-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 3,
+    superiorId: 1,
+    path: 'users',
+    component: 'pages/system/users/IndexPage',
+    name: 'users',
+    order: 2,
+    enabled: true,
+    icon: 'mdi-account-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 4,
+    superiorId: 1,
+    path: 'privileges',
+    component: 'pages/system/privileges/IndexPage',
+    name: 'privileges',
+    order: 3,
+    enabled: true,
+    icon: 'mdi-shield-key-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 5,
+    superiorId: 1,
+    path: 'roles',
+    component: 'pages/system/roles/IndexPage',
+    name: 'roles',
+    order: 4,
+    enabled: true,
+    icon: 'mdi-shield-account-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 6,
+    superiorId: 1,
+    path: 'dictionaries',
+    component: 'pages/system/dictionaries/IndexPage',
+    name: 'dictionaries',
+    order: 5,
+    enabled: true,
+    icon: 'mdi-book-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 8,
+    superiorId: 7,
+    path: 'operation',
+    component: 'pages/logs/operation/IndexPage',
+    name: 'operationLog',
+    order: 1,
+    enabled: true,
+    icon: 'mdi-clipboard-text-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 9,
+    superiorId: 7,
+    path: 'access',
+    component: 'pages/logs/access/IndexPage',
+    name: 'accessLog',
+    order: 2,
+    enabled: true,
+    icon: 'mdi-file-document-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 10,
+    superiorId: 7,
+    path: 'audit',
+    component: 'pages/logs/audit/IndexPage',
+    name: 'auditLog',
+    order: 3,
+    enabled: true,
+    icon: 'mdi-clipboard-check-outline',
+    description: 'this is description for this row'
+  },
+  {
+    id: 11,
+    superiorId: 7,
+    path: 'scheduler',
+    component: 'pages/logs/scheduler/IndexPage',
+    name: 'schedulerLog',
+    order: 4,
+    enabled: true,
+    icon: 'mdi-calendar-text-outline',
+    description: 'this is description for this row'
+  }
+]
 
-for (let i = 0; i < 20; i++) {
-  const data: Privilege = {
-    id: i,
-    name: 'privilege_' + i,
-    superiorId: i,
-    meta: {
-      icon: 'user'
-    },
-    enabled: i % 3 > 0,
-    description: 'description',
-    lastModifiedDate: new Date()
+const treeNodes: PrivilegeTreeNode[] = [
+  {
+    id: 1,
+    path: '/system',
+    component: '#',
+    redirect: '/system/users',
+    name: 'system',
+    order: 1,
+    icon: 'mdi-cog-outline',
+    children: [
+      {
+        id: 2,
+        path: 'groups',
+        component: 'pages/system/groups/IndexPage',
+        name: 'groups',
+        order: 1,
+        icon: 'mdi-account-multiple-plus-outline'
+      },
+      {
+        id: 3,
+        path: 'users',
+        component: 'pages/system/users/IndexPage',
+        name: 'users',
+        order: 2,
+        icon: 'mdi-account-outline'
+      },
+      {
+        id: 4,
+        path: 'privileges',
+        component: 'pages/system/privileges/IndexPage',
+        name: 'privileges',
+        order: 3,
+        icon: 'mdi-shield-key-outline'
+      },
+      {
+        id: 5,
+        path: 'roles',
+        component: 'pages/system/roles/IndexPage',
+        name: 'roles',
+        order: 4,
+        icon: 'mdi-shield-account-outline'
+      },
+      {
+        id: 6,
+        path: 'dictionaries',
+        component: 'pages/system/dictionaries/IndexPage',
+        name: 'dictionaries',
+        order: 5,
+        icon: 'mdi-book-outline'
+      }
+    ]
+  },
+  {
+    id: 7,
+    path: '/logs',
+    component: '#',
+    redirect: '/logs/operation',
+    name: 'logs',
+    order: 2,
+    icon: 'mdi-clipboard-list-outline',
+    children: [
+      {
+        id: 8,
+        path: 'operation',
+        component: 'pages/logs/operation/IndexPage',
+        name: 'operationLog',
+        order: 1,
+        icon: 'mdi-clipboard-text-outline'
+      },
+      {
+        id: 9,
+        path: 'access',
+        component: 'pages/logs/access/IndexPage',
+        name: 'accessLog',
+        order: 2,
+        icon: 'mdi-file-document-outline'
+      },
+      {
+        id: 10,
+        path: 'audit',
+        component: 'pages/logs/audit/IndexPage',
+        name: 'auditLog',
+        order: 3,
+        icon: 'mdi-clipboard-check-outline'
+      },
+      {
+        id: 11,
+        path: 'scheduler',
+        component: 'pages/logs/scheduler/IndexPage',
+        name: 'schedulerLog',
+        order: 4,
+        icon: 'mdi-calendar-text-outline'
+      }
+    ]
   }
-  datas.push(data)
-}
+]
 
-export const rolesHandlers = [
+export const privilegessHandlers = [
+  http.get('/api/privileges/:username/tree', ({ params }) => {
+    const { username } = params
+    console.log(username)
+    return HttpResponse.json(treeNodes)
+  }),
+  http.get('/api/privileges/:id/subset', ({ params }) => {
+    const { id } = params
+    return HttpResponse.json(subDatas.filter(item => item.superiorId === Number(id)))
+  }),
+  http.get('/api/privileges/:id', ({ params }) => {
+    const { id } = params
+    if (id) {
+      let res = datas.filter(item => item.id === Number(id))
+      if (!res) {
+        res = subDatas.filter(item => item.id === Number(id))
+      }
+      return HttpResponse.json(res)
+    }
+    return HttpResponse.json(null)
+  }),
   http.get('/api/privileges', ({ request }) => {
     const url = new URL(request.url)
     const page = url.searchParams.get('page')
diff --git a/src/mocks/regions.ts b/src/mocks/regions.ts
index 9931d03..6ead250 100644
--- a/src/mocks/regions.ts
+++ b/src/mocks/regions.ts
@@ -2,21 +2,76 @@ import { http, HttpResponse } from 'msw'
 import type { Region } from 'src/models'
 
 const datas: Region[] = []
+const subDatas: Region[] = []
 
-for (let i = 0; i < 20; i++) {
+for (let i = 0; i < 34; i++) {
   const data: Region = {
     id: i,
     name: 'region_' + i,
-    areaCode: i,
-    postalCode: i,
+    areaCode: (11 + i) * 10000,
+    postalCode: (11 + i),
     enabled: i % 3 > 0,
-    description: 'description',
+    description: 'This is region description about xxx',
     lastModifiedDate: new Date()
   }
+  for (let j = 0; j < i; j++) {
+    const subData: Region = {
+      id: j,
+      name: 'region_' + i + '_' + j,
+      superiorId: i,
+      areaCode: data.areaCode + j,
+      postalCode: data.postalCode + j,
+      enabled: j % 2 > 0,
+      description: 'This is region description about xxx',
+      lastModifiedDate: new Date()
+    }
+    subDatas.push(subData)
+  }
   datas.push(data)
 }
 
 export const regionsHandlers = [
+  http.get('/api/regions/:id/subset', ({ params, request }) => {
+    const superiorId = params.id
+
+    const url = new URL(request.url)
+    const page = url.searchParams.get('page')
+    const size = url.searchParams.get('size')
+
+    // sort and filter
+    const sortBy = url.searchParams.get('sortBy') as never
+    if (sortBy) {
+      datas.sort((a: Region, b: Region) => {
+        if (a[sortBy] > b[sortBy]) {
+          return 1
+        }
+        if (a[sortBy] < b[sortBy]) {
+          return -1
+        }
+        return 0
+      })
+    }
+    let data = {
+    }
+
+    const filter = url.searchParams.get('filter')
+    if (filter) {
+      const result = subDatas.filter(item => item.superiorId === Number(superiorId)).filter(item => item.name.includes(filter)).slice(Number(page) * Number(size), (Number(page) + 1) * Number(size))
+      data = {
+        content: result,
+        totalElements: result.length
+      }
+      return HttpResponse.json(data)
+    }
+    // Construct a JSON response with the list of all Dictionarys
+    // as the response body.
+    data = {
+      content: Array.from(subDatas.filter(item => item.superiorId === Number(superiorId)).slice(Number(page) * Number(size), (Number(page) + 1) * Number(size))),
+      totalElements: datas.length
+    }
+
+    return HttpResponse.json(data)
+  }),
   http.get('/api/regions', ({ request }) => {
     const url = new URL(request.url)
     const page = url.searchParams.get('page')
diff --git a/src/mocks/roles.ts b/src/mocks/roles.ts
index 2af0300..b045a4a 100644
--- a/src/mocks/roles.ts
+++ b/src/mocks/roles.ts
@@ -8,7 +8,7 @@ for (let i = 0; i < 20; i++) {
     id: i,
     name: 'role_' + i,
     enabled: i % 3 > 0,
-    description: 'description',
+    description: 'This is role description about xxx',
     lastModifiedDate: new Date()
   }
   datas.push(data)
diff --git a/src/mocks/users.ts b/src/mocks/users.ts
index f08ab3f..ccb5125 100644
--- a/src/mocks/users.ts
+++ b/src/mocks/users.ts
@@ -11,8 +11,8 @@ for (let i = 0; i < 20; i++) {
     lastname: 'lastname_' + i,
     enabled: i % 2 > 0,
     accountNonLocked: i % 3 > 0,
-    accountExpiresAt: new Date(),
-    credentialsExpiresAt: new Date(),
+    accountExpiresAt: new Date(2024, 7, i),
+    credentialsExpiresAt: new Date(2024, i, 3),
     lastModifiedDate: new Date()
   }
   datas.push(data)
diff --git a/src/models.d.ts b/src/models.d.ts
index 75375e8..9ebcff7 100644
--- a/src/models.d.ts
+++ b/src/models.d.ts
@@ -30,10 +30,11 @@ export interface Privilege extends AudtiMetadata {
   name: string
   superiorId?: number
   path?: string
-  meta: {
-    icon?: string
-    actions?: string[]
-  }
+  redirect?: string
+  component?: string
+  icon?: string
+  actions?: string[]
+  order: number
   enabled?: boolean
   description?: string
 }
@@ -53,3 +54,20 @@ export interface Region extends AudtiMetadata {
   enabled?: boolean
   description?: string
 }
+
+export interface TreeNode {
+  id: number
+  name: string
+  superiorId?: number
+  children?: TreeNode[]
+}
+
+export interface PrivilegeTreeNode extends TreeNode {
+  path?: string
+  redirect?: string
+  component: string
+  icon?: string
+  actions?: string[]
+  order: number
+  children?: PrivilegeTreeNode[]
+}
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index c3fa73a..7c1481b 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,10 +1,10 @@
 <template>
   <q-page padding>
-    <q-card flat>
-      <q-card-section>
-        <q-date v-model="data" />
-      </q-card-section>
-    </q-card>
+    <!-- <q-card flat>
+      <q-card-section> -->
+    <q-date v-model="data" />
+    <!-- </q-card-section>
+    </q-card> -->
   </q-page>
 </template>
 
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index 46d3f4d..ceb9587 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -1,42 +1,28 @@
 <template>
-  <q-layout class="overflow-hidden" :style="{ background: $q.dark.isActive ? 'black' : '#e3f4fa' }">
+  <q-layout class="overflow-hidden" :class="$q.dark.isActive ? 'bg-dark-page' : 'bg-light-blue-1'">
     <q-header class="transparent text-black">
       <q-toolbar>
         <q-toolbar-title>
-          <q-img alt="logo" src="/logo-only.svg" style="width: 3em; height: 3em;" />
+          <q-img alt="logo" src="/logo-only.svg" width="3rem" height="3rem" />
+          <span class="q-ml-sm text-weight-medium">Management System</span>
         </q-toolbar-title>
-
-        <q-btn title="language" icon="sym_r_language" round flat>
-          <q-menu>
-            <q-list dense separator>
-              <q-item clickable v-close-popup :active="locale === 'en-US'" @click="locale = 'en-US'">
-                <q-item-section>English(US)</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup :active="locale === 'zh-CN'" @click="locale = 'zh-CN'">
-                <q-item-section>中文（简体）</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup :active="locale === 'zh-TW'" @click="locale = 'zh-TW'">
-                <q-item-section>中文（繁體）</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-        </q-btn>
-
-        <q-toggle v-model="$q.dark.isActive" icon="sym_r_dark_mode" unchecked-icon="sym_r_light_mode"
-          title="theme_toogle" :color="$q.dark.isActive ? 'black' : ''" />
+        <!-- language -->
+        <LanguageSelector />
+        <!-- theme -->
+        <ThemeToogle />
       </q-toolbar>
     </q-header>
     <q-page-container>
-      <q-page class="row justify-center items-center">
+      <q-page padding class="row justify-center items-center">
 
         <figure class="absolute bg-primary-gradient rounded-full"
-          style="height: 35em; width: 35em;  top: -19em; right: -14em; background-color: var('$primary');" />
+          style="height: 35em; width: 35em;  top: -19em; right: -14em; " />
         <figure class="absolute bg-positive-gradient rounded-full"
-          style="height: 21em; width: 21em; bottom: 4em; right: -7em; background-color: var('$positive');" />
+          style="height: 21em; width: 21em; bottom: 4em; right: -7em; " />
         <figure class="absolute bg-warning-gradient rounded-full"
-          style="height: 42em; width: 42em; bottom: -19em; left: -14em; background-color: var('$warning');" />
+          style="height: 42em; width: 42em; bottom: -19em; left: -14em; " />
         <figure class="absolute bg-negative-gradient rounded-full"
-          style="height: 21em;  width: 21em; bottom: -16em; left: 14em; background-color: var('$negative');" />
+          style="height: 21em;  width: 21em; bottom: -16em; left: 14em; " />
 
         <q-card bordered class="column justify-center items-center shadow-15 overflow-hidden"
           style="width: 65vw;height: 70vh;border-radius: 20px;">
@@ -55,9 +41,9 @@
               </div>
             </transition>
           </q-card-section>
-          <q-separator vertical dark />
+          <q-separator vertical />
           <q-card-section horizontal class="full-height no-border-radius" style="width: 50%;"
-            :style="{ backgroundColor: $q.dark.isActive ? '' : '#f3fbff' }">
+            :class="$q.dark.isActive ? '' : 'bg-light-blue-1'">
             <transition appear enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
               <div class="column justify-center items-center full-width">
                 <div class="text-center">
@@ -68,12 +54,14 @@
                 </div>
                 <q-form @submit="onSubmit" class="q-mt-md full-width q-px-xl">
                   <q-input :disable="loading" dense no-error-icon v-model.trim="form.username"
-                    :placeholder="$t('username')" :rules="[(val) => (val && val.length > 0) || $t('username')]" />
+                    :placeholder="$t('username')"
+                    :rules="[(val) => (val && val.length > 5 && val.length < 12) || $t('username')]">>
+                  </q-input>
                   <q-input :disable="loading" dense no-error-icon :type="showPwd ? 'password' : 'text'"
                     v-model.trim="form.password" :placeholder="$t('password')"
-                    :rules="[(val) => (val && val.length > 0) || $t('password')]">
+                    :rules="[(val) => (val && val.length > 8 && val.length < 32) || $t('password')]">
                     <template v-slot:append>
-                      <q-icon size="xs" :name="showPwd ? 'sym_r_visibility_off' : 'sym_r_visibility'"
+                      <q-icon size="xs" :name="showPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
                         class="cursor-pointer" @click="showPwd = !showPwd" />
                     </template>
                   </q-input>
@@ -88,32 +76,29 @@
         </q-card>
       </q-page>
     </q-page-container>
-    <q-footer class="transparent text-center" :class="$q.dark.isActive ? 'text-white' : 'text-black'">
-      <q-btn title="github" flat rounded label="Github" @click="openLink('https://github.com/little3201/leafage-ms')" />
-      <q-btn title="gitee" flat rounded label="Gitee" @click="openLink('https://gitee.com/little3201/leafage-ms')" />
-      <p :class="{ 'text-white': $q.dark.isActive }">Copyright &copy; 2018 - {{ new Date().getFullYear() }}
-        leafage.top
-        All rights reserved.</p>
+    <q-footer class="bg-transparent text-center" :class="$q.dark.isActive ? 'text-white' : 'text-black'">
+      <p :class="{ 'text-white': $q.dark.isActive }">&copy; {{ new Date().getFullYear() }}
+        All Rights Reserved.</p>
     </q-footer>
   </q-layout>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import lottie from 'lottie-web'
 import { useQuasar } from 'quasar'
-import { api } from 'boot/axios'
 import { useUserStore } from 'stores/user-store'
 
+import LanguageSelector from 'components/LanguageSelector.vue'
+import ThemeToogle from 'components/ThemeToogle.vue'
+
 const { currentRoute, replace } = useRouter()
 const $q = useQuasar()
 const userStore = useUserStore()
 
-const { locale } = useI18n({ useScope: 'global' })
 const showPwd = ref<boolean>(true)
-const rememberMe = ref<boolean>(true)
+const rememberMe = ref<boolean>(false)
 const loading = ref<boolean>(false)
 const lottieRef = ref<HTMLDivElement | null>(null)
 
@@ -130,19 +115,13 @@ function changeRememberMe(value: boolean) {
   return value
 }
 
-function openLink(url: string) {
-  window.open(url)
-}
-
 function onSubmit() {
   loading.value = true
-
-  api.post('/login', new URLSearchParams(form.value)).then(res => {
-    userStore.updateUser(res.data.username)
-    // 获取之前路由
-    const redirectRoute = currentRoute.value.query.redirect as string | undefined
-    replace(redirectRoute || '/')
-  }).catch(error => $q.notify({ type: 'negative', message: error.message }))
+  userStore.login(form.value.username, form.value.password)
+    .then(() => {
+      const redirectRoute = currentRoute.value.query.redirect as string
+      replace(redirectRoute || '/')
+    }).catch(error => $q.notify({ type: 'negative', message: error.message }))
     .finally(() => {
       // 在请求结束后执行
       loading.value = false
diff --git a/src/pages/system/dictionary/IndexPage.vue b/src/pages/system/dictionaries/IndexPage.vue
similarity index 76%
rename from src/pages/system/dictionary/IndexPage.vue
rename to src/pages/system/dictionaries/IndexPage.vue
index e6db9c7..28febc3 100644
--- a/src/pages/system/dictionary/IndexPage.vue
+++ b/src/pages/system/dictionaries/IndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
 
-    <q-dialog v-model="visiable" persistent>
+    <q-dialog v-model="visible" persistent>
       <q-card style="min-width: 25em">
         <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
           <q-card-section>
@@ -15,8 +15,8 @@
             <q-input v-model="form.description" label="Dictionary deacription" type="textarea" />
           </q-card-section>
 
-          <q-card-actions align="right" class="text-primary">
-            <q-btn title="cancel" label="Cancel" type="reset" v-close-popup />
+          <q-card-actions align="right">
+            <q-btn title="cancel" label="Cancel" unelevated type="reset" v-close-popup />
             <q-btn title="submit" type="submit" label="Submit" color="primary" />
           </q-card-actions>
 
@@ -24,17 +24,17 @@
       </q-card>
     </q-dialog>
 
-    <q-table flat ref="tableRef" title="Dictionaries" :rows="rows" :columns="columns" row-key="id" :loading="loading"
-      v-model:pagination="pagination" binary-state-sort @request="onRequest" class="full-width">
+    <q-table flat ref="tableRef" :title="$t('dictionaries')" :rows="rows" :columns="columns" row-key="id"
+      :loading="loading" v-model:pagination="pagination" binary-state-sort @request="onRequest" class="full-width">
       <template v-slot:top-right>
         <q-input dense debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
-            <q-icon name="sym_r_search" />
+            <q-icon name="mdi-search" />
           </template>
         </q-input>
-        <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
+        <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="mdi-refresh"
           @click="refresh" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+        <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
           @click="exportTable" />
       </template>
 
@@ -42,7 +42,7 @@
         <q-tr :props="props">
           <q-th auto-width />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
-            {{ col.label }}
+            {{ $t(col.label) }}
           </q-th>
         </q-tr>
       </template>
@@ -51,15 +51,15 @@
         <q-tr :props="props">
           <q-td auto-width>
             <q-btn title="expand" round flat dense @click="props.expand = !props.expand"
-              :icon="props.expand ? 'sym_r_expand_less' : 'sym_r_expand_more'" />
+              :icon="props.expand ? 'mdi-chevron-down' : 'mdi-chevron-right'" />
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name">
-            <div v-if="col.name == 'id'" class="text-right">
-              <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(col.value)"
-                class="q-mt-none" />
+            <div v-if="col.name === 'id'" class="text-right">
+              <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+                @click="editRow(col.value)" class="q-mt-none" />
             </div>
-            <div v-else-if="col.name == 'enabled'" class="text-center">
-              <q-toggle v-model="props.row.enabled" color="green" />
+            <div v-else-if="col.name === 'enabled'" class="text-center">
+              <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
             </div>
             <span v-else>{{ col.value }}</span>
           </q-td>
@@ -86,7 +86,7 @@ import type { Dictionary } from 'src/models'
 
 const $q = useQuasar()
 
-const visiable = ref<boolean>(false)
+const visible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -107,10 +107,10 @@ const pagination = ref({
 })
 
 const columns: QTableProps['columns'] = [
-  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'description', label: 'Description', align: 'left', field: 'description' },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(async () => {
@@ -149,11 +149,20 @@ function refresh() {
 }
 
 function editRow(id: number) {
-  visiable.value = true
-  console.log('id: ', id)
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
 }
 
-function onSubmit() { }
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
 
 function onReset() { }
 
diff --git a/src/pages/system/dictionary/SubPage.vue b/src/pages/system/dictionaries/SubPage.vue
similarity index 62%
rename from src/pages/system/dictionary/SubPage.vue
rename to src/pages/system/dictionaries/SubPage.vue
index 84a63cc..f07fa3c 100644
--- a/src/pages/system/dictionary/SubPage.vue
+++ b/src/pages/system/dictionaries/SubPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-dialog v-model="visiable" persistent>
+  <q-dialog v-model="visible" persistent>
     <q-card style="min-width: 25em">
       <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
         <q-card-section>
@@ -13,33 +13,42 @@
           <q-input v-model="form.description" label="Dictionary deacription" type="textarea" />
         </q-card-section>
 
-        <q-card-actions align="right" class="text-primary">
-          <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
-          <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
+        <q-card-actions align="right">
+          <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+          <q-btn title="submit" type="submit" label="Submit" color="primary" />
         </q-card-actions>
 
       </q-form>
     </q-card>
   </q-dialog>
 
-  <q-table flat ref="subtableRef" :title="title" selection="multiple" v-model:selected="selected" :rows="rows"
-    :columns="columns" row-key="id" binary-state-sort @request="onRequest" hide-pagination hide-selected-banner
-    class="full-width bg-transparent">
+  <q-table flat ref="subtableRef" :title="title" :rows="rows" :columns="columns" row-key="id" binary-state-sort
+    @request="onRequest" hide-pagination hide-selected-banner class="full-width bg-transparent">
     <template v-slot:top-right>
-      <q-btn title="add" rounded color="primary" :disable="loading" icon="sym_r_add" label="Add" @click="addRow" />
-      <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
+      <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="mdi-refresh"
         @click="refresh" />
+      <q-btn title="add" rounded color="primary" :disable="loading" icon="mdi-plus" :label="$t('add')"
+        @click="addRow" />
     </template>
+
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ $t(col.label) }}
+        </q-th>
+      </q-tr>
+    </template>
+
     <template v-slot:body-cell-enabled="props">
       <q-td :props="props">
-        <q-toggle v-model="props.row.enabled" color="green" />
+        <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
       </q-td>
     </template>
     <template v-slot:body-cell-id="props">
       <q-td :props="props">
-        <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
-          class="q-mt-none" />
-        <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
+        <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+          @click="editRow(props.row.id)" class="q-mt-none" />
+        <q-btn title="delete" padding="xs" flat round color="negative" icon="mdi-trash-can-outline"
           @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
       </q-td>
     </template>
@@ -57,12 +66,15 @@ import type { Dictionary } from 'src/models'
 
 const $q = useQuasar()
 
-const props = withDefaults(defineProps<{ title: string, superiorId: number | undefined }>(), {
+const props = withDefaults(defineProps<{
+  title: string
+  superiorId?: number | undefined
+}>(), {
   title: '',
   superiorId: undefined
 })
 
-const visiable = ref<boolean>(false)
+const visible = ref<boolean>(false)
 
 const subtableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -74,13 +86,11 @@ const form = ref<Dictionary>({
   description: ''
 })
 
-const selected = ref([])
-
 const columns: QTableProps['columns'] = [
-  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'description', label: 'Description', align: 'left', field: 'description' },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(() => {
@@ -119,12 +129,18 @@ async function refresh() {
 }
 
 function addRow() {
-  visiable.value = true
+  visible.value = true
 }
 
 function editRow(id: number) {
-  visiable.value = true
-  console.log('id: ', id)
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
 }
 
 function removeRow(id: number) {
@@ -135,7 +151,10 @@ function removeRow(id: number) {
   }, 500)
 }
 
-function onSubmit() { }
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
 
 function onReset() { }
 </script>
diff --git a/src/pages/system/group/IndexPage.vue b/src/pages/system/groups/IndexPage.vue
similarity index 75%
rename from src/pages/system/group/IndexPage.vue
rename to src/pages/system/groups/IndexPage.vue
index a1b73ed..7c5246d 100644
--- a/src/pages/system/group/IndexPage.vue
+++ b/src/pages/system/groups/IndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
 
-    <q-dialog v-model="visiable" persistent>
+    <q-dialog v-model="visible" persistent>
       <q-card style="min-width: 25em">
         <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
           <q-card-section>
@@ -13,29 +13,39 @@
               :rules="[val => val && val.length > 0 || 'Please type something']" />
           </q-card-section>
 
-          <q-card-actions align="right" class="text-primary">
-            <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
-            <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
+          <q-card-actions align="right">
+            <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+            <q-btn title="submit" type="submit" label="Submit" color="primary" />
           </q-card-actions>
 
         </q-form>
       </q-card>
     </q-dialog>
 
-    <q-table flat ref="tableRef" title="Groups" selection="multiple" v-model:selected="selected" :rows="rows"
+    <q-table flat ref="tableRef" :title="$t('groups')" selection="multiple" v-model:selected="selected" :rows="rows"
       :columns="columns" row-key="id" v-model:pagination="pagination" :loading="loading" :filter="filter"
       binary-state-sort @request="onRequest" class="full-width">
       <template v-slot:top-right>
         <q-input dense debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
-            <q-icon name="sym_r_search" />
+            <q-icon name="mdi-search" />
           </template>
         </q-input>
-        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
+        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="mdi-plus" :label="$t('add')"
           @click="addRow" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+        <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
           @click="exportTable" />
       </template>
+
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ $t(col.label) }}
+          </q-th>
+        </q-tr>
+      </template>
+
       <template v-slot:body-cell-members="props">
         <q-td :props="props">
           <q-avatar v-for="n in 5" :key="n" size="32px" :style="{ left: `${n * -2}px`, border: '2px solid white' }">
@@ -45,14 +55,14 @@
       </template>
       <template v-slot:body-cell-enabled="props">
         <q-td :props="props">
-          <q-toggle v-model="props.row.enabled" color="green" />
+          <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
         </q-td>
       </template>
       <template v-slot:body-cell-id="props">
         <q-td :props="props">
-          <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
-            class="q-mt-none" />
-          <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
+          <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+            @click="editRow(props.row.id)" class="q-mt-none" />
+          <q-btn title="delete" padding="xs" flat round color="negative" icon="mdi-trash-can-outline"
             @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
         </q-td>
       </template>
@@ -71,7 +81,7 @@ import type { Group } from 'src/models'
 
 const $q = useQuasar()
 
-const visiable = ref<boolean>(false)
+const visible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -93,10 +103,10 @@ const pagination = ref({
 const selected = ref([])
 
 const columns: QTableProps['columns'] = [
-  { name: 'name', label: 'Name', align: 'left', field: 'groupName', sortable: true },
-  { name: 'members', label: 'Members', align: 'center', field: 'members' },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'name', label: 'name', align: 'left', field: 'groupName', sortable: true },
+  { name: 'members', label: 'members', align: 'center', field: 'members' },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(() => {
@@ -133,12 +143,18 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
 }
 
 function addRow() {
-  visiable.value = true
+  visible.value = true
 }
 
 function editRow(id: number) {
-  visiable.value = true
-  console.log('id: ', id)
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
 }
 
 function removeRow(id: number) {
@@ -149,7 +165,10 @@ function removeRow(id: number) {
   }, 500)
 }
 
-function onSubmit() { }
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
 
 function onReset() { }
 
diff --git a/src/pages/system/privilege/IndexPage.vue b/src/pages/system/privileges/IndexPage.vue
similarity index 58%
rename from src/pages/system/privilege/IndexPage.vue
rename to src/pages/system/privileges/IndexPage.vue
index 27d5a4b..546c04e 100644
--- a/src/pages/system/privilege/IndexPage.vue
+++ b/src/pages/system/privileges/IndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
 
-    <q-dialog v-model="visiable" persistent>
+    <q-dialog v-model="visible" persistent>
       <q-card style="min-width: 25em">
         <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
           <q-card-section>
@@ -15,41 +15,64 @@
             <q-input v-model="form.description" label="Region deacription" type="textarea" />
           </q-card-section>
 
-          <q-card-actions align="right" class="text-primary">
-            <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
-            <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
+          <q-card-actions align="right">
+            <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+            <q-btn title="submit" type="submit" label="Submit" color="primary" />
           </q-card-actions>
 
         </q-form>
       </q-card>
     </q-dialog>
 
-    <q-table flat ref="tableRef" title="Regions" selection="multiple" v-model:selected="selected" :rows="rows"
+    <q-table flat ref="tableRef" :title="$t('privileges')" selection="multiple" v-model:selected="selected" :rows="rows"
       :columns="columns" row-key="id" v-model:pagination="pagination" :loading="loading" :filter="filter"
       binary-state-sort @request="onRequest" class="full-width">
       <template v-slot:top-right>
         <q-input dense debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
-            <q-icon name="sym_r_search" />
+            <q-icon name="mdi-search" />
           </template>
         </q-input>
-        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
-          @click="addRow" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+        <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="mdi-refresh"
+          @click="refresh" />
+        <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
           @click="exportTable" />
       </template>
-      <template v-slot:body-cell-enabled="props">
-        <q-td :props="props">
-          <q-toggle v-model="props.row.enabled" color="green" />
-        </q-td>
+
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ $t(col.label) }}
+          </q-th>
+        </q-tr>
       </template>
-      <template v-slot:body-cell-id="props">
-        <q-td :props="props">
-          <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
-            class="q-mt-none" />
-          <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
-            @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
-        </q-td>
+
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-btn title="expand" round flat dense @click="props.expand = !props.expand"
+              :icon="props.expand ? 'mdi-chevron-down' : 'mdi-chevron-right'" />
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name">
+            <div v-if="col.name === 'id'" class="text-right">
+              <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+                @click="editRow(col.value)" class="q-mt-none" />
+            </div>
+            <div v-else-if="col.name === 'enabled'" class="text-center">
+              <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
+            </div>
+            <div v-else-if="col.name === 'name'">
+              <q-icon :name="props.row.icon" size="sm" class="q-pr-sm" />{{ $t(col.value) }}
+            </div>
+            <span v-else>{{ col.value }}</span>
+          </q-td>
+        </q-tr>
+        <q-tr v-show="props.expand" :props="props">
+          <q-td colspan="100%" class="q-pr-none">
+            <sub-page v-if="props.expand" :title="props.row.name" :superior-id="props.row.id" />
+          </q-td>
+        </q-tr>
       </template>
     </q-table>
   </q-page>
@@ -60,13 +83,14 @@ import { ref, onMounted } from 'vue'
 import type { QTableProps } from 'quasar'
 import { exportFile, useQuasar } from 'quasar'
 import { api } from 'boot/axios'
+import SubPage from './SubPage.vue'
 
 import { SERVER_URL } from 'src/api/paths'
 import type { Privilege } from 'src/models'
 
 const $q = useQuasar()
 
-const visiable = ref<boolean>(false)
+const visible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -75,9 +99,9 @@ const loading = ref<boolean>(false)
 
 const form = ref<Privilege>({
   name: '',
-  meta: {
-    icon: ''
-  },
+  path: '',
+  icon: '',
+  order: 1,
   description: ''
 })
 
@@ -92,12 +116,11 @@ const pagination = ref({
 const selected = ref([])
 
 const columns: QTableProps['columns'] = [
-  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-  { name: 'postalCode', label: 'Postal Code', align: 'left', field: 'postalCode', sortable: true },
-  { name: 'areaCode', label: 'Area Code', align: 'left', field: 'areaCode', sortable: true },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'description', label: 'Description', align: 'left', field: 'description' },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'path', label: 'path', align: 'left', field: 'path', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(() => {
@@ -133,25 +156,26 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
-function addRow() {
-  visiable.value = true
+function refresh() {
+  tableRef.value.requestServerInteraction()
 }
 
 function editRow(id: number) {
-  visiable.value = true
-  console.log('id: ', id)
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
 }
 
-function removeRow(id: number) {
-  console.log('id: ', id)
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-  }, 500)
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
 }
 
-function onSubmit() { }
-
 function onReset() { }
 
 function wrapCsvValue(val: string, formatFn?: (val: string, row?: string) => string, row?: string) {
diff --git a/src/pages/system/privileges/SubPage.vue b/src/pages/system/privileges/SubPage.vue
new file mode 100644
index 0000000..5a63393
--- /dev/null
+++ b/src/pages/system/privileges/SubPage.vue
@@ -0,0 +1,165 @@
+<template>
+
+  <q-dialog v-model="visible" persistent>
+    <q-card style="min-width: 25em">
+      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+        <q-card-section>
+          <div class="text-h6">Group</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input v-model="form.name" label="Region name" lazy-rules
+            :rules="[val => val && val.length > 0 || 'Please type something']" />
+
+          <q-input v-model="form.description" label="Region deacription" type="textarea" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+          <q-btn title="submit" type="submit" label="Submit" color="primary" />
+        </q-card-actions>
+
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-table flat ref="tableRef" :title="title" :rows="rows" :columns="columns" row-key="id"
+    v-model:pagination="pagination" :loading="loading" :filter="filter" binary-state-sort @request="onRequest"
+    class="full-width">
+    <template v-slot:top-right>
+      <q-input dense debounce="300" v-model="filter" placeholder="Search">
+        <template v-slot:append>
+          <q-icon name="mdi-search" />
+        </template>
+      </q-input>
+    </template>
+
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ $t(col.label) }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn title="expand" round flat dense @click="props.expand = !props.expand"
+            :icon="props.expand ? 'mdi-chevron-down' : 'mdi-chevron-right'" />
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.name">
+          <div v-if="col.name === 'id'" class="text-right">
+            <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+              @click="editRow(col.value)" class="q-mt-none" />
+          </div>
+          <div v-else-if="col.name === 'enabled'" class="text-center">
+            <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
+          </div>
+          <div v-else-if="col.name === 'name'">
+            <q-icon :name="props.row.icon" size="sm" class="q-pr-sm" />{{ $t(col.value) }}
+          </div>
+          <span v-else>{{ col.value }}</span>
+        </q-td>
+      </q-tr>
+      <q-tr v-show="props.expand" :props="props">
+        <q-td colspan="100%" class="q-pr-none">
+          <sub-page v-if="props.expand" :title="props.row.name" :superior-id="props.row.id" />
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { QTableProps } from 'quasar'
+import { useQuasar } from 'quasar'
+import { api } from 'boot/axios'
+
+import { SERVER_URL } from 'src/api/paths'
+import type { Privilege } from 'src/models'
+
+const $q = useQuasar()
+
+const props = withDefaults(defineProps<{
+  title: string
+  superiorId?: number | undefined
+}>(), {
+  title: '',
+  superiorId: undefined
+})
+
+const visible = ref<boolean>(false)
+
+const tableRef = ref()
+const rows = ref<QTableProps['rows']>([])
+const filter = ref('')
+const loading = ref<boolean>(false)
+
+const form = ref<Privilege>({
+  name: '',
+  path: '',
+  component: '',
+  icon: '',
+  order: 1,
+  description: ''
+})
+
+const pagination = ref({
+  sortBy: 'id',
+  descending: true,
+  page: 1,
+  rowsPerPage: 7,
+  rowsNumber: 0
+})
+
+const columns: QTableProps['columns'] = [
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'path', label: 'path', align: 'left', field: 'path', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
+]
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction()
+})
+
+/**
+ * 查询列表
+ */
+async function onRequest() {
+  loading.value = true
+
+  await api.get(`${SERVER_URL.PRIVILEGE}/${props.superiorId}/subset`).then(res => {
+    rows.value = res.data
+  }).catch(error => {
+    $q.notify({
+      message: error.message,
+      type: 'negative'
+    })
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function editRow(id: number) {
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
+}
+
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
+
+function onReset() { }
+</script>
diff --git a/src/pages/system/region/IndexPage.vue b/src/pages/system/regions/IndexPage.vue
similarity index 60%
rename from src/pages/system/region/IndexPage.vue
rename to src/pages/system/regions/IndexPage.vue
index d4ec371..439c801 100644
--- a/src/pages/system/region/IndexPage.vue
+++ b/src/pages/system/regions/IndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
 
-    <q-dialog v-model="visiable" persistent>
+    <q-dialog v-model="visible" persistent>
       <q-card style="min-width: 25em">
         <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
           <q-card-section>
@@ -15,41 +15,63 @@
             <q-input v-model="form.description" label="Region deacription" type="textarea" />
           </q-card-section>
 
-          <q-card-actions align="right" class="text-primary">
-            <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
-            <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
+          <q-card-actions align="right">
+            <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+            <q-btn title="submit" type="submit" label="Submit" color="primary" />
           </q-card-actions>
 
         </q-form>
       </q-card>
     </q-dialog>
 
-    <q-table flat ref="tableRef" title="Regions" selection="multiple" v-model:selected="selected" :rows="rows"
+    <q-table flat ref="tableRef" :title="$t('regions')" selection="multiple" v-model:selected="selected" :rows="rows"
       :columns="columns" row-key="id" v-model:pagination="pagination" :loading="loading" :filter="filter"
       binary-state-sort @request="onRequest" class="full-width">
       <template v-slot:top-right>
         <q-input dense debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
-            <q-icon name="sym_r_search" />
+            <q-icon name="mdi-search" />
           </template>
         </q-input>
-        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
+        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="mdi-plus" :label="$t('add')"
           @click="addRow" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+        <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
           @click="exportTable" />
       </template>
-      <template v-slot:body-cell-enabled="props">
-        <q-td :props="props">
-          <q-toggle v-model="props.row.enabled" color="green" />
-        </q-td>
+
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ $t(col.label) }}
+          </q-th>
+        </q-tr>
       </template>
-      <template v-slot:body-cell-id="props">
-        <q-td :props="props">
-          <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
-            class="q-mt-none" />
-          <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
-            @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
-        </q-td>
+
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-btn title="expand" round flat dense @click="props.expand = !props.expand"
+              :icon="props.expand ? 'mdi-chevron-down' : 'mdi-chevron-right'" />
+          </q-td>
+          <q-td v-for="col in props.cols" :key="col.name">
+            <div v-if="col.name === 'id'" class="text-right">
+              <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+                @click="editRow(props.row.id)" class="q-mt-none" />
+              <q-btn title="delete" padding="xs" flat round color="negative" icon="mdi-trash-can-outline"
+                @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
+            </div>
+            <div v-else-if="col.name === 'enabled'" class="text-center">
+              <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
+            </div>
+            <span v-else>{{ col.value }}</span>
+          </q-td>
+        </q-tr>
+        <q-tr v-show="props.expand" :props="props">
+          <q-td colspan="100%" class="q-pr-none">
+            <sub-page v-if="props.expand" :title="props.row.name" :superior-id="props.row.id" />
+          </q-td>
+        </q-tr>
       </template>
     </q-table>
   </q-page>
@@ -60,13 +82,14 @@ import { ref, onMounted } from 'vue'
 import type { QTableProps } from 'quasar'
 import { exportFile, useQuasar } from 'quasar'
 import { api } from 'boot/axios'
+import SubPage from './SubPage.vue'
 
 import { SERVER_URL } from 'src/api/paths'
 import type { Region } from 'src/models'
 
 const $q = useQuasar()
 
-const visiable = ref<boolean>(false)
+const visible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -91,12 +114,12 @@ const pagination = ref({
 const selected = ref([])
 
 const columns: QTableProps['columns'] = [
-  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-  { name: 'postalCode', label: 'Postal Code', align: 'left', field: 'postalCode', sortable: true },
-  { name: 'areaCode', label: 'Area Code', align: 'left', field: 'areaCode', sortable: true },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'description', label: 'Description', align: 'left', field: 'description' },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'postalCode', label: 'postalCode', align: 'left', field: 'postalCode', sortable: true },
+  { name: 'areaCode', label: 'areaCode', align: 'left', field: 'areaCode', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(() => {
@@ -133,12 +156,18 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
 }
 
 function addRow() {
-  visiable.value = true
+  visible.value = true
 }
 
 function editRow(id: number) {
-  visiable.value = true
-  console.log('id: ', id)
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
 }
 
 function removeRow(id: number) {
@@ -149,7 +178,10 @@ function removeRow(id: number) {
   }, 500)
 }
 
-function onSubmit() { }
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
 
 function onReset() { }
 
diff --git a/src/pages/system/regions/SubPage.vue b/src/pages/system/regions/SubPage.vue
new file mode 100644
index 0000000..55ff61b
--- /dev/null
+++ b/src/pages/system/regions/SubPage.vue
@@ -0,0 +1,231 @@
+<template>
+  <q-dialog v-model="visible" persistent>
+    <q-card style="min-width: 25em">
+      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+        <q-card-section>
+          <div class="text-h6">Region</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input v-model="form.name" label="Region name" lazy-rules
+            :rules="[val => val && val.length > 0 || 'Please type something']" />
+
+          <q-input v-model="form.description" label="Region deacription" type="textarea" />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+          <q-btn title="submit" type="submit" label="Submit" color="primary" />
+        </q-card-actions>
+
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <q-table flat ref="tableRef" :title="title" selection="multiple" v-model:selected="selected" :rows="rows"
+    :columns="columns" row-key="id" v-model:pagination="pagination" :loading="loading" :filter="filter"
+    binary-state-sort @request="onRequest" class="full-width">
+    <template v-slot:top-right>
+      <q-input dense debounce="300" v-model="filter" placeholder="Search">
+        <template v-slot:append>
+          <q-icon name="mdi-search" />
+        </template>
+      </q-input>
+      <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="mdi-plus" :label="$t('add')"
+        @click="addRow" />
+      <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
+        @click="exportTable" />
+    </template>
+
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th auto-width />
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          {{ $t(col.label) }}
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr :props="props">
+        <q-td auto-width>
+          <q-btn title="expand" round flat dense @click="props.expand = !props.expand"
+            :icon="props.expand ? 'mdi-chevron-down' : 'mdi-chevron-right'" />
+        </q-td>
+        <q-td v-for="col in props.cols" :key="col.name">
+          <div v-if="col.name === 'id'" class="text-right">
+            <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+              @click="editRow(props.row.id)" class="q-mt-none" />
+            <q-btn title="delete" padding="xs" flat round color="negative" icon="mdi-trash-can-outline"
+              @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
+          </div>
+          <div v-else-if="col.name === 'enabled'" class="text-center">
+            <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
+          </div>
+          <span v-else>{{ col.value }}</span>
+        </q-td>
+      </q-tr>
+      <q-tr v-show="props.expand" :props="props">
+        <q-td colspan="100%" class="q-pr-none">
+          <sub-page v-if="props.expand" :title="props.row.name" :superior-id="props.row.id" />
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import type { QTableProps } from 'quasar'
+import { exportFile, useQuasar } from 'quasar'
+import { api } from 'boot/axios'
+
+import { SERVER_URL } from 'src/api/paths'
+import type { Region } from 'src/models'
+
+const $q = useQuasar()
+
+const props_ = withDefaults(defineProps<{
+  title: string
+  superiorId?: number | undefined
+}>(), {
+  title: '',
+  superiorId: undefined
+})
+
+const visible = ref<boolean>(false)
+
+const tableRef = ref()
+const rows = ref<QTableProps['rows']>([])
+const filter = ref('')
+const loading = ref<boolean>(false)
+
+const form = ref<Region>({
+  name: '',
+  areaCode: 0,
+  postalCode: 0,
+  description: ''
+})
+
+const pagination = ref({
+  sortBy: 'id',
+  descending: true,
+  page: 1,
+  rowsPerPage: 7,
+  rowsNumber: 0
+})
+
+const selected = ref([])
+
+const columns: QTableProps['columns'] = [
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'postalCode', label: 'postalCode', align: 'left', field: 'postalCode', sortable: true },
+  { name: 'areaCode', label: 'areaCode', align: 'left', field: 'areaCode', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
+]
+
+onMounted(() => {
+  tableRef.value.requestServerInteraction()
+})
+
+/**
+ * 查询列表
+ */
+async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>>[0]) {
+  loading.value = true
+
+  const { page, rowsPerPage, sortBy, descending } = props.pagination
+  const filter = props.filter
+
+  const params = { page: page - 1, size: rowsPerPage, sortBy, descending, filter: filter || '' }
+
+  await api.get(`${SERVER_URL.REGION}/${props_.superiorId}/subset`, { params }).then(res => {
+    rows.value = res.data.content
+    pagination.value.page = page
+    pagination.value.sortBy = sortBy
+    pagination.value.rowsNumber = res.data.totalElements
+    pagination.value.rowsPerPage = rowsPerPage
+    pagination.value.sortBy = res.data.sortBy
+    pagination.value.descending = descending
+  }).catch(error => {
+    $q.notify({
+      message: error.message,
+      type: 'negative'
+    })
+  }).finally(() => {
+    loading.value = false
+  })
+}
+
+function addRow() {
+  visible.value = true
+}
+
+function editRow(id: number) {
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
+}
+
+function removeRow(id: number) {
+  console.log('id: ', id)
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 500)
+}
+
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
+
+function onReset() { }
+
+function wrapCsvValue(val: string, formatFn?: (val: string, row?: string) => string, row?: string) {
+  let formatted = formatFn !== void 0 ? formatFn(val, row) : val
+
+  formatted = formatted === void 0 || formatted === null ? '' : String(formatted)
+
+  formatted = formatted.split('"').join('""')
+
+  return `"${formatted}"`
+}
+
+function exportTable() {
+  if (!columns || !rows.value || columns.length === 0 || rows.value.length === 0) {
+    // Handle the case where columns or rows are undefined or empty
+    console.error('Columns or rows are undefined or empty.')
+    return
+  }
+  // naive encoding to csv format
+  const content = [columns.map(col => wrapCsvValue(col.label))]
+    .concat(rows.value.map(row => columns.map(col =>
+      wrapCsvValue(typeof col.field === 'function' ? col.field(row) : row[col.field === void 0 ? col.name : col.field],
+        col.format,
+        row
+      )).join(','))
+    ).join('\r\n')
+
+  const status = exportFile(
+    'table-export.csv',
+    content,
+    'text/csv'
+  )
+
+  if (status !== true) {
+    $q.notify({
+      message: 'Browser denied file download...',
+      color: 'negative',
+      icon: 'warning'
+    })
+  }
+}
+</script>
diff --git a/src/pages/system/role/IndexPage.vue b/src/pages/system/roles/IndexPage.vue
similarity index 75%
rename from src/pages/system/role/IndexPage.vue
rename to src/pages/system/roles/IndexPage.vue
index 23386cb..5cedda5 100644
--- a/src/pages/system/role/IndexPage.vue
+++ b/src/pages/system/roles/IndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
 
-    <q-dialog v-model="visiable" persistent>
+    <q-dialog v-model="visible" persistent>
       <q-card style="min-width: 25em">
         <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
           <q-card-section>
@@ -15,29 +15,39 @@
             <q-input v-model="form.description" label="Role deacription" type="textarea" />
           </q-card-section>
 
-          <q-card-actions align="right" class="text-primary">
-            <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
-            <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
+          <q-card-actions align="right">
+            <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+            <q-btn title="submit" type="submit" label="Submit" color="primary" />
           </q-card-actions>
 
         </q-form>
       </q-card>
     </q-dialog>
 
-    <q-table flat ref="tableRef" title="Roles" selection="multiple" v-model:selected="selected" :rows="rows"
+    <q-table flat ref="tableRef" :title="$t('roles')" selection="multiple" v-model:selected="selected" :rows="rows"
       :columns="columns" row-key="id" v-model:pagination="pagination" :loading="loading" :filter="filter"
       binary-state-sort @request="onRequest" class="full-width">
       <template v-slot:top-right>
         <q-input dense debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
-            <q-icon name="sym_r_search" />
+            <q-icon name="mdi-search" />
           </template>
         </q-input>
-        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
+        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="mdi-plus" :label="$t('add')"
           @click="addRow" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+        <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
           @click="exportTable" />
       </template>
+
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ $t(col.label) }}
+          </q-th>
+        </q-tr>
+      </template>
+
       <template v-slot:body-cell-members="props">
         <q-td :props="props">
           <q-avatar v-for="n in 5" :key="n" size="32px" :style="{ left: `${n * -2}px`, border: '2px solid white' }">
@@ -47,14 +57,14 @@
       </template>
       <template v-slot:body-cell-enabled="props">
         <q-td :props="props">
-          <q-toggle v-model="props.row.enabled" color="green" />
+          <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
         </q-td>
       </template>
       <template v-slot:body-cell-id="props">
         <q-td :props="props">
-          <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
-            class="q-mt-none" />
-          <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
+          <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+            @click="editRow(props.row.id)" class="q-mt-none" />
+          <q-btn title="delete" padding="xs" flat round color="negative" icon="mdi-trash-can-outline"
             @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
         </q-td>
       </template>
@@ -73,7 +83,7 @@ import type { Role } from 'src/models'
 
 const $q = useQuasar()
 
-const visiable = ref<boolean>(false)
+const visible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -96,11 +106,11 @@ const pagination = ref({
 const selected = ref([])
 
 const columns: QTableProps['columns'] = [
-  { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-  { name: 'members', label: 'Members', align: 'center', field: 'members' },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'description', label: 'Description', align: 'left', field: 'description' },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'name', label: 'name', align: 'left', field: 'name', sortable: true },
+  { name: 'members', label: 'members', align: 'center', field: 'members' },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'description', label: 'description', align: 'left', field: 'description' },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(() => {
@@ -137,12 +147,18 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
 }
 
 function addRow() {
-  visiable.value = true
+  visible.value = true
 }
 
 function editRow(id: number) {
-  visiable.value = true
-  console.log('id: ', id)
+  visible.value = true
+  // You can populate the form with existing user data based on the id
+  if (rows.value) {
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
+    }
+  }
 }
 
 function removeRow(id: number) {
@@ -153,7 +169,10 @@ function removeRow(id: number) {
   }, 500)
 }
 
-function onSubmit() { }
+function onSubmit() {
+  // Close the dialog after submitting
+  visible.value = false
+}
 
 function onReset() { }
 
diff --git a/src/pages/system/user/IndexPage.vue b/src/pages/system/users/IndexPage.vue
similarity index 67%
rename from src/pages/system/user/IndexPage.vue
rename to src/pages/system/users/IndexPage.vue
index 84ac409..3be78bd 100644
--- a/src/pages/system/user/IndexPage.vue
+++ b/src/pages/system/users/IndexPage.vue
@@ -4,7 +4,7 @@
       <q-card style="min-width: 25em">
         <q-form @submit="onSubmit" @reset="onReset">
           <q-card-section>
-            <div class="text-h6">{{ editingUser ? 'Edit User' : 'Add User' }}</div>
+            <div class="text-h6">User</div>
           </q-card-section>
 
           <q-card-section>
@@ -16,32 +16,40 @@
 
             <q-input v-model="form.lastname" label="Your lastname *" lazy-rules
               :rules="[val => val && val.length > 0 || 'Please type something']" />
-
-            <q-input v-model="form.description" label="Deacription" type="textarea" />
           </q-card-section>
 
           <q-card-actions align="right">
-            <q-btn title="cancel" type="reset" rounded unelevated label="Cancel" v-close-popup />
-            <q-btn title="submit" type="submit" rounded label="Submit" color="primary" />
+            <q-btn title="cancel" type="reset" unelevated label="Cancel" v-close-popup />
+            <q-btn title="submit" type="submit" label="Submit" color="primary" />
           </q-card-actions>
         </q-form>
       </q-card>
     </q-dialog>
 
-    <q-table flat ref="tableRef" title="User" selection="multiple" v-model:selected="selected" :rows="rows"
+    <q-table flat ref="tableRef" :title="$t('users')" selection="multiple" v-model:selected="selected" :rows="rows"
       :columns="columns" row-key="id" v-model:pagination="pagination" :loading="loading" :filter="filter"
-      binary-state-sort @request="onRequest" class="full-width">
+      binary-state-sort @request="onRequest" class="full-width q-pl-md">
       <template v-slot:top-right>
         <q-input dense debounce="300" v-model="filter" placeholder="Search">
           <template v-slot:append>
-            <q-icon name="sym_r_search" />
+            <q-icon name="mdi-search" />
           </template>
         </q-input>
-        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add" label="Add"
+        <q-btn title="add" rounded color="primary" class="q-mx-md" :disable="loading" icon="mdi-plus" :label="$t('add')"
           @click="addRow" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_sim_card_download" label="Export"
+        <q-btn title="export" rounded outline color="primary" icon="mdi-file-download-outline" :label="$t('export')"
           @click="exportTable" />
       </template>
+
+      <template v-slot:header="props">
+        <q-tr :props="props">
+          <q-th auto-width />
+          <q-th v-for="col in props.cols" :key="col.name" :props="props">
+            {{ $t(col.label) }}
+          </q-th>
+        </q-tr>
+      </template>
+
       <template v-slot:body-cell-username="props">
         <q-td :props="props">
           <q-avatar size="md">
@@ -50,36 +58,47 @@
           <span class="q-ml-sm">{{ props.row.username }}</span>
         </q-td>
       </template>
+      <template v-slot:body-cell-fullname="props">
+        <q-td :props="props">
+          <span class="q-ml-sm">{{ props.row.firstname }}</span>
+          <span class="q-ml-sm">{{ props.row.lastname }}</span>
+        </q-td>
+      </template>
       <template v-slot:body-cell-enabled="props">
         <q-td :props="props">
-          <q-toggle v-model="props.row.enabled" color="green" />
+          <q-toggle v-model="props.row.enabled" size="sm" color="positive" />
         </q-td>
       </template>
       <template v-slot:body-cell-accountExpiresAt="props">
         <q-td :props="props">
+          <q-badge :color="calculate(props.row.accountExpiresAt)" rounded class="q-mr-sm" />
           {{ date.formatDate(props.row.accountExpiresAt, 'YYYY/MM/DD HH:mm:ss') }}
         </q-td>
       </template>
       <template v-slot:body-cell-credentialsExpiresAt="props">
         <q-td :props="props">
-          {{ date.formatDate(props.row.credentialsExpiresAt, 'YYYY/MM/DD HH:mm:ss') }}
+          <q-badge :color="calculate(props.row.credentialsExpiresAt)" rounded class="q-mr-sm" />
+          {{ date.formatDate(props.row.credentialsExpiresAt, 'YYYY/MM/DD HH: mm:ss') }}
         </q-td>
       </template>
       <template v-slot:body-cell-accountNonLocked="props">
         <q-td :props="props">
-          <q-icon size="sm" :color="props.row.accountNonLocked ? 'green' : 'red'"
-            :name="props.row.accountNonLocked ? 'sym_r_lock_open' : 'sym_r_lock'" />
+          <q-btn title="accountNonLocked" padding="xs" flat round :disable="loading"
+            :color="props.row.accountNonLocked ? 'positive' : 'warning'"
+            :icon="props.row.accountNonLocked ? 'mdi-lock-open-variant-outline' : 'mdi-lock-outline'"
+            @click="lockRow(props.row)" />
         </q-td>
       </template>
       <template v-slot:body-cell-id="props">
         <q-td :props="props">
-          <q-btn title="edit" padding="xs" flat round color="primary" icon="sym_r_edit" @click="editRow(props.row.id)"
-            class="q-mt-none" />
-          <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
+          <q-btn title="edit" padding="xs" flat round color="primary" icon="mdi-pencil-outline"
+            @click="editRow(props.row.id)" class="q-mt-none" />
+          <q-btn title="delete" padding="xs" flat round color="negative" icon="mdi-trash-can-outline"
             @click="removeRow(props.row.id)" class="q-mt-none q-ml-sm" />
         </q-td>
       </template>
     </q-table>
+
   </q-page>
 </template>
 
@@ -95,7 +114,6 @@ import type { User } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
-const editingUser = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -120,14 +138,13 @@ const pagination = ref({
 const selected = ref([])
 
 const columns: QTableProps['columns'] = [
-  { name: 'username', label: 'Username', align: 'left', field: 'username', sortable: true },
-  { name: 'firstname', label: 'Firstname', align: 'left', field: 'firstname', sortable: true },
-  { name: 'lastname', label: 'Lastname', align: 'left', field: 'lastname', sortable: true },
-  { name: 'enabled', label: 'Enabled', align: 'center', field: 'enabled' },
-  { name: 'accountNonLocked', label: 'Is Locked', align: 'center', field: 'accountNonLocked' },
-  { name: 'accountExpiresAt', label: 'Expires At', align: 'center', field: 'accountExpiresAt', sortable: true },
-  { name: 'credentialsExpiresAt', label: 'Credentials Expires At', align: 'center', field: 'credentialsExpiresAt', sortable: true },
-  { name: 'id', label: 'Actions', field: 'id' }
+  { name: 'username', label: 'username', align: 'left', field: 'username', sortable: true },
+  { name: 'fullname', label: 'fullname', align: 'center', field: 'fullname', sortable: true },
+  { name: 'enabled', label: 'enabled', align: 'center', field: 'enabled' },
+  { name: 'accountNonLocked', label: 'accountLocked', align: 'center', field: 'accountNonLocked' },
+  { name: 'accountExpiresAt', label: 'accountExpiresAt', align: 'center', field: 'accountExpiresAt', sortable: true },
+  { name: 'credentialsExpiresAt', label: 'credentialsExpiresAt', align: 'center', field: 'credentialsExpiresAt', sortable: true },
+  { name: 'id', label: 'actions', field: 'id' }
 ]
 
 onMounted(() => {
@@ -164,17 +181,15 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
 
 function addRow() {
   visible.value = true
-  editingUser.value = false
 }
 
 function editRow(id: number) {
   visible.value = true
-  editingUser.value = true
   // You can populate the form with existing user data based on the id
   if (rows.value) {
-    const user = rows.value.find(u => u.id === id)
-    if (user) {
-      form.value = { ...user }
+    const row = rows.value.find(u => u.id === id)
+    if (row) {
+      form.value = { ...row }
     }
   }
 }
@@ -190,15 +205,14 @@ function removeRow(id: number) {
   }, 500)
 }
 
-async function onSubmit() {
-  if (editingUser.value) {
-    // Logic for editing an existing user
-    // You may need to send a request to update the user with the form data
-  } else {
-    // Logic for adding a new user
-    // You may need to send a request to add a new user with the form data
+function lockRow(row: User) {
+  // You can populate the form with existing user data based on the id
+  if (row) {
+    row.accountNonLocked = !row.accountNonLocked
   }
+}
 
+async function onSubmit() {
   // Close the dialog after submitting
   visible.value = false
 }
@@ -249,4 +263,22 @@ function exportTable() {
     })
   }
 }
+
+function calculate(target: string) {
+  const now = new Date()
+  const targetDate = new Date(target)
+  // 失效时间是否小于7天
+  const diff = date.getDateDiff(targetDate, now, 'days')
+  if (diff > 7) {
+    return 'positive'
+  } else {
+    // 是否失效
+    const diffSec = date.getDateDiff(targetDate, now, 'seconds')
+    if (diffSec > 0) {
+      return 'warning'
+    } else {
+      return 'negative'
+    }
+  }
+}
 </script>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 26a1bef..36e8a1f 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -5,71 +5,73 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: MainLayout,
-    meta: { icon: 'sym_r_grid_view' },
+    meta: { icon: 'mdi-grid_view' },
     children: [
       {
         path: '',
         name: 'home',
         component: () => import('pages/IndexPage.vue'),
-        meta: { icon: 'sym_r_home' }
-      }
-    ]
-  },
-  {
-    path: '/system',
-    name: 'system',
-    component: MainLayout,
-    meta: { icon: 'sym_r_settings' },
-    redirect: { path: '/system/users' }, // redirect must be absolute path
-    children: [
-      {
-        path: 'users',
-        name: 'users',
-        component: () => import('pages/system/user/IndexPage.vue'),
-        meta: { icon: 'sym_r_manage_accounts' }
-      },
-      {
-        path: 'groups',
-        name: 'groups',
-        component: () => import('pages/system/group/IndexPage.vue'),
-        meta: { icon: 'sym_r_group' }
-      },
-      {
-        path: 'roles',
-        name: 'roles',
-        component: () => import('pages/system/role/IndexPage.vue'),
-        meta: { icon: 'sym_r_admin_panel_settings' }
-      },
-      {
-        path: 'privileges',
-        name: 'privileges',
-        component: () => import('pages/system/privilege/IndexPage.vue'),
-        meta: { icon: 'sym_r_admin_panel_settings' }
-      },
-      {
-        path: 'dictionaries',
-        name: 'dictionaries',
-        component: () => import('pages/system/dictionary/IndexPage.vue'),
-        meta: { icon: 'sym_r_menu_book' }
-      },
-      {
-        path: 'regions',
-        name: 'regions',
-        component: () => import('pages/system/region/IndexPage.vue'),
-        meta: { icon: 'sym_r_public' }
+        meta: { icon: 'mdi-home' }
       }
     ]
   },
+  // {
+  //   path: '/system',
+  //   name: 'system',
+  //   component: MainLayout,
+  //   meta: { icon: 'mdi-settings' },
+  //   redirect: { path: '/system/users' }, // redirect must be absolute path
+  //   children: [
+  //     {
+  //       path: 'users',
+  //       name: 'users',
+  //       component: () => import('pages/system/user/IndexPage.vue'),
+  //       meta: { icon: 'mdi-manage_accounts' }
+  //     },
+  //     {
+  //       path: 'groups',
+  //       name: 'groups',
+  //       component: () => import('pages/system/group/IndexPage.vue'),
+  //       meta: { icon: 'mdi-group' }
+  //     },
+  //     {
+  //       path: 'roles',
+  //       name: 'roles',
+  //       component: () => import('pages/system/role/IndexPage.vue'),
+  //       meta: { icon: 'mdi-admin_panel_settings' }
+  //     },
+  //     {
+  //       path: 'privileges',
+  //       name: 'privileges',
+  //       component: () => import('pages/system/privilege/IndexPage.vue'),
+  //       meta: { icon: 'mdi-admin_panel_settings' }
+  //     },
+  //     {
+  //       path: 'dictionaries',
+  //       name: 'dictionaries',
+  //       component: () => import('pages/system/dictionary/IndexPage.vue'),
+  //       meta: { icon: 'mdi-menu_book' }
+  //     },
+  //     {
+  //       path: 'regions',
+  //       name: 'regions',
+  //       component: () => import('pages/system/region/IndexPage.vue'),
+  //       meta: { icon: 'mdi-public' }
+  //     }
+  //   ]
+  // },
   {
     path: '/login',
+    name: 'login',
     component: () => import('pages/LoginPage.vue')
-  },
+  }
   // Always leave this as last one,
   // but you can also remove it
-  {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue')
-  }
+  // {
+  //   path: '/:catchAll(.*)*',
+  //   name: 'error',
+  //   component: () => import('pages/ErrorNotFound.vue')
+  // }
 ]
 
 export default routes
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 4e6894b..4d263aa 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -7,4 +7,4 @@ declare module '*.vue' {
   import type { DefineComponent } from 'vue';
   const component: DefineComponent<{}, {}, any>;
   export default component;
-}
+}
\ No newline at end of file
diff --git a/src/stores/index.ts b/src/stores/index.ts
index ce16f63..5a85030 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -1,11 +1,13 @@
 import { store } from 'quasar/wrappers'
 import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export default store((/* { ssrContext } */) => {
   const pinia = createPinia()
 
   // You can add Pinia plugins here
   // pinia.use(SomePiniaPlugin)
+  pinia.use(piniaPluginPersistedstate)
 
   return pinia
 })
diff --git a/src/stores/locale-store.ts b/src/stores/locale-store.ts
new file mode 100644
index 0000000..f88bec0
--- /dev/null
+++ b/src/stores/locale-store.ts
@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useLocaleStore = defineStore('locale', {
+  state: () => ({
+    lang: 'en-US'
+  }),
+  actions: {
+    changeLang(lang: string) {
+      // 更新用户状态
+      this.lang = lang
+    }
+  },
+  persist: true
+})
diff --git a/src/stores/user-store.ts b/src/stores/user-store.ts
index 2a67b9c..d96d927 100644
--- a/src/stores/user-store.ts
+++ b/src/stores/user-store.ts
@@ -1,31 +1,48 @@
 import { defineStore } from 'pinia'
-import { SessionStorage } from 'quasar'
+import { Cookies } from 'quasar'
+import { api } from 'boot/axios'
+import { retrievePrivilegeTree } from 'src/api/privileges'
+import type { Privilege } from 'src/models'
+import type { RouteRecordRaw } from 'vue-router'
 
 interface User {
-  username: string;
+  username: string
+  avatar: string
 }
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    user: null as User | null
+    user: null as User | null,
+    access_token: null as string | null,
+    privileges: [] as Privilege[],
+    routes: [] as RouteRecordRaw[]
   }),
-  getters: {
-    getUsername(): string | null {
-      const user = JSON.parse(SessionStorage.getItem('user') || '{}') as User | null
-      return this.user ? this.user.username : (user ? user.username : null)
-    }
-  },
   actions: {
-    updateUser(username: string) {
-      // 更新用户状态
-      this.user = { username }
-      SessionStorage.set('user', JSON.stringify(this.user))
+    async logout() {
+      await api.post('/logout').then(() => {
+        Cookies.remove('logged_in')
+        this.$reset()
+      })
     },
-
-    clearUser() {
-      // 清除用户状态
-      this.user = null
-      SessionStorage.remove('user')
+    async login(username: string, password: string) {
+      await api.post('/login', new URLSearchParams({ username, password })).then(res => {
+        this.$patch({
+          user: res.data.user,
+          access_token: res.data.access_token
+        })
+        // privileges
+        retrievePrivilegeTree(username).then(response => {
+          this.$patch({
+            privileges: response.data
+          })
+        })
+      })
+    },
+    updateRoutes(routes: RouteRecordRaw[]) {
+      this.routes = routes
     }
+  },
+  persist: {
+    paths: ['user', 'access_token', 'privileges']
   }
 })
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..e43d6d5
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,7 @@
+export function pathResolve(parentPath: string, path: string | undefined): string {
+  if (!path) {
+    return ''
+  }
+  const childPath = path.startsWith('/') ? path : `/${path}`
+  return `${parentPath}${childPath}`.replace(/\/\//g, '/').trim()
+}
diff --git a/yarn.lock b/yarn.lock
index 381d034..a854af6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -64,6 +64,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bundled-es-modules/tough-cookie@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "@bundled-es-modules/tough-cookie@npm:0.1.6"
+  dependencies:
+    "@types/tough-cookie": "npm:^4.0.5"
+    tough-cookie: "npm:^4.1.4"
+  checksum: 10c0/28bcac878bff6b34719ba3aa8341e9924772ee55de5487680ebe784981ec9fccb70ed5d46f563e2404855a04de606f9e56aa4202842d4f5835bc04a4fe820571
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.14.54":
   version: 0.14.54
   resolution: "@esbuild/linux-loong64@npm:0.14.54"
@@ -269,13 +279,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mswjs/cookies@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@mswjs/cookies@npm:1.1.0"
-  checksum: 10c0/c8442b77f4d4f72c63a29049bbd33e7f9d85517471c09e1a1a71f424e5261feee5311b096d42d4447a51f199017b2227feb2b5dd77da83b733917560ace58940
-  languageName: node
-  linkType: hard
-
 "@mswjs/interceptors@npm:^0.29.0":
   version: 0.29.1
   resolution: "@mswjs/interceptors@npm:0.29.1"
@@ -672,6 +675,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/tough-cookie@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "@types/tough-cookie@npm:4.0.5"
+  checksum: 10c0/68c6921721a3dcb40451543db2174a145ef915bc8bcbe7ad4e59194a0238e776e782b896c7a59f4b93ac6acefca9161fccb31d1ce3b3445cb6faa467297fb473
+  languageName: node
+  linkType: hard
+
 "@types/wrap-ansi@npm:^3.0.0":
   version: 3.0.0
   resolution: "@types/wrap-ansi@npm:3.0.0"
@@ -4019,8 +4029,9 @@ __metadata:
     eslint-plugin-promise: "npm:^6.1.1"
     eslint-plugin-vue: "npm:^9.24.0"
     lottie-web: "npm:^5.12.2"
-    msw: "npm:^2.3.0"
+    msw: "npm:^2.3.5"
     pinia: "npm:^2.1.7"
+    pinia-plugin-persistedstate: "npm:^3.2.1"
     postcss: "npm:^8.4.38"
     quasar: "npm:^2.16.4"
     typescript: "npm:^5.4.4"
@@ -4402,14 +4413,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"msw@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "msw@npm:2.3.0"
+"msw@npm:^2.3.5":
+  version: 2.3.5
+  resolution: "msw@npm:2.3.5"
   dependencies:
     "@bundled-es-modules/cookie": "npm:^2.0.0"
     "@bundled-es-modules/statuses": "npm:^1.0.1"
+    "@bundled-es-modules/tough-cookie": "npm:^0.1.6"
     "@inquirer/confirm": "npm:^3.0.0"
-    "@mswjs/cookies": "npm:^1.1.0"
     "@mswjs/interceptors": "npm:^0.29.0"
     "@open-draft/until": "npm:^2.1.0"
     "@types/cookie": "npm:^0.6.0"
@@ -4430,7 +4441,7 @@ __metadata:
       optional: true
   bin:
     msw: cli/index.js
-  checksum: 10c0/704d808741c7a7abc8757406816fd8fffa5450c1cdf8669355e7d01748c372818c61b4bf6fab3ffce5c3ad32e25302737da664e079973a18becb10396989f933
+  checksum: 10c0/f944d8eb67ccdcf74aba0ce433395a9616420b8b36d43f033635817ef7535553c7bf6854392a95b093546e3481ca99e9017525b6c0bd02f51528b669e672214d
   languageName: node
   linkType: hard
 
@@ -4828,6 +4839,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pinia-plugin-persistedstate@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "pinia-plugin-persistedstate@npm:3.2.1"
+  peerDependencies:
+    pinia: ^2.0.0
+  checksum: 10c0/c01ff96176f71298a4ae42f7814f48c7b4860fe1cf90888e2500b856077e6b2f9272ecde1979324b4489ad5e4e80175d9e125425fa21439ae66871ab1837a5dd
+  languageName: node
+  linkType: hard
+
 "pinia@npm:^2.1.7":
   version: 2.1.7
   resolution: "pinia@npm:2.1.7"
@@ -4930,7 +4950,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"punycode@npm:^2.1.0":
+"psl@npm:^1.1.33":
+  version: 1.9.0
+  resolution: "psl@npm:1.9.0"
+  checksum: 10c0/6a3f805fdab9442f44de4ba23880c4eba26b20c8e8e0830eff1cb31007f6825dace61d17203c58bfe36946842140c97a1ba7f67bc63ca2d88a7ee052b65d97ab
+  languageName: node
+  linkType: hard
+
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
   version: 2.3.1
   resolution: "punycode@npm:2.3.1"
   checksum: 10c0/14f76a8206bc3464f794fb2e3d3cc665ae416c01893ad7a02b23766eb07159144ee612ad67af5e84fa4479ccfe67678c4feb126b0485651b302babf66f04f9e9
@@ -4953,6 +4980,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"querystringify@npm:^2.1.1":
+  version: 2.2.0
+  resolution: "querystringify@npm:2.2.0"
+  checksum: 10c0/3258bc3dbdf322ff2663619afe5947c7926a6ef5fb78ad7d384602974c467fadfc8272af44f5eb8cddd0d011aae8fabf3a929a8eee4b86edcc0a21e6bd10f9aa
+  languageName: node
+  linkType: hard
+
 "queue-microtask@npm:^1.2.2":
   version: 1.2.3
   resolution: "queue-microtask@npm:1.2.3"
@@ -5072,6 +5106,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"requires-port@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "requires-port@npm:1.0.0"
+  checksum: 10c0/b2bfdd09db16c082c4326e573a82c0771daaf7b53b9ce8ad60ea46aa6e30aaf475fe9b164800b89f93b748d2c234d8abff945d2551ba47bf5698e04cd7713267
+  languageName: node
+  linkType: hard
+
 "resolve-from@npm:^4.0.0":
   version: 4.0.0
   resolution: "resolve-from@npm:4.0.0"
@@ -5751,6 +5792,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tough-cookie@npm:^4.1.4":
+  version: 4.1.4
+  resolution: "tough-cookie@npm:4.1.4"
+  dependencies:
+    psl: "npm:^1.1.33"
+    punycode: "npm:^2.1.1"
+    universalify: "npm:^0.2.0"
+    url-parse: "npm:^1.5.3"
+  checksum: 10c0/aca7ff96054f367d53d1e813e62ceb7dd2eda25d7752058a74d64b7266fd07be75908f3753a32ccf866a2f997604b414cfb1916d6e7f69bc64d9d9939b0d6c45
+  languageName: node
+  linkType: hard
+
 "ts-api-utils@npm:^1.0.1":
   version: 1.3.0
   resolution: "ts-api-utils@npm:1.3.0"
@@ -5928,6 +5981,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"universalify@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "universalify@npm:0.2.0"
+  checksum: 10c0/cedbe4d4ca3967edf24c0800cfc161c5a15e240dac28e3ce575c689abc11f2c81ccc6532c8752af3b40f9120fb5e454abecd359e164f4f6aa44c29cd37e194fe
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^2.0.0":
   version: 2.0.1
   resolution: "universalify@npm:2.0.1"
@@ -5965,6 +6025,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url-parse@npm:^1.5.3":
+  version: 1.5.10
+  resolution: "url-parse@npm:1.5.10"
+  dependencies:
+    querystringify: "npm:^2.1.1"
+    requires-port: "npm:^1.0.0"
+  checksum: 10c0/bd5aa9389f896974beb851c112f63b466505a04b4807cea2e5a3b7092f6fbb75316f0491ea84e44f66fed55f1b440df5195d7e3a8203f64fcefa19d182f5be87
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"