diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index 36f9042..47aadb3 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useState} from "react";
 import {
   Button,
   Col,
@@ -15,19 +15,19 @@ import {
   Tag,
   Typography,
 } 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 {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";
 
-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 [filterSupplier, setFilterSupplier] = useState([]);
@@ -111,7 +111,7 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
           onClick={async () => {
-            history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
             //console.log(record.id)
           }}
         >
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 90ca4ee..0769e58 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -220,9 +220,9 @@ export const DesktopLayout = observer(() => {
                 )}
                 {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
-                  <Link to={LINKS.PAYBACKFROMUSER}>
-                    <AlipayOutlined />
-                    <span>Payback</span>
+                  <Link to={LINKS.PAYBACK_FROM_USER}>
+                      <AlipayOutlined/>
+                      <span>Payback</span>
                   </Link>
                 </Menu.Item>
                 )}
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 8f744c3..5ece71d 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -1,35 +1,36 @@
-import React, { useEffect, useState } from "react";
-import { Menu } from "antd";
-import { Link } from "react-router-dom";
+import React, {useEffect, useState} from "react";
+import {Menu} from "antd";
+import {Link} from "react-router-dom";
 import {
-  AppstoreOutlined,
-  DatabaseOutlined,
-  FileAddOutlined,
-  FileProtectOutlined,
-  FileSyncOutlined,
-  HomeOutlined,
-  MenuUnfoldOutlined,
-  MoneyCollectOutlined,
-  ProfileOutlined,
-  ProjectOutlined,
-  ShoppingCartOutlined,
-  UserOutlined,
-  AlipayOutlined,
-  PayCircleOutlined,
+    AlipayOutlined,
+    AppstoreOutlined,
+    DatabaseOutlined,
+    FileAddOutlined,
+    FileProtectOutlined,
+    FileSyncOutlined,
+    HomeOutlined,
+    MenuUnfoldOutlined,
+    MoneyCollectOutlined,
+    PayCircleOutlined,
+    ProfileOutlined,
+    ProjectOutlined,
+    ShoppingCartOutlined,
+    UserOutlined,
 } from "@ant-design/icons";
-import { observer } from "mobx-react-lite";
-import { useStore } from "../../utils/useStore";
-import { LINKS } from "../../routes/app";
+import {observer} from "mobx-react-lite";
+import {useStore} from "../../utils/useStore";
+import {LINKS} from "../../routes/app";
 
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const MenuList = observer((props) => {
-  const store = useStore();
-  useEffect(() => {}, []);
+    const store = useStore();
+    useEffect(() => {
+    }, []);
 
-  const [setKeys, setSetKeys] = useState(["dashboard"]);
+    const [setKeys, setSetKeys] = useState(["dashboard"]);
 
-  return (
+    return (
     <Menu
       defaultOpenKeys={["sub4"]}
       theme="light"
@@ -137,10 +138,10 @@ export const MenuList = observer((props) => {
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
-            <Link to={LINKS.PAYBACKFROMUSER}>
-              <AlipayOutlined />
-              <span>Payback</span>
-            </Link>
+              <Link to={LINKS.PAYBACK_FROM_USER}>
+                  <AlipayOutlined/>
+                  <span>Payback</span>
+              </Link>
           </Menu.Item>
         )}
       </SubMenu>
diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 2583356..ca040f0 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -7,7 +7,7 @@ import {observer} from "mobx-react-lite";
 import {FilterOutlined} from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
-import { useParams } from "react-router-dom";     
+import {useParams} from "react-router-dom";
 
 const {Title, Text} = Typography;
 
@@ -22,7 +22,7 @@ export const DetailUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILUSER,
+      route: LINKS.USER_DETAIL,
       name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
     },
   ];
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index c997bcd..b7fd1e5 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,20 +1,20 @@
 import React, {useContext, useEffect, useState} from "react";
 import {
-  Button,
-  Card,
-  Col,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  List,
-  message,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Table,
-  Tag,
+    Button,
+    Card,
+    Col,
+    Divider,
+    Form,
+    Input,
+    InputNumber,
+    List,
+    message,
+    Modal,
+    Row,
+    Select,
+    Space,
+    Table,
+    Tag,
 } from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -211,9 +211,9 @@ export const Membership = observer(() => {
           </Button>
           <Button
             onClick={async () => {
-              await store.transaction.getDataHistoryTopUp(record.id)
-              history.push(LINKS.DETAILUSER.replace(":id", record.id));
-              console.log(record.id);
+                await store.transaction.getDataHistoryTopUp(record.id)
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                console.log(record.id);
             }}
           >
             Detail
diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js
index 680b064..3cca08e 100644
--- a/src/pages/Payback/PaybackFromUser.js
+++ b/src/pages/Payback/PaybackFromUser.js
@@ -70,7 +70,7 @@ export const PaybackFromUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.PAYBACKFROMUSER,
+      route: LINKS.PAYBACK_FROM_USER,
       name: <span style={{fontWeight: "bold"}}>Payback User</span>,
     },
   ];
diff --git a/src/pages/Product/DetailProduct.js b/src/pages/Product/ProductDetail.js
similarity index 93%
rename from src/pages/Product/DetailProduct.js
rename to src/pages/Product/ProductDetail.js
index 40640e4..79887af 100644
--- a/src/pages/Product/DetailProduct.js
+++ b/src/pages/Product/ProductDetail.js
@@ -10,7 +10,7 @@ import {ModalLoaderContext} from "../../utils/modal";
 
 const {Title, Text} = Typography;
 
-export const DetailProduct = observer(() => {
+export const ProductDetail = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -20,8 +20,12 @@ export const DetailProduct = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILPRODUCT,
-      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+      route: LINKS.PRODUCT,
+      name: <span style={{fontWeight: "bold"}}>Product</span>,
+    },
+    {
+      route: LINKS.PRODUCT_DETAIL,
+      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
     },
   ];
 
@@ -75,7 +79,7 @@ export const DetailProduct = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData}/>
       <Card>
-        <Title strong>Detail Product</Title>
+        <Title strong>Product Detail</Title>
         <Row style={{marginBottom: 20}}>
           <Col lg={12} xs={24}>
             <Row>
diff --git a/src/routes/app.js b/src/routes/app.js
index 04bc5ab..9f2d29c 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -4,7 +4,7 @@ import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
 import {DetailUser} from "../pages/Membership/DetailUser";
 import {Product} from "../pages/Product/Product";
-import {DetailProduct} from "../pages/Product/DetailProduct";
+import {ProductDetail} from "../pages/Product/ProductDetail";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@@ -27,10 +27,10 @@ export const LINKS = {
     SUPPLIER: "/app/supplier",
     CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
-    PAYBACKFROMUSER: "/app/payback-from-user",
+    PAYBACK_FROM_USER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
-    DETAILUSER: "/app/detail-user",
-    DETAILPRODUCT: "/app/detail-product",
+    USER_DETAIL: "/app/user-detail",
+    PRODUCT_DETAIL: "/app/product-detail",
 };
 
 export const AppRoute = () => {
@@ -38,16 +38,16 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={LINKS.DETAILUSER}>
+        <Route path={LINKS.USER_DETAIL}>
             <DetailUser/>
         </Route>
-        <Route path={LINKS.DETAILPRODUCT}>
-            <DetailProduct/>
+        <Route path={LINKS.PRODUCT_DETAIL}>
+            <ProductDetail/>
         </Route>
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
-        <Route path={LINKS.PAYBACKFROMUSER}>
+        <Route path={LINKS.PAYBACK_FROM_USER}>
             <PaybackFromUser/>
         </Route>
         <Route path={LINKS.CATEGORY}>