diff --git a/core/misc/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
similarity index 100%
rename from core/misc/dialog.ajax.js
rename to core/misc/dialog/dialog.ajax.js
diff --git a/core/misc/dialog/dialog.jquery-ui.js b/core/misc/dialog/dialog.jquery-ui.js
new file mode 100644
index 0000000..ed3fbc2
--- /dev/null
+++ b/core/misc/dialog/dialog.jquery-ui.js
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Adds default classes to buttons for styling purposes.
+ */
+(function ($) {
+
+  "use strict";
+
+  $.widget('ui.dialog', $.ui.dialog, {
+    options: {
+      buttonClass: 'button',
+      buttonPrimaryClass: 'button--primary'
+    },
+    _createButtons: function () {
+      var opts = this.options;
+      var primaryIndex;
+      var $buttons;
+      for (var index = 0, il = opts.buttons.length; index < il; index += 1) {
+        if (opts.buttons[index].primary && opts.buttons[index].primary === true) {
+          primaryIndex = index;
+          delete opts.buttons[index].primary;
+          break;
+        }
+      }
+      this._super();
+      $buttons = this.uiButtonSet.children().addClass(opts.buttonClass);
+      if (typeof primaryIndex !== 'undefined') {
+        $buttons.eq(index).addClass(opts.buttonPrimaryClass);
+      }
+    }
+  });
+
+})(jQuery);
diff --git a/core/misc/dialog.js b/core/misc/dialog/dialog.js
similarity index 92%
rename from core/misc/dialog.js
rename to core/misc/dialog/dialog.js
index 2bb3a32..3c35c5c 100644
--- a/core/misc/dialog.js
+++ b/core/misc/dialog/dialog.js
@@ -1,6 +1,5 @@
 /**
  * @file
- *
  * Dialog API inspired by HTML5 dialog element:
  * http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
  */
