diff --git a/ui/src/style/mixins/mixins.scss b/ui/src/style/mixins/mixins.scss
index 4d3646f72d..5bc20a2681 100644
--- a/ui/src/style/mixins/mixins.scss
+++ b/ui/src/style/mixins/mixins.scss
@@ -41,6 +41,35 @@ $scrollbar-offset: 3px;
 @mixin custom-scrollbar($trackColor, $handleColor) {
   &::-webkit-scrollbar {
     width: $scrollbar-width;
+
+    &-button {
+      background-color: $trackColor;
+    }
+    &-track {
+      background-color: $trackColor;
+    }
+    &-track-piece {
+      background-color: $trackColor;
+      border: $scrollbar-offset solid $trackColor;
+      border-radius: ($scrollbar-width / 2);
+    }
+    &-thumb {
+      background-color: $handleColor;
+      border: $scrollbar-offset solid $trackColor;
+      border-radius: ($scrollbar-width / 2);
+    }
+    &-corner {
+      background-color: $trackColor;
+    }
+  }
+  &::-webkit-resizer {
+    background-color: $trackColor;
+  }
+}
+@mixin custom-scrollbar-round($trackColor, $handleColor) {
+  &::-webkit-scrollbar {
+    width: $scrollbar-width;
+    border-top-right-radius: $radius;
     border-bottom-right-radius: $radius;
 
     &-button {
@@ -48,6 +77,7 @@ $scrollbar-offset: 3px;
     }
     &-track {
       background-color: $trackColor;
+      border-top-right-radius: $radius;
       border-bottom-right-radius: $radius;
     }
     &-track-piece {