diff --git a/app/Http/Controllers/Api/MemberController.php b/app/Http/Controllers/Api/MemberController.php
index c7904a46..164aa93b 100644
--- a/app/Http/Controllers/Api/MemberController.php
+++ b/app/Http/Controllers/Api/MemberController.php
@@ -14,7 +14,25 @@ class MemberController extends Controller
      */
     public function index()
     {
-        //
+        $members = [];
+        
+        $faker = \Faker\Factory::create();
+
+        for ($i = 0; $i < 10; $i++) {
+            $members[] = [
+                'id' => (10-$i),
+                'code' => 'UT0000'.sprintf("%02d", 10-$i),
+                'nik' => 'UNTR0000'.sprintf("%02d", $i),
+                'name' => $faker->name,
+                'plan_code' => collect(['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'])->random(),
+                'number_of_families' => random_int(2,4),
+                'number_of_claim' => random_int(0,2),
+                'active' => true,
+                'history' => []
+            ];
+        }
+
+        return $members;
     }
 
     /**
diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
index bdbd4567..35c8503f 100644
--- a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
+++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
@@ -13,7 +13,7 @@ export default function NavbarDocs() {
     >
       <DocIllustration sx={{ width: 1 }} />
 
-      <div>
+      {/* <div>
         <Typography gutterBottom variant="subtitle1">
           Hi, Rayan Moran
         </Typography>
@@ -23,7 +23,7 @@ export default function NavbarDocs() {
         </Typography>
       </div>
 
-      <Button variant="contained">Documentation</Button>
+      <Button variant="contained">Documentation</Button> */}
     </Stack>
   );
 }
diff --git a/frontend/client-portal/src/pages/Members/Index.tsx b/frontend/client-portal/src/pages/Members/Index.tsx
index 016b07d3..ed5ef6a4 100644
--- a/frontend/client-portal/src/pages/Members/Index.tsx
+++ b/frontend/client-portal/src/pages/Members/Index.tsx
@@ -1,7 +1,8 @@
 // @mui
-import { Box, Button, Card, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
+import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge } from '@mui/material';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import PublishIcon from '@mui/icons-material/Publish';
 // hooks
 import useSettings from '../../hooks/useSettings';
 // components
@@ -9,7 +10,8 @@ import Page from '../../components/Page';
 import axios from '../../utils/axios';
 import useAuth from '../../hooks/useAuth';
 import { Link } from 'react-router-dom';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Theme, useTheme } from '@mui/material/styles';
 
 export default function Members() {
   const { themeStretch } = useSettings();
@@ -29,7 +31,7 @@ export default function Members() {
     number_of_families: number;
     number_of_claim: number;
     active: boolean;
-    history?: [];
+    history: any[];
   }
 
   function createData( member: Member ): Member {
@@ -72,6 +74,7 @@ export default function Members() {
           <TableCell align="right">{row.plan_code}</TableCell>
           <TableCell align="right">{row.number_of_claim}</TableCell>
           <TableCell align="right">{row.number_of_families}</TableCell>
+          <TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
         </TableRow>
         <TableRow>
           <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
@@ -98,7 +101,7 @@ export default function Members() {
                         <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 * 1000 * 100) / 100}
                         </TableCell>
                       </TableRow>
                     ))
@@ -119,23 +122,86 @@ export default function Members() {
   }
 
   // Dummy Default Data
-  const rows = [
-    createData({
-      id: 1,
-      code: 'MEMBERCODE',
-      nik: 'SM12310003',
-      name: 'Dede Pardede',
-      plan_code: 'PLAN001',
-      number_of_families: 4,
-      number_of_claim: 0,
-      active: true,
-    })
-  ];
+  const [memberLoading, setMemberLoading] = React.useState(true);
+  const [members, setMembers] = React.useState<Member[]>([]);
+
+  const loadMembers = async () => {
+    setMemberLoading(true)
+    const response = await axios.get('/members');
+    setMemberLoading(false)
+    setMembers(response.data.map(createData));
+  }
+
+  useEffect(() => {
+    loadMembers();
+  }, [])
 
   const headStyle = {
     fontWeight: 'bold',
   };
 
