diff --git a/src/pages/members/manage-members/CustomerDetailModal.tsx b/src/pages/members/manage-members/CustomerDetailModal.tsx
index a14815c..08f4617 100644
--- a/src/pages/members/manage-members/CustomerDetailModal.tsx
+++ b/src/pages/members/manage-members/CustomerDetailModal.tsx
@@ -12,7 +12,7 @@ import { toast } from 'sonner';
 const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL_CUSTOMER = apiConfig.service_customer;
 
-const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page }: any) => {
+const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStats, handleReject, page, fetchCustomers }: any) => {
   const [formData, setFormData] = useState(initialData || initialMember);
   const [viewOnly, setViewOnly] = useState(viewStats || false);
   const [municipios, setMunicipios] = useState([]);
@@ -262,7 +262,7 @@ const CustomerDialog = ({ open, handleClose, handleSubmit, initialData, viewStat
         <TextField disabled={viewOnly} fullWidth margin="dense" label="Bank Account" name="bank_account" value={formData.bank_account} onChange={handleChange} />
         <TextField disabled={viewOnly} fullWidth margin="dense" label="iBank Number" name="ibank_number" value={formData.ibank_number} onChange={handleChange} />
         <Divider className="pt-7"/>
-        {getAdmAccess(page, formData)}
+        {getAdmAccess(page, formData, handleClose, fetchCustomers)}
         {
           page === 'kyc' ? (
             <>
@@ -327,9 +327,36 @@ function fileTextFile(label: string, value: any, name: string, handleChange: any
   )
 }
 
-function getAdmAccess(page: string, data: any) {
+function getAdmAccess(page: string, data: any, handleClose: any, fetchCustomers: any) {
   const [dialogOpen, setDialogOpen] = useState(false);
   const [dialogType, setDialogType] = useState('');
+  const [changeGroup, setChangeGroup] = useState('');
+  const [changeGroupD, setChangeGroupD] = useState(false);
+  const [groups, setGroups] = useState([]);
+  
+  useEffect(() => {
+    fetchGroups()
+  }, []);
+
+  const fetchGroups = async () =>{
+    try {
+      let getGroups = await axios.get(`${BASE_URL_CUSTOMER}/groups/list`, {
+        params: {
+          limit: 50,
+          page: 1,
+          with_deleted: false,
+          order_field: 'name',
+          order_direction: 'ASC',
+        }
+      });
+      setGroups(getGroups.data.data.list);
+      setChangeGroup(data.group_id);
+    } catch (error: any) {
+      console.error(error.message);
+      toast.error(error.message)
+    }
+  }
+
   const handleYes = async () => {
     try {
       if (dialogType === "update status") {
@@ -347,6 +374,7 @@ function getAdmAccess(page: string, data: any) {
       toast.error(error.message)
     } finally {
       setDialogOpen(false)
+      handleClose()
     }
   }
 
@@ -360,6 +388,24 @@ function getAdmAccess(page: string, data: any) {
     setDialogOpen(true)
   }
   
+  async function buttonChangeGroup() {
+    try {
+      let dataObj = {
+        customerid: data.id,
+        destination_group: changeGroup
+      }
+      if (dataObj.customerid && dataObj.destination_group) {
+        await axios.post(`${BASE_URL_CUSTOMER}/customer/change-group`, dataObj)
+      }
+      await fetchCustomers()
+      toast.success('Success Change group')
+    } catch (error: any) {
+      toast.error(error.message)
+    } finally {
+      setChangeGroupD(false)
+    }
+  }
+
   if (page !== "kyc") {
     return (
       <Box p={3} boxShadow={3} borderRadius={2} bgcolor="white">
@@ -378,7 +424,7 @@ function getAdmAccess(page: string, data: any) {
           <Grid item xs={6} container direction="column" spacing={2}>
             <Grid item>
               <Typography variant="body2">Change Group</Typography>
-              <Button variant="contained" color="primary">Change Group</Button>
+              <Button onClick={() => setChangeGroupD(true)} variant="contained" color="primary">Change Group</Button>
             </Grid>
             <Grid item>
               <Typography variant="body2">Edit Member</Typography>
@@ -386,6 +432,31 @@ function getAdmAccess(page: string, data: any) {
             </Grid>
           </Grid>
         </Grid>
+
+        <Dialog open={changeGroupD} onClose={() => setChangeGroupD(false)} fullWidth>
+          <Grid container padding={3}>
+          <Typography variant="h6" gutterBottom>Groups</Typography>
+            <FormControl fullWidth margin="dense">
+              <InputLabel>Destination Group</InputLabel>
+              <Select name="groups" value={changeGroup} onChange={(e: any) => setChangeGroup(e.target.value)}>
+                {
+                  groups ? groups.map((el: any) => (
+                    <MenuItem key={el.id} value={el.id}>{el.name}</MenuItem>
+                  )) : ""
+                }
+              </Select>
+            </FormControl>
+          </Grid>
+          <DialogActions>
+            <Button onClick={() => setChangeGroupD(false)} color="secondary">
+              No
+            </Button>
+            <Button onClick={buttonChangeGroup} color="primary">
+              Yes
+            </Button>
+          </DialogActions>
+        </Dialog>
+        
         <ConfirmDialog
           open={dialogOpen}
           onClose={() => setDialogOpen(false)}
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 1132b87..d985211 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -24,15 +24,15 @@ const ManageMembers = () => {
 
   useEffect(() => {
     setLoading(true);
-    fetchGroups();
+    fetchCustomers();
     setLoading(false);
   }, []);
 
-  async function fetchGroups() {
+  async function fetchCustomers() {
     try {
       let groups = await axios.get(`${BASE_URL}/customer/list`, {
         params: {
-          limit: 10,
+          limit: 20,
           page: 1,
           with_deleted: false,
           order_field: 'fullname',
@@ -100,7 +100,7 @@ const ManageMembers = () => {
       if (dialogType === 'update')
         await axios.put(`${BASE_URL}/customer/update/${selectedMember}`, updateData);
       // if (dialogType === 'create') await axios.post(`${BASE_URL}/customers/create`, member)
-      await fetchGroups();
+      await fetchCustomers();
       setDialogOpen(false);
       setIsDialogOpen(false);
       toast.success('Success Update Member');
@@ -130,6 +130,7 @@ const ManageMembers = () => {
           handleClose={closeDialog}
           handleSubmit={handleSubmit}
           initialData={member}
+          fetchCustomers={fetchCustomers}
         />
         <h1 className="text-xl font-medium leading-none text-gray-900 mb-3">Manage Members</h1>
         <Breadcrumbs>