diff --git a/src/apps/admin/index.tsx b/src/apps/admin/index.tsx
index 2009112..503912a 100644
--- a/src/apps/admin/index.tsx
+++ b/src/apps/admin/index.tsx
@@ -9,13 +9,17 @@ import { v4 } from 'uuid';
 
 export default function Admin() {
   const [dataItem, setDataItem] = useState<any[]>([]);
-  const [dataItemMaster, setDataItemMaster] = useState<any[]>([]);
-
   const [dataItemKeys, setDataItemKeys] = useState<any[]>([]);
-  const [dataItemMasterKeys, setDataItemMasterKeys] = useState<any[]>([]);
-
   const [loadingDataItem, setLoadingDataItem] = useState<boolean>(false);
+  const [dataItemTotalPax, setDataItemTotalPax] = useState<number>(0);
+  const [dataItemTotalRevenue, setDataItemTotalRevenue] = useState<number>(0);
+
+  const [dataItemMaster, setDataItemMaster] = useState<any[]>([]);
+  const [dataItemMasterKeys, setDataItemMasterKeys] = useState<any[]>([]);
   const [loadingDataItemMaster, setLoadingDataItemMaster] = useState<boolean>(false);
+  const [dataItemMasterTotalPax, setDataItemMasterTotalPax] = useState<number>(0);
+  const [dataItemMasterTotalRevenue, setDataItemMasterTotalRevenue] = useState<number>(0);
+
   const [filterDate, setFilerDate] = useState(dayjs());
 
   async function getDataItem(params: any) {
@@ -44,6 +48,11 @@ export default function Admin() {
             };
           });
 
+        const totalPax = lodash.sumBy(data, (item: any) => Number(item.tr_item__qty));
+        const totalRevenue = lodash.sumBy(data, (item: any) => Number(item.tr_item__total_net_price));
+        setDataItemTotalPax(totalPax);
+        setDataItemTotalRevenue(totalRevenue);
+
         setDataItemKeys(groupedData.map((item) => item.key));
         setDataItem(groupedData);
       })
@@ -88,6 +97,11 @@ export default function Admin() {
             };
           });
 
+        const totalPax = lodash.sumBy(data, (item: any) => Number(item.tr_item__qty));
+        const totalRevenue = lodash.sumBy(data, (item: any) => Number(item.tr_item_bundling__total_net_price));
+        setDataItemMasterTotalPax(totalPax);
+        setDataItemMasterTotalRevenue(totalRevenue);
+
         setDataItemMasterKeys(groupedData.map((item) => item.key));
         setDataItemMaster(groupedData);
       })
