diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 0585e440..1fb03d60 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -4,59 +4,48 @@
             <slot />
         </div>
 
-        <div :class="['overlay', { show }]" @click="close">
-            <div
-                :class="['modal-content', { large, confirm, padded }]"
-                @click.stop
-            >
+        <div :class="['overlay', { show, confirm }]" @click="close">
+            <div :class="['modal-content', { large, confirm }]" @click.stop>
                 <header :class="{ fixed: !title }">
                     <h2 v-if="title">{{ title }}</h2>
 
-                    <button :class="closeButtonClass" @click="close">
+                    <button class="secondary small" @click="close">
                         <i class="fas fa-times" />
                     </button>
                 </header>
 
-                <section>
-                    <p v-if="message">{{ message }}</p>
+                <main :class="{ padded }">
+                    <span v-if="confirm && message">{{ message }}</span>
+                    <slot name="content" v-else-if="show" />
+                </main>
 
-                    <slot name="content" v-if="show" />
+                <footer>
+                    <button
+                        v-if="actionText && confirm"
+                        :class="actionButtonClass"
+                        :disabled="actionDisabled"
+                        @click="handleAction"
+                    >
+                        {{ actionText }}
+                    </button>
 
-                    <div :class="{ actions: actionText }">
-                        <button class="small info" @click="close" v-if="showClose">
-                            {{ closeText }}
-                        </button>
+                    <slot v-else name="footer" />
+                </footer>
 
-                        <button
-                            v-if="actionText"
-                            class="small primary"
-                            :disabled="actionDisabled"
-                            @click="handleAction"
-                        >
-                            {{ actionText }}
-                        </button>
-                    </div>
-                </section>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-
 export default {
     props: {
         actionText: String,
         title: String,
         message: String,
-        showClose: {
-            type: Boolean,
-            default: false,
-        },
-        closeText: {
+        actionButtonClass: {
             type: String,
-            default: 'Cancel',
+            default: 'primary',
         },
         actionDisabled: {
             type: Boolean,
@@ -74,20 +63,9 @@ export default {
     },
 
     computed: {
-        ...mapState(['galleryOpen']),
-
         routeName() {
             return this.$route.name;
         },
-
-        closeButtonClass() {
-            return [
-                { fixed: !this.title },
-                'small',
-                'secondary',
-                'close-button',
-            ];
-        },
     },
 
     watch: {
@@ -116,111 +94,116 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import "~styles/styles";
+    @import "~styles/styles";
 
-.overlay {
-    background: rgba(0, 0, 0, 0.6);
-    cursor: pointer;
-    height: 100%;
-    left: 0;
-    margin: 0;
-    opacity: .1;
-    position: fixed;
-    top: 0;
-    transition: all 100ms linear;
-    visibility: hidden;
-    width: 100%;
-    z-index: 1;
-
-    &.show {
-        visibility: visible;
-        transition: all 100ms linear;
-        opacity: 1;
-    }
-}
-
-.modal-content {
-    position: relative;
-    background: var(--modal-background);
-    color: var(--modal-text-color);
-    height: auto;
-    width: 500px;
-    max-height: calc(85vh);
-    max-width: 100%;
-    overflow: auto;
-    margin: $gp * 2 auto $gp;
-    padding: 0;
-    border-radius: $border-radius;
-    cursor: default;
-
-    &.large {
-        width: 780px;
-        max-width: 100% !important;
-
-        @media($small) {
-            max-width: 90vw;
-            max-height: 100vh;
-        }
-    }
-
-    &.padded {
-        > section {
-            padding: 0 $gp $gp;
-        }
-    }
-
-    &.confirm {
-        @media($small) {
-            height: auto;
-            border-radius: $border-radius;
-        }
-    }
-
-    @media($small) {
-        border-radius: 0;
+    .overlay {
+        background: rgba(0, 0, 0, 0.8);
+        cursor: pointer;
+        height: 100%;
+        left: 0;
         margin: 0;
-        height: auto;
-        max-height: 100vh;
-        height: 100vh;
-        width: 100vw;
-    }
-}
-
-header {
-    display: flex;
-    top: 0;
-    padding: $gp / 2 $gp;
-    z-index: 1;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 30px;
-
-    @media($small) {
-        padding: $gp * 2 $gp $gp;
-        right: 0;
-        margin-top: $gp;
-    }
-
-    &.fixed {
+        opacity: .1;
         position: fixed;
+        top: 0;
+        transition: all 100ms linear;
+        visibility: hidden;
+        width: 100%;
+        z-index: 1;
+
+        &.show {
+            visibility: visible;
+            transition: all 100ms linear;
+            opacity: 1;
+        }
+
+        &.confirm {
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+
+            @media($small) {
+                align-items: flex-end;
+            }
+        }
+    }
+
+    .modal-content {
+        background: var(--modal-background);
+        color: var(--modal-text-color);
+        height: auto;
+        width: 500px;
+        max-height: calc(85vh);
+        max-width: 100%;
+        overflow: auto;
+        margin: $gp * 2 auto $gp;
+        padding: 0;
+        border-radius: $border-radius;
+        cursor: default;
+        display: flex;
+        flex-direction: column;
+
+        @media($small) {
+            border-radius: 0;
+            margin: 0;
+            height: 100%;
+            max-height: 100vh;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        &.large {
+            width: 780px;
+            max-width: 100% !important;
+
+            @media($small) {
+                max-width: 90vw;
+                max-height: 100vh;
+            }
+        }
+
+        &.confirm {
+            height: auto;
+            max-width: calc(100vw - #{$gp * 4});
+            border-radius: $border-radius;
+
+            @media($small) {
+                margin-bottom: $gp * 2;
+            }
+        }
+    }
+
+    header {
+        display: flex;
         padding: $gp;
-        background-color: transparent !important;
-        margin: 0;
-        z-index: 99999999;
+        z-index: 1;
+        align-items: center;
+        justify-content: space-between;
+
+        @media($small) {
+            right: 0;
+        }
+
+        &.fixed {
+            position: fixed;
+            padding: $gp;
+            background-color: transparent !important;
+            margin: 0;
+            z-index: 99999999;
+        }
     }
-}
 
-.close-button {
-    display: none;
+    main {
+        &.padded {
+            padding: 0 $gp;
+        }
 
-    @media($small) {
-        display: block;
+        flex-grow: 1;
+        max-height: calc(100% - 144px);
+        overflow: auto;
     }
-}
 
-.actions {
-    display: grid;
-    grid-gap: $gp;
-    grid-template-columns: auto auto;
-}
+    footer {
+        padding: $gp;
+        margin-top: auto;
+    }
 </style>