diff --git a/cope2n-fe/src/components/report-detail/report-overview-table.tsx b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
index 9fecae0..2102e35 100644
--- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx
+++ b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
@@ -1,7 +1,6 @@
 import type { TableColumnsType } from 'antd';
 import { Table } from 'antd';
-import { useOverViewReport } from 'queries/report';
-import React, { useState } from 'react';
+import React from 'react';
 
 interface DataType {
   key: React.Key;
@@ -109,10 +108,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'snImeiAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.snImeiAAR * 100 < 98;
+          const isAbnormal = record.snImeiAAR < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.snImeiAAR * 100).toFixed(2)}
+              {record.snImeiAAR.toFixed(2)}
             </span>
           );
         },
@@ -123,10 +122,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'purchaseDateAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.purchaseDateAAR * 100 < 98;
+          const isAbnormal = record.purchaseDateAAR < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.purchaseDateAAR * 100).toFixed(2)}
+              {record.purchaseDateAAR.toFixed(2)}
             </span>
           );
         },
@@ -137,10 +136,10 @@ const columns: TableColumnsType<DataType> = [
         key: 'retailerNameAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.retailerNameAAR * 100 < 98;
+          const isAbnormal = record.retailerNameAAR < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.retailerNameAAR * 100).toFixed(2)}
+              {record.retailerNameAAR.toFixed(2)}
             </span>
           );
         },
@@ -210,14 +209,22 @@ interface ReportOverViewTableProps {
   data: any;
 }
 
-const ReportOverViewTable: React.FC = () => {
-  const [pagination, setPagination] = useState({
-    page: 1,
-    page_size: 10,
-  });
-  const { isLoading, data } = useOverViewReport({
-    page: pagination.page,
-  });
+const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
+  pagination,
+  setPagination,
+  isLoading,
+  data,
+}) => {
+  // const [pagination, setPagination] = useState({
+  //   page: 1,
+  //   page_size: 10,
+  // });
+  // const { isLoading, data } = useOverViewReport({
+  //   page: pagination.page,
+  // });
+
+  console.log('check >>>', pagination, isLoading, data);
+
   const overviewDataResponse = data as any;
   const dataSubsRows = overviewDataResponse?.overview_data
     .map((item, index) => {
@@ -349,10 +356,10 @@ const ReportOverViewTable: React.FC = () => {
         key: 'snImeiAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.snImeiAAR * 100 < 98;
+          const isAbnormal = record.snImeiAAR < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.snImeiAAR * 100).toFixed(2)}
+              {record.snImeiAAR.toFixed(2)}
             </span>
           );
         },
@@ -363,10 +370,10 @@ const ReportOverViewTable: React.FC = () => {
         key: 'purchaseDateAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.purchaseDateAAR * 100 < 98;
+          const isAbnormal = record.purchaseDateAAR < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.purchaseDateAAR * 100).toFixed(2)}
+              {record.purchaseDateAAR.toFixed(2)}
             </span>
           );
         },
@@ -377,10 +384,10 @@ const ReportOverViewTable: React.FC = () => {
         key: 'retailerNameAAR',
         width: '130px',
         render: (_, record) => {
-          const isAbnormal = record.retailerNameAAR * 100 < 98;
+          const isAbnormal = record.retailerNameAAR < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.retailerNameAAR * 100).toFixed(2)}
+              {record.retailerNameAAR.toFixed(2)}
             </span>
           );
         },
