diff --git a/js/index.js b/js/index.js
index 2d195ce8..653038f4 100644
--- a/js/index.js
+++ b/js/index.js
@@ -41,8 +41,18 @@ const app = new Vue({
     CcpoApproval,
     LocalDatetime
   },
+
   mounted: function() {
+    this.$on('modalOpen', isOpen => {
+      if (isOpen) {
+        document.body.className += ' modal-open'
+      } else {
+        document.body.className = document.body.className.replace(' modal-open', '')
+      }
+    })
+
     const modalOpen = document.querySelector("#modalOpen")
+
     if (modalOpen) {
       const modal = modalOpen.getAttribute("data-modal")
       this.openModal(modal)
diff --git a/js/mixins/modal.js b/js/mixins/modal.js
index 4f6af652..bb2bba05 100644
--- a/js/mixins/modal.js
+++ b/js/mixins/modal.js
@@ -2,9 +2,11 @@ export default {
   methods: {
     closeModal: function(name) {
       this.modals[name] = false
+      this.$emit('modalOpen', false)
     },
     openModal: function (name) {
       this.modals[name] = true
+      this.$emit('modalOpen', true)
     }
   },
   data: function() {
diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss
index 8cd32c8e..f4b2aa12 100644
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@@ -8,10 +8,6 @@
   > footer {
     margin-top: auto;
   }
-
-  &.modalOpen {
-    overflow-y: hidden;
-  }
 }
 
 .global-layout {
diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss
index 8893338b..90015844 100644
--- a/styles/components/_modal.scss
+++ b/styles/components/_modal.scss
@@ -1,5 +1,11 @@
 $fixed-footer-height: 5rem + ($gap * 4);
 
+body {
+  &.modal-open {
+    overflow-y: hidden;
+  }
+}
+
 .modal {
   position: fixed;
   z-index: 3;
@@ -11,6 +17,7 @@ $fixed-footer-height: 5rem + ($gap * 4);
 
   .modal__container {
     height: 100vh;
+    max-height: 100vh;
   }
 
   .modal__dialog {
@@ -36,7 +43,13 @@ $fixed-footer-height: 5rem + ($gap * 4);
       background-color: $color-white;
       padding: $gap * 2;
       width: 100%;
+
       overflow-y: auto;
+      -ms-overflow-style: scrollbar;
+
+      @include ie-only {
+        max-height: calc(100vh - #{$gap * 8});
+      }
 
       @include media($medium-screen) {
         padding: $gap * 4;
@@ -52,9 +65,19 @@ $fixed-footer-height: 5rem + ($gap * 4);
 
       .modal__dismiss {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: $gap;
+        right: $gap;
         width: 8rem;
+
+        @include media($medium-screen) {
+          top: $gap * 2;
+          right: $gap * 2;
+        }
+
+        @include media($large-screen) {
+          top: $gap * 4;
+          right: $gap * 4;
+        }
       }
 
       .block-list {
diff --git a/templates/base.html b/templates/base.html
index bbb49fe5..2c2b4141 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,7 +10,7 @@
   {% endassets %}
   <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
 </head>
-<body class="{% if g.modalOpen %} modalOpen{% endif %}">
+<body>
 
   <div id='app-root'>
 
diff --git a/templates/styleguide.html b/templates/styleguide.html
index 5aed52fb..15d7d8ce 100644
--- a/templates/styleguide.html
+++ b/templates/styleguide.html
@@ -7,6 +7,7 @@
 
 
 {% block content %}
+  <div id='modalOpen' data-modal='styleguideModal'></div>
 
   {% call Modal(name='styleguideModal', dismissable=True) %}
     <h1>A modal dialog</h1>
@@ -130,29 +131,6 @@
       </div>
 
       <form>
-        <textinput inline-template validation='dollars' value='1231231'>
-          <div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
-            <label for='basic-text-1'>
-              Dollars Text Input
-              <span class='usa-input__help'>
-                This is some help text to explain what this form field is and why you should fill it out.
-              </span>
-              <template v-if='showError'>{{ Icon('alert') }}</template>
-              <template v-if='showValid'>{{ Icon('ok') }}</template>
-            </label>
-            <masked-input
-              v-on:input='onInput'
-              v-on:change='onChange'
-              v-model='renderedValue'
-              id='basic-text-1'
-              type='text'
-              ref='input'
-              placeholder='$'
-              :guide="true"
-              :mask="mask">
-            </masked-input>
-          </div>
-        </textinput>
 
         <div class='usa-input usa-input--error'>
           <label for='basic-text-2'>