+  // FILTER SELECT 
+  const ITEM_HEIGHT = 48;
+  const ITEM_PADDING_TOP = 8;
+  const MenuProps = {
+    PaperProps: {
+      style: {
+        maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+        width: 250,
+      },
+    },
+  };
+
+  const names = [
+    'PLAN001',
+    'PLAN002',
+    'PLAN003',
+    'PLAN004',
+    'PLAN005',
+  ];
+  function getStyles(name: string, personName: string[], theme: Theme) {
+    return {
+      fontWeight:
+        personName.indexOf(name) === -1
+          ? theme.typography.fontWeightRegular
+          : theme.typography.fontWeightMedium,
+    };
+  }
+  
+  const theme = useTheme();
+  const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
+
+  const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setPlanIdFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
+    const {
+      target: { value },
+    } = event;
+    setStatusFilter(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+  // END FILTER SELECT
+  
+  // IMPORT
+  const importMember = React.useRef(null);
+  const handleImportButton = (event: any) => {
+    if (importMember?.current)
+      importMember.current.click()
+    else
+      alert('No file selected')
+  }
+
   return (
     <Page title="Member List">
       <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -143,10 +209,68 @@ export default function Members() {
           Member List
         </Typography>
 
+        <Grid container spacing={2} sx={{ mb: 2 }} justifyContent="flex-end">
+          <Grid item>
+            <TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
+          </Grid>
 
-        <Typography variant="body1" component="p" paragraph>
-          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>
+          <Grid item>
+            <FormControl sx={{ width: 200 }}>
+              <InputLabel id="plan-id-label">PlanID</InputLabel>
+              <Select
+                labelId="plan-id-label"
+                id="plan-id"
+                multiple
+                value={planIdFilter}
+                onChange={handleChangePlanID}
+                input={<OutlinedInput label="PlanID" />}
+                MenuProps={MenuProps}
+              >
+                {names.map((name) => (
+                  <MenuItem
+                    key={name}
+                    value={name}
+                    style={getStyles(name, planIdFilter, theme)}
+                  >
+                    {name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item>
+            <FormControl sx={{ width: 200 }}>
+              <InputLabel id="status-filter-label">Status</InputLabel>
+              <Select
+                labelId="status-filter-label"
+                id="status-filter"
+                multiple
+                value={statusFilter}
+                onChange={handleChangeStatus}
+                input={<OutlinedInput label="Status" />}
+                MenuProps={MenuProps}
+              >
+                {['Active', 'Suspended'].map((name) => (
+                  <MenuItem
+                    key={name}
+                    value={name}
+                    style={getStyles(name, statusFilter, theme)}
+                  >
+                    {name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Grid item>
+            <input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
+            <Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
+              Import
+            </Button>
+          </Grid>
+        </Grid>
 
         <Card>
         <TableContainer component={Paper}>
@@ -163,11 +287,29 @@ export default function Members() {
                 <TableCell style={headStyle} align="right">Status</TableCell>
               </TableRow>
             </TableBody>
-            <TableBody>
-              {rows.map((row, index) => (
-                <Row key={index} row={row} />
-              ))}
-            </TableBody>
+            {memberLoading ? 
+              (
+                <TableBody>
+                  <TableRow>
+                    <TableCell colSpan={8} align="center">Loading</TableCell>
+                  </TableRow>
+                </TableBody>
+              ) : (
+                members.length == 0 ? 
+                (
+                  <TableBody>
+                    <TableRow>
+                      <TableCell colSpan={8} align="center">No Data</TableCell>
+                    </TableRow>
+                  </TableBody>
+                ) : (
+                  <TableBody>
+                    {members.map(row => (
+                      <Row key={row.code} row={row} />
+                    ))}
+                  </TableBody>
+                )
+            )}
           </Table>
         </TableContainer>
         </Card>
diff --git a/routes/api.php b/routes/api.php
index 0fb7ba24..6975bd07 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,6 +1,7 @@
 <?php
 
 use App\Http\Controllers\Api\AuthController;
+use App\Http\Controllers\Api\MemberController;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -24,4 +25,6 @@ Route::middleware('auth:sanctum')->group(function() {
     Route::get('/user', function (Request $request) {
         return $request->user();
     });
+
+    Route::get('members', [MemberController::class, 'index'])->name('members.index');
 });