diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index a78403b5c..dc6d4751c 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -108,6 +108,7 @@ async function search() {
             ...Object.fromEntries(staticParams),
             search: searchText.value,
         },
+        ...{ filter: props.filter },
     };
 
     if (props.whereFilter) {
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index d698596b9..1beac0d0b 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -9,7 +9,9 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
-
+const filter = {
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};
 const columns = computed(() => [
     {
         align: 'left',
@@ -29,7 +31,22 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        name: 'username',
+        name: 'roleFk',
+        label: t('role'),
+        columnFilter: {
+            component: 'select',
+            name: 'roleFk',
+            attrs: {
+                url: 'VnRoles',
+                optionValue: 'id',
+                optionLabel: 'name',
+            },
+        },
+        format: ({ role }, dashIfEmpty) => dashIfEmpty(role?.name),
+    },
+    {
+        align: 'left',
+        name: 'nickname',
         label: t('Nickname'),
         isTitle: true,
         component: 'input',
@@ -104,12 +121,13 @@ const exprBuilder = (param, value) => {
         :expr-builder="exprBuilder"
         :label="t('account.search')"
         :info="t('account.searchInfo')"
+        :filter="filter"
     />
-
     <VnTable
         ref="tableRef"
         data-key="AccountUsers"
         url="VnUsers/preview"
+        :filter="filter"
         order="id DESC"
         :columns="columns"
         default-mode="table"
diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue
index 67fa15898..5ba2415c4 100644
--- a/src/pages/Account/Card/AccountCard.vue
+++ b/src/pages/Account/Card/AccountCard.vue
@@ -11,6 +11,9 @@ const { t } = useI18n();
         data-key="Account"
         :descriptor="AccountDescriptor"
         search-data-key="AccountUsers"
+        :filter="{
+            include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+        }"
         :searchbar-props="{
             url: 'VnUsers/preview',
             label: t('account.search'),