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/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/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={{