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 3f5f813..7d79d9e 100644
--- a/cope2n-fe/src/components/report-detail/report-overview-table.tsx
+++ b/cope2n-fe/src/components/report-detail/report-overview-table.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 interface DataType {
   key: React.Key;
   subSidiaries: string;
-  extractionDate: string | Date;
+  extractionDate: string;
   snOrImeiNumber: number;
   invoiceNumber: number;
   totalImages: number;
@@ -28,12 +28,26 @@ const columns: TableColumnsType<DataType> = [
     dataIndex: 'subSidiaries',
     key: 'subSidiaries',
     width: '100px',
+    render: (_, record) => {
+      if (record.subSidiaries === '+') return '';
+      return record.subSidiaries;
+    },
   },
   {
     title: 'OCR extraction date',
     dataIndex: 'extractionDate',
     key: 'extractionDate',
     width: '130px',
+    render: (_, record) => {
+      if (record.extractionDate.includes('Subtotal'))
+        return (
+          <span style={{ fontWeight: 'bold' }}>{record.extractionDate}</span>
+        );
+      return record.extractionDate;
+    },
+    filters: [{ text: 'Subtotal', value: 'Subtotal' }],
+    filterMode: 'menu',
+    onFilter: (value: string, record) => record.extractionDate.includes(value),
   },
   {
     title: 'OCR Images',
@@ -73,7 +87,7 @@ const columns: TableColumnsType<DataType> = [
         key: 'successfulPercentage',
         width: '120px',
         render: (_, record) => {
-          return <span>{(record.successfulPercentage * 100).toFixed(2)}</span>;
+          return <span>{(record.successfulPercentage * 100)?.toFixed(2)}</span>;
         },
       },
       {
@@ -91,7 +105,7 @@ const columns: TableColumnsType<DataType> = [
           const isAbnormal = record.badPercentage * 100 > 10;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.badPercentage * 100).toFixed(2)}
+              {(record.badPercentage * 100)?.toFixed(2)}
             </span>
           );
         },
@@ -111,7 +125,7 @@ const columns: TableColumnsType<DataType> = [
           const isAbnormal = record.snImeiAAR * 100 < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.snImeiAAR * 100).toFixed(2)}
+              {(record.snImeiAAR * 100)?.toFixed(2)}
             </span>
           );
         },
@@ -139,7 +153,7 @@ const columns: TableColumnsType<DataType> = [
           const isAbnormal = record.retailerNameAAR * 100 < 98;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.retailerNameAAR * 100).toFixed(2)}
+              {(record.retailerNameAAR * 100)?.toFixed(2)}
             </span>
           );
         },
@@ -157,7 +171,7 @@ const columns: TableColumnsType<DataType> = [
           const isAbnormal = record.snImeiAPT > 2;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {record.snImeiAPT.toFixed(2)}
+              {record?.snImeiAPT?.toFixed(2)}
             </span>
           );
         },
@@ -170,7 +184,7 @@ const columns: TableColumnsType<DataType> = [
           const isAbnormal = record.invoiceAPT > 2;
           return (
             <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {record.invoiceAPT.toFixed(2)}
+              {record?.invoiceAPT?.toFixed(2)}
             </span>
           );
         },
@@ -215,231 +229,31 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
   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) => {
-      if (item.subs.includes('+')) {
-        return {
-          key: index,
-          subSidiaries: '',
-          extractionDate: item.extraction_date,
-          snOrImeiNumber: '',
-          invoiceNumber: '',
-          totalImages: item.total_images,
-          successfulNumber: item.images_quality.successful,
-          successfulPercentage: item.images_quality.successful_percent,
-          badNumber: item.images_quality.bad,
-          badPercentage: item.images_quality.bad_percent,
-          snImeiAAR: item.average_accuracy_rate.imei,
-          purchaseDateAAR: item.average_accuracy_rate.purchase_date,
-          retailerNameAAR: item.average_accuracy_rate.retailer_name,
-          snImeiAPT: item.average_processing_time.imei,
-          invoiceAPT: item.average_processing_time.invoice,
-          snImeiTC: item.usage.imei,
-          invoiceTC: item.usage.invoice,
-        };
-      } else {
-        return null;
-      }
-    })
-    .filter((item) => item);
+  const dataSubsRows = overviewDataResponse?.overview_data.map(
+    (item, index) => {
+      return {
+        key: index,
+        subSidiaries: item.subs,
+        extractionDate: item.extraction_date,
+        snOrImeiNumber: item.num_imei,
+        invoiceNumber: item.num_invoice,
+        totalImages: item.total_images,
+        successfulNumber: item.images_quality.successful,
+        successfulPercentage: item.images_quality.successful_percent,
+        badNumber: item.images_quality.bad,
+        badPercentage: item.images_quality.bad_percent,
+        snImeiAAR: item.average_accuracy_rate.imei,
+        purchaseDateAAR: item.average_accuracy_rate.purchase_date,
+        retailerNameAAR: item.average_accuracy_rate.retailer_name,
+        snImeiAPT: item.average_processing_time.imei,
+        invoiceAPT: item.average_processing_time.invoice,
+        snImeiTC: item.usage.imei,
+        invoiceTC: item.usage.invoice,
+      };
+    },
+  );
 