@@ -11,6 +10,9 @@
 drupalSettings.dialog = {
   autoOpen: true,
   dialogClass: '',
+  // Drupal-specific extensions: see dialog.jquery-ui.js.
+  buttonClass: 'button',
+  buttonPrimaryClass: 'button--primary',
   // When using this API directly (when generating dialogs on the client side),
   // you may want to override this method and do
   // @code
diff --git a/core/misc/dialog.position.js b/core/misc/dialog/dialog.position.js
similarity index 100%
rename from core/misc/dialog.position.js
rename to core/misc/dialog/dialog.position.js
diff --git a/core/misc/dialog.theme.css b/core/misc/dialog/dialog.theme.css
similarity index 96%
copy from core/misc/dialog.theme.css
copy to core/misc/dialog/dialog.theme.css
index 581c03b..72c2fbc 100644
--- a/core/misc/dialog.theme.css
+++ b/core/misc/dialog/dialog.theme.css
@@ -50,7 +50,7 @@
   top: 48.5%;
   z-index: 1000;
   background-color: #232323;
-  background-image: url("loading-small.gif");
+  background-image: url("../loading-small.gif");
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 7px;
diff --git a/core/modules/ckeditor/js/ckeditor.admin.js b/core/modules/ckeditor/js/ckeditor.admin.js
index 0e8f5b1..bad1b08 100644
--- a/core/modules/ckeditor/js/ckeditor.admin.js
+++ b/core/modules/ckeditor/js/ckeditor.admin.js
@@ -1356,14 +1356,13 @@ function openGroupNameDialog (view, $group, callback) {
         click: function () {
           closeDialog('apply', this);
         },
-        'class': 'button-primary button'
+        primary: true
       },
       {
         text: Drupal.t('Cancel'),
         click: function () {
           closeDialog('cancel');
         },
-        'class': 'button'
       }
     ],
     open: function () {
diff --git a/core/modules/edit/js/util.js b/core/modules/edit/js/util.js
index da7656e..ea9076f 100644
--- a/core/modules/edit/js/util.js
+++ b/core/modules/edit/js/util.js
@@ -50,7 +50,8 @@ Drupal.edit.util.networkErrorModal = function (title, message) {
         text: Drupal.t('OK'),
         click: function() {
           networkErrorModal.close();
-        }
+        },
+        primary: true
       }
     ],
     create: function () {
diff --git a/core/modules/edit/js/views/AppView.js b/core/modules/edit/js/views/AppView.js
index 599ba2b..11fbe0b 100644
--- a/core/modules/edit/js/views/AppView.js
+++ b/core/modules/edit/js/views/AppView.js
@@ -360,7 +360,8 @@ Drupal.edit.AppView = Backbone.View.extend({
             text: Drupal.t('Save'),
             click: function() {
               closeDiscardDialog('save');
-            }
+            },
+            primary: true
           },
           {
             text: Drupal.t('Discard changes'),
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index c2cf620..3a8664c 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -984,11 +984,12 @@ function system_library_info() {
     'title' => 'Drupal Dialog',
     'version' => \Drupal::VERSION,
     'js' => array(
-      'core/misc/dialog.js' => array('group' => JS_LIBRARY),
-      'core/misc/dialog.position.js' => array('group' => JS_LIBRARY),
+      'core/misc/dialog/dialog.js' => array('group' => JS_LIBRARY),
+      'core/misc/dialog/dialog.position.js' => array('group' => JS_LIBRARY),
+      'core/misc/dialog/dialog.jquery-ui.js' => array('group' => JS_LIBRARY),
     ),
     'css' => array(
-      'core/misc/dialog.theme.css' => array('weight' => 1),
+      'core/misc/dialog/dialog.theme.css' => array('weight' => 1),
     ),
     'dependencies' => array(
       array('system', 'jquery'),
@@ -1005,7 +1006,7 @@ function system_library_info() {
     'title' => 'Drupal Dialog AJAX',
     'version' => \Drupal::VERSION,
     'js' => array(
-      'core/misc/dialog.ajax.js' => array('group' => JS_LIBRARY, 'weight' => 3),
+      'core/misc/dialog/dialog.ajax.js' => array('group' => JS_LIBRARY, 'weight' => 3),
     ),
     'dependencies' => array(
       array('system', 'jquery'),
diff --git a/core/misc/dialog.theme.css b/core/themes/seven/dialog.theme.css
similarity index 61%
rename from core/misc/dialog.theme.css
rename to core/themes/seven/dialog.theme.css
index 581c03b..c569785 100644
--- a/core/misc/dialog.theme.css
+++ b/core/themes/seven/dialog.theme.css
@@ -3,36 +3,53 @@
  */
 
 .ui-dialog {
+  background: transparent;
+  border: 0;
   position: absolute;
   z-index: 1260;
   overflow: visible;
-  color: #000;
-  background: #fff;
-  border: solid 1px #ccc;
   padding: 0;
 }
 .ui-dialog .ui-dialog-titlebar {
-  font-weight: bold;
-  background: #f3f4ee;
-  border-style: solid;
-  border-radius: 0;
-  border-width: 0 0 1px 0;
-  border-color: #ccc;
+  background: rgba(107,107,107,0.65);
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  padding: 20px;
+}
+.ui-dialog .ui-dialog-title {
+  font-size: 22px;
+  font-weight: 600;
+  margin: 0;
+  color: #ffffff;
+  -webkit-font-smoothing: antialiased;
 }
 .ui-dialog .ui-dialog-titlebar-close {
   border: 0;
   background: none;
+  right: 20px;
+  top: 20px;
+  margin: 0;
+  height: 16px;
+  width: 16px;
+}
+.ui-dialog .ui-icon-closethick {
+  background: url('../../misc/icons/ffffff/ex.svg') 0 0 no-repeat;
+}
+.ui-dialog .ui-dialog-content {
+  background: #ffffff;
 }
 .ui-dialog .ui-dialog-buttonpane {
-  margin-top: 0;
-  background: #f3f4ee;
-  padding: .3em 1em;
-  border-width: 1px 0 0 0;
-  border-color: #ccc;
+  background: #f5f5f2;
+  border-top: 1px solid #bfbfbf;
+  margin: 0;
+  padding: 15px 20px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
 }
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
   margin: 0;
   padding: 0;
+  float: none;
 }
 .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
   padding: 0;
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 582b498..3cc5c6d 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -13,6 +13,7 @@ stylesheets:
 stylesheets-override:
   - vertical-tabs.css
   - jquery.ui.theme.css
+  - dialog.theme.css
 edit_stylesheets:
   - edit.css
 settings: