diff --git a/frontend/client-portal/src/pages/ClaimReport/Index.tsx b/frontend/client-portal/src/pages/ClaimReport/Index.tsx
new file mode 100755
index 00000000..d4976342
--- /dev/null
+++ b/frontend/client-portal/src/pages/ClaimReport/Index.tsx
@@ -0,0 +1,46 @@
+// @mui
+import { Card, Container, Grid, TableBody, TableCell, TableRow } from '@mui/material';
+// components
+import Page from '../../components/Page';
+// utils
+import useSettings from '../../hooks/useSettings';
+// theme
+import palette from '../../theme/palette';
+// section
+import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
+
+// ----------------------------------------------------------------------
+
+const listClaimItems = [
+  { name: 'Requested', value: 15, color: palette.dark.primary.dark },
+  { name: 'Approval', value: 20, color: palette.dark.warning.dark },
+  { name: 'Disbrusment', value: 20, color: palette.dark.success.dark },
+  { name: 'Rejected', value: 20, color: palette.dark.error.dark },
+];
+
+const testingData = [
+  { label: 'Member ID', value: 'member_id' },
+  { label: 'Name', value: 'name' },
+  { label: 'Divisi', value: 'division_id' },
+];
+
+// ----------------------------------------------------------------------
+
+export default function Drugs() {
+  const { themeStretch } = useSettings();
+
+  return (
+    <Page title="Claim Reports">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Grid container spacing={2}>
+          <Grid item xs={12} lg={12} md={12}>
+            <CardClaimStatus data={listClaimItems} />
+          </Grid>
+          <Grid item xs={12} lg={12} md={12}>
+            <Card></Card>
+          </Grid>
+        </Grid>
+      </Container>
+    </Page>
+  );
+}
diff --git a/frontend/client-portal/src/routes/index.tsx b/frontend/client-portal/src/routes/index.tsx
index c0f5d182..1d7ae5f4 100755
--- a/frontend/client-portal/src/routes/index.tsx
+++ b/frontend/client-portal/src/routes/index.tsx
@@ -47,9 +47,6 @@ export default function Router() {
             </AuthProvider>
           ),
         },
-        // { path: 'login-unprotected', element: <Login /> },
-        // { path: 'register-unprotected', element: <Register /> },
-        // { path: 'reset-password', element: <ResetPassword /> },
       ],
     },
     {
@@ -89,6 +86,22 @@ export default function Router() {
         },
       ],
     },
+    {
+      path: '/claim-report',
+      element: (
+        <AuthProvider>
+          <AuthGuard>
+            <DashboardLayout />
+          </AuthGuard>
+        </AuthProvider>
+      ),
+      children: [
+        {
+          element: <ClaimReport />,
+          index: true,
+        },
+      ],
+    },
     {
       path: '*',
       element: <LogoOnlyLayout />,
@@ -114,3 +127,6 @@ const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
 const AlarmCenterServiceMonitoring = Loadable(
   lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
 );
+
+// Claim Report
+const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));
diff --git a/frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx b/frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx
new file mode 100644
index 00000000..595c1dec
--- /dev/null
+++ b/frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx
@@ -0,0 +1,102 @@
+// @mui
+import { Grid, Card, Typography, Stack } from '@mui/material';
+import { styled } from '@mui/material/styles';
+// theme
+import palette from '../../theme/palette';
+
+// ----------------------------------------------------------------------
+
+interface ClaimStatusType {
+  name: string;
+  value: number;
+  color: string;
+}
+
+interface PropsCardClaimStatus {
+  data?: ClaimStatusType[];
+}
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(2),
+  color: 'black',
+  backgroundColor: theme.palette.grey[200],
+}));
+
+// ----------------------------------------------------------------------
+
+const defaultData = [
+  { name: 'Requested', value: 0, color: palette.dark.primary.dark },
+  { name: 'Approval', value: 0, color: palette.dark.warning.dark },
+  { name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
+  { name: 'Rejected', value: 0, color: palette.dark.error.dark },
+];
+
+// ----------------------------------------------------------------------
+
+export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
+  return (
+    <RootStyle>
+      <Stack sx={{ mb: 1 }}>
+        <Typography variant="body2">Claim Status</Typography>
+      </Stack>
+      <Grid container spacing={2}>
+        {data
+          ? data.map(({ name, value, color }: ClaimStatusType, key) => (
+              <Grid item key={key} xs={6} sm={3}>
+                <Card
+                  sx={{
+                    paddingX: 1,
+                    borderRadius: 0.75,
+                    borderColor: color,
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    padding: 2,
+                    flex: 1,
+                    textAlign: 'center',
+                  }}
+                >
+                  <Typography component="p" variant="body2">
+                    {name}
+                  </Typography>
+                  <Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
+                    {value}
+                  </Typography>
+                  <Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
+                    Cases
+                  </Typography>
+                </Card>
+              </Grid>
+            ))
+          : defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
+              <Grid item key={key} xs={6} sm={3}>
+                <Card
+                  sx={{
+                    paddingX: 1,
+                    borderRadius: 0.75,
+                    borderColor: color,
+                    borderStyle: 'solid',
+                    borderWidth: '1px',
+                    padding: 2,
+                    flex: 1,
+                    textAlign: 'center',
+                  }}
+                >
+                  <Typography component="p" variant="body2">
+                    {name}
+                  </Typography>
+                  <Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
+                    {value}
+                  </Typography>
+                  <Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
+                    Cases
+                  </Typography>
+                </Card>
+              </Grid>
+            ))}
+      </Grid>
+    </RootStyle>
+  );
+}