diff --git a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
index a9e062e2f6..5f7f4fd351 100644
--- a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
+++ b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
@@ -68,7 +68,7 @@ export function DocumentSidebar({
         </div>
 
         {currentDocuments ? (
-          <div className="overflow-y-auto overflow-x-hidden flex flex-col">
+          <div className="overflow-y-auto dark-scrollbar overflow-x-hidden flex flex-col">
             <div>
               {dedupedDocuments.length > 0 ? (
                 dedupedDocuments.map((document, ind) => (
@@ -141,7 +141,7 @@ export function DocumentSidebar({
         </div>
 
         {selectedDocuments && selectedDocuments.length > 0 ? (
-          <div className="flex flex-col gap-y-2 py-3 px-3 overflow-y-auto max-h-full">
+          <div className="flex flex-col gap-y-2 py-3 px-3 overflow-y-auto dark-scrollbar max-h-full">
             {selectedDocuments.map((document) => (
               <SelectedDocumentDisplay
                 key={document.document_id}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 52f28f3a75..413e9d46ee 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -17,6 +17,15 @@
   background: #d1d5db; /* Handle color on hover */
 }
 
+.dark-scrollbar::-webkit-scrollbar-thumb {
+  background: #c7cdd2; /* Handle color */
+  border-radius: 10px;
+}
+
+.dark-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #989a9c; /* Handle color on hover */
+}
+
 ::-webkit-scrollbar {
   width: 8px; /* Vertical scrollbar width */
   height: 8px; /* Horizontal scrollbar height */