diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 57a5e2c04..2d75ccb22 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -41,16 +41,13 @@ async function search() {
     });
     if (!props.redirect) return;
 
-    const moduleRoute = route.matched[1];
-    console.log(moduleRoute);
-
     const rows = store.data;
+    const module = route.matched[1];
     if (rows.length === 1) {
-        const firstRow = rows[0];
-        const stateName = `${moduleRoute.name}Card`;
-        await router.push({ name: stateName, params: { id: firstRow.id } });
+        const [firstRow] = rows;
+        await router.push({ path: `/${module.name}/${firstRow.id}` });
     } else if (route.matched.length > 3) {
-        await router.push({ name: moduleRoute.name });
+        await router.push({ path: `/${module.name}` });
         arrayData.updateStateParams();
     }
 }
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index b8954702a..c251a2915 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -25,13 +25,8 @@ export function useArrayData(key, userOptions) {
         if (userOptions.url) store.url = userOptions.url;
         if (userOptions.limit) store.limit = userOptions.limit;
         if (userOptions.order) store.order = userOptions.order;
-        //Object.assign(store.value, userOptions);
-        //console.log(options.value);
     }
 
-    // if (typeof userOptions === 'object' && userOptions.filter) {
-    //     Object.assign(filter.value, userOptions.filter);
-    // }
     onMounted(() => {
         const query = route.query;
         if (query.params) {
@@ -91,6 +86,12 @@ export function useArrayData(key, userOptions) {
         canceller = null;
     }
 
+    function clear() {
+        if (arrayDataStore.get(key)) {
+            arrayDataStore.clear(key);
+        }
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -98,23 +99,6 @@ export function useArrayData(key, userOptions) {
         }
     }
 
-    // async function request({ userFilter }) {
-    //     if (!store.url) return;
-
-    //     const filter = {
-    //         order: store.order,
-    //         limit: store.limit,
-    //         skip: store.skip,
-    //     };
-
-    //     Object.assign(filter, userFilter);
-
-    //     const requestOptions = { params: { filter: filter } };
-    //     const response = await axios.get(store.url, requestOptions);
-
-    //     return response.data;
-    // }
-
     async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         if (params) store.userParams = Object.assign({}, params);
@@ -161,6 +145,7 @@ export function useArrayData(key, userOptions) {
         applyFilter,
         addFilter,
         refresh,
+        clear,
         loadMore,
         store,
         hasMoreData,
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index df6faf323..19be5756d 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,11 +1,18 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'composables/useState';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
 const state = useState();
+const { t } = useI18n();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <claim-descriptor />
@@ -18,4 +25,9 @@ const state = useState();
             <router-view></router-view>
         </q-page>
     </q-page-container>
-</template>
\ No newline at end of file
+</template>
+
+<i18n>
+es:
+    Search by claim id or name: Buscar por id o nombre de la reclamación
+</i18n>
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
deleted file mode 100644
index a64ee7367..000000000
--- a/src/pages/Claim/ClaimFilter.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<script setup>
-// import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import FetchData from 'components/FetchData.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-
-const { t } = useI18n();
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-});
-</script>
-
-<template>
-    <fetch-data
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="setWorkers"
-        auto-load
-    />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
-        <template #tags="{ tag }">
-            <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
-                <span>"{{ tag.value }}"</span>
-            </div>
-        </template>
-        <template #body="{ params, searchFn }">
-            <q-list>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <q-icon name="badge" size="sm"></q-icon>
-                            </template>
-                        </q-input>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input :label="t('Name')" v-model="params.name" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section>
-                        <q-input
-                            :label="t('Social Name')"
-                            v-model="params.socialName"
-                            lazy-rules
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!workers">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="workers">
-                        <q-select
-                            @update:model-value="searchFn()"
-                            :label="t('Salesperson')"
-                            v-model="params.salesPersonFk"
-                            :options="workers"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                            use-input
-                            :input-debounce="0"
-                        >
-                            <template #prepend>
-                                <q-avatar color="orange" size="xs">
-                                    <q-img
-                                        v-if="params.salesPersonFk"
-                                        :src="`/api/Images/user/160x160/${params.salesPersonFk}/download?access_token=${token}`"
-                                        spinner-color="white"
-                                    />
-                                </q-avatar>
-                            </template>
-                        </q-select>
-                    </q-item-section>
-                </q-item>
-                <q-item>
-                    <q-item-section v-if="!provinces">
-                        <q-skeleton type="QInput" class="full-width" />
-                    </q-item-section>
-                    <q-item-section v-if="provinces">
-                        <q-select
-                            @update:model-value="searchFn()"
-                            :label="t('Province')"
-                            v-model="params.provinceFk"
-                            :options="provinces"
-                            option-value="id"
-                            option-label="name"
-                            emit-value
-                            map-options
-                        />
-                    </q-item-section>
-                </q-item>
-                <q-item class="q-mb-md">
-                    <q-item-section>
-                        <q-input :label="t('City')" v-model="params.city" lazy-rules />
-                    </q-item-section>
-                </q-item>
-                <q-separator />
-                <q-expansion-item :label="t('More options')" expand-separator>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Phone')"
-                                v-model="params.phone"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="phone" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Email')"
-                                v-model="params.email"
-                                lazy-rules
-                            >
-                                <template #prepend>
-                                    <q-icon name="email" size="sm"></q-icon>
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section v-if="!zones">
-                            <q-skeleton type="QInput" class="full-width" />
-                        </q-item-section>
-                        <q-item-section v-if="zones">
-                            <q-select
-                                @update:model-value="searchFn"
-                                :label="t('Zone')"
-                                v-model="params.zoneFk"
-                                :options="zones"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </q-item-section>
-                    </q-item>
-                    <q-item>
-                        <q-item-section>
-                            <q-input
-                                :label="t('Postcode')"
-                                v-model="params.postcode"
-                                lazy-rules
-                            />
-                        </q-item-section>
-                    </q-item>
-                </q-expansion-item>
-            </q-list>
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-en:
-  params:
-    fi: FI
-    name: Name
-    socialName: Social Name
-    salesPersonFk: Salesperson
-    provinceFk: Province
-    city: City
-    phone: Phone
-    email: Email
-    zoneFk: Zone
-    postcode: Postcode
-es:
-  params:
-    fi: NIF
-    name: Nombre
-    socialName: Razón Social
-    salesPersonFk: Comercial
-    provinceFk: Provincia
-    city: Ciudad
-    phone: Teléfono
-    email: Email
-    zoneFk: Zona
-    postcode: CP
-  FI: NIF
-  Name: Nombre
-  Social Name: Razón social
-  Salesperson: Comercial
-  Province: Provincia
-  City: Ciudad
-  More options: Más opciones
-  Phone: Teléfono
-  Email: Email
-  Zone: Zona
-  Postcode: Código postal
-</i18n>
-
-<!-- <i18n>
-{
-    "en": {
-        "fi": "Fiscal ID",
-        "name": "Name",
-        "socialName": "Social Name",
-        "salesPersonFk": "Salesperson",
-        "provinceFk": "Province",
-        "city": "City",
-        "zoneFk": "Zone",
-        "postcode": "Postcode"
-    },
-    "es": {
-        "fi": "NIF",
-        "name": "Nombre",
-        "socialName": "Razón social",
-        "salesPersonFk": "Comercial"
-    }
-}
-</i18n> -->
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index 4373b0354..6001e02d0 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -1,31 +1,24 @@
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters/index';
 
 import Paginate from 'src/components/PaginateData.vue';
 import ClaimSummaryDialog from './Card/ClaimSummaryDialog.vue';
 import CustomerDescriptorPopover from 'src/pages/Customer/Card/CustomerDescriptorPopover.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import TeleportSlot from 'components/ui/TeleportSlot.vue';
-import ClaimFilter from './ClaimFilter.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 
-const state = useStateStore();
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
 
-onMounted(() => state.toggleRightDrawer());
-onUnmounted(() => state.toggleRightDrawer());
-
-// function stateColor(code) {
-//     if (code === 'pending') return 'green';
-//     if (code === 'managed') return 'orange';
-//     if (code === 'resolved') return 'red';
-// }
+function stateColor(code) {
+    if (code === 'pending') return 'green';
+    if (code === 'managed') return 'orange';
+    if (code === 'resolved') return 'red';
+}
 
 function navigate(id) {
     router.push({ path: `/claim/${id}` });
@@ -45,16 +38,8 @@ function viewSummary(id) {
     <teleport-slot to="#searchbar">
         <VnSearchbar data-key="ClaimList" :label="t('Search by claim id or name')" />
     </teleport-slot>
-    <teleport-slot to="#rightPanel">
-        <ClaimFilter data-key="ClaimList" />
-    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate
-            data-key="ClaimList"
-            url="Claims/filter"
-            sort-by="id DESC"
-            auto-load
-        >
+        <paginate data-key="ClaimList" url="Claims/filter" sort-by="id DESC" auto-load>
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
                     <q-item
@@ -73,40 +58,41 @@ function viewSummary(id) {
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.customer')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.customer') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.clientName }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.assignedTo')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.assignedTo') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.workerName }}</q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.created')
-                                        }}</q-item-label>
-                                        <q-item-label>{{
-                                            toDate(row.created)
-                                        }}</q-item-label>
-                                    </q-item-section>
-                                    <!-- <q-item-section>
-                                        <q-item-label caption>{{
-                                            t('claim.list.state')
-                                        }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.created') }}
+                                        </q-item-label>
                                         <q-item-label>
-                                            <q-chip
-                                                :color="stateColor(row.claimState.code)"
+                                            {{ toDate(row.created) }}
+                                        </q-item-label>
+                                    </q-item-section>
+                                    <q-item-section>
+                                        <q-item-label caption>
+                                            {{ t('claim.list.state') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            <q-badge
+                                                :color="stateColor(row.stateCode)"
+                                                class="q-ma-none"
                                                 dense
                                             >
-                                                {{ row.claimState.description }}
-                                            </q-chip>
+                                                {{ row.stateDescription }}
+                                            </q-badge>
                                         </q-item-label>
-                                    </q-item-section> -->
+                                    </q-item-section>
                                 </q-item>
                             </q-list>
                         </q-item-section>
@@ -139,9 +125,9 @@ function viewSummary(id) {
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openCard')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn
                                 flat
@@ -150,14 +136,14 @@ function viewSummary(id) {
                                 icon="preview"
                                 @click="viewSummary(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn flat round color="grey-7" icon="vn:client">
-                                <q-tooltip>{{
-                                    t('components.smartCard.viewDescription')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.viewDescription') }}
+                                </q-tooltip>
                                 <q-popup-proxy>
                                     <customer-descriptor-popover :customer="row.client" />
                                 </q-popup-proxy>
@@ -169,7 +155,8 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
 <i18n>
 es:
-  Search by claim id or name: Buscar por id o nombre de la reclamación
+    Search by claim id or name: Buscar por id o nombre de la reclamación
 </i18n>
diff --git a/src/pages/Claim/ClaimMain.vue b/src/pages/Claim/ClaimMain.vue
index fd50f1521..287beb852 100644
--- a/src/pages/Claim/ClaimMain.vue
+++ b/src/pages/Claim/ClaimMain.vue
@@ -6,7 +6,7 @@ const state = useState();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index dc2e710e7..e65b6fcae 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -70,9 +70,9 @@ function setWorkers(data) {
                     </q-item-section>
                     <q-item-section v-if="workers">
                         <q-select
-                            @update:model-value="searchFn()"
                             :label="t('Salesperson')"
                             v-model="params.salesPersonFk"
+                            @update:model-value="searchFn()"
                             :options="workers"
                             option-value="id"
                             option-label="name"
@@ -99,9 +99,9 @@ function setWorkers(data) {
                     </q-item-section>
                     <q-item-section v-if="provinces">
                         <q-select
-                            @update:model-value="searchFn()"
                             :label="t('Province')"
                             v-model="params.provinceFk"
+                            @update:model-value="searchFn()"
                             :options="provinces"
                             option-value="id"
                             option-label="name"
@@ -149,9 +149,9 @@ function setWorkers(data) {
                         </q-item-section>
                         <q-item-section v-if="zones">
                             <q-select
-                                @update:model-value="searchFn"
                                 :label="t('Zone')"
                                 v-model="params.zoneFk"
+                                @update:model-value="searchFn()"
                                 :options="zones"
                                 option-value="id"
                                 option-label="name"
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
index d39141de3..5f4feed9d 100644
--- a/src/pages/Customer/CustomerMain.vue
+++ b/src/pages/Customer/CustomerMain.vue
@@ -10,7 +10,7 @@ const stateStore = useStateStore();
         v-model="stateStore.leftDrawer"
         show-if-above
         :width="256"
-        :breakpoint="500"
+        :breakpoint="800"
     >
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
diff --git a/src/pages/Dashboard/DashboardMain.vue b/src/pages/Dashboard/DashboardMain.vue
index 87f42226e..aa74d1479 100644
--- a/src/pages/Dashboard/DashboardMain.vue
+++ b/src/pages/Dashboard/DashboardMain.vue
@@ -9,15 +9,13 @@ const state = useState();
 const navigation = useNavigationStore();
 const { t } = useI18n();
 
-onMounted(() => {
-    navigation.fetchPinned();
-});
+onMounted(() => navigation.fetchPinned());
 
 const pinnedModules = computed(() => navigation.getPinnedModules());
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
@@ -26,13 +24,19 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
         <q-page class="q-pa-md">
             <div class="row items-start wrap q-col-gutter-md q-mb-lg">
                 <div class="col-12 col-md">
-                    <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.pinnedModules') }}</div>
+                    <div class="text-h6 text-grey-8 q-mb-sm">
+                        {{ t('globals.pinnedModules') }}
+                    </div>
                     <q-card class="row flex-container q-pa-md">
                         <div class="text-grey-5" v-if="pinnedModules.length === 0">
                             {{ t('pinnedInfo') }}
                         </div>
                         <template v-if="pinnedModules.length">
-                            <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
+                            <div
+                                v-for="item of pinnedModules"
+                                :key="item.title"
+                                class="row no-wrap q-pa-xs flex-item"
+                            >
                                 <q-btn
                                     align="evenly"
                                     padding="16px"
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 9820cb21b..bae91708d 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,11 +1,21 @@
 <script setup>
-import { useState } from 'src/composables/useState';
+import { useI18n } from 'vue-i18n';
+import { useState } from 'composables/useState';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 const state = useState();
+const { t } = useI18n();
 </script>
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar
+            data-key="InvoiceOutList"
+            :label="t('Search by invoice id or reference')"
+        />
+    </teleport-slot>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <InvoiceOutDescriptor />
@@ -19,3 +29,8 @@ const state = useState();
         </q-page>
     </q-page-container>
 </template>
+
+<i18n>
+es:
+    Search by invoice id or reference: Buscar por id o referencia de la factura
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 8421cf915..a855f2695 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -6,6 +6,9 @@ import Paginate from 'src/components/PaginateData.vue';
 import InvoiceOutSummaryDialog from './Card/InvoiceOutSummaryDialog.vue';
 import { toDate, toCurrency } from 'src/filters/index';
 
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import TeleportSlot from 'components/ui/TeleportSlot.vue';
+
 const router = useRouter();
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -25,54 +28,107 @@ function viewSummary(id) {
 </script>
 
 <template>
+    <teleport-slot to="#searchbar">
+        <VnSearchbar
+            data-key="InvoiceOutList"
+            :label="t('Search by invoice id or reference')"
+        />
+    </teleport-slot>
     <q-page class="q-pa-md">
-        <paginate url="/InvoiceOuts/filter" sort-by="issued DESC, id DESC" auto-load>
+        <paginate
+            data-key="InvoiceOutList"
+            url="InvoiceOuts/filter"
+            sort-by="issued DESC, id DESC"
+            auto-load
+        >
             <template #body="{ rows }">
                 <q-card class="card" v-for="row of rows" :key="row.id">
-                    <q-item class="q-pa-none items-start cursor-pointer q-hoverable" v-ripple clickable>
+                    <q-item
+                        class="q-pa-none items-start cursor-pointer q-hoverable"
+                        v-ripple
+                        clickable
+                    >
                         <q-item-section class="q-pa-md" @click="navigate(row.id)">
                             <div class="text-h6">{{ row.ref }}</div>
                             <q-item-label caption>#{{ row.id }}</q-item-label>
                             <q-list>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.issued') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.issued) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.issued') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.issued) }}
+                                        </q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.amount') }}</q-item-label>
-                                        <q-item-label>{{ toCurrency(row.amount) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.amount') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toCurrency(row.amount) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.client') }}</q-item-label>
-                                        <q-item-label>{{ row.clientSocialName }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.client') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ row.clientSocialName }}
+                                        </q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.created') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.created) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.created') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.created) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                                 <q-item class="q-pa-none">
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.company') }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.company') }}
+                                        </q-item-label>
                                         <q-item-label>{{ row.companyCode }}</q-item-label>
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label caption>{{ t('invoiceOut.list.dued') }}</q-item-label>
-                                        <q-item-label>{{ toDate(row.dued) }}</q-item-label>
+                                        <q-item-label caption>
+                                            {{ t('invoiceOut.list.dued') }}
+                                        </q-item-label>
+                                        <q-item-label>
+                                            {{ toDate(row.dued) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                             </q-list>
                         </q-item-section>
                         <q-separator vertical />
                         <q-card-actions vertical class="justify-between">
-                            <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openCard') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="orange"
+                                icon="arrow_circle_right"
+                                @click="navigate(row.id)"
+                            >
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
-                            <q-btn flat round color="grey-7" icon="preview" @click="viewSummary(row.id)">
-                                <q-tooltip>{{ t('components.smartCard.openSummary') }}</q-tooltip>
+                            <q-btn
+                                flat
+                                round
+                                color="grey-7"
+                                icon="preview"
+                                @click="viewSummary(row.id)"
+                            >
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </q-tooltip>
                             </q-btn>
                         </q-card-actions>
                     </q-item>
@@ -81,3 +137,8 @@ function viewSummary(id) {
         </paginate>
     </q-page>
 </template>
+
+<i18n>
+es:
+    Search by invoice id or reference: Buscar por id o referencia de la factura
+</i18n>
diff --git a/src/pages/InvoiceOut/InvoiceOutMain.vue b/src/pages/InvoiceOut/InvoiceOutMain.vue
index 099e82879..8e63f372c 100644
--- a/src/pages/InvoiceOut/InvoiceOutMain.vue
+++ b/src/pages/InvoiceOut/InvoiceOutMain.vue
@@ -6,7 +6,7 @@ const state = useState();
 </script>
 
 <template>
-    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="800">
         <q-scroll-area class="fit text-grey-8">
             <LeftMenu />
         </q-scroll-area>
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 380480274..4a78fc628 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -42,6 +42,8 @@ function formatValue(value) {
 <template>
     <fetch-data url="Provinces" @on-fetch="(data) => (provinces = data)" auto-load />
     <fetch-data url="States" @on-fetch="(data) => (states = data)" auto-load />
+    <fetch-data url="AgencyModes" @on-fetch="(data) => (agencies = data)" auto-load />
+    <fetch-data url="Warehouses" @on-fetch="(data) => (warehouses = data)" auto-load />
     <fetch-data
         url="Workers/activeWithInheritedRole"
         :filter="{ where: { role: 'salesPerson' } }"
@@ -154,6 +156,7 @@ function formatValue(value) {
                     <q-select
                         :label="t('State')"
                         v-model="params.stateFk"
+                        @update:model-value="searchFn()"
                         :options="states"
                         option-value="id"
                         option-label="name"
@@ -224,6 +227,7 @@ function formatValue(value) {
                         <q-select
                             :label="t('Province')"
                             v-model="params.provinceFk"
+                            @update:model-value="searchFn()"
                             :options="provinces"
                             option-value="id"
                             option-label="name"
@@ -237,6 +241,7 @@ function formatValue(value) {
                         <q-select
                             :label="t('Agency')"
                             v-model="params.agencyModeFk"
+                            @update:model-value="searchFn()"
                             :options="agencies"
                             option-value="id"
                             option-label="name"
@@ -250,6 +255,7 @@ function formatValue(value) {
                         <q-select
                             :label="t('Warehouse')"
                             v-model="params.warehouseFk"
+                            @update:model-value="searchFn()"
                             :options="warehouses"
                             option-value="id"
                             option-label="name"
@@ -278,6 +284,9 @@ en:
         pending: Pending
         hasInvoice: Invoiced
         hasRoute: Routed
+        provinceFk: Province
+        agencyModeFk: Agency
+        warehouseFk: Warehouse
 es:
     params:
         search: Contiene
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index e0373e55f..98c5fed13 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -108,13 +108,13 @@ function viewSummary(id) {
                                             {{ t('ticket.list.state') }}
                                         </q-item-label>
                                         <q-item-label>
-                                            <q-chip
+                                            <q-badge
                                                 :color="stateColor(row)"
                                                 class="q-ma-none"
                                                 dense
                                             >
                                                 {{ row.state }}
-                                            </q-chip>
+                                            </q-badge>
                                         </q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -129,10 +129,10 @@ function viewSummary(id) {
                                     </q-item-section>
                                     <q-item-section>
                                         <q-item-label caption>
-                                            {{ t('ticket.list.landed') }}
+                                            {{ t('Zone') }}
                                         </q-item-label>
                                         <q-item-label>
-                                            {{ toDate(row.landed) }}
+                                            {{ row.zoneName }}
                                         </q-item-label>
                                     </q-item-section>
                                 </q-item>
@@ -149,9 +149,9 @@ function viewSummary(id) {
                                         <q-item-label caption>
                                             {{ t('ticket.list.total') }}
                                         </q-item-label>
-                                        <q-item-label>{{
-                                            toCurrency(row.totalWithVat)
-                                        }}</q-item-label>
+                                        <q-item-label>
+                                            {{ toCurrency(row.totalWithVat) }}
+                                        </q-item-label>
                                     </q-item-section>
                                 </q-item>
                             </q-list>
@@ -165,9 +165,9 @@ function viewSummary(id) {
                                 icon="arrow_circle_right"
                                 @click="navigate(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openCard')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openCard') }}
+                                </q-tooltip>
                             </q-btn>
                             <q-btn
                                 flat
@@ -176,9 +176,9 @@ function viewSummary(id) {
                                 icon="preview"
                                 @click="viewSummary(row.id)"
                             >
-                                <q-tooltip>{{
-                                    t('components.smartCard.openSummary')
-                                }}</q-tooltip>
+                                <q-tooltip>
+                                    {{ t('components.smartCard.openSummary') }}
+                                </q-tooltip>
                             </q-btn>
                         </q-card-actions>
                     </q-item>
@@ -191,4 +191,5 @@ function viewSummary(id) {
 <i18n>
 es:
     Search by ticket id or alias: Buscar por id o nombre del ticket
+    Zone: Zona
 </i18n>