diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index b250765..47c6662 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -169,6 +169,9 @@ export const DetailUser = observer(() => {
       title: "Status",
       dataIndex: "status",
       key: "status",
+      render: (text, record) => {
+        return <Text>{record.status === 1 ? "Success" : "Pending"}</Text>;
+      },
     },
     {
       title: "No Seri",
@@ -222,9 +225,11 @@ export const DetailUser = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
       <Card>
-        <Row style={{marginBottom:10}}>
-          <Title strong level={2} >Detail User</Title>
-          <Col lg={20} xs={20} style={{textAlign: "right" }}>
+        <Row style={{ marginBottom: 10 }}>
+          <Title strong level={2}>
+            Detail User
+          </Title>
+          <Col lg={20} xs={20} style={{ textAlign: "right" }}>
             {store.authentication.userData.role === "Admin" && (
               <Space
                 size="middle"
@@ -346,7 +351,7 @@ export const DetailUser = observer(() => {
             <Row>
               <Col lg={24} xs={24}>
                 <Row>
-                  <Col lg={12} xs={12}>
+                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
                     <Row justify={"center"}>
                       <Col lg={12} xs={12}>
                         <Title strong level={3} style={styleSaldoTitle}>
@@ -366,7 +371,7 @@ export const DetailUser = observer(() => {
                       <Col></Col>
                     </Row>
                   </Col>
-                  <Col lg={12} xs={12}>
+                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
                     <Row justify={"center"}>
                       <Col lg={12} xs={12}>
                         <Title strong level={3} style={styleSaldoTitle}>
diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 5fa9a55..a368fff 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -10,6 +10,8 @@ import {
   Modal,
   Form,
   Input,
+  Divider,
+  List
 } from "antd";
 import moment from "moment";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -135,6 +137,9 @@ export const Profile = observer(() => {
       title: "Status",
       dataIndex: "status",
       key: "status",
+      render: (text, record) => {
+        return <Text>{record.status === 1 ? "Success" : "Pending"}</Text>;
+      },
     },
     {
       title: "No Seri",
@@ -216,7 +221,7 @@ export const Profile = observer(() => {
               </Col>
             </Row>
           </Col>
-          <Col span={store.ui.mediaQuery.isMobile ? 10 : 5}>
+          <Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
             <Row justify={"center"}>
               <Col lg={12} xs={12}>
                 <Title strong level={3} style={styleSaldoTitle}>
@@ -235,8 +240,8 @@ export const Profile = observer(() => {
             </Row>
           </Col>
           {store.authentication.userData.role != "Admin Partner" &&
-            (store.authentication.userData.role != "Retail" && (
-              <Col span={store.ui.mediaQuery.isMobile ? 8 : 5}>
+            store.authentication.userData.role != "Retail" && (
+              <Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
                 <Row justify={"center"}>
                   <Col lg={12} xs={12}>
                     <Title strong level={3} style={styleSaldoTitle}>
@@ -254,7 +259,7 @@ export const Profile = observer(() => {
                   <Col></Col>
                 </Row>
               </Col>
-            ))}
+            )}
         </Row>
         <Row>
           <Col span={24}>
@@ -271,26 +276,90 @@ export const Profile = observer(() => {
                 <FilterOutlined />
                 Filter
               </Button>
-              <Table
-                columns={columns}
-                bordered
-                dataSource={store.transaction.dataHistoryTransaction}
-                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.pageSizeHistoryTransaction = page.pageSize;
-                  store.transaction.pageHistoryTransaction = pageNumber - 1;
-                  modalLoader.setLoading(true);
-                  await store.transaction.getDataHistoryTransaction();
-                  modalLoader.setLoading(false);
-                }}
-              />
+              {store.ui.mediaQuery.isDesktop && (
+                <Table
+                  columns={columns}
+                  bordered
+                  dataSource={store.transaction.dataHistoryTransaction}
+                  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.pageSizeHistoryTransaction =
+                      page.pageSize;
+                    store.transaction.pageHistoryTransaction = pageNumber - 1;
+                    modalLoader.setLoading(true);
+                    await store.transaction.getDataHistoryTransaction();
+                    modalLoader.setLoading(false);
+                  }}
+                />
+              )}
+              {store.ui.mediaQuery.isMobile && (
+            <List
+              itemLayout="horizontal"
+              position={"top"}
+              dataSource={store.transaction.dataHistoryTransaction}
+              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.pageSizeHistoryTransaction =
+                  page.pageSize;
+                store.transaction.pageHistoryTransaction = pageNumber - 1;
+                modalLoader.setLoading(true);
+                await store.transaction.getDataHistoryTransaction();
+                modalLoader.setLoading(false);
+              }}
+              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.buyer}
+                        description={
+                          <div style={{}}>
+                            <p>
+                              <small>Price : {item.price}</small> <br />
+                              <small>Tujuan : {item.transaction_destination}</small> <br />
+                              <small>Kode Transaksi : {item.transaction_code}</small> <br />
+                              <small>Status : {item.status === 1 ? "Success" : "Pending"}</small> <br />
+                              <small>No.Seri : {item.seri_number}</small> <br />
+                              <small>IDTrx Mitra : {item.partner_transaction_code}</small> <br />
+                              <small>Transaction Date : {format(parseISO(item.created_at), "dd-MM-yyyy")}</small> <br />
+                            </p>
+                          </div>
+                        }
+                      />
+                    </List.Item>
+                    <Divider plain style={{ margin: 0 }} />
+                  </div>
+                );
+              }}
+            />
+          )}
             </div>
           </Col>
         </Row>