diff --git a/src/pages/Account/AccountMain.vue b/src/components/common/VnSectionMain.vue
similarity index 69%
rename from src/pages/Account/AccountMain.vue
rename to src/components/common/VnSectionMain.vue
index f0dc2e500..0c1641ce1 100644
--- a/src/pages/Account/AccountMain.vue
+++ b/src/components/common/VnSectionMain.vue
@@ -1,8 +1,16 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import LeftMenu from 'components/LeftMenu.vue';
+import { onMounted } from 'vue';
 
 const stateStore = useStateStore();
+const $props = defineProps({
+    leftDrawer: {
+        type: Boolean,
+        default: true,
+    },
+});
+onMounted(() => (stateStore.leftDrawer = $props.leftDrawer));
 </script>
 
 <template>
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
deleted file mode 100644
index f0dc2e500..000000000
--- a/src/pages/Claim/ClaimMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
deleted file mode 100644
index f0dc2e500..000000000
--- a/src/pages/Customer/CustomerMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Entry/EntryMain.vue b/src/pages/Entry/EntryMain.vue
deleted file mode 100644
index c1f2a31db..000000000
--- a/src/pages/Entry/EntryMain.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/InvoiceIn/InvoiceInMain.vue b/src/pages/InvoiceIn/InvoiceInMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/InvoiceIn/InvoiceInMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/InvoiceOut/InvoiceOutMain.vue b/src/pages/InvoiceOut/InvoiceOutMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/InvoiceOut/InvoiceOutMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Item/ItemMain.vue b/src/pages/Item/ItemMain.vue
deleted file mode 100644
index c1f2a31db..000000000
--- a/src/pages/Item/ItemMain.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Monitor/MonitorMain.vue b/src/pages/Monitor/MonitorMain.vue
deleted file mode 100644
index c1f2a31db..000000000
--- a/src/pages/Monitor/MonitorMain.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-import { useStateStore } from 'stores/useStateStore';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Order/OrderMain.vue b/src/pages/Order/OrderMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Order/OrderMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Route/RouteMain.vue b/src/pages/Route/RouteMain.vue
deleted file mode 100644
index aace646fb..000000000
--- a/src/pages/Route/RouteMain.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-import { onMounted } from 'vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-const stateStore = useStateStore();
-onMounted(() => (stateStore.leftDrawer = false));
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Shelving/ShelvingMain.vue b/src/pages/Shelving/ShelvingMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Shelving/ShelvingMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Supplier/SupplierMain.vue b/src/pages/Supplier/SupplierMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Supplier/SupplierMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
deleted file mode 100644
index f0dc2e500..000000000
--- a/src/pages/Ticket/TicketMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Travel/TravelMain.vue b/src/pages/Travel/TravelMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Travel/TravelMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Wagon/WagonMain.vue b/src/pages/Wagon/WagonMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Wagon/WagonMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Worker/WorkerMain.vue b/src/pages/Worker/WorkerMain.vue
deleted file mode 100644
index 66ce78f23..000000000
--- a/src/pages/Worker/WorkerMain.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup>
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-
-const stateStore = useStateStore();
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
-</template>
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index f92ee1e4e..59049a5b3 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -2,9 +2,9 @@
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { computed } from 'vue';
-
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
+import ZoneSearchbar from './ZoneSearchbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -33,5 +33,9 @@ const searchBarDataKeys = {
         :search-make-fetch="searchbarMakeFetch"
         :searchbar-label="t('list.searchZone')"
         :searchbar-info="t('list.searchInfo')"
-    />
+    >
+        <template #searchbar>
+            <ZoneSearchbar />
+        </template>
+    </VnCard>
 </template>
