diff --git a/custom.css b/custom.css
index 4431f69..1c3a032 100644
--- a/custom.css
+++ b/custom.css
@@ -19,8 +19,10 @@ body,button,input,select,textarea {
     width: auto !important;
     max-width: 1000px !important
 }
+
 .el-collapse-item__wrap,.el-table td.el-table__cell,.el-table th.el-table__cell,.el-table tr,.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
-    background-color: transparent
+    background-color: transparent;
+    width:auto !important
 }
 .el-table--mini .el-table__expanded-cell[class*=cell]:hover {
     background-color: transparent!important
@@ -42,32 +44,25 @@ body,button,input,select,textarea {
 /* .el-button:not(.el-button--text,.el-button--primary,.is-disabled),.el-color-picker__panel,.el-dialog,.el-input .el-input__count .el-input__count-inner,.el-input__inner,.el-message-box,.el-pager li,.el-radio-button__inner,.el-select-dropdown,.el-textarea .el-input__count,.el-textarea__inner,.x-menu-container {
     background-color: var(--lighter-bg)
 } */
-.el-color-picker__panel {
-    border-color: var(--lighter-bg)
-}
-.el-button,.el-radio-button__inner {
-    color: #dcc
-}
-.el-button:not(.el-button--text,.el-button--primary,.is-disabled):focus,.el-button:not(.el-button--text,.el-button--primary,.is-disabled):hover,.el-dropdown-menu,.x-change-image-item:hover,.x-friend-item:hover {
-    /* background-color: var(--lighter-lighter-bg); */
-    border-radius: 10px;
-    color: #fff
+
+.el-input--suffix .el-input__inner{
+    border: 2px solid rgb(237, 216, 255)
 }
-.el-button--primary {
-    background-color: var(--theme);
-    border-color: var(--theme);
-    color: #fff
+
+.el-input--suffix .el-input__inner:hover {
+    border: 2px solid rgb(var(--md-sys-color-primary));
 }
-.el-tooltip__popper.is-dark {
-    background-color: var(--lighter-lighter-lighter-bg)
+
+.el-input--suffix .el-input__inner:focus-visible {
+    border: 2px solid rgb(var(--md-sys-color-primary));
 }
-.el-button--primary:focus,.el-button--primary:hover {
-    /* background-color: var(--lighter-lighter-lighter-lighter-bg); */
-    border-color: var(--lighter-lighter-lighter-lighter-bg)
+
+.el-color-picker__panel {
+    border-color: var(--lighter-bg)
 }
+
 .el-dialog,.el-dropdown-menu,.el-tooltip__popper.is-dark {
-    border-radius: 10px;
-    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)
+    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
 }
 .el-dropdown-menu__item,.x-friend-item {
     transition: background-color ease-in-out .1s,color ease-in-out .1s
@@ -113,28 +108,18 @@ body,button,input,select,textarea {
     color: #cbb;
     transition: color ease-in-out .1s
 }
-.el-button--text:focus,.el-button--text:hover,.el-tabs__item:hover {
-    color: #fff
-}
 .el-slider__bar,.el-tabs__active-bar {
     background-color: var(--theme)
 }
 .el-slider__button {
     border: 2px solid var(--theme)
 }
-.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner,.el-radio-button__orig-radio:checked+.el-radio-button__inner,.el-radio__input.is-checked .el-radio__inner,.el-switch.is-checked .el-switch__core {
-    background-color: var(--theme);
-    border-color: var(--theme)
-}
 .el-radio-button__orig-radio:checked+.el-radio-button__inner {
     box-shadow: -1px 0 0 0 var(--theme)
 }
 .el-radio-button__orig-radio:checked+.el-radio-button__inner:hover {
     color: #fff
 }
-.el-pager li.active,.el-radio-button__inner:not(.is-disabled):hover,.el-select-dropdown__item.selected,.el-switch__label.is-active {
-    color: var(--theme)
-}
 .el-tag.el-tag--info {
     color: #baa;
     background-color: var(--lighter-lighter-bg);
@@ -339,13 +324,205 @@ body {
 .el-select .el-tag__close.el-icon-close {
     background-color: var(--lighter-lighter-bg);
 }
-input[type=checkbox] + .el-switch__core {
-    width: 36px !important;
-}
-input[type=checkbox]:checked + .el-switch__core {
-    border-color: var(--theme) !important;
-    background-color: var(--theme) !important;
-}
 .el-loading-spinner .path {
     stroke: var(--theme);
+}
+
+/* ---------- Switch ---------- */
+
+.el-switch {
+    height: 28px;
+}
+
+/* track */
+.el-switch__core {
+    position: relative;
+    width: 48px !important;
+    height: 28px;
+    border-radius: 28px;
+    background-color: rgb(var(--md-sys-color-surface-variant)) !important;
+    border: 2px solid rgb(var(--md-sys-color-outline)) !important;
+    transition: background-color .1s ease-in-out,
+                border-color .1s ease-in-out;
+}
+
+/* active track */
+.el-switch.is-checked .el-switch__core  {
+    background-color: rgb(var(--md-sys-color-primary)) !important;
+    border-color: transparent !important;
+}
+
+/* thumb */
+.el-switch__core::before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 0px;
+    margin: 4px;
+    background-color: rgb(var(--md-sys-color-outline));
+    border-radius: 28px;
+    transition: left 200ms cubic-bezier(0, .5, .5, 1.5),
+                background-color .1s ease-in-out,
+                height 50ms ease-out,
+                width 50ms ease-out,
+                padding 50ms ease-out,
+                margin 50ms ease-out;
+}
+
+/* active thumb */
+.el-switch.is-checked .el-switch__core::before {
+    content: "Done";
+    font-family: "Material Symbols Rounded";
+    vertical-align: bottom;
+    text-align: center;
+    line-height: 24px;
+    background-color: rgb(var(--md-sys-color-on-primary));
+    height: 24px;
+    width: 24px;
+    left: 20px;
+    margin: 0;
+}
+
+/* hover thumb */
+.el-switch:hover input:not(:disabled)+.el-switch__core::before {
+    background-color: rgb(var(--md-sys-color-on-surface-variant));
+}
+
+/* active hover thumb */
+.el-switch.is-checked:hover input:not(:disabled)+.el-switch__core::before {
+    background-color: rgb(var(--md-sys-color-primary-container));
+}
+
+/* click thumb */
+.el-switch:active input:not(:disabled)+.el-switch__core::before {
+    padding: 5px;
+    margin: 0px;
+    top: -1px;
+    left: -1px
+}
+
+.el-switch.is-checked:active input:not(:disabled)+.el-switch__core::before {
+    padding: 1px;
+    margin: 0px;
+    top: -1px;
+    left: 19px
+}
+
+/* active click thumb */
+.el-switch.is-checked:active input:not(:disabled)+.el-switch__core::before {
+    background-color: rgb(var(--md-sys-color-primary-container));
+}
+
+/* disabled track */
+.el-switch.is-disabled .el-switch__core {
+    background-color: rgba(var(--md-sys-color-surface-variant), .12) !important;
+    border-color: rgba(var(--md-sys-color-on-surface), .12) !important;
+}
+
+.el-switch.is-checked.is-disabled .el-switch__core {
+    background-color: rgba(var(--md-sys-color-on-surface), .12);
+    border-color: rgba(var(--md-sys-color-on-surface), 0);
+}
+
+/* disabled thumb */
+.el-switch.is-disabled .el-switch__core::before {
+    background-color: rgba(var(--md-sys-color-on-surface), .38);
+}
+
+.el-switch.is-disabled.is-checked .el-switch__core::before {
+    background-color: rgba(var(--md-sys-color-surface), 1);
+}
+
+/* disabled icon */
+.el-switch.is-disabled.is-disabled.is-checked .el-switch__core::before {
+    color: rgba(var(--md-sys-color-on-surface), .38);
+}
+
+/* active label */
+.el-switch__label {
+    color: rgb(var(--md-sys-color-on-surface-variant));
+    font-family: var(--md-sys-typescale-label-large-font);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    font-size: var(--md-sys-typescale-label-large-size);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking);
+    transition: color .1s ease-in-out,
+}
+.el-switch__label.is-active {
+    color: rgb(var(--md-sys-color-primary));
+}
+.el-switch.is-disabled .el-switch__label {
+    color: rgba(var(--md-sys-color-on-surface), .12);
+}
+.el-switch.is-disabled .el-switch__label.is-active {
+    color: rgba(var(--md-sys-color-on-surface), .38);
+}
+
+.el-switch__core:after {
+    display: none;
+    transition: left 200ms cubic-bezier(0, .5, .5, 1.5);
+}
+
+/* ---------- Filled button ---------- */
+
+.el-button {
+    position: relative;
+}
+.el-button::after {
+    position: absolute;
+    content: "";
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+    border: none;
+    left: 0;
+    top: 0;
+    border-radius: 20px;
+    transition: background-color .1s ease-in-out;
+}
+
+.el-button.el-button--primary:not(.el-button--text) {
+    height: 40px;
+    padding: 0;
+    margin: 0 4px;
+    border-radius: 20px;
+    background-color: rgb(var(--md-sys-color-primary));
+    color: rgb(var(--md-sys-color-on-primary));
+    font-family: var(--md-sys-typescale-label-large-font);
+    line-height: var(--md-sys-typescale-label-large-line-height);
+    font-size: var(--md-sys-typescale-label-large-size);
+    font-weight: var(--md-sys-typescale-label-large-weight);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking);
+    border: none;
+    transition: background-color .1s ease-in-out,
+                color .1s ease-in-out;
+}
+.el-button.el-button--primary:not(.el-button--text).is-disabled {
+    cursor: not-allowed;
+    background-color: rgba(var(--md-sys-color-on-surface), .12);
+    color: rgba(var(--md-sys-color-on-surface), .38);
+}
+.el-button.el-button--primary:not(.el-button--text) > i {
+    font-size: 18px;
+}
+.el-button.el-button--primary:not(.el-button--text) > i:first-child:last-child {
+    padding: 0 11px;
+}
+.el-button.el-button--primary:not(.el-button--text) > i:first-child {
+    padding-left: 16px;
+    padding-right: 8px;
+}
+.el-button.el-button--primary:not(.el-button--text) > *:not(i):first-child {
+    padding-left: 24px;
+}
+.el-button.el-button--primary:not(.el-button--text) > span:last-child {
+    padding-right: 24px;
+}
+.el-button.el-button--primary:not(.el-button--text,.is-disabled):hover::after {
+    background-color: rgba(var(--md-sys-color-on-primary), .08);
+}
+.el-button.el-button--primary:not(.el-button--text,.is-disabled):focus::after,
+.el-button.el-button--primary:not(.el-button--text,.is-disabled):active::after {
+    background-color: rgba(var(--md-sys-color-on-primary), .12);
 }
\ No newline at end of file