diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
index 1cba42c1..ec082646 100644
--- a/web/assets/css/custom.css
+++ b/web/assets/css/custom.css
@@ -1,321 +1,331 @@
-#app {
-    height: 100%;
-}
-
-.ant-space {
-    width: 100%;
-}
-
-.ant-layout-sider-zero-width-trigger {
-    display: none;
-}
-
-.ant-card {
-    border-radius: 30px;
-}
-
-.ant-card-hoverable {
-    cursor: auto;
-}
-
-.ant-card+.ant-card {
-    margin-top: 20px;
-}
-
-.drawer-handle {
-    position: absolute;
-    top: 72px;
-    width: 41px;
-    height: 40px;
-    cursor: pointer;
-    z-index: 0;
-    text-align: center;
-    line-height: 40px;
-    font-size: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #fff;
-    right: -40px;
-    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-    border-radius: 0 4px 4px 0;
-}
-
-@media (min-width: 769px) {
-    .drawer-handle {
-        display: none;
-    }
-}
-
-.fade-in-enter, .fade-in-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active {
-    opacity: 0
-}
-
-.fade-in-linear-enter-active, .fade-in-linear-leave-active {
-    -webkit-transition: opacity .2s linear;
-    transition: opacity .2s linear
-}
-
-.fade-in-linear-enter-active, .fade-in-linear-leave-active {
-    -webkit-transition: opacity .2s linear;
-    transition: opacity .2s linear
-}
-
-.fade-in-enter-active, .fade-in-leave-active {
-    -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
-    transition: all .3s cubic-bezier(.55, 0, .1, 1)
-}
-
-.zoom-in-center-enter-active, .zoom-in-center-leave-active {
-    -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
-    transition: all .3s cubic-bezier(.55, 0, .1, 1)
-}
-
-.zoom-in-center-enter, .zoom-in-center-leave-active {
-    opacity: 0;
-    -webkit-transform: scaleX(0);
-    transform: scaleX(0)
-}
-
-.zoom-in-top-enter-active, .zoom-in-top-leave-active {
-    opacity: 1;
-    -webkit-transform: scaleY(1);
-    transform: scaleY(1);
-    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
-    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    -webkit-transform-origin: center top;
-    transform-origin: center top
-}
-
-.zoom-in-top-enter, .zoom-in-top-leave-active {
-    opacity: 0;
-    -webkit-transform: scaleY(0);
-    transform: scaleY(0)
-}
-
-.zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active {
-    opacity: 1;
-    -webkit-transform: scaleY(1);
-    transform: scaleY(1);
-    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
-    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    -webkit-transform-origin: center bottom;
-    transform-origin: center bottom
-}
-
-.zoom-in-bottom-enter, .zoom-in-bottom-leave-active {
-    opacity: 0;
-    -webkit-transform: scaleY(0);
-    transform: scaleY(0)
-}
-
-.zoom-in-left-enter-active, .zoom-in-left-leave-active {
-    opacity: 1;
-    -webkit-transform: scale(1, 1);
-    transform: scale(1, 1);
-    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
-    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
-    -webkit-transform-origin: top left;
-    transform-origin: top left
-}
-
-.zoom-in-left-enter, .zoom-in-left-leave-active {
-    opacity: 0;
-    -webkit-transform: scale(.45, .45);
-    transform: scale(.45, .45)
-}
-
-.list-enter-active, .list-leave-active {
-    -webkit-transition: all .3s;
-    transition: all .3s
-}
-
-.list-enter, .list-leave-active {
-    opacity: 0;
-    -webkit-transform: translateY(-30px);
-    transform: translateY(-30px)
-}
-
-.ant-progress-inner {
-    background-color: #EBEEF5;
-}
-
-.deactive-client .ant-collapse-header{
-    color:rgb(255, 255, 255) !important;
-    background-color: rgb(255, 127, 127);
-}
-
-.ant-table-tbody>tr>td,
-.ant-table-thead>tr>th{
-    padding:16px;
-}
-
-.ant-card-dark {
-    color: hsla(0,0%,100%,.65);
-    background-color: #001529;
-    border-color:rgba(0,0,0,.09);
-}
-
-.ant-card-dark:hover {
-    border-color: #e8e8e8;
-}
-
-.ant-card-dark .ant-table-thead th {
-    color: hsla(0,0%,100%,.65);
-    background-color: #000c17;
-}
-
-.ant-card-dark .ant-table-tbody tr td,
-.ant-card-dark .ant-modal-title {
-    color: hsla(0,0%,100%,.65);
-}
-
-.ant-card-dark .ant-collapse-content,
-.ant-card-dark .ant-calendar,
-.ant-card-dark .ant-table-placeholder {
-    color: hsla(0,0%,100%,.65);
-    background-color: #001529;
-}
-
-.ant-card-dark .ant-list-item-meta-title,
-.ant-card-dark .ant-list-item-meta-description,
-.ant-card-dark .ant-form-item-label>label,
-.ant-card-dark .ant-form-item,
-.ant-card-dark .ant-divider-inner-text,
-.ant-card-dark .ant-modal-confirm-content,
-.ant-card-dark .ant-modal-confirm-title,
-.ant-card-dark .ant-progress-text,
-.ant-card-dark .ant-modal-close,
-.ant-card-dark i,
-.ant-card-dark .ant-select-dropdown-menu-item,
-.ant-card-dark .ant-calendar-month-select,
-.ant-card-dark .ant-calendar-year-select,
-.ant-card-dark .ant-calendar-date,
-.ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header,
-.ant-card-dark .ant-empty-normal {
-    color: hsla(0,0%,100%,.65);
-}
-
-.ant-card-dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
-.ant-card-dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
-.ant-card-dark .ant-calendar-date:hover {
-    background-color: #004488;
-}
-
-.ant-card-dark tbody .ant-table-expanded-row {
-    color: hsla(0,0%,100%,.65);
-    background-color: #023366; 
-}
-
-.ant-card-dark .ant-input,
-.ant-card-dark .ant-input-number,
-.ant-card-dark .ant-calendar-input,
-.ant-card-dark .ant-select-dropdown-menu-item-selected,
-.ant-card-dark .ant-select-selection {
-    color: hsla(0,0%,100%,.65);
-    background-color: #023366;
-}
-
-.ant-card-dark .ant-collapse-item {
-    color: hsla(0,0%,100%,.65);
-    background-color: #000c17;
-}
-
-.ant-card-dark .ant-modal-content,
-.ant-card-dark .ant-modal-body,
-.ant-card-dark .ant-modal-header,
-.ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
-    color: hsla(0,0%,100%,.65);
-    background-color: #1C262D; 
-}
-
-.client-table-header {
-    background-color: #f0f2f5;
-}
-
-.client-table-odd-row {
-    background-color: #fafafa;
-}
-
-.ant-card-dark .client-table-header {
-    background-color:  #023366;
-    color: hsla(0,0%,100%,.65);
-}
-
-.ant-card-dark .client-table-odd-row {
-    color: hsla(0,0%,100%,.65);
-    background-color: #1C262D;
-}
-
-.ant-card-dark .ant-calendar-last-month-cell .ant-calendar-date,
-.ant-card-dark .ant-calendar-next-month-btn-day .ant-calendar-date {
-    color: hsla(0,0%,100%,.30);
-}
-
-.ant-drawer-dark {
-    color: hsla(0,0%,100%,.65);
-}
-
-.ant-drawer-dark .ant-drawer-wrapper-body,
-.ant-drawer-dark .drawer-handle {
-    background-color: #001529;
-    border: 1px solid hsla(0,0%,100%,.30);
-}
-
-.ant-card-dark .ant-tag-blue {
-    color: #188fffa0;
-    background-color: #061c2c;
-    border-color: #91d5ffa0;
-}
-
-.ant-card-dark .ant-tag-green {
-    color: #52c41aa0;
-    background-color: #192c06;
-    border-color: #b7eb8fa0;
-}
-
-.ant-card-dark .ant-tag-cyan {
-    color: #13c2c2a0;
-    background-color: #052b25;
-    border-color: #87e8dea0;
-}
-
-.ant-card-dark .ant-tag-red {
-    color: #f5222da0;
-    background-color: #210503;
-    border-color: #ffa39ea0;
-}
-
-.ant-card-dark .ant-tag-orange {
-    color: #fa8c16a0;
-    background-color: #2d2106;
-    border-color: #ffd591a0;
-}
-
-.ant-card-dark .ant-table-row-expand-icon {
-    background: none;
-}
-
-.ant-card-dark .ant-switch-checked {
-    background-color: #0c61b0;
-}
-
-.ant-card-dark .ant-btn {
-    color: hsla(0,0%,100%,.65);
-    background: none;
-    border: 1px solid hsla(0,0%,100%,.65);
-}
-
-.ant-card-dark .ant-btn-primary {
-    color:  hsla(0,0%,100%,.65);
-    background-color: #073763;
-    border-color: #1890ff;
-    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
-    box-shadow: 0 2px 0 rgba(0,0,0,.045);
+#app {
+    height: 100%;
+}
+
+.ant-space {
+    width: 100%;
+}
+
+.ant-layout-sider-zero-width-trigger {
+    display: none;
+}
+
+.ant-card {
+    border-radius: 30px;
+}
+
+.ant-card-hoverable {
+    cursor: auto;
+}
+
+.ant-card+.ant-card {
+    margin-top: 20px;
+}
+
+.drawer-handle {
+    position: absolute;
+    top: 72px;
+    width: 41px;
+    height: 40px;
+    cursor: pointer;
+    z-index: 0;
+    text-align: center;
+    line-height: 40px;
+    font-size: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fff;
+    right: -40px;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    border-radius: 0 4px 4px 0;
+}
+
+@media (min-width: 769px) {
+    .drawer-handle {
+        display: none;
+    }
+}
+
+.fade-in-enter, .fade-in-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active {
+    opacity: 0
+}
+
+.fade-in-linear-enter-active, .fade-in-linear-leave-active {
+    -webkit-transition: opacity .2s linear;
+    transition: opacity .2s linear
+}
+
+.fade-in-linear-enter-active, .fade-in-linear-leave-active {
+    -webkit-transition: opacity .2s linear;
+    transition: opacity .2s linear
+}
+
+.fade-in-enter-active, .fade-in-leave-active {
+    -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
+    transition: all .3s cubic-bezier(.55, 0, .1, 1)
+}
+
+.zoom-in-center-enter-active, .zoom-in-center-leave-active {
+    -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1);
+    transition: all .3s cubic-bezier(.55, 0, .1, 1)
+}
+
+.zoom-in-center-enter, .zoom-in-center-leave-active {
+    opacity: 0;
+    -webkit-transform: scaleX(0);
+    transform: scaleX(0)
+}
+
+.zoom-in-top-enter-active, .zoom-in-top-leave-active {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
+    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    -webkit-transform-origin: center top;
+    transform-origin: center top
+}
+
+.zoom-in-top-enter, .zoom-in-top-leave-active {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0)
+}
+
+.zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active {
+    opacity: 1;
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
+    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom
+}
+
+.zoom-in-bottom-enter, .zoom-in-bottom-leave-active {
+    opacity: 0;
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0)
+}
+
+.zoom-in-left-enter-active, .zoom-in-left-leave-active {
+    opacity: 1;
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+    -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
+    transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
+    -webkit-transform-origin: top left;
+    transform-origin: top left
+}
+
+.zoom-in-left-enter, .zoom-in-left-leave-active {
+    opacity: 0;
+    -webkit-transform: scale(.45, .45);
+    transform: scale(.45, .45)
+}
+
+.list-enter-active, .list-leave-active {
+    -webkit-transition: all .3s;
+    transition: all .3s
+}
+
+.list-enter, .list-leave-active {
+    opacity: 0;
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px)
+}
+
+.ant-progress-inner {
+    background-color: #EBEEF5;
+}
+
+.deactive-client .ant-collapse-header{
+    color:rgb(255, 255, 255) !important;
+    background-color: rgb(255, 127, 127);
+}
+
+.ant-table-tbody>tr>td,
+.ant-table-thead>tr>th{
+    padding:16px;
+}
+
+.ant-menu-dark,
+.ant-menu-dark .ant-menu-sub,
+.ant-layout-header,
+.ant-layout-sider-dark,
+.ant-layout-sider-zero-width-trigger,
+.ant-dropdown-menu-dark,.ant-dropdown-menu-dark .ant-dropdown-menu,
+.ant-menu-dark.ant-menu-horizontal>.ant-menu-item,.ant-menu-dark.ant-menu-horizontal>.ant-menu-submenu {
+    background:#161b22
+}
+
+.ant-card-dark {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1a212a;
+    border-color:rgba(0,0,0,.09);
+}
+
+.ant-card-dark:hover {
+    border-color: #e8e8e8;
+}
+
+.ant-card-dark .ant-table-thead th {
+    color: hsla(0,0%,100%,.65);
+    background-color: #161b22;
+}
+
+.ant-card-dark .ant-table-tbody tr td,
+.ant-card-dark .ant-modal-title {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-collapse-content,
+.ant-card-dark .ant-calendar,
+.ant-card-dark .ant-table-placeholder {
+    color: hsla(0,0%,100%,.65);
+    background-color: #262f3d;
+}
+
+.ant-card-dark .ant-list-item-meta-title,
+.ant-card-dark .ant-list-item-meta-description,
+.ant-card-dark .ant-form-item-label>label,
+.ant-card-dark .ant-form-item,
+.ant-card-dark .ant-divider-inner-text,
+.ant-card-dark .ant-modal-confirm-content,
+.ant-card-dark .ant-modal-confirm-title,
+.ant-card-dark .ant-progress-text,
+.ant-card-dark .ant-modal-close,
+.ant-card-dark i,
+.ant-card-dark .ant-select-dropdown-menu-item,
+.ant-card-dark .ant-calendar-month-select,
+.ant-card-dark .ant-calendar-year-select,
+.ant-card-dark .ant-calendar-date,
+.ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header,
+.ant-card-dark .ant-empty-normal {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
+.ant-card-dark .ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled),
+.ant-card-dark .ant-calendar-date:hover {
+    background-color: #004488;
+}
+
+.ant-card-dark tbody .ant-table-expanded-row {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1a212a; 
+}
+
+.ant-card-dark .ant-input,
+.ant-card-dark .ant-input-number,
+.ant-card-dark .ant-calendar-input,
+.ant-card-dark .ant-select-dropdown-menu-item-selected,
+.ant-card-dark .ant-select-selection {
+    color: hsla(0,0%,100%,.65);
+    background-color: #2e3b52;
+}
+
+.ant-card-dark .ant-collapse-item {
+    color: hsla(0,0%,100%,.65);
+    background-color: #161b22;
+}
+
+.ant-card-dark .ant-modal-content,
+.ant-card-dark .ant-modal-body,
+.ant-card-dark .ant-modal-header,
+.ant-card-dark .ant-calendar-selected-day .ant-calendar-date {
+    color: hsla(0,0%,100%,.65);
+    background-color: #222a37;
+}
+
+.client-table-header {
+    background-color: #f0f2f5;
+}
+
+.client-table-odd-row {
+    background-color: #fafafa;
+}
+
+.ant-card-dark .client-table-header {
+    background-color:  #1a212a;
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .client-table-odd-row {
+    color: hsla(0,0%,100%,.65);
+    background-color: #242c3a;
+}
+
+.ant-card-dark .ant-calendar-last-month-cell .ant-calendar-date,
+.ant-card-dark .ant-calendar-next-month-btn-day .ant-calendar-date {
+    color: hsla(0,0%,100%,.30);
+}
+
+.ant-drawer-dark {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-drawer-dark .ant-drawer-wrapper-body,
+.ant-drawer-dark .drawer-handle {
+    background-color: #1a212a;
+    border: 1px solid hsla(0,0%,100%,.30);
+}
+
+.ant-card-dark .ant-tag-blue {
+    color: #3c9ae8;
+    background: #111d2c;
+    border-color: #15395b;
+}
+
+.ant-card-dark .ant-tag-green {
+    color: #6abe39;
+    background: #162312;
+    border-color: #274916;
+}
+
+.ant-card-dark .ant-tag-cyan {
+    color: #33bcb7;
+    background: #112123;
+    border-color: #144848;
+}
+
+.ant-card-dark .ant-tag-red {
+    color: #e84749;
+    background: #2a1215;
+    border-color: #58181c;
+}
+
+.ant-card-dark .ant-tag-orange {
+    color: #e89a3c;
+    background: #2b1d11;
+    border-color: #593815;
+}
+
+.ant-card-dark .ant-table-row-expand-icon {
+    background: none;
+}
+
+.ant-card-dark .ant-switch-checked {
+    background-color: #0c61b0;
+}
+
+.ant-card-dark .ant-btn {
+    color: hsla(0,0%,100%,.65);
+    background: none;
+    border: 1px solid hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-btn-primary {
+    color:  hsla(0,0%,100%,.65);
+    background-color: #073763;
+    border-color: #1890ff;
+    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+    box-shadow: 0 2px 0 rgba(0,0,0,.045);
 }
\ No newline at end of file
diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 608ca20e..411858bb 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -72,7 +72,7 @@
 </a-drawer>
 <script>
     const darkClass = "ant-card-dark";
-    const bgDarkStyle = "background-color: #1C262D";
+    const bgDarkStyle = "background-color: #242c3a";
     const siderDrawer = {
         visible: false,
         collapsed: false,