diff --git a/package.json b/package.json
index df90220fa..beceedeb7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/mixins/webkitVisibleScrollbar.js b/src/mixins/webkitVisibleScrollbar.js
index 140e68330..973eaee6c 100644
--- a/src/mixins/webkitVisibleScrollbar.js
+++ b/src/mixins/webkitVisibleScrollbar.js
@@ -3,26 +3,30 @@ import { getSizeBy, getRgbColor } from "@/theme/utils"
 
 export default css`
   scrollbar-width: ${getSizeBy(1)};
-  scrollbar-color: ${getRgbColor("border", 0.3)} ${getRgbColor("border", 0.1)};
+  scrollbar-color: ${getRgbColor("scrollBarThumb", 0.3)} ${getRgbColor("scrollBarThumb", 0.1)};
 
   &::-webkit-scrollbar {
     width: ${getSizeBy(1)};
   }
+
   &::-webkit-scrollbar-track {
-    border-radius: ${getSizeBy(0.5)};
-    background-color: ${getRgbColor("border", 0.1)};
+    background-color: ${getRgbColor("scrollBarTrack", 1)};
+    border:1px solid ${getRgbColor("scrollBarBorder", 0.4)};
+    border-radius: ${getSizeBy(1)};
   }
   &::-webkit-scrollbar-thumb {
+    width: ${getSizeBy(0.5)};
+    border:1px solid ${getRgbColor("scrollBarBorder", 1)};
     border-radius: ${getSizeBy(1)};
-    background-color: ${getRgbColor("border", 0.6)};
+    background-color:  ${getRgbColor("scrollBarThumb", 1)}
   }
   &::-webkit-scrollbar-thumb:hover {
-    background-color: ${getRgbColor("border", 0.9)};
+    background-color: ${getRgbColor("scrollBarThumbHover", 1)};
   }
   &::-webkit-scrollbar-track-piece {
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollBarThumb", 0.3)};
   }
   &::-webkit-scrollbar-corner {
-    background-color: ${getRgbColor("border", 0.3)};
+    background-color: ${getRgbColor("scrollBarThumb", 0.3)};
   }
 `
diff --git a/src/theme/dark/colors.js b/src/theme/dark/colors.js
index bb6b87b9a..e944d3698 100644
--- a/src/theme/dark/colors.js
+++ b/src/theme/dark/colors.js
@@ -20,6 +20,11 @@ const appColors = {
   modalInfoBackground: rawColors.neutral.grey50,
   menuItemSelected: rawColors.green.green30,
   menuItemHover: rawColors.green.green10,
+  scrollBarTrack: rawColors.neutral.grey25,
+  scrollBarThumb: rawColors.neutral.grey50,
+  scrollBarThumbHover: rawColors.neutral.grey100,
+  scrollBarBorder: rawColors.neutral.grey55,
+
   // Links
   link: rawColors.green.green110,
   linkHover: rawColors.green.green120,
diff --git a/src/theme/default/colors.js b/src/theme/default/colors.js
index 12cc8eb03..1cea86a94 100644
--- a/src/theme/default/colors.js
+++ b/src/theme/default/colors.js
@@ -20,6 +20,10 @@ const appColors = {
   modalInfoBackground: rawColors.neutral.blackhaze,
   menuItemSelected: rawColors.green.green196,
   menuItemHover: rawColors.green.green190,
+  scrollBarTrack: rawColors.neutral.grey190,
+  scrollBarThumb: rawColors.neutral.grey170,
+  scrollBarThumbHover: rawColors.neutral.grey150,
+  scrollBarBorder: rawColors.neutral.grey180,
   // Links
   link: rawColors.green.green100,
   linkHover: rawColors.green.green110,