-  const expandedRowRender = () => {
-    const subData = overviewDataResponse?.overview_data
-      .map((item, index) => {
-        if (!item.subs.includes('+')) {
-          return {
-            key: index,
-            subSidiaries: item.subs,
-            extractionDate: item.extraction_date,
-            snOrImeiNumber: item.num_imei,
-            invoiceNumber: item.num_invoice,
-            totalImages: item.total_images,
-            successfulNumber: item.images_quality.successful,
-            successfulPercentage: item.images_quality.successful_percent,
-            badNumber: item.images_quality.bad,
-            badPercentage: item.images_quality.bad_percent,
-            snImeiAAR: item.average_accuracy_rate.imei,
-            purchaseDateAAR: item.average_accuracy_rate.purchase_date,
-            retailerNameAAR: item.average_accuracy_rate.retailer_name,
-            snImeiAPT: item.average_processing_time.imei,
-            invoiceAPT: item.average_processing_time.invoice,
-            snImeiTC: item.usage.imei,
-            invoiceTC: item.usage.invoice,
-          };
-        } else {
-          return null;
-        }
-      })
-      .filter((item) => item);
-
-    const subColumns: TableColumnsType<DataType> = [
-      {
-        title: 'Subs',
-        dataIndex: 'subSidiaries',
-        key: 'subSidiaries',
-        width: '100px',
-      },
-      {
-        title: 'OCR extraction date',
-        dataIndex: 'extractionDate',
-        key: 'extractionDate',
-        width: '130px',
-      },
-      {
-        title: 'SN/IMEI',
-        dataIndex: 'snOrImeiNumber',
-        key: 'snOrImeiNumber',
-        width: '50px',
-      },
-      {
-        title: 'Invoice',
-        dataIndex: 'invoiceNumber',
-        key: 'invoiceNumber',
-        width: '50px',
-      },
-      {
-        title: 'Total Images',
-        dataIndex: 'totalImages',
-        key: 'totalImages',
-        width: '130px',
-      },
-      {
-        title: 'Successful',
-        dataIndex: 'successfulNumber',
-        key: 'successfulNumber',
-        width: '50px',
-      },
-      {
-        title: '% Successful',
-        dataIndex: 'successfulPercentage',
-        key: 'successfulPercentage',
-        width: '120px',
-        render: (_, record) => {
-          return <span>{(record.successfulPercentage * 100).toFixed(2)}</span>;
-        },
-      },
-      {
-        title: 'Bad',
-        dataIndex: 'badNumber',
-        key: 'badNumber',
-        width: '30px',
-      },
-      {
-        title: '% Bad',
-        dataIndex: 'badPercentage',
-        key: 'badPercentage',
-        width: '60px',
-        render: (_, record) => {
-          const isAbnormal = record.badPercentage * 100 > 10;
-          return (
-            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.badPercentage * 100).toFixed(2)}
-            </span>
-          );
-        },
-      },
-
-      {
-        title: 'IMEI / Serial no.',
-        dataIndex: 'snImeiAAR',
-        key: 'snImeiAAR',
-        width: '130px',
-        render: (_, record) => {
-          const isAbnormal = record.snImeiAAR * 100 < 98;
-          return (
-            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.snImeiAAR * 100).toFixed(2)}
-            </span>
-          );
-        },
-      },
-      {
-        title: 'Purchase date',
-        dataIndex: 'purchaseDateAAR',
-        key: 'purchaseDateAAR',
-        width: '130px',
-        render: (_, record) => {
-          const isAbnormal = record.purchaseDateAAR * 100 < 98;
-          return (
-            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.purchaseDateAAR * 100).toFixed(2)}
-            </span>
-          );
-        },
-      },
-      {
-        title: 'Retailer name',
-        dataIndex: 'retailerNameAAR',
-        key: 'retailerNameAAR',
-        width: '130px',
-        render: (_, record) => {
-          const isAbnormal = record.retailerNameAAR * 100 < 98;
-          return (
-            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {(record.retailerNameAAR * 100).toFixed(2)}
-            </span>
-          );
-        },
-      },
-
-      {
-        title: 'SN/IMEI',
-        dataIndex: 'snImeiAPT',
-        key: 'snImeiAPT',
-        render: (_, record) => {
-          const isAbnormal = record.snImeiAPT > 2;
-          return (
-            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {record.snImeiAPT.toFixed(2)}
-            </span>
-          );
-        },
-      },
-      {
-        title: 'Invoice',
-        dataIndex: 'invoiceAPT',
-        key: 'invoiceAPT',
-        render: (_, record) => {
-          const isAbnormal = record.invoiceAPT > 2;
-          return (
-            <span style={{ color: isAbnormal ? 'red' : '' }}>
-              {record.invoiceAPT.toFixed(2)}
-            </span>
-          );
-        },
-      },
-      {
-        title: 'SN/IMEI',
-        dataIndex: 'snImeiTC',
-        key: 'snImeiTC',
-      },
-      {
-        title: 'Invoice',
-        dataIndex: 'invoiceTC',
-        key: 'invoiceTC',
-      },
-    ];
-    return (
-      <Table
-        columns={subColumns}
-        dataSource={subData}
-        pagination={false}
-        bordered
-        // showHeader={false}
-      />
-    );
-  };
   return (
     <div>
       <Table
@@ -448,7 +262,6 @@ const ReportOverViewTable: React.FC<ReportOverViewTableProps> = ({
         dataSource={dataSubsRows}
         bordered
         size='small'
-        expandable={{ expandedRowRender, defaultExpandedRowKeys: [0, 1] }}
         scroll={{ x: 2000 }}
         pagination={{
           current: pagination.page,
diff --git a/cope2n-fe/src/components/report-detail/report-table.tsx b/cope2n-fe/src/components/report-detail/report-table.tsx
index 0a929cc..7983fd8 100644
--- a/cope2n-fe/src/components/report-detail/report-table.tsx
+++ b/cope2n-fe/src/components/report-detail/report-table.tsx
@@ -62,9 +62,12 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Purchase Date Acc',
       key: 'Purchase Date Acc',
       render: (_, record) => {
+        const isAbnormal = record['Purchase Date Acc'] * 100 < 98;
         return (
-          record['Purchase Date Acc'] &&
-          Number(record['Purchase Date Acc']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Purchase Date Acc'] &&
+              (Number(record['Purchase Date Acc']) * 100)?.toFixed(2)}
+          </span>
         );
       },
     },
@@ -74,8 +77,12 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Retailer Acc',
       key: 'Retailer Acc',
       render: (_, record) => {
+        const isAbnormal = record['Retailer Acc'] * 100 < 98;
         return (
-          record['Retailer Acc'] && Number(record['Retailer Acc']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Retailer Acc'] &&
+              (Number(record['Retailer Acc']) * 100)?.toFixed(2)}
+          </span>
         );
       },
     },
@@ -84,7 +91,13 @@ const ReportTable: React.FC = () => {
       dataIndex: 'IMEI Acc',
       key: 'IMEI Acc',
       render: (_, record) => {
-        return record['IMEI Acc'] && Number(record['IMEI Acc']).toFixed(2);
+        const isAbnormal = record['IMEI Acc'] * 100 < 98;
+        return (
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['IMEI Acc'] &&
+              (Number(record['IMEI Acc']) * 100)?.toFixed(2)}
+          </span>
+        );
       },
     },
     {
@@ -92,8 +105,12 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Avg Accuracy',
       key: 'Avg Accuracy',
       render: (_, record) => {
+        const isAbnormal = record['Avg Accuracy'] * 100 < 98;
         return (
-          record['Avg Accuracy'] && Number(record['Avg Accuracy']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Avg Accuracy'] &&
+              (Number(record['Avg Accuracy']) * 100)?.toFixed(2)}
+          </span>
         );
       },
     },
@@ -102,9 +119,12 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Avg. Client Request Time',
       key: 'Avg. Client Request Time',
       render: (_, record) => {
+        const isAbnormal = record['Avg Client Request Time'] > 2;
         return (
-          record['Avg Client Request Time'] &&
-          Number(record['Avg Client Request Time']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Avg Client Request Time'] &&
+              Number(record['Avg Client Request Time'])?.toFixed(2)}
+          </span>
         );
       },
     },
@@ -113,9 +133,12 @@ const ReportTable: React.FC = () => {
       dataIndex: 'Avg. OCR Processing Time',
       key: 'Avg. OCR Processing Time',
       render: (_, record) => {
+        const isAbnormal = record['Avg. OCR Processing Time'] > 2;
         return (
-          record['Avg. OCR Processing Time'] &&
-          Number(record['Avg. OCR Processing Time']).toFixed(2)
+          <span style={{ color: isAbnormal ? 'red' : '' }}>
+            {record['Avg. OCR Processing Time'] &&
+              Number(record['Avg. OCR Processing Time'])?.toFixed(2)}
+          </span>
         );
       },
     },