diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js
index a61d8ca..e139217 100644
--- a/src/component/ProductComponent.js
+++ b/src/component/ProductComponent.js
@@ -5,6 +5,7 @@ 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";
 
 export const ProductComponent = observer((props) => {
     const store = useStore();
@@ -113,7 +114,7 @@ export const ProductComponent = observer((props) => {
             console.log(id);
             await store.product.delete(id);
             message.success("Data Berhasil Dihapus");
-            history.push("/app/product");
+            history.push(LINKS.PRODUCT);
         } catch (err) {
             console.log("error", err);
             message.error("Gagal menghapus");
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index 1c46dc5..77d14f3 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -2,8 +2,8 @@ import React, {useState} from "react";
 import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
 import {MenuList} from "./MenuList";
 import {Link, useHistory} from "react-router-dom";
-import {CalendarOutlined, HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
-import {AppRoute} from "../../routes/app";
+import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
+import {AppRoute, LINKS} from "../../routes/app";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {useMediaQuery} from "react-responsive";
@@ -104,35 +104,41 @@ export const DesktopLayout = observer(() => {
                     >
                         <Menu>
                             <Menu.Item key="home">
-                                <Link to={'/app/home'}>
+                                <Link to={LINKS.HOME}>
                                     <HomeOutlined/>
                                     <span>Home</span>
                                 </Link>
                             </Menu.Item>
-                            <Menu.Item key="membership">
-                                <Link to={'/app/membership'}>
+                            {store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
+                                <Link to={LINKS.MEMBERSHIP}>
                                     <HomeOutlined/>
                                     <span>Membership</span>
                                 </Link>
-                            </Menu.Item>
-                            <Menu.Item key="product">
-                                <Link to={'/app/product'}>
+                            </Menu.Item>}
+                            {store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
+                                <Link to={LINKS.PRODUCT}>
                                     <HomeOutlined/>
                                     <span>Product</span>
                                 </Link>
-                            </Menu.Item>
-                            <Menu.Item key="transaction">
-                                <Link to={'/app/transaction'}>
+                            </Menu.Item>}
+                            {store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
+                                <Link to={LINKS.TRANSACTION}>
                                     <HomeOutlined/>
                                     <span>Transaction</span>
                                 </Link>
-                            </Menu.Item>
-                            <Menu.Item key="about">
-                                <Link to={'/app/about'}>
-                                    <CalendarOutlined/>
-                                    <span>About</span>
+                            </Menu.Item>}
+                            <Menu.Item key="profile">
+                                <Link to={LINKS.PROFILE}>
+                                    <UserOutlined/>
+                                    <span>Profile</span>
                                 </Link>
                             </Menu.Item>
+                            {/*<Menu.Item key="about">*/}
+                            {/*    <Link to={'/app/about'}>*/}
+                            {/*        <CalendarOutlined/>*/}
+                            {/*        <span>About</span>*/}
+                            {/*    </Link>*/}
+                            {/*</Menu.Item>*/}
                             <Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
                         </Menu>
                     </div>
@@ -261,7 +267,7 @@ export const DesktopLayout = observer(() => {
                                             mode="inline"
                                         >
                                             <Menu.Item>
-                                                <Link to="/app/profile">
+                                                <Link to={LINKS.PROFILE}>
                                                     <span>Profile</span>
                                                 </Link>
                                             </Menu.Item>
@@ -352,7 +358,7 @@ export const DesktopLayout = observer(() => {
                                         mode="inline"
                                     >
                                         <Menu.Item key={'profile'}>
-                                            <Link to="/app/profile">
+                                            <Link to={LINKS.PROFILE}>
                                                 <span>Profile</span>
                                             </Link>
                                         </Menu.Item>
diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js
index 8068ac5..8c7f184 100644
--- a/src/pages/App/MenuList.js
+++ b/src/pages/App/MenuList.js
@@ -1,9 +1,10 @@
 import React, {useEffect, useState} from "react";
 import {Menu} from "antd";
 import {Link} from "react-router-dom";
-import {HomeOutlined,} from "@ant-design/icons";
+import {HomeOutlined, UserOutlined,} from "@ant-design/icons";
 import {observer} from "mobx-react-lite";
 import {useStore} from "../../utils/useStore";
+import {LINKS} from "../../routes/app";
 
 const {SubMenu} = Menu;
 
@@ -34,29 +35,35 @@ export const MenuList = observer((props) => {
 			forceSubMenuRender={true}
 		>
 			<Menu.Item key="home">
-				<Link to={'/app/home'}>
+				<Link to={LINKS.HOME}>
 					<HomeOutlined/>
 					<span>Home</span>
 				</Link>
 			</Menu.Item>
 			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
-				<Link to={'/app/membership'}>
+				<Link to={LINKS.MEMBERSHIP}>
 					<HomeOutlined/>
 					<span>Membership</span>
 				</Link>
 			</Menu.Item>}
 			{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
-				<Link to={'/app/product'}>
+				<Link to={LINKS.PRODUCT}>
 					<HomeOutlined/>
 					<span>Product</span>
 				</Link>
 			</Menu.Item>}
-			{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
-				<Link to={'/app/transaction'}>
+			{store.authentication.userData.role === ('Supervisor' || 'Sales') && <Menu.Item key="transaction">
+				<Link to={LINKS.TRANSACTION}>
 					<HomeOutlined/>
 					<span>Transaction</span>
 				</Link>
 			</Menu.Item>}
+			<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/Login/Login.js b/src/pages/Login/Login.js
index 14f1e6f..a55531b 100644
--- a/src/pages/Login/Login.js
+++ b/src/pages/Login/Login.js
@@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite';
 import {useStore} from "../../utils/useStore";
 import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
 import {useHistory} from "react-router-dom";
+import {LINKS} from "../../routes/app";
 
 export const Login = observer(() => {
     const store = useStore();
@@ -15,7 +16,7 @@ export const Login = observer(() => {
                 username: params.username,
                 password: params.password,
             });
-            history.push('/app/home');
+            history.push(LINKS.HOME);
         } catch (e) {
             if (e.response?.body?.message) {
                 message.error(e.response.body.message);
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index df36bd5..99bfe5e 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -5,6 +5,7 @@ import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
 import {MembershipModal} from "./MembershipModal";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
 
 const {Search} = Input;
 
@@ -84,12 +85,12 @@ export const Membership = observer(() => {
 
   const routeData = [
     {
-      route: "/app/home",
+      route: LINKS.HOME,
       name: "Home",
     },
     {
-      route: "/app/membership",
-      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
+      route: LINKS.MEMBERSHIP,
+      name: <span style={{fontWeight: "bold"}}>Membership</span>,
     },
   ];
 
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 594374b..146a475 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -5,6 +5,7 @@ import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ProductComponent} from "../../component/ProductComponent";
+import {LINKS} from "../../routes/app";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
@@ -35,11 +36,11 @@ export const Product = observer(() => {
 
     const routeData = [
         {
-            route: "/app/home",
+            route: LINKS.HOME,
             name: "Home",
         },
         {
-            route: "/app/product",
+            route: LINKS.PRODUCT,
             name: <span style={{fontWeight: 'bold'}}>Product</span>,
         },
     ];
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 9d42dfe..5d5e506 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -3,6 +3,7 @@ import {Button, Card, Col, Input, Row, Tabs} from "antd";
 import {FilterOutlined,} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {Pulsa} from "./Pulsa";
+import {LINKS} from "../../routes/app";
 
 const {TabPane} = Tabs;
 const {Search} = Input;
@@ -13,11 +14,11 @@ export const Transaction = () => {
   };
   const routeData = [
     {
-      route: "/app/home",
+      route: LINKS.HOME,
       name: "Home",
     },
     {
-      route: "/app/transaction",
+      route: LINKS.TRANSACTION,
       name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
     },
   ];
diff --git a/src/routes/app.js b/src/routes/app.js
index efb720d..bada08d 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -5,25 +5,37 @@ import {Membership} from "../pages/Membership/Membership";
 import {Product} from "../pages/Product/Product";
 import {Transaction} from "../pages/Transaction/Transaction";
 
+export const LINKS = {
+    HOME: "/app/home",
+    ABOUT: "/app/about",
+    MEMBERSHIP: "/app/membership",
+    PRODUCT: "/app/product",
+    TRANSACTION: "/app/transaction",
+    PROFILE: "/app/profile",
+};
+
 export const AppRoute = () => {
     return <Switch>
-        <Route path={"/app/home"}>
+        <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={"/app/membership"}>
+        <Route path={LINKS.MEMBERSHIP}>
             <Membership/>
         </Route>
-        <Route path={"/app/product"}>
+        <Route path={LINKS.PRODUCT}>
             <Product/>
         </Route>
-        <Route path={"/app/transaction"}>
+        <Route path={LINKS.TRANSACTION}>
             <Transaction/>
         </Route>
-        <Route path={"/app/about"}>
+        <Route path={LINKS.ABOUT}>
+            <About/>
+        </Route>
+        <Route path={LINKS.PROFILE}>
             <About/>
         </Route>
         <Route path="/app" exact>
-            <Redirect to={'/app/home'}/>
+            <Redirect to={LINKS.HOME}/>
         </Route>
     </Switch>
 }