diff --git a/src/index.css b/src/index.css
index e81bbc3..39746de 100644
--- a/src/index.css
+++ b/src/index.css
@@ -53,3 +53,7 @@ code {
 .ppob-container {
     padding: 14px 14px 14px 14px;
 }
+
+.shadow {
+    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05);
+}
\ No newline at end of file
diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js
index d41f7d7..7d1edf9 100644
--- a/src/pages/App/DesktopLayout.js
+++ b/src/pages/App/DesktopLayout.js
@@ -18,7 +18,7 @@ export const DesktopLayout = observer(() => {
         <Layout
             theme={"light"}
             className={"transparent"}
-            hasSider={true}
+            hasSider={store.ui.mediaQuery.isDesktop}
             style={{
                 paddingLeft: 0,
                 display: "flex",
@@ -148,7 +148,7 @@ export const DesktopLayout = observer(() => {
                     theme={"light"}
                     className={store.ui.mediaQuery.isMobile ? "shadow" : null}
                     style={{
-                        height: store.ui.mediaQuery.isDesktop ? 54 : 35,
+                        height: store.ui.mediaQuery.isDesktop ? 24 : 35,
                         // width: 'calc(100vw - 200px)',
                         width: "100%",
                         position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
@@ -158,7 +158,7 @@ export const DesktopLayout = observer(() => {
                         backgroundColor: store.ui.mediaQuery.isMobile
                             ? "#fff"
                             : "transparent",
-                        maxWidth: store.ui.mediaQuery.isDesktop ? 1920 : 768,
+                        maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
                         // minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
                         top: store.ui.mediaQuery.isMobile ? 0 : 12,
                         /**/
@@ -426,7 +426,7 @@ export const DesktopLayout = observer(() => {
                             zIndex: 22,
                             // height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
                             height: `calc(100vh - ${
-                                store.ui.mediaQuery.isDesktop ? 78 : 71
+                                store.ui.mediaQuery.isDesktop ? 43 : 37
                             }px)`,
                             // paddingLeft: 8,
                             // paddingRight: 8
diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 7add9f3..72276fa 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from "react";
-import {Button, Card, Col, Input, List, message, Modal, PageHeader, Row, Space, Table, Tag} from "antd";
+import {Button, Card, Col, Input, message, Modal, Row, Space, Table, Tag} from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
 import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
@@ -137,132 +137,41 @@ export const Membership = observer(() => {
       <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent data={routeData}/>
         <Card>
-          {store.ui.mediaQuery.isDesktop && (
-              <div>
-                <Row style={{marginBottom: 20}}>
-                  <Col span={12}>
-                    <Button>
-                      <FilterOutlined/>
-                      Filter
-                    </Button>
-                  </Col>
-                  <Col span={12} style={{textAlign: "right"}}>
-                    <Search
-                        placeholder="input search text"
-                        style={{width: 200, marginRight: 10}}
-                    />
-                    <Button onClick={() => setVisibleModal(true)}>
-                      <PlusSquareOutlined/> New
-                    </Button>
-                  </Col>
-                </Row>
-                <Table
-                    style={{textAlign: "center"}}
-                    columns={columns}
-                    dataSource={store.membership.data}
-                    bordered
-                    pagination={{
-                      total: store.membership.total_data,
-                      current: store.membership.page,
-                      pageSize: store.membership.pageSize,
-                      simple: true
-                    }} onChange={(page) => {
-                  store.membership.pageSize = page.pageSize;
-                  store.membership.page = page.current;
-                  store.membership.getData();
-                }} current={store.membership.page}
-                    loading={store.membership.pageSize}/>
-              </div>
-          )}
-          {store.ui.mediaQuery.isMobile && (
-              <div>
-                <Card bordered={false} bodyStyle={{padding: "0"}} style={{borderRadius: 0, width: '50%'}}>
-                  <PageHeader
-                      className={"card-page-header"}
-                      style={{
-                        padding: "6px 8px",
-                      }}
-                      title={
-                        <Button
-                            icon={<FilterOutlined/>}
-                            size={"small"}
-                            style={{margin: 3}}
-                        >
-                          Filter
-                        </Button>
-                      }
-                      subTitle=""
-                  />
-                </Card>
-
-                <List
-                    itemLayout="horizontal"
-                    position={"top"}
-                    dataSource={store.membership.data}
-                    style={{padding: 0}}
-                    renderItem={(item) => {
-                      return (
-                          <div>
-                            <List.Item
-                                key={item.key}
-                                style={{
-                                  backgroundColor: "#ffffff",
-                                  paddingTop: 0,
-                                  paddingBottom: 0,
-                                  display: "flex",
-                                  flexDirection: "row",
-                                  alignItems: "center",
-                                  justifyContent: "center",
-                                  width: "50%"
-                                }}
-                            >
-                              <List.Item.Meta
-                                  className={["cariparkir-container"].join(" ")}
-                                  title={<h3 style={{marginBottom: 0, color: "#5469d4"}}>{item.name}</h3>}
-                                  description={
-                                    <div style={{}}>
-                                      <p>
-                                        <small>Username : {item.username}</small> <br/>
-                                      </p>
-                                      <p>
-                                        {item.status}
-                                      </p>
-                                    </div>
-                                  }
-                              />
-                              {/* <div style={{ marginRight: 16 }}>
-                            <Statistic
-                              title={
-                                <p
-                                  style={{
-                                    fontSize: 9,
-                                    margin: 0,
-                                  }}
-                                >
-                                  {item.updated_at ? moment(item.updated_at).format("DD MMM YY, H:mm:ss") : "There is not top up yet"}
-                                </p>
-                              }
-                              prefix={"Rp"}
-                              precision={0}
-                              style={{ fontSize: 12, fontWeight: 300 }}
-                              valueStyle={{
-                                color: "#5469d4",
-                                fontSize: 12,
-                                fontWeight: 600,
-                                textAlign: "right",
-                              }}
-                              value={item.balances}
-                            />
-
-                          </div> */}
-                            </List.Item>
-                            {/* <Divider plain style={{ margin: 0 }} /> */}
-                          </div>
-                      );
-                    }}
+          <div>
+            <Row style={{marginBottom: 20}}>
+              <Col span={12}>
+                <Button>
+                  <FilterOutlined/>
+                  Filter
+                </Button>
+              </Col>
+              <Col span={12} style={{textAlign: "right"}}>
+                <Search
+                    placeholder="input search text"
+                    style={{width: 200, marginRight: 10}}
                 />
-              </div>
-          )}
+                <Button onClick={() => setVisibleModal(true)}>
+                  <PlusSquareOutlined/> New
+                </Button>
+              </Col>
+            </Row>
+            <Table
+                style={{textAlign: "center"}}
+                columns={columns}
+                dataSource={store.membership.data}
+                bordered
+                pagination={{
+                  total: store.membership.total_data,
+                  current: store.membership.page,
+                  pageSize: store.membership.pageSize,
+                  simple: true
+                }} onChange={(page) => {
+              store.membership.pageSize = page.pageSize;
+              store.membership.page = page.current;
+              store.membership.getData();
+            }} current={store.membership.page}
+                loading={store.membership.pageSize}/>
+          </div>
         </Card>
         <MembershipModal visible={visibleModal}
                          confirmLoading={confirmLoading}
diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js
index 50003e6..c255002 100644
--- a/src/pages/Transaction/Transaction.js
+++ b/src/pages/Transaction/Transaction.js
@@ -22,7 +22,7 @@ export const Transaction = () => {
     },
   ];
   return (
-      <div>
+      <div className={["ppob-container"].join(" ")}>
         <BreadcumbComponent data={routeData} text=""/>
         <Card>
           <Row style={{marginBottom: 20}}>