diff --git a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
index 900bd811..238caca4 100644
--- a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
+++ b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
@@ -22,7 +22,7 @@ import {
   Divider,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { Download as DownloadIcon, Circle as CircleIcon } from '@mui/icons-material';
+import { Download as DownloadIcon, Circle as CircleIcon, TableView } from '@mui/icons-material';
 // components
 import Page from '../../components/Page';
 // utils
@@ -43,6 +43,7 @@ import {
 } from '@mui/lab';
 import TableMoreMenu from '../../components/table/TableMoreMenu';
 import Label from '../../components/Label';
+import { fSplit } from '../../utils/formatNumber';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -136,6 +137,12 @@ type ServiceMonitoringProps = {
     description: string;
     name: string;
   }[];
+  benefitTotal: {
+    totalIncurred: number;
+    totalApprove: number;
+    totalNotApprove: number;
+    totalExcess: number;
+  };
   hospital: string;
   admissionDate: string;
   dischargeDate: string;
@@ -496,7 +503,7 @@ export default function ServiceMonitoring() {
                                     gap={1}
                                   >
                                     <CircleIcon sx={{ width: 8 }} />
-                                    Amount Incurred : {benefitValue.amountApproved}
+                                    Amount Incurred : Rp. {fSplit(benefitValue.amountApproved)}
                                   </Typography>
                                 </ListItemText>
                               </ListItem>
@@ -511,7 +518,7 @@ export default function ServiceMonitoring() {
                                     gap={1}
                                   >
                                     <CircleIcon sx={{ width: 8 }} />
-                                    Amount Approved : {benefitValue.amountApproved}
+                                    Amount Approved : Rp. {fSplit(benefitValue.amountApproved)}
                                   </Typography>
                                 </ListItemText>
                               </ListItem>
@@ -526,7 +533,7 @@ export default function ServiceMonitoring() {
                                     gap={1}
                                   >
                                     <CircleIcon sx={{ width: 8 }} />
-                                    Amount Not Approved : {benefitValue.amountNotAprroved}
+                                    Amount Not Approved : Rp. {fSplit(benefitValue.amountNotAprroved)}
                                   </Typography>
                                 </ListItemText>
                               </ListItem>
@@ -541,7 +548,7 @@ export default function ServiceMonitoring() {
                                     gap={1}
                                   >
                                     <CircleIcon sx={{ width: 8 }} />
-                                    Excess Paid : {benefitValue.excessPaid}
+                                    Excess Paid : Rp. {fSplit(benefitValue.excessPaid)}
                                   </Typography>
                                 </ListItemText>
                               </ListItem>
@@ -556,7 +563,7 @@ export default function ServiceMonitoring() {
                                     gap={1}
                                   >
                                     <CircleIcon sx={{ width: 8 }} />
-                                    Description : {benefitValue.description}
+                                    Description : Rp. {fSplit(benefitValue.description)}
                                   </Typography>
                                 </ListItemText>
                               </ListItem>
@@ -570,6 +577,55 @@ export default function ServiceMonitoring() {
                       </Grid>
                     </Grid>
                   </Grid>
+                  <Grid item container spacing={1.5}>
+                    <Grid item>
+                      <Typography variant="subtitle2" color={'grey.600'}>
+                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Benefits Total'}
+                      </Typography>
+                    </Grid>
+                    <Grid item xs={12}>
+                      <Typography variant="subtitle1" color={'grey.800'}>
+                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Incurred : Rp. '}
+                        {loading ? (
+                          <Skeleton animation={'wave'} width={300} />
+                        ) : data && data.benefitTotal ? (
+                             fSplit(data.benefitTotal.totalIncurred)
+                        ) : (
+                          '-'
+                        )}
+                      </Typography>
+                      <Typography variant="subtitle1" color={'grey.800'}>
+                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Approve : Rp. '}
+                        {loading ? (
+                          <Skeleton animation={'wave'} width={300} />
+                        ) : data && data.benefitTotal ? (
+                             fSplit(data.benefitTotal.totalApprove)
+                        ) : (
+                          '-'
+                        )}
+                      </Typography>
+                      <Typography variant="subtitle1" color={'grey.800'}>
+                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Not Approve : Rp.'}
+                        {loading ? (
+                          <Skeleton animation={'wave'} width={300} />
+                        ) : data && data.benefitTotal ? (
+                             fSplit(data.benefitTotal.totalNotApprove)
+                        ) : (
+                          '-'
+                        )}
+                      </Typography>
+                      <Typography variant="subtitle1" color={'grey.800'}>
+                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Excess : Rp.'}
+                        {loading ? (
+                          <Skeleton animation={'wave'} width={300} />
+                        ) : data && data.benefitTotal ? (
+                             fSplit(data.benefitTotal.totalExcess)
+                        ) : (
+                          '-'
+                        )}
+                      </Typography>
+                    </Grid>
+                  </Grid>
                   <Grid item container xs={12} spacing={1.5}>
                     <Grid item xs={12}>
                       <Typography variant="subtitle2" color={'grey.600'}>
@@ -629,6 +685,14 @@ export default function ServiceMonitoring() {
             </Card>
           </Grid>
         </Grid>
+        {/* <Grid item xs={12} lg={12} md={12}>
+          <Card sx={{ borderRadius: '16px', padding: '24px' }}>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+              <Typography>Benefit Item</Typography>
+            </Box>
+          </Card>
+
+        </Grid> */}
         <Grid item xs={12} lg={12} md={12}>
           {loading ? (
             <Card sx={{ borderRadius: '16px', padding: '24px' }}>
@@ -869,7 +933,7 @@ export default function ServiceMonitoring() {
               </TabPanel>
 
               <TabPanel value={value} index={1}>
-                <Grid item xs={12} padding={data && data.laboratoriumResults ? 0 : 3}>
+                <Grid item xs={12}  padding={data && data.laboratoriumResults ? 0 : 3}>
                   {data &&
                   data.laboratoriumResults &&
                   Object.keys(data.laboratoriumResults).length > 0 ? (
@@ -942,7 +1006,9 @@ export default function ServiceMonitoring() {
                       </Card>
                     ))
                   ) : (
-                    <Typography variant="subtitle1">Data Not Found</Typography>
+                    <Typography padding={3} variant="subtitle1" textAlign={'center'}>
+                      No Data Found
+                    </Typography>
                   )}
                 </Grid>
               </TabPanel>