diff --git a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
index 17937595..abbfdfe7 100755
--- a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
+++ b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
@@ -23,23 +23,6 @@ const itemList = [
 export default function Dashboard() {
   const { themeStretch } = useSettings();
 
-  // const [corporate, setCorporate] = useState({});
-
-  // const loadSomething = () => {
-  //   axios
-  //     .get('dashboard')
-  //     .then((res) => {
-  //       setCorporate(res.data.corporate);
-  //     })
-  //     .catch((err) => {
-  //       alert('Opps, Something Went Wrong when collecting dashboard data');
-  //     });
-  // };
-
-  // useEffect(() => {
-  //   loadSomething();
-  // }, []);
-
   return (
     <Page title="Dashboard">
       <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -48,10 +31,10 @@ export default function Dashboard() {
         </Typography>
 
         <Grid container spacing={2}>
-          <Grid item xs={6} lg={6} md={12}>
+          <Grid item xs={12} lg={6} md={12}>
             <CardNotification data={itemList} />
           </Grid>
-          <Grid item xs={6} lg={6} md={12}>
+          <Grid item xs={12} lg={6} md={12}>
             <CardBalance />
           </Grid>
           <Grid item xs={12} lg={12} md={12}>
diff --git a/frontend/client-portal/src/pages/Dashboard/List.tsx b/frontend/client-portal/src/pages/Dashboard/List.tsx
deleted file mode 100644
index dabb387b..00000000
--- a/frontend/client-portal/src/pages/Dashboard/List.tsx
+++ /dev/null
@@ -1,373 +0,0 @@
-// @mui
-import {
-  Box,
-  Button,
-  Card,
-  Collapse,
-  IconButton,
-  InputLabel,
-  MenuItem,
-  OutlinedInput,
-  Paper,
-  Select,
-  SelectChangeEvent,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TextField,
-  Typography,
-  Badge,
-  Tab,
-  Tabs,
-  CardHeader,
-  Stack,
-  Menu,
-  ButtonGroup,
-  Pagination,
-  Grid,
-  Autocomplete,
-} from '@mui/material';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import AddIcon from '@mui/icons-material/Add';
-import UploadIcon from '@mui/icons-material/Upload';
-import CancelIcon from '@mui/icons-material/Cancel';
-// hooks
-import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
-import useSettings from '../../hooks/useSettings';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-// components
-import axios from '../../utils/axios';
-import { LaravelPaginatedData } from '../../@types/paginated-data';
-import { Icd } from '../../@types/diagnosis';
-import BasePagination from '../../components/BasePagination';
-import { Member } from '../../@types/member';
-import Iconify from '../../components/Iconify';
-
-const options = [
-  { label: 'The Shawshank Redemption', value: 1994 },
-  { label: 'The Godfather', year: 1972 },
-  { label: 'The Godfather: Part II', year: 1974 },
-  { label: 'The Dark Knight', year: 2008 },
-  { label: '12 Angry Men', year: 1957 },
-  { label: "Schindler's List", year: 1993 },
-  { label: 'Pulp Fiction', year: 1994 },
-];
-
-export default function List() {
-  const navigate = useNavigate();
-  const { themeStretch } = useSettings();
-  const { corporate_id } = useParams();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [importResult, setImportResult] = useState(null);
-
-  function SearchInput(props: any) {
-    // SEARCH
-    const searchInput = useRef<HTMLInputElement>(null);
-    const [searchText, setSearchText] = useState('');
-
-    const [value, setValue] = useState<string | null>(options[0]);
-    const [inputValue, setInputValue] = useState('');
-
-    const handleSearchChange = (event: any) => {
-      const newSearchText = event.target.value ?? '';
-      setSearchText(newSearchText);
-    };
-
-    const handleSearchSubmit = (event: any) => {
-      event.preventDefault();
-      props.onSearch(searchText); // Trigger to Parent
-    };
-
-    useEffect(() => {
-      // Trigger First Search
-      setSearchText(searchParams.get('search') ?? '');
-      console.log(value, inputValue);
-    }, [searchParams, value, inputValue]);
-
-    return (
-      <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-        <Stack direction="row" spacing={2}>
-          <Autocomplete
-            value={value}
-            onChange={(event: any, newValue: string | null) => {
-              setValue(newValue);
-            }}
-            inputValue={inputValue}
-            onInputChange={(event, newInputValue) => {
-              setInputValue(newInputValue);
-            }}
-            id="controllable-states-demo"
-            options={options}
-            sx={{ width: 300 }}
-            renderInput={(params) => <TextField {...params} label="Division" />}
-          />
-          <TextField
-            id="search-input"
-            ref={searchInput}
-            label="Search"
-            variant="outlined"
-            fullWidth
-            onChange={handleSearchChange}
-            value={searchText}
-          />
-        </Stack>
-      </form>
-    );
-  }
-
-  function ImportForm(props: any) {
-    // IMPORT
-    // Create Button Menu
-    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-    const createMenu = Boolean(anchorEl);
-    const importForm = useRef<HTMLInputElement>(null);
-    const [currentImportFileName, setCurrentImportFileName] = useState(null);
-
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      setAnchorEl(event.currentTarget);
-    };
-
-    const handleClose = () => {
-      setAnchorEl(null);
-    };
-
-    const handleImportButton = () => {
-      if (importForm?.current) {
-        handleClose();
-        importForm.current ? importForm.current.click() : console.log('No File selected');
-      } else {
-        alert('No file selected');
-      }
-    };
-
-    const handleCancelImportButton = () => {
-      importForm.current.value = '';
-      importForm.current.dispatchEvent(new Event('change', { bubbles: true }));
-    };
-
-    const handleImportChange = (event: any) => {
-      if (event.target.files[0]) {
-        setCurrentImportFileName(event.target.files[0].name);
-      } else {
-        setCurrentImportFileName(null);
-      }
-    };
-
-    const handleUpload = () => {
-      if (importForm.current?.files.length) {
-        const formData = new FormData();
-        formData.append('file', importForm.current?.files[0]);
-        axios
-          .post(`master/formularium/import`, formData)
-          .then((response) => {
-            handleCancelImportButton();
-            loadDataTableData();
-            setImportResult(response.data);
-            // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
-          })
-          .catch((response) => {
-            alert(
-              'Looks like something went wrong. Please check your data and try again. ' +
-                response.message
-            );
-          });
-      } else {
-        alert('No File Selected');
-      }
-    };
-
-    return (
-      <Stack direction="row" spacing={2} padding={2}>
-        <SearchInput onSearch={applyFilter} />
-        <Button
-          id="import-button"
-          variant="outlined"
-          startIcon={<Iconify icon="material-symbols:download-rounded" />}
-          sx={{ paddingY: '15px', paddingX: '22px', flex: '10%' }}
-          component="label"
-        >
-          Import
-          <input
-            type="file"
-            id="file"
-            ref={importForm}
-            style={{ display: 'none' }}
-            onChange={handleImportChange}
-            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
-          />
-        </Button>
-        <Button
-          id="import-button"
-          variant="contained"
-          startIcon={<AddIcon />}
-          sx={{ paddingY: '15px', paddingX: '22px', flex: '15%' }}
-          onClick={handleClick}
-        >
-          Add Data
-        </Button>
-      </Stack>
-    );
-  }
-
-  // Called on every row to map the data to the columns
-  function createData(member: Member): Member {
-    return {
-      ...member,
-    };
-  }
-
-  // Generate the every row of the table
-  function Row(props: { row: ReturnType<typeof createData> }) {
-    const { row } = props;
-    const [open, setOpen] = React.useState(true);
-
-    return (
-      <React.Fragment>
-        <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-          <TableCell>
-            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
-              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
-            </IconButton>
-          </TableCell>
-          <TableCell align="left">{row.member_id}</TableCell>
-          <TableCell align="left">{row.payor_id}</TableCell>
-          <TableCell align="left">{row.name}</TableCell>
-          <TableCell align="left">{row.nik}</TableCell>
-          <TableCell align="left">{row.nric}</TableCell>
-
-          <TableCell align="right">
-            <Button variant="outlined" color="success" size="small">
-              Active
-            </Button>
-          </TableCell>
-          {/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
-        </TableRow>
-        {/* COLLAPSIBLE ROW */}
-        <TableRow>
-          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
-            <Collapse in={open} timeout="auto" unmountOnExit>
-              <Box sx={{ borderBottom: 1 }}>
-                <Typography variant="body2" gutterBottom component="div">
-                  <Grid></Grid>
-                </Typography>
-              </Box>
-            </Collapse>
-          </TableCell>
-        </TableRow>
-      </React.Fragment>
-    );
-  }
-
-  // Dummy Default Data
-  const [dataTableIsLoading, setDataTableLoading] = useState(true);
-  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
-  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
-  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
-    current_page: 1,
-    data: [],
-    path: '',
-    first_page_url: '',
-    last_page: 1,
-    last_page_url: '',
-    next_page_url: '',
-    prev_page_url: '',
-    per_page: 10,
-    from: 0,
-    to: 0,
-    total: 0,
-  });
-  const [dataTablePage, setDataTablePage] = useState(5);
-
-  const loadDataTableData = async (appliedFilter: any | null = null) => {
-    setDataTableLoading(true);
-    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
-    const response = await axios.get('/members', { params: filter });
-
-    setDataTableData(response.data.members);
-    setDataTableLoading(false);
-  };
-
-  const headStyle = {
-    fontWeight: 'bold',
-  };
-
-  const applyFilter = async (searchFilter: string) => {
-    await loadDataTableData({ search: searchFilter });
-    setSearchParams({ search: searchFilter });
-  };
-
-  const handlePageChange = (event: ChangeEvent, value: number) => {
-    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
-    loadDataTableData(filter);
-    setSearchParams(filter);
-  };
-
-  useEffect(() => {
-    loadDataTableData();
-  }, []);
-
-  return (
-    <Stack>
-      <Card>
-        <ImportForm />
-
-        {/* The Main Table */}
-        <TableContainer component={Paper} sx={{ paddingX: 1, borderRadius: 2 }}>
-          <Table aria-label="collapsible table">
-            <TableBody>
-              <TableRow sx={{ backgroundColor: '#F4F6F8' }}>
-                <TableCell style={headStyle} align="left">
-                  Member ID
-                </TableCell>
-                <TableCell style={headStyle} align="center">
-                  Name
-                </TableCell>
-                <TableCell style={headStyle} align="center">
-                  Divisi
-                </TableCell>
-                <TableCell style={headStyle} align="center">
-                  Limit
-                </TableCell>
-                <TableCell style={headStyle} align="center">
-                  Status
-                </TableCell>
-                <TableCell style={headStyle} align="right">
-                  {' '}
-                </TableCell>
-              </TableRow>
-            </TableBody>
-            {dataTableIsLoading ? (
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={6} align="center">
-                    Loading
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            ) : dataTableData.data.length === 0 ? (
-              <TableBody>
-                <TableRow>
-                  <TableCell colSpan={6} align="center">
-                    No Data
-                  </TableCell>
-                </TableRow>
-              </TableBody>
-            ) : (
-              <TableBody>
-                {dataTableData.data.map((row) => (
-                  <Row key={row.id} row={row} />
-                ))}
-              </TableBody>
-            )}
-          </Table>
-        </TableContainer>
-
-        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
-      </Card>
-    </Stack>
-  );
-}
diff --git a/frontend/client-portal/src/sections/dashboard/TableList.tsx b/frontend/client-portal/src/sections/dashboard/TableList.tsx
index c1100464..6364a6b1 100755
--- a/frontend/client-portal/src/sections/dashboard/TableList.tsx
+++ b/frontend/client-portal/src/sections/dashboard/TableList.tsx
@@ -14,12 +14,14 @@ import {
   IconButton,
   Card,
   Grid,
+  Autocomplete,
 } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
+import { Add as AddIcon } from '@mui/icons-material';
 /* ---------------------------------- axios --------------------------------- */
 import axios from 'axios';
 /* ---------------------------------- react --------------------------------- */
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 /* -------------------------------- component ------------------------------- */
 import Iconify from '../../components/Iconify';
 import BaseTablePagination from '../../components/BaseTablePagination';
@@ -177,6 +179,14 @@ export default function TableList() {
   };
   /* -------------------------------------------------------------------------- */
 
+  /* ----------------------------- Field Container ---------------------------- */
+
+  /* ----------------------------- division field ----------------------------- */
+  const optionDivisions = ['All'];
+
+  const [value, setValue] = useState<string | null>(optionDivisions[0]);
+  /* -------------------------------------------------------------------------- */
+
   /* ------------------------------ Search field ------------------------------ */
   const [searchText, setSearchText] = useState('');
 
@@ -194,6 +204,89 @@ export default function TableList() {
   };
   /* -------------------------------------------------------------------------- */
 
+  /* ------------------------------ import button ----------------------------- */
+  const [currentImportFileName, setCurrentImportFileName] = useState(null);
+  const importForm = useRef<HTMLInputElement>(null);
+
+  const handleImportChange = (event: any) => {
+    if (event.target.files[0]) {
+      setCurrentImportFileName(event.target.files[0].name);
+    } else {
+      setCurrentImportFileName(null);
+    }
+  };
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ create button ----------------------------- */
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  /* -------------------------------------------------------------------------- */
+
+  const FieldContainer = () => (
+    <Grid container spacing={2}>
+      <Grid item xs={12} lg={3} xl={2}>
+        <Autocomplete
+          disablePortal
+          options={optionDivisions}
+          value={value}
+          onChange={(event: any, newValue: string | null) => {
+            console.log(newValue);
+            setValue(newValue);
+          }}
+          renderInput={(params) => <TextField {...params} label="Division" />}
+        />
+      </Grid>
+      <Grid item xs={12} lg={5} xl={6}>
+        <form onSubmit={handleSearchSubmit}>
+          <TextField
+            id="search-input"
+            label="Search"
+            variant="outlined"
+            onChange={handleSearch}
+            value={searchText}
+            fullWidth
+          />
+        </form>
+      </Grid>
+      <Grid item xs={12} lg={2} xl={2}>
+        <Button
+          id="import-button"
+          variant="outlined"
+          startIcon={<Iconify icon="material-symbols:download-rounded" />}
+          component="label"
+          fullWidth
+          sx={{ height: '100%' }}
+        >
+          Import
+          <input
+            type="file"
+            id="file"
+            ref={importForm}
+            style={{ display: 'none' }}
+            onChange={handleImportChange}
+            accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain"
+          />
+        </Button>
+      </Grid>
+      <Grid item xs={12} lg={2} xl={2}>
+        <Button
+          id="import-button"
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={handleClick}
+          fullWidth
+          sx={{ height: '100%' }}
+        >
+          Add Data
+        </Button>
+      </Grid>
+    </Grid>
+  );
+
+  /* -------------------------------------------------------------------------- */
+
   /* ---------------------------- table pagination ---------------------------- */
 
   /* ------------------------ button change pagination ------------------------ */
@@ -261,16 +354,7 @@ export default function TableList() {
       <Grid container>
         {/* Field 1 */}
         <Grid item xs={12} paddingX="24px" paddingY="20px">
-          <form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
-            <TextField
-              id="search-input"
-              label="Search"
-              variant="outlined"
-              fullWidth
-              onChange={handleSearch}
-              value={searchText}
-            />
-          </form>
+          <FieldContainer />
         </Grid>
         {/* End Field 1 */}
         {/* Field 2 */}