diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 4d22c75..f241859 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,28 +1,8 @@
 import React, {useContext, useEffect, useState} from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Divider,
-  Input,
-  List,
-  message,
-  Modal,
-  Row,
-  Space,
-  Table,
-  Tag,
-  Form,
-  Select,
-} from "antd";
+import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
-import {
-  ExclamationCircleOutlined,
-  FilterOutlined,
-  PlusSquareOutlined,
-  DownloadOutlined,
-} from "@ant-design/icons";
+import {DownloadOutlined, ExclamationCircleOutlined, PlusSquareOutlined,} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {LINKS} from "../../routes/app";
@@ -133,21 +113,40 @@ export const Membership = observer(() => {
       key: "role",
     },
     {
-      title: "Saldo",
+      title: "Saldo di Supplier",
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
+      width: "20%",
+      render: (text) => (
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text)
+      )
+    },
+    {
+      title: "Saldo di System",
+      dataIndex: ["coa_undistribute", "amount"],
+      key: ["coa_undistribute", "amount"],
+      width: "20%",
+      render: (text) => (
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text)
+      )
     },
     {
       title: "Status",
       dataIndex: "isActive",
       key: "isActive",
       render: (text, record) => (
-        <Tag
-          color={record?.isActive === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
-        >
-          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
-        </Tag>
+          <Tag
+              color={record?.isActive === true ? "processing" : "#E3E8EE"}
+              style={{color: "#4F566B"}}
+          >
+            {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+          </Tag>
       ),
     },
     {
diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js
index 92faaef..4a21904 100644
--- a/src/pages/Membership/MembershipModal.js
+++ b/src/pages/Membership/MembershipModal.js
@@ -1,17 +1,16 @@
 import React from "react";
-import { Form, Input, Modal, Select } from "antd";
-import { capitalize } from "lodash";
-import { useStore } from "../../utils/useStore";
+import {Form, Input, Modal, Select} from "antd";
+import {useStore} from "../../utils/useStore";
 
 export const MembershipModal = ({
-  visible,
-  onCreate,
-  onCancel,
-  initialData,
-}) => {
-  const [form] = Form.useForm();
-  const { Option } = Select;
-  const store = useStore();
+                                    visible,
+                                    onCreate,
+                                    onCancel,
+                                    initialData,
+                                }) => {
+    const [form] = Form.useForm();
+    const {Option} = Select;
+    const store = useStore();
 
   return (
     <Modal
@@ -77,7 +76,7 @@ export const MembershipModal = ({
             label="Password"
             rules={[{ required: false, message: "Please input password!" }]}
           >
-            <Input />
+              <Input.Password/>
           </Form.Item>
         )}
         {((initialData.id && !initialData.isChangePassword) ||