diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 202325bbf..2d41c36a2 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -24,14 +24,18 @@ const { t } = useI18n();
 
 onMounted(() => fetch());
 
+const emit = defineEmits(['onFetch']);
+
 const entity = ref();
 async function fetch() {
     const params = {};
 
-    if (props.filter) params.filter = props.filter;
+    if (props.filter) params.filter = JSON.stringify(props.filter);
 
     const { data } = await axios.get(props.url, { params });
     entity.value = data;
+
+    emit('onFetch', data);
 }
 
 watch(props, async () => {
@@ -46,9 +50,9 @@ watch(props, async () => {
             <div class="header bg-primary q-pa-sm">
                 <router-link :to="{ name: `${module}List` }">
                     <q-btn round flat dense size="md" icon="view_list" color="white">
-                        <q-tooltip>{{
-                            t('components.cardDescriptor.mainList')
-                        }}</q-tooltip>
+                        <q-tooltip>
+                            {{ t('components.cardDescriptor.mainList') }}
+                        </q-tooltip>
                     </q-btn>
                 </router-link>
                 <router-link
@@ -80,8 +84,9 @@ watch(props, async () => {
                     </q-menu>
                 </q-btn>
             </div>
+            <slot name="before" />
             <div class="body q-py-sm">
-                <q-list>
+                <q-list dense>
                     <q-item-label header class="ellipsis text-h5" :lines="1">
                         <slot name="description" :entity="entity">
                             <span>
@@ -98,6 +103,7 @@ watch(props, async () => {
                 </q-list>
                 <slot name="body" :entity="entity" />
             </div>
+            <slot name="after" />
         </template>
         <!-- Skeleton -->
         <skeleton-descriptor v-if="!entity" />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 745731962..e8a75bcb9 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -100,7 +100,7 @@ function viewSummary(id) {
                             <q-btn
                                 flat
                                 round
-                                color="orange"
+                                color="primary"
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index b014e9b7f..39c4cbfd9 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,24 +1,18 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useState } from 'src/composables/useState';
+// import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import WorkerDescriptor from './WorkerDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
-const state = useState();
-const { t } = useI18n();
+const stateStore = useStateStore();
+// const { t } = useI18n();
 </script>
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit">
-            <worker-descriptor />
+            <WorkerDescriptor />
             <q-separator />
-            <q-list>
-                <q-item :to="{ name: 'WorkerBasicData' }" clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="person" />
-                    </q-item-section>
-                    <q-item-section>{{ t('worker.pageTitles.basicData') }}</q-item-section>
-                </q-item>
-            </q-list>
+            <left-menu source="card" />
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
@@ -27,32 +21,3 @@ const { t } = useI18n();
         </q-page>
     </q-page-container>
 </template>
-
-<style lang="scss">
-.q-scrollarea__content {
-    max-width: 100%;
-}
-</style>
-
-<style lang="scss" scoped>
-.descriptor {
-    max-width: 256px;
-
-    h5 {
-        margin: 0 15px;
-    }
-
-    .header {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .q-card__actions {
-        justify-content: center;
-    }
-
-    #descriptor-skeleton .q-card__actions {
-        justify-content: space-between;
-    }
-}
-</style>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index bd08fb1c1..b763469bc 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { onMounted, computed, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
-import axios from 'axios';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 
 const $props = defineProps({
@@ -14,10 +13,6 @@ const $props = defineProps({
     },
 });
 
-onMounted(() => {
-    fetch();
-});
-
 const route = useRoute();
 const { t } = useI18n();
 const { getToken } = useSession();
@@ -27,7 +22,6 @@ const entityId = computed(() => {
 });
 
 const worker = ref();
-
 const filter = {
     include: [
         {
@@ -52,34 +46,26 @@ const filter = {
     ],
 };
 
-async function fetch() {
-    axios
-        .get(`Workers/${entityId.value}`, {
-            params: {
-                filter: JSON.stringify(filter),
-            },
-        })
-        .then((response) => {
-            worker.value = response.data;
-        });
-}
-
-function sipExtension() {
-    if (worker.value.sip) return worker.value.sip.extension;
-    return '-';
-}
+const sip = computed(() => worker.value.sip && worker.value.sip.extension);
 
 function getWorkerAvatar() {
     const token = getToken();
-    return `/api/Images/user/160x160/${worker.value.user.id}/download?access_token=${token}`;
+    return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
 }
 </script>
 <template>
-    <card-descriptor v-if="worker" module="Worker" :data="worker" :description="worker.user.name">
+    <card-descriptor
+        module="Worker"
+        :url="`Workers/${entityId}`"
+        :filter="filter"
+        @on-fetch="(data) => (worker = data)"
+    >
         <template #before>
-            <q-img :src="getWorkerAvatar()" class="q-mb-md">
+            <q-img :src="getWorkerAvatar()">
                 <template #error>
-                    <div class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center">
+                    <div
+                        class="absolute-full bg-grey-10 text-center q-pa-md flex flex-center"
+                    >
                         <div>
                             <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
                                 <q-icon name="vn:claims" />
@@ -92,36 +78,52 @@ function getWorkerAvatar() {
                 </template>
             </q-img>
         </template>
-        <template #body>
+        <template #description="{ entity }">
+            <span>
+                {{ entity.user.nickname }}
+                <q-tooltip>{{ entity.user.nickname }}</q-tooltip>
+            </span>
+        </template>
+        <template #body="{ entity }">
             <q-list>
                 <q-item>
                     <q-item-section>
                         <q-item-label caption> {{ t('worker.card.name') }} </q-item-label>
-                        <q-item-label>{{ worker.user.nickname }}</q-item-label>
+                        <q-item-label>{{ entity.user.nickname }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption> {{ t('worker.card.email') }} </q-item-label>
-                        <q-item-label>{{ worker.user.email }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('worker.card.email') }}
+                        </q-item-label>
+                        <q-item-label>{{ entity.user.email }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption> {{ t('worker.list.department') }} </q-item-label>
-                        <q-item-label>{{ worker.department.department.name }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('worker.list.department') }}
+                        </q-item-label>
+                        <q-item-label>
+                            {{ entity.department.department.name }}
+                        </q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption> {{ t('worker.card.phone') }} </q-item-label>
-                        <q-item-label>{{ worker.phone }}</q-item-label>
+                        <q-item-label caption>
+                            {{ t('worker.card.phone') }}
+                        </q-item-label>
+                        <q-item-label>{{ entity.phone }}</q-item-label>
                     </q-item-section>
                 </q-item>
                 <q-item>
                     <q-item-section>
-                        <q-item-label caption>{{ t('worker.summary.sipExtension') }} </q-item-label>
-                        <q-item-label>{{ sipExtension() }}</q-item-label>
+                        <q-item-label caption
+                            >{{ t('worker.summary.sipExtension') }}
+                        </q-item-label>
+                        <q-item-label>{{ sip }}</q-item-label>
                     </q-item-section>
                 </q-item>
             </q-list>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index fc28eba96..17066c64f 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -9,28 +9,6 @@ const router = useRouter();
 const { t } = useI18n();
 const quasar = useQuasar();
 
-const filter = {
-    include: [
-        {
-            relation: 'user',
-            scope: {
-                fields: ['email', 'name', 'nickname'],
-            },
-        },
-        {
-            relation: 'department',
-            scope: {
-                include: {
-                    relation: 'department',
-                    scope: {
-                        fields: ['name'],
-                    },
-                },
-            },
-        },
-    ],
-};
-
 function navigate(id) {
     router.push({ path: `/worker/${id}` });
 }
@@ -47,41 +25,71 @@ function viewSummary(id) {
 
 <template>
     <q-page class="q-pa-md">
-        <paginate url="/Workers" :filter="filter" sort-by="id DESC" auto-load>
+        <paginate data-key="WorkerList" url="Workers/filter" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
-                <q-card class="card" v-for="row in rows" :key="row.id">
-                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                <q-card class="card" v-for="row of rows" :key="row.id">
+                    <q-item
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
-                            <q-item-label class="text-h6">{{ row.user.nickname }}</q-item-label>
+                            <q-item-label class="text-h6">
+                                {{ row.nickname }}
+                            </q-item-label>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('worker.list.name') }}</q-item-label>
-                                        <q-item-label>{{ row.user.name }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('worker.list.name') }}
+                                        </q-item-label>
+                                        <q-item-label>{{ row.userName }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('worker.list.email') }}</q-item-label>
-                                        <q-item-label>{{ row.user.email }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('worker.list.email') }}
+                                        </q-item-label>
+                                        <q-item-label>{{ row.email }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('worker.list.department') }}</q-item-label>
-                                        <q-item-label>{{ row.department.department.name }}</q-item-label>
+                                        <q-item-label caption>{{
+                                            t('worker.list.department')
+                                        }}</q-item-label>
+                                        <q-item-label>
+                                            {{ row.department }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                             </q-list>
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical class="justify-between">
-                            <q-btn flat round color="orange" icon="preview" @click="viewSummary(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="primary"
+                                icon="arrow_circle_right"
+                                @click="navigate(row.id)"
+                            >
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="schedule" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('worker.list.schedule') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="grey-7"
+                                icon="preview"
+                                @click="viewSummary(row.id)"
+                            >
+                                <q-tooltip>{{
+                                    t('components.smartCard.openSummary')
+                                }}</q-tooltip>
                             </q-btn>
                         </q-card-actions>
                     </q-item>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
index 099e82879..2fb079daa 100644
--- a/src/pages/Worker/WorkerMain.vue
+++ b/src/pages/Worker/WorkerMain.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'src/components/LeftMenu.vue';
 
-const state = useState();
+const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index ddba83cfa..b1b67fd4d 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -11,6 +11,7 @@ export default {
     redirect: { name: 'WorkerMain' },
     menus: {
         main: ['WorkerList'],
+        card: [],
     },
     children: [
         {