diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index bd7f0f9ae..3a8c55853 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import FetchData from 'components/FetchData.vue';
-
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import CardList from 'src/components/ui/CardList.vue';
@@ -40,6 +40,69 @@ const exprBuilder = (param, value) => {
     }
 };
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'model',
+        label: t('model'),
+        field: 'model',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'principalId',
+        label: t('principalId'),
+        field: 'principalId',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'property',
+        label: t('property'),
+        field: 'property',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'accessType',
+        label: t('accessType'),
+        field: 'accessType',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'accessType',
+        label: t('accessType'),
+        field: 'accessType',
+        cardVisible: true,
+        create: true,
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Delete'),
+                icon: 'delete',
+                action: deleteAcl,
+                isPrimary: true,
+            },
+        ],
+    },
+]);
 const deleteAcl = async (id) => {
     try {
         await axios.delete(`ACLs/${id}`);
@@ -81,65 +144,24 @@ function showFormDialog(data) {
         </QScrollArea>
     </QDrawer>
 
-    <QPage class="flex justify-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccountAcls"
-                url="ACLs"
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="`${row.model}.${row.property}`"
-                        @click="showFormDialog(row)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('acls.role')" :value="row.principalId" />
-                            <VnLv :label="t('acls.accessType')" :value="row.accessType" />
-                            <VnLv
-                                :label="t('acls.permissions')"
-                                :value="row.permission"
-                            />
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('globals.delete')"
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t('ACL will be removed'),
-                                        t('Are you sure you want to continue?'),
-                                        () => deleteAcl(row.id)
-                                    )
-                                "
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            v-model="formDialog.show"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AclFormView
-                :form-initial-data="formDialog.formInitialData"
-                @on-data-change="paginateRef.fetch()"
-                :roles-options="rolesOptions"
-            />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="showFormDialog()">
-                <QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="AccountUsers"
+        :url="`ACLs`"
+        :create="{
+            urlCreate: 'ACLs',
+            title: 'Create ACL',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {},
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
 </template>
 
 <i18n>
diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
index 29e8d4d78..291b14db8 100644
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@@ -1,8 +1,8 @@
 <script setup>
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref } from 'vue';
-
+import { ref, computed } from 'vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import CardList from 'src/components/ui/CardList.vue';
@@ -34,6 +34,30 @@ const exprBuilder = (param, value) => {
                 : { alias: { like: `%${value}%` } };
     }
 };
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'alias',
+        label: t('alias'),
+        field: 'alias',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        field: 'description',
+        cardVisible: true,
+    },
+]);
 
 const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
 
@@ -52,54 +76,24 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
             />
         </Teleport>
     </template>
-    <QPage class="flex justify-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                ref="paginateRef"
-                data-key="AccountAliasList"
-                url="MailAliases"
-                :expr-builder="exprBuilder"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        v-for="row of rows"
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.alias"
-                        @click="navigate(row.id)"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('mailAlias.alias')" :value="row.alias">
-                            </VnLv>
-                            <VnLv
-                                :label="t('mailAlias.description')"
-                                :value="row.description"
-                            >
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, AliasSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="aliasCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <AliasCreateForm />
-        </QDialog>
-        <QPageSticky position="bottom-right" :offset="[18, 18]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()">
-                <QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
-            </QBtn>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="MailAliases"
+        :url="`MailAliases`"
+        :create="{
+            urlCreate: 'MailAliases',
+            title: 'Create MailAlias',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
 </template>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index f4197e433..9d4687942 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
@@ -21,6 +22,30 @@ const { viewSummary } = useSummaryDialog();
 
 const roleCreateDialogRef = ref(null);
 
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('id'),
+        isId: true,
+        field: 'id',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'name',
+        label: t('name'),
+        field: 'name',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('description'),
+        field: 'description',
+        cardVisible: true,
+    },
+]);
 const exprBuilder = (param, value) => {
     switch (param) {
         case 'search':
@@ -80,52 +105,15 @@ const navigate = (event, id) => {
             <AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate data-key="RolesList" url="VnRoles">
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.name"
-                        @click="navigate($event, row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <div style="flex-direction: column; width: 100%">
-                                <VnLv :label="t('role.card.name')" :value="row.name">
-                                </VnLv>
-                                <VnLv
-                                    :label="t('role.card.description')"
-                                    :value="row.description"
-                                >
-                                </VnLv>
-                            </div>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, RoleSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
-                </template>
-            </VnPaginate>
-        </div>
-        <QDialog
-            ref="roleCreateDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <RoleForm />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
-            <QTooltip>
-                {{ t('role.newRole') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+    <VnTable
+        ref="tableRef"
+        data-key="Roles"
+        :url="`VnRoles`"
+        order="id ASC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+    />
 </template>