diff --git a/packages/bruno-app/src/providers/App/index.js b/packages/bruno-app/src/providers/App/index.js
index c54d53867..7664ae03e 100644
--- a/packages/bruno-app/src/providers/App/index.js
+++ b/packages/bruno-app/src/providers/App/index.js
@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { get } from 'lodash';
 import { useDispatch } from 'react-redux';
 import { refreshScreenWidth } from 'providers/ReduxStore/slices/app';
 import ConfirmAppClose from './ConfirmAppClose';
@@ -18,6 +19,13 @@ export const AppProvider = (props) => {
     dispatch(refreshScreenWidth());
   }, []);
 
+  useEffect(() => {
+    const platform = get(navigator, 'platform', '');
+    if(platform && platform.toLowerCase().indexOf('mac') > -1) {
+      document.body.classList.add('os-mac');
+    }
+  }, []);
+
   useEffect(() => {
     const handleResize = () => {
       dispatch(refreshScreenWidth());
diff --git a/packages/bruno-app/src/styles/globals.css b/packages/bruno-app/src/styles/globals.css
index 79c2a962c..8396c48b5 100644
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@@ -58,9 +58,12 @@ body::-webkit-scrollbar-thumb,
   border-radius: 5rem;
 }
 
-* {
-  /* This ensures that scrollbars are only visible when the user starts to scroll,
-  providing a cleaner and more minimalistic appearance. */
+/*
+ * Mac-specific scrollbar styling
+ * This ensures that scrollbars are only visible when the user starts to scroll,
+ * providing a cleaner and more minimalistic appearance.
+ */
+body.os-mac * {
   scrollbar-width: thin;
 }