@@ -116,7 +130,7 @@ export default function Admin() {
         <Col xl={8} lg={8} md={12} span={24}>
           <DatePicker
             size="large"
-            popupStyle={{ fontSize: 18 }}
+            popupStyle={{ fontSize: 16 }}
             allowClear={false}
             value={filterDate}
             style={{ width: '100%' }}
@@ -127,76 +141,125 @@ export default function Admin() {
       </Row>
       <div style={{ marginBottom: 20 }}></div>
 
-      <Card
-        title={
-          <div style={{ paddingTop: 10, paddingBottom: 10 }}>
-            <div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item</div>
-            <div
-              style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
-            >{`Laporan pendapatan item per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
-          </div>
-        }
-      >
-        <Table
-          bordered
-          size="small"
-          dataSource={dataItem}
-          pagination={false}
-          loading={loadingDataItem}
-          scroll={{ x: 'max-width', y: 350 }}
-          rowKey={(child) => child.key} // Make sure each child row has a unique key
-          expandable={{ expandedRowKeys: dataItemKeys, showExpandColumn: false }}
-          rowClassName={(row) => (row.key ? 'row-group' : '')}
-          rowHoverable={false}
-          columns={[
-            { key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
-            { key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
-            {
-              key: 'tr_item__total_net_price',
-              dataIndex: 'tr_item__total_net_price',
-              title: 'REVENUE',
-              width: 120,
-              render: (value) => currencyFormatter({ value }),
-            },
-          ]}
-        />
-      </Card>
-      <div style={{ marginBottom: 20 }}></div>
-      <Card
-        title={
-          <div style={{ paddingTop: 10, paddingBottom: 10 }}>
-            <div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item Master</div>
-            <div
-              style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
-            >{`Laporan pendapatan item master per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
-          </div>
-        }
-      >
-        <Table
-          bordered
-          size="small"
-          dataSource={dataItemMaster}
-          pagination={false}
-          loading={loadingDataItemMaster}
-          scroll={{ x: 'max-width', y: 350 }}
-          rowKey={(child) => child.key} // Make sure each child row has a unique key
-          expandable={{ expandedRowKeys: dataItemMasterKeys, showExpandColumn: false }}
-          rowClassName={(row) => (row.key ? 'row-group' : '')}
-          rowHoverable={false}
-          columns={[
-            { key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
+      <Row gutter={[16, 16]}>
+        <Col xl={12} lg={12} span={24}>
+          <Card
+            title={
+              <div style={{ paddingTop: 10, paddingBottom: 10 }}>
+                <div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item</div>
+                <div
+                  style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
+                >{`Laporan pendapatan item per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
+              </div>
+            }
+          >
+            <Row gutter={[8, 8]}>
+              <Col span={12}>
+                <Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+                  <div>
+                    <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL PAX</div>
+                    <div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>{dataItemTotalPax}</div>
+                  </div>
+                </Card>
+              </Col>
+              <Col span={12}>
+                <Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+                  <div>
+                    <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL REVENUE</div>
+                    <div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>
+                      {currencyFormatter({ value: dataItemTotalRevenue })}
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+            <div style={{ marginBottom: 10 }}></div>
+            <Table
+              bordered
+              size="small"
+              dataSource={dataItem}
+              pagination={false}
+              loading={loadingDataItem}
+              scroll={{ x: 'max-width', y: 350 }}
+              rowKey={(child) => child.key} // Make sure each child row has a unique key
+              expandable={{ expandedRowKeys: dataItemKeys, showExpandColumn: false }}
+              rowClassName={(row) => (row.key ? 'row-group' : '')}
+              rowHoverable={false}
+              columns={[
+                { key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
+                { key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
+                {
+                  key: 'tr_item__total_net_price',
+                  dataIndex: 'tr_item__total_net_price',
+                  title: 'REVENUE',
+                  width: 120,
+                  render: (value) => currencyFormatter({ value }),
+                },
+              ]}
+            />
+          </Card>
+        </Col>
+        <Col xl={12} lg={12} span={24}>
+          <Card
+            title={
+              <div style={{ paddingTop: 10, paddingBottom: 10 }}>
+                <div style={{ fontSize: 16, fontWeight: 600 }}>Pendapatan Per Item Master</div>
+                <div
+                  style={{ fontWeight: 400, fontSize: 12, color: 'grey' }}
+                >{`Laporan pendapatan item master per tanggal ${filterDate.format('DD-MM-YYYY')}`}</div>
+              </div>
+            }
+          >
+            <Row gutter={[8, 8]}>
+              <Col span={12}>
+                <Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+                  <div>
+                    <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL PAX</div>
+                    <div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>
+                      {dataItemMasterTotalPax}
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+              <Col span={12}>
+                <Card styles={{ body: { padding: '6px 12px 6px 12px' } }}>
+                  <div>
+                    <div style={{ fontSize: 12, fontWeight: 600, color: 'rgba(0,0,0,0.4)' }}>TOTAL REVENUE</div>
+                    <div style={{ fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.6)' }}>
+                      {currencyFormatter({ value: dataItemMasterTotalRevenue })}
+                    </div>
+                  </div>
+                </Card>
+              </Col>
+            </Row>
+            <div style={{ marginBottom: 10 }}></div>
+            <Table
+              bordered
+              size="small"
+              dataSource={dataItemMaster}
+              pagination={false}
+              loading={loadingDataItemMaster}
+              scroll={{ x: 'max-width', y: 350 }}
+              rowKey={(child) => child.key} // Make sure each child row has a unique key
+              expandable={{ expandedRowKeys: dataItemMasterKeys, showExpandColumn: false }}
+              rowClassName={(row) => (row.key ? 'row-group' : '')}
+              rowHoverable={false}
+              columns={[
+                { key: 'title', dataIndex: 'title', title: 'TITLE', width: 170 },
 
-            { key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
-            {
-              key: 'tr_item_bundling__total_net_price',
-              dataIndex: 'tr_item_bundling__total_net_price',
-              title: 'REVENUE',
-              width: 120,
-              render: (value) => currencyFormatter({ value }),
-            },
-          ]}
-        />
-      </Card>
+                { key: 'tr_item__qty', dataIndex: 'tr_item__qty', title: 'PAX', width: 70 },
+                {
+                  key: 'tr_item_bundling__total_net_price',
+                  dataIndex: 'tr_item_bundling__total_net_price',
+                  title: 'REVENUE',
+                  width: 120,
+                  render: (value) => currencyFormatter({ value }),
+                },
+              ]}
+            />
+          </Card>
+        </Col>
+      </Row>
     </AdminLayout>
   );
 }