diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 17b4216da..93e3fe042 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,19 +1,11 @@
 <script setup>
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import VnCard from 'components/common/VnCard.vue';
-import InvoiceOutFilter from '../InvoiceOutFilter.vue';
+import VnCardBeta from 'components/common/VnCardBeta.vue';
 </script>
 <template>
-    <VnCard
+    <VnCardBeta
         data-key="InvoiceOut"
         base-url="InvoiceOuts"
         :descriptor="InvoiceOutDescriptor"
-        :filter-panel="InvoiceOutFilter"
-        search-data-key="InvoiceOutList"
-        :searchbar-props="{
-            url: 'InvoiceOuts/filter',
-            label: 'Search invoice',
-            info: 'You can search by invoice reference',
-        }"
     />
 </template>
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 89b109c3c..dbd905e35 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -3,7 +3,6 @@ import { ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { usePrintService } from 'src/composables/usePrintService';
@@ -12,12 +11,12 @@ import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
 import { QBtn } from 'quasar';
 import axios from 'axios';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import InvoiceOutFilter from './InvoiceOutFilter.vue';
 import VnRow from 'src/components/ui/VnRow.vue';
 import VnRadio from 'src/components/common/VnRadio.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
+import VnSection from 'src/components/common/VnSection.vue';
 
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -30,6 +29,8 @@ const MODEL = 'InvoiceOuts';
 const { openReport } = usePrintService();
 const addressOptions = ref([]);
 const selectedOption = ref('ticket');
+const dataKey = 'InvoiceOutList';
+
 async function fetchClientAddress(id) {
     const { data } = await axios.get(
         `Clients/${id}/addresses?filter[order]=isActive DESC`
@@ -37,11 +38,7 @@ async function fetchClientAddress(id) {
     addressOptions.value = data;
 }
 
-const exprBuilder = (_, value) => {
-    return {
-        or: [{ code: value }, { description: { like: `%${value}%` } }],
-    };
-};
+
 
 const columns = computed(() => [
     {
@@ -173,220 +170,224 @@ watchEffect(selectedRows);
 </script>
 
 <template>
-    <VnSearchbar
-        :info="t('youCanSearchByInvoiceReference')"
-        :label="t('Search invoice')"
-        data-key="invoiceOutList"
-    />
-    <RightMenu>
-        <template #right-panel>
-            <InvoiceOutFilter data-key="invoiceOutList" />
-        </template>
-    </RightMenu>
-    <VnSubToolbar>
-        <template #st-actions>
-            <QBtn
-                color="primary"
-                icon-right="cloud_download"
-                @click="downloadPdf()"
-                :disable="!hasSelectedCards"
-            >
-                <QTooltip>{{ t('downloadPdf') }}</QTooltip>
-            </QBtn>
-        </template>
-    </VnSubToolbar>
-    <VnTable
-        ref="tableRef"
-        data-key="invoiceOutList"
-        :url="`${MODEL}/filter`"
-        :create="{
-            urlCreate: 'InvoiceOuts/createManualInvoice',
-            title: t('createManualInvoice'),
-            onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: { active: true },
-        }"
-        :right-search="false"
-        v-model:selected="selectedRows"
-        order="id DESC"
+    <VnSection
+        :data-key="dataKey"
         :columns="columns"
-        redirect="invoice-out"
-        :table="{
-            'row-key': 'id',
-            selection: 'multiple',
+        prefix="invoiceOut"
+        :array-data-props="{
+            url: 'InvoiceOuts/filter',
+            order: ['id DESC'],
+            exprBuilder,
         }"
     >
-        <template #column-clientFk="{ row }">
-            <span class="link" @click.stop>
-                {{ row.clientSocialName }}
-                <CustomerDescriptorProxy :id="row.clientFk" />
-            </span>
+        <template #rightMenu>
+            <InvoiceOutFilter data-key="InvoiceOutList" />
         </template>
-        <template #more-create-dialog="{ data }">
-            <div class="row q-col-gutter-xs">
-                <div class="col-12">
-                    <div class="q-col-gutter-xs">
-                        <VnRow fixed>
-                            <VnRadio
-                                v-model="selectedOption"
-                                val="ticket"
-                                :label="t('globals.ticket')"
-                                class="q-my-none q-mr-md"
-                            />
+        <template #body>
+            <VnSubToolbar>
+                <template #st-actions>
+                    <QBtn
+                        color="primary"
+                        icon-right="cloud_download"
+                        @click="downloadPdf()"
+                        :disable="!hasSelectedCards"
+                    >
+                        <QTooltip>{{ t('downloadPdf') }}</QTooltip>
+                    </QBtn>
+                </template>
+            </VnSubToolbar>
+            <VnTable
+                ref="tableRef"
+                :data-key="dataKey"
+                :create="{
+                    urlCreate: 'InvoiceOuts/createManualInvoice',
+                    title: t('createManualInvoice'),
+                    onDataSaved: ({ id }) => tableRef.redirect(id),
+                    formInitialData: { active: true },
+                }"
+                :right-search="false"
+                v-model:selected="selectedRows"
+                :columns="columns"
+                redirect="invoice-out"
+                :table="{
+                    'row-key': 'id',
+                    selection: 'multiple',
+                }"
+            >
+                <template #column-clientFk="{ row }">
+                    <span class="link" @click.stop>
+                        {{ row.clientSocialName }}
+                        <CustomerDescriptorProxy :id="row.clientFk" />
+                    </span>
+                </template>
+                <template #more-create-dialog="{ data }">
+                    <div class="row q-col-gutter-xs">
+                        <div class="col-12">
+                            <div class="q-col-gutter-xs">
+                                <VnRow fixed>
+                                    <VnRadio
+                                        v-model="selectedOption"
+                                        val="ticket"
+                                        :label="t('globals.ticket')"
+                                        class="q-my-none q-mr-md"
+                                    />
 
-                            <VnInput
-                                v-show="selectedOption === 'ticket'"
-                                v-model="data.ticketFk"
-                                :label="t('globals.ticket')"
-                                style="flex: 1"
-                            />
+                                    <VnInput
+                                        v-show="selectedOption === 'ticket'"
+                                        v-model="data.ticketFk"
+                                        :label="t('globals.ticket')"
+                                        style="flex: 1"
+                                    />
 
-                            <div
-                                class="row q-col-gutter-xs q-ml-none"
-                                v-show="selectedOption !== 'ticket'"
-                            >
-                                <div class="col">
-                                    <VnSelect
-                                        v-model="data.clientFk"
+                                    <div
+                                        class="row q-col-gutter-xs q-ml-none"
+                                        v-show="selectedOption !== 'ticket'"
+                                    >
+                                        <div class="col">
+                                            <VnSelect
+                                                v-model="data.clientFk"
+                                                :label="t('globals.client')"
+                                                url="Clients"
+                                                :options="customerOptions"
+                                                option-label="name"
+                                                option-value="id"
+                                                @update:model-value="fetchClientAddress"
+                                            >
+                                                <template #option="scope">
+                                                    <QItem v-bind="scope.itemProps">
+                                                        <QItemSection>
+                                                            <QItemLabel>
+                                                                #{{ scope.opt?.id }} -
+                                                                {{ scope.opt?.name }}
+                                                            </QItemLabel>
+                                                        </QItemSection>
+                                                    </QItem>
+                                                </template>
+                                            </VnSelect>
+                                        </div>
+                                        <div class="col">
+                                            <VnSelect
+                                                v-model="data.addressFk"
+                                                :label="t('ticket.summary.consignee')"
+                                                :options="addressOptions"
+                                                option-label="nickname"
+                                                option-value="id"
+                                                v-if="
+                                                    data.clientFk &&
+                                                    selectedOption === 'consignatario'
+                                                "
+                                            >
+                                                <template #option="scope">
+                                                    <QItem v-bind="scope.itemProps">
+                                                        <QItemSection>
+                                                            <QItemLabel
+                                                                :class="{
+                                                                    'color-vn-label':
+                                                                        !scope.opt?.isActive,
+                                                                }"
+                                                            >
+                                                                {{
+                                                                    `${
+                                                                        !scope.opt?.isActive
+                                                                            ? t('inactive')
+                                                                            : ''
+                                                                    } `
+                                                                }}
+                                                                <span>{{
+                                                                    scope.opt?.nickname
+                                                                }}</span>
+                                                                <span
+                                                                    v-if="
+                                                                        scope.opt?.province ||
+                                                                        scope.opt?.city ||
+                                                                        scope.opt?.street
+                                                                    "
+                                                                >
+                                                                    , {{ scope.opt?.street }},
+                                                                    {{ scope.opt?.city }},
+                                                                    {{
+                                                                        scope.opt?.province?.name
+                                                                    }}
+                                                                    -
+                                                                    {{
+                                                                        scope.opt?.agencyMode
+                                                                            ?.name
+                                                                    }}
+                                                                </span>
+                                                            </QItemLabel>
+                                                        </QItemSection>
+                                                    </QItem>
+                                                </template>
+                                            </VnSelect>
+                                        </div>
+                                    </div>
+                                </VnRow>
+                                <VnRow fixed>
+                                    <VnRadio
+                                        v-model="selectedOption"
+                                        val="cliente"
                                         :label="t('globals.client')"
-                                        url="Clients"
-                                        :options="customerOptions"
-                                        option-label="name"
-                                        option-value="id"
-                                        @update:model-value="fetchClientAddress"
-                                    >
-                                        <template #option="scope">
-                                            <QItem v-bind="scope.itemProps">
-                                                <QItemSection>
-                                                    <QItemLabel>
-                                                        #{{ scope.opt?.id }} -
-                                                        {{ scope.opt?.name }}
-                                                    </QItemLabel>
-                                                </QItemSection>
-                                            </QItem>
-                                        </template>
-                                    </VnSelect>
-                                </div>
-                                <div class="col">
-                                    <VnSelect
-                                        v-model="data.addressFk"
+                                        class="q-my-none q-mr-md"
+                                    />
+                                </VnRow>
+                                <VnRow fixed>
+                                    <VnRadio
+                                        v-model="selectedOption"
+                                        val="consignatario"
                                         :label="t('ticket.summary.consignee')"
-                                        :options="addressOptions"
-                                        option-label="nickname"
-                                        option-value="id"
-                                        v-if="
-                                            data.clientFk &&
-                                            selectedOption === 'consignatario'
-                                        "
-                                    >
-                                        <template #option="scope">
-                                            <QItem v-bind="scope.itemProps">
-                                                <QItemSection>
-                                                    <QItemLabel
-                                                        :class="{
-                                                            'color-vn-label':
-                                                                !scope.opt?.isActive,
-                                                        }"
-                                                    >
-                                                        {{
-                                                            `${
-                                                                !scope.opt?.isActive
-                                                                    ? t('inactive')
-                                                                    : ''
-                                                            } `
-                                                        }}
-                                                        <span>{{
-                                                            scope.opt?.nickname
-                                                        }}</span>
-                                                        <span
-                                                            v-if="
-                                                                scope.opt?.province ||
-                                                                scope.opt?.city ||
-                                                                scope.opt?.street
-                                                            "
-                                                        >
-                                                            , {{ scope.opt?.street }},
-                                                            {{ scope.opt?.city }},
-                                                            {{
-                                                                scope.opt?.province?.name
-                                                            }}
-                                                            -
-                                                            {{
-                                                                scope.opt?.agencyMode
-                                                                    ?.name
-                                                            }}
-                                                        </span>
-                                                    </QItemLabel>
-                                                </QItemSection>
-                                            </QItem>
-                                        </template>
-                                    </VnSelect>
-                                </div>
+                                        class="q-my-none q-mr-md"
+                                    />
+                                </VnRow>
                             </div>
