diff --git a/apps/frontend/src/index.tsx b/apps/frontend/src/index.tsx
index fa901ef2..c3431115 100644
--- a/apps/frontend/src/index.tsx
+++ b/apps/frontend/src/index.tsx
@@ -11,7 +11,7 @@ import 'virtual:uno.css';
 import '@unocss/reset/tailwind.css';
 import 'overlayscrollbars/overlayscrollbars.css';
 import '~styles/themes.scss';
-import '~styles/globals.css';
+import '~styles/globals.scss';
 import '~styles/highlightjs.css';
 
 import App from '~ui/pages/App';
diff --git a/apps/frontend/src/styles/globals.css b/apps/frontend/src/styles/globals.scss
similarity index 93%
rename from apps/frontend/src/styles/globals.css
rename to apps/frontend/src/styles/globals.scss
index 8df619f0..21a43bb3 100644
--- a/apps/frontend/src/styles/globals.css
+++ b/apps/frontend/src/styles/globals.scss
@@ -57,10 +57,10 @@ code {
 
 .os-scrollbar {
     --os-size: 10px;
-    --os-track-border-radius: theme(borderRadius.lg);
-    --os-handle-bg: rgba(255, 255, 255, 0.05);
-    --os-handle-bg-hover: rgba(255, 255, 255, 0.10);
-    --os-handle-bg-active: rgba(255, 255, 255, 0.07);
+    --os-track-border-radius: theme('borderRadius.lg');
+    --os-handle-bg: theme('colors.border/.15');
+    --os-handle-bg-hover: theme('colors.border/.25');
+    --os-handle-bg-active: theme('colors.border/.10');
     --os-handle-perpendicular-size-hover: 140%;
     --os-handle-perpendicular-size-active: 140%;
     --os-handle-interactive-area-offset: 1;