diff --git a/cope2n-fe/src/models/report.ts b/cope2n-fe/src/models/report.ts
index c769109..77b03ed 100644
--- a/cope2n-fe/src/models/report.ts
+++ b/cope2n-fe/src/models/report.ts
@@ -3,6 +3,7 @@ import { UseMutationOptions } from '@tanstack/react-query';
 export interface ReportDetailList {
   report_detail: ReportItemDetail[];
   page: Page;
+  metadata: Metadata;
 }
 
 export interface ReportItemDetail {
@@ -28,6 +29,11 @@ export interface ReportItemDetail {
   'Retailer_Revised Accuracy': any;
 }
 
+export interface Metadata {
+  subsidiary: string;
+  start_at: string;
+  end_at: string;
+}
 export interface Page {
   number: number;
   total_pages: number;
diff --git a/cope2n-fe/src/pages/dashboard/index.tsx b/cope2n-fe/src/pages/dashboard/index.tsx
index c1f28f4..3b71a0c 100644
--- a/cope2n-fe/src/pages/dashboard/index.tsx
+++ b/cope2n-fe/src/pages/dashboard/index.tsx
@@ -1,8 +1,10 @@
 import { t } from '@lingui/macro';
-import { Button } from 'antd';
+import { Button, DatePicker, Form, Select } from 'antd';
 import { SbtPageHeader } from 'components/page-header';
 import { ReportOverViewTable } from 'components/report-detail';
 import { Dayjs } from 'dayjs';
+import { useOverViewReport } from 'queries/report';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export interface ReportFormValues {
@@ -12,35 +14,33 @@ export interface ReportFormValues {
 
 const Dashboard = () => {
   const navigate = useNavigate();
-  // const [form] = Form.useForm<ReportFormValues>();
-  // const [pagination, setPagination] = useState({
-  //   page: 1,
-  //   page_size: 10,
-  // });
-  // const [fromData, setFormData] = useState<{
-  //   start_date: string;
-  //   end_date: string;
-  //   subsidiary: string;
-  // }>({
-  //   start_date: '',
-  //   end_date: '',
-  //   subsidiary: '',
-  // });
-  // const { isLoading, data } = useOverViewReport({
-  //   page: pagination.page,
-  //   page_size: pagination.page_size,
-  //   start_date: fromData.start_date,
-  //   end_date: fromData.end_date,
-  //   subsidiary: fromData.subsidiary,
-  // });
-  // const handleSubmit = (values: ReportFormValues) => {
-  //   console.log('check values >>>', values);
-  //   setFormData({
-  //     start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'),
-  //     end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'),
-  //     subsidiary: values.subsidiary,
-  //   });
-  // };
+  const [form] = Form.useForm<ReportFormValues>();
+  const [pagination, setPagination] = useState({
+    page: 1,
+    page_size: 10,
+  });
+  const [fromData, setFormData] = useState<{
+    start_date: string;
+    end_date: string;
+    subsidiary: string;
+  }>({
+    start_date: '',
+    end_date: '',
+    subsidiary: '',
+  });
+  const { isLoading, data } = useOverViewReport({
+    start_date: fromData.start_date,
+    end_date: fromData.end_date,
+    subsidiary: fromData.subsidiary,
+  });
+  const handleSubmit = (values: ReportFormValues) => {
+    console.log('check values >>>', values);
+    setFormData({
+      start_date: values.dateRange[0].format('YYYY-MM-DDTHH:mm:ssZ'),
+      end_date: values.dateRange[1].format('YYYY-MM-DDTHH:mm:ssZ'),
+      subsidiary: values.subsidiary,
+    });
+  };
 
   return (
     <>
@@ -51,13 +51,13 @@ const Dashboard = () => {
             {/* <Button type='primary' icon={<DownloadOutlined />}>
               Download
             </Button> */}
-            <Button type='primary' onClick={() => navigate('/reports')}>
+            {/* <Button type='primary' onClick={() => navigate('/reports')}>
               {t`Go to Report page`}
-            </Button>
+            </Button> */}
           </>
         }
       />
-      {/* <Form
+      <Form
         form={form}
         style={{ display: 'flex', flexDirection: 'row', gap: 10 }}
         onFinish={handleSubmit}
@@ -97,12 +97,17 @@ const Dashboard = () => {
           />
         </Form.Item>
         <Form.Item>
-          <Button type='primary' htmlType='submit'>
+          <Button type='primary' htmlType='submit' style={{ height: 38 }}>
             Submit
           </Button>
         </Form.Item>
-      </Form> */}
-      <ReportOverViewTable />
+      </Form>
+      <ReportOverViewTable
+        pagination={pagination}
+        setPagination={setPagination}
+        isLoading={isLoading}
+        data={data}
+      />
     </>
   );
 };
diff --git a/cope2n-fe/src/pages/reports/report_detail/index.tsx b/cope2n-fe/src/pages/reports/report_detail/index.tsx
index 6aabc84..589d33a 100644
--- a/cope2n-fe/src/pages/reports/report_detail/index.tsx
+++ b/cope2n-fe/src/pages/reports/report_detail/index.tsx
@@ -1,6 +1,13 @@
 import { DownloadOutlined } from '@ant-design/icons';
 import { t } from '@lingui/macro';
-import { Button, Space, Table, TableColumnsType, Tooltip } from 'antd';
+import {
+  Button,
+  Space,
+  Table,
+  TableColumnsType,
+  Tooltip,
+  Typography,
+} from 'antd';
 import { SbtPageHeader } from 'components/page-header';
 import { Dayjs } from 'dayjs';
 import { ReportDetailList, ReportItemDetail } from 'models';
@@ -19,10 +26,11 @@ const ReportContainer = styled.div`
   margin-bottom: 16px;
 `;
 
-const CustomSpace = styled(Space)`
-  &.sbt-space {
-    /* Add your custom styles here */
-  }
+const HeaderContainer = styled(Space)`
+  display: flex;
+  flex-direction: row;\
+  gap: 16px;
+  margin-bottom: 16px;
 `;
 
 const ReportInformationContainer = styled.div`
@@ -73,11 +81,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
     dataIndex: 'IMEI1 Accuracy',
     key: 'IMEI1 Accuracy',
     render: (_, record) => {
-      const isAbnormal = Number(record['IMEI1 Accuracy']) * 100 < 25;
+      const isAbnormal = Number(record['IMEI1 Accuracy']) < 25;
       return (
         <span style={{ color: isAbnormal ? 'red' : '' }}>
           {record['IMEI1 Accuracy'] &&
-            (Number(record['IMEI1 Accuracy']) * 100).toFixed(2)}
+            Number(record['IMEI1 Accuracy']).toFixed(2)}
         </span>
       );
     },
@@ -98,12 +106,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
     dataIndex: 'Invoice_Purchase Date Accuracy',
     key: 'Invoice_Purchase Date Accuracy',
     render: (_, record) => {
-      const isAbnormal =
-        Number(record['Invoice_Purchase Date Accuracy']) * 100 < 25;
+      const isAbnormal = Number(record['Invoice_Purchase Date Accuracy']) < 25;
       return (
         <span style={{ color: isAbnormal ? 'red' : '' }}>
           {record['Invoice_Purchase Date Accuracy'] &&
-            (Number(record['Invoice_Purchase Date Accuracy']) * 100).toFixed(2)}
+            Number(record['Invoice_Purchase Date Accuracy']).toFixed(2)}
         </span>
       );
     },
@@ -124,11 +131,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
     dataIndex: 'Invoice_Retailer Accuracy',
     key: 'Invoice_Retailer Accuracy',
     render: (_, record) => {
-      const isAbnormal = Number(record['Invoice_Retailer Accuracy']) * 100 < 25;
+      const isAbnormal = Number(record['Invoice_Retailer Accuracy']) < 25;
       return (
         <span style={{ color: isAbnormal ? 'red' : '' }}>
           {record['Invoice_Retailer Accuracy'] &&
-            (Number(record['Invoice_Retailer Accuracy']) * 100).toFixed(2)}
+            Number(record['Invoice_Retailer Accuracy']).toFixed(2)}
         </span>
       );
     },
@@ -138,11 +145,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
     dataIndex: 'Retailer_Revised Accuracy',
     key: 'Retailer_Revised Accuracy',
     render: (_, record) => {
-      const isAbnormal = Number(record['Retailer_Revised Accuracy']) * 100 < 25;
+      const isAbnormal = Number(record['Retailer_Revised Accuracy']) < 25;
       return (
         <span style={{ color: isAbnormal ? 'red' : '' }}>
           {record['Retailer_Revised Accuracy'] &&
-            (Number(record['Retailer_Revised Accuracy']) * 100).toFixed(2)}
+            Number(record['Retailer_Revised Accuracy']).toFixed(2)}
         </span>
       );
     },