-                        </VnRow>
-                        <VnRow fixed>
-                            <VnRadio
-                                v-model="selectedOption"
-                                val="cliente"
-                                :label="t('globals.client')"
-                                class="q-my-none q-mr-md"
-                            />
-                        </VnRow>
-                        <VnRow fixed>
-                            <VnRadio
-                                v-model="selectedOption"
-                                val="consignatario"
-                                :label="t('ticket.summary.consignee')"
-                                class="q-my-none q-mr-md"
-                            />
-                        </VnRow>
+                        </div>
+                        <div class="full-width">
+                            <VnRow class="row q-col-gutter-xs">
+                                <VnSelect
+                                    url="InvoiceOutSerials"
+                                    v-model="data.serial"
+                                    :label="t('invoiceIn.serial')"
+                                    :options="invoiceOutSerialsOptions"
+                                    option-label="description"
+                                    option-value="code"
+                                    option-filter
+                                    :expr-builder="exprBuilder"
+                                >
+                                    <template #option="scope">
+                                        <QItem v-bind="scope.itemProps">
+                                            <QItemSection>
+                                                <QItemLabel>
+                                                    {{ scope.opt?.code }} -
+                                                    {{ scope.opt?.description }}
+                                                </QItemLabel>
+                                            </QItemSection>
+                                        </QItem>
+                                    </template>
+                                </VnSelect>
+                                <VnInputDate
+                                    :label="t('invoiceOut.summary.dued')"
+                                    v-model="data.maxShipped"
+                                />
+                            </VnRow>
+                            <VnRow class="row q-col-gutter-xs">
+                                <VnSelect
+                                    url="TaxAreas"
+                                    v-model="data.taxArea"
+                                    :label="t('invoiceOutList.tableVisibleColumns.taxArea')"
+                                    :options="taxAreasOptions"
+                                    option-label="code"
+                                    option-value="code"
+                                />
+                                <VnInput
+                                    v-model="data.reference"
+                                    :label="t('globals.reference')"
+                                />
+                            </VnRow>
+                        </div>
                     </div>
