diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 4316984..6172ca9 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -124,7 +124,7 @@ export const DesktopLayout = observer(() => {
               {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="membership">
                   <Link to={LINKS.MEMBERSHIP}>
-            <FileProtectOutlined />
+                    <FileProtectOutlined />
                     <span>Membership</span>
                   </Link>
                 </Menu.Item>
@@ -168,18 +168,22 @@ export const DesktopLayout = observer(() => {
                       <span>Product</span>
                     </Link>
                   </Menu.Item>
-                  <Menu.Item key="category">
-                    <Link to={LINKS.CATEGORY}>
-                      <FileAddOutlined />
-                      <span>Category</span>
-                    </Link>
-                  </Menu.Item>
-                  <Menu.Item key="sub-category">
-                    <Link to={LINKS.SUBCATEGORY}>
-                      <FileSyncOutlined />
-                      <span>Sub Category</span>
-                    </Link>
-                  </Menu.Item>
+                  {store.authentication.userData.role === "Admin" && (
+                    <Menu.Item key="category">
+                      <Link to={LINKS.CATEGORY}>
+                        <FileAddOutlined />
+                        <span>Category</span>
+                      </Link>
+                    </Menu.Item>
+                  )}
+                  {store.authentication.userData.role === "Admin" && (
+                    <Menu.Item key="sub-category">
+                      <Link to={LINKS.SUBCATEGORY}>
+                        <FileSyncOutlined />
+                        <span>Sub Category</span>
+                      </Link>
+                    </Menu.Item>
+                  )}
                 </SubMenu>
               )}
               {store.authentication.userData.role !== "Admin" && (
@@ -204,12 +208,14 @@ export const DesktopLayout = observer(() => {
                   <span>Payback</span>
                 </Link>
               </Menu.Item>
-              <Menu.Item key="profile">
-                <Link to={LINKS.PROFILE}>
-                  <UserOutlined />
-                  <span>Profile</span>
-                </Link>
-              </Menu.Item>
+              {store.authentication.userData.role !== "Admin" && (
+                <Menu.Item key="profile">
+                  <Link to={LINKS.PROFILE}>
+                    <UserOutlined />
+                    <span>Profile</span>
+                  </Link>
+                </Menu.Item>
+              )}
               <Menu.Divider
                 style={{ background: "transparent", paddingTop: 15 }}
               />
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index f7796cd..9253e0c 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -90,18 +90,22 @@ export const MenuList = observer((props) => {
               <span>Product</span>
             </Link>
           </Menu.Item>
-          <Menu.Item key="category">
-            <Link to={LINKS.CATEGORY}>
-              <FileAddOutlined />
-              <span>Category</span>
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="sub-category">
-            <Link to={LINKS.SUBCATEGORY}>
-              <FileSyncOutlined />
-              <span>Sub Category</span>
-            </Link>
-          </Menu.Item>
+          {store.authentication.userData.role === "Admin" && (
+            <Menu.Item key="category">
+              <Link to={LINKS.CATEGORY}>
+                <FileAddOutlined />
+                <span>Category</span>
+              </Link>
+            </Menu.Item>
+          )}
+          {store.authentication.userData.role === "Admin" && (
+            <Menu.Item key="sub-category">
+              <Link to={LINKS.SUBCATEGORY}>
+                <FileSyncOutlined />
+                <span>Sub Category</span>
+              </Link>
+            </Menu.Item>
+          )}
         </SubMenu>
       )}
       {store.authentication.userData.role !== "Admin" && (
@@ -126,12 +130,14 @@ export const MenuList = observer((props) => {
           <span>Payback</span>
         </Link>
       </Menu.Item>
-      <Menu.Item key="profile">
-        <Link to={LINKS.PROFILE}>
-          <UserOutlined />
-          <span>Profile</span>
-        </Link>
-      </Menu.Item>
+      {store.authentication.userData.role !== "Admin" && (
+        <Menu.Item key="profile">
+          <Link to={LINKS.PROFILE}>
+            <UserOutlined />
+            <span>Profile</span>
+          </Link>
+        </Menu.Item>
+      )}
       {/*<Menu.Item key="about">*/}
       {/*	<Link to={'/app/about'}>*/}
       {/*		<CalendarOutlined/>*/}
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 34b29eb..25fe9cb 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -39,7 +39,6 @@ export const Membership = observer(() => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  
   useEffect(() => {
     const init = async () => {
       try {
@@ -89,11 +88,11 @@ export const Membership = observer(() => {
     setConfirmLoading(true);
     try {
       data.destination = destination;
-      if(data.amount) {
+      if (data.amount) {
         data = {
           ...data,
-          amount: Number(data.amount)
-        }
+          amount: Number(data.amount),
+        };
       }
 
       (await store.authentication.userData.role) === "Admin"
@@ -155,7 +154,7 @@ export const Membership = observer(() => {
           <Button
             onClick={() => {
               setDestination(record?.id);
-              console.log(record?.id)
+              console.log(record?.id);
               setIsVisibleTopUpModal(true);
             }}
           >
@@ -274,6 +273,7 @@ export const Membership = observer(() => {
       },
     });
   };
+
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -435,7 +435,7 @@ export const Membership = observer(() => {
             label="Amount"
             rules={[{ required: true, message: "Please input amount!" }]}
           >
-            <Input/>
+            <Input />
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index 0c4955a..39fe5ad 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useStore } from "../../utils/useStore";
-import { Button, Card, Col, Input, Row, Select ,message} from "antd";
+import { Button, Card, Col, Input, Row, Select, message } from "antd";
 import { observer } from "mobx-react-lite";
 import { BuyProductModal } from "../../component/BuyProductModal";
 
@@ -14,6 +14,7 @@ export const Product = observer(() => {
   const [productData, setProductData] = useState([]);
   const [data, setData] = useState({});
   const [kode, setKode] = useState({});
+  const [cardIndex, setCardIndex] = useState({});
 
   useEffect(() => {
     const init = async () => {
@@ -50,14 +51,10 @@ export const Product = observer(() => {
     await store.transaction.getData();
   };
 
-  const handleBuy = async (data) => {
-    setKode(data.code);
-    //console.log(data.code)
-  };
-  const handleBuyProduct = async (kode)=>{
-    console.log(kode)
+  const handleBuyProduct = async (kode) => {
+    console.log(kode);
     try {
-      await store.product.buyProduct({productCode:kode});
+      await store.product.buyProduct({ productCode: kode });
       message.success("Success Buy Product");
     } catch (e) {
       message.error("Failed Buy Product");
@@ -110,8 +107,16 @@ export const Product = observer(() => {
           {productData.map((item, index) => (
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
-                onClick={() => handleBuy(item)} 
-                style={{ cursor: "pointer",backgroundColor:"#2D9CDB" }}
+                onClick={() => {
+                  setKode(item.code);
+                  setCardIndex(index);
+                }}
+                hoverable
+                style={{
+                  cursor: "pointer",
+                  borderColor: cardIndex === index ? "#2D9CDB" : "",
+                  marginLeft: "10px",
+                }}
               >
                 <span style={{ color: "black" }}>{item.name}</span>
                 <br />
@@ -128,8 +133,9 @@ export const Product = observer(() => {
       )}
       {productData.length !== 0 && (
         <Col style={{ textAlign: "right" }}>
-          <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}
-          onClick={() => handleBuyProduct(kode)} 
+          <Button
+            style={{ backgroundColor: "#2D9CDB", color: "white" }}
+            onClick={() => handleBuyProduct(kode)}
           >
             Beli Sekarang
           </Button>
diff --git a/src/store/membership.js b/src/store/membership.js
index b68f75b..574f504 100644
--- a/src/store/membership.js
+++ b/src/store/membership.js
@@ -15,7 +15,7 @@ export class Membership {
     async getData() {
         try {
             const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
-
+            console.log(response,"admin")
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
@@ -33,6 +33,7 @@ export class Membership {
     async getDataBySuperior() {
         try {
             const response = await http.get(`/users/find-by-supperior?page=${this.page}&pageSize=${this.pageSize}`);
+            console.log(response,"non admin")
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 item.name = item?.user_detail?.name;
diff --git a/tes.http b/tes.http
new file mode 100644
index 0000000..5c8644d
--- /dev/null
+++ b/tes.http
@@ -0,0 +1,17 @@
+POST https://ppob-backend.k3s.bangun-kreatif.com/v1/auth/login HTTP/1.1
+content-type: application/json
+
+{
+    "username": "admin",
+    "password": 123
+}
+
+###
+
+POST https://ppob-backend.k3s.bangun-kreatif.com/v1/auth/login HTTP/1.1
+content-type: application/json
+
+{
+    "username": "admin",
+    "password": 123
+}
\ No newline at end of file