diff --git a/frontend/src/styles/core.scss b/frontend/src/styles/core.scss
index a7b63a408713..b232d09e3bb8 100644
--- a/frontend/src/styles/core.scss
+++ b/frontend/src/styles/core.scss
@@ -130,6 +130,10 @@ main {
   scrollbar-color: var(--sub-color) transparent;
 }
 
+.modal {
+  overscroll-behavior-y: none;
+}
+
 html {
   @extend .ffscroll;
   overflow-y: scroll;
diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index 76b0a81bcc9d..1c504cafc9e4 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -330,7 +330,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
     >
       <div
         class={cn(
-          "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
+          "modal pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto overscroll-y-none rounded-double bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
           props.modalClass,
         )}
         ref={modalRef}