diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index 391898b1110bff5a7271b9f5697621dc86b36e43..a825463b3e49cedcab8c31ff6211cf8451ef4c2f 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -127,7 +127,7 @@ export function SettingsPageContainer({
   className?: string;
 }) {
   return (
-    <div className="flex-1 overflow-y-auto p-6 sm:p-8">
+    <div className="scrollbar-gutter-both flex-1 overflow-y-auto p-6 sm:p-8">
       <div className={cn("mx-auto flex w-full max-w-3xl flex-col gap-8", className)}>
         {children}
       </div>
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index f9a363867516ae41988223f5f39b4fd7f405e036..d6f178a1f54a0595135b75347908a9c8898d4c2f 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -29,7 +29,7 @@ function ScrollArea({
           chainVerticalScroll && "overscroll-y-auto",
           scrollFade &&
             "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
-          scrollbarGutter && "[scrollbar-gutter:stable]",
+          scrollbarGutter && "scrollbar-gutter-stable",
           hideScrollbars &&
             "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         )}