diff --git a/frontend/client-portal/src/pages/Members/Index.tsx b/frontend/client-portal/src/pages/Members/Index.tsx
index d0d9e4d2..016b07d3 100644
--- a/frontend/client-portal/src/pages/Members/Index.tsx
+++ b/frontend/client-portal/src/pages/Members/Index.tsx
@@ -1,5 +1,5 @@
 // @mui
-import { Box, Button, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+import { Box, Button, Card, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 // hooks
@@ -20,21 +20,21 @@ export default function Members() {
     console.log('Loading Something')
   }
 
-  function createData(
-    name: string,
-    calories: number,
-    fat: number,
-    carbs: number,
-    protein: number,
-    price: number,
-  ) {
+  type Member = {
+    id: number;
+    code: string;
+    nik: string;
+    name: string;
+    plan_code: string;
+    number_of_families: number;
+    number_of_claim: number;
+    active: boolean;
+    history?: [];
+  }
+
+  function createData( member: Member ): Member {
     return {
-      name,
-      calories,
-      fat,
-      carbs,
-      protein,
-      price,
+      ...member,
       history: [
         {
           date: '2020-01-05',
@@ -46,8 +46,8 @@ export default function Members() {
           customerId: 'Anonymous',
           amount: 1,
         },
-      ],
-    };
+      ]
+    }
   }
 
   function Row(props: { row: ReturnType<typeof createData> }) {
@@ -66,13 +66,12 @@ export default function Members() {
               {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
             </IconButton>
           </TableCell>
-          <TableCell component="th" scope="row">
-            {row.name}
-          </TableCell>
-          <TableCell align="right">{row.calories}</TableCell>
-          <TableCell align="right">{row.fat}</TableCell>
-          <TableCell align="right">{row.carbs}</TableCell>
-          <TableCell align="right">{row.protein}</TableCell>
+          <TableCell align="left">{row.code}</TableCell>
+          <TableCell align="left">{row.name}</TableCell>
+          <TableCell align="right">{row.nik}</TableCell>
+          <TableCell align="right">{row.plan_code}</TableCell>
+          <TableCell align="right">{row.number_of_claim}</TableCell>
+          <TableCell align="right">{row.number_of_families}</TableCell>
         </TableRow>
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
@@ -91,18 +90,24 @@ export default function Members() {
                     </TableRow>
                   </TableHead>
                   <TableBody>
-                    {row.history.map((historyRow) => (
-                      <TableRow key={historyRow.date}>
+                    {row.history ? row.history.map((historyRow) => (
+                      <TableRow key={historyRow?.date}>
                         <TableCell component="th" scope="row">
-                          {historyRow.date}
+                          {historyRow?.date}
                         </TableCell>
-                        <TableCell>{historyRow.customerId}</TableCell>
-                        <TableCell align="right">{historyRow.amount}</TableCell>
+                        <TableCell>{historyRow?.customerId}</TableCell>
+                        <TableCell align="right">{historyRow?.amount}</TableCell>
                         <TableCell align="right">
-                          {Math.round(historyRow.amount * row.price * 100) / 100}
+                          {Math.round(historyRow?.amount * row.price * 100) / 100}
                         </TableCell>
                       </TableRow>
-                    ))}
+                    ))
+                    : (
+                      <TableRow>
+                        <TableCell colSpan={8}>No Data</TableCell>
+                      </TableRow>
+                      )
+                    }
                   </TableBody>
                 </Table>
               </Box>
@@ -115,13 +120,22 @@ export default function Members() {
 
   // Dummy Default Data
   const rows = [
-    createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
-    createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
-    createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
-    createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
-    createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
+    createData({
+      id: 1,
+      code: 'MEMBERCODE',
+      nik: 'SM12310003',
+      name: 'Dede Pardede',
+      plan_code: 'PLAN001',
+      number_of_families: 4,
+      number_of_claim: 0,
+      active: true,
+    })
   ];
 
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+
   return (
     <Page title="Member List">
       <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -134,18 +148,21 @@ export default function Members() {
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, delectus? Suscipit placeat tempora mollitia optio, assumenda maiores architecto officia itaque molestias cum id eligendi necessitatibus! A velit eos ratione ullam.
         </Typography>
 
+        <Card>
         <TableContainer component={Paper}>
           <Table aria-label="collapsible table">
-            <TableHead>
+            <TableBody>
               <TableRow>
-                <TableCell />
-                <TableCell>Dessert (100g serving)</TableCell>
-                <TableCell align="right">Calories</TableCell>
-                <TableCell align="right">Fat&nbsp;(g)</TableCell>
-                <TableCell align="right">Carbs&nbsp;(g)</TableCell>
-                <TableCell align="right">Protein&nbsp;(g)</TableCell>
+                <TableCell style={headStyle} align="left">Detail</TableCell>
+                <TableCell style={headStyle} align="left">MemberID</TableCell>
+                <TableCell style={headStyle} align="left">Name</TableCell>
+                <TableCell style={headStyle} align="right">NIK</TableCell>
+                <TableCell style={headStyle} align="right">PlanID</TableCell>
+                <TableCell style={headStyle} align="right">Claim&nbsp;(time)</TableCell>
+                <TableCell style={headStyle} align="right">Family&nbsp;(person)</TableCell>
+                <TableCell style={headStyle} align="right">Status</TableCell>
               </TableRow>
-            </TableHead>
+            </TableBody>
             <TableBody>
               {rows.map((row, index) => (
                 <Row key={index} row={row} />
@@ -153,6 +170,7 @@ export default function Members() {
             </TableBody>
           </Table>
         </TableContainer>
+        </Card>
       </Container>
     </Page>
   );
diff --git a/package.json b/package.json
index 051caf03..4544496b 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "devDependencies": {
         "axios": "^0.25",
         "laravel-mix": "^6.0.6",
-        "lodash": "^4.17.19",
+        "lodash": "^4.17.21",
         "postcss": "^8.1.14"
     },
     "dependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a169450..b620ff39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,7 +5,7 @@ specifiers:
   '@mui/material': ^5.8.1
   axios: ^0.25
   laravel-mix: ^6.0.6
-  lodash: ^4.17.19
+  lodash: ^4.17.21
   postcss: ^8.1.14
 
 dependencies: