diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index c654360..34e0041 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -273,21 +273,36 @@ export const ProductComponent = observer((props) => {
     </Button>,
   ];
 
+  const handleClickRow = (record, index) => ({
+    onClick: (event) => {
+      history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id));
+    },
+  });
   return (
     <div>
       {store.ui.mediaQuery.isDesktop && (
         <Table
-          style={{
-            textAlign: "center",
-            width: store.ui.mediaQuery.isMobile ? 250 : "",
-          }}
+          style={
+            store.authentication.userData.role === "Admin"
+              ? {
+                  cursor: "pointer",
+                  textAlign: "center",
+                  width: store.ui.mediaQuery.isMobile ? 250 : "",
+                }
+              : {
+                  textAlign: "center",
+                  width: store.ui.mediaQuery.isMobile ? 250 : "",
+                }
+          }
           columns={columns}
           dataSource={
             store.authentication.userData.role === "Admin Partner"
               ? store.product.dataProductPartner
               : store.product.data
           }
-          bordered
+          onRow={
+            store.authentication.userData.role === "Admin" ? handleClickRow : ""
+          }
           pagination={{
             pageSize: store.product.pageSize,
             total:
@@ -313,7 +328,7 @@ export const ProductComponent = observer((props) => {
           itemLayout="horizontal"
           position={"top"}
           pagination={{
-            onChange: async (page,pageSize) => {
+            onChange: async (page, pageSize) => {
               store.product.pageSize = pageSize;
               store.product.page = page - 1;
               modalLoader.setLoading(true);
diff --git a/src/index.css b/src/index.css
index daea40c..a7684d2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,4 +79,7 @@ code {
 
 .ant-menu-item-divider{
     border-style: transparent !important;
-}
\ No newline at end of file
+}
+.ant-table-tbody > tr.ant-table-row-level-0:hover > td {
+    background: #f0faf8 !important;
+  }
\ No newline at end of file
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 3e014d0..631cff2 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -256,7 +256,7 @@ export const Membership = observer(() => {
   const dataRoute = [
     {
       route: LINKS.MEMBERSHIP,
-      name: "Keanggotaan"
+      name: "Keanggotaan",
     },
   ];
   const onSubmit = async (data, image, imageStore) => {
@@ -329,6 +329,11 @@ export const Membership = observer(() => {
       form.resetFields();
     }
   };
+  const handleClickRow = (record, index) => ({
+    onClick: (event) => {
+      history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+    },
+  });
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent
@@ -374,7 +379,9 @@ export const Membership = observer(() => {
             <Table
               key="1"
               hasEmpty
+              onRow={handleClickRow}
               columns={columns}
+              style={{ cursor: "pointer" }}
               dataSource={
                 store.authentication.userData.role === "Admin"
                   ? store.membership.dataMember