diff --git a/platform/docs/src/css/custom.css b/platform/docs/src/css/custom.css
index 2883858d8..477fabe9a 100644
--- a/platform/docs/src/css/custom.css
+++ b/platform/docs/src/css/custom.css
@@ -9,6 +9,7 @@
 @layer base {
   :root {
     --highlight: 191 74% 63%;
+    --neutral: 213 22% 59%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 236 62% 5%;
diff --git a/platform/docs/tailwind.config.js b/platform/docs/tailwind.config.js
index 7e858df22..d7847f4c2 100644
--- a/platform/docs/tailwind.config.js
+++ b/platform/docs/tailwind.config.js
@@ -43,6 +43,7 @@ module.exports = {
     extend: {
       colors: {
         highlight: 'hsl(var(--highlight))',
+        neutral: 'hsl(var(--neutral))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
diff --git a/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx b/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx
index ac300bb6c..f8df1b8af 100644
--- a/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx
+++ b/platform/ui-next/src/components/ScrollArea/ScrollArea.tsx
@@ -114,7 +114,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-input relative flex-1 rounded-full" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-neutral/50 relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/platform/ui-next/src/components/Viewport/ImageScrollbar.module.css b/platform/ui-next/src/components/Viewport/ImageScrollbar.module.css
index fd578ee93..f82c85a31 100644
--- a/platform/ui-next/src/components/Viewport/ImageScrollbar.module.css
+++ b/platform/ui-next/src/components/Viewport/ImageScrollbar.module.css
@@ -32,7 +32,8 @@
 /* Thumb styles for WebKit browsers - more specific selector */
 input[type='range'].scrollbarInput::-webkit-slider-thumb {
   -webkit-appearance: none !important;
-  background-color: hsl(var(--input));
+  background-color: hsl(var(--neutral));
+  opacity: 50%;
   border: none;
   border-radius: 57px;
   cursor: -webkit-grab;
@@ -44,12 +45,14 @@ input[type='range'].scrollbarInput::-webkit-slider-thumb {
 input[type='range'].scrollbarInput::-webkit-slider-thumb:active,
 input[type='range'].scrollbarInput::-webkit-slider-thumb:hover {
   background-color: hsl(var(--primary));
+  opacity: 60%;
   cursor: -webkit-grabbing;
 }
 
 /* Thumb styles for Firefox - more specific selector */
 input[type='range'].scrollbarInput::-moz-range-thumb {
-  background-color: hsl(var(--input));
+  background-color: hsl(var(--neutral));
+  opacity: 50%;
   border: none;
   border-radius: 57px;
   cursor: -moz-grab;
@@ -60,6 +63,7 @@ input[type='range'].scrollbarInput::-moz-range-thumb {
 input[type='range'].scrollbarInput::-moz-range-thumb:active,
 input[type='range'].scrollbarInput::-moz-range-thumb:hover {
   background-color: hsl(var(--primary));
+  opacity: 50%;
   cursor: -moz-grabbing;
 }
 
diff --git a/platform/ui-next/src/tailwind.css b/platform/ui-next/src/tailwind.css
index b27fa0767..3ae3df8e4 100644
--- a/platform/ui-next/src/tailwind.css
+++ b/platform/ui-next/src/tailwind.css
@@ -9,6 +9,7 @@
 @layer base {
   :root {
     --highlight: 191 74% 63%;
+    --neutral: 213 22% 59%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 234 64% 10%;
@@ -252,4 +253,4 @@ input[type='number']::-webkit-outer-spin-button {
 
 input[type='number'] {
   -moz-appearance: textfield; /* For Firefox */
-}
\ No newline at end of file
+}
diff --git a/platform/ui-next/tailwind.config.js b/platform/ui-next/tailwind.config.js
index 7d5d028fe..53b40d832 100644
--- a/platform/ui-next/tailwind.config.js
+++ b/platform/ui-next/tailwind.config.js
@@ -44,6 +44,7 @@ module.exports = {
     extend: {
       colors: {
         highlight: 'hsl(var(--highlight))',
+        neutral: 'hsl(var(--neutral))',
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
diff --git a/platform/ui/src/tailwind.css b/platform/ui/src/tailwind.css
index 1fac7989b..0e645e3ca 100644
--- a/platform/ui/src/tailwind.css
+++ b/platform/ui/src/tailwind.css
@@ -11,8 +11,6 @@
   }
 }
 
-
-
 /* Truncate 2 lines utility */
 .truncate-2-lines {
   overflow: hidden;
@@ -34,6 +32,7 @@
 @layer base {
   :root {
     --highlight: 191 74% 63%;
+    --neutral: 213 22% 59%;
     --background: 236 62% 5%;
     --foreground: 0 0% 98%;
     --card: 236 62% 5%;
@@ -102,4 +101,4 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
-}
\ No newline at end of file
+}