diff --git a/libs/ui/src/lib/components/scroll-area/scroll-area.ts b/libs/ui/src/lib/components/scroll-area/scroll-area.ts
index 8b3331519..c1a14b71a 100644
--- a/libs/ui/src/lib/components/scroll-area/scroll-area.ts
+++ b/libs/ui/src/lib/components/scroll-area/scroll-area.ts
@@ -16,26 +16,6 @@ import { cn } from '../../utils';
   template: `
     <ng-content />
   `,
-  styles: `
-    [data-slot='scroll-area'] {
-      scrollbar-width: thin;
-      scrollbar-color: transparent transparent;
-    }
-    [data-slot='scroll-area']:hover {
-      scrollbar-color: var(--color-border) transparent;
-    }
-    [data-slot='scroll-area']::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    [data-slot='scroll-area']::-webkit-scrollbar-thumb {
-      background-color: transparent;
-      border-radius: 9999px;
-    }
-    [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb {
-      background-color: var(--color-border);
-    }
-  `,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/libs/ui/src/lib/styles/index.css b/libs/ui/src/lib/styles/index.css
index e16a9ebbc..1e1ef8153 100644
--- a/libs/ui/src/lib/styles/index.css
+++ b/libs/ui/src/lib/styles/index.css
@@ -1,3 +1,4 @@
 @import url('@angular/cdk/overlay-prebuilt.css');
 
 @import './shadcn.css';
+@import './scrollbar.css';
diff --git a/libs/ui/src/lib/styles/scrollbar.css b/libs/ui/src/lib/styles/scrollbar.css
new file mode 100644
index 000000000..b1c627de1
--- /dev/null
+++ b/libs/ui/src/lib/styles/scrollbar.css
@@ -0,0 +1,32 @@
+@layer base {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+    border-radius: 9999px;
+  }
+
+  [data-slot='scroll-area'] {
+    scrollbar-color: transparent transparent;
+  }
+
+  [data-slot='scroll-area']:hover {
+    scrollbar-color: var(--color-border) transparent;
+  }
+
+  [data-slot='scroll-area']::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  [data-slot='scroll-area']:hover::-webkit-scrollbar-thumb {
+    background-color: var(--color-border);
+  }
+}