diff --git a/src/css/app.scss b/src/css/app.scss
index 2a60830bf..4c4a556a7 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -320,8 +320,12 @@ input::-webkit-inner-spin-button {
 .q-item > .q-item__section:has(.q-checkbox) {
     max-width: fit-content;
 }
-
-.row > .column:has(.q-checkbox) {
+.vn-row > * .q-checkbox r {
+    min-width: 80%;
+    display: flex;
+    justify-content: space-between;
+}
+.vn-row > .q-checkbox.row.items-center {
     max-width: fit-content;
 }
 .q-field__inner {
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 718de95dd..25ac773f0 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -8,8 +8,9 @@ import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
-import { dateRange, toDate } from 'src/filters';
-import { dashIfEmpty } from 'src/filters';
+import { dateRange, toCurrency, toDate } from 'src/filters';
+
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
@@ -31,7 +32,81 @@ const arrayData = useArrayData('SupplierConsumption', {
     order: ['itemTypeFk', 'itemName', 'itemSize'],
     userFilter: { where: { supplierFk: route.params.id } },
 });
+const headerColumns = computed(() => [
+    {
+        name: 'id',
+        label: t('globals.entry'),
+        align: 'left',
+        field: 'id',
+        sortable: true,
+    },
+    {
+        name: 'invoiceNumber',
+        label: t('globals.subItem'),
+        align: 'left',
+        field: 'invoiceNumber',
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('globals.quantity'),
+        align: 'left',
+        field: 'quantity',
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: t('globals.quantity'),
+        align: 'left',
+        field: 'total',
+        sortable: true,
+    },
+    {
+        name: 'shipped',
+        label: t('globals.quantity'),
+        align: 'left',
+        field: 'shipped',
+        sortable: true,
+    },
+]);
 
+const columns = computed(() => [
+    {
+        name: 'itemName',
+        label: t('globals.item'),
+        align: 'left',
+        field: 'itemName',
+        sortable: true,
+    },
+    {
+        name: 'subName',
+        label: t('globals.subItem'),
+        align: 'left',
+        field: 'subName',
+        sortable: true,
+    },
+    {
+        name: 'quantity',
+        label: t('globals.quantity'),
+        align: 'left',
+        field: 'quantity',
+        sortable: true,
+    },
+    {
+        name: 'price',
+        label: t('globals.price'),
+        align: 'left',
+        field: 'price',
+        sortable: true,
+    },
+    {
+        name: 'total',
+        label: t('globals.total'),
+        align: 'left',
+        field: 'total',
+        sortable: true,
+    },
+]);
 const store = arrayData.store;
 
 onUnmounted(() => state.unset('SupplierConsumption'));
@@ -122,13 +197,17 @@ const totalEntryPrice = (rows) => {
         totalQuantity = totalQuantity + quantity;
     }
     totalRows.value = { totalPrice, totalQuantity };
+    // expanded.value = rows.map((r) => r.id);
     return rows;
 };
-
+const tableRef = ref(null);
 onMounted(async () => {
     stateStore.rightDrawer = true;
     await getSupplierConsumptionData();
 });
+
+const expanded = ref([]);
+// const initialExpanded = rows.filter((r, i) => i % 3 === 0).map((r) => r.index);
 </script>
 
 <template>
@@ -179,60 +258,215 @@ onMounted(async () => {
             <SupplierConsumptionFilter data-key="SupplierConsumption" />
         </template>
     </RightMenu>
-    <QTable
-        :rows="rows"
-        row-key="id"
-        hide-header
-        class="full-width q-mt-md"
-        :no-data-label="t('No results')"
-    >
-        <template #body="{ row }">
-            <QTr>
-                <QTd no-hover>
-                    <span class="label">{{ t('supplier.consumption.entry') }}: </span>
-                    <span>{{ row.id }}</span>
-                </QTd>
-                <QTd no-hover>
-                    <span class="label">{{ t('globals.date') }}: </span>
-                    <span>{{ toDate(row.shipped) }}</span></QTd
+    <QCard class="full-width q-pa-md">
+        <QTable
+            flat
+            bordered
+            ref="tableRef"
+            :rows="rows"
+            :columns="headerColumns"
+            :table-colspan="9"
+            row-key="id"
+            virtual-scroll
+            :virtual-scroll-item-size="48"
+            :pagination="{
+                rowsPerPage: 0,
+            }"
+            :rows-per-page-options="[0]"
+            v-model:expanded="expanded"
+        >
+            <template v-slot:header="props">
+                <QTr :props="props">
+                    <QTh auto-width />
+
+                    <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                        {{ col.label }}
+                    </QTh>
+                </QTr>
+            </template>
+
+            <template v-slot:body="props">
+                <QTr :props="props" :key="`m_${props.row.id}`" class="bg-travel">
+                    <QTd auto-width>
+                        <QToggle
+                            v-model="props.expand"
+                            checked-icon="vn:eye"
+                            unchecked-icon="remove"
+                        />
+                    </QTd>
+
+                    <QTd v-for="col in props.cols" :key="col.name" :props="props">
+                        {{ col.value }}
+                    </QTd>
+                </QTr>
+                <QTr
+                    v-show="props.expand"
+                    :props="props"
+                    :key="`e_${props.row.id}`"
+                    class="q-virtual-scroll--with-prev"
                 >
-                <QTd colspan="6" no-hover>
-                    <span class="label">{{ t('globals.reference') }}: </span>
-                    <span>{{ row.invoiceNumber }}</span>
-                </QTd>
-            </QTr>
-            <QTr v-for="(buy, index) in row.buys" :key="index">
-                <QTd no-hover>
-                    <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
-                    <ItemDescriptorProxy :id="buy.itemFk" />
-                </QTd>
+                    <QTd colspan="100%">
+                        <QTable
+                            flat
+                            bordered
+                            color="secondary"
+                            card-class="bg-travel text-white"
+                            table-header-class=" text-white"
+                            ref="tableRef"
+                            :rows="props.row.buys"
+                            :columns="columns"
+                            hide-header
+                            :table-colspan="9"
+                            row-key="id"
+                            virtual-scroll
+                            :virtual-scroll-item-size="48"
+                            :pagination="{
+                                rowsPerPage: 0,
+                            }"
+                            :rows-per-page-options="[0]"
+                            v-model:expanded="expanded"
+                        >
+                            <template v-slot:header="props">
+                                <QTr :props="props">
+                                    <QTh
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ col.label }}
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template v-slot:body="props">
+                                <QTr :props="props" :key="`m_${props.row.id}`">
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :props="props"
+                                    >
+                                        {{ col.value }}
+                                    </QTd>
+                                </QTr>
+                            </template>
+                        </QTable>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable>
+    </QCard>
+    <!-- <QTable
+            :rows="rows"
+            row-key="id"
+            hide-header
+            class="full-width q-mt-md"
+            :no-data-label="t('No results')"
+        >
+            <template #body="{ row }">
+                <QTr>
+                    <QTd no-hover>
 
