diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 39cef2a4a..b18433d4e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -102,7 +102,7 @@ onMounted(async () => {
 });
 
 onBeforeRouteLeave((to, from, next) => {
-    if (hasChanges.value)
+    if (hasChanges.value && $props.observeFormChanges)
         quasar.dialog({
             component: VnConfirm,
             componentProps: {
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
new file mode 100644
index 000000000..6d0badffb
--- /dev/null
+++ b/src/components/common/VnCard.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { onBeforeMount, computed } from 'vue';
+import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useArrayData } from 'src/composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';
+import VnSubToolbar from '../ui/VnSubToolbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import LeftMenu from 'components/LeftMenu.vue';
+
+const props = defineProps({
+    dataKey: { type: String, required: true },
+    baseUrl: { type: String, default: undefined },
+    customUrl: { type: String, default: undefined },
+    filter: { type: Object, default: () => {} },
+    descriptor: { type: Object, required: true },
+    searchbarDataKey: { type: String, default: undefined },
+    searchbarUrl: { type: String, default: undefined },
+    searchbarLabel: { type: String, default: '' },
+    searchbarInfo: { type: String, default: '' },
+});
+
+const { t } = useI18n();
+const stateStore = useStateStore();
+const route = useRoute();
+const url = computed(() => {
+    if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
+    return props.customUrl;
+});
+
+const arrayData = useArrayData(props.dataKey, {
+    url: url.value,
+    filter: props.filter,
+});
+
+onBeforeMount(async () => {
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
+});
+
+if (props.baseUrl) {
+    onBeforeRouteUpdate(async (to, from) => {
+        if (to.params.id !== from.params.id) {
+            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
+            await arrayData.fetch({ append: false });
+        }
+    });
+}
+</script>
+<template>
+    <Teleport
+        to="#searchbar"
+        v-if="stateStore.isHeaderMounted() && props.searchbarDataKey"
+    >
+        <VnSearchbar
+            :data-key="props.searchbarDataKey"
+            :url="props.searchbarUrl"
+            :label="t(props.searchbarLabel)"
+            :info="t(props.searchbarInfo)"
+        />
+    </Teleport>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit">
+            <component :is="descriptor" />
+            <QSeparator />
+            <LeftMenu source="card" />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <QPage>
+            <VnSubToolbar />
+            <div :class="[useCardSize(), $attrs.class]">
+                <RouterView />
+            </div>
+        </QPage>
+    </QPageContainer>
+</template>
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index f30ea8937..d2ba21888 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, useSlots, watch, computed, ref } from 'vue';
+import { onBeforeMount, watch, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
 import { useArrayData } from 'composables/useArrayData';
@@ -38,7 +38,6 @@ const $props = defineProps({
 });
 
 const state = useState();
-const slots = useSlots();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const arrayData = useArrayData($props.dataKey || $props.module, {
@@ -47,7 +46,7 @@ const arrayData = useArrayData($props.dataKey || $props.module, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() =>Array.isArray( store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -55,14 +54,12 @@ defineExpose({
 });
 onBeforeMount(async () => {
     await getData();
-    watch(
-        () => $props.url,
-        async () => await getData()
-    );
+    watch($props, async () => await getData());
 });
 
 async function getData() {
     store.url = $props.url;
+    store.filter = $props.filter ?? {};
     isLoading.value = true;
     try {
         const { data } = await arrayData.fetch({ append: false, updateRouter: false });
@@ -117,7 +114,7 @@ const emit = defineEmits(['onFetch']);
                     icon="more_vert"
                     round
                     size="md"
-                    :class="{ invisible: !slots.menu }"
+                    :class="{ invisible: !$slots.menu }"
                 >
                     <QTooltip>
                         {{ t('components.cardDescriptor.moreOptions') }}
diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index a06837cf4..1a4514ef5 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -15,7 +15,7 @@ const props = defineProps({
         default: null,
     },
     entityId: {
-        type: Number,
+        type: [Number, String],
         default: null,
     },
     dataKey: {
@@ -32,7 +32,7 @@ const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
     skip: 0,
 });
 const { store } = arrayData;
-const entity = computed(() => Array.isArray(store.data) ? store.data[0] : store.data);
+const entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
 const isLoading = ref(false);
 
 defineExpose({
@@ -48,9 +48,10 @@ onBeforeMount(async () => {
 
 async function fetch() {
     store.url = props.url;
+    store.filter = props.filter ?? {};
     isLoading.value = true;
     const { data } = await arrayData.fetch({ append: false, updateRouter: false });
-    emit('onFetch', data);
+    emit('onFetch', Array.isArray(data) ? data[0] : data);
     isLoading.value = false;
 }
 </script>
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index ddf520d0f..fc8475ace 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -131,13 +131,6 @@ async function search() {
                 />
             </template>
             <template #append>
-                <QIcon
-                    v-if="searchText !== ''"
-                    name="close"
-                    @click="searchText = ''"
-                    class="cursor-pointer"
-                />
-
                 <QIcon
                     v-if="props.info && $q.screen.gt.xs"
                     name="info"
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
index 22eebdf36..c0d129613 100644
--- a/src/components/ui/VnSubToolbar.vue
+++ b/src/components/ui/VnSubToolbar.vue
@@ -1,11 +1,27 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useStateStore } from 'stores/useStateStore';
-
 const stateStore = useStateStore();
+const actions = ref(null);
+const data = ref(null);
+const opts = { subtree: true, childList: true, attributes: true };
+const hasContent = ref(false);
 
 onMounted(() => {
     stateStore.toggleSubToolbar();
+    actions.value = document.querySelector('#st-actions');
+    data.value = document.querySelector('#st-data');
+
+    if (!actions.value && !data.value) return;
+
+    // Check if there's content to display
+    const observer = new MutationObserver(
+        () =>
+            (hasContent.value =
+                actions.value.childNodes.length + data.value.childNodes.length)
+    );
+    if (actions.value) observer.observe(actions.value, opts);
+    if (data.value) observer.observe(data.value, opts);
 });
 
 onUnmounted(() => {
@@ -14,7 +30,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <QToolbar class="bg-vn-section-color justify-end sticky">
+    <QToolbar
+        class="justify-end sticky"
+        v-show="hasContent || $slots['st-actions'] || $slots['st-data']"
+    >
         <slot name="st-data">
             <div id="st-data"></div>
         </slot>
diff --git a/src/css/app.scss b/src/css/app.scss
index b33c615e1..da9659722 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -169,3 +169,18 @@ input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
 }
+
+// Clases para modificar el color de fecha seleccionada en componente QCalendarMonth
+.q-dark div .q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-calendar-mini .q-calendar-month__day.q-selected .q-calendar__button {
+    background-color: $primary !important;
+    color: white !important;
+}
+
+.q-scrollarea__content {
+    max-width: 100%;
+}
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 78eec9e8d..b2f9c4d2e 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,46 +1,15 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
-import { useI18n } from 'vue-i18n';
+import VnCard from 'components/common/VnCard.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="ClaimList"
-            url="Claims/filter"
-            :label="t('Search claim')"
-            :info="t('You can search by claim id or customer name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ClaimDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Claim"
+        base-url="Claims"
+        :descriptor="ClaimDescriptor"
+        searchbar-data-key="ClaimList"
+        searchbar-url="Claims/filter"
+        searchbar-label="Search claim"
+        searchbar-info="You can search by claim id or customer name"
+    />
 </template>
-
-<i18n>
-es:
-    Search claim: Buscar reclamación
-    You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
-    Details: Detalles
-    Notes: Notas
-    Action: Acción
-</i18n>
diff --git a/src/pages/Claim/locale/es.yml b/src/pages/Claim/locale/es.yml
new file mode 100644
index 000000000..710d3485d
--- /dev/null
+++ b/src/pages/Claim/locale/es.yml
@@ -0,0 +1,2 @@
+Search claim: Buscar reclamación
+You can search by claim id or customer name: Puedes buscar por id de la reclamación o nombre del cliente
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index f3ca74eaf..872bd7da7 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,43 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import CustomerDescriptor from './CustomerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="CustomerList"
-            url="Clients/filter"
-            :label="t('Search customer')"
-            :info="t('You can search by customer id or name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <CustomerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Client"
+        base-url="Clients"
+        :descriptor="CustomerDescriptor"
+        searchbar-data-key="CustomerList"
+        searchbar-url="Clients/filter"
+        searchbar-label="Search customer"
+        searchbar-info="You can search by customer id or name"
+    />
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>
diff --git a/src/pages/Customer/locale/es.yml b/src/pages/Customer/locale/es.yml
index 8fed37092..111696f21 100644
--- a/src/pages/Customer/locale/es.yml
+++ b/src/pages/Customer/locale/es.yml
@@ -1,3 +1,5 @@
+Search customer: Buscar cliente
+You can search by customer id or name: Puedes buscar por id o nombre del cliente
 customerFilter:
     filter:
         name: Nombre
diff --git a/src/pages/Department/Card/DepartmentCard.vue b/src/pages/Department/Card/DepartmentCard.vue
index da9accee1..21247ca5a 100644
--- a/src/pages/Department/Card/DepartmentCard.vue
+++ b/src/pages/Department/Card/DepartmentCard.vue
@@ -1,26 +1,13 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import DepartmentDescriptor from 'pages/Department/Card/DepartmentDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <DepartmentDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div class="q-pa-md column items-center">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        class="q-pa-md column items-center"
+        v-bind="{ ...$attrs }"
+        data-key="Department"
+        base-url="Departments"
+        :descriptor="DepartmentDescriptor"
+    />
 </template>
diff --git a/src/pages/Department/Card/DepartmentSummary.vue b/src/pages/Department/Card/DepartmentSummary.vue
index 1d42183c3..6377ac779 100644
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Department/Card/DepartmentSummary.vue
@@ -27,6 +27,7 @@ onMounted(async () => {
 
 <template>
     <CardSummary
+        data-key="DepartmentSummary"
         ref="summary"
         :url="`Departments/${entityId}`"
         class="full-width"
diff --git a/src/pages/Entry/Card/EntryCard.vue b/src/pages/Entry/Card/EntryCard.vue
index 5a2bef186..3eb4bd776 100644
--- a/src/pages/Entry/Card/EntryCard.vue
+++ b/src/pages/Entry/Card/EntryCard.vue
@@ -1,48 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import EntryDescriptor from './EntryDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const { t } = useI18n();
-const stateStore = useStateStore();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="EntryList"
-                url="Entries/filter"
-                :label="t('Search entries')"
-                :info="t('You can search by entry reference')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <EntryDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Entry"
+        base-url="Entries"
+        :descriptor="EntryDescriptor"
+        searchbar-data-key="EntryList"
+        searchbar-url="Entries/filter"
+        searchbar-label="Search entries"
+        searchbar-info="You can search by entry reference"
+    />
 </template>
-
-<i18n>
-es:
-    Search entries: Buscar entradas
-    You can search by entry reference: Puedes buscar por referencia de la entrada
-</i18n>
diff --git a/src/pages/Entry/locale/es.yml b/src/pages/Entry/locale/es.yml
index 192d03542..5d317a24a 100644
--- a/src/pages/Entry/locale/es.yml
+++ b/src/pages/Entry/locale/es.yml
@@ -1,3 +1,5 @@
+Search entries: Buscar entradas
+You can search by entry reference: Puedes buscar por referencia de la entrada
 entryList:
     list:
         inventoryEntry: Es inventario
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index 0de31c183..ceec5042d 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -1,18 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import { useArrayData } from 'src/composables/useArrayData';
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
-const route = useRoute();
 
 const filter = {
     include: [
@@ -21,69 +9,25 @@ const filter = {
             scope: {
                 include: {
                     relation: 'contacts',
-                    scope: {
-                        where: {
-                            email: { neq: null },
-                        },
-                    },
+                    scope: { where: { email: { neq: null } } },
                 },
             },
         },
-        {
-            relation: 'invoiceInDueDay',
-        },
-        {
-            relation: 'company',
-        },
-        {
-            relation: 'currency',
-        },
+        { relation: 'invoiceInDueDay' },
+        { relation: 'company' },
+        { relation: 'currency' },
     ],
 };
-const arrayData = useArrayData('InvoiceIn', {
-    url: `InvoiceIns/${route.params.id}`,
-    filter,
-});
-
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId, oldId) => {
-        if (newId) {
-            arrayData.store.url = `InvoiceIns/${newId}`;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceInList"
-            url="InvoiceIns/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceInDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="InvoiceIn"
+        base-url="InvoiceIns"
+        :filter="filter"
+        :descriptor="InvoiceInDescriptor"
+        searchbar-data-key="InvoiceInList"
+        searchbar-url="InvoiceIns/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
-
-<i18n>
-    es:
-        Search invoice: Buscar factura recibida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 0e53fbed7..9b7c77f9d 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -7,7 +7,6 @@ import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import { useCapitalize } from 'src/composables/useCapitalize';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
@@ -70,19 +69,15 @@ const suppliersRef = ref();
                 </QItemSection>
             </QItem>
             <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            :label="t('From')"
-                            v-model="params.from"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
-                    </QItemSection>
-                </QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('From')" v-model="params.from" is-outlined />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <VnInputDate :label="t('To')" v-model="params.to" is-outlined />
+                </QItemSection>
+            </QItem>
             <QItem>
                 <QItemSection>
                     <VnInput
@@ -114,33 +109,33 @@ const suppliersRef = ref();
             </QItem>
             <QExpansionItem :label="t('More options')" expand-separator>
                 <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.fi')"
-                        v-model="params.fi"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <VnInput
-                        :label="t('params.serialNumber')"
-                        v-model="params.serialNumber"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
-                </QItemSection>
-            </QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <VnInput
+                            :label="t('params.serialNumber')"
+                            v-model="params.serialNumber"
+                            is-outlined
+                            lazy-rules
+                        >
+                            <template #prepend>
+                                <QIcon name="badge" size="sm"></QIcon>
+                            </template>
+                        </VnInput>
+                    </QItemSection>
+                </QItem>
                 <QItem>
                     <QItemSection>
                         <VnInput
diff --git a/src/pages/InvoiceIn/locale/es.yml b/src/pages/InvoiceIn/locale/es.yml
new file mode 100644
index 000000000..d7e38d7fa
--- /dev/null
+++ b/src/pages/InvoiceIn/locale/es.yml
@@ -0,0 +1,2 @@
+Search invoice: Buscar factura recibida
+You can search by invoice reference: Puedes buscar por referencia de la factura
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 6844df2dd..218e01d83 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,43 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
+import VnCard from 'components/common/VnCard.vue';
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceOutList"
-            url="InvoiceOuts/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceOutDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="InvoiceOut"
+        base-url="InvoiceOuts"
+        :descriptor="InvoiceOutDescriptor"
+        searchbar-data-key="InvoiceOutList"
+        searchbar-url="InvoiceOuts/filter"
+        searchbar-label="Search invoice"
+        searchbar-info="You can search by invoice reference"
+    />
 </template>
-
-<i18n>
-    es:
-        Search invoice: Buscar factura emitida
-        You can search by invoice reference: Puedes buscar por referencia de la factura
-    </i18n>
diff --git a/src/pages/InvoiceOut/locale/es.yml b/src/pages/InvoiceOut/locale/es.yml
new file mode 100644
index 000000000..b936c7b7e
--- /dev/null
+++ b/src/pages/InvoiceOut/locale/es.yml
@@ -0,0 +1,2 @@
+Search invoice: Buscar factura emitida
+You can search by invoice reference: Puedes buscar por referencia de la factura
diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue
index 3b3750b2a..4eca6137c 100644
--- a/src/pages/Item/Card/ItemCard.vue
+++ b/src/pages/Item/Card/ItemCard.vue
@@ -1,28 +1,7 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import ItemDescriptor from './ItemDescriptor.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ItemDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Item" base-url="Items" :descriptor="ItemDescriptor" />
 </template>
diff --git a/src/pages/Order/Card/OrderCard.vue b/src/pages/Order/Card/OrderCard.vue
index 7ac083c37..ef7b30d86 100644
--- a/src/pages/Order/Card/OrderCard.vue
+++ b/src/pages/Order/Card/OrderCard.vue
@@ -1,23 +1,7 @@
 <script setup>
-import LeftMenu from 'components/LeftMenu.vue';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <OrderDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Order" base-url="Orders" :descriptor="OrderDescriptor" />
 </template>
diff --git a/src/pages/Parking/Card/ParkingBasicData.vue b/src/pages/Parking/Card/ParkingBasicData.vue
index 26a1ed8be..b03b7be7c 100644
--- a/src/pages/Parking/Card/ParkingBasicData.vue
+++ b/src/pages/Parking/Card/ParkingBasicData.vue
@@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'src/components/FetchData.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import FormModel from 'components/FormModel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
@@ -28,7 +27,6 @@ const filter = {
         @on-fetch="(data) => (sectors = data)"
         auto-load
     />
-    <VnSubToolbar />
     <FormModel :url="`Parkings/${parkingId}`" model="parking" :filter="filter" auto-load>
         <template #form="{ data }">
             <VnRow>
diff --git a/src/pages/Parking/Card/ParkingCard.vue b/src/pages/Parking/Card/ParkingCard.vue
index 621680985..5a0b552d6 100644
--- a/src/pages/Parking/Card/ParkingCard.vue
+++ b/src/pages/Parking/Card/ParkingCard.vue
@@ -1,57 +1,21 @@
 <script setup>
-import { onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useArrayData } from 'src/composables/useArrayData';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnCard from 'components/common/VnCard.vue';
 import ParkingDescriptor from 'pages/Parking/Card/ParkingDescriptor.vue';
 
-const { t } = useI18n();
-const route = useRoute();
-const stateStore = useStateStore();
-
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
     include: [{ relation: 'sector', scope: { fields: ['id', 'description'] } }],
 };
-
-const arrayData = useArrayData('Parking', {
-    url: `Parkings/${route.params.id}`,
-    filter,
-});
-const { store } = arrayData;
-onMounted(async () => await arrayData.fetch({ append: false }));
-watch(
-    () => route.params.id,
-    async (newId) => {
-        if (newId) {
-            store.url = `Parkings/${newId}`;
-            store.filter = filter;
-            await arrayData.fetch({ append: false });
-        }
-    }
-);
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            :info="t('parking.searchBar.info')"
-            :label="t('parking.searchBar.label')"
-            data-key="Parking"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ParkingDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Parking"
+        base-url="Parkings"
+        :filter="filter"
+        :descriptor="ParkingDescriptor"
+        searchbar-data-key="ParkingList"
+        searchbar-url="Parkings"
+        searchbar-label="parking.searchBar.label"
+        searchbar-info="parking.searchBar.info"
+    />
 </template>
diff --git a/src/pages/Parking/Card/ParkingSummary.vue b/src/pages/Parking/Card/ParkingSummary.vue
index a30705068..9a79f428b 100644
--- a/src/pages/Parking/Card/ParkingSummary.vue
+++ b/src/pages/Parking/Card/ParkingSummary.vue
@@ -11,9 +11,9 @@ const $props = defineProps({
         default: 0,
     },
 });
-const { params } = useRoute();
+const router = useRoute();
 const { t } = useI18n();
-const entityId = computed(() => $props.id || params.id);
+const entityId = computed(() => $props.id || router.params.id);
 
 const filter = {
     fields: ['id', 'sectorFk', 'code', 'pickingOrder', 'row', 'column'],
diff --git a/src/pages/Route/Card/RouteCard.vue b/src/pages/Route/Card/RouteCard.vue
index 46b997b65..fd0a8a507 100644
--- a/src/pages/Route/Card/RouteCard.vue
+++ b/src/pages/Route/Card/RouteCard.vue
@@ -1,22 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
 import RouteDescriptor from 'pages/Route/Card/RouteDescriptor.vue';
-// import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <RouteDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Route" base-url="Routes" :descriptor="RouteDescriptor" />
 </template>
diff --git a/src/pages/Shelving/Card/ShelvingCard.vue b/src/pages/Shelving/Card/ShelvingCard.vue
index 221740486..f4a2fcf60 100644
--- a/src/pages/Shelving/Card/ShelvingCard.vue
+++ b/src/pages/Shelving/Card/ShelvingCard.vue
@@ -1,21 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
 import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <ShelvingDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <RouterView></RouterView>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Shelving" base-url="Shelvings" :descriptor="ShelvingDescriptor" />
 </template>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index fdf1d785a..c8c503056 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -1,73 +1,14 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import LeftMenu from 'components/LeftMenu.vue';
+import VnCard from 'components/common/VnCard.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                data-key="SuppliersList"
-                url="Suppliers/filter"
-                :limit="20"
-                :label="t('Search suppliers')"
-            />
-        </Teleport>
-    </template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <SupplierDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Supplier"
+        base-url="Suppliers"
+        :descriptor="SupplierDescriptor"
+        searchbar-data-key="SupplierList"
+        searchbar-url="Suppliers/filter"
+        searchbar-label="Search suppliers"
+    />
 </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>
-
-<i18n>
-    es:
-        Search suppliers: Buscar proveedores
-</i18n>
diff --git a/src/pages/Supplier/locale/es.yml b/src/pages/Supplier/locale/es.yml
new file mode 100644
index 000000000..e7e484f6a
--- /dev/null
+++ b/src/pages/Supplier/locale/es.yml
@@ -0,0 +1 @@
+Search suppliers: Buscar proveedores
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 0d5d3803e..471bfe490 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,73 +1,15 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const { t } = useI18n();
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="TicketList"
-            url="Tickets/filter"
-            :label="t('Search ticket')"
-            :info="t('You can search by ticket id or alias')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <TicketDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Ticket"
+        base-url="Tickets"
+        :descriptor="TicketDescriptor"
+        searchbar-data-key="TicketList"
+        searchbar-url="Tickets/filter"
+        searchbar-label="Search ticket"
+        searchbar-info="You can search by ticket id or alias"
+    />
 </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>
-
-<i18n>
-es:
-    Search ticket: Buscar ticket
-    You can search by ticket id or alias: Puedes buscar por id o alias del ticket
-</i18n>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index d648433b0..364ae04a6 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -91,8 +91,8 @@ async function changeState(value) {
     >
         <template #header="{ entity }">
             <div>
-                Ticket #{{ entity.id }} - {{ entity.client.name }} ({{
-                    entity.client.id
+                Ticket #{{ entity.id }} - {{ entity.client?.name }} ({{
+                    entity.client?.id
                 }}) -
                 {{ entity.nickname }}
             </div>
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
new file mode 100644
index 000000000..5348b29b9
--- /dev/null
+++ b/src/pages/Ticket/locale/es.yml
@@ -0,0 +1,2 @@
+Search ticket: Buscar ticket
+You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index e6c7b7e28..1d591f064 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -1,55 +1,7 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <TravelDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Travel" base-url="Travels" :descriptor="TravelDescriptor" />
 </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/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue
index 5ac18fb47..ed6c83778 100644
--- a/src/pages/Wagon/Card/WagonCard.vue
+++ b/src/pages/Wagon/Card/WagonCard.vue
@@ -1,32 +1,6 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import { useRoute } from 'vue-router';
-import LeftMenu from 'components/LeftMenu.vue';
-import useCardSize from 'src/composables/useCardSize';
-
-const stateStore = useStateStore();
-const route = useRoute();
-const { t } = useI18n();
+import VnCard from 'components/common/VnCard.vue';
 </script>
 <template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard data-key="Wagon" base-url="Wagons" />
 </template>
-
-<i18n>
-es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-</i18n>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 0d62dcfc1..e0047bf9e 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -1,44 +1,18 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
+import VnCard from 'components/common/VnCard.vue';
 import WorkerDescriptor from './WorkerDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
 
-const stateStore = useStateStore();
-const { t } = useI18n();
+const filter = { where: {} };
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="WorkerList"
-            url="Workers/filter"
-            :label="t('Search worker')"
-            :info="t('You can search by worker id or name')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <WorkerDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard
+        data-key="Worker"
+        custom-url="Workers/Summary"
+        :descriptor="WorkerDescriptor"
+        :filter="filter"
+        searchbar-data-key="WorkerList"
+        searchbar-url="Workers/filter"
+        searchbar-label="Search worker"
+        searchbar-info="You can search by worker id or name"
+    />
 </template>
-
-<i18n>
-es:
-    Search worker: Buscar trabajador
-    You can search by worker id or name: Puedes buscar por id o nombre del trabajador
-</i18n>
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 6f876b8fa..6f05fcdfb 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -31,7 +31,9 @@ const entityId = computed(() => {
 });
 
 const worker = ref();
-const filter = { where: { id: entityId } };
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
 
 const sip = ref(null);
 
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 43c493565..3a79d12bb 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -10,7 +10,7 @@ import CardSummary from 'components/ui/CardSummary.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
-const { params } = useRoute();
+const route = useRoute();
 const { t } = useI18n();
 
 const $props = defineProps({
@@ -20,18 +20,25 @@ const $props = defineProps({
     },
 });
 
-const entityId = computed(() => $props.id || params.id);
+const entityId = computed(() => $props.id || route.params.id);
 const workerUrl = ref();
 
 onMounted(async () => {
     workerUrl.value = (await getUrl('')) + `worker/${entityId.value}/`;
 });
 
-const filter = { where: { id: entityId.value } };
+const filter = computed(() => {
+    return { where: { id: entityId.value } };
+});
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`Workers/summary`" :filter="filter">
+    <CardSummary
+        data-key="workerData"
+        ref="summary"
+        :url="`Workers/summary`"
+        :filter="filter"
+    >
         <template #header="{ entity }">
             <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
         </template>
@@ -41,7 +48,7 @@ const filter = { where: { id: entityId.value } };
                     :url="workerUrl + `basic-data`"
                     :text="t('worker.summary.basicData')"
                 />
-                <VnLv :label="t('worker.card.name')" :value="worker.user.nickname" />
+                <VnLv :label="t('worker.card.name')" :value="worker.user?.nickname" />
                 <VnLv
                     :label="t('worker.list.department')"
                     :value="worker.department?.department?.name"
diff --git a/src/pages/Worker/locale/es.yml b/src/pages/Worker/locale/es.yml
new file mode 100644
index 000000000..86dd9d0d9
--- /dev/null
+++ b/src/pages/Worker/locale/es.yml
@@ -0,0 +1,2 @@
+Search worker: Buscar trabajador
+You can search by worker id or name: Puedes buscar por id o nombre del trabajador