-                </div>
-                <div class="full-width">
-                    <VnRow class="row q-col-gutter-xs">
-                        <VnSelect
-                            url="InvoiceOutSerials"
-                            v-model="data.serial"
-                            :label="t('invoiceIn.serial')"
-                            :options="invoiceOutSerialsOptions"
-                            option-label="description"
-                            option-value="code"
-                            option-filter
-                            :expr-builder="exprBuilder"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel>
-                                            {{ scope.opt?.code }} -
-                                            {{ scope.opt?.description }}
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                        <VnInputDate
-                            :label="t('invoiceOut.summary.dued')"
-                            v-model="data.maxShipped"
-                        />
-                    </VnRow>
-                    <VnRow class="row q-col-gutter-xs">
-                        <VnSelect
-                            url="TaxAreas"
-                            v-model="data.taxArea"
-                            :label="t('invoiceOutList.tableVisibleColumns.taxArea')"
-                            :options="taxAreasOptions"
-                            option-label="code"
-                            option-value="code"
-                        />
-                        <VnInput
-                            v-model="data.reference"
-                            :label="t('globals.reference')"
-                        />
-                    </VnRow>
-                </div>
-            </div>
+                </template>
+            </VnTable>
         </template>
-    </VnTable>
+    </VnSection>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/InvoiceOut/locale/en.yml b/src/pages/InvoiceOut/locale/en.yml
index 8cefe8bdc..0042c6a5f 100644
--- a/src/pages/InvoiceOut/locale/en.yml
+++ b/src/pages/InvoiceOut/locale/en.yml
@@ -1,3 +1,6 @@
+invoiceOut:
+    search: Search invoice
+    searchInfo: You can search by invoice reference
 invoiceOutModule:
     customer: Client
     amount: Amount
