diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/(modules)/layout.tsx b/src/app/(modules)/layout.tsx
index 4b5b645..08a24cb 100644
--- a/src/app/(modules)/layout.tsx
+++ b/src/app/(modules)/layout.tsx
@@ -16,7 +16,7 @@ const ModulesLayout = ({
       <SidebarProvider>
         <AppSidebar />
         <main className="flex flex-1 flex-col w-full h-screen overflow-hidden">
-          <div className="flex-1 overflow-auto [scrollbar-gutter:stable]">
+          <div className="scroll-stable flex-1 overflow-auto">
             <div className="max-w-380 mx-auto w-full flex flex-col min-h-full">
               <div className="flex gap-3 items-center sticky top-0 bg-background z-50 py-3 px-6 border-b border-border">
                 <SidebarTrigger />
diff --git a/src/app/globals.css b/src/app/globals.css
index 1fe6995..de68622 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -122,16 +122,12 @@
 }
 
 @layer base {
-  html {
-    scrollbar-gutter: stable;
-  }
-
   html:has(body[data-scroll-locked]) {
     scrollbar-gutter: auto;
   }
 
   @supports not (scrollbar-gutter: stable) {
-    html {
+    .scroll-stable {
       overflow-y: scroll;
     }
   }
@@ -143,4 +139,8 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  .scroll-stable {
+    scrollbar-gutter: stable;
+  }
 }