-                <QTd no-hover>
-                    <span>{{ buy.subName }}</span>
-                    <FetchedTags :item="buy" />
-                </QTd>
-                <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
-                <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
-                <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
-            </QTr>
-            <QTr>
-                <QTd colspan="5" no-hover>
-                    <span class="label">{{ t('Total entry') }}: </span>
-                    <span>{{ row.total }} €</span>
-                </QTd>
-                <QTd no-hover>
-                    <span class="label">{{ t('Total stems') }}: </span>
-                    <span>{{ row.quantity }}</span>
-                </QTd>
-            </QTr>
-        </template>
-    </QTable>
+                    </QTd>
+                    <QTd no-hover>
+                       </QTd
+                    >
+                    <QTd colspan="6" no-hover>
+
+                    </QTd>
+                </QTr>
+                <QTh>
+                    <QTd no-hover>
+                        <span class="label">ItemFk </span>
+                    </QTd>
+                    <QTd no-hover>
+                        <span class="header">subName </span>
+                    </QTd>
+                    <QTd no-hover>
+                        <span class="label"> Quanitity : </span>
+                    </QTd>
+                </QTh>
+                <QTr v-for="(buy, index) in row.buys" :key="index">
+                    <QTd no-hover>
+                        <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
+                        <ItemDescriptorProxy :id="buy.itemFk" />
+                    </QTd>
+
+                    <QTd no-hover>
+                        <span>{{ buy.subName }}</span>
+                        <FetchedTags :item="buy" />
+                    </QTd>
+                    <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
+                    <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
+                    <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
+                </QTr>
+                <QTr>
+                    <QTd colspan="5" no-hover>
+                        <span class="label">{{ t('Total entry') }}: </span>
+                        <span>{{ row.total }} €</span>
+                    </QTd>
+                    <QTd no-hover>
+                        <span class="label">{{ t('Total stems') }}: </span>
+                        <span>{{ row.quantity }}</span>
+                    </QTd>
+                </QTr>
+            </template>
+        </QTable> -->
 </template>
