diff --git a/src/styles/App.less b/src/styles/App.less
index c4399b5..0ddef5d 100755
--- a/src/styles/App.less
+++ b/src/styles/App.less
@@ -1,142 +1,111 @@
 @import './loader.css';
 
-@header-height: 64px;
-@layout-min-height: calc(100vh - @header-height);
-
 #root, .app{
-  min-height:100%;
+    min-height:100%;
 }
 
 .ant-layout{
-  flex: 1;
+    flex: 1;
 
-  > .ant-menu {
-    flex: 0;
-  }
+    > .ant-menu {
+        flex: 0;
+    }
 }
 
 html {
-  display: flex;
-  height: 100%;
+    display: flex;
+    height: 100%;
 }
 
 .mt-30px {
-  margin-top: 30px;
+    margin-top: 30px;
 }
 
 .ml-30px {
-  margin-left: 30px;
+    margin-left: 30px;
 }
 
 .login_page {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 24px;
-  background-color: #9d9d9d;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 24px;
+    background-color: #9d9d9d;
 }
 
 .shadow{
-  box-shadow: 1px 1px 4px #00000033;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  gap: 50px;
-  height: @header-height;
-}
-
-.header .logo {
-  padding: 8px 24px;
-  margin: 0 10px;
-  margin-bottom: 2px;
-}
-
-.header .title{
-  flex-grow: 1;
-  color: #fff;
-  padding-left: calc(100vw / 2 - 400px);
-}
-
-.header button{
-  color: rgb(255, 255, 255);
-  background-color: rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 1px 1px 4px #00000033;
 }
 
 .small-font {
-  font-size: 12px;
+    font-size: 12px;
 }
 
 .yellow-background {
-  background-color: #FFFF99 !important;
+    background-color: #FFFF99 !important;
 }
 
 .lightgray-background {
-  background-color: #AFABAB !important;
+    background-color: #AFABAB !important;
 }
 
 .lightpurple-background {
-  background-color: #CCCCFF !important;
+    background-color: #CCCCFF !important;
 }
 
 .lightorange-background {
-  background-color: #FFCC99 !important;
+    background-color: #FFCC99 !important;
 }
 
 .ph-2 {
-  padding: 2px 10px;
+    padding: 2px 10px;
 }
 
 .mh-2 {
-  margin-left: 2px;
-  margin-right: 2px;
+    margin-left: 2px;
+    margin-right: 2px;
 }
 
 .ant-layout-content {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.sheet{
-  padding: 5px 24px;
-  min-height: calc(@layout-min-height - 15px); // 280px;
-  margin: 0 15px 15px 15px;
-}
-
-.site-layout-background {
-  background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 }
 
 .border_small{
-  border: 1px solid rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
 }
 
 .menu-title,
 .chart-footer {
-  display: flex;
+    display: flex;
 }
 
 .submit-button {
-  border-radius: 5px;
-  font-weight: bold;
-  text-align: center;
-  margin: 0 5px 5px 0;
+    border-radius: 5px;
+    font-weight: bold;
+    text-align: center;
+    margin: 0 5px 5px 0;
 }
 
 .well_menu {
-  margin-top: 0;
-  padding-top: 0;
-  height: 100%;
-  border-right: 0;
+    margin-top: 0;
+    padding-top: 0;
+    border-right: 0;
 }
 
 tr.table_row_size {
-  height: 10px;
+    height: 10px;
+}
+
+.hide-slider {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
 }
diff --git a/src/styles/layout.less b/src/styles/layout.less
new file mode 100644
index 0000000..e4a17da
--- /dev/null
+++ b/src/styles/layout.less
@@ -0,0 +1,147 @@
+@header-height: 64px;
+@layout-min-height: calc(100vh - @header-height);
+
+.no-select {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 50px;
+    height: @header-height;
+
+    & .logo {
+        padding: 8px 24px;
+        margin: 0 10px;
+        margin-bottom: 2px;
+    }
+
+    & .title {
+        flex-grow: 1;
+        color: #fff;
+        padding-left: calc(100vw / 2 - 400px);
+        .no-select;
+    }
+
+    & button {
+        color: rgb(255, 255, 255);
+        background-color: rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+}
+
+@link-color: #FFFC;
+@active-bg: #c32828;
+@admin-bg: #900;
+@admin-active-bg: #413f3d;
+
+.ant-menu-submenu-popup .ant-menu-sub {
+    color: @link-color;
+
+    & .ant-menu-item > span > a, & a {
+        color: @link-color;
+    }
+}
+
+.page-layout {
+    height: 100vh;
+
+    & .menu-sider {
+        overflow-x: hidden;
+        overflow-y: auto;
+        height: 100%;
+
+        & .ant-menu-submenu-selected {
+            &.ant-menu-submenu-vertical {
+                background-color: @active-bg;
+            }
+
+            &.ant-menu-submenu-inline {
+                background-color: inherit;
+                & .ant-menu-submenu-title {
+                    color: @active-bg;
+                }
+            }
+        }
+
+        & .ant-menu-submenu-title > .ant-menu-title-content > a,
+        & .ant-menu .ant-menu-item,
+        & .ant-menu .ant-menu-item > span > a {
+            color: @link-color;
+            .no-select;
+        }
+
+        & .sider-content {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: start;
+            height: 100%;
+
+            & .sider-toogle {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: @header-height !important;
+                color: @link-color;
+                border: none;
+                outline: none;
+                background-color: transparent;
+                cursor: pointer;
+            
+                &:hover {
+                    color: white;
+                }
+            }
+
+            & .scrollable {
+                flex: 1;
+                overflow-y: scroll;
+            }
+        }
+
+        & .ant-menu-dark .ant-menu-inline.ant-menu-sub, & .ant-menu {
+            background: transparent;
+            color: @link-color;
+        }
+    }
+
+    & .page-content {
+        overflow-y: auto;
+        // background: white;
+    }
+
+    & .sheet{
+        padding: 15px;
+        // min-height: calc(@layout-min-height - 30px); // 280px;
+        overflow: visible;
+        margin: 15px;
+    }
+
+    &-admin {
+        .header {
+            background-color: @admin-bg;
+        }
+
+        .menu-sider {
+            background-color: @admin-bg;
+        }
+
+        & .menu-sider .ant-menu-submenu-selected.ant-menu-submenu-inline .ant-menu-submenu-title {
+            color: white;
+            & .ant-menu-title-content > a {
+                color: white;
+            }
+        }
+    }
+}
+
+.site-layout-background {
+    background: #fff;
+}
diff --git a/src/styles/user_menu.less b/src/styles/user_menu.less
new file mode 100644
index 0000000..6089225
--- /dev/null
+++ b/src/styles/user_menu.less
@@ -0,0 +1,10 @@
+.user-menu {
+
+    & .profile-links {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+        margin-bottom: 10px;
+    }
+}