diff --git a/src/pages/Account/AccountExprBuilder.js b/src/pages/Account/AccountExprBuilder.js
new file mode 100644
index 000000000..6497a9d30
--- /dev/null
+++ b/src/pages/Account/AccountExprBuilder.js
@@ -0,0 +1,18 @@
+export default (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'nickname':
+            return { [param]: { like: `%${value}%` } };
+        case 'roleFk':
+            return { [param]: value };
+    }
+};
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 9e7f1b10a..0195da0cd 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -7,6 +7,8 @@ import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import AccountFilter from './AccountFilter.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import exprBuilder from './AccountExprBuilder.js';
+
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
@@ -82,24 +84,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'search':
-            return /^\d+$/.test(value)
-                ? { id: value }
-                : {
-                      or: [
-                          { name: { like: `%${value}%` } },
-                          { nickname: { like: `%${value}%` } },
-                      ],
-                  };
-        case 'name':
-        case 'nickname':
-            return { [param]: { like: `%${value}%` } };
-        case 'roleFk':
-            return { [param]: value };
-    }
-};
 </script>
 
 <template>
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index e6c9da6fe..094641707 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -1,46 +1,26 @@
 <script setup>
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
 import FormModel from 'components/FormModel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import { ref, watch } from 'vue';
-
-const route = useRoute();
-const { t } = useI18n();
-const formModelRef = ref(null);
-
-const accountFilter = {
-    where: { id: route.params.id },
-    fields: ['id', 'email', 'nickname', 'name', 'accountStateFk', 'packages', 'pickup'],
-    include: [],
-};
-
-watch(
-    () => route.params.id,
-    () => formModelRef.value.reset()
-);
 </script>
 <template>
     <FormModel
         ref="formModelRef"
-        url="VnUsers/preview"
-        :url-update="`VnUsers/${route.params.id}/update-user`"
-        :filter="accountFilter"
-        model="Accounts"
+        :url-update="`VnUsers/${$route.params.id}/update-user`"
+        model="Account"
         auto-load
-        @on-data-saved="formModelRef.fetch()"
+        @on-data-saved="$refs.formModelRef.fetch()"
     >
         <template #form="{ data }">
             <div class="q-gutter-y-sm">
-                <VnInput v-model="data.name" :label="t('account.card.nickname')" />
-                <VnInput v-model="data.nickname" :label="t('account.card.alias')" />
-                <VnInput v-model="data.email" :label="t('globals.params.email')" />
+                <VnInput v-model="data.name" :label="$t('account.card.nickname')" />
+                <VnInput v-model="data.nickname" :label="$t('account.card.alias')" />
+                <VnInput v-model="data.email" :label="$t('globals.params.email')" />
                 <VnSelect
                     url="Languages"
                     v-model="data.lang"
-                    :label="t('account.card.lang')"
+                    :label="$t('account.card.lang')"
                     option-value="code"
                     option-label="code"
                 />
@@ -49,7 +29,7 @@ watch(
                     table="user"
                     column="twoFactor"
                     v-model="data.twoFactor"
-                    :label="t('account.card.twoFactor')"
+                    :label="$t('account.card.twoFactor')"
                     option-value="code"
                     option-label="code"
                 />
diff --git a/src/pages/Account/Card/AccountCard.vue b/src/pages/Account/Card/AccountCard.vue
index 119a7fd07..b252b2074 100644
--- a/src/pages/Account/Card/AccountCard.vue
+++ b/src/pages/Account/Card/AccountCard.vue
@@ -1,20 +1,22 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import VnCard from 'components/common/VnCard.vue';
 import AccountDescriptor from './AccountDescriptor.vue';
-
-const { t } = useI18n();
+import exprBuilder from '../AccountExprBuilder.js';
+import filter from './AccountFilter.js';
 </script>
-
 <template>
     <VnCard
+        url="VnUsers/preview"
+        :id-in-where="true"
         data-key="Account"
+        :filter="filter"
         :descriptor="AccountDescriptor"
-        search-data-key="AccountList"
+        search-data-key="AccountUsers"
         :searchbar-props="{
             url: 'VnUsers/preview',
-            label: t('account.search'),
-            info: t('account.searchInfo'),
+            label: $t('account.search'),
+            info: $t('account.searchInfo'),
+            exprBuilder,
         }"
     />
 </template>
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index c57d89db9..270b0d65b 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -7,7 +7,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
 import FetchData from 'src/components/FetchData.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
-
+import filter from './AccountFilter.js';
 const $props = defineProps({
     id: {
         type: Number,
@@ -21,12 +21,6 @@ const { t } = useI18n();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-
-const filter = {
-    where: { id: entityId },
-    fields: ['id', 'nickname', 'name', 'role'],
-    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
-};
 const hasAccount = ref(false);
 </script>
 
@@ -41,8 +35,7 @@ const hasAccount = ref(false);
         :url="`VnUsers/preview`"
         :filter="filter"
         module="Account"
-        @on-fetch="setData"
-        data-key="AccountId"
+        data-key="Account"
         title="nickname"
     >
         <template #menu>
@@ -69,7 +62,7 @@ const hasAccount = ref(false);
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('account.card.nickname')" :value="entity.name" />
-            <VnLv :label="t('account.card.role')" :value="entity.role.name" />
+            <VnLv :label="t('account.card.role')" :value="entity.role?.name" />
         </template>
         <template #actions="{ entity }">
             <QCardActions class="q-gutter-x-md">
diff --git a/src/pages/Account/Card/AccountFilter.js b/src/pages/Account/Card/AccountFilter.js
new file mode 100644
index 000000000..e0825a6e6
--- /dev/null
+++ b/src/pages/Account/Card/AccountFilter.js
@@ -0,0 +1,13 @@
+export default {
+    fields: [
+        'id',
+        'email',
+        'nickname',
+        'name',
+        'accountStateFk',
+        'packages',
+        'pickup',
+        'role',
+    ],
+    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
+};