diff --git a/package-lock.json b/package-lock.json
index 9db93eff3..6a60c95c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "salix-front",
-    "version": "23.52.01",
+    "version": "24.02.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "salix-front",
-            "version": "23.52.01",
+            "version": "24.02.01",
             "dependencies": {
                 "@quasar/cli": "^2.3.0",
                 "@quasar/extras": "^1.16.4",
diff --git a/package.json b/package.json
index 7c966dbb1..c4f5b828a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "24.00.01",
+    "version": "24.02.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
diff --git a/src/App.vue b/src/App.vue
index 8e9bea2e4..d0d8c9358 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,11 @@
 <script setup>
 import { onMounted } from 'vue';
-import { useQuasar } from 'quasar';
+import { useQuasar, Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
 const quasar = useQuasar();
 const { availableLocales, locale, fallbackLocale } = useI18n();
+Dark.set(true);
 
 onMounted(() => {
     let userLang = window.navigator.language;
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index aee12d105..f512ac4c4 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -1,17 +1,18 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, Quasar } from 'quasar';
+import { Dark, Quasar, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
-
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
+import { localeEquivalence } from "src/i18n/index";
 
 const state = useState();
 const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
+const quasar = useQuasar();
 
 const userLocale = computed({
     get() {
@@ -20,16 +21,14 @@ const userLocale = computed({
     set(value) {
         locale.value = value;
 
-        if (value === 'en') value = 'en-GB';
+        value = localeEquivalence[value] ?? value
 
-        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
-        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
         try {
-            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
-            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
+            /* @vite-ignore */
+            import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
                 Quasar.lang.set(lang.default);
             });
-        } catch (error) {
+       } catch (error) {
             //
         }
     },
@@ -84,6 +83,10 @@ function logout() {
 
 function copyUserToken(){
     navigator.clipboard.writeText(session.getToken());
+    quasar.notify({
+        type: 'positive',
+        message: t('components.userPanel.copyToken'),
+    });
 }
 </script>
 
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index 2669b53a9..5c911a08e 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -62,7 +62,7 @@ async function getData() {
         filter: $props.filter,
         skip: 0,
     });
-    const { data } = await arrayData.fetch({ append: false });
+    const { data } = await arrayData.fetch({ append: false, updateRouter: false });
     entity.value = data;
     emit('onFetch', data);
 }
diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index b385b684f..85bece243 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { useSession } from 'src/composables/useSession';
+import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 const $props = defineProps({
     worker: { type: Number, required: true },
     description: { type: String, default: null },
+    clickable: { type: Boolean, default: false },
 });
 const session = useSession();
 const token = session.getToken();
@@ -22,5 +24,6 @@ const token = session.getToken();
                 </p>
             </slot>
         </div>
+        <WorkerDescriptorProxy :v-if="$props.clickable" :id="$props.worker" />
     </div>
 </template>
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index f02551575..88348e45a 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -28,7 +28,7 @@ async function insert() {
 }
 </script>
 <template>
-    <div class="column items-center">
+    <div class="column items-center full-height">
         <VnPaginate
             :data-key="$props.url"
             :url="$props.url"
@@ -115,6 +115,10 @@ async function insert() {
 <style lang="scss" scoped>
 .q-card {
     max-width: 80em;
+
+    &__section {
+        word-wrap: break-word;
+    }
 }
 .q-dialog .q-card {
     width: 400px;
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index c75761462..3b530dbb1 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -168,7 +168,12 @@ async function onLoad(...params) {
             </QCard>
         </div>
     </div>
-    <QInfiniteScroll v-if="store.data" @load="onLoad" :offset="offset" class="full-width">
+    <QInfiniteScroll
+        v-if="store.data"
+        @load="onLoad"
+        :offset="offset"
+        class="full-width full-height overflow-auto"
+    >
         <slot name="body" :rows="store.data"></slot>
         <div v-if="isLoading" class="info-row q-pa-md text-center">
             <QSpinner color="orange" size="md" />
diff --git a/src/components/ui/VnSms.vue b/src/components/ui/VnSms.vue
new file mode 100644
index 000000000..625fdec77
--- /dev/null
+++ b/src/components/ui/VnSms.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { onBeforeMount } from 'vue';
+import { date } from 'quasar';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
+import VnAvatar from '../ui/VnAvatar.vue';
+
+const $props = defineProps({
+    url: { type: String, default: null },
+    where: { type: Object, default: () => {} },
+});
+
+const filter = {
+    fields: ['smsFk'],
+    include: {
+        relation: 'sms',
+        scope: {
+            fields: [
+                'senderFk',
+                'sender',
+                'destination',
+                'message',
+                'statusCode',
+                'status',
+                'created',
+            ],
+            include: {
+                relation: 'sender',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        },
+    },
+};
+
+onBeforeMount(() => (filter.where = $props.where));
+
+function formatNumber(number) {
+    if (number.length <= 10) return number;
+    return number.slice(0, 4) + ' ' + number.slice(4);
+}
+</script>
+
+<template>
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                :data-key="$props.url"
+                :url="$props.url"
+                :filter="filter"
+                order="smsFk DESC"
+                :offset="100"
+                :limit="5"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QCard
+                        flat
+                        bordered
+                        class="card q-pa-md q-mb-sm smsCard"
+                        v-for="row of rows"
+                        :key="row.smsFk"
+                    >
+                        <QItem>
+                            <QItemSection side top>
+                                <VnAvatar
+                                    class="cursor-pointer"
+                                    :worker="row.sms.senderFk"
+                                    :title="row.sms.sender.name"
+                                    :clickable="true"
+                                />
+                            </QItemSection>
+                            <QSeparator />
+                            <QItemSection>
+                                <QItemLabel caption>{{
+                                    formatNumber(row.sms.destination)
+                                }}</QItemLabel>
+                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
+                            </QItemSection>
+                            <QItemSection side>
+                                <QItemLabel caption>{{
+                                    date.formatDate(
+                                        row.sms.created,
+                                        'YYYY-MM-DD HH:mm:ss'
+                                    )
+                                }}</QItemLabel>
+                                <QItemLabel class="row center">
+                                    <QChip
+                                        :color="
+                                            row.sms.status == 'OK'
+                                                ? 'positive'
+                                                : 'negative'
+                                        "
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
+                                </QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </QCard>
+                </template>
+            </VnPaginate>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.q-item__section--side {
+    align-items: center;
+}
+</style>
diff --git a/src/components/ui/VnSubToolbar.vue b/src/components/ui/VnSubToolbar.vue
new file mode 100644
index 000000000..81a1820f1
--- /dev/null
+++ b/src/components/ui/VnSubToolbar.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useStateStore } from 'stores/useStateStore';
+const stateStore = useStateStore();
+
+onMounted(() => {
+    stateStore.toggleSubToolbar();
+});
+
+onUnmounted(() => {
+    stateStore.toggleSubToolbar();
+});
+</script>
+
+<template>
+    <QToolbar class="bg-vn-dark justify-end">
+        <div id="st-data"></div>
+        <QSpace />
+        <div id="st-actions"></div>
+    </QToolbar>
+</template>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 523340cc9..39c879f98 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -58,7 +58,7 @@ export function useArrayData(key, userOptions) {
         }
     }
 
-    async function fetch({ append = false }) {
+    async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
 
         cancelRequest();
@@ -100,15 +100,12 @@ export function useArrayData(key, userOptions) {
 
         hasMoreData.value = response.data.length === limit;
 
-        if (append === true) {
+        if (append) {
             if (!store.data) store.data = [];
             for (const row of response.data) store.data.push(row);
-        }
-
-        if (append === false) {
+        } else {
             store.data = response.data;
-
-            updateStateParams();
+            updateRouter && updateStateParams();
         }
 
         store.isLoading = false;
@@ -155,7 +152,9 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    delete store.filter.where[Object.keys(exprBuilder ? exprBuilder(param) : param)[0]];
+                    delete store.filter.where[
+                        Object.keys(exprBuilder ? exprBuilder(param) : param)[0]
+                    ];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
                     }
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index e4b7a327f..05b9d2703 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -114,6 +114,7 @@ export default {
             createCustomer: 'Create customer',
             summary: 'Summary',
             basicData: 'Basic Data',
+            sms: 'Sms',
         },
         list: {
             phone: 'Phone',
@@ -741,6 +742,7 @@ export default {
     components: {
         topbar: {},
         userPanel: {
+            copyToken: 'Token copied to clipboard',
             settings: 'Settings',
             logOut: 'Log Out',
         },
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 0289b7e78..c2d3c2dd9 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -113,6 +113,7 @@ export default {
             createCustomer: 'Crear cliente',
             basicData: 'Datos básicos',
             summary: 'Resumen',
+            sms: 'Sms',
         },
         list: {
             phone: 'Teléfono',
@@ -371,7 +372,7 @@ export default {
     },
     invoiceOut: {
         pageTitles: {
-            invoiceOuts: 'Crear factura',
+            invoiceOuts: 'Fact. emitidas',
             list: 'Listado',
             negativeBases: 'Bases Negativas',
             globalInvoicing: 'Facturación global',
@@ -740,6 +741,7 @@ export default {
     components: {
         topbar: {},
         userPanel: {
+            copyToken: 'Token copiado al portapapeles',
             settings: 'Configuración',
             logOut: 'Cerrar sesión',
         },
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 7344be49a..a375812df 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1,6 +1,8 @@
 import en from './en';
 import es from './es';
-
+export const localeEquivalence = {
+     'en':'en-GB'
+}
 export default {
     en: en,
     es: es,
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 9c076d98c..021ee685a 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { useQuasar } from 'quasar';
 import Navbar from 'src/components/NavBar.vue';
-
 const quasar = useQuasar();
 </script>
 
diff --git a/src/layouts/OutLayout.vue b/src/layouts/OutLayout.vue
index f21e6e568..8e9ab3e41 100644
--- a/src/layouts/OutLayout.vue
+++ b/src/layouts/OutLayout.vue
@@ -26,6 +26,7 @@ const userLocale = computed({
         }
     },
 });
+
 const darkMode = computed({
     get() {
         return Dark.isActive;
diff --git a/src/pages/Claim/Card/ClaimAction.vue b/src/pages/Claim/Card/ClaimAction.vue
index fb47eeee2..e92e65fc7 100644
--- a/src/pages/Claim/Card/ClaimAction.vue
+++ b/src/pages/Claim/Card/ClaimAction.vue
@@ -282,6 +282,8 @@ async function importToNewRefundTicket() {
                 selection="multiple"
                 v-model:selected="selectedRows"
                 :grid="$q.screen.lt.md"
+                :pagination="{ rowsPerPage: 0 }"
+                :hide-bottom="true"
             >
                 <template #body-cell-ticket="{ value }">
                     <QTd align="center">
@@ -335,7 +337,23 @@ async function importToNewRefundTicket() {
                                     </QItemSection>
                                     <QItemSection side>
                                         <QItemLabel v-if="column.name === 'destination'">
-                                            {{ column.value.description }}
+                                            <VnSelectFilter
+                                                v-model="props.row.claimDestinationFk"
+                                                :options="destinationTypes"
+                                                option-label="description"
+                                                option-value="id"
+                                                :autofocus="true"
+                                                dense
+                                                input-debounce="0"
+                                                hide-selected
+                                                @update:model-value="
+                                                    (value) =>
+                                                        updateDestination(
+                                                            value,
+                                                            props.row
+                                                        )
+                                                "
+                                            />
                                         </QItemLabel>
                                         <QItemLabel v-else>
                                             {{ column.value }}
@@ -417,25 +435,6 @@ async function importToNewRefundTicket() {
             </QCardActions>
         </QCard>
     </QDialog>
-    <!-- <QDialog v-model="dialogGreuge">
-        <QCardSection>
-            <QItem class="q-pa-sm">
-                <span class="q-pa-sm q-dialog__title text-white">
-                    {{ t('dialogGreuge title') }}
-                </span>
-                <QBtn class="q-pa-sm" icon="close" flat round dense v-close-popup />
-            </QItem>
-            <QCardActions class="justify-end q-mr-sm">
-                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
-                <QBtn
-                    :label="t('globals.save')"
-                    color="primary"
-                    v-close-popup
-                    @click="onUpdateGreugeAccept"
-                />
-            </QCardActions>
-        </QCardSection>
-    </QDialog> -->
 </template>
 <style lang="scss" scoped>
 .slider-container {
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index a8c832967..b6c948c96 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -7,8 +7,8 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import ClaimDescriptor from './ClaimDescriptor.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-import { onMounted } from 'vue';
 const stateStore = useStateStore();
 const { t } = useI18n();
 const route = useRoute();
@@ -41,11 +41,7 @@ const entityId = computed(() => {
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/Claim/Card/ClaimDevelopment.vue b/src/pages/Claim/Card/ClaimDevelopment.vue
index 0ab3c6c90..d1634c709 100644
--- a/src/pages/Claim/Card/ClaimDevelopment.vue
+++ b/src/pages/Claim/Card/ClaimDevelopment.vue
@@ -54,6 +54,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 1,
+        align: 'left',
     },
     {
         name: 'claimResult',
@@ -66,6 +67,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 2,
+        align: 'left',
     },
     {
         name: 'claimResponsible',
@@ -78,6 +80,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 3,
+        align: 'left',
     },
     {
         name: 'worker',
@@ -89,6 +92,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'nickname',
         tabIndex: 4,
+        align: 'left',
     },
     {
         name: 'claimRedelivery',
@@ -101,6 +105,7 @@ const columns = computed(() => [
         optionValue: 'id',
         optionLabel: 'description',
         tabIndex: 5,
+        align: 'left',
     },
 ]);
 </script>
@@ -158,6 +163,7 @@ const columns = computed(() => [
                 hide-pagination
                 v-model:selected="selected"
                 :grid="$q.screen.lt.md"
+                table-header-class="text-left"
             >
                 <template #body-cell="{ row, col }">
                     <QTd
@@ -165,7 +171,6 @@ const columns = computed(() => [
                         @keyup.ctrl.enter.stop="claimDevelopmentForm.saveChanges()"
                     >
                         <VnSelectFilter
-                            :label="col.label"
                             v-model="row[col.model]"
                             :options="col.options"
                             :option-value="col.optionValue"
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index fa7fb123f..e7f67bcc2 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -43,17 +43,20 @@ async function onFetchClaim(data) {
     fetchMana();
 }
 
-const amount = ref(0);
-const amountClaimed = ref(0);
+const amount = ref();
+const amountClaimed = ref();
 async function onFetch(rows) {
+    amount.value = 0;
+    amountClaimed.value = 0;
     if (!rows || !rows.length) return;
+
     amount.value = rows.reduce(
-        (acumulator, { sale }) => acumulator + sale.price * sale.quantity,
+        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
         0
     );
 
     amountClaimed.value = rows.reduce(
-        (acumulator, line) => acumulator + line.sale.price * line.quantity,
+        (accumulator, line) => accumulator + line.sale.price * line.quantity,
         0
     );
 }
@@ -189,6 +192,7 @@ function showImportDialog() {
                 save-url="ClaimBeginnings/crud"
                 :filter="linesFilter"
                 @on-fetch="onFetch"
+                @save-changes="onFetch"
                 v-model:selected="selected"
                 :default-save="false"
                 :default-reset="false"
diff --git a/src/pages/Claim/Card/ClaimNotes.vue b/src/pages/Claim/Card/ClaimNotes.vue
index 84d350e38..35ecb0451 100644
--- a/src/pages/Claim/Card/ClaimNotes.vue
+++ b/src/pages/Claim/Card/ClaimNotes.vue
@@ -8,6 +8,10 @@ const state = useState();
 const user = state.getUser();
 const id = route.params.id;
 
+const $props = defineProps({
+    addNote: { type: Boolean, default: true },
+});
+
 const claimFilter = {
     where: { claimFk: id },
     fields: ['created', 'workerFk', 'text'],
@@ -27,7 +31,7 @@ const body = {
 <template>
     <div class="column items-center">
         <VnNotes
-            :add-note="true"
+            :add-note="$props.addNote"
             :id="id"
             url="claimObservations"
             :filter="claimFilter"
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index d6a7f1333..906a41bca 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -9,6 +9,7 @@ import { getUrl } from 'src/composables/getUrl';
 import { useSession } from 'src/composables/useSession';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
+import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -132,7 +133,7 @@ const developmentColumns = ref([
     {
         name: 'worker',
         label: 'claim.summary.worker',
-        field: (row) => row.worker.user.nickname,
+        field: (row) => row.worker?.user.nickname,
         sortable: true,
     },
     {
@@ -210,15 +211,15 @@ function openDialog(dmsId) {
                     </template>
                 </VnLv>
             </QCard>
-            <QCard class="vn-one">
-                <a class="header" :href="claimUrl + 'note/index'">
+            <QCard class="vn-max claimVnNotes">
+                <a class="header" :href="`#/claim/${entityId}/notes`">
                     {{ t('claim.summary.notes') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
-                <!-- Use VnNotes and maybe VirtualScroll-->
+                <ClaimNotes :add-note="false" style="height: 350px" order="created ASC" />
             </QCard>
             <QCard class="vn-max" v-if="salesClaimed.length > 0">
-                <a class="header" :href="claimUrl + 'note/index'">
+                <a class="header" :href="`#/claim/${entityId}/lines`">
                     {{ t('claim.summary.details') }}
                     <QIcon name="open_in_new" color="primary" />
                 </a>
@@ -368,6 +369,13 @@ function openDialog(dmsId) {
         </template>
     </CardSummary>
 </template>
+<style lang="scss">
+.claimVnNotes {
+    .q-card {
+        max-width: 100%;
+    }
+}
+</style>
 <style lang="scss" scoped>
 .q-dialog__inner--minimized > div {
     max-width: 80%;
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 5729ac988..22f6fb8f0 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -38,15 +38,6 @@ function viewSummary(id) {
         },
     });
 }
-
-function viewDescriptor(id) {
-    quasar.dialog({
-        component: CustomerDescriptorProxy,
-        componentProps: {
-            id,
-        },
-    });
-}
 </script>
 
 <template>
diff --git a/src/pages/Customer/Card/CustomerSms.vue b/src/pages/Customer/Card/CustomerSms.vue
new file mode 100644
index 000000000..a567f6b47
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerSms.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useRoute } from 'vue-router';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+const route = useRoute();
+const id = route.params.id;
+
+const where = {
+    clientFk: id,
+    ticketFk: null,
+};
+</script>
+<template>
+    <div class="column items-center">
+        <VnSms url="clientSms" :where="where" />
+    </div>
+</template>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index d24eb3ef2..bfab4b9e1 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -4,6 +4,7 @@ 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';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -26,11 +27,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <QToolbar class="bg-vn-dark justify-end">
-                <div id="st-data"></div>
-                <QSpace />
-                <div id="st-actions"></div>
-            </QToolbar>
+            <VnSubToolbar />
             <div class="q-pa-md"><RouterView></RouterView></div>
         </QPage>
     </QPageContainer>
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index e30ac1939..9740e3664 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -15,7 +16,7 @@ const defaultInitialData = {
     priority: 0,
     code: null,
     isRecyclable: false,
-}
+};
 
 const parkingFilter = { fields: ['id', 'code'] };
 const parkingList = ref([]);
@@ -58,11 +59,7 @@ const shelvingFilter = {
 };
 </script>
 <template>
-    <QToolbar class="bg-vn-dark justify-end">
-        <div id="st-data"></div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
+    <VnSubToolbar />
     <FetchData
         url="Parkings"
         :filter="parkingFilter"
diff --git a/src/pages/Ticket/Card/TicketSms.vue b/src/pages/Ticket/Card/TicketSms.vue
index b145be50e..ff7de6611 100644
--- a/src/pages/Ticket/Card/TicketSms.vue
+++ b/src/pages/Ticket/Card/TicketSms.vue
@@ -1,118 +1,16 @@
 <script setup>
-import { date } from 'quasar';
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
+import VnSms from 'src/components/ui/VnSms.vue';
 
-import { useSession } from 'src/composables/useSession';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
+const route = useRoute();
+const id = route.params.id;
 
-const router = useRouter();
-const session = useSession();
-const token = session.getToken();
-
-const entityId = computed(function () {
-    return router.currentRoute.value.params.id;
-});
-
-const filter = {
-    fields: ['ticketFk', 'smsFk'],
-    include: {
-        relation: 'sms',
-        scope: {
-            fields: [
-                'senderFk',
-                'sender',
-                'destination',
-                'message',
-                'statusCode',
-                'status',
-                'created',
-            ],
-            include: {
-                relation: 'sender',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-        },
-    },
-    where: {
-        ticketFk: entityId,
-    },
+const where = {
+    ticketFk: id,
 };
-
-function formatNumer(number) {
-    if (number.length <= 10) return number;
-    return number.slice(0, 4) + ' ' + number.slice(4);
-}
 </script>
-
 <template>
     <div class="column items-center">
-        <div class="list">
-            <VnPaginate
-                data-key="TicketSms"
-                url="TicketSms"
-                :filter="filter"
-                order="smsFk DESC"
-                :offset="100"
-                :limit="5"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QCard
-                        flat
-                        bordered
-                        class="card q-pa-md"
-                        v-for="row of rows"
-                        :key="row.smsFk"
-                    >
-                        <QItem>
-                            <QItmSection top avatar>
-                                <QItemLabel class="column items-center">
-                                    <QAvatar>
-                                        <QImg
-                                            :src="`/api/Images/user/160x160/${row.sms.senderFk}/download?access_token=${token}`"
-                                            spinner-color="white"
-                                        />
-                                    </QAvatar>
-                                    <span class="link">
-                                        {{ row.sms.sender.name }}
-                                        <WorkerDescriptorProxy :id="row.sms.senderFk" />
-                                    </span>
-                                </QItemLabel>
-                            </QItmSection>
-                            <QSeparator spaced inset="item" />
-                            <QItemSection>
-                                <QItemLabel caption>{{
-                                    formatNumer(row.sms.destination)
-                                }}</QItemLabel>
-                                <QItemLabel>{{ row.sms.message }}</QItemLabel>
-                            </QItemSection>
-                            <QItemSection side top>
-                                <QItemLabel caption>{{
-                                    date.formatDate(
-                                        row.sms.created,
-                                        'YYYY-MM-DD HH:mm:ss'
-                                    )
-                                }}</QItemLabel>
-                                <QItemLabel>
-                                    <QChip
-                                        :color="
-                                            row.sms.status == 'OK'
-                                                ? 'positive'
-                                                : 'negative'
-                                        "
-                                    >
-                                        {{ row.sms.status }}
-                                    </QChip>
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
-                    </QCard>
-                </template>
-            </VnPaginate>
-        </div>
+        <VnSms url="clientSms" :where="where" />
     </div>
 </template>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 832a1e0fd..b8be4f3ac 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -11,7 +11,7 @@ export default {
     redirect: { name: 'CustomerMain' },
     menus: {
         main: ['CustomerList', 'CustomerPayments'],
-        card: ['CustomerBasicData'],
+        card: ['CustomerBasicData', 'CustomerSms'],
     },
     children: [
         {
@@ -66,6 +66,15 @@ export default {
                     component: () =>
                         import('src/pages/Customer/Card/CustomerBasicData.vue'),
                 },
+                {
+                    path: 'sms',
+                    name: 'CustomerSms',
+                    meta: {
+                        title: 'sms',
+                        icon: 'sms',
+                    },
+                    component: () => import('src/pages/Customer/Card/CustomerSms.vue'),
+                },
             ],
         },
     ],
diff --git a/src/stores/useStateStore.js b/src/stores/useStateStore.js
index 74b65e71f..328df9978 100644
--- a/src/stores/useStateStore.js
+++ b/src/stores/useStateStore.js
@@ -5,6 +5,7 @@ export const useStateStore = defineStore('stateStore', () => {
     const isMounted = ref(false);
     const leftDrawer = ref(false);
     const rightDrawer = ref(false);
+    const subToolbar = ref(false);
 
     function toggleLeftDrawer() {
         leftDrawer.value = !leftDrawer.value;
@@ -14,6 +15,10 @@ export const useStateStore = defineStore('stateStore', () => {
         rightDrawer.value = !rightDrawer.value;
     }
 
+    function toggleSubToolbar() {
+        subToolbar.value = !subToolbar.value;
+    }
+
     function setMounted() {
         isMounted.value = true;
     }
@@ -31,10 +36,7 @@ export const useStateStore = defineStore('stateStore', () => {
     }
 
     function isSubToolbarShown() {
-        return (
-            !!document.querySelector('#st-data') &&
-            !!document.querySelector('#st-actions')
-        );
+        return subToolbar.value;
     }
 
     return {
@@ -47,5 +49,6 @@ export const useStateStore = defineStore('stateStore', () => {
         isLeftDrawerShown,
         isRightDrawerShown,
         isSubToolbarShown,
+        toggleSubToolbar,
     };
 });
diff --git a/test/vitest/__tests__/components/common/VnSms.spec.js b/test/vitest/__tests__/components/common/VnSms.spec.js
new file mode 100644
index 000000000..e0f8c1868
--- /dev/null
+++ b/test/vitest/__tests__/components/common/VnSms.spec.js
@@ -0,0 +1,25 @@
+import { vi, describe, expect, it, beforeAll, afterEach } from 'vitest';
+import { createWrapper, axios } from 'app/test/vitest/helper';
+import VnSms from 'src/components/ui/VnSms.vue';
+
+describe('VnSms', () => {
+    let vm;
+
+    beforeAll(() => {
+        vm = createWrapper(VnSms, {
+            global: {
+                stubs: ['VnPaginate'],
+                mocks: {},
+            },
+        }).vm;
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should format number correctly', () => {
+        const formattedNumber = vm.formatNumber('123456789012');
+        expect(formattedNumber).toBe('1234 56789012');
+    });
+});