diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index 95298c9..3ac2448 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -95,7 +95,7 @@ let headerButtons = [
     // }
 ];
 
-const HeaderBar = () => {
+const SiderBar = () => {
     const [userState, userDispatch] = useContext(UserContext);
     let navigate = useNavigate();
     const [selectedKeys, setSelectedKeys] = useState(['home']);
@@ -119,6 +119,7 @@ const HeaderBar = () => {
                     <Nav
                         // mode={'horizontal'}
                         // bodyStyle={{ height: 100 }}
+                        defaultIsCollapsed={isMobile()}
                         selectedKeys={selectedKeys}
                         renderWrapper={({itemElement, isSubNav, isInSubNav, props}) => {
                             const routerMap = {
@@ -166,4 +167,4 @@ const HeaderBar = () => {
     );
 };
 
-export default HeaderBar;
+export default SiderBar;
diff --git a/web/src/index.css b/web/src/index.css
index e157699..9b66f0f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -15,6 +15,20 @@ body {
     height: 100%;
 }
 
+@media only screen and (max-width: 767px) {
+    .semi-table-tbody, .semi-table-row, .semi-table-row-cell {
+        display: block!important;
+        width: auto!important;
+        padding: 2px!important;
+    }
+    .semi-table-row-cell {
+        border-bottom: 0!important;
+    }
+    .semi-table-tbody>.semi-table-row {
+        border-bottom: 1px solid rgba(0,0,0,.1);
+    }
+}
+
 .semi-layout {
     height: 100%;
 }