diff --git a/web/styles/main.scss b/web/styles/main.scss
index fcd8903..6a8d410 100644
--- a/web/styles/main.scss
+++ b/web/styles/main.scss
@@ -1,15 +1,15 @@
-// Native thin scrollbar aligned with the widget, used by chat message lists.
+// Native scrollbar aligned with the Base UI ScrollArea used by lists.
 // Imported from app/layout.tsx with the rest of the global styles.
 
-$thumb: #cbd5e1;
-$thumb-hover: #94a3b8;
+$scrollbar-thumb: var(--border);
 
 .agent-desk-scrollbar {
   scrollbar-width: thin;
-  scrollbar-color: $thumb transparent;
+  scrollbar-color: $scrollbar-thumb transparent;
 
   &::-webkit-scrollbar {
-    width: 6px;
+    width: 10px;
+    height: 10px;
   }
 
   &::-webkit-scrollbar-track {
@@ -17,28 +17,14 @@ $thumb-hover: #94a3b8;
   }
 
   &::-webkit-scrollbar-thumb {
-    border: 2px solid transparent;
+    border: 1px solid transparent;
     border-radius: 999px;
-    background: $thumb;
+    background: $scrollbar-thumb;
     background-clip: padding-box;
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background: $thumb-hover;
-    background-clip: padding-box;
-  }
-}
-
-.dark .agent-desk-scrollbar {
-  scrollbar-color: hsl(var(--border)) transparent;
-
-  &::-webkit-scrollbar-thumb {
-    background: hsl(var(--border));
-    background-clip: padding-box;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--muted-foreground) / 0.45);
+    background: $scrollbar-thumb;
     background-clip: padding-box;
   }
 }