diff --git a/src/common/ModalDialog/ModalDialog.js b/src/common/ModalDialog/ModalDialog.js
index ddfd890cf..2bd120acd 100644
--- a/src/common/ModalDialog/ModalDialog.js
+++ b/src/common/ModalDialog/ModalDialog.js
@@ -35,29 +35,31 @@ const ModalDialog = ({ className, children, title, buttons, onClose }) => {
                 <div className={styles['modal-dialog-content']}>
                     {children}
                 </div>
-                <div className={styles['modal-dialog-buttons']}>
-                    {
-                        Array.isArray(buttons) && buttons.length > 0 ?
-                            buttons.map((button, key) => (
-                                <Button key={key} className={classnames(button.className, styles['action-button'])} {...button.props}>
-                                    {
-                                        typeof button.icon === 'string' && button.icon.length > 0 ?
-                                            <Icon className={styles['icon']} icon={button.icon} />
-                                            :
-                                            null
-                                    }
-                                    {
-                                        typeof button.label === 'string' && button.label.length > 0 ?
-                                            button.label
-                                            :
-                                            null
-                                    }
-                                </Button>
-                            ))
-                            :
-                            null
-                    }
-                </div>
+                {
+                    Array.isArray(buttons) && buttons.length > 0 ?
+                        <div className={styles['modal-dialog-buttons']}>
+                            {
+                                buttons.map((button, key) => (
+                                    <Button key={key} className={classnames(button.className, styles['action-button'])} {...button.props}>
+                                        {
+                                            typeof button.icon === 'string' && button.icon.length > 0 ?
+                                                <Icon className={styles['icon']} icon={button.icon} />
+                                                :
+                                                null
+                                        }
+                                        {
+                                            typeof button.label === 'string' && button.label.length > 0 ?
+                                                button.label
+                                                :
+                                                null
+                                        }
+                                    </Button>
+                                ))
+                            }
+                        </div>
+                        :
+                        null
+                }
             </div>
         </Modal>
     )
diff --git a/src/common/ModalDialog/styles.less b/src/common/ModalDialog/styles.less
index 6de3bb7e7..39e05d5ff 100644
--- a/src/common/ModalDialog/styles.less
+++ b/src/common/ModalDialog/styles.less
@@ -1,17 +1,13 @@
 .modal-container {
     display: flex;
-    flex-flow: column;
+    flex-direction: column;
     background-color: var(--color-backgrounddark40);
 
     .modal-dialog-container {
         position: relative;
+        margin: auto;
         padding: 1rem;
         background-color: var(--color-surfacelighter);
-        margin: auto;
-
-        * {
-            overflow: visible;
-        }
 
         .close-button-container {
             display: flex;
@@ -52,37 +48,35 @@
         }
 
         .modal-dialog-content {
-            margin: 1rem auto 0 auto;
+            margin-top: 1rem;
         }
 
         .modal-dialog-buttons {
-            margin: -.5rem;
             margin-top: 1rem;
             display: flex;
-            flex-flow: row;
+            flex-direction: row;
         }
-
     }
 }
 
 .action-button {
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     flex: 1 0 0;
+    padding: 1rem;
     text-align: center;
     color: var(--color-surfacelighter);
     background-color: var(--color-signal5);
-    padding: 1rem;
-    margin: .5rem;
 
     &:hover {
-        background-color: var(--color-signal580);
+        filter: brightness(1.2);
     }
 
     &:focus {
-        outline: 3px solid var(--color-surfacelighter);
-        outline-offset: -4px;
+        outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
+        outline-offset: calc(-2 * var(--focus-outline-size));
     }
 
     &:global(.disabled) {
@@ -91,9 +85,13 @@
     }
 
     .icon {
-        fill: var(--color-surfacelighter);
         width: 1rem;
         height: 1rem;
         margin-right: .5rem;
+        fill: var(--color-surfacelighter);
+    }
+
+    &:not(:last-child) {
+        margin-right: 1rem;
     }
 }
\ No newline at end of file
diff --git a/storybook/stories/ModalDialog/styles.less b/storybook/stories/ModalDialog/styles.less
index 91e9557e6..d6a3e426f 100644
--- a/storybook/stories/ModalDialog/styles.less
+++ b/storybook/stories/ModalDialog/styles.less
@@ -24,7 +24,7 @@
     // This is only for the content. Not relevant for the demo
     .content-container {
         display: flex;
-        flex-flow: row;
+        flex-direction: row;
         margin: 0 -0.5rem;
 
         .content-column {