diff --git a/components/common/SidebarLayout/SidebarLayout.module.css b/components/common/SidebarLayout/SidebarLayout.module.css
index 0fb93231d..a8940dc52 100644
--- a/components/common/SidebarLayout/SidebarLayout.module.css
+++ b/components/common/SidebarLayout/SidebarLayout.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply relative h-full flex flex-col min-h-full w-full overflow-y-auto;
+  @apply relative h-full flex flex-col;
 }
 
 .header {
@@ -9,12 +9,12 @@
   min-height: 66px;
 }
 
+.container {
+  @apply flex flex-col flex-1 box-border;
+}
+
 @screen lg {
   .header {
     min-height: 74px;
   }
 }
-
-.container {
-  @apply flex flex-col flex-1 box-border;
-}
diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css
index 02fa99c0a..f6a49387f 100644
--- a/components/ui/Sidebar/Sidebar.module.css
+++ b/components/ui/Sidebar/Sidebar.module.css
@@ -1,14 +1,14 @@
 .root {
-  @apply fixed inset-0 overflow-hidden h-full z-50 box-border;
+  @apply fixed inset-0 h-full z-50 box-border;
 }
 
 .sidebar {
-  @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto;
-  -webkit-overflow-scrolling: touch;
+  @apply h-full flex flex-col text-base bg-accent-0 shadow-xl overflow-y-auto overflow-x-hidden;
+  -webkit-overflow-scrolling: touch !important;
 }
 
 .backdrop {
-  @apply absolute inset-0 bg-black bg-opacity-40 transition transition-opacity duration-100 ease-linear;
+  @apply absolute inset-0 bg-black bg-opacity-40 duration-100 ease-linear;
   backdrop-filter: blur(0.8px);
   -webkit-backdrop-filter: blur(0.8px);
 }
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 11130a0f4..ce0eeefe2 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -28,12 +28,14 @@ const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
   }, [])
 
   return (
-    <div className={cn(s.root)} ref={ref}>
+    <div className={cn(s.root)}>
       <div className="absolute inset-0 overflow-hidden">
         <div className={s.backdrop} onClick={onClose} />
         <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
           <div className="h-full w-full md:w-screen md:max-w-md">
-            <div className={s.sidebar}>{children}</div>
+            <div className={s.sidebar} ref={ref}>
+              {children}
+            </div>
           </div>
         </section>
       </div>
diff --git a/package.json b/package.json
index 23c47ca0a..735ff8074 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@react-spring/web": "^9.2.1",
     "@vercel/fetch": "^6.1.0",
     "autoprefixer": "^10.2.6",
-    "body-scroll-lock": "2.6.3",
+    "body-scroll-lock": "^3.1.5",
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",
diff --git a/yarn.lock b/yarn.lock
index 947bb4569..e065a3292 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1612,10 +1612,10 @@ bn.js@^5.0.0, bn.js@^5.1.1:
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
   integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
 
-body-scroll-lock@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.3.tgz#2b9311ef3120696d8ad5c30503f684803ade1606"
-  integrity sha512-yQ2VWJasZSWMawwi4bLJ9akbMRTpnS2tZWDEFuOiihwCdl+qNovuUwisnBKIdMk+99wG9FlqW6uZ9+GjKn8ARA==
+body-scroll-lock@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
 bowser@^2.11.0:
   version "2.11.0"