+<style lang="scss">
+.QTable__top {
+    padding: 0;
+}
 
+.QTable__bottom.row.items-center {
+    padding: 0;
+}
+</style>
 <style scoped lang="scss">
 .label {
+    padding-right: 5px;
     color: var(--vn-label-color);
 }
+.header {
+    flex: 1 0 33%;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    height: 35px;
+    border-bottom: 1px solid $primary;
+    background-color: var(--vn-page-color);
+    font-size: 19px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+.footer {
+    flex: 1 0 33%;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    height: 35px;
+    border-bottom: 1px solid $primary;
+    background-color: var(--vn-page-color);
+    font-size: 19px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.bg-travel {
+    background-color: var(--vn-page-color);
+    border-bottom: 2px solid $primary;
+}
+
+.header {
+    flex: 1 0 33%;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    height: 35px;
+    border-bottom: 1px solid $primary;
+    background-color: var(--vn-page-color);
+    font-size: 19px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
 </style>
 
 <i18n>
diff --git a/src/pages/Zone/ZoneUpcoming.vue b/src/pages/Zone/ZoneUpcoming.vue
index c74ae6078..1b5ed87cf 100644
--- a/src/pages/Zone/ZoneUpcoming.vue
+++ b/src/pages/Zone/ZoneUpcoming.vue
@@ -61,11 +61,27 @@ onMounted(() => weekdayStore.initStore());
                 v-for="(detail, index) in details"
                 :key="index"
                 class="full-width flex q-mb-lg"
+                style="flex-direction: column"
             >
-                <span class="header">
-                    {{ getHeaderTitle(detail.shipped) }}
-                </span>
-                <QTable flat :columns="columns" :rows="detail.lines" class="full-width" />
+                <div class="column full-width">
+                    <div class="flex">
+                        <span class="header">
+                            {{ getHeaderTitle(detail.shipped) }}
+                        </span>
+                        <span class="header">
+                            {{ getHeaderTitle(detail.shipped) }}
+                        </span>
+                        <span class="header">
+                            {{ getHeaderTitle(detail.shipped) }}
+                        </span>
+                    </div>
+                    <QTable
+                        flat
+                        :columns="columns"
+                        :rows="detail.lines"
+                        class="full-width"
+                    />
+                </div>
             </div>
         </QCard>
     </QPage>
@@ -73,7 +89,7 @@ onMounted(() => weekdayStore.initStore());
 
 <style scoped lang="scss">
 .header {
-    min-width: 100% !important;
+    flex: 1 0 33%;
     display: flex;
     align-items: center;
     padding-left: 8px;