diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index deffce8..d98c6d4 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -1,37 +1,26 @@
-import React, { useContext, useEffect, useState } from "react";
-import {
-  Button,
-  Card,
-  Col,
-  Row,
-  Table,
-  Typography,
-  Tag,
-  Space,
-  message,
-} from "antd";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { LINKS } from "../../routes/app";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
-import { format, parseISO } from "date-fns";
-import { ModalLoaderContext } from "../../utils/modal";
-import { useParams } from "react-router-dom";
+import React, {useContext, useEffect, useState} from "react";
+import {Button, Card, Col, Row, Table, Typography,} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useStore} from "../../utils/useStore";
+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";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const DetailUser = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
-  const { id } = useParams();
+  const {id} = useParams();
   const [visibleModal, setVisibleModal] = useState(false);
   const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
   const [destination, setDestination] = useState(null);
   const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
 
-  //console.log(id)
   useEffect(() => {
     (async () => {
       modalLoader.setLoading(true);
@@ -69,8 +58,12 @@ export const DetailUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.USER_DETAIL,
-      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
+      route: "/app/membership",
+      name: <span style={{fontWeight: "bold"}}>Membership</span>,
+    },
+    {
+      route: LINKS.USER_DETAIL.replace(":id", id),
+      name: <span style={{fontWeight: "bold"}}>Detail User</span>,
     },
   ];
   return (
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 83de9c3..007210a 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, {useContext, useEffect, useState} from "react";
 import {
   Button,
   Card,
@@ -14,19 +14,18 @@ import {
   Select,
   Space,
   Table,
-  Tag,
 } from "antd";
-import { useStore } from "../../utils/useStore";
-import { observer } from "mobx-react-lite";
-import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
-import { MembershipModal } from "./MembershipModal";
-import { BreadcumbComponent } from "../../component/BreadcumbComponent";
-import { LINKS } from "../../routes/app";
-import { useHistory } from "react-router-dom";
-import { ModalLoaderContext } from "../../utils/modal";
+import {useStore} from "../../utils/useStore";
+import {observer} from "mobx-react-lite";
+import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
+import {MembershipModal} from "./MembershipModal";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {LINKS} from "../../routes/app";
+import {useHistory} from "react-router-dom";
+import {ModalLoaderContext} from "../../utils/modal";
 
-const { Search } = Input;
-const { Option } = Select;
+const {Search} = Input;
+const {Option} = Select;
 export const Membership = observer(() => {
   const history = useHistory();
   const [form] = Form.useForm();
@@ -221,9 +220,7 @@ export const Membership = observer(() => {
           </Button>
           <Button
             onClick={async () => {
-              await store.transaction.getDataHistoryTopUp(record.id);
               history.push(LINKS.USER_DETAIL.replace(":id", record.id));
-              console.log(record.id);
             }}
           >
             Detail
diff --git a/src/store/transaction.js b/src/store/transaction.js
index a7032d1..951c4d8 100644
--- a/src/store/transaction.js
+++ b/src/store/transaction.js
@@ -22,14 +22,15 @@ export class Transaction {
     filterSubCategory = null;
 
     pageHistoryTransaction = 0;
-    pageHistoryTopUp = 0;
     pageSizeHistoryTransaction = 10
     dataHistoryTransaction = [];
     total_dataHistoryTransaction = 0;
 
-    dataHistoryTopUp=[];
+    pageHistoryTopUp = 0;
+    pageSizeHistoryTopUp = 10;
+    dataHistoryTopUp = [];
     total_dataHistoryTopUp = 0;
-    
+
     constructor(ctx) {
         this.ctx = ctx;
         makeAutoObservable(this);
@@ -80,9 +81,7 @@ export class Transaction {
 
     async getDataHistoryTopUp(id) {
         try {
-            //console.log("Top up")
-            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
-            //console.log(response,"data")
+            const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`);
             this.dataHistoryTopUp = response.body.data ?? []
             this.total_dataHistoryTopUp = response?.body?.count ?? 0
         } catch (e) {