diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js
index 14eb0b4..159bc47 100644
--- a/src/pages/Membership/DetailUser.js
+++ b/src/pages/Membership/DetailUser.js
@@ -189,6 +189,7 @@ export const DetailUser = observer(() => {
       },
     },
   ];
+
   const routeData = [
     {
       route: LINKS.HOME,
@@ -204,6 +205,19 @@ export const DetailUser = observer(() => {
     },
   ];
 
+  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
+      ? {
+        display: "flex",
+        justifyContent: "center",
+      }
+      : { fontSize: "0.75rem" };
+  const styleSaldoContent = store.ui.mediaQuery.isDesktop
+      ? {
+        fontSize: "1.25rem",
+        display: "flex",
+        justifyContent: "center",
+      }
+      : null;
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -251,84 +265,128 @@ export const DetailUser = observer(() => {
             </Row>
           </Col>
           <Col lg={12} xs={24}>
-            {store.authentication.userData.role === "Admin" && (
-              <Title strong level={3}>
-                Action User Detail
-              </Title>
-            )}
-            {store.authentication.userData.role === "Admin" && (
-              <Space
-                size="middle"
-                align={"center"}
-                wrap={true}
-                style={{ textAlign: "center" }}
-              >
-                <Button
-                  type={
-                    store.membership.dataDetail.isActive === true
-                      ? "danger"
-                      : "primary"
-                  }
-                  onClick={() =>
-                    changeStatus(
-                      store.membership.dataDetail.id,
-                      store.membership.dataDetail.isActive
-                    )
-                  }
-                >
-                  {store.membership.dataDetail.isActive === true
-                    ? "Inactive"
-                    : "Active"}
-                </Button>
-                <Button
-                  onClick={() => {
-                    setInitialData({
-                      id: store.membership.dataDetail.id,
-                      name: store.membership.dataDetail.userDetail.name,
-                      username: store.membership.dataDetail.username,
-                      phone_number:
-                        store.membership.dataDetail.userDetail.phone_number,
-                      roleId: store.membership.dataDetail.roles.id,
-                      isChangePassword: false,
-                    });
-                    setVisibleModal(true);
-                  }}
-                >
-                  Edit
-                </Button>
-                <Button
-                  onClick={() => {
-                    setInitialData({
-                      id: store.membership.dataDetail.id,
-                      name: store.membership.dataDetail.userDetail.name,
-                      username: store.membership.dataDetail.username,
-                      phone_number:
-                        store.membership.dataDetail.userDetail.phone_number,
-                      roleId: store.membership.dataDetail.roles.id,
-                      isChangePassword: true,
-                    });
-                    setVisibleModal(true);
-                  }}
-                >
-                  Ganti Password
-                </Button>
-                <Button
-                  type={
-                    store.membership.dataDetail.isActive === true
-                      ? "danger"
-                      : "primary"
-                  }
-                  onClick={() =>
-                    changeStatus(
-                      store.membership.dataDetail.id,
-                      store.membership.dataDetail.isActive
-                    )
-                  }
-                >
-                  Withdraw Profit
-                </Button>
-              </Space>
-            )}
+            <Row>
+              <Col lg={24} xs={24} style={{marginBottom: 30}}>
+                {store.authentication.userData.role === "Admin" && (
+                    <Title strong level={3}>
+                      Action User Detail
+                    </Title>
+                )}
+                {store.authentication.userData.role === "Admin" && (
+                    <Space
+                        size="middle"
+                        align={"center"}
+                        wrap={true}
+                        style={{ textAlign: "center" }}
+                    >
+                      <Button
+                          type={
+                            store.membership.dataDetail.isActive === true
+                                ? "danger"
+                                : "primary"
+                          }
+                          onClick={() =>
+                              changeStatus(
+                                  store.membership.dataDetail.id,
+                                  store.membership.dataDetail.isActive
+                              )
+                          }
+                      >
+                        {store.membership.dataDetail.isActive === true
+                            ? "Inactive"
+                            : "Active"}
+                      </Button>
+                      <Button
+                          onClick={() => {
+                            setInitialData({
+                              id: store.membership.dataDetail.id,
+                              name: store.membership.dataDetail.userDetail.name,
+                              username: store.membership.dataDetail.username,
+                              phone_number:
+                              store.membership.dataDetail.userDetail.phone_number,
+                              roleId: store.membership.dataDetail.roles.id,
+                              isChangePassword: false,
+                            });
+                            setVisibleModal(true);
+                          }}
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                          onClick={() => {
+                            setInitialData({
+                              id: store.membership.dataDetail.id,
+                              name: store.membership.dataDetail.userDetail.name,
+                              username: store.membership.dataDetail.username,
+                              phone_number:
+                              store.membership.dataDetail.userDetail.phone_number,
+                              roleId: store.membership.dataDetail.roles.id,
+                              isChangePassword: true,
+                            });
+                            setVisibleModal(true);
+                          }}
+                      >
+                        Ganti Password
+                      </Button>
+                      <Button
+                          type={
+                            store.membership.dataDetail.isActive === true
+                                ? "danger"
+                                : "primary"
+                          }
+                          onClick={() =>
+                              changeStatus(
+                                  store.membership.dataDetail.id,
+                                  store.membership.dataDetail.isActive
+                              )
+                          }
+                      >
+                        Withdraw Profit
+                      </Button>
+                    </Space>
+                )}
+              </Col>
+              <Col lg={24} xs={24}>
+                <Row>
+                  <Col lg={12} xs={12}>
+                    <Row justify={"center"}>
+                      <Col lg={12} xs={12}>
+                        <Title strong level={3} style={styleSaldoTitle}>
+                          Saldo
+                        </Title>
+                      </Col>
+                      <Col lg={24} xs={12}>
+                        <Text style={styleSaldoContent}>
+                          {new Intl.NumberFormat("id-ID", {
+                            style: "currency",
+                            currency: "IDR",
+                          }).format(store.authentication.profileData?.wallet || 0)}
+                        </Text>
+                      </Col>
+                      <Col></Col>
+                    </Row>
+                  </Col>
+                  <Col lg={12} xs={12}>
+                    <Row justify={"center"}>
+                      <Col lg={12} xs={12}>
+                        <Title strong level={3} style={styleSaldoTitle}>
+                          Profit
+                        </Title>
+                      </Col>
+                      <Col lg={24} xs={12}>
+                        <Text style={styleSaldoContent}>
+                          {new Intl.NumberFormat("id-ID", {
+                            style: "currency",
+                            currency: "IDR",
+                          }).format(store.authentication.profileData?.profit || 0)}
+                        </Text>
+                      </Col>
+                      <Col></Col>
+                    </Row>
+                  </Col>
+                </Row>
+              </Col>
+            </Row>
           </Col>
         </Row>
         <Row>