@@ -152,11 +159,11 @@ const columns: TableColumnsType<ReportItemDetail> = [
     dataIndex: 'OCR Image Accuracy',
     key: 'OCR Image Accuracy',
     render: (_, record) => {
-      const isAbnormal = Number(record['OCR Image Accuracy']) * 100 < 25;
+      const isAbnormal = Number(record['OCR Image Accuracy']) < 25;
       return (
         <span style={{ color: isAbnormal ? 'red' : '' }}>
           {record['OCR Image Accuracy'] &&
-            (Number(record['OCR Image Accuracy']) * 100).toFixed(2)}
+            Number(record['OCR Image Accuracy']).toFixed(2)}
         </span>
       );
     },
@@ -283,6 +290,27 @@ const ReportDetail = () => {
           </Button>
         }
       />
+      <HeaderContainer>
+        <Typography.Title level={5}>
+          Subsidiary:{' '}
+          <span style={{ fontWeight: '400' }}>
+            {report_data?.metadata?.subsidiary}
+          </span>
+        </Typography.Title>
+
+        <Typography.Title level={5}>
+          Start date:{' '}
+          <span style={{ fontWeight: '400' }}>
+            {report_data?.metadata?.start_at}
+          </span>
+        </Typography.Title>
+        <Typography.Title level={5}>
+          End date:{' '}
+          <span style={{ fontWeight: '400' }}>
+            {report_data?.metadata?.end_at}
+          </span>
+        </Typography.Title>
+      </HeaderContainer>
       <ReportContainer>
         <Table
           loading={isLoading}