diff --git a/src/pages/members/kyc/Kyc.tsx b/src/pages/members/kyc/Kyc.tsx
index b27ce0f..6bae188 100644
--- a/src/pages/members/kyc/Kyc.tsx
+++ b/src/pages/members/kyc/Kyc.tsx
@@ -85,16 +85,11 @@ const Kyc = () => {
     setDialogOpen(true);
   }
 
-  const resetForm = () => {
-    setMember(initialMember);
-  };
-
   const handleYes = async () => {
     setLoading(true);
     const userLogin: any = await getUser();
     const updateData: any = member;
     const customerId = member.id;
-    const description = member.description;
     const destinationGroup = updateData.destinationGroup;
     updateData.updated_by = userLogin.data ? userLogin.data.id : '';
     let today = new Date();
@@ -161,15 +156,13 @@ const Kyc = () => {
             description: updateData.approval_description_agent
           });
       }
-      setDialogOpen(false);
-      setIsDialogOpen(false);
       toast.success(`Success Update & ${dialogType} Kyc Member`);
     } catch (error: any) {
       if (error?.response?.data?.error) error.message = error?.response?.data?.error;
-      setDialogOpen(false);
-      setIsDialogOpen(false);
       toast.error(error.message);
     } finally {
+      setDialogOpen(false);
+      setIsDialogOpen(false);
       await fetchCustomers();
       setLoading(false);
     }
@@ -179,11 +172,15 @@ const Kyc = () => {
     setIsDialogOpen(el);
   }
 
-  if (loading) return <LoaderTransparant />;
+  // const resetForm = () => {
+  //   setMember(initialMember);
+  // };
 
-  useEffect(() => {
-    if (!isDialogOpen) resetForm();
-  }, [isDialogOpen]);
+  // useEffect(() => {
+  //   if (!isDialogOpen) resetForm();
+  // }, [isDialogOpen]);
+
+  if (loading) return <LoaderTransparant />;
 
   return (
     <>
@@ -200,14 +197,6 @@ const Kyc = () => {
           onNo={() => setDialogOpen(false)}
         />
         {member.id ? (
-          // <CustomerDialog
-          //   open={isDialogOpen}
-          //   handleClose={closeDialog}
-          //   handleSubmit={handleSubmit}
-          //   initialData={member}
-          //   viewStats={true}
-          //   page={'kyc'}
-          // />
           <DetailMember
             showAddDialog={isDialogOpen}
             setShowAddDialog={setShowAddDialog}
@@ -217,6 +206,7 @@ const Kyc = () => {
             initialData={member}
             fetchCustomers={fetchCustomers}
             profession={profession}
+            dialogType={dialogType}
             page={'kyc'}
           />
         ) : (
diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 0203ab4..a6c05e1 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -15,6 +15,7 @@ const BASE_URL_MASTER_DATA = apiConfig.service_master_data;
 const BASE_URL = apiConfig.service_customer;
 import { Helmet } from 'react-helmet';
 import ListToolbar from './blocks/ListToolBar';
+
 const ManageMembers = () => {
   const [loading, setLoading] = useState(false);
   const [members, setMembers] = useState([]);
diff --git a/src/pages/members/manage-members/blocks/AdmAccess.tsx b/src/pages/members/manage-members/blocks/AdmAccess.tsx
index bf735c3..3ebe437 100644
--- a/src/pages/members/manage-members/blocks/AdmAccess.tsx
+++ b/src/pages/members/manage-members/blocks/AdmAccess.tsx
@@ -26,29 +26,10 @@ export default function AdmAccess({page,groups,formData,handleClose,fetchCustome
   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);
-  //   } catch (error: any) {
-  //     toast.error(error.message);
-  //   }
-  // };
-
   const handleYes = async () => {
     try {
       if (dialogType === 'update status') {
diff --git a/src/pages/members/manage-members/blocks/DetailMember.tsx b/src/pages/members/manage-members/blocks/DetailMember.tsx
index 9852562..2ce6b25 100644
--- a/src/pages/members/manage-members/blocks/DetailMember.tsx
+++ b/src/pages/members/manage-members/blocks/DetailMember.tsx
@@ -183,7 +183,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
 
     return (
         <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
-            <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5">
+            <DialogContent className="container-fixed max-w-[85%] flex flex-col p-2">
                 <DialogHeader>
                     <DialogTitle>Member - {dialogType ==='create' ? "Create" : "View/Edit"}</DialogTitle>
                     <DialogDescription></DialogDescription>
@@ -196,7 +196,8 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             </Alert>
                         )}
 
-                        <div className="card-body grid gap-5">
+                        {/* <div className="card-body grid gap-5"> */}
+                        <div className="card-body grid grid-cols-1 md:grid-cols-2 gap-5">
 
                             {(formData.id || dialogType === "create") ? generateList(formData, handleChange, groups, 'group_id', 'Group', true, dialogType === "update"||false): ''}
                             {/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
@@ -233,19 +234,25 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Mother Fullname', 'mother_fullname', 'text', true, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Identity Number', 'identity_number', 'text', false, viewOnly): ''}
 
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'License Number', 'license_number', 'text', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Merchant Name', 'agent_name', 'text', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie'): ''}
-                            {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document', 'file_document_id'): ''}
-                            {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''}
-                            {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''}
-
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
+                            <div className="bg-white p-6 rounded-md shadow-md space-y-6">
+                                <h2 className="text-lg font-semibold">Agent Information</h2>
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'License Number', 'license_number', 'text', false, viewOnly): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Merchant Name', 'agent_name', 'text', false, viewOnly): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Merchant Address', 'merchantaddress', 'text', false, viewOnly): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Longitude Merchant', 'longitudemerchant', 'text', false, viewOnly): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Latitude Merchant', 'latitudemerchant', 'text', false, viewOnly): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie'): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document', 'file_document_id'): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie'): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license'): ''}
+                            </div>
+                            
+                            <div className="bg-white p-6 rounded-md shadow-md space-y-6">
+                                <h2 className="text-lg font-semibold">Bank Information</h2>
+                                {(formData.id || dialogType === "create") ? generateList(formData, handleChange, banks, 'bank_name', 'Bank Name', false, false): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Bank Account', 'bank_account', 'text', false, viewOnly): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'iBank Number', 'ibank_number', 'text', false, viewOnly): ''}
+                            </div>
 
                             {(formData.id&&(!page||formData.destinationGroup === "Premium")) ? generateInput(formData, handleChange, 'Approval Premium Description', 'approval_description_premium', 'text', false, viewOnly): ''}
                             {(formData.id&&(!page||formData.destinationGroup === "Agent")) ? generateInput(formData, handleChange, 'Approval Agent Description', 'approval_description_agent', 'text', false, viewOnly): ''}
@@ -257,7 +264,7 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                                 <CustomerWallet customerid={formData.id}/>
                             ) : ""}
 
-                            <div className="flex justify-end gap-5">
+                            <div className="col-span-1 md:col-span-2 flex justify-end gap-5">
                                 <Button onClick={(e:any) => btnPrevDef(e)} color="secondary">{ viewOnly ? (`Open Edit`) : (`Close Edit`) }</Button>
                                 <Button type="button" variant="outline" onClick={() => handleAddDialog(false)}>Cancel</Button>
                                 {/* <Button onClick={(e) => buttonOnSubmit(e, formData)} variant="default">Save Changes</Button> */}