diff --git a/css/components/scrollbars.css b/css/components/scrollbars.css
index 6676fc6..25a151e 100644
--- a/css/components/scrollbars.css
+++ b/css/components/scrollbars.css
@@ -1,38 +1,89 @@
-[data-theme="dark"].categories-sidebar,
-[data-theme="dark"].categories-grid,
-[data-theme="dark"].keywords-section,
-[data-theme="dark"].context-builder {
+/* Light theme scrollbar colors */
+:root {
+    --scrollbar-track: #f0f0f0;
+    --scrollbar-thumb: #a8a8a8;
+    --scrollbar-thumb-hover: #8b98a5;
+}
+
+/* Dark theme scrollbar colors */
+[data-theme="dark"] {
+    --scrollbar-track: #1e2732;
+    --scrollbar-thumb: #38444d;
+    --scrollbar-thumb-hover: #536471;
+}
+
+/* Firefox scrollbar styles */
+* {
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    scrollbar-width: thin;
+}
+
+/* Webkit scrollbar styles */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+}
+
+/* Ensure styles apply to specific components */
+.categories-sidebar,
+.categories-grid,
+.keywords-section,
+.context-builder,
+.simple-mode-container,
+.advanced-mode-container {
     scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
     scrollbar-width: thin;
 }
 
-[data-theme="dark"].categories-sidebar::-webkit-scrollbar,
-[data-theme="dark"].categories-grid::-webkit-scrollbar,
-[data-theme="dark"].keywords-section::-webkit-scrollbar,
-[data-theme="dark"].context-builder::-webkit-scrollbar {
+.categories-sidebar::-webkit-scrollbar,
+.categories-grid::-webkit-scrollbar,
+.keywords-section::-webkit-scrollbar,
+.context-builder::-webkit-scrollbar,
+.simple-mode-container::-webkit-scrollbar,
+.advanced-mode-container::-webkit-scrollbar {
     width: 8px;
     height: 8px;
 }
 
-[data-theme="dark"].categories-sidebar::-webkit-scrollbar-track,
-[data-theme="dark"].categories-grid::-webkit-scrollbar-track,
-[data-theme="dark"].keywords-section::-webkit-scrollbar-track,
-[data-theme="dark"].context-builder::-webkit-scrollbar-track {
+.categories-sidebar::-webkit-scrollbar-track,
+.categories-grid::-webkit-scrollbar-track,
+.keywords-section::-webkit-scrollbar-track,
+.context-builder::-webkit-scrollbar-track,
+.simple-mode-container::-webkit-scrollbar-track,
+.advanced-mode-container::-webkit-scrollbar-track {
     background: var(--scrollbar-track);
     border-radius: 4px;
 }
 
-[data-theme="dark"].categories-sidebar::-webkit-scrollbar-thumb,
-[data-theme="dark"].categories-grid::-webkit-scrollbar-thumb,
-[data-theme="dark"].keywords-section::-webkit-scrollbar-thumb,
-[data-theme="dark"].context-builder::-webkit-scrollbar-thumb {
+.categories-sidebar::-webkit-scrollbar-thumb,
+.categories-grid::-webkit-scrollbar-thumb,
+.keywords-section::-webkit-scrollbar-thumb,
+.context-builder::-webkit-scrollbar-thumb,
+.simple-mode-container::-webkit-scrollbar-thumb,
+.advanced-mode-container::-webkit-scrollbar-thumb {
     background: var(--scrollbar-thumb);
     border-radius: 4px;
 }
 
-[data-theme="dark"].categories-sidebar::-webkit-scrollbar-thumb:hover,
-[data-theme="dark"].categories-grid::-webkit-scrollbar-thumb:hover,
-[data-theme="dark"].keywords-section::-webkit-scrollbar-thumb:hover,
-[data-theme="dark"].context-builder::-webkit-scrollbar-thumb:hover {
+.categories-sidebar::-webkit-scrollbar-thumb:hover,
+.categories-grid::-webkit-scrollbar-thumb:hover,
+.keywords-section::-webkit-scrollbar-thumb:hover,
+.context-builder::-webkit-scrollbar-thumb:hover,
+.simple-mode-container::-webkit-scrollbar-thumb:hover,
+.advanced-mode-container::-webkit-scrollbar-thumb:hover {
     background: var(--scrollbar-thumb-hover);
 }