diff --git a/src/pages/InvoiceOut/locale/es.yml b/src/pages/InvoiceOut/locale/es.yml
index 106168a5d..0584cd1da 100644
--- a/src/pages/InvoiceOut/locale/es.yml
+++ b/src/pages/InvoiceOut/locale/es.yml
@@ -1,5 +1,6 @@
-Search invoice: Buscar factura emitida
-You can search by invoice reference: Puedes buscar por referencia de la factura
+invoiceOut:
+    search: Buscar factura emitida
+    searchInfo: Puedes buscar por referencia de la factura
 invoiceOutModule:
     customer: Cliente
     amount: Importe
diff --git a/src/router/modules/invoiceOut.js b/src/router/modules/invoiceOut.js
index 53d27d0e8..10ed00285 100644
--- a/src/router/modules/invoiceOut.js
+++ b/src/router/modules/invoiceOut.js
@@ -1,34 +1,60 @@
 import { RouterView } from 'vue-router';
 
+const invoiceOutCard = {
+    name: 'InvoiceOutCard',
+    path: ':id',
+    component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
+    redirect: { name: 'InvoiceOutSummary' },
+    meta: {
+        menu: [],
+    },
+    children: [
+        {
+            path: 'summary',
+            name: 'InvoiceOutSummary',
+            meta: {
+                title: 'summary',
+                icon: 'launch',
+            },
+            component: () => import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
+        }
+    ],
+};
+
 export default {
-    path: '/invoice-out',
     name: 'InvoiceOut',
+    path: '/invoice-out',
     meta: {
         title: 'invoiceOuts',
         icon: 'vn:invoice-out',
         moduleName: 'InvoiceOut',
+        menu: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
     },
     component: RouterView,
     redirect: { name: 'InvoiceOutMain' },
-    menus: {
-        main: ['InvoiceOutList', 'InvoiceOutGlobal', 'InvoiceOutNegativeBases'],
-        card: [],
-    },
     children: [
         {
-            path: '',
             name: 'InvoiceOutMain',
+            path: '',
             component: () => import('src/components/common/VnModule.vue'),
-            redirect: { name: 'InvoiceOutList' },
+            redirect: { name: 'InvoiceOutIndexMain' },
             children: [
                 {
-                    path: 'list',
-                    name: 'InvoiceOutList',
-                    meta: {
-                        title: 'list',
-                        icon: 'view_list',
-                    },
+                    path: '',
+                    name: 'InvoiceOutIndexMain',
+                    redirect: { name: 'InvoiceOutList' },
                     component: () => import('src/pages/InvoiceOut/InvoiceOutList.vue'),
+                    children: [
+                        {
+                            name: 'InvoiceOutList',
+                            path: 'list',
+                            meta: {
+                                title: 'list',
+                                icon: 'view_list',
+                            },
+                        },
+                        invoiceOutCard,
+                    ],
                 },
                 {
                     path: 'global-invoicing',
@@ -51,22 +77,5 @@ export default {
                 },
             ],
         },
-        {
-            name: 'InvoiceOutCard',
-            path: ':id',
-            component: () => import('src/pages/InvoiceOut/Card/InvoiceOutCard.vue'),
-            redirect: { name: 'InvoiceOutSummary' },
-            children: [
-                {
-                    name: 'InvoiceOutSummary',
-                    path: 'summary',
-                    meta: {
-                        title: 'summary',
-                    },
-                    component: () =>
-                        import('src/pages/InvoiceOut/Card/InvoiceOutSummary.vue'),
-                },
-            ],
-        },
     ],
-};
+};
\ No newline at end of file