diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 38daadede..a8c2d563f 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,16 +1,28 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
 import VnSubToolbar from '../ui/VnSubToolbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
-import { useStateStore } from 'stores/useStateStore';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 
 defineProps({
     descriptor: { type: Object, required: true },
+    searchbarProps: { type: Object, required: true },
 });
 
+const { t } = useI18n();
 const stateStore = useStateStore();
 </script>
 <template>
+    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
+        <VnSearchbar
+            :data-key="searchbarProps.dataKey"
+            :url="searchbarProps.url"
+            :label="t(searchbarProps.label)"
+            :info="t(searchbarProps.info)"
+        />
+    </Teleport>
     <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
         <QScrollArea class="fit">
             <component :is="descriptor" />
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index 6844df2dd..9214b1b04 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -1,39 +1,16 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
-import LeftMenu from 'components/LeftMenu.vue';
-import VnSearchbar from 'components/ui/VnSearchbar.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import useCardSize from 'src/composables/useCardSize';
+import VnCard from 'components/common/VnCard.vue';
 
-const stateStore = useStateStore();
-const { t } = useI18n();
+const searchbar = {
+    dataKey: 'InvoiceOutList',
+    url: 'InvoiceOuts/filter',
+    label: 'Search invoice',
+    info: 'You can search by invoice reference',
+};
 </script>
 <template>
-    <Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
-        <VnSearchbar
-            data-key="InvoiceOutList"
-            url="InvoiceOuts/filter"
-            :label="t('Search invoice')"
-            :info="t('You can search by invoice reference')"
-        />
-    </Teleport>
-    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <QScrollArea class="fit">
-            <InvoiceOutDescriptor />
-            <QSeparator />
-            <LeftMenu source="card" />
-        </QScrollArea>
-    </QDrawer>
-    <QPageContainer>
-        <QPage>
-            <VnSubToolbar />
-            <div :class="useCardSize()">
-                <RouterView></RouterView>
-            </div>
-        </QPage>
-    </QPageContainer>
+    <VnCard :descriptor="InvoiceOutDescriptor" :searchbar-props="searchbar" />
 </template>
 
 <i18n>