diff --git a/packages/esm-billing-app/src/claims/claims-management/header/summary-header.component.tsx b/packages/esm-billing-app/src/claims/claims-management/header/summary-header.component.tsx
index 770f2135..93dd29c1 100644
--- a/packages/esm-billing-app/src/claims/claims-management/header/summary-header.component.tsx
+++ b/packages/esm-billing-app/src/claims/claims-management/header/summary-header.component.tsx
@@ -3,28 +3,22 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './summary-header.scss';
 
-
 interface ClaimsSummaryHeaderProps {
   filters: {
-    fromDate: Date | null; 
+    fromDate: Date | null;
     toDate: Date | null;
   };
   onFilterChanged: (updateFn: (currentFilters: any) => any) => void;
   statusOptions?: string[];
 }
 
-const ClaimSummaryHeader: React.FC<ClaimsSummaryHeaderProps> = ({
-  filters,
-  onFilterChanged,
-}) => {
+const ClaimSummaryHeader: React.FC<ClaimsSummaryHeaderProps> = ({ filters, onFilterChanged }) => {
   const { t } = useTranslation();
 
- 
   const today = new Date();
   const oneMonthAgo = new Date(today);
   oneMonthAgo.setMonth(today.getMonth() - 1);
 
-
   useEffect(() => {
     if (!filters.fromDate && !filters.toDate) {
       onFilterChanged(() => ({
@@ -42,8 +36,7 @@ const ClaimSummaryHeader: React.FC<ClaimsSummaryHeaderProps> = ({
         onChange={([fromDate, toDate]) =>
           onFilterChanged((currentFilters) => ({ ...currentFilters, fromDate, toDate }))
         }
-        aria-label={t('datePicker.rangeLabel', 'Select date range')}
-      >
+        aria-label={t('datePicker.rangeLabel', 'Select date range')}>
         <DatePickerInput
           id="date-picker-input-id-start"
           placeholder={t('datePicker.startPlaceholder', 'mm/dd/yyyy')}
@@ -61,4 +54,4 @@ const ClaimSummaryHeader: React.FC<ClaimsSummaryHeaderProps> = ({
   );
 };
 
-export default ClaimSummaryHeader;
\ No newline at end of file
+export default ClaimSummaryHeader;
diff --git a/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-chart.component.tsx b/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-chart.component.tsx
index d9547312..e627e941 100644
--- a/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-chart.component.tsx
+++ b/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-chart.component.tsx
@@ -26,10 +26,12 @@ const ClaimsSummaryChart = () => {
   }
 
   const transformClaimSummaryChartData = (data) => {
-    return data.map((item) => [
-      { group: item.month, value: item.claimsA },
-      { group: item.month, value: item.claimsB },
-    ]).flat();
+    return data
+      .map((item) => [
+        { group: item.month, value: item.claimsA },
+        { group: item.month, value: item.claimsB },
+      ])
+      .flat();
   };
 
   const options: BarChartOptions = {
@@ -54,17 +56,13 @@ const ClaimsSummaryChart = () => {
     height: '400px',
   };
 
- 
   const transformedData = transformClaimSummaryChartData(metrics.summaryGraph);
 
   return (
     <div style={{ padding: '2rem' }}>
-      <GroupedBarChart
-        data={transformedData}
-        options={options}
-      />
+      <GroupedBarChart data={transformedData} options={options} />
     </div>
   );
 };
 
-export default ClaimsSummaryChart;
\ No newline at end of file
+export default ClaimsSummaryChart;
diff --git a/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-main.component.tsx b/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-main.component.tsx
index 2acf7a7a..14ee86af 100644
--- a/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-main.component.tsx
+++ b/packages/esm-billing-app/src/claims/claims-management/main/claims-summary-main.component.tsx
@@ -2,19 +2,15 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from '../../metrics/metrics.scss';
 import { ClaimsManagementHeader } from '../header/claims-header.component';
-import  ClaimsSummaryHeader  from '../header/summary-header.component';
+import ClaimsSummaryHeader from '../header/summary-header.component';
 import { ClaimsSummaryFilter } from '../../../types';
 import ClaimsSummaryChart from './claims-summary-chart.component';
 
-
 import MetricsHeader from '../../metrics/metrics-header.component';
 import MetricsCard from '../../metrics/metrics-card.component';
 import { convertToCurrency } from '../../../helpers';
 
-
 const MainMetrics = () => {
-
-
   const [filters, setFilters] = useState({
     fromDate: null,
     toDate: null,
@@ -22,72 +18,57 @@ const MainMetrics = () => {
   const onFilterChanged = (updateFn: (currentFilters: any) => any) => {
     setFilters(updateFn(filters));
   };
-  
 
   const fromDate = filters.fromDate || new Date();
   const toDate = filters.toDate || new Date();
-   // test data values declaration
+  // test data values declaration
   const totalAmount = 1150000;
-  const claimedAmount = 120000; 
+  const claimedAmount = 120000;
+
+  const pendingAmount = 56000;
 
-  const pendingAmount = 56000; 
+  const preApps = 300;
+  const preAppsApproved = 188;
 
-  const preApps = 300; 
-  const preAppsApproved = 188; 
+  const preAppsPending = 20;
+
+  const t = (key, fallback) => fallback;
 
-  const preAppsPending = 20; 
-  
-  const t = (key, fallback) => fallback; 
-  
   return (
     <div className={`omrs-main-content`}>
       <ClaimsManagementHeader title={t('claims', 'Claims Summary')} />
-      <ClaimsSummaryHeader
-        filters={filters}
-        onFilterChanged={onFilterChanged}
-      />       <> 
-       <div className={styles.cardContainer} data-testid="claims-metrics">
-        <MetricsCard
-          label={t('ksh', '')}
-          value={convertToCurrency(totalAmount)}
-          headerLabel={t('claimsItems', 'Total Claimed')}
-        />
-        <MetricsCard
-          label={t('ksh', '')}
-          value={convertToCurrency(claimedAmount)}
-          headerLabel={t('claimsItems', 'Total Approved')}
-        />
-        <MetricsCard
-          label={t('ksh', '')}
-          value={convertToCurrency(pendingAmount)}
-          headerLabel={t('claimsItems', 'Amount Pending')}
-        />
-      </div>
-      <div className={styles.cardContainer} data-testid="claims-metrics">
-        <MetricsCard
-          label={t('ksh', '')}
-          value={preApps}
-          headerLabel={t('claimsItems', 'Total Preauth')}
-        />
-        <MetricsCard
-          label={t('ksh', '')}
-          value={preAppsApproved}
-          headerLabel={t('claimsItems', 'Approved Preauth')}
-        />
-        <MetricsCard
-          label={t('ksh', '')}
-          value={preAppsPending}
-          headerLabel={t('claimsItems', 'Pending Preauth')}
-        />
-      </div>
-      <ClaimsSummaryChart />
-
-    </>
-
-    
+      <ClaimsSummaryHeader filters={filters} onFilterChanged={onFilterChanged} />{' '}
+      <>
+        <div className={styles.cardContainer} data-testid="claims-metrics">
+          <MetricsCard
+            label={t('ksh', '')}
+            value={convertToCurrency(totalAmount)}
+            headerLabel={t('claimsItems', 'Total Claimed')}
+          />
+          <MetricsCard
+            label={t('ksh', '')}
+            value={convertToCurrency(claimedAmount)}
+            headerLabel={t('claimsItems', 'Total Approved')}
+          />
+          <MetricsCard
+            label={t('ksh', '')}
+            value={convertToCurrency(pendingAmount)}
+            headerLabel={t('claimsItems', 'Amount Pending')}
+          />
+        </div>
+        <div className={styles.cardContainer} data-testid="claims-metrics">
+          <MetricsCard label={t('ksh', '')} value={preApps} headerLabel={t('claimsItems', 'Total Preauth')} />
+          <MetricsCard
+            label={t('ksh', '')}
+            value={preAppsApproved}
+            headerLabel={t('claimsItems', 'Approved Preauth')}
+          />
+          <MetricsCard label={t('ksh', '')} value={preAppsPending} headerLabel={t('claimsItems', 'Pending Preauth')} />
+        </div>
+        <ClaimsSummaryChart />
+      </>
     </div>
-
   );
 };
 
-export default MainMetrics;
\ No newline at end of file
+export default MainMetrics;