diff --git a/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx b/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
index 4041b4fd8..0a1750b07 100644
--- a/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { PropsWithChildren } from "react"
+import { PropsWithChildren, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
@@ -14,6 +14,7 @@ import styles from "./bottomSheet.module.css"
 
 export default function SummaryBottomSheet({ children }: PropsWithChildren) {
   const intl = useIntl()
+  const scrollY = useRef(0)
 
   const { isSummaryOpen, toggleSummaryOpen, totalPrice, isSubmittingDisabled } =
     useEnterDetailsStore((state) => ({
@@ -23,6 +24,27 @@ export default function SummaryBottomSheet({ children }: PropsWithChildren) {
       isSubmittingDisabled: state.isSubmittingDisabled,
     }))
 
+  useEffect(() => {
+    if (isSummaryOpen) {
+      scrollY.current = window.scrollY
+      document.body.style.position = "fixed"
+      document.body.style.top = `-${scrollY.current}px`
+    } else {
+      document.body.style.position = ""
+      document.body.style.top = ""
+      window.scrollTo({
+        top: scrollY.current,
+        left: 0,
+        behavior: "instant",
+      })
+    }
+
+    return () => {
+      document.body.style.position = ""
+      document.body.style.top = ""
+    }
+  }, [isSummaryOpen])
+
   return (
     <div className={styles.wrapper} data-open={isSummaryOpen}>
       <div className={styles.content}>{children}</div>