diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index f80a61b..51db6dc 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -114,7 +114,10 @@ export const PartnerComponent = observer((props) => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-          <Button onClick={() => changeStatus(record?.id, record?.status)}>
+          <Button
+            type={record?.status === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.status)}
+          >
             {record?.status === true ? "Inactive" : "Active"}
           </Button>
           <Button onClick={() => handleEditButton(record)}>Edit</Button>
@@ -166,10 +169,18 @@ export const PartnerComponent = observer((props) => {
       setConfirmLoading(true);
       try {
         await store.partner.update(idData, data);
-        message.success(isChangePassword ? "Failed Change Partner Password" : "Success Update Data Partner");
+        message.success(
+          isChangePassword
+            ? "Failed Change Partner Password"
+            : "Success Update Data Partner"
+        );
         //await store.partner.getData()
       } catch (e) {
-        message.error(isChangePassword ? "Failed Change Partner Password" : "Failed Update Data Partner");
+        message.error(
+          isChangePassword
+            ? "Failed Change Partner Password"
+            : "Failed Update Data Partner"
+        );
       }
       setConfirmLoading(false);
       store.partner.visibleModalPartner = false;
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 1b47af9..4316984 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -10,6 +10,8 @@ import {
   DatabaseOutlined,
   FileAddOutlined,
   FileSyncOutlined,
+  FileProtectOutlined,
+  ShoppingCartOutlined,
 } from "@ant-design/icons";
 import { AppRoute, LINKS } from "../../routes/app";
 import { useStore } from "../../utils/useStore";
@@ -122,12 +124,12 @@ export const DesktopLayout = observer(() => {
               {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
-                    <HomeOutlined />
+            <FileProtectOutlined />
                     <span>Membership</span>
                   </Link>
                 </Menu.Item>
               )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role === "Admin" && (
                 <SubMenu
                   key="config"
                   icon={<HomeOutlined />}
@@ -154,10 +156,10 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role === "Admin" && (
                 <SubMenu
                   key="product-main"
-                  icon={<ProfileOutlined />}
+                  icon={<DatabaseOutlined />}
                   title="Product"
                 >
                   <Menu.Item key="product">
@@ -180,28 +182,28 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                 </SubMenu>
               )}
-              {store.authentication.userData.role !== "Retail" && (
+              {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="product">
                   <Link to={LINKS.PRODUCT}>
-                    <HomeOutlined />
+                    <DatabaseOutlined />
                     <span>Product</span>
                   </Link>
                 </Menu.Item>
               )}
+              {store.authentication.userData.role === "Retail" && (
+                <Menu.Item key="transaction">
+                  <Link to={LINKS.TRANSACTION}>
+                    <ShoppingCartOutlined />
+                    <span>Transaction</span>
+                  </Link>
+                </Menu.Item>
+              )}
               <Menu.Item key="payback">
                 <Link to={LINKS.PAYBACK}>
-                  <HomeOutlined />
+                  <DatabaseOutlined />
                   <span>Payback</span>
                 </Link>
               </Menu.Item>
-              {store.authentication.userData.role === "Retail" && (
-                <Menu.Item key="transaction">
-                  <Link to={LINKS.TRANSACTION}>
-                    <HomeOutlined />
-                    <span>Transaction</span>
-                  </Link>
-                </Menu.Item>
-              )}
               <Menu.Item key="profile">
                 <Link to={LINKS.PROFILE}>
                   <UserOutlined />
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index afc5508..f7796cd 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -12,6 +12,7 @@ import {
   MoneyCollectOutlined,
   ProfileOutlined,
   ProjectOutlined,
+  ShoppingCartOutlined,
   UserOutlined,
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
@@ -59,7 +60,7 @@ export const MenuList = observer((props) => {
           </Link>
         </Menu.Item>
       )}
-      {store.authentication.userData.role !== "Retail" && (
+      {store.authentication.userData.role === "Admin" && (
         <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
@@ -81,7 +82,7 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role !== "Retail" && (
+      {store.authentication.userData.role === "Admin" && (
         <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
           <Menu.Item key="product">
             <Link to={LINKS.PRODUCT}>
@@ -103,10 +104,18 @@ export const MenuList = observer((props) => {
           </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
+      {store.authentication.userData.role !== "Admin" && (
+        <Menu.Item key="retail">
+          <Link to={LINKS.PRODUCT}>
+            <DatabaseOutlined />
+            <span>Product</span>
+          </Link>
+        </Menu.Item>
+      )}
+      {store.authentication.userData.role === "Retail" && (
         <Menu.Item key="transaction">
           <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
+            <ShoppingCartOutlined />
             <span>Transaction</span>
           </Link>
         </Menu.Item>
@@ -117,14 +126,6 @@ export const MenuList = observer((props) => {
           <span>Payback</span>
         </Link>
       </Menu.Item>
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
-        <Menu.Item key="transaction">
-          <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
-            <span>Transaction</span>
-          </Link>
-        </Menu.Item>
-      )}
       <Menu.Item key="profile">
         <Link to={LINKS.PROFILE}>
           <UserOutlined />
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index abd6d91..3db8042 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -33,6 +33,8 @@ export const Membership = observer(() => {
   const [form] = Form.useForm();
   const store = useStore();
   const [visibleModal, setVisibleModal] = useState(false);
+  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
+  const [destination, setDestination] = useState(null);
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -43,6 +45,8 @@ export const Membership = observer(() => {
         setIsLoading(true);
         await getData();
         store.role.getData();
+        if (store.authentication.userData.role === "Admin")
+          await store.supplier.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -53,10 +57,10 @@ export const Membership = observer(() => {
   }, []);
 
   const getData = () => {
-    (store.authentication.userData.role === "Admin")
-          ? store.membership.getData()
-          : store.membership.getDataBySuperior();
-  }
+    store.authentication.userData.role === "Admin"
+      ? store.membership.getData()
+      : store.membership.getDataBySuperior();
+  };
 
   const changeStatus = async (id, isActive) => {
     const status = isActive ? "inactive" : "active";
@@ -76,13 +80,17 @@ export const Membership = observer(() => {
     }
   };
   const handleCancelTransaction = () => {
-    store.supplier.visibleModalTransaction = false;
+    setIsVisibleTopUpModal(false);
+    setDestination(null);
   };
   const handleSubmitTransaction = async (data) => {
-    console.log(data, "isi data2");
     setConfirmLoading(true);
     try {
-      await store.supplier.createTransaction(data);
+      data.destination = destination;
+
+      (await store.authentication.userData.role) === "Admin"
+        ? store.transaction.distributeAdmin(data)
+        : store.transaction.distribute(data);
       message.success("Success Top Up");
       //await store.supplier.getData()
     } catch (e) {
@@ -90,8 +98,9 @@ export const Membership = observer(() => {
       message.error("Failed Top Up");
     }
     setConfirmLoading(false);
-    store.supplier.visibleModalTransaction = false;
+    setIsVisibleTopUpModal(false);
     form.resetFields();
+    setDestination(null);
   };
 
   const columns = [
@@ -128,9 +137,20 @@ export const Membership = observer(() => {
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-          <Button onClick={() => changeStatus(record?.id, record?.isActive)}>
+          <Button
+            type={record?.status === true ? "danger" : "primary"}
+            onClick={() => changeStatus(record?.id, record?.isActive)}
+          >
             {record?.isActive === true ? "Inactive" : "Active"}
           </Button>
+          <Button
+            onClick={() => {
+              setDestination(record?.user_detail?.id);
+              setIsVisibleTopUpModal(true);
+            }}
+          >
+            <DownloadOutlined /> Top Up Saldo
+          </Button>
           <Button
             onClick={() => {
               let record2 = record;
@@ -248,20 +268,15 @@ export const Membership = observer(() => {
   };
   return (
     <div className={["ppob-container"].join(" ")}>
-      {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
       <BreadcumbComponent data={routeData} />
       <Card>
         <div>
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
-              <Button>
+              {/* <Button>
                 <FilterOutlined />
                 Filter
-              </Button>
+              </Button> */}
             </Col>
             <Col span={12} style={{ textAlign: "right" }}>
               <Search
@@ -282,19 +297,6 @@ export const Membership = observer(() => {
               </Button>
             </Col>
           </Row>
-          <Col
-            span={24}
-            style={{
-              textAlign: "right",
-              marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
-            }}
-          >
-            <Button
-              onClick={() => (store.supplier.visibleModalTransaction = true)}
-            >
-              <DownloadOutlined /> Top Up Saldo
-            </Button>
-          </Col>
           {store.ui.mediaQuery.isDesktop && (
             <Table
               key="1"
@@ -383,7 +385,7 @@ export const Membership = observer(() => {
         </div>
       </Card>
       <Modal
-        visible={store.supplier.visibleModalTransaction}
+        visible={isVisibleTopUpModal}
         title="Top Up Saldo"
         okText="Top Up"
         cancelText="Cancel"
@@ -405,19 +407,21 @@ export const Membership = observer(() => {
         }}
       >
         <Form form={form} layout="vertical">
-          <Form.Item
-            name="supplier"
-            label="Supplier"
-            rules={[{ required: true, message: "Please input supplier!" }]}
-          >
-            <Select placeholder="Select Code Supplier" allowClear>
-              {store.supplier.data.map((item) => (
-                <Option value={item.code} key={item.code}>
-                  {item.code}
-                </Option>
-              ))}
-            </Select>
-          </Form.Item>
+          {store.authentication.userData.role === "Admin" && (
+            <Form.Item
+              name="supplier"
+              label="Supplier"
+              rules={[{ required: true, message: "Please input supplier!" }]}
+            >
+              <Select placeholder="Select Code Supplier" allowClear>
+                {store.supplier.data.map((item) => (
+                  <Option value={item.code} key={item.code}>
+                    {item.code}
+                  </Option>
+                ))}
+              </Select>
+            </Form.Item>
+          )}
           <Form.Item
             name="amount"
             label="Amount"
diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js
index c3c6738..2b2742d 100644
--- a/src/pages/Payback/Payback.js
+++ b/src/pages/Payback/Payback.js
@@ -1,290 +1,308 @@
-import React, {useState} from "react";
-import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {PaybackModal} from "./PaybackModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
+import React, { useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Image,
+  Input,
+  List,
+  message,
+  Row,
+  Space,
+  Table,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import {
+  CheckCircleOutlined,
+  CloseOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
+import { PaybackModal } from "./PaybackModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { LINKS } from "../../routes/app";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Payback = observer(() => {
-    const store = useStore();
-    const [visibleModal, setVisibleModal] = useState(false);
-    const [confirmLoading, setConfirmLoading] = useState(false);
-    const [initialData, setInitialData] = useState({});
+  const store = useStore();
+  const [visibleModal, setVisibleModal] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [initialData, setInitialData] = useState({});
 
-    // useEffect(() => {
-    //     // const init = async () => {
-    //     //   try {
-    //     //     setIsLoading(true);
-    //     //     await store.membership.getData();
-    //     //     await store.role.getData();
-    //     //     setIsLoading(false);
-    //     //   } catch (e) {
-    //     //     setIsLoading(false);
-    //     //   }
-    //     // };
-    //
-    //     // init();
-    // }, []);
+  // useEffect(() => {
+  //     // const init = async () => {
+  //     //   try {
+  //     //     setIsLoading(true);
+  //     //     await store.membership.getData();
+  //     //     await store.role.getData();
+  //     //     setIsLoading(false);
+  //     //   } catch (e) {
+  //     //     setIsLoading(false);
+  //     //   }
+  //     // };
+  //
+  //     // init();
+  // }, []);
 
-    const dummyData = [
-        {
-            key: '1',
-            id: 1,
-            name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
-            amount: "Rp. 1.000.000",
-        },
-        {
-            key: '2',
-            id: 1,
-            name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
-            amount: "Rp. 1.000.000",
-        },
-        {
-            key: '3',
-            id: 1,
-            name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
-            amount: "Rp. 1.000.000",
-        },
-        {
-            key: '4',
-            id: 1,
-            name: "John Doe",
-            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
-            amount: "Rp. 1.000.000",
-        },
-    ]
+  const dummyData = [
+    {
+      key: "1",
+      id: 1,
+      name: "John Doe",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      amount: "Rp. 1.000.000",
+    },
+    {
+      key: "2",
+      id: 1,
+      name: "John Doe",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      amount: "Rp. 1.000.000",
+    },
+    {
+      key: "3",
+      id: 1,
+      name: "John Doe",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      amount: "Rp. 1.000.000",
+    },
+    {
+      key: "4",
+      id: 1,
+      name: "John Doe",
+      picture:
+        "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
+      amount: "Rp. 1.000.000",
+    },
+  ];
 
-    const columns = [
-        {
-            title: "Name",
-            dataIndex: "name",
-            key: "name",
-        },
-        {
-            title: "Picture",
-            dataIndex: "picture",
-            key: "picture",
-            render: (text, record) => (
-                <Image
-                    src={record.picture}
-                    style={{width: 50, height: 50}}
-                    shape="circle"
-                    alt="avatar"
-                />
-            ),
-        },
-        {
-            title: "Amount",
-            dataIndex: "amount",
-            key: "amount",
-        },
-        {
-            title: "Action",
-            key: "action",
-            width: 100,
-            render: (text, record) => (
-                <Space size="middle">
-                    <Button
-                        onClick={async () => {
-                            await handleAction(record, 'accept');
-                        }}
-                        icon={<CheckCircleOutlined/>}
-                        style={{
-                            backgroundColor: "#1bb91d",
-                            color: "#fff",
-                            borderColor: "#1bb91d",
-                        }}
-                    >
-                        Accept
-                    </Button>
-                    <Button
-                        onClick={async () => {
-                            await handleAction(record, 'reject');
-                        }}
-                        icon={<CloseOutlined/>}
-                        style={{
-                            backgroundColor: "#ff1c1c",
-                            color: "#fff",
-                            borderColor: "#ff1c1c",
-                        }}
-                    >
-                        Reject
-                    </Button>
-                </Space>
-            ),
-        },
-    ];
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+    },
+    {
+      title: "Picture",
+      dataIndex: "picture",
+      key: "picture",
+      render: (text, record) => (
+        <Image
+          src={record.picture}
+          style={{ width: 50, height: 50 }}
+          shape="circle"
+          alt="avatar"
+        />
+      ),
+    },
+    {
+      title: "Amount",
+      dataIndex: "amount",
+      key: "amount",
+    },
+    {
+      title: "Action",
+      key: "action",
+      width: 100,
+      render: (text, record) => (
+        <Space size="middle">
+          <Button
+            onClick={async () => {
+              await handleAction(record, "accept");
+            }}
+            icon={<CheckCircleOutlined />}
+            style={{
+              backgroundColor: "#1bb91d",
+              color: "#fff",
+              borderColor: "#1bb91d",
+            }}
+          >
+            Accept
+          </Button>
+          <Button
+            onClick={async () => {
+              await handleAction(record, "reject");
+            }}
+            icon={<CloseOutlined />}
+            style={{
+              backgroundColor: "#ff1c1c",
+              color: "#fff",
+              borderColor: "#ff1c1c",
+            }}
+          >
+            Reject
+          </Button>
+        </Space>
+      ),
+    },
+  ];
 
-    const routeData = [
-        {
-            route: LINKS.HOME,
-            name: "Home",
-        },
-        {
-            route: LINKS.PAYBACK,
-            name: <span style={{fontWeight: "bold"}}>Payback</span>,
-        },
-    ];
+  if(store.authentication.userData.role === "Retail") columns.pop();
 
-    const onSubmit = async (data) => {
-        setConfirmLoading(true);
-        try {
-            // await store.membership.create(data);
-            // message.success("Success Add New Member");
-            // await store.membership.getData();
-        } catch (e) {
-            console.error(e, "apa errornya");
-            message.error("Failed Add Member");
-        }
-        setConfirmLoading(false);
-        setVisibleModal(false);
-    };
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.PAYBACK,
+      name: <span style={{ fontWeight: "bold" }}>Payback</span>,
+    },
+  ];
 
-    const handleAction = async (record, type) => {
+  const onSubmit = async (data) => {
+    setConfirmLoading(true);
+    try {
+      // await store.membership.create(data);
+      // message.success("Success Add New Member");
+      // await store.membership.getData();
+    } catch (e) {
+      console.error(e, "apa errornya");
+      message.error("Failed Add Member");
+    }
+    setConfirmLoading(false);
+    setVisibleModal(false);
+  };
 
-    };
+  const handleAction = async (record, type) => {};
 
-    return (
-        <div className={["ppob-container"].join(" ")}>
-            {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-      </Modal> */}
-            <BreadcumbComponent data={routeData}/>
-            <Card>
-                <div>
-                    <Row style={{marginBottom: 20}}>
-                        <Col span={12}>
-                            <Button>
-                                <FilterOutlined/>
-                                Filter
-                            </Button>
-                        </Col>
-                        <Col span={12} style={{textAlign: "right"}}>
-                            <Search
-                                placeholder="input search text"
-                                style={{
-                                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
-                                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
-                                    marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
-                                }}
-                            />
-                            <Button
-                                onClick={() => {
-                                    setInitialData({});
-                                    setVisibleModal(true);
-                                }}
-                            >
-                                <PlusSquareOutlined/> New
-                            </Button>
-                        </Col>
-                    </Row>
-                    {store.ui.mediaQuery.isDesktop && (
-                        <Table
-                            key="1"
-                            hasEmpty
-                            columns={columns}
-                            dataSource={dummyData}
-                            bordered
-                            // pagination={{
-                            //     pageSize: store.membership.pageSize,
-                            //     total: store.membership.total_data,
-                            //     current: store.membership.page + 1,
-                            //     showSizeChanger: true,
-                            //     simple: false
-                            // }}
-                            // onChange={async (page) => {
-                            //     let pageNumber = page.current;
-                            //     store.membership.pageSize = page.pageSize;
-                            //     store.membership.page = pageNumber - 1;
-                            //     // store.membership.isLoading = true;
-                            //     await store.membership.getData();
-                            //     // store.membership.isLoading = false;
-                            // }}
-                        />
-                    )}
-
-                    {store.ui.mediaQuery.isMobile && (
-                        <List
-                            itemLayout="horizontal"
-                            position={"top"}
-                            // pagination={{
-                            //     onChange: (page) => {
-                            //         store.membership.pageSize = page.pageSize;
-                            //         store.membership.page = page.current;
-                            //         store.membership.getData();
-                            //     },
-                            //     pageSize: store.membership.pageSize,
-                            //     total: store.membership.total_data,
-                            //     current: store.membership.page,
-                            //     style: {marginBottom: "1rem", marginRight: "1rem"},
-                            // }}
-                            dataSource={dummyData}
-                            style={{padding: 0}}
-                            renderItem={(item) => {
-                                return (
-                                    <div>
-                                        <List.Item
-                                            key={item.id}
-                                            style={{
-                                                backgroundColor: "#ffffff",
-                                                paddingTop: 0,
-                                                paddingBottom: 0,
-                                                display: "flex",
-                                                flexDirection: "row",
-                                                alignItems: "center",
-                                                justifyContent: "center",
-                                            }}
-                                        >
-                                            <List.Item.Meta
-                                                className={["cariparkir-container"].join(" ")}
-                                                title={item.name}
-                                                description={
-                                                    <div style={{}}>
-                                                        <Image src={item.picture} preview={false}/>
-                                                    </div>
-                                                }
-                                            />
-                                            <div style={{marginRight: 16}}>
-                                                <p
-                                                    style={{
-                                                        fontSize: 9,
-                                                        margin: 0,
-                                                    }}
-                                                >
-                                                    {item.amount}
-                                                </p>
-                                            </div>
-                                        </List.Item>
-                                        <Divider plain style={{margin: 0}}/>
-                                    </div>
-                                );
-                            }}
-                        />
-                    )}
-                </div>
-            </Card>
-
-            <PaybackModal
-                visible={visibleModal}
-                confirmLoading={confirmLoading}
-                initialData={initialData}
-                onCreate={async (data) => {
-                    await onSubmit(data);
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData} />
+      <Card>
+        <div>
+          <Row style={{ marginBottom: 20 }}>
+            <Col span={12}>
+              <Button>
+                <FilterOutlined />
+                Filter
+              </Button>
+            </Col>
+            <Col span={12} style={{ textAlign: "right" }}>
+              <Search
+                placeholder="input search text"
+                style={{
+                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                 }}
-                onCancel={() => {
+              />
+              {store.authentication.userData.role !== "Admin" && (
+                <Button
+                  onClick={() => {
                     setInitialData({});
-                    setVisibleModal(false);
-                }}
+                    setVisibleModal(true);
+                  }}
+                >
+                  <PlusSquareOutlined /> New
+                </Button>
+              )}
+            </Col>
+          </Row>
+          {store.ui.mediaQuery.isDesktop && (
+            <Table
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={dummyData}
+              bordered
+              // pagination={{
+              //     pageSize: store.membership.pageSize,
+              //     total: store.membership.total_data,
+              //     current: store.membership.page + 1,
+              //     showSizeChanger: true,
+              //     simple: false
+              // }}
+              // onChange={async (page) => {
+              //     let pageNumber = page.current;
+              //     store.membership.pageSize = page.pageSize;
+              //     store.membership.page = pageNumber - 1;
+              //     // store.membership.isLoading = true;
+              //     await store.membership.getData();
+              //     // store.membership.isLoading = false;
+              // }}
             />
+          )}
+
+          {store.ui.mediaQuery.isMobile && (
+            <List
+              itemLayout="horizontal"
+              position={"top"}
+              // pagination={{
+              //     onChange: (page) => {
+              //         store.membership.pageSize = page.pageSize;
+              //         store.membership.page = page.current;
+              //         store.membership.getData();
+              //     },
+              //     pageSize: store.membership.pageSize,
+              //     total: store.membership.total_data,
+              //     current: store.membership.page,
+              //     style: {marginBottom: "1rem", marginRight: "1rem"},
+              // }}
+              dataSource={dummyData}
+              style={{ padding: 0 }}
+              renderItem={(item) => {
+                return (
+                  <div>
+                    <List.Item
+                      key={item.id}
+                      style={{
+                        backgroundColor: "#ffffff",
+                        paddingTop: 0,
+                        paddingBottom: 0,
+                        display: "flex",
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                    >
+                      <List.Item.Meta
+                        className={["cariparkir-container"].join(" ")}
+                        title={item.name}
+                        description={
+                          <div style={{}}>
+                            <Image src={item.picture} preview={false} />
+                          </div>
+                        }
+                      />
+                      <div style={{ marginRight: 16 }}>
+                        <p
+                          style={{
+                            fontSize: 9,
+                            margin: 0,
+                          }}
+                        >
+                          {item.amount}
+                        </p>
+                      </div>
+                    </List.Item>
+                    <Divider plain style={{ margin: 0 }} />
+                  </div>
+                );
+              }}
+            />
+          )}
         </div>
-    );
+      </Card>
+
+      <PaybackModal
+        visible={visibleModal}
+        confirmLoading={confirmLoading}
+        initialData={initialData}
+        onCreate={async (data) => {
+          await onSubmit(data);
+        }}
+        onCancel={() => {
+          setInitialData({});
+          setVisibleModal(false);
+        }}
+      />
+    </div>
+  );
 });
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index f4f366a..27ec245 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -50,13 +50,23 @@ export const Profile = observer(() => {
         },
     ]
 
+    const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
+        display: "flex",
+        justifyContent: "center"
+    } : {fontSize: "0.75rem"};
+    const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
+        fontSize: '1.25rem',
+        display: "flex",
+        justifyContent: "center"
+    } : null;
+
     return (
         <div className={["ppob-container"].join(" ")}>
             <BreadcumbComponent data={routeData}/>
             <Card>
                 <Title strong>Profile</Title>
                 <Row style={{marginBottom: 20}}>
-                    <Col span={12}>
+                    <Col lg={12} xs={24}>
                         <Row>
                             <Col span={12}>
                                 <Text strong>Name</Text>
@@ -90,11 +100,15 @@ export const Profile = observer(() => {
                             </Col>
                         </Row>
                     </Col>
-                    <Col span={12}>
-                        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-                            <Title strong level={3}>Saldo</Title>
-                            <Text style={{fontSize: '1.25rem'}}>{store.authentication.profileData?.wallet}</Text>
-                        </div>
+                    <Col lg={12} xs={24}>
+                        <Row justify={"center"}>
+                            <Col lg={24} xs={12}>
+                                <Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
+                            </Col>
+                            <Col lg={24} xs={12}>
+                                <Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
+                            </Col>
+                        </Row>
                     </Col>
                 </Row>
                 <Row>
diff --git a/src/store/transaction.js b/src/store/transaction.js
index 63b8c31..916dc21 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -76,6 +76,16 @@ export class Transaction {
         await this.getData();
         return response;
     }
+
+    async distribute(data) {
+        const response = await http.post('/transaction/distribute').send(data);
+        return response;
+    }
+
+    async distributeAdmin(data) {
+        const response = await http.post('/transaction/distribute-admin').send(data);
+        return response;
+    }
 }