diff --git a/css/80_app.css b/css/80_app.css
index aa788d190..2a78bdee8 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3875,6 +3875,19 @@ svg.mouseclick use.right {
 }
 
 
+/* Settings Modals
+------------------------------------------------------- */
+.settings-custom-background .instructions {
+    margin-bottom: 20px;
+}
+.settings-custom-background textarea {
+    height: 60px;
+}
+.settings-custom-background .buttons .button.col3 {
+    float: none;   /* undo float left */
+}
+
+
 /* Save Mode
 ------------------------------------------------------- */
 .mode-save a.user-info {
@@ -4603,23 +4616,4 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     color: #7092ff;
 }
 
-.button-ok {
-    background-color: #6f92ff; /* Green */
-    border: none;
-    color: white;
-    padding: 15px 15px;
-    text-align: center;
-    font-size: 16px;
-    
-}
-.button-ok:focus {
-    background-color: #c1d0ff;
-}
-.button-cancel {
-    background-color: #cccccc; /* Green */
-    border: none;
-    color: white;
-    padding: 15px 15px;
-    text-align: center;
-    font-size: 16px;
-}
+
diff --git a/data/core.yaml b/data/core.yaml
index db06b8ab9..aa65817ca 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -515,7 +515,7 @@ en:
   settings:
     custom_background:
       tooltip: Edit custom background
-      heading: Custom Background Settings
+      header: Custom Background Settings
       instructions: "Enter a tile URL template. Valid tokens are:\n   - {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme\n   - {-y} or {ty} for flipped TMS-style Y coordinates\n   - {u} for quadtile scheme\n   - {switch:a,b,c} for DNS server multiplexing\n\nExample:\n{example}"
   restore:
     heading: You have unsaved changes
diff --git a/dist/locales/en.json b/dist/locales/en.json
index dced16854..228732fc9 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -633,7 +633,7 @@
         "settings": {
             "custom_background": {
                 "tooltip": "Edit custom background",
-                "heading": "Custom Background Settings",
+                "header": "Custom Background Settings",
                 "instructions": "Enter a tile URL template. Valid tokens are:\n   - {zoom} or {z}, {x}, {y} for Z/X/Y tile scheme\n   - {-y} or {ty} for flipped TMS-style Y coordinates\n   - {u} for quadtile scheme\n   - {switch:a,b,c} for DNS server multiplexing\n\nExample:\n{example}"
             }
         },
diff --git a/modules/ui/confirm.js b/modules/ui/confirm.js
index 2fd0e4383..8eec4b6cd 100644
--- a/modules/ui/confirm.js
+++ b/modules/ui/confirm.js
@@ -23,7 +23,7 @@ export function uiConfirm(selection) {
     modalSelection.okButton = function() {
         buttons
             .append('button')
-            .attr('class', 'action col4')
+            .attr('class', 'button ok-button action col4')
             .on('click.confirm', function() {
                 modalSelection.remove();
             })
diff --git a/modules/ui/settings/custom_background.js b/modules/ui/settings/custom_background.js
index 09b2955c4..bc94661fc 100644
--- a/modules/ui/settings/custom_background.js
+++ b/modules/ui/settings/custom_background.js
@@ -1,75 +1,74 @@
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
 import { t } from '../../util/locale';
-import { uiBackground } from '../background';
-import { uiModal } from '../modal';
+import { uiConfirm } from '../confirm';
+import { utilNoAuto, utilRebind } from '../../util';
 
 
 export function uiSettingsCustomBackground(context) {
+    var dispatch = d3_dispatch('change');
 
-    return function(selection) {
 
+    function render(selection) {
         var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
-        var modalSelection = uiModal(selection);
+        var modal = uiConfirm(selection).okButton();
 
-        modalSelection.select('.modal')
-            .attr('class', 'modal-splash modal col6');
+        modal
+            .classed('settings-custom-background', true);
 
-        var introModal = modalSelection.select('.content')
-            .append('div')
-            .attr('class', 'fillL');
-
-        introModal
-            .append('div')
-            .attr('class','modal-section cf')
+        modal.select('.modal-section.header')
             .append('h3')
-            .text(t('settings.custom_background.heading'));
+            .text(t('settings.custom_background.header'));
 
-        introModal
-            .append('div')
-            .attr('class','modal-section')
+
+        var textSection = modal.select('.modal-section.message-text');
+
+        textSection
             .append('pre')
+            .attr('class', 'instructions')
             .text(t('settings.custom_background.instructions', { example: example }));
 
-        introModal
-            .append('textarea');
+        textSection
+            .append('textarea')
+            .call(utilNoAuto);
 
 
-        /*var textAreaWrap = introModal
-            .append('div')
-            .attr('class', 'modal-section');
+        // insert a cancel button, and adjust the button widths
+        var buttonSection = modal.select('.modal-section.buttons');
 
-        var urlArea = textAreaWrap
-            .append('textarea');*/
-
-        var buttonWrap = introModal
-            .append('div')
-            .attr('class', 'modal-section');
-
-        var cancelButton = buttonWrap
-            .append('button')
-            .attr('class', 'button-cancel')
-            .on('click', modalSelection.close);
-
-        cancelButton
-            .append('div')
-            .text('Cancel');
-
-        var okButton = buttonWrap
-            .append('button')
-            .attr('class', 'button-ok')
-            .on('click', function() {
-                var template = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
-                context.container().call(uiBackground.edit, template);
-                modalSelection.close();
-            });
-
-        okButton
-            .append('div')
-            .text('OK');
+        buttonSection
+            .insert('button', '.ok-button')
+            .attr('class', 'button col3 cancel-button secondary-action')
+            .text(t('confirm.cancel'));
 
 
-        modalSelection.select('button.close')
-            .attr('class','hide');
+        buttonSection.select('.cancel-button')
+            .on('click.cancel', clickCancel);
+
+        buttonSection.select('.ok-button')
+            .classed('col3', true)
+            .classed('col4', false)
+            .attr('disabled', isSaveDisabled)
+            .on('click.save', clickSave);
 
 
-    };
+        function isSaveDisabled() {
+            return null;
+        }
+
+
+        function clickCancel() {
+            this.blur();
+            modal.close();
+        }
+
+
+        function clickSave() {
+            this.blur();
+            modal.close();
+            dispatch.call('change');
+        }
+    }
+
+    return utilRebind(render, dispatch, 'on');
 }