diff --git a/src/components/common/VnCardBeta.vue b/src/components/common/VnCardBeta.vue
index 16a077a79..349956be9 100644
--- a/src/components/common/VnCardBeta.vue
+++ b/src/components/common/VnCardBeta.vue
@@ -5,6 +5,8 @@ import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import LeftMenu from 'components/LeftMenu.vue';
+import VnSubToolbar from '../ui/VnSubToolbar.vue';
+
 const props = defineProps({
     dataKey: { type: String, required: true },
     baseUrl: { type: String, default: undefined },
diff --git a/src/components/common/VnSectionMain.vue b/src/components/common/VnModule.vue
similarity index 100%
rename from src/components/common/VnSectionMain.vue
rename to src/components/common/VnModule.vue
diff --git a/src/components/common/VnCardMain.vue b/src/components/common/VnSection.vue
similarity index 100%
rename from src/components/common/VnCardMain.vue
rename to src/components/common/VnSection.vue
diff --git a/src/pages/Account/AccountAcls.vue b/src/pages/Account/AccountAcls.vue
index b457bb7f0..b4eeb0648 100644
--- a/src/pages/Account/AccountAcls.vue
+++ b/src/pages/Account/AccountAcls.vue
@@ -9,7 +9,7 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useValidator } from 'src/composables/useValidator';
-import VnCardMain from 'src/components/common/VnCardMain.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 defineProps({
     id: {
@@ -138,7 +138,7 @@ const deleteAcl = async ({ id }) => {
         auto-load
         @on-fetch="(data) => (roles = data)"
     />
-    <VnCardMain
+    <VnSection
         :data-key="dataKey"
         :columns="columns"
         prefix="acls"
@@ -166,7 +166,7 @@ const deleteAcl = async ({ id }) => {
                 :use-model="true"
             />
         </template>
-    </VnCardMain>
+    </VnSection>
 </template>
 
 <i18n>
diff --git a/src/pages/Account/AccountAliasList.vue b/src/pages/Account/AccountAliasList.vue
index 9631c9639..f6016fb6c 100644
--- a/src/pages/Account/AccountAliasList.vue
+++ b/src/pages/Account/AccountAliasList.vue
@@ -2,7 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { ref, computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnCardMain from 'src/components/common/VnCardMain.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const tableRef = ref();
 const { t } = useI18n();
@@ -43,7 +43,7 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <VnCardMain
+    <VnSection
         :data-key="dataKey"
         :columns="columns"
         prefix="mailAlias"
@@ -68,7 +68,7 @@ const exprBuilder = (param, value) => {
                 :right-search="false"
             />
         </template>
-    </VnCardMain>
+    </VnSection>
 </template>
 <i18n>
     es:
diff --git a/src/pages/Account/AccountList.vue b/src/pages/Account/AccountList.vue
index 5296cc1d6..997e31041 100644
--- a/src/pages/Account/AccountList.vue
+++ b/src/pages/Account/AccountList.vue
@@ -4,7 +4,7 @@ import { computed } from 'vue';
 import VnTable from 'components/VnTable/VnTable.vue';
 import AccountSummary from './Card/AccountSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import VnCardMain from 'src/components/common/VnCardMain.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -103,7 +103,7 @@ function exprBuilder(param, value) {
 </script>
 
 <template>
-    <VnCardMain
+    <VnSection
         :data-key="dataKey"
         :columns="columns"
         prefix="account"
@@ -124,7 +124,7 @@ function exprBuilder(param, value) {
                 :right-search="false"
             />
         </template>
-    </VnCardMain>
+    </VnSection>
 </template>
 
 <i18n>
diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 4e67a691b..3c3d6b243 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -5,7 +5,7 @@ import VnTable from 'components/VnTable/VnTable.vue';
 import { useRoute } from 'vue-router';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RoleSummary from './Card/RoleSummary.vue';
-import VnCardMain from 'src/components/common/VnCardMain.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -85,7 +85,7 @@ const exprBuilder = (param, value) => {
 </script>
 
 <template>
-    <VnCardMain
+    <VnSection
         :data-key="dataKey"
         :columns="columns"
         prefix="role"
@@ -110,7 +110,7 @@ const exprBuilder = (param, value) => {
                 :right-search="false"
             />
         </template>
-    </VnCardMain>
+    </VnSection>
 </template>
 
 <i18n>
diff --git a/src/pages/Ticket/Card/TicketBoxing.vue b/src/pages/Ticket/Card/TicketBoxing.vue
index 1a7287396..5675fe1b3 100644
--- a/src/pages/Ticket/Card/TicketBoxing.vue
+++ b/src/pages/Ticket/Card/TicketBoxing.vue
@@ -1,15 +1,18 @@
 <script setup>
 import axios from 'axios';
 import { date, useQuasar } from 'quasar';
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useStateStore } from 'stores/useStateStore';
 
 const router = useRouter();
+const stateStore = useStateStore();
 const { t } = useI18n();
 const quasar = useQuasar();
 
 onMounted(async () => {
+    stateStore.rightDrawer = true;
     await fetch();
 });
 
@@ -84,74 +87,69 @@ async function getVideoList(expeditionId, timed) {
 </script>
 
 <template>
-    <QDrawer show-if-above side="right">
-        <QScrollArea class="fit">
-            <QList bordered separator style="max-width: 318px">
-                <QItem v-if="lastExpedition && videoList.length">
-                    <QItemSection>
-                        <QItemLabel class="text-h6">
-                            {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{
-                                time.max
-                            }})
-                        </QItemLabel>
-                        <QRange
-                            v-model="time"
-                            @change="getVideoList(lastExpedition, time)"
-                            :min="0"
-                            :max="24"
-                            :step="1"
-                            :left-label-value="time.min + ':00'"
-                            :right-label-value="time.max + ':00'"
-                            label
-                            markers
-                            snap
-                            color="primary"
-                        />
-                    </QItemSection>
-                </QItem>
-                <QItem v-if="lastExpedition && videoList.length">
-                    <QItemSection>
-                        <QSelect
-                            color="primary"
-                            v-model="slide"
-                            :options="videoList"
-                            :label="t('ticket.boxing.selectVideo')"
-                            emit-value
-                            map-options
-                        >
-                            <template #prepend>
-                                <QIcon name="schedule" />
-                            </template>
-                        </QSelect>
-                    </QItemSection>
-                </QItem>
-                <QItem
-                    v-for="expedition in expeditions"
-                    :key="expedition.id"
-                    @click="getVideoList(expedition.id)"
-                    clickable
-                    v-ripple
-                >
-                    <QItemSection>
-                        <QItemLabel class="text-h6">#{{ expedition.id }}</QItemLabel>
-                    </QItemSection>
-                    <QItemSection>
-                        <QItemLabel caption>{{ t('globals.created') }}</QItemLabel>
-                        <QItemLabel>
-                            {{
-                                date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss')
-                            }}
-                        </QItemLabel>
-                        <QItemLabel caption>{{ t('globals.item') }}</QItemLabel>
-                        <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
-                        <QItemLabel caption>{{ t('ticket.boxing.worker') }}</QItemLabel>
-                        <QItemLabel>{{ expedition.userName }}</QItemLabel>
-                    </QItemSection>
-                </QItem>
-            </QList>
-        </QScrollArea>
-    </QDrawer>
-
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+        <QList bordered separator style="max-width: 318px">
+            <QItem v-if="lastExpedition && videoList.length">
+                <QItemSection>
+                    <QItemLabel class="text-h6">
+                        {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{
+                            time.max
+                        }})
+                    </QItemLabel>
+                    <QRange
+                        v-model="time"
+                        @change="getVideoList(lastExpedition, time)"
+                        :min="0"
+                        :max="24"
+                        :step="1"
+                        :left-label-value="time.min + ':00'"
+                        :right-label-value="time.max + ':00'"
+                        label
+                        markers
+                        snap
+                        color="primary"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem v-if="lastExpedition && videoList.length">
+                <QItemSection>
+                    <QSelect
+                        color="primary"
+                        v-model="slide"
+                        :options="videoList"
+                        :label="t('ticket.boxing.selectVideo')"
+                        emit-value
+                        map-options
+                    >
+                        <template #prepend>
+                            <QIcon name="schedule" />
+                        </template>
+                    </QSelect>
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-for="expedition in expeditions"
+                :key="expedition.id"
+                @click="getVideoList(expedition.id)"
+                clickable
+                v-ripple
+            >
+                <QItemSection>
+                    <QItemLabel class="text-h6">#{{ expedition.id }}</QItemLabel>
+                </QItemSection>
+                <QItemSection>
+                    <QItemLabel caption>{{ t('globals.created') }}</QItemLabel>
+                    <QItemLabel>
+                        {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
+                    </QItemLabel>
+                    <QItemLabel caption>{{ t('globals.item') }}</QItemLabel>
+                    <QItemLabel>{{ expedition.packagingItemFk }}</QItemLabel>
+                    <QItemLabel caption>{{ t('ticket.boxing.worker') }}</QItemLabel>
+                    <QItemLabel>{{ expedition.userName }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+        </QList>
+    </Teleport>
     <QCard>
         <QCarousel animated v-model="slide" height="max-content">
             <QCarouselSlide
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 6f5ca90f3..466db9539 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -28,7 +28,7 @@ export default {
         {
             path: '',
             name: 'AccountMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'AccountIndexMain' },
             children: [
                 {
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index b58a58e8d..8b0a70896 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -27,7 +27,7 @@ export default {
         {
             name: 'ClaimMain',
             path: '',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'ClaimList' },
             children: [
                 {
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 1b707f1a2..9e7f6fe70 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -39,7 +39,7 @@ export default {
         {
             path: '',
             name: 'CustomerMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'CustomerList' },
             children: [
                 {
diff --git a/src/router/modules/entry.js b/src/router/modules/entry.js
index 3add239df..26ce773c5 100644
--- a/src/router/modules/entry.js
+++ b/src/router/modules/entry.js
@@ -25,7 +25,7 @@ export default {
         {
             path: '',
             name: 'EntryMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'EntryList' },
             children: [
                 {
diff --git a/src/router/modules/invoiceIn.js b/src/router/modules/invoiceIn.js
index 168d64f37..788b27d37 100644
--- a/src/router/modules/invoiceIn.js
+++ b/src/router/modules/invoiceIn.js
@@ -25,7 +25,7 @@ export default {
         {
             path: '',
             name: 'InvoiceInMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'InvoiceInList' },
             children: [
                 {
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index 5e83b0859..53d27d0e8 100644
--- a/src/router/modules/invoiceOut.js
+++ b/src/router/modules/invoiceOut.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'InvoiceOutMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'InvoiceOutList' },
             children: [
                 {
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 0f810434c..e2afd6c7b 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -36,7 +36,7 @@ export default {
         {
             path: '',
             name: 'ItemMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'ItemList' },
             children: [
                 {
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index 2af60c09c..89ba4078f 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -19,7 +19,7 @@ export default {
         {
             path: '',
             name: 'MonitorMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             props: (route) => ({ leftDrawer: route.name === 'MonitorClientsActions' }),
             redirect: { name: 'MonitorTickets' },
             children: [
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index bfa37fce5..77af812cf 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -19,7 +19,7 @@ export default {
         {
             path: '',
             name: 'OrderMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'OrderList' },
             children: [
                 {
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index 9a7b16df3..a6c4f30a2 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -25,7 +25,7 @@ export default {
         {
             path: '/route',
             name: 'RouteMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'RouteList' },
             children: [
                 {
diff --git a/src/router/modules/shelving.js b/src/router/modules/shelving.js
index b7f50a3b6..dd254db69 100644
--- a/src/router/modules/shelving.js
+++ b/src/router/modules/shelving.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'ShelvingMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'ShelvingList' },
             children: [
                 {
diff --git a/src/router/modules/supplier.js b/src/router/modules/supplier.js
index c08fb5961..647f4bdd3 100644
--- a/src/router/modules/supplier.js
+++ b/src/router/modules/supplier.js
@@ -30,7 +30,7 @@ export default {
         {
             path: '',
             name: 'SupplierMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'SupplierList' },
             children: [
                 {
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index dff693d2f..49272be1e 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'TravelMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'TravelList' },
             children: [
                 {
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index e25e585eb..5c7e881c2 100644
--- a/src/router/modules/wagon.js
+++ b/src/router/modules/wagon.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '/wagon',
             name: 'WagonMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'WagonList' },
             children: [
                 {
@@ -62,7 +62,7 @@ export default {
         {
             path: '/wagon/type',
             name: 'WagonTypeMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'WagonTypeList' },
             children: [
                 {
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 925019734..c732664ec 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -35,7 +35,7 @@ export default {
         {
             path: '',
             name: 'WorkerMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'WorkerList' },
             children: [
                 {
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index c5ebe762e..334ba2b51 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -30,7 +30,7 @@ export default {
         {
             path: '/zone',
             name: 'ZoneMain',
-            component: () => import('src/components/common/VnSectionMain.vue'),
+            component: () => import('src/components/common/VnModule.vue'),
             redirect: { name: 'ZoneList' },
             children: [
                 {