diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 910a6f124..fe184688b 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -4,7 +4,6 @@ import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'filters/index';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import AccountFilter from '../AccountFilter.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
@@ -14,8 +13,6 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
-const { viewSummary } = useSummaryDialog();
-
 const STATE_COLOR = {
     pending: 'warning',
     managed: 'info',
@@ -30,24 +27,19 @@ function stateColor(code) {
 function navigate(event, id) {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
-    router.push({ path: `/account/${id}` });
+    router.push({ path: `/account/role/${id}` });
 }
 </script>
 
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <AccountFilter data-key="AccountList" />
+            <!-- <AccountFilter data-key="RolesList" /> -->
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
         <div class="vn-card-list">
-            <VnPaginate
-                data-key="AccountList"
-                url="Accounts/filter"
-                :order="['priority ASC', 'created DESC']"
-                auto-load
-            >
+            <VnPaginate data-key="RolesList" url="VnRoles" auto-load>
                 <template #body="{ rows }">
                     <CardList
                         :id="row.id"
diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
new file mode 100644
index 000000000..7d9f97c22
--- /dev/null
+++ b/src/pages/Account/Role/Card/RoleCard.vue
@@ -0,0 +1,15 @@
+<script setup>
+import VnCard from 'components/common/VnCard.vue';
+import RoleDescriptor from './RoleDescriptor.vue';
+</script>
+<template>
+    <VnCard
+        data-key="Role"
+        base-url="Roles"
+        :descriptor="RoleDescriptor"
+        searchbar-data-key="RoleList"
+        searchbar-url="Roles/filter"
+        searchbar-label="Search Role"
+        searchbar-info="You can search by Role id or customer name"
+    />
+</template>
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index d39226884..0f38d8a40 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -28,7 +28,6 @@ export default {
             'AccountPrivileges',
             'AccountLog',
         ],
-        departmentCard: ['BasicData'],
     },
     children: [
         {
@@ -47,14 +46,13 @@ export default {
                     component: () => import('src/pages/Account/AccountList.vue'),
                 },
                 {
-                    path: 'roles',
+                    path: 'role',
                     name: 'AccountRoles',
                     meta: {
                         title: 'roles',
                         icon: 'group',
                     },
-                    component: () =>
-                        import('src/pages/Account/AccountRole/AccountRoles.vue'),
+                    component: () => import('src/pages/Account/Role/AccountRoles.vue'),
                 },
                 {
                     path: 'alias',
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 5c2d44f58..4c5e247d8 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -12,6 +12,7 @@ import Supplier from './Supplier';
 import Travel from './travel';
 import Order from './order';
 import Department from './department';
+import Role from './role';
 import Entry from './entry';
 import roadmap from './roadmap';
 import Parking from './parking';
@@ -35,6 +36,7 @@ export default [
     Order,
     invoiceIn,
     Department,
+    Role,
     Entry,
     roadmap,
     Parking,
diff --git a/src/router/modules/role.js b/src/router/modules/role.js
new file mode 100644
index 000000000..447f2ee80
--- /dev/null
+++ b/src/router/modules/role.js
@@ -0,0 +1,47 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/role',
+    name: 'Role',
+    meta: {
+        title: 'role',
+        icon: 'vn:greuge',
+        moduleName: 'Role',
+    },
+    component: RouterView,
+    redirect: { name: 'RoleCard' },
+    menus: {
+        main: [],
+        card: ['RoleBasicData'],
+    },
+    children: [
+        {
+            name: 'RoleCard',
+            path: ':id',
+            component: () => import('src/pages/Account/Role/Card/RoleCard.vue'),
+            redirect: { name: 'RoleSummary' },
+            children: [
+                {
+                    name: 'RoleSummary',
+                    path: 'summary',
+                    meta: {
+                        title: 'summary',
+                        icon: 'launch',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Role/Card/RoleSummary.vue'),
+                },
+                {
+                    name: 'RoleBasicData',
+                    path: 'basic-data',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () =>
+                        import('src/pages/Account/Role/Card/RoleBasicData.vue'),
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index d4d3bc3e7..5fef90c3c 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -23,7 +23,6 @@ export default {
             'WorkerDms',
             'WorkerTimeControl',
         ],
-        departmentCard: ['BasicData'],
     },
     children: [
         {
diff --git a/src/router/routes.js b/src/router/routes.js
index 46b7293d4..9fe470ca4 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -10,6 +10,7 @@ import supplier from './modules/Supplier';
 import route from './modules/route';
 import travel from './modules/travel';
 import department from './modules/department';
+import role from './modules/role';
 import ItemType from './modules/itemType';
 import shelving from 'src/router/modules/shelving';
 import order from 'src/router/modules/order';
@@ -72,6 +73,7 @@ const routes = [
             supplier,
             travel,
             department,
+            role,
             roadmap,
             entry,
             parking,