diff --git a/packages/core/src/lib/components/image/hooks/image-viewer/index.ts b/packages/core/src/lib/components/image/hooks/image-viewer/index.ts
index 073a40d..d9a495b 100644
--- a/packages/core/src/lib/components/image/hooks/image-viewer/index.ts
+++ b/packages/core/src/lib/components/image/hooks/image-viewer/index.ts
@@ -1,3 +1,4 @@
 export * from "./use-cursor-visibility";
 export * from "./use-image-navigation";
 export * from "./use-image-scale";
+export * from "./use-prevent-scroll";
diff --git a/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx b/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
index 08527e8..2f21a01 100644
--- a/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
+++ b/packages/core/src/lib/components/image/hooks/image-viewer/use-cursor-visibility.tsx
@@ -1,11 +1,11 @@
 import { useState, useRef, useCallback } from "react";
 
-export const useCursorVisibility = (isScaleFocus: boolean) => {
-  const [isCursorVisible, setIsisCursorVisible] = useState(true);
+export const useCursorVisibility = () => {
+  const [isCursorVisible, setIsCursorVisible] = useState(true);
   const cursorTimeOutRef = useRef<NodeJS.Timeout>();
 
   const handleMoveMouse = useCallback(() => {
-    setIsisCursorVisible(true);
+    setIsCursorVisible(true);
 
     clearTimeout(cursorTimeOutRef.current);
 
@@ -13,12 +13,10 @@ export const useCursorVisibility = (isScaleFocus: boolean) => {
       clearTimeout(cursorTimeOutRef.current);
     }
 
-    if (!isScaleFocus) {
-      cursorTimeOutRef.current = setTimeout(() => {
-        setIsisCursorVisible(false);
-      }, 2000);
-    }
-  }, [isScaleFocus]);
+    cursorTimeOutRef.current = setTimeout(() => {
+      setIsCursorVisible(false);
+    }, 2000);
+  }, []);
 
   return {
     isCursorVisible,
diff --git a/packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx b/packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx
new file mode 100644
index 0000000..570e3f6
--- /dev/null
+++ b/packages/core/src/lib/components/image/hooks/image-viewer/use-prevent-scroll.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+
+import { getGapStyles, getGapWidth } from "../../lib";
+
+export const usePreventScroll = (isOpened: boolean) => {
+  useEffect(() => {
+    const styleElement = document.createElement("style");
+
+    if (isOpened) {
+      document.body.setAttribute("data-scroll-locked", "true");
+      const gap = getGapWidth();
+
+      const scrollLockedStyles = getGapStyles(gap);
+      styleElement.textContent = scrollLockedStyles;
+      document.head.appendChild(styleElement);
+    }
+
+    return () => {
+      document.body.removeAttribute("data-scroll-locked");
+      if (styleElement.parentNode) {
+        styleElement.parentNode.removeChild(styleElement);
+      }
+    };
+  }, [isOpened]);
+};
diff --git a/packages/core/src/lib/components/image/image-viewer.tsx b/packages/core/src/lib/components/image/image-viewer.tsx
index a55d54b..18edcf3 100644
--- a/packages/core/src/lib/components/image/image-viewer.tsx
+++ b/packages/core/src/lib/components/image/image-viewer.tsx
@@ -5,6 +5,7 @@ import {
   useCursorVisibility,
   useImageNavigation,
   useImageScale,
+  usePreventScroll,
 } from "./hooks/image-viewer";
 
 import { getCursorStyle } from "./lib";
@@ -51,8 +52,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     handleScaleDown,
   } = useImageScale();
 
-  const { isCursorVisible, handleMoveMouse } =
-    useCursorVisibility(isScaleFocus);
+  const { isCursorVisible, handleMoveMouse } = useCursorVisibility();
 
   useEffect(() => {
     if (currentImageIndex || isOpened) {
@@ -106,6 +106,8 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
     [urls, setCurrentImageIndex, setIsOpened],
   );
 
+  usePreventScroll(isOpened);
+
   return (
     <>
       <button
@@ -120,7 +122,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
         {isOpened && (
           <motion.div
             role="dialog"
-            className={`notion-image-viewer-container ${isCursorVisible ? "notion-visible-cursor" : "notion-hide-cursor"}`}
+            className={`notion-image-viewer-container`}
             aria-modal="true"
             onMouseMove={handleMoveMouse}
             initial={{ opacity: 0 }}
@@ -131,22 +133,25 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
             <button
               className="notion-image-viewer-overlay"
               onClick={() => setIsOpened(false)}
+              style={{
+                cursor: isCursorVisible ? "default" : "none",
+              }}
             />
             <motion.img
               key={urls[currentImageIndex]}
               ref={imageRef}
-              className={`notion-image-viewer-container-image ${isCursorVisible ? "notion-visible-cursor" : "notion-hide-cursor"}`}
+              className={`notion-image-viewer-container-image`}
               src={urls[currentImageIndex]}
               alt="posting image"
               style={{
                 transform: `scale(${scale})`,
                 transformOrigin: `${scaleOriginX * 100}% ${scaleOriginY * 100}%`,
-                cursor: getCursorStyle(scale),
+                cursor: isCursorVisible ? getCursorStyle(scale) : "none",
               }}
               onClick={handleZoomInOut}
             />
 
-            {isCursorVisible && (
+            {(isCursorVisible || isScaleFocus) && (
               <ImageViewerTools
                 url={urls[currentImageIndex]}
                 currentImageIndex={currentImageIndex}
diff --git a/packages/core/src/lib/components/image/lib/get-gap.ts b/packages/core/src/lib/components/image/lib/get-gap.ts
new file mode 100644
index 0000000..bffbb74
--- /dev/null
+++ b/packages/core/src/lib/components/image/lib/get-gap.ts
@@ -0,0 +1,56 @@
+interface GapOffset {
+  left: number;
+  top: number;
+  right: number;
+  gap: number;
+}
+
+export const zeroGap = {
+  left: 0,
+  top: 0,
+  right: 0,
+  gap: 0,
+};
+
+const parse = (x: string | null) => parseInt(x || "", 10) || 0;
+
+export const getOffset = (): number[] => {
+  const cs = window.getComputedStyle(document.body);
+
+  const left = cs["marginLeft"];
+  const top = cs["marginTop"];
+  const right = cs["marginRight"];
+
+  return [parse(left), parse(top), parse(right)];
+};
+
+export const getGapWidth = (): GapOffset => {
+  if (typeof window === "undefined") {
+    return zeroGap;
+  }
+
+  const offsets = getOffset();
+  const documentWidth = document.documentElement.clientWidth;
+  const windowWidth = window.innerWidth;
+
+  return {
+    left: offsets[0],
+    top: offsets[1],
+    right: offsets[2],
+    gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]),
+  };
+};
+
+export const getGapStyles = ({ left, top, right, gap }: GapOffset) => `
+  body[data-scroll-locked] {
+    padding-left: ${left}px;
+    padding-top: ${top}px;
+    padding-right: ${right}px;
+    margin-right: ${gap}px !important;
+    overflow: hidden !important;
+    overscroll-behavior: contain;
+    margin-left: 0;
+    margin-top: 0;
+    position: relative !important;
+    }
+`;
diff --git a/packages/core/src/lib/components/image/lib/index.ts b/packages/core/src/lib/components/image/lib/index.ts
index 3ae2488..9a1861d 100644
--- a/packages/core/src/lib/components/image/lib/index.ts
+++ b/packages/core/src/lib/components/image/lib/index.ts
@@ -1,4 +1,5 @@
 export * from "./download-image-file";
+export * from "./get-gap";
 export * from "./get-image-url-or-null";
 export * from "./get-cursor-style";
 export * from "./scale-round";
diff --git a/packages/core/src/lib/index.css b/packages/core/src/lib/index.css
index 99b40fa..d1c95b5 100644
--- a/packages/core/src/lib/index.css
+++ b/packages/core/src/lib/index.css
@@ -722,298 +722,6 @@
   border-top: 1px solid rgba(223, 223, 222, 1);
 }
 
-/* image */
-.notion-image img {
-  width: 100%;
-  object-fit: contain;
-  pointer-events: auto;
-  cursor: default;
-}
-
-.notion-image:not(:last-child) {
-  margin-bottom: 4px;
-}
-
-.notion-image:not(:first-child) {
-  margin-top: 4px;
-}
-
-.notion-image-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.notion-image img {
-  width: 100%;
-  object-fit: contain;
-  pointer-events: auto;
-  cursor: default;
-}
-
-.notion-image:not(:last-child) {
-  margin-bottom: 4px;
-}
-
-.notion-image:not(:first-child) {
-  margin-top: 4px;
-}
-
-.notion-image-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.notion-image-viewer-tools button {
-  background-color: #160b04;
-  padding: 6px;
-  width: 32px;
-  height: 32px;
-  border: 0;
-  margin: 0;
-  user-select: none;
-}
-
-.notion-image-viewer-tools button.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-.notion-image-viewer-tools button:hover {
-  background-color: rgba(44, 44, 44, 0.81);
-}
-
-.notion-image-viewer-tools button:disabled {
-  background-color: rgba(0, 0, 0, 0.618);
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: default;
-}
-
-.notion-image-viewer-tools > nav {
-  display: flex;
-  margin-right: 12px;
-}
-
-.notion-image-viewer-tools > nav > button:first-child {
-  width: 36px;
-  padding-left: 8px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.notion-image-viewer-tools > nav > button:last-child {
-  width: 36px;
-  padding-right: 8px;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.notion-image-viewer-controls {
-  margin-right: 25px;
-}
-
-.notion-image-viewer-tools > .notion-image-viewer-scaler > button:first-child {
-  width: 36px;
-  padding-left: 8px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler {
-  display: flex;
-  font-size: 14px;
-}
-
-.notion-image-viewer-scaler-input {
-  background-color: rgba(0, 0, 0, 0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #888888;
-  width: 60px;
-}
-
-.notion-image-viewer-scaler-input:hover {
-  background-color: rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-}
-
-.notion-image-viewer-scaler button {
-  width: 60;
-  padding: 5;
-}
-
-.notion-image-viewer-scaler input {
-  background-color: transparent;
-  border: 0;
-  font-size: inherit;
-  color: inherit;
-  padding: 0px;
-  padding-top: 1px;
-  overflow: hidden;
-  line-height: 1;
-  text-align: center;
-}
-
-.notion-image-viewer-scaler-input-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px !important;
-  color: #888888;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler input:focus {
-  color: white;
-  outline: 1px solid #008080;
-  width: 28px;
-}
-
-/* Chrome, Safari, Edge, Opera */
-.notion input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-.notion input[type="number"] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler > button:first-of-type {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.notion-image-viewer-tools .notion-image-viewer-scaler > button:last-of-type {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.notion-image-viewer-tools button > img {
-  width: 100%;
-  height: 100%;
-}
-
-.notion-image-viewer-tools button.notion-image-viewer-tools-download {
-  border-left: solid 1px gray;
-  border-right: solid 1px gray;
-  margin: 0px 1px;
-}
-
-.notion-image-viewer-tools button.notion-image-viewer-tools-close {
-  width: 36px;
-  padding-right: 8px;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.notion-image-viewer-tools button:not(:disabled) {
-  cursor: pointer;
-}
-
-.notion-image-viewer-opener {
-  cursor: pointer;
-}
-
-.notion-image-viewer-container {
-  display: flex;
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  z-index: 999;
-  justify-content: center;
-  align-items: center;
-  padding-top: 32px;
-  padding-bottom: 32px;
-  flex-direction: column;
-}
-
-@media screen and (min-width: 768px) {
-  .notion-image-viewer-container {
-    padding-left: 32px;
-    padding-right: 32px;
-  }
-}
-
-.notion-image-viewer-overlay {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  background-color: black;
-  opacity: 0.8;
-  cursor: default;
-}
-
-.notion-image-viewer-container-image {
-  max-width: fit-content;
-  max-height: 100%;
-  object-fit: contain;
-  position: relative;
-  z-index: 0;
-  transform-origin: 0.4s ease-in-out;
-}
-
-.notion-image-viewer-tools {
-  display: flex;
-  position: absolute;
-  bottom: 32px;
-  left: 50%;
-  transform: translateX(-50%);
-  transition: 2s all ease-in-out;
-}
-
-.notion-image-viewer-tooltip-container {
-  position: relative;
-  display: inline-block;
-}
-
-.notion-image-viewer-tooltip {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: -35px;
-  left: -35%;
-  transform: translateX(-50%);
-  background-color: rgb(38, 38, 38);
-  color: white;
-  padding: 8px;
-  border-radius: 4px;
-  font-size: 15px;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.notion-image-viewer-tooltip p:last-child {
-  margin-left: 5px;
-  color: #d3d3d3;
-  font-size: 13px;
-}
-
-.notion .notion-image button {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  text-align: left;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
 .notion-video {
   margin: 4px 0px;
 }
@@ -1317,3 +1025,283 @@ input::-webkit-inner-spin-button {
   line-height: 20px;
   caret-color: rgb(55, 53, 47);
 }
+
+/* image */
+.notion-viewer-opener > img {
+  width: 100%;
+  object-fit: contain;
+  pointer-events: auto;
+  cursor: default;
+}
+
+.notion-image:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.notion-image:not(:first-child) {
+  margin-top: 4px;
+}
+
+.notion-image-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.notion-image:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.notion-image:not(:first-child) {
+  margin-top: 4px;
+}
+
+.notion-image-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.notion-viewer-opener,
+.notion-image-viewer-overlay {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  text-align: left;
+  color: inherit;
+  font: inherit;
+  line-height: normal;
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.notion-image-viewer-tools button {
+  background-color: #060606c4;
+  padding: 6px;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  margin: 0;
+  user-select: none;
+  cursor: pointer;
+}
+
+.notion-image-viewer-tools button > img {
+  cursor: pointer;
+}
+
+.notion-image-viewer-tools button:disabled {
+  pointer-events: none;
+  cursor: default;
+  background-color: #060606a1;
+}
+
+.notion-image-viewer-tools button:hover {
+  background-color: #060606a1;
+}
+
+.notion-image-viewer-tools > .notion-image-viewer-controls {
+  display: flex;
+  margin-right: 25px;
+}
+
+.notion-image-viewer-tools
+  > .notion-image-viewer-controls
+  > .notion-image-viewer-tooltip-container:first-child
+  button,
+.notion-image-viewer-tools > .notion-image-viewer-scaler button:first-child {
+  width: 36px;
+  padding-left: 8px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.notion-image-viewer-tools
+  > .notion-image-viewer-controls
+  > .notion-image-viewer-tooltip-container:last-child
+  button,
+.notion-image-viewer-tools > nav > button:last-child {
+  width: 36px;
+  padding-right: 8px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.notion-image-viewer-tools .notion-image-viewer-scaler {
+  display: flex;
+  font-size: 14px;
+}
+
+.notion-image-viewer-scaler-input {
+  background-color: #060606c4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888888;
+  width: 60px;
+  height: 32px;
+}
+
+.notion-image-viewer-scaler-input:hover {
+  background-color: #060606a1;
+  display: flex;
+  align-items: center;
+}
+
+.notion-image-viewer-scaler button {
+  width: 60;
+  padding: 5;
+}
+
+.notion-image-viewer-scaler input {
+  background-color: transparent;
+  border: 0;
+  font-size: inherit;
+  color: inherit;
+  padding: 0px;
+  padding-top: 1px;
+  overflow: hidden;
+  line-height: 1;
+  text-align: center;
+}
+
+.notion-image-viewer-scaler-input-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px !important;
+  color: #888888;
+}
+
+.notion-image-viewer-tools .notion-image-viewer-scaler input:focus {
+  color: white;
+  outline: 1px solid #2d75a0;
+  width: 28px;
+}
+/* Chrome, Safari, Edge, Opera */
+.notion-image-viewer-tools
+  .notion-image-viewer-scaler
+  input::-webkit-outer-spin-button,
+.notion-image-viewer-tools
+  .notion-image-viewer-scaler
+  input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+/* Firefox */
+.notion-image-viewer-tools .notion-image-viewer-scaler input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.notion-image-viewer-tools .notion-image-viewer-scaler > button:first-of-type {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.notion-image-viewer-tools .notion-image-viewer-scaler > button:last-of-type {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.notion-image-viewer-tools button > img {
+  width: 100%;
+  height: 100%;
+}
+.notion-image-viewer-tools button.notion-image-viewer-tools-download {
+  border-left: solid 1px white;
+  border-right: solid 1px white;
+  opacity: 0.9;
+}
+.notion-image-viewer-tools button.notion-image-viewer-tools-close {
+  width: 36px;
+  padding-right: 8px;
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.notion-image-viewer-opener {
+  cursor: pointer;
+}
+
+.notion-image-viewer-container {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  z-index: 999;
+  justify-content: center;
+  align-items: center;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+}
+
+@media screen and (min-width: 768px) {
+  .notion-image-viewer-container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+}
+
+.notion-image-viewer-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: black;
+  opacity: 0.9;
+  cursor: default;
+  overscroll-behavior: contain;
+  overflow: hidden;
+  height: 100vh;
+}
+
+.notion-image-viewer-container-image {
+  max-width: fit-content;
+  max-height: 100%;
+  object-fit: contain;
+  position: relative;
+  z-index: 0;
+  transform-origin: 0.4s ease-in-out;
+}
+
+.notion-image-viewer-tools {
+  display: flex;
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: 2s all ease-in-out;
+}
+
+.notion-image-viewer-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.notion-image-viewer-tooltip {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -35px;
+  left: -35%;
+  transform: translateX(-50%);
+  background-color: rgb(38, 38, 38);
+  color: white;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.notion-image-viewer-tooltip p:last-child {
+  margin-left: 5px;
+  color: #d3d3d3;
+  font-size: 13px;
+}
diff --git a/packages/story/.gitignore b/packages/story/.gitignore
index bc6d306..657e206 100644
--- a/packages/story/.gitignore
+++ b/packages/story/.gitignore
@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-*storybook.log
\ No newline at end of file
+*storybook.log
+
+.cache
\ No newline at end of file