diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js
index bd4c46a..7a3afd0 100644
--- a/src/component/PartnerComponent.js
+++ b/src/component/PartnerComponent.js
@@ -1,11 +1,23 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table, Tag,} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+  Tag,
+  List,
+  Divider,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const PartnerComponent = observer((props) => {
   const store = useStore();
@@ -78,7 +90,7 @@ export const PartnerComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{color: "#4F566B", cursor: "pointer"}}
+          style={{ color: "#4F566B", cursor: "pointer" }}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
@@ -121,7 +133,7 @@ export const PartnerComponent = observer((props) => {
   const handleDelete = (id) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
+      icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
       cancelText: "Cancel",
@@ -181,36 +193,126 @@ export const PartnerComponent = observer((props) => {
   };
   return (
     <div>
-      <Table
-        style={{textAlign: "center"}}
-        columns={columns}
-        dataSource={store.partner.data}
-        bordered
-        pagination={{
-          pageSize: store.partner.pageSize,
-          total: store.partner.total_data,
-          current: store.partner.page + 1,
-          showSizeChanger: true,
-          simple: false,
-        }}
-        onChange={async (page) => {
-          let pageNumber = page.current;
-          store.partner.pageSize = page.pageSize;
-          store.partner.page = pageNumber - 1;
-          modalLoader.setLoading(true);
-          await store.partner.getData();
-          modalLoader.setLoading(false);
-        }}
-      />
-
+      {store.ui.mediaQuery.isDesktop && (
+        <Table
+          style={{ textAlign: "center" }}
+          columns={columns}
+          dataSource={store.partner.data}
+          bordered
+          pagination={{
+            pageSize: store.partner.pageSize,
+            total: store.partner.total_data,
+            current: store.partner.page + 1,
+            showSizeChanger: true,
+            simple: false,
+          }}
+          onChange={async (page) => {
+            let pageNumber = page.current;
+            store.partner.pageSize = page.pageSize;
+            store.partner.page = pageNumber - 1;
+            modalLoader.setLoading(true);
+            await store.partner.getData();
+            modalLoader.setLoading(false);
+          }}
+        />
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page) => {
+              store.partner.pageSize = page.pageSize;
+              store.partner.page = page.current;
+              modalLoader.setLoading(true);
+              await store.partner.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.partner.pageSize,
+            total: store.partner.total_data,
+            current: store.partner.page,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.partner.data}
+          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.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Nama : {item.name}</small> <br />
+                          <small>Npwp : {item.npwp}</small> <br />
+                          <small>Address : {item.address}</small>
+                          <Space size="middle">
+                            <Button
+                              type={
+                                item?.status === true ? "danger" : "primary"
+                              }
+                              onClick={() =>
+                                changeStatus(item?.id, item?.status)
+                              }
+                            >
+                              {item?.status === true ? "Inactive" : "Active"}
+                            </Button>
+                            <Button onClick={() => handleEditButton(item)}>
+                              Edit
+                            </Button>
+                            {/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */}
+                            <Button onClick={() => changePassword(item)}>
+                              Change Password
+                            </Button>
+                          </Space>
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                  <div style={{ marginRight: 16 }}>
+                    <p
+                      style={{
+                        fontSize: 9,
+                        marginBottom: 40,
+                      }}
+                    >
+                      <Tag
+                        color={item?.status === true ? "processing" : "#E3E8EE"}
+                        style={{ color: "#4F566B", cursor: "pointer" }}
+                      >
+                        {item?.status === true ? " ACTIVE" : "INACTIVE"}
+                      </Tag>
+                    </p>
+                  </div>
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
       <Modal
         visible={store.partner.visibleModalPartner}
         title={
           isChangePassword
             ? "Change Member Password"
             : idData
-              ? "Edit Partner"
-              : "Create a new partner"
+            ? "Edit Partner"
+            : "Create a new partner"
         }
         okText={idData ? "Edit" : "Create"}
         cancelText="Cancel"
@@ -238,11 +340,11 @@ export const PartnerComponent = observer((props) => {
               label="Name"
               rules={[
                 idData
-                  ? {required: false}
-                  : {required: true, message: "Please input password name!"},
+                  ? { required: false }
+                  : { required: true, message: "Please input password name!" },
               ]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
           {!idData && (
@@ -251,11 +353,11 @@ export const PartnerComponent = observer((props) => {
               label="Owner"
               rules={[
                 idData
-                  ? {required: false}
-                  : {required: true, message: "Please input password owner!"},
+                  ? { required: false }
+                  : { required: true, message: "Please input password owner!" },
               ]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
           {((idData && isChangePassword) || !idData) && (
@@ -264,14 +366,14 @@ export const PartnerComponent = observer((props) => {
               label="Password Account"
               rules={[
                 idData
-                  ? {required: false}
+                  ? { required: false }
                   : {
-                    required: true,
-                    message: "Please input password account!",
-                  },
+                      required: true,
+                      message: "Please input password account!",
+                    },
               ]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
           {!idData && (
@@ -280,11 +382,14 @@ export const PartnerComponent = observer((props) => {
               label="Phone Number"
               rules={[
                 idData
-                  ? {required: false}
-                  : {required: true, message: "Please input password phone number!"},
+                  ? { required: false }
+                  : {
+                      required: true,
+                      message: "Please input password phone number!",
+                    },
               ]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
           {!isChangePassword && (
@@ -294,25 +399,25 @@ export const PartnerComponent = observer((props) => {
                 label="Npwp"
                 rules={[
                   idData
-                    ? {required: false}
-                    : {required: true, message: "Please input npwp!"},
+                    ? { required: false }
+                    : { required: true, message: "Please input npwp!" },
                 ]}
               >
-                <Input/>
+                <Input />
               </Form.Item>
               <Form.Item
                 name="address"
                 label="Address"
                 rules={[
                   idData
-                    ? {required: false}
+                    ? { required: false }
                     : {
-                      required: true,
-                      message: "Please input address!",
-                    },
+                        required: true,
+                        message: "Please input address!",
+                      },
                 ]}
               >
-                <Input/>
+                <Input />
               </Form.Item>
             </>
           )}
diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 9d62954..4b0b143 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,28 +1,42 @@
-import React, {useContext, useState} from "react";
-import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined} from "@ant-design/icons";
-import {useHistory} from "react-router-dom";
-import {capitalize} from "lodash";
-import {useStore} from "../utils/useStore";
-import {LINKS} from "../routes/app";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Col,
+  Form,
+  Input,
+  message,
+  Modal,
+  Row,
+  Select,
+  Table,
+  Divider,
+  Tag,
+  Typography,
+  List,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { useHistory } from "react-router-dom";
+import { capitalize } from "lodash";
+import { useStore } from "../utils/useStore";
+import { LINKS } from "../routes/app";
+import { ModalLoaderContext } from "../utils/modal";
 
-const {Title, Text} = Typography;
+const { Title, Text } = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const {Option} = Select;
+  const { Option } = Select;
   const history = useHistory();
-  const [idData, setIdData] = useState('');
+  const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState(null);
   const [filterCategories, setFilterCategories] = useState(null);
   const [filterSubCategories, setFilterSubCategories] = useState(null);
   const modalLoader = useContext(ModalLoaderContext);
 
   const handleEditButton = (data) => {
-    console.log(data, "isi data")
+    console.log(data, "isi data");
     form.setFieldsValue({
       name: data.name,
       price: data.price,
@@ -33,7 +47,7 @@ export const ProductComponent = observer((props) => {
     });
     store.product.visibleModalProduct = true;
     setIdData(data.id);
-  }
+  };
 
   const columns = [
     {
@@ -76,12 +90,12 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
-          style={{color: "#4F566B"}}
+          style={{ color: "#4F566B" }}
         >
           {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
         </Tag>
       ),
-    }
+    },
   ];
 
   const deleteData = async (id) => {
@@ -99,7 +113,7 @@ export const ProductComponent = observer((props) => {
   const handleDelete = (id) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
-      icon: <ExclamationCircleOutlined/>,
+      icon: <ExclamationCircleOutlined />,
       okText: "Yes",
       okType: "primary",
       cancelText: "Cancel",
@@ -113,39 +127,39 @@ export const ProductComponent = observer((props) => {
   };
 
   const handleCancel = () => {
-    setIdData('')
+    setIdData("");
     store.product.visibleModalProduct = false;
-  }
+  };
 
   const handleSubmit = async (data) => {
-    console.log(data, "isi data2")
-    if (idData !== '') {
+    console.log(data, "isi data2");
+    if (idData !== "") {
       modalLoader.setLoading(true);
       try {
-        await store.product.update(idData, data)
-        message.success("Success Update Data Member")
+        await store.product.update(idData, data);
+        message.success("Success Update Data Member");
       } catch (e) {
-        message.error("Failed Update Data Member")
+        message.error("Failed Update Data Member");
       }
       modalLoader.setLoading(false);
       store.product.visibleModalProduct = false;
-      setIdData('');
+      setIdData("");
       form.resetFields();
     } else {
       modalLoader.setLoading(true);
       try {
-        await store.product.create(data)
-        message.success("Success Add New Member")
+        await store.product.create(data);
+        message.success("Success Add New Member");
       } catch (e) {
-        console.log(e, "apa errornya")
-        message.error("Failed Add Member")
+        console.log(e, "apa errornya");
+        message.error("Failed Add Member");
       }
       modalLoader.setLoading(false);
       store.product.visibleModalProduct = false;
-      setIdData('');
+      setIdData("");
       form.resetFields();
     }
-  }
+  };
 
   const handleRemoveFilter = async () => {
     store.product.filterSupplier = null;
@@ -174,39 +188,132 @@ export const ProductComponent = observer((props) => {
   };
 
   const footerLayoutFilter = [
-    <Button key={'remove'} onClick={handleRemoveFilter} style={{
-      backgroundColor: '#e74e5e', color: '#fff'
-    }}>Remove Filter</Button>,
-    <Button key={'cancel'} onClick={handleCancelFilter}>Cancel</Button>,
-    <Button key={'submit'} onClick={handleSubmitFilter} style={{
-      backgroundColor: '#4e79e7', color: '#fff'
-    }}>Apply</Button>
-  ]
+    <Button
+      key={"remove"}
+      onClick={handleRemoveFilter}
+      style={{
+        backgroundColor: "#e74e5e",
+        color: "#fff",
+      }}
+    >
+      Remove Filter
+    </Button>,
+    <Button key={"cancel"} onClick={handleCancelFilter}>
+      Cancel
+    </Button>,
+    <Button
+      key={"submit"}
+      onClick={handleSubmitFilter}
+      style={{
+        backgroundColor: "#4e79e7",
+        color: "#fff",
+      }}
+    >
+      Apply
+    </Button>,
+  ];
 
   return (
     <div>
-      <Table
-        style={{textAlign: "center"}}
-        columns={columns}
-        dataSource={store.product.data}
-        bordered
-        pagination={{
-          pageSize: store.product.pageSize,
-          total: store.product.total_data,
-          current: store.product.page + 1,
-          showSizeChanger: true,
-          simple: false
-        }}
-        onChange={async (page) => {
-          let pageNumber = page.current;
-          store.product.pageSize = page.pageSize;
-          store.product.page = pageNumber - 1;
-          modalLoader.setLoading(true);
-          await store.product.getData();
-          modalLoader.setLoading(false);
-        }}
-      />
-
+      {store.ui.mediaQuery.isDesktop && (
+        <Table
+          style={{
+            textAlign: "center",
+            width: store.ui.mediaQuery.isMobile ? 250 : "",
+          }}
+          columns={columns}
+          dataSource={store.product.data}
+          bordered
+          pagination={{
+            pageSize: store.product.pageSize,
+            total: store.product.total_data,
+            current: store.product.page + 1,
+            showSizeChanger: true,
+            simple: false,
+          }}
+          onChange={async (page) => {
+            let pageNumber = page.current;
+            store.product.pageSize = page.pageSize;
+            store.product.page = pageNumber - 1;
+            modalLoader.setLoading(true);
+            await store.product.getData();
+            modalLoader.setLoading(false);
+          }}
+        />
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page) => {
+              store.product.pageSize = page.pageSize;
+              store.product.page = page.current;
+              modalLoader.setLoading(true);
+              await store.product.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.product.pageSize,
+            total: store.product.total_data,
+            current: store.product.page,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.product.data}
+          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.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Nama Produk : {item.name}</small> <br />
+                          <small>Harga Beli : {item.currentPrice.price}</small>
+                          <br />
+                          <small>
+                            Harga Jual : {item.currentPrice.mark_up_price}
+                          </small>
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                  <div style={{ marginRight: 16 }}>
+                    <p
+                      style={{
+                        fontSize: 9,
+                        margin: 0,
+                      }}
+                    >
+                      <Tag
+                        color={item?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
+                        style={{ color: "#4F566B" }}
+                      >
+                        {item?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
+                      </Tag>
+                    </p>
+                  </div>
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
       <Modal
         visible={store.product.visibleModalProduct}
         title={idData ? "Edit Product" : "Create a new Product"}
@@ -220,7 +327,7 @@ export const ProductComponent = observer((props) => {
           form
             .validateFields()
             .then((values) => {
-              console.log(values, "isi form")
+              console.log(values, "isi form");
               handleSubmit(values);
               form.resetFields();
             })
@@ -229,42 +336,39 @@ export const ProductComponent = observer((props) => {
             });
         }}
       >
-        <Form
-          form={form}
-          layout="vertical"
-        >
+        <Form form={form} layout="vertical">
           <Form.Item
             name="name"
             label="Name"
-            rules={[{required: true, message: "Please input name!"}]}
+            rules={[{ required: true, message: "Please input name!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           <Form.Item
             name="price"
             label="Price"
-            rules={[{required: true, message: "Please input price!"}]}
+            rules={[{ required: true, message: "Please input price!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           <Form.Item
             name="markUpPrice"
             label="Mark Up Price"
-            rules={[{required: true, message: "Please input mark up price!"}]}
+            rules={[{ required: true, message: "Please input mark up price!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           <Form.Item
             name="code"
             label="Code"
-            rules={[{required: true, message: "Please input code!"}]}
+            rules={[{ required: true, message: "Please input code!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           <Form.Item
             name="status"
             label="Status"
-            rules={[{required: true, message: "Please select Status!"}]}
+            rules={[{ required: true, message: "Please select Status!" }]}
           >
             <Select placeholder="Select Sub Category" allowClear>
               <Option value="ACTIVE">ACTIVE</Option>
@@ -274,7 +378,9 @@ export const ProductComponent = observer((props) => {
           <Form.Item
             name="subCategoriesId"
             label="Sub categories"
-            rules={[{required: true, message: "Please select sub categories!"}]}
+            rules={[
+              { required: true, message: "Please select sub categories!" },
+            ]}
           >
             <Select placeholder="Select Sub Category" allowClear>
               {store.product.dataSubCategories.map((item) => (
@@ -294,14 +400,16 @@ export const ProductComponent = observer((props) => {
       >
         <Row>
           <Col span={24}>
-            <Title level={5} type={"secondary"} strong>Filter Supplier</Title>
+            <Title level={5} type={"secondary"} strong>
+              Filter Supplier
+            </Title>
             <Select
               mode={"multiple"}
               placeholder="Choose Supplier"
               onChange={(val) => {
                 setFilterSupplier(val);
               }}
-              style={{marginBottom: "20px", width: "100%"}}
+              style={{ marginBottom: "20px", width: "100%" }}
             >
               {store.supplier.data.map((item) => (
                 <Option value={item.id} key={item.id}>
@@ -311,7 +419,9 @@ export const ProductComponent = observer((props) => {
             </Select>
           </Col>
           <Col span={24}>
-            <Title level={5} type={"secondary"} strong>Filter Categories</Title>
+            <Title level={5} type={"secondary"} strong>
+              Filter Categories
+            </Title>
             <Select
               mode={"multiple"}
               placeholder="Choose Category"
@@ -320,7 +430,7 @@ export const ProductComponent = observer((props) => {
                 store.product.filterByCategory = val;
                 await store.product.getDataSubCategories();
               }}
-              style={{marginBottom: "20px", width: "100%"}}
+              style={{ marginBottom: "20px", width: "100%" }}
             >
               {store.category.data.map((item) => (
                 <Option value={item.id} key={item.id}>
@@ -330,14 +440,16 @@ export const ProductComponent = observer((props) => {
             </Select>
           </Col>
           <Col span={24}>
-            <Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title>
+            <Title level={5} type={"secondary"} strong>
+              Filter Sub-Categories
+            </Title>
             <Select
               mode={"multiple"}
               placeholder="Choose Sub-Category"
               onChange={(val) => {
                 setFilterSubCategories(val);
               }}
-              style={{marginBottom: "20px", width: "100%"}}
+              style={{ marginBottom: "20px", width: "100%" }}
             >
               {store.product.dataSubCategories.map((item) => (
                 <Option value={item.id} key={item.id}>
diff --git a/src/component/Subcategory.js b/src/component/Subcategory.js
index d044c33..332552d 100644
--- a/src/component/Subcategory.js
+++ b/src/component/Subcategory.js
@@ -1,14 +1,26 @@
-import React, {useContext, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
-import {observer} from "mobx-react-lite";
-import {useHistory} from "react-router-dom";
-import {useStore} from "../utils/useStore";
-import {ModalLoaderContext} from "../utils/modal";
+import React, { useContext, useState } from "react";
+import {
+  Button,
+  Form,
+  Input,
+  message,
+  Modal,
+  Select,
+  Space,
+  Table,
+  List,
+  Tag,
+  Divider,
+} from "antd";
+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { useStore } from "../utils/useStore";
+import { ModalLoaderContext } from "../utils/modal";
 
 export const SubcategoryComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const {Option} = Select;
+  const { Option } = Select;
   const [idData, setIdData] = useState("");
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -94,28 +106,96 @@ export const SubcategoryComponent = observer((props) => {
 
   return (
     <div>
-      <Table
-        style={{textAlign: "center"}}
-        columns={columns}
-        dataSource={store.subcategory.data}
-        bordered
-        pagination={{
-          pageSize: store.subcategory.pageSize,
-          total: store.subcategory.total_data,
-          current: store.subcategory.page + 1,
-          showSizeChanger: true,
-          simple: false,
-        }}
-        onChange={async (page) => {
-          let pageNumber = page.current;
-          store.subcategory.pageSize = page.pageSize;
-          store.subcategory.page = pageNumber - 1;
-          modalLoader.setLoading(true);
-          await getData();
-          modalLoader.setLoading(false);
-        }}
-      />
-
+      {store.ui.mediaQuery.isDesktop && (
+        <Table
+          style={{ textAlign: "center" }}
+          columns={columns}
+          dataSource={store.subcategory.data}
+          bordered
+          pagination={{
+            pageSize: store.subcategory.pageSize,
+            total: store.subcategory.total_data,
+            current: store.subcategory.page + 1,
+            showSizeChanger: true,
+            simple: false,
+          }}
+          onChange={async (page) => {
+            let pageNumber = page.current;
+            store.subcategory.pageSize = page.pageSize;
+            store.subcategory.page = pageNumber - 1;
+            modalLoader.setLoading(true);
+            await getData();
+            modalLoader.setLoading(false);
+          }}
+        />
+      )}
+      {store.ui.mediaQuery.isMobile && (
+        <List
+          itemLayout="horizontal"
+          position={"top"}
+          pagination={{
+            onChange: async (page) => {
+              store.subcategory.pageSize = page.pageSize;
+              store.subcategory.page = page.current;
+              modalLoader.setLoading(true);
+              await store.subcategory.getData();
+              modalLoader.setLoading(false);
+            },
+            pageSize: store.subcategory.pageSize,
+            total: store.subcategory.total_data,
+            current: store.subcategory.page,
+            style: { marginBottom: "1rem", marginRight: "1rem" },
+          }}
+          dataSource={store.subcategory.data}
+          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.code}
+                    description={
+                      <div style={{}}>
+                        <p>
+                          <small>Sub Category : {item.name}</small> <br />
+                          <small>Category : {item.categoryName}</small>
+                          <br />
+                        </p>
+                        <p></p>
+                      </div>
+                    }
+                  />
+                  <div style={{ marginRight: 16 }}>
+                    <p
+                      style={{
+                        fontSize: 9,
+                        margin: 0,
+                      }}
+                    >
+                      <Button onClick={() => handleEditButton(item)}>
+                        Edit
+                      </Button>
+                    </p>
+                  </div>
+                </List.Item>
+                <Divider plain style={{ margin: 0 }} />
+              </div>
+            );
+          }}
+        />
+      )}
       <Modal
         visible={store.subcategory.visibleModalSubcategory}
         title={idData ? "Edit Sub Category" : "Create a new sub category"}
@@ -144,24 +224,24 @@ export const SubcategoryComponent = observer((props) => {
               name="code"
               label="Code"
               rules={[
-                {required: true, message: "Please input code category!"},
+                { required: true, message: "Please input code category!" },
               ]}
             >
-              <Input/>
+              <Input />
             </Form.Item>
           )}
           <Form.Item
             name="name"
             label="Name"
-            rules={[{required: true, message: "Please input name category!"}]}
+            rules={[{ required: true, message: "Please input name category!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
           {!idData && (
             <Form.Item
               name="categoryId"
               label="Categories"
-              rules={[{required: true, message: "Please input category id!"}]}
+              rules={[{ required: true, message: "Please input category id!" }]}
             >
               <Select placeholder="Select Category" allowClear>
                 {store.category.data.map((item) => (
diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js
index 8071879..29b1298 100644
--- a/src/component/SupplierComponent.js
+++ b/src/component/SupplierComponent.js
@@ -65,15 +65,26 @@ export const SupplierComponent = observer((props) => {
       width: "5%",
     },
     {
-      title: "Saldo",
+      title: "Saldo di Supplier",
       dataIndex: ["coa", "amount"],
       key: ["coa", "amount"],
       width: "20%",
       render: (text, record) =>
-        new Intl.NumberFormat("id-ID", {
-          style: "currency",
-          currency: "IDR",
-        }).format(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, record) =>
+          new Intl.NumberFormat("id-ID", {
+            style: "currency",
+            currency: "IDR",
+          }).format(text)
     },
     {
       title: "Status",
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index cf007ab..0651668 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -145,7 +145,7 @@ export const DesktopLayout = observer(() => {
                     </Link>
                   </Menu.Item>
                   <Menu.Item key="commision">
-                    <Link to={LINKS.COMMISION}>
+                    <Link to={LINKS.COMMISSION}>
                       <HomeOutlined />
                       <span>Commision</span>
                     </Link>
diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js
index 3df9981..cc258f2 100644
--- a/src/pages/Payback/PaybackFromUser.js
+++ b/src/pages/Payback/PaybackFromUser.js
@@ -20,8 +20,10 @@ export const PaybackFromUser = observer(() => {
     const init = async () => {
       try {
         modalLoader.setLoading(true);
-        await store.payback.getDataUser();
-        await store.authentication.getProfile();
+        await Promise.allSettled([
+          store.payback.getDataUser(),
+          store.authentication.getProfile()
+        ]);
         modalLoader.setLoading(false);
       } catch (e) {
         modalLoader.setLoading(false);
diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js
index a6bf6de..9079ad9 100644
--- a/src/pages/Payback/PaybackModal.js
+++ b/src/pages/Payback/PaybackModal.js
@@ -1,37 +1,28 @@
-import React, {useState, useEffect, useContext} from "react";
-import {
-  Button,
-  Form,
-  Image,
-  Input,
-  message,
-  Modal,
-  Upload,
-} from "antd";
+import React, {useContext, useState} from "react";
+import {Form, Input, message, Modal, Upload,} from "antd";
 import {useStore} from "../../utils/useStore";
-import {appConfig} from "../../config/app";
-import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
+import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
 import {ModalLoaderContext} from "../../utils/modal";
+import {http} from "../../utils/http";
+import {appConfig} from "../../config/app";
 
 export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
   const [form] = Form.useForm();
   const store = useStore();
+  const [image, setImage] = useState("");
   const [fileList, setFileList] = useState([]);
-  const [previewTitle, setPreviewTitle] = useState("");
   const [previewImage, setPreviewImage] = useState("");
-  const [fileUrl, setFileUrl] = useState("");
-  const firstIndexFileList = fileList[0];
+  const [previewVisible, setPreviewVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const modalLoader = useContext(ModalLoaderContext);
 
   const beforeUpload = (file) => {
-    let isPdf, isLt2M;
-    let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
+    let isLt2M;
+    let allowedFile = ["image/jpeg", "image/png"];
     let isValid = allowedFile.includes(file.type);
     if (!isValid) {
-      message.error("You can only upload PDF or Image file!");
+      message.error("You can only upload Image file!");
     }
-    // return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
     isLt2M = file.size / 1024 / 1024 < 2;
     if (!isLt2M) {
       message.error("File must smaller than 2MB!");
@@ -39,40 +30,31 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
     return isValid && isLt2M ? true : Upload.LIST_IGNORE;
   };
 
-  const handlePreview = async (file) => {
-    const fileUrl = appConfig.apiUrl + file.response.path;
-    setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
+  const uploadHandler = async (args) => {
+    const file = args.file;
+    const res = await http.upload(file);
+    setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
+    setFileList([{
+      uid: '-1',
+      name: 'image',
+      status: 'done',
+      url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
+    }]);
   };
 
-  const handleChange = ({fileList}) => {
-    setFileList(fileList);
-    if (fileList.length && fileList[0].status === "done") {
-      form.setFieldsValue({
-        file_url: fileList[0].response.path,
-      });
-      console.log(fileList, "apaaaaaa");
-      setFileUrl(fileList[0].response.path);
-      setPreviewImage(fileList[0].response.path);
-      setPreviewTitle(fileList[0].name);
+  const handleChange = (info) => {
+    if (info.file.status === 'uploading') {
+      setLoading(true);
+      return;
     }
+    setLoading(false)
   };
 
   const uploadButton = (
-    <div>
-      {loading ? (
-        <LoadingOutlined/>
-      ) : (
-        <Button icon={<UploadOutlined/>}>Click to Upload</Button>
-      )}
-    </div>
-  );
-
-  const previewUpload = (
-    <Image
-      className="w-full h-full"
-      preview={false}
-      src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}
-    />
+      <div>
+        {loading ? <LoadingOutlined/> : <PlusOutlined/>}
+        <div style={{marginTop: 8}}>Click to Upload</div>
+      </div>
   );
 
   const handleSubmit = async (data) => {
@@ -95,101 +77,85 @@ export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
   };
 
   return (
-    <Modal
-      visible={visible}
-      title={"Create a new Payback"}
-      okText={"Create"}
-      cancelText="Cancel"
-      onCancel={() => {
-        form.resetFields();
-        onCancel();
-      }}
-      onOk={() => {
-        form
-          .validateFields()
-          .then((values) => {
-            handleSubmit(values);
-            console.log(values);
+      <Modal
+          visible={visible}
+          title={"Create a new Payback"}
+          okText={"Create"}
+          cancelText="Cancel"
+          onCancel={() => {
             form.resetFields();
-          })
-          .catch((info) => {
-            console.log("Validate Failed:", info);
-          });
-      }}
-    >
-      <Form
-        form={form}
-        layout="vertical"
-        name="form_in_modal"
-        initialValues={initialData}
+            onCancel();
+          }}
+          onOk={() => {
+            form
+                .validateFields()
+                .then((values) => {
+                  handleSubmit(values);
+                  console.log(values);
+                  form.resetFields();
+                })
+                .catch((info) => {
+                  console.log("Validate Failed:", info);
+                });
+          }}
       >
-        <Form.Item
-          name="destination"
-          label="destination"
-          rules={[{required: true, message: "Please input Name!"}]}
-          initialValue={store.authentication.profileData.superior?.id}
+        <Form
+            form={form}
+            layout="vertical"
+            name="form_in_modal"
+            initialValues={initialData}
         >
-          <Input/>
-        </Form.Item>
-        <Form.Item
-          label="Upload Picture"
-          name="image_prove"
-        >
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
+          <Form.Item
+              name="destination"
+              label="destination"
+              rules={[{required: true, message: "Please input Name!"}]}
+              initialValue={store.authentication.profileData.superior?.id}
+          >
+            <Input/>
+          </Form.Item>
+          <Form.Item
+              label="Upload Picture"
+              name="image_prove"
           >
             <div>
               <Upload
-                name="image_prove"
-                maxCount={1}
-                className="avatar-uploader"
-                // listType="picture-card"
-                action={appConfig.apiUrl + "/files"}
-                fileList={fileList}
-                beforeUpload={beforeUpload}
-                onPreview={handlePreview}
-                onChange={handleChange}
+                  listType="picture-card"
+                  fileList={fileList}
+                  onPreview={(file) => {
+                    setPreviewImage(file.url || file.filename);
+                    setPreviewVisible(file.url || file.filename);
+                  }}
+                  showUploadList={true}
+                  onChange={handleChange}
+                  beforeUpload={(file) => beforeUpload(file)}
+                  customRequest={(args) => uploadHandler(args)}
+                  onRemove={(file) => {
+                    setImage('');
+                    setLoading(false);
+                    setFileList([]);
+                  }}
               >
-                {!firstIndexFileList ? uploadButton : null}
+
+                {image === "" ? uploadButton : null}
               </Upload>
               <h5
-                style={{
-                  marginTop: 12,
-                  color: "rgba(0, 0, 0, 0.45)",
-                }}
+                  style={{
+                    marginTop: 12,
+                    color: "rgba(0, 0, 0, 0.45)",
+                  }}
               >
                 Max size of file 2 mb
               </h5>
             </div>
-            <div>
-              <h5>Preview</h5>
-              <div>
-                <img
-                  src={previewImage}
-                  alt="preview"
-                  style={{width: "100%"}}
-                />
-              </div>
-              <h5>{previewTitle}</h5>
-              <h5>
-                {previewUpload}
-                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}
-              </h5>
-            </div>
-          </div>
-        </Form.Item>
-        <Form.Item
-          name="amount"
-          label="amount"
-          rules={[{required: true, message: "Please input Amount!"}]}
-        >
-          <Input/>
-        </Form.Item>
-      </Form>
-    </Modal>
+          </Form.Item>
+          <Form.Item
+              name="amount"
+              label="amount"
+              rules={[{required: true, message: "Please input Amount!"}]}
+          >
+            <Input/>
+          </Form.Item>
+        </Form>
+      </Modal>
   );
 };
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index c4806ff..95750f5 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -63,7 +63,7 @@ export const Product = observer(() => {
             </Button>
           </Col>
           <Col span={12}>
-            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+            <div style={{display: store.ui.mediaQuery.isMobile? "" :'flex',justifyContent: 'flex-end',textAlign: "right"}}>
               <Search
                   placeholder="input search text"
                   style={{
diff --git a/src/utils/http.js b/src/utils/http.js
index a752a36..4bb2fe8 100644
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -50,13 +50,16 @@ export const http = {
         return req;
     },
     upload: (file) => {
-        const request = superagent
-            .post(appConfig.apiUrl + '/files')
+        let req = superagent
+            .post(appConfig.apiUrl + '/config/upload-files')
             .attach('file', file)
             .use(authIntercept)
             .use(attachSuperagentLogger);
+        if (TokenUtil.accessToken) {
+            req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken);
+        }
 
-        return request;
+        return req;
     },
     uploadAntd: (args) => {
         const file = args.file;