diff --git a/src/pages/members/manage-members/ManageMembers.tsx b/src/pages/members/manage-members/ManageMembers.tsx
index 3dedff3..0651b82 100644
--- a/src/pages/members/manage-members/ManageMembers.tsx
+++ b/src/pages/members/manage-members/ManageMembers.tsx
@@ -175,7 +175,8 @@ const ManageMembers = () => {
         toast.success('Success Create Member. PIN sent to email');
       }
     } catch (error: any) {
-      toast.error(error.message);
+      if (error?.response?.data?.message) toast.error(error?.response?.data?.message)
+      else toast.error(error.message);
     } finally {
       setDialogOpen(false);
       closeDialog();
diff --git a/src/pages/members/manage-members/blocks/DetailMember.tsx b/src/pages/members/manage-members/blocks/DetailMember.tsx
index 2ce6b25..1ba2005 100644
--- a/src/pages/members/manage-members/blocks/DetailMember.tsx
+++ b/src/pages/members/manage-members/blocks/DetailMember.tsx
@@ -41,6 +41,10 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
     const [sucos, setSucos] = useState<any>([]);
     const [groups, setGroups] = useState([]);
     const [genders] = useState([ { name: 'Male',id: 'M' }, { name: 'Female',id: 'F' }])
+    const [previewImg, setPreviewImg] = useState({
+        status: false,
+        img: ''
+    });
     const [banks] = useState([
         { name: 'BNCTL',id: 'BNCTL' }, { name: 'BRI',id: 'BRI' }, { name: 'BNU',id: 'BNU' }, { name: 'Mandiri',id: 'Mandiri' }
     ])
@@ -203,36 +207,44 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                             {/* {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Group', 'group_name', 'text', true, true): ''} */}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Username', 'username', 'text', true, dialogType==='create'?false:true): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Full Name', 'fullname', 'text', true, viewOnly): ''}
-                            {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser'): ''}
+                            {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'Photo', 'photouser', previewImg, setPreviewImg): ''}
                             {(formData.id || dialogType === "create") ? generateList(formData, handleChange, genders, 'gender', 'Gender', true, false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Date of Birth', 'date_birth', 'date', true, viewOnly): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Phone Number', 'msisdn', 'text', true, dialogType === "update"||false): ''}
                             {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Email', 'email', 'text', true, viewOnly): ''}
                             {/* {generateList(formData, handleChange, status, 'status', 'Status', null, true)} */}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio_id', 'Municipio', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms_id', 'Posto', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco_id', 'Suco', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia_id', 'Aldeia', false, false): ''}
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
-                            <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
-                                <label className="form-label flex items-center gap-1 max-w-56"></label>
-                                <ul className="">
-                                    {nationality.map((item: any, index) => (
-                                        <li key={index} value={item.name} 
-                                        onClick={() => handleChange({target:{name: 'nationality', value: item.name }})}
-                                        className="bg-gray-100 px-4 py-2 rounded hover:bg-gray-200 cursor-default transition">
-                                            {item.name}
-                                        </li>
-                                    ))}
-                                    {formData.nationality && nationality.length === 0 && (
-                                        <li className="text-gray-500">No results found.</li>
-                                    )}
-                                </ul>
-                            </div>
-                            {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
                             {(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): ''}
+                            <div className="bg-white space-y-6">
+                                {(formData.id || dialogType === "create") ? generateList(formData, handleChange, profession, 'profession', 'Profession', false, false): ''}
+                                {(formData.id || dialogType === "create") ? generateList(formData, handleChange, municipios, 'municipio_id', 'Municipio', false, false): ''}
+                                {(formData.id || dialogType === "create") ? generateList(formData, handleChange, postoAdm, 'posto_adms_id', 'Posto', false, false): ''}
+                                {(formData.id || dialogType === "create") ? generateList(formData, handleChange, sucos, 'suco_id', 'Suco', false, false): ''}
+                                {(formData.id || dialogType === "create") ? generateList(formData, handleChange, aldeias, 'aldeia_id', 'Aldeia', false, false): ''}
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Nationality', 'nationality', 'text', true, viewOnly): ''}
+                                <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                                    <label className="form-label flex items-center gap-1 max-w-56"></label>
+                                    <ul className="">
+                                        {nationality.map((item: any, index) => (
+                                            <li key={index} value={item.name} 
+                                            onClick={() => handleChange({target:{name: 'nationality', value: item.name }})}
+                                            className="bg-gray-100 px-4 py-2 rounded hover:bg-gray-200 cursor-default transition">
+                                                {item.name}
+                                            </li>
+                                        ))}
+                                        {formData.nationality && nationality.length === 0 && (
+                                            <li className="text-gray-500">No results found.</li>
+                                        )}
+                                    </ul>
+                                </div>
+                                {(formData.id || dialogType === "create") ? generateInput(formData, handleChange, 'Address', 'address', 'text', true, viewOnly): ''}
+                                <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>
+                            </div>
 
                             <div className="bg-white p-6 rounded-md shadow-md space-y-6">
                                 <h2 className="text-lg font-semibold">Agent Information</h2>
@@ -241,18 +253,13 @@ const DetailMember = ({ showAddDialog, setShowAddDialog, handleSubmit, initialDa
                                 {(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") ? generateImage(formData, handleChange, 'File Selfie', 'file_selfie', previewImg, setPreviewImg): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document', 'file_document_id', previewImg, setPreviewImg): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Document & Selfie', 'file_document_id_selfie', previewImg, setPreviewImg): ''}
+                                {(formData.id || dialogType === "create") ? generateImage(formData, handleChange, 'File Commercial License', 'file_commercial_license', previewImg, setPreviewImg): ''}
                             </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): ''}
@@ -340,7 +347,7 @@ function generateList(formData:any, handleChange: any, list:any, name:string, la
 }
 
 // ON DEV (UPDATENYA)
-function generateImage(formData:any, handleChange:any, label:string, name:string) {
+function generateImage(formData:any, handleChange:any, label:string, name:string, previewImg: any, setPreviewImg:any) {
     const imagePreview = (file:any) => {
         if (file && file.type && file.type.startsWith('image/')) {
           const previewURL = URL.createObjectURL(file);
@@ -349,8 +356,21 @@ function generateImage(formData:any, handleChange:any, label:string, name:string
         return file
     };
 
+    function handlePrevImg(par: boolean) {
+        if (par) setPreviewImg({ status: true, img: ''})
+        if (!par) setPreviewImg({ status: false, img: '' })
+    }
+
+    function onClickImg(img: any) {
+        setPreviewImg({ status: true, img })
+    }
+
     return (
         <>
+            {previewImg.status ? (
+                <PreviewImage previewImgDialog={previewImg.status} handlePreviewImgDialog={handlePrevImg}
+                modalImage={previewImg.img}/>
+            ):''}
             <div className="flex items-center justify-between w-full max-w-xl">
                 <label className="form-label flex items-center gap-1 max-w-56">
                     {label}<span className="text-red-500"></span>
@@ -358,7 +378,8 @@ function generateImage(formData:any, handleChange:any, label:string, name:string
                 <div className="flex items-center space-x-4 w-3/4 justify-end">
                     { formData[name] ? (
                         <div className="border-2 border-dashed border-red-300 rounded-md p-2">
-                            <img width={300} height={250} srcSet={imagePreview(formData[name])} src={imagePreview(formData[name])} alt={name} style={{borderRadius: 10}}/>
+                            <img width={300} height={250} srcSet={imagePreview(formData[name])} src={imagePreview(formData[name])} 
+                            alt={name} style={{borderRadius: 10, cursor: 'pointer' }} onClick={() => onClickImg(imagePreview(formData[name]))}/>
                             {/* <img width={300} height={250} srcSet={formData[name]} src={formData[name]} alt={name} style={{borderRadius: 10}}/> */}
                         </div>
                     ) : (<span>No Data</span>)}
@@ -371,3 +392,29 @@ function generateImage(formData:any, handleChange:any, label:string, name:string
         </>
     )
 }
+
+function PreviewImage({previewImgDialog, handlePreviewImgDialog, modalImage}:any) {
+    return (
+        <>
+            <Dialog open={previewImgDialog} onOpenChange={(open) => handlePreviewImgDialog(open)}>
+                <DialogContent className="">
+                    <DialogTitle aria-describedby={''}></DialogTitle>
+                    <DialogBody>
+                    <button
+                        onClick={() => handlePreviewImgDialog(false)}
+                        className="absolute top-2 right-2 text-white bg-red-600 hover:bg-red-800 rounded-full px-3 py-1 text-xl font-bold"
+                    >
+                    &times;
+                    </button>
+                    <img
+                        src={modalImage}
+                        alt="Preview"
+                        className="max-w-full max-h-[80vh] rounded-lg"
+                    />
+                    </DialogBody>
+
+                </DialogContent>
+            </Dialog>
+        </>
+    )
+}