diff --git a/.changeset/sweet-chicken-stay.md b/.changeset/sweet-chicken-stay.md
new file mode 100644
index 0000000000..0a81d569c8
--- /dev/null
+++ b/.changeset/sweet-chicken-stay.md
@@ -0,0 +1,5 @@
+---
+"@liam-hq/ui": patch
+---
+
+- 💄 fix scrollbar styles so that ::-webkit-scrollbar pseudo classes take effect in Safari
diff --git a/frontend/packages/ui/src/styles/globals.css b/frontend/packages/ui/src/styles/globals.css
index 0fa741ed2a..9929cbb26a 100644
--- a/frontend/packages/ui/src/styles/globals.css
+++ b/frontend/packages/ui/src/styles/globals.css
@@ -7,27 +7,34 @@
 @import './syntax-highlight.css';
 
 /* Global scrollbar styling for all scrollable elements */
-* {
-  scrollbar-color: var(--scrollbar-thumb-background)
-    var(--scrollbar-track-background);
-  scrollbar-width: var(--scrollbar-width);
-}
 
-/* WebKit scrollbar styling */
-*::-webkit-scrollbar {
-  width: var(--scrollbar-webkit-width);
-  height: var(--scrollbar-webkit-height);
+/* For browsers that support `scrollbar-*` properties */
+@supports (scrollbar-color: auto) {
+  * {
+    scrollbar-color: var(--scrollbar-thumb-background)
+      var(--scrollbar-track-background);
+    scrollbar-width: var(--scrollbar-width);
+  }
 }
 
-*::-webkit-scrollbar-track {
-  background: var(--scrollbar-track-background);
-}
+/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+/* If a browser supports both, the `scrollbar-*` properties will take precedence */
+@supports selector(::-webkit-scrollbar) {
+  *::-webkit-scrollbar {
+    width: var(--scrollbar-webkit-width);
+    height: var(--scrollbar-webkit-height);
+  }
 
-*::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb-background);
-  border-radius: var(--scrollbar-webkit-thumb-border-radius);
-}
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbar-track-background);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb-background);
+    border-radius: var(--scrollbar-webkit-thumb-border-radius);
+  }
 
-*::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-background-hover);
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-background-hover);
+  }
 }