diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index d8fb231f0..b8ddbef3d 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1238,6 +1238,8 @@ zone:
     pageTitles:
         zones: Zone
         zonesList: Zones
+        zoneCreate: New zone
+        locations: Locations
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
 components:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 67e075935..7489a4747 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1237,6 +1237,8 @@ zone:
     pageTitles:
         zones: Zona
         zonesList: Zonas
+        zoneCreate: Nueva zona
+        locations: Localizaciones
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
 components:
diff --git a/src/pages/Zone/Card/ZoneSummary.vue b/src/pages/Zone/Card/ZoneSummary.vue
index 00df03cb0..7e49da7cc 100644
--- a/src/pages/Zone/Card/ZoneSummary.vue
+++ b/src/pages/Zone/Card/ZoneSummary.vue
@@ -50,10 +50,10 @@ const filter = computed(() => {
                 />
                 <VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
                 <VnLv
-                    :label="t('zone.list.department')"
+                    :label="t('list.department')"
                     :value="zone.department?.department?.name"
                 />
-                <VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
+                <VnLv :label="t('list.email')" :value="zone.user.email" copy />
                 <VnLv :label="t('zone.summary.boss')" link>
                     <template #value>
                         <VnUserLink
diff --git a/src/pages/Zone/Delivery/ZoneDeliveryList.vue b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
index 695388a9b..ca87dbd84 100644
--- a/src/pages/Zone/Delivery/ZoneDeliveryList.vue
+++ b/src/pages/Zone/Delivery/ZoneDeliveryList.vue
@@ -63,7 +63,7 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
diff --git a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
index 2d3016f25..89e53132e 100644
--- a/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
+++ b/src/pages/Zone/Upcoming/ZoneUpcomingList.vue
@@ -63,7 +63,7 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.remove')"
+                                :label="t('list.remove')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
diff --git a/src/pages/Zone/ZoneCreate.vue b/src/pages/Zone/ZoneCreate.vue
index 93ea9589b..8aa72f0d1 100644
--- a/src/pages/Zone/ZoneCreate.vue
+++ b/src/pages/Zone/ZoneCreate.vue
@@ -1,184 +1,113 @@
 <script setup>
-import { computed, onMounted, onUpdated, ref } from 'vue';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+import { useRouter } from 'vue-router';
 
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-
-import { useRoute, useRouter } from 'vue-router';
-import axios from 'axios';
-
-onMounted(() => fetch());
-onUpdated(() => fetch());
+import VnInputTime from 'components/common/VnInputTime.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
-const route = useRoute();
 const router = useRouter();
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: false,
-        default: null,
-    },
+
+const newZoneForm = reactive({
+    travelingDays: 0,
+    price: 0.2,
+    bonus: 0.2,
+    hour: Date.vnNew(),
 });
-const entityId = computed(() => $props.id || route.params.id);
+const warehousesOptions = ref([]);
+const agencyOptions = ref([]);
 
-let zoneTypes = [];
-let originalData = {};
-const zone = ref({});
-const filteredZoneTypes = ref(zoneTypes);
-
-async function onSubmit() {
-    try {
-        const params = {
-            id: entityId.value,
-            label: zone.value.label,
-            plate: zone.value.plate,
-            volume: zone.value.volume,
-            typeFk: zone.value.typeFk,
-        };
-        await axios.patch('Zones', params).then((res) => {
-            if (res.status == 200) router.push({ path: `/zone/list` });
-        });
-    } catch (error) {
-        //
-    }
-}
-
-async function onReset() {
-    if (entityId.value) {
-        zone.value = { ...originalData };
-    } else {
-        zone.value = {};
-    }
-}
-
-async function fetch() {
-    try {
-        await axios.get('ZoneTypes').then(async (res) => {
-            if (res.data) {
-                filteredZoneTypes.value = zoneTypes = res.data;
-            }
-        });
-        if (entityId.value) {
-            await axios.get(`Zones/${entityId.value}`).then(async (res) => {
-                const data = res.data;
-                if (data) {
-                    zone.value.label = data.label;
-                    zone.value.plate = data.plate;
-                    zone.value.volume = data.volume;
-                    zone.value.typeFk = data.typeFk;
-                    originalData = { ...zone.value };
-                }
-            });
-        }
-    } catch (e) {
-        //
-    }
-}
-
-function filterType(val, update) {
-    update(() => {
-        const needle = val.toLowerCase();
-        filteredZoneTypes.value = zoneTypes.filter(
-            (v) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-    });
-}
+const redirectToZoneLocations = (_, { id }) => {
+    router.push({ name: 'ZoneLocations', params: { id } });
+};
 </script>
 
 <template>
-    <QPage class="q-pa-sm q-mx-xl">
-        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
-            <QCard class="q-pa-md">
-                <div class="row q-col-gutter-md">
-                    <div class="col">
-                        <QInput
-                            filled
-                            v-model="zone.label"
-                            :label="t('zone.create.name')"
-                            type="number"
-                            min="0"
-                            :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
-                        />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            filled
-                            v-model="zone.plate"
-                            :label="t('zone.create.agency')"
-                            :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
-                        />
-                    </div>
-                </div>
-                <div class="row q-col-gutter-md">
-                    <div class="col">
-                        <QInput
-                            filled
-                            v-model="zone.volume"
-                            :label="t('zone.create.close')"
-                            type="number"
-                            min="0"
-                            :rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
-                        />
-                    </div>
-                    <div class="col">
-                        <QSelect
-                            filled
-                            v-model="zone.typeFk"
-                            use-input
-                            fill-input
-                            hide-selected
-                            input-debounce="0"
-                            option-label="name"
-                            option-value="id"
-                            emit-value
-                            map-options
-                            :label="t('zone.create.price')"
-                            :options="filteredZoneTypes"
-                            :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
-                            @filter="filterType"
-                        >
-                            <template v-if="zone.typeFk" #append>
-                                <QIcon
-                                    name="cancel"
-                                    @click.stop.prevent="zone.typeFk = null"
-                                    class="cursor-pointer"
-                                />
-                            </template>
-                            <template #no-option>
-                                <QItem>
-                                    <QItemSection class="text-grey">
-                                        {{ t('zone.warnings.noData') }}
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </QSelect>
-                    </div>
-                </div>
-            </QCard>
-            <div class="q-mt-md">
-                <QBtn :label="t('zone.type.submit')" type="submit" color="primary" />
-                <QBtn
-                    :label="t('zone.type.reset')"
-                    type="reset"
-                    color="primary"
-                    flat
-                    class="q-ml-sm"
-                />
-            </div>
-        </QForm>
+    <FetchData
+        url="Warehouses"
+        :filter="{ order: ['name'] }"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="AgencyModes/isActive"
+        :filter="{ order: ['name'] }"
+        @on-fetch="(data) => (agencyOptions = data)"
+        auto-load
+    />
+    <QPage>
+        <VnSubToolbar />
+        <FormModel
+            url-create="Zones"
+            model="Zones"
+            :form-initial-data="newZoneForm"
+            @on-data-saved="redirectToZoneLocations"
+        >
+            <template #form="{ data }">
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('create.name')"
+                        :required="true"
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnSelect
+                        :label="t('create.warehouse')"
+                        :options="warehousesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.warehouseFk"
+                    />
+                    <VnSelect
+                        :label="t('create.agency')"
+                        :options="agencyOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.agencyModeFk"
+                        :required="true"
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        v-model="data.travelingDays"
+                        :label="t('create.travelingDays')"
+                        type="number"
+                        min="0"
+                    />
+
+                    <VnInputTime v-model="data.hour" :label="t('create.closingHour')" />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <VnInput
+                        v-model="data.price"
+                        :label="t('create.price')"
+                        type="number"
+                        min="0"
+                    />
+                    <VnInput
+                        v-model="data.bonus"
+                        :label="t('create.bonus')"
+                        type="number"
+                        min="0"
+                    />
+                </VnRow>
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <QCheckbox
+                        :label="t('create.volumetric')"
+                        v-model="data.isVolumetric"
+                        :toggle-indeterminate="false"
+                    />
+                </VnRow>
+            </template>
+        </FormModel>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.q-page {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-}
-
-.q-form {
-    width: 70%;
-}
-</style>
diff --git a/src/pages/Zone/ZoneList.vue b/src/pages/Zone/ZoneList.vue
index f260eb134..79273b198 100644
--- a/src/pages/Zone/ZoneList.vue
+++ b/src/pages/Zone/ZoneList.vue
@@ -30,7 +30,7 @@ async function remove(row) {
     try {
         await axios.delete(`Zones/${row.id}`).then(async () => {
             quasar.notify({
-                message: t('zone.list.removeItem'),
+                message: t('list.removeItem'),
                 type: 'positive',
             });
             store.data.splice(store.data.indexOf(row), 1);
@@ -61,23 +61,23 @@ async function remove(row) {
                     >
                         <template #list-items>
                             <VnLv
-                                :label="t('zone.list.id')"
-                                :title-label="t('zone.list.id')"
+                                :label="t('list.id')"
+                                :title-label="t('list.id')"
                                 :value="row.id"
                             />
-                            <VnLv :label="t('zone.list.name')" :value="row?.name" />
+                            <VnLv :label="t('list.name')" :value="row?.name" />
                             <VnLv
-                                :label="t('zone.list.agency')"
+                                :label="t('list.agency')"
                                 :options="agencyOptions"
                                 option-value="id"
                                 option-label="name"
                                 :value="row?.agencyFk"
                             />
                             <VnLv
-                                :label="t('zone.list.close')"
+                                :label="t('list.close')"
                                 :value="toTimeFormat(row?.hour)"
                             />
-                            <VnLv :label="t('zone.list.price')" :value="row?.price" />
+                            <VnLv :label="t('list.price')" :value="row?.price" />
                         </template>
                         <template #actions>
                             <QBtn
@@ -86,14 +86,14 @@ async function remove(row) {
                                 outline
                             />
                             <QBtn
-                                :label="t('zone.list.openSummary')"
+                                :label="t('list.openSummary')"
                                 @click.stop="viewSummary(row.id, ZoneSummary)"
                                 color="primary"
                                 style="margin-top: 15px"
                             />
                             <!--AQUI PONER BOTÓN CLONAR-->
                             <QBtn
-                                :label="t('zone.list.clone')"
+                                :label="t('list.clone')"
                                 @click.stop="remove(row)"
                                 color="primary"
                                 style="margin-top: 15px"
@@ -105,7 +105,7 @@ async function remove(row) {
         </div>
         <QPageSticky position="bottom-right" :offset="[18, 18]">
             <QBtn @click="create" fab icon="add" color="primary">
-                <QTooltip>{{ t('zone.list.create') }}</QTooltip>
+                <QTooltip>{{ t('list.create') }}</QTooltip>
             </QBtn>
         </QPageSticky>
     </QPage>
diff --git a/src/pages/Zone/locale/en.yml b/src/pages/Zone/locale/en.yml
index e62111d57..68227253c 100644
--- a/src/pages/Zone/locale/en.yml
+++ b/src/pages/Zone/locale/en.yml
@@ -1,19 +1,22 @@
-zone:
-    list:
-        volume: Volume
-        clone: Clone
-        id: Id
-        name: Name
-        agency: Agency
-        close: Close
-        price: Price
-        create: Create zone
-        openSummary: Details
-    create:
-        name: Name
-        agency: Agency
-        close: Close
-        price: Price
-    type:
-        submit: Save
-        reset: Reset
+list:
+    volume: Volume
+    clone: Clone
+    id: Id
+    name: Name
+    agency: Agency
+    close: Close
+    price: Price
+    create: Create zone
+    openSummary: Details
+create:
+    name: Name
+    warehouse: Warehouse
+    agency: Agency
+    travelingDays: Traveling days
+    closingHour: Closing hour
+    price: Price
+    bonus: Bonus
+    volumetric: Volumetric
+type:
+    submit: Save
+    reset: Reset
diff --git a/src/pages/Zone/locale/es.yml b/src/pages/Zone/locale/es.yml
index 5d7a265bf..6db837145 100644
--- a/src/pages/Zone/locale/es.yml
+++ b/src/pages/Zone/locale/es.yml
@@ -1,19 +1,22 @@
-zone:
-    list:
-        volume: Volumen
-        clone: Clonar
-        id: Id
-        name: Nombre
-        agency: Agencia
-        close: Cierre
-        price: Precio
-        create: Crear zona
-        openSummary: Detalles
-    create:
-        name: Nombre
-        agency: Agencia
-        close: Cierre
-        price: Precio
-    type:
-        submit: Guardar
-        reset: Reiniciar
+list:
+    volume: Volumen
+    clone: Clonar
+    id: Id
+    name: Nombre
+    agency: Agencia
+    close: Cierre
+    price: Precio
+    create: Crear zona
+    openSummary: Detalles
+create:
+    name: Nombre
+    warehouse: Almacén
+    agency: Agencia
+    travelingDays: Días de viaje
+    closingHour: Hora de cierre
+    price: Precio
+    bonus: Bonificación
+    volumetric: Volumétrico
+type:
+    submit: Guardar
+    reset: Reiniciar
diff --git a/src/router/modules/zone.js b/src/router/modules/zone.js
index 079dfaa84..ecf750bdc 100644
--- a/src/router/modules/zone.js
+++ b/src/router/modules/zone.js
@@ -11,58 +11,54 @@ export default {
     component: RouterView,
     redirect: { name: 'ZoneMain' },
     menus: {
-        main: [
-            /*'ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'*/
-        ],
-        card: [
-            //
-        ],
+        main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
+        card: ['ZoneLocations'],
     },
     children: [
-        // {
-        // path: '/zone',
-        // name: 'ZoneMain',
-        // component: () => import('src/pages/Zone/ZoneMain.vue'),
-        // redirect: { name: 'ZoneList' },
-        // children: [
-        //     {
-        //         path: 'list',
-        //         name: 'ZoneList',
-        //         meta: {
-        //             title: 'zonesList',
-        //             icon: 'vn:zone',
-        //         },
-        //         component: () => import('src/pages/Zone/ZoneList.vue'),
-        //     },
-        // {
-        //     path: 'create',
-        //     name: 'ZoneCreate',
-        //     meta: {
-        //         title: 'zoneCreate',
-        //         icon: 'create',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCreate.vue'),
-        // },
-        // {
-        //     path: ':id/edit',
-        //     name: 'ZoneEdit',
-        //     meta: {
-        //         title: 'zoneEdit',
-        //         icon: 'edit',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCreate.vue'),
-        // },
-        // {
-        //     path: 'counter',
-        //     name: 'ZoneCounter',
-        //     meta: {
-        //         title: 'zoneCounter',
-        //         icon: 'add_circle',
-        //     },
-        //     component: () => import('src/pages/Zone/ZoneCounter.vue'),
-        // },
-        // ],
-        // },
+        {
+            path: '/zone',
+            name: 'ZoneMain',
+            component: () => import('src/pages/Zone/ZoneMain.vue'),
+            redirect: { name: 'ZoneList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'ZoneList',
+                    meta: {
+                        title: 'zonesList',
+                        icon: 'vn:zone',
+                    },
+                    component: () => import('src/pages/Zone/ZoneList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'ZoneCreate',
+                    meta: {
+                        title: 'zoneCreate',
+                        icon: 'create',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: ':id/edit',
+                    name: 'ZoneEdit',
+                    meta: {
+                        title: 'zoneEdit',
+                        icon: 'edit',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCreate.vue'),
+                },
+                {
+                    path: 'counter',
+                    name: 'ZoneCounter',
+                    meta: {
+                        title: 'zoneCounter',
+                        icon: 'add_circle',
+                    },
+                    component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                },
+            ],
+        },
         {
             name: 'ZoneCard',
             path: ':id',
@@ -78,6 +74,16 @@ export default {
                     },
                     component: () => import('src/pages/Zone/Card/ZoneSummary.vue'),
                 },
+                {
+                    name: 'ZoneLocations',
+                    path: 'location',
+                    meta: {
+                        title: 'locations',
+                        icon: 'vn:greuge',
+                    },
+                    component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
+                },
+
                 // {
                 //     path: '/zone/delivery',
                 //     name: 'ZoneDeliveryMain',