diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 752cbe0..f0e257d 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -8,8 +8,12 @@ import {
   Row,
   Col,
   Typography,
+  Upload,
+  message,
 } from "antd";
 import { useStore } from "../../utils/useStore";
+import { appConfig } from "../../config/app";
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
 
 const { Title, Text } = Typography;
 export const MembershipModal = ({
@@ -22,6 +26,106 @@ export const MembershipModal = ({
   const { Option } = Select;
   const store = useStore();
   const [value, setValue] = useState();
+  const [image, setImage] = useState("");
+  const [imageStore, setImageStore] = useState("");
+  const [fileList, setFileList] = useState([]);
+  const [fileStore, setFileStore] = useState([]);
+  const [previewImage, setPreviewImage] = useState("");
+  const [previewImageStore, setPreviewImageStore] = useState("");
+  const [responseFilename, setResponseFilename] = useState("");
+  const [responseFilenameStore, setResponseFilenameStore] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [loadingStore, setLoadingStore] = useState(false);
+
+  const beforeUpload = (file) => {
+    let isLt2M;
+    let allowedFile = ["image/jpeg", "image/png"];
+    let isValid = allowedFile.includes(file.type);
+    if (!isValid) {
+      message.error("You can only upload Image file!");
+    }
+    isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error("File must smaller than 2MB!");
+    }
+    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+  };
+
+  const beforeUploadStore = (file) => {
+    let isLt2M;
+    let allowedFile = ["image/jpeg", "image/png"];
+    let isValid = allowedFile.includes(file.type);
+    if (!isValid) {
+      message.error("You can only upload Image file!");
+    }
+    isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error("File must smaller than 2MB!");
+    }
+    return isValid && isLt2M ? true : Upload.LIST_IGNORE;
+  };
+
+  const uploadHandler = async (args) => {
+    const file = args.file;
+    const res = await store.payback.uploadImages(file);
+    setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
+    setResponseFilename(res.body.filename);
+    setFileList([
+      {
+        uid: "-1",
+        name: res.body.filename,
+        status: "done",
+        url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+      },
+    ]);
+    setLoading(false);
+  };
+
+  const uploadHandlerStore = async (args) => {
+    const file = args.file;
+    const res = await store.payback.uploadImages(file);
+    setImageStore(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
+    setResponseFilenameStore(res.body.filename);
+    setFileStore([
+      {
+        uid: "-1",
+        name: res.body.filename,
+        status: "done",
+        url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+      },
+    ]);
+    setLoadingStore(false);
+  };
+
+  const handleChange = (info) => {
+    if (info.file.status === "uploading") {
+      setLoading(true);
+    } else {
+      setLoading(false);
+    }
+  };
+
+  const handleChangeStore = (info) => {
+    if (info.file.status === "uploading") {
+      setLoadingStore(true);
+    } else {
+      setLoadingStore(false);
+    }
+  };
+
+  const uploadButton = (
+    <div>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Click to Upload</div>
+    </div>
+  );
+
+  const uploadButtonStore = (
+    <div>
+      {loadingStore ? <LoadingOutlined /> : <PlusOutlined />}
+      <div style={{ marginTop: 8 }}>Click to Upload</div>
+    </div>
+  );
 
   return (
     <Modal
@@ -115,21 +219,201 @@ export const MembershipModal = ({
           </Form.Item>
         )}
         {((initialData.id && !initialData.isChangePassword) ||
-          !initialData.id) && (
-          <Form.Item
-            name="roleId"
-            label="Role"
-            rules={[{ required: true, message: "Please input role id!" }]}
-          >
-            <Select>
-              {store.role.data.map((item) => (
-                <Option key={item.id} value={item.id}>
-                  {item.name}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
-        )}
+          !initialData.id) &&
+          store.authentication.userData.role === "Admin" && (
+            <Form.Item
+              name="roleId"
+              label="Role"
+              rules={[{ required: true, message: "Please input role id!" }]}
+            >
+              <Select>
+                {store.role.data.map((item) => (
+                  <Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )}
+        {((initialData.id && !initialData.isChangePassword) ||
+          !initialData.id) &&
+          store.authentication.userData.role === "Supervisor" && (
+            <div>
+              <Form.Item
+                name="identity_number"
+                label="Identity Number"
+                rules={[
+                  {
+                    required: true,
+                    message: "Please input identity number!",
+                  },
+                  {
+                    pattern: /^(?:\d*)$/,
+                    message: "Phone number should contain just number",
+                  },
+                ]}
+              >
+                <Input
+                  onChange={(value) => {
+                    setValue(value);
+                  }}
+                />
+              </Form.Item>
+              <Form.Item
+                label="Upload Foto Identitas Diri"
+                name="image_identity"
+              >
+                <div>
+                  <Upload
+                    listType="picture-card"
+                    fileList={fileList}
+                    onPreview={(file) => {
+                      setPreviewImage(file.url || file.filename);
+                    }}
+                    showUploadList={true}
+                    onChange={handleChange}
+                    beforeUpload={(file) => beforeUpload(file)}
+                    customRequest={(args) => uploadHandler(args)}
+                    onRemove={(file) => {
+                      setImage("");
+                      setLoading(false);
+                      setFileList([]);
+                    }}
+                  >
+                    {image === "" ? uploadButton : null}
+                  </Upload>
+                  <h5
+                    style={{
+                      marginTop: 12,
+                      color: "rgba(0, 0, 0, 0.45)",
+                    }}
+                  >
+                    Max size of file 2 MB
+                  </h5>
+                </div>
+              </Form.Item>
+              <Form.Item
+                name="roleId"
+                label="Role"
+                rules={[{ required: true, message: "Please input role id!" }]}
+              >
+                <Select>
+                  <Option
+                    key="e4dfb6a3-2348-464a-8fb8-5cbc089d4209"
+                    value="e4dfb6a3-2348-464a-8fb8-5cbc089d4209"
+                  >
+                    Sales
+                  </Option>
+                </Select>
+                {/* <Input defaultValue="00" disabled/> */}
+              </Form.Item>
+            </div>
+          )}
+        {((initialData.id && !initialData.isChangePassword) ||
+          !initialData.id) &&
+          store.authentication.userData.role === "Sales" && (
+            <div>
+              <Form.Item
+                name="identity_number"
+                label="Identity Number"
+                rules={[
+                  {
+                    required: true,
+                    message: "Please input identity number!",
+                  },
+                  {
+                    pattern: /^(?:\d*)$/,
+                    message: "Phone number should contain just number",
+                  },
+                ]}
+              >
+                <Input
+                  onChange={(value) => {
+                    setValue(value);
+                  }}
+                />
+              </Form.Item>
+              {/* <Row>
+                <Col> */}
+              <Form.Item
+                label="Upload Foto Identitas Diri"
+                name="image_identity"
+              >
+                <div>
+                  <Upload
+                    listType="picture-card"
+                    fileList={fileList}
+                    onPreview={(file) => {
+                      setPreviewImage(file.url || file.filename);
+                    }}
+                    showUploadList={true}
+                    onChange={handleChange}
+                    beforeUpload={(file) => beforeUpload(file)}
+                    customRequest={(args) => uploadHandler(args)}
+                    onRemove={(file) => {
+                      setImage("");
+                      setLoading(false);
+                      setFileList([]);
+                    }}
+                  >
+                    {image === "" ? uploadButton : null}
+                  </Upload>
+                  <h5
+                    style={{
+                      marginTop: 12,
+                      color: "rgba(0, 0, 0, 0.45)",
+                    }}
+                  >
+                    Max size of file 2 MB
+                  </h5>
+                </div>
+              </Form.Item>
+              <Form.Item label="Upload Foto Toko / Kios" name="image_store">
+                <div>
+                  <Upload
+                    listType="picture-card"
+                    fileList={fileStore}
+                    onPreview={(file) => {
+                      setPreviewImageStore(file.url || file.filename);
+                    }}
+                    showUploadList={true}
+                    onChange={handleChangeStore}
+                    beforeUpload={(file) => beforeUploadStore(file)}
+                    customRequest={(args) => uploadHandlerStore(args)}
+                    onRemove={(file) => {
+                      setImageStore("");
+                      setLoadingStore(false);
+                      setFileStore([]);
+                    }}
+                  >
+                    {imageStore === "" ? uploadButtonStore : null}
+                  </Upload>
+                  <h5
+                    style={{
+                      marginTop: 12,
+                      color: "rgba(0, 0, 0, 0.45)",
+                    }}
+                  >
+                    Max size of file 2 MB
+                  </h5>
+                </div>
+              </Form.Item>
+              <Form.Item
+                name="roleId"
+                label="Role"
+                rules={[{ required: true, message: "Please input role id!" }]}
+              >
+                <Select>
+                  <Option
+                    key="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
+                    value="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
+                  >
+                    Retail
+                  </Option>
+                </Select>
+              </Form.Item>
+            </div>
+          )}
       </Form>
     </Modal>
   );