diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 5e6fc4c..49882b5 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -336,7 +336,7 @@ export const DetailUser = observer(() => {
     //   store.authentication.dataProfit.id
     // );
     store.transaction.visibleModalFilterTransaction = false;
-    setAction(false)
+    setAction(false);
   };
 
   const handleCancelFilter = async () => {
@@ -351,7 +351,7 @@ export const DetailUser = observer(() => {
     // await store.transaction.getDetailHistoryTransaction(
     //   store.authentication.dataProfit.id
     // );
-    setAction(false)
+    setAction(false);
   };
 
   const handleSubmitFilter = async () => {
@@ -372,7 +372,7 @@ export const DetailUser = observer(() => {
     store.transaction.filterStart = null;
     store.transaction.filterEnd = null;
     store.transaction.visibleModalFilterTransaction = false;
-    setAction(false)
+    setAction(false);
   };
   const footerLayoutFilter = [
     <Button
@@ -735,38 +735,121 @@ export const DetailUser = observer(() => {
           <Col span={24}>
             <Tabs defaultActiveKey="1">
               <TabPane tab="History Top Up" key="1">
-                <Button
-                  style={{ marginBottom: "1rem", marginLeft: 5 }}
-                  onClick={() => {
-                    store.transaction.visibleModalFilterTransaction = true;
-                    setAction(true);
-                  }}
-                >
-                  <FilterOutlined />
-                  Filter
-                </Button>
-                <Table
-                  key="1"
-                  hasEmpty
-                  columns={columns}
-                  dataSource={store.transaction.dataHistoryTopUp}
-                  bordered
-                  pagination={{
-                    pageSize: store.transaction.pageSizeHistoryTransaction,
-                    total: store.transaction.total_dataHistoryTransaction,
-                    current: store.transaction.pageHistoryTransaction + 1,
-                    showSizeChanger: true,
-                    simple: false,
-                  }}
-                  onChange={async (page) => {
-                    let pageNumber = page.current;
-                    store.transaction.pageSize = page.pageSize;
-                    store.transaction.page = pageNumber - 1;
-                    modalLoader.setLoading(true);
-                    await getData();
-                    modalLoader.setLoading(false);
-                  }}
-                />
+                {store.ui.mediaQuery.isDesktop && (
+                  <div>
+                    <Button
+                      style={{ marginBottom: "1rem", marginLeft: 5 }}
+                      onClick={() => {
+                        store.transaction.visibleModalFilterTransaction = true;
+                        setAction(true);
+                      }}
+                    >
+                      <FilterOutlined />
+                      Filter
+                    </Button>
+                    <Table
+                      key="1"
+                      hasEmpty
+                      columns={columns}
+                      dataSource={store.transaction.dataHistoryTopUp}
+                      bordered
+                      pagination={{
+                        pageSize: store.transaction.pageSizeHistoryTransaction,
+                        total: store.transaction.total_dataHistoryTransaction,
+                        current: store.transaction.pageHistoryTransaction + 1,
+                        showSizeChanger: true,
+                        simple: false,
+                      }}
+                      onChange={async (page) => {
+                        let pageNumber = page.current;
+                        store.transaction.pageSize = page.pageSize;
+                        store.transaction.page = pageNumber - 1;
+                        modalLoader.setLoading(true);
+                        await getData();
+                        modalLoader.setLoading(false);
+                      }}
+                    />
+                  </div>
+                )}
+                {store.ui.mediaQuery.isMobile && (
+                  <div>
+                    <Button
+                      style={{ marginBottom: "1rem" }}
+                      onClick={() => {
+                        store.transaction.visibleModalFilterTransaction = true;
+                        setAction(true);
+                      }}
+                    >
+                      <FilterOutlined />
+                      Filter
+                    </Button>
+                    <List
+                      itemLayout="horizontal"
+                      position={"top"}
+                      pagination={{
+                        onChange: async (page, pageSize) => {
+                          store.transaction.pageSize = pageSize;
+                          store.transaction.page = page - 1;
+                          modalLoader.setLoading(true);
+                          await getData();
+                          modalLoader.setLoading(false);
+                        },
+                        pageSize: store.transaction.pageSize,
+                        total: store.transaction.total_data,
+                        current: store.transaction.page + 1,
+                        style: { marginBottom: "1rem", marginRight: "1rem" },
+                      }}
+                      dataSource={store.transaction.dataHistoryTopUp}
+                      style={{ padding: 0 }}
+                      renderItem={(item) => {
+                        return (
+                          <div>
+                            <List.Item
+                              key={item.id}
+                              style={{
+                                backgroundColor: "#ffffff",
+                                paddingTop: 0,
+                                paddingBottom: 0,
+                                display: "flex",
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "center",
+                              }}
+                            >
+                              <List.Item.Meta
+                                className={["cariparkir-container"].join(" ")}
+                                title={item.sender_name}
+                                description={
+                                  <div style={{}}>
+                                    <p>
+                                      <small>
+                                        Amount :{" "}
+                                        {new Intl.NumberFormat("id-ID", {
+                                          style: "currency",
+                                          currency: "IDR",
+                                        }).format(item.amount || 0)}
+                                      </small>{" "}
+                                      <br />
+                                      <small>
+                                        Transaction Date :{" "}
+                                        {format(
+                                          parseISO(item.transaction_date),
+                                          "dd-MM-yyyy hh:mm:ss"
+                                        )}
+                                      </small>{" "}
+                                      <br />
+                                    </p>
+                                  </div>
+                                }
+                              />
+                            </List.Item>
+                            <Divider plain style={{ margin: 0 }} />
+                          </div>
+                        );
+                      }}
+                    />
+                  </div>
+                )}
               </TabPane>
               <TabPane tab="History Transaction" key="2">
                 {store.ui.mediaQuery.isDesktop && (