diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
index ef254be7796fb..af4fb007b46dd 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css
@@ -38,9 +38,9 @@
         -left-1
         flex
         flex-col
-        gap-px
+        gap-1
         after:absolute
-        after:left-[0.45rem]
+        after:left-3
         after:top-0
         after:z-10
         after:h-full
@@ -55,17 +55,17 @@
           first:before:left-0
           first:before:h-20
           first:before:w-4
-          first:before:bg-white
+          first:before:bg-transparent
           first:before:content-['']
           last:after:absolute
           last:after:left-0
           last:after:top-[calc(50%+0.25rem)]
           last:after:h-20
           last:after:w-4
-          last:after:bg-white
+          last:after:bg-transparent
           last:after:content-['']
-          first:dark:before:bg-neutral-950
-          last:dark:after:bg-neutral-950;
+          first:dark:before:bg-transparent
+          last:dark:after:bg-transparent;
       }
     }
   }
diff --git a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
index f11585de67303..660618cec3efc 100644
--- a/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/SidebarItem/index.module.css
@@ -10,13 +10,14 @@
     gap-1
     overflow-hidden
     rounded-md
+    pl-1
     text-sm
     text-neutral-800
     dark:text-neutral-200;
 
   &:not(.active):hover {
     /* Apply hover background to the full item width */
-    @apply bg-neutral-100
+    @apply bg-neutral-200
       dark:bg-neutral-900;
 
     /* Ensure text colors contrast with hover background */
@@ -32,7 +33,7 @@
     }
 
     .progressionIcon {
-      @apply fill-green-200
+      @apply fill-green-400
         dark:fill-green-300;
     }
   }
@@ -48,8 +49,8 @@
 
   .progressionIcon {
     @apply shrink-0
-      fill-neutral-200
-      stroke-white
+      fill-neutral-600
+      stroke-neutral-300
       stroke-[4]
       dark:fill-neutral-800
       dark:stroke-neutral-950;
@@ -68,7 +69,7 @@
 
     /* On hover, use full-width background on the item (set above) */
     &:not(.active):hover {
-      @apply bg-neutral-100
+      @apply bg-neutral-200
         dark:bg-neutral-900;
     }
 
diff --git a/packages/ui-components/src/styles/index.css b/packages/ui-components/src/styles/index.css
index c1fe1ddb15026..3181c98e56807 100644
--- a/packages/ui-components/src/styles/index.css
+++ b/packages/ui-components/src/styles/index.css
@@ -37,3 +37,17 @@
 }
 
 @custom-variant aria-current (&[aria-current="page"]);
+
+* {
+  scrollbar-color: var(--color-green-600, #417e38)
+    var(--color-neutral-400, #2c3437); /* thumb color, track color */
+  scrollbar-width: thin;
+}
+
+@media (prefers-color-scheme: dark) {
+  * {
+    scrollbar-color: var(--color-green-600, #417e38)
+      var(--color-neutral-900, #2c3437); /* thumb color, track color */
+    scrollbar-width: thin;
+  }
+}