diff --git a/app/globals.css b/app/globals.css
index 62c1b9a..40b11f9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -25,3 +25,37 @@
     -moz-osx-font-smoothing: grayscale;
   }
 }
+
+@layer utilities {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-surface) transparent;
+  }
+
+  *:hover {
+    scrollbar-color: var(--color-muted) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--color-surface);
+    border-radius: 9999px;
+    transition: background-color 0.2s ease;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-muted);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: var(--color-accent);
+  }
+}