diff --git a/src/pages/Zone/ZoneMain.vue b/src/pages/Zone/Card/ZoneSearchbar.vue
similarity index 71%
rename from src/pages/Zone/ZoneMain.vue
rename to src/pages/Zone/Card/ZoneSearchbar.vue
index 68ff9a5d1..607057d0b 100644
--- a/src/pages/Zone/ZoneMain.vue
+++ b/src/pages/Zone/Card/ZoneSearchbar.vue
@@ -1,11 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
-import LeftMenu from 'src/components/LeftMenu.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 
 const exprBuilder = (param, value) => {
     switch (param) {
@@ -49,12 +46,4 @@ const exprBuilder = (param, value) => {
         :info="t('list.searchInfo')"
         custom-route-redirect-name="ZoneSummary"
     />
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit text-grey-8">
-            <LeftMenu />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <RouterView></RouterView>
-    </QPageContainer>
 </template>
diff --git a/src/pages/Zone/ZoneDeliveryDays.vue b/src/pages/Zone/ZoneDeliveryDays.vue
index ddde3f6b3..d95c64d8b 100644
--- a/src/pages/Zone/ZoneDeliveryDays.vue
+++ b/src/pages/Zone/ZoneDeliveryDays.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import ZoneDeliveryPanel from './ZoneDeliveryPanel.vue';
 import ZoneCalendarGrid from './ZoneCalendarGrid.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const firstDay = ref(null);
 const lastDay = ref(null);
@@ -10,6 +11,7 @@ const events = ref([]);
 </script>
 
 <template>
+    <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
             <ZoneDeliveryPanel />
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index 0932a0b57..0272292f6 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -15,6 +15,7 @@ import { useStateStore } from 'stores/useStateStore';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import ZoneFilterPanel from './ZoneFilterPanel.vue';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -87,6 +88,7 @@ onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
+    <ZoneSearchbar />
     <RightMenu>
         <template #right-panel>
             <ZoneFilterPanel data-key="ZoneList" :expr-builder="exprBuilder" />
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
index be7b12534..ecf82bf4f 100644
--- a/src/pages/Zone/ZoneUpcoming.vue
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -7,6 +7,7 @@ import FetchData from 'components/FetchData.vue';
 
 import { toDateFormat } from 'src/filters/date.js';
 import { useWeekdayStore } from 'src/stores/useWeekdayStore';
+import ZoneSearchbar from './Card/ZoneSearchbar.vue';
 
 const { t } = useI18n();
 const weekdayStore = useWeekdayStore();
@@ -52,6 +53,7 @@ onMounted(() => weekdayStore.initStore());
         @on-fetch="(data) => (details = data)"
         auto-load
     />
+    <ZoneSearchbar />
     <VnSubToolbar />
     <QPage class="column items-center q-pa-md">
         <QCard class="full-width q-pa-md">
diff --git a/src/router/modules/Supplier.js b/src/router/modules/Supplier.js
index da45aad2f..b711066b2 100644
--- a/src/router/modules/Supplier.js
+++ b/src/router/modules/Supplier.js
@@ -29,7 +29,7 @@ export default {
         {
             path: '',
             name: 'SupplierMain',
-            component: () => import('src/pages/Supplier/SupplierMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'SupplierList' },
             children: [
                 {
diff --git a/src/router/modules/account.js b/src/router/modules/account.js
index 6f3f8c25b..3faa00fbc 100644
--- a/src/router/modules/account.js
+++ b/src/router/modules/account.js
@@ -34,7 +34,7 @@ export default {
         {
             path: '',
             name: 'AccountMain',
-            component: () => import('src/pages/Account/AccountMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'AccountList' },
             children: [
                 {
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 65c714418..cced9e24d 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -26,7 +26,7 @@ export default {
         {
             name: 'ClaimMain',
             path: '',
-            component: () => import('src/pages/Claim/ClaimMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ClaimList' },
             children: [
                 {
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 9e3b39479..d9d047433 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -38,7 +38,7 @@ export default {
         {
             path: '',
             name: 'CustomerMain',
-            component: () => import('src/pages/Customer/CustomerMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'CustomerList' },
             children: [
                 {
diff --git a/src/router/modules/entry.js b/src/router/modules/entry.js
index 4f5f05231..0d38ed626 100644
--- a/src/router/modules/entry.js
+++ b/src/router/modules/entry.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'EntryMain',
-            component: () => import('src/pages/Entry/EntryMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'EntryList' },
             children: [
                 {
diff --git a/src/router/modules/invoiceIn.js b/src/router/modules/invoiceIn.js
index 75d0612aa..cd8f7de9c 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/pages/InvoiceIn/InvoiceInMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'InvoiceInList' },
             children: [
                 {
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index aac84573c..5e83b0859 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/pages/InvoiceOut/InvoiceOutMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'InvoiceOutList' },
             children: [
                 {
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index 06fe680eb..4bd5df4e2 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -35,7 +35,7 @@ export default {
         {
             path: '',
             name: 'ItemMain',
-            component: () => import('src/pages/Item/ItemMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ItemList' },
             children: [
                 {
diff --git a/src/router/modules/monitor.js b/src/router/modules/monitor.js
index 6c388a474..f0db8d3f3 100644
--- a/src/router/modules/monitor.js
+++ b/src/router/modules/monitor.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'MonitorMain',
-            component: () => import('src/pages/Monitor/MonitorMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'MonitorList' },
             children: [
                 {
diff --git a/src/router/modules/order.js b/src/router/modules/order.js
index aa1ca774d..a2b874cc6 100644
--- a/src/router/modules/order.js
+++ b/src/router/modules/order.js
@@ -18,7 +18,7 @@ export default {
         {
             path: '',
             name: 'OrderMain',
-            component: () => import('src/pages/Order/OrderMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'OrderList' },
             children: [
                 {
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
index f6f92b7d9..3c5c860cf 100644
--- a/src/router/modules/route.js
+++ b/src/router/modules/route.js
@@ -18,7 +18,10 @@ export default {
         {
             path: '/route',
             name: 'RouteMain',
-            component: () => import('src/pages/Route/RouteMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
+            props: {
+                leftDrawer: false,
+            },
             redirect: { name: 'RouteList' },
             children: [
                 {
diff --git a/src/router/modules/shelving.js b/src/router/modules/shelving.js
index d20ce40f4..70145dfb4 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/pages/Shelving/ShelvingMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ShelvingList' },
             children: [
                 {
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index c507553d6..4074f089f 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -35,7 +35,7 @@ export default {
         {
             name: 'TicketMain',
             path: '',
-            component: () => import('src/pages/Ticket/TicketMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'TicketList' },
             children: [
                 {
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index e1a08e9de..627692be8 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/pages/Travel/TravelMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'TravelList' },
             children: [
                 {
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
index 6f9a4c819..d3d14a888 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/pages/Wagon/WagonMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'WagonList' },
             children: [
                 {
@@ -62,7 +62,7 @@ export default {
         {
             path: '/wagon/type',
             name: 'WagonTypeMain',
-            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'WagonTypeList' },
             children: [
                 {
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index fc0bf6afe..f80df5e06 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -31,7 +31,7 @@ export default {
         {
             path: '',
             name: 'WorkerMain',
-            component: () => import('src/pages/Worker/WorkerMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'WorkerList' },
             children: [
                 {
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index fd6fa959b..889b47464 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -29,7 +29,7 @@ export default {
         {
             path: '/zone',
             name: 'ZoneMain',
-            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            component: () => import('src/components/common/VnSectionMain.vue'),
             redirect: { name: 'ZoneList' },
             children: [
                 {
diff --git a/test/cypress/integration/zone/zoneDeliveryDays.spec.js b/test/cypress/integration/zone/zoneDeliveryDays.spec.js
new file mode 100644
index 000000000..1e1fc8ff5
--- /dev/null
+++ b/test/cypress/integration/zone/zoneDeliveryDays.spec.js
@@ -0,0 +1,15 @@
+describe('ZoneDeliveryDays', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 1080);
+        cy.visit(`/#/zone/delivery-days`);
+    });
+
+    it('should query for the day', () => {
+        cy.get('.q-form > .q-btn > .q-btn__content').click();
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'No service for the specified zone'
+        );
+    });
+});
diff --git a/test/cypress/integration/zone/zoneList.spec.js b/test/cypress/integration/zone/zoneList.spec.js
new file mode 100644
index 000000000..f35da7e5f
--- /dev/null
+++ b/test/cypress/integration/zone/zoneList.spec.js
@@ -0,0 +1,15 @@
+describe('ZoneList', () => {
+    beforeEach(() => {
+        cy.viewport(1920, 1080);
+        cy.login('developer');
+        cy.visit(`/#/zone/list`);
+    });
+
+    it('should open the details', () => {
+        cy.get(':nth-child(1) > .text-right > .material-symbols-outlined').click();
+    });
+    it('should redirect to summary', () => {
+        cy.waitForElement('.q-page');
+        cy.get('tbody > :nth-child(1)').click();
+    });
+});
diff --git a/test/cypress/integration/zone/zoneUpcomingDeliveries.spec.js b/test/cypress/integration/zone/zoneUpcomingDeliveries.spec.js
new file mode 100644
index 000000000..28e2222d4
--- /dev/null
+++ b/test/cypress/integration/zone/zoneUpcomingDeliveries.spec.js
@@ -0,0 +1,9 @@
+describe('ZoneUpcomingDeliveries', () => {
+    beforeEach(() => {
+        cy.login('developer');
+        cy.viewport(1920, 1080);
+        cy.visit(`/#/zone/upcoming-deliveries`);
+    });
+
+    it('should show the page', () => {});
+});