diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss
index 46dd2246a..cb05c592e 100644
--- a/src/components/modal/addtostudio/modal.scss
+++ b/src/components/modal/addtostudio/modal.scss
@@ -6,6 +6,14 @@ $medium: "only screen and (min-width : #{$mobile}+1) and (max-width : #{$tablet}
 $small-height: "only screen and (max-height : #{$mobile})";
 $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
 
+.mod-addToStudio {
+    overflow: hidden;
+
+    @media #{$small}, #{$small-height} {
+        overflow: hidden;
+    }
+}
+
 .addToStudio-modal-header {
     box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
     background-color: $ui-blue;
diff --git a/src/components/modal/base/modal.jsx b/src/components/modal/base/modal.jsx
index 151b0443b..3422cf52d 100644
--- a/src/components/modal/base/modal.jsx
+++ b/src/components/modal/base/modal.jsx
@@ -26,6 +26,7 @@ class Modal extends React.Component {
         return (
             <ReactModal
                 appElement={document.getElementById('app')}
+                bodyOpenClassName={this.props.useStandardSizes ? classNames('overflow-hidden') : null}
                 className={{
                     base: classNames('modal-content', this.props.className, {
                         'modal-sizes': this.props.useStandardSizes
diff --git a/src/components/modal/base/modal.scss b/src/components/modal/base/modal.scss
index 793d0e06a..6d35da521 100644
--- a/src/components/modal/base/modal.scss
+++ b/src/components/modal/base/modal.scss
@@ -7,6 +7,12 @@ $big: "only screen and (min-width : #{$tablet}) and (max-width : #{$desktop}-1)"
 $small-height: "only screen and (max-height : #{$mobile})";
 $medium-height: "only screen and (min-height : #{$mobile} + 1) and (max-height : #{$tablet} - 1)";
 
+.overflow-hidden {
+    /* to avoid double scroll bars this
+    gets added to body while modal is open */
+    overflow: hidden;
+}
+
 .modal-content {
     position: relative;
     margin: 3.75rem auto;
@@ -130,7 +136,6 @@ row to appear to contain overflow. */
     outline: none;
     padding: 0;
     max-width: 36.25rem; /* 580px; */
-    overflow: hidden;
     user-select: none;
 
     @media #{$medium}, #{$medium-height} {
@@ -140,7 +145,6 @@ row to appear to contain overflow. */
     @media #{$small}, #{$small-height} {
         margin: 0 auto;
         width: auto;
-        overflow: hidden scroll;
     }
 
     .modal-header {