diff --git a/src/app.css b/src/app.css
index 358d034..b9ea3bc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,4 +1,5 @@
 @import './styles/base.css';
+@import 'styles/scrollbar.css';
 @import './styles/publications.css';
 @import './styles/visualize.css';
 
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
new file mode 100644
index 0000000..568c1b9
--- /dev/null
+++ b/src/styles/scrollbar.css
@@ -0,0 +1,21 @@
+@layer components {
+    /* Global scrollbar styles */
+    * {
+        scrollbar-width: thin; /* Firefox */
+        scrollbar-color: rgba(87, 66, 41, 0.8) transparent; /* Transparent track, default scrollbar thumb */
+    }
+
+    /* Webkit Browsers (Chrome, Safari, Edge) */
+    *::-webkit-scrollbar {
+        width: 8px; /* Thin scrollbar */
+    }
+
+    *::-webkit-scrollbar-track {
+        background: transparent; /* Fully transparent track */
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply bg-primary-500 dark:bg-primary-600 hover:bg-primary-600 dark:hover:bg-primary-800;;
+        border-radius: 6px; /* Rounded scrollbar */
+    }
+}
\ No newline at end of file