diff --git a/styles/src/static/static.styles.ts b/styles/src/static/static.styles.ts
index 54d7c472..37db84cb 100644
--- a/styles/src/static/static.styles.ts
+++ b/styles/src/static/static.styles.ts
@@ -1,13 +1,15 @@
 import { makeStaticStyles, tokens } from "@fluentui/react-components";
 
 const scrollbarColor = tokens.colorScrollbarOverlay;
+
+const isFirefox = window.navigator.userAgent.includes("Fire");
 export const useScrollStaticStyles = makeStaticStyles({
-  "@-moz-document url-prefix() {*": {
+  "*": {
     // Firefox
     // Scrollbar styling is amazingly complex. Read more here:
     // https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox
-    scrollbarWidth: "thin",
-    scrollbarColor: `${scrollbarColor} transparent`,
+    scrollbarWidth: isFirefox ? "thin" : "unset",
+    scrollbarColor: isFirefox ? `${scrollbarColor} transparent` : "auto",
   },
   "*::-webkit-scrollbar": {
     width: tokens.spacingHorizontalSNudge,