diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index 8637b5d84..7ff7d9630 100644
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { ReactNode, Fragment } from "react";
+import { ReactNode, Fragment, useEffect } from "react";
 
 const Modal = ({
   open,
@@ -10,6 +10,18 @@ const Modal = ({
   open: boolean;
   onClose: () => void;
 }) => {
+  useEffect(() => {
+    if (typeof window !== undefined) {
+      const htmlElement = document.documentElement;
+
+      if (open) {
+        htmlElement.classList.add("dialog-open");
+      } else {
+        htmlElement.classList.remove("dialog-open");
+      }
+    }
+  }, [open]);
+
   return (
     <Transition appear show={open} as={Fragment}>
       <Dialog open={true} onClose={onClose} className="relative z-ztg-50">
diff --git a/styles/index.css b/styles/index.css
index 4f4401699..3e1035874 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -10,6 +10,13 @@ html {
   font-size: 100%;
   -webkit-tap-highlight-color: transparent;
 }
+
+/* prevents styles injected by headless ui */
+html.dialog-open {
+  overflow: visible !important;
+  padding-right: 0 !important;
+}
+
 /* hide number input arrows */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {