diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index 66db3608e..5de19f6cb 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -11,7 +11,10 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnTable from 'src/components/ui/VnTable.vue';
 import VnCardSection from 'src/components/ui/VnCardSection.vue';
 import VnCard from 'src/components/ui/VnCard.vue';
+import VnIcon from 'src/components/ui/VnIcon.vue';
+import VnBtn from 'src/components/ui/VnBtn.vue';
 import in18n from '../in18n';
+import VnChip from 'src/components/ui/VnChip.vue';
 
 onMounted(async () => {
     salixUrl.value = await getUrl('');
@@ -197,166 +200,129 @@ function setData(entity) {
         </template>
         <template #body="{ entity: invoiceIn }">
             <!--Basic Data-->
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
+            <VnCard class="vn-max">
+                <template #header>
+                    <VnCardSection
+                        :title="'invoiceIn.pageTitles.basicData'"
+                        :href="`#/invoice-in/${entityId}/basic-data`"
                     >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.summary.supplier')"
-                    :value="invoiceIn.supplier.name"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.supplierRef')"
-                    :value="invoiceIn.supplierRef"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.currency')"
-                    :value="invoiceIn.currency.code"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.docNumber')"
-                    :value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
-                />
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.summary.issued')"
-                    :value="toDate(invoiceIn.issued)"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.operated')"
-                    :value="toDate(invoiceIn.operated)"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.bookEntried')"
-                    :value="toDate(invoiceIn.bookEntried)"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.bookedDate')"
-                    :value="toDate(invoiceIn.booked)"
-                />
-            </QCard>
-            <QCard class="vn-one">
-                <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
-                </QCardSection>
-                <QCardSection class="q-pa-none">
-                    <div class="bordered q-px-sm q-mx-auto">
-                        <VnLv
-                            :label="t('invoiceIn.summary.taxableBase')"
-                            :value="toCurrency(invoiceIn.totals.totalTaxableBase)"
-                        />
-                        <VnLv
-                            label="Total"
-                            :value="toCurrency(invoiceIn.totals.totalVat)"
-                        />
-                        <VnLv :label="t('invoiceIn.summary.dueTotal')">
-                            <template #value>
-                                <QChip
-                                    dense
-                                    class="q-pa-xs"
-                                    :color="amountsNotMatch ? 'negative' : 'transparent'"
-                                    :title="
-                                        amountsNotMatch
-                                            ? t('invoiceIn.summary.noMatch')
-                                            : t('invoiceIn.summary.dueTotal')
-                                    "
-                                >
-                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
-                                </QChip>
-                            </template>
-                        </VnLv>
+                        <template #icon>
+                            <VnIcon name="open_in_new" color="primary" />
+                        </template>
+                        <template #btn>
+                            <VnBtn
+                                class="q-ml-sm"
+                                padding="xs"
+                                flat
+                                color="primary"
+                                round
+                                icon="cloud_download"
+                                :promise="() => downloadFile(invoiceIn.dmsFk)"
+                            >
+                                <template #tooltip>
+                                    {{ t('components.smartCard.downloadFile') }}
+                                </template>
+                            </VnBtn>
+                        </template>
+                    </VnCardSection>
+                </template>
+                <template #body>
+                    <div class="card-section">
+                        <div class="vn-one card">
+                            <VnLv
+                                :label="t('invoiceIn.summary.supplier')"
+                                :value="invoiceIn.supplier.name"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.supplierRef')"
+                                :value="invoiceIn.supplierRef"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.currency')"
+                                :value="invoiceIn.currency.code"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.docNumber')"
+                                :value="`${invoiceIn.serial}/${invoiceIn.serialNumber}`"
+                            />
+                        </div>
+                        <div class="card vn-two">
+                            <VnLv
+                                :label="t('invoiceIn.summary.issued')"
+                                :value="toDate(invoiceIn.issued)"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.operated')"
+                                :value="toDate(invoiceIn.operated)"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.bookEntried')"
+                                :value="toDate(invoiceIn.bookEntried)"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.bookedDate')"
+                                :value="toDate(invoiceIn.booked)"
+                            />
+                        </div>
+                        <div class="card vn-three">
+                            <div class="q-px-sm">
+                                <VnLv
+                                    :label="t('invoiceIn.summary.taxableBase')"
+                                    :value="toCurrency(invoiceIn.totals.totalTaxableBase)"
+                                />
+                                <VnLv
+                                    label="Total"
+                                    :value="toCurrency(invoiceIn.totals.totalVat)"
+                                />
+                                <VnLv :label="t('invoiceIn.summary.dueTotal')">
+                                    <template #value>
+                                        <VnChip
+                                            dense
+                                            class="q-pa-xs"
+                                            :color="
+                                                amountsNotMatch
+                                                    ? 'negative'
+                                                    : 'transparent'
+                                            "
+                                            :title="
+                                                amountsNotMatch
+                                                    ? t('invoiceIn.summary.noMatch')
+                                                    : t('invoiceIn.summary.dueTotal')
+                                            "
+                                        >
+                                            <template #body>
+                                                {{
+                                                    toCurrency(
+                                                        invoiceIn.totals.totalDueDay
+                                                    )
+                                                }}
+                                            </template>
+                                        </VnChip>
+                                    </template>
+                                </VnLv>
+                            </div>
+                        </div>
+                        <div class="card vn-four q-mb-md">
+                            <VnLv
+                                :label="t('invoiceIn.summary.sage')"
+                                :value="invoiceIn.sageWithholding.withholding"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.vat')"
+                                :value="invoiceIn.expenseDeductible?.name"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.company')"
+                                :value="invoiceIn.company.code"
+                            />
+                            <VnLv
+                                :label="t('invoiceIn.summary.booked')"
+                                :value="invoiceIn.isBooked"
+                            />
+                        </div>
                     </div>
-                </QCardSection>
-            </QCard>
-            <QCard class="q-mb-md">
-                <QCardSection class="q-pa-none">
-                    <a class="header" :href="`#/invoice-in/${entityId}/basic-data`">
-                        {{ t('invoiceIn.pageTitles.basicData') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
-                    <QBtn
-                        class="q-ml-sm"
-                        padding="xs"
-                        flat
-                        color="primary"
-                        round
-                        icon="cloud_download"
-                        @click.stop="downloadFile(invoiceIn.dmsFk)"
-                    >
-                        <QTooltip>
-                            {{ t('components.smartCard.downloadFile') }}
-                        </QTooltip>
-                    </QBtn>
-                </QCardSection>
-                <VnLv
-                    :label="t('invoiceIn.summary.sage')"
-                    :value="invoiceIn.sageWithholding.withholding"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.vat')"
-                    :value="invoiceIn.expenseDeductible?.name"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.company')"
-                    :value="invoiceIn.company.code"
-                />
-                <VnLv
-                    :label="t('invoiceIn.summary.booked')"
-                    :value="invoiceIn.isBooked"
-                />
-            </QCard>
+                </template>
+            </VnCard>
             <!--Vat-->
             <VnCard v-if="invoiceIn.invoiceInTax.length" class="vn-three">
                 <template #header>
@@ -423,6 +389,26 @@ function setData(entity) {
     </CardSummary>
 </template>
 <style lang="scss" scoped>
+.q-card {
+    .vn-max {
+        background-color: unset;
+    }
+    .card-section {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 10px;
+        column-gap: 10px;
+        .card {
+            flex: 1 1 30%;
+            width: 100%;
+            background-color: var(--vn-gray);
+            padding: 15px;
+            font-size: 16px;
+            min-width: 275px;
+            border-radius: 4px;
+        }
+    }
+}
 .bg {
     background-color: var(--vn-light-gray);
 }