diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss
index 65db3ea..9c7294c 100644
--- a/resources/assets/sass/dashboard.scss
+++ b/resources/assets/sass/dashboard.scss
@@ -999,21 +999,20 @@ form {
     top: 0px;
     left: 0px;
     visibility: hidden;
-    display: table;
+    display: flex;
     width: 100%;
     height: 100%;
+    padding: $grid-gutter-width;
+    justify-content: center;
+    align-items: center;
     background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
     opacity: 0;
     transition: opacity 250ms;
 
-    .modal-container {
-        display: table-cell;
-        vertical-align: middle;
-        text-align: center;
-
-        .card {
-            margin: 0px;
-        }
+    .card {
+        position: relative;
+        margin: 0px;
+        max-width: 500px;
 
         .btn {
             margin: 20px 15px;
@@ -1025,19 +1024,23 @@ form {
         }
     }
 
-    &#alert-modal {
-        .modal-container {
-            .card {
-                position: relative;
+    &.alert .card {
+        .message {
+            min-height: 50px;
+            padding: 15px 20px;
+            text-align: left;
+
+            @include media-breakpoint-up(md) {
+                padding-right: 85px;
+            }
+        }
+
+        .btn {
+            @include media-breakpoint-down(sm) {
+                margin-top: 0px;
             }
 
-            .message {
-                min-height: 50px;
-                padding: 15px 75px 15px 20px;
-                text-align: left;
-            }
-
-            .btn {
+            @include media-breakpoint-up(md) {
                 position: absolute;
                 top: 50%;
                 right: 0px;
diff --git a/resources/views/dashboard/core.blade.php b/resources/views/dashboard/core.blade.php
index bdaebfc..c489f24 100644
--- a/resources/views/dashboard/core.blade.php
+++ b/resources/views/dashboard/core.blade.php
@@ -21,35 +21,19 @@
         </div>
     </div>
 
-    <div id="confirmation-modal" class="modal">
-        <div class="modal-container">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
-                        <div class="card">
-                            <div class="card-header"></div>
-                            <button type="button" class="cancel-button btn btn-primary">Cancel</button>
-                            <button type="button" class="confirm-button btn btn-danger">Confirm</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <div id="confirmation-modal" class="modal confirmation">
+        <div class="card">
+            <div class="card-header"></div>
+            <button type="button" class="cancel-button btn btn-primary">Cancel</button>
+            <button type="button" class="confirm-button btn btn-danger">Confirm</button>
         </div>
     </div>
 
-    <div id="alert-modal" class="modal">
-        <div class="modal-container">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-md-6 offset-md-3 col-lg-4 offset-lg-4">
-                        <div class="card">
-                            <div class="card-header">ALERT</div>
-                            <div class="message"></div>
-                            <button type="button" class="accept-button btn btn-primary">OK</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <div id="alert-modal" class="modal alert">
+        <div class="card">
+            <div class="card-header">ALERT</div>
+            <div class="message"></div>
+            <button type="button" class="accept-button btn btn-primary">OK</button>
         </div>
     </div>
 @endsection