diff --git a/css/80_app.css b/css/80_app.css
index 6558bb99c..aa788d190 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -4602,3 +4602,24 @@ li.hide + li.version .badge .tooltip .tooltip-arrow {
     width: 100px;
     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/modules/ui/background.js b/modules/ui/background.js
index 4dac81036..00e2a9b01 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -17,10 +17,12 @@ import { svgIcon } from '../svg';
 import { uiBackgroundDisplayOptions } from './background_display_options';
 import { uiBackgroundOffset } from './background_offset';
 import { uiCmd } from './cmd';
+import { uiCustom } from './custom';
 import { uiDisclosure } from './disclosure';
 import { uiHelp } from './help';
 import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
+import { uiModal } from './modal';
 import { uiTooltipHtml } from './tooltipHtml';
 import { utilCallWhenIdle } from '../util';
 import { tooltip } from '../util/tooltip';
@@ -88,6 +90,7 @@ export function uiBackground(context) {
     function chooseBackground(d) {
         if (d.id === 'custom' && !d.template()) {
             return editCustom();
+
         }
 
         d3_event.preventDefault();
@@ -99,15 +102,7 @@ export function uiBackground(context) {
         document.activeElement.blur();
     }
 
-
-    function editCustom() {
-        d3_event.preventDefault();
-        var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
-        var template = window.prompt(
-            t('background.custom_prompt', { example: example }),
-            _customSource.template() || example
-        );
-
+    function edit(a, template) {
         if (template) {
             context.storage('background-custom-template', template);
             _customSource.template(template);
@@ -117,6 +112,13 @@ export function uiBackground(context) {
         }
     }
 
+    function editCustom() {
+        d3_event.preventDefault();
+
+        context.container()
+            .call(uiCustom(context));
+    }
+
 
     function chooseOverlay(d) {
         d3_event.preventDefault();
@@ -419,6 +421,7 @@ export function uiBackground(context) {
         uiBackground.hidePane = hidePane;
         uiBackground.togglePane = togglePane;
         uiBackground.setVisible = setVisible;
+        uiBackground.edit = edit;
     }
 
     return background;
diff --git a/modules/ui/custom.js b/modules/ui/custom.js
new file mode 100644
index 000000000..e85e5b92f
--- /dev/null
+++ b/modules/ui/custom.js
@@ -0,0 +1,72 @@
+import { t } from '../util/locale';
+import { uiBackground } from './background';
+import { uiModal } from './modal';
+
+
+export function uiCustom(context) {
+
+    return function(selection) {
+
+        var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png';
+        var modalSelection = uiModal(selection);
+
+        modalSelection.select('.modal')
+            .attr('class', 'modal-splash modal col6');
+
+        var introModal = modalSelection.select('.content')
+            .append('div')
+            .attr('class', 'fillL');
+
+        introModal
+            .append('div')
+            .attr('class','modal-section cf')
+            .append('h3').text(t('background.custom_heading'));
+
+        introModal
+            .append('div')
+            .attr('class','modal-section')
+            .append('p').text(t('background.custom_prompt', { example: example }))
+            .append('textarea');
+
+
+        /*var textAreaWrap = introModal
+            .append('div')
+            .attr('class', 'modal-section');
+
+        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');
+
+
+        modalSelection.select('button.close')
+            .attr('class','hide');
+
+
+    };
+}
diff --git a/modules/ui/index.js b/modules/ui/index.js
index 35d9a8517..d82ddeca1 100644
--- a/modules/ui/index.js
+++ b/modules/ui/index.js
@@ -11,6 +11,7 @@ export { uiCommitChanges } from './commit_changes';
 export { uiCommitWarnings } from './commit_warnings';
 export { uiConfirm } from './confirm';
 export { uiConflicts } from './conflicts';
+export { uiCustom } from './custom';
 export { uiContributors } from './contributors';
 export { uiCurtain } from './curtain';
 export { uiDisclosure } from './disclosure';