diff --git a/src/App.css b/src/App.css
index 5775252a..38901a4b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,6 +4,10 @@ html {
     padding: 16px;
 }
 
+body.no-scroll {
+    overflow: hidden;
+}
+
 a {
     text-decoration: none;
 }
diff --git a/src/Portal.tsx b/src/Portal.tsx
index b61a47c5..f684fe11 100644
--- a/src/Portal.tsx
+++ b/src/Portal.tsx
@@ -27,11 +27,13 @@ const Portal = ({ children }) => {
     useEffect(() => {
         modalRoot.appendChild(modalDiv.current)
         return () => {
+            document.body.classList.remove('no-scroll')
             return modalRoot.removeChild(modalDiv.current)
         }
     }, [modalDiv, modalRoot])
 
     if (modalDiv.current) {
+        document.body.classList.add('no-scroll')
         return createPortal(children, modalDiv.current)
     }