diff --git a/resources/assets/scripts/components/core/Modal.vue b/resources/assets/scripts/components/core/Modal.vue
index 7582bb09a..eb1f5b283 100644
--- a/resources/assets/scripts/components/core/Modal.vue
+++ b/resources/assets/scripts/components/core/Modal.vue
@@ -1,11 +1,11 @@
 <template>
     <transition name="modal">
         <div class="modal-mask" v-show="isVisible" v-on:click="closeOnBackground && close()">
-            <div class="modal-container p-8" :class="{ 'full-screen': isFullScreen }" @click.stop>
+            <div class="modal-container top" :class="{ 'full-screen': isFullScreen }" @click.stop>
                 <div class="modal-close-icon" v-on:click="close" v-if="dismissable && showCloseIcon">
                     <Icon name="x" aria-label="Close modal" role="button"/>
                 </div>
-                <div class="modal-content">
+                <div class="modal-content p-8">
                     <slot/>
                 </div>
             </div>
diff --git a/resources/assets/styles/components/modal.css b/resources/assets/styles/components/modal.css
index f1ca603a9..4deb58cbf 100644
--- a/resources/assets/styles/components/modal.css
+++ b/resources/assets/styles/components/modal.css
@@ -6,6 +6,10 @@
   & > .modal-container {
     @apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
 
+    &.top {
+      margin-top: 15%;
+    }
+
     & > .modal-close-icon {
       @apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
       transition: opacity 150ms linear, transform 150ms ease-in;
@@ -20,7 +24,6 @@
     & > .modal-content {
       @apply .bg-white .rounded .shadow-md;
       transition: all 250ms ease;
-      margin-top: 15%;
     }
 
     /**
@@ -28,8 +31,10 @@
      * center the modal rather than putting it towards the top of the screen.
      */
     @screen smx {
-      margin-top: auto;
       width: 90%;
+      .top {
+        margin-top: auto;
+      }
     }
   }