diff --git a/CHANGELOG.md b/CHANGELOG.md
index 41a97b2371a..b015668ad71 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -60,6 +60,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 ##### 2026-03-02
 
 #### :sparkles: Usability & Accessibility
+* Add support for multiple custom background layers with full CRUD operations - add, edit, name, and delete custom backgrounds ([#8874], [#11850], thanks [@JaiswalShivang])
 * Show warning when attempting to paste but nothing has been copied ([#9401], thanks [@omsaraykar])
 * Don't suggest values from Taginfo for `addr:*` tags ([#11733], thanks [@k-yle])
 * Don't suggest values from Taginfo for tags with less than 100 uses, even if they're documented on the wiki ([#11794], thanks [@Kaushik4141])
@@ -108,6 +109,10 @@ _Breaking developer changes, which may affect downstream projects or sites that
 
 
 [#8464]: https://github.com/openstreetmap/iD/issues/8464
+[#8874]: https://github.com/openstreetmap/iD/issues/8874
+[#9401]: https://github.com/openstreetmap/iD/issues/9401
+[#10935]: https://github.com/openstreetmap/iD/issues/10935
+[#10999]: https://github.com/openstreetmap/iD/issues/10999
 [#9226]: https://github.com/openstreetmap/iD/pull/9226
 [#9401]: https://github.com/openstreetmap/iD/issues/9401
 [#10935]: https://github.com/openstreetmap/iD/issues/10935
@@ -129,12 +134,14 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#11759]: https://github.com/openstreetmap/iD/pull/11759
 [#11773]:https://github.com/openstreetmap/iD/pull/11773
 [#11774]: https://github.com/openstreetmap/iD/pull/11774
+[#11783]: https://github.com/openstreetmap/iD/pull/11783
 [#11784]: https://github.com/openstreetmap/iD/pull/11784
 [#11794]: https://github.com/openstreetmap/iD/pull/11794
 [#11799]: https://github.com/openstreetmap/iD/issues/11799
 [#11783]: https://github.com/openstreetmap/iD/pull/11783
 [#11804]: https://github.com/openstreetmap/iD/pull/11804
 [#11819]: https://github.com/openstreetmap/iD/pull/11819
+[#11850]: https://github.com/openstreetmap/iD/pull/11850
 [#11861]: https://github.com/openstreetmap/iD/pull/11861
 [#11862]: https://github.com/openstreetmap/iD/pull/11862
 [#11869]: https://github.com/openstreetmap/iD/pull/11869
diff --git a/css/80_app.css b/css/80_app.css
index 3a13c17acdd..baa986da224 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1447,6 +1447,7 @@ button.preset-reset .label.flash-bg {
 
 .label-text .label-textannotation svg.icon {
     margin: 0 8px;
+    color: #333;
     opacity: 0.5;
     width: 14px;
     height: 14px;
@@ -6086,3 +6087,87 @@ textarea:focus:dir(rtl)::-webkit-resizer {
     width: 100px;
     color: var(--link-color);
 }
+
+.custom-backgrounds-header {
+    font-weight: bold;
+    font-size: 12px;
+    padding: 10px 0 6px 0;
+    margin-top: 12px;
+    color: var(--text-color);
+}
+
+.layer-custom-background-list {
+    margin: 0;
+    padding: 0;
+}
+
+.layer-custom-background-list li {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+}
+
+.layer-custom-background-list li label {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.layer-custom-background-list li label span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.layer-custom-background-list .layer-browse,
+.layer-custom-background-list .layer-delete {
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    opacity: 0.6;
+    transition: opacity 0.15s, background-color 0.15s;
+}
+
+.layer-custom-background-list .layer-browse:hover,
+.layer-custom-background-list .layer-delete:hover {
+    opacity: 1;
+    background: var(--bg-color-3);
+}
+
+.layer-custom-background-list .layer-delete:hover {
+    background: rgba(234, 0, 0, 0.15);
+}
+
+.layer-custom-background-list .layer-delete:hover .icon {
+    color: #ea0000;
+}
+
+.add-custom-background {
+    width: 100%;
+    padding: 8px 12px;
+    margin-top: 8px;
+    text-align: center;
+    background: var(--bg-color-3);
+    border: none;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.15s;
+}
+
+.add-custom-background:hover {
+    background: var(--passive-bg-color);
+}
+
+.settings-custom-background .field-name {
+    width: 100%;
+    margin-top: 10px;
+}
diff --git a/data/core.yaml b/data/core.yaml
index 72c436368c0..9c26a3dd4d3 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -828,6 +828,10 @@ en:
     best_imagery: Best known imagery source for this location
     switch: Switch back to this background
     custom: Custom
+    custom_backgrounds: Custom Backgrounds
+    add_custom: Add Custom...
+    delete_custom: Delete
+    edit_custom: Edit
     overlays: Overlays
     imagery_problem_faq: Report an Imagery Problem
     reset: reset
@@ -1006,6 +1010,9 @@ en:
         example: "Example:"
       template:
         placeholder: Enter a url template
+      name:
+        placeholder: Enter a name for this background
+        label: Name
     custom_data:
       tooltip: Edit custom data layer
       header: Custom Map Data Settings
@@ -1087,6 +1094,7 @@ en:
   confirm:
     okay: "OK"
     cancel: "Cancel"
+    delete_custom_background: "Delete this custom background?"
   splash:
     welcome: Welcome to the iD OpenStreetMap editor
     text: "iD is a friendly but powerful tool for contributing to the world's best free world map. This is version {version}. For more information see {website} and report bugs at {github}."
diff --git a/modules/renderer/background.js b/modules/renderer/background.js
index 5f9c2de479e..be9c09fb7bf 100644
--- a/modules/renderer/background.js
+++ b/modules/renderer/background.js
@@ -7,6 +7,7 @@ import turf_bbox from '@turf/bbox';
 import whichPolygon from 'which-polygon';
 
 import { prefs } from '../core/preferences';
+import { t } from '../core/localizer';
 import { fileFetcher } from '../core/file_fetcher';
 import { geoMetersToOffset, geoOffsetToMeters, geoExtent } from '../geo';
 import { rendererBackgroundSource } from './background_source';
@@ -14,6 +15,9 @@ import { rendererTileLayer } from './tile_layer';
 import { utilQsString, utilStringQs } from '../util';
 import { utilRebind } from '../util/rebind';
 
+const PREF_CUSTOM_TEMPLATE_OLD = 'background-custom-template';
+const PREF_CUSTOM_TEMPLATES = 'background-custom-templates';
+export const CUSTOM_ID_PREFIX = 'custom-';
 
 let _imageryIndex = null;
 
@@ -77,13 +81,37 @@ export function rendererBackground(context) {
         // Add 'None'
         _imageryIndex.backgrounds.unshift(rendererBackgroundSource.None());
 
-        // Add 'Custom'
-        let template = prefs('background-custom-template') || '';
-        const custom = rendererBackgroundSource.Custom(template);
-        _imageryIndex.backgrounds.unshift(custom);
+        function migrateCustomBackgrounds() {
+          const oldTemplate = prefs(PREF_CUSTOM_TEMPLATE_OLD);
+          let customTemplates;
 
-        return _imageryIndex;
+          try {
+              customTemplates = JSON.parse(prefs(PREF_CUSTOM_TEMPLATES) || '[]');
+          } catch {
+              customTemplates = [];
+          }
+
+          // Migrate from old single custom background
+          if (oldTemplate && customTemplates.length === 0) {
+              customTemplates = [{
+                  id: CUSTOM_ID_PREFIX+'1',
+                  name: t('background.custom'),
+                  template: oldTemplate
+              }];
+              prefs(PREF_CUSTOM_TEMPLATES, JSON.stringify(customTemplates));
+              prefs(PREF_CUSTOM_TEMPLATE_OLD, null);
+          }
+
+          return customTemplates;
+      }
+      // Add custom
+      const customTemplates = migrateCustomBackgrounds();
+      customTemplates.forEach(function(entry) {
+          const customSource = rendererBackgroundSource.Custom(entry.id, entry.name, entry.template);
+          _imageryIndex.backgrounds.unshift(customSource);
       });
+      return _imageryIndex;
+    });
   }
 
 
@@ -205,6 +233,10 @@ export function rendererBackground(context) {
     let id = currSource.id;
     if (id === 'custom') {
       id = `custom:${currSource.template()}`;
+    } else if (id && id.startsWith(CUSTOM_ID_PREFIX)) {
+      // Named custom backgrounds use custom:<template> in URL hash
+      // since the custom-N id is local to this browser
+      id = `custom:${currSource.template()}`;
     }
 
     if (id) {
@@ -346,6 +378,28 @@ export function rendererBackground(context) {
   };
 
 
+  background.addCustomSource = (source) => {
+    if (!_imageryIndex) return;
+    // Remove existing source with same id if present
+    const idx = _imageryIndex.backgrounds.findIndex(d => d.id === source.id);
+    if (idx !== -1) {
+      _imageryIndex.backgrounds.splice(idx, 1, source);
+    } else {
+      // Insert after 'None' (index 0) and before other imagery
+      _imageryIndex.backgrounds.unshift(source);
+    }
+  };
+
+
+  background.removeCustomSource = (id) => {
+    if (!_imageryIndex) return;
+    const idx = _imageryIndex.backgrounds.findIndex(d => d.id === id);
+    if (idx !== -1) {
+      _imageryIndex.backgrounds.splice(idx, 1);
+    }
+  };
+
+
   background.bing = () => {
     background.baseLayerSource(background.findSource('Bing'));
   };
@@ -482,7 +536,7 @@ export function rendererBackground(context) {
         const template = requestedBackground.replace(/^custom:/, '');
         const custom = background.findSource('custom');
         background.baseLayerSource(custom.template(template));
-        prefs('background-custom-template', template);
+        prefs(PREF_CUSTOM_TEMPLATE_OLD, template);
       } else {
         background.baseLayerSource(
           background.findSource(requestedBackground) ||
diff --git a/modules/renderer/background_source.js b/modules/renderer/background_source.js
index c32fe838af8..887036c88e0 100644
--- a/modules/renderer/background_source.js
+++ b/modules/renderer/background_source.js
@@ -560,15 +560,24 @@ rendererBackgroundSource.None = function() {
 };
 
 
-rendererBackgroundSource.Custom = function(template) {
-    var source = rendererBackgroundSource({ id: 'custom', template: template });
+rendererBackgroundSource.Custom = function(id, name, template) {
+    if (arguments.length === 1) {
+        template = id;
+        id = 'custom';
+        name = null;
+    }
+
+    var source = rendererBackgroundSource({ id: id || 'custom', template: template });
+    var _customName = name;
 
 
     source.name = function() {
+        if (_customName) return _customName;
         return t('background.custom');
     };
 
     source.label = function() {
+        if (_customName) return function(selection) { selection.text(_customName); };
         return t.append('background.custom');
     };
 
diff --git a/modules/ui/sections/background_list.js b/modules/ui/sections/background_list.js
index fde618f2de6..0cc682d53f8 100644
--- a/modules/ui/sections/background_list.js
+++ b/modules/ui/sections/background_list.js
@@ -5,8 +5,11 @@ import { select as d3_select } from 'd3-selection';
 import { prefs } from '../../core/preferences';
 import { t, localizer } from '../../core/localizer';
 import { uiTooltip } from '../tooltip';
+import { uiConfirm } from '../confirm';
 import { svgIcon } from '../../svg/icon';
 import { uiCmd } from '../cmd';
+import { rendererBackgroundSource } from '../../renderer/background_source';
+import { CUSTOM_ID_PREFIX } from '../../renderer/background';
 import { uiSettingsCustomBackground } from '../settings/custom_background';
 import { uiMapInMap } from '../map_in_map';
 import { uiSection } from '../section';
@@ -15,9 +18,24 @@ export function uiSectionBackgroundList(context) {
 
     var _backgroundList = d3_select(null);
 
+    var _customList = d3_select(null);
+
     var _settingsCustomBackground = uiSettingsCustomBackground(context)
         .on('change', customChanged);
 
+
+    function customChanged(settings) {
+        // Create or update the background source in _imageryIndex
+        var source = rendererBackgroundSource.Custom(settings.id, settings.name, settings.template);
+        context.background().addCustomSource(source);
+
+        // Re-render the custom list
+        drawCustomListItems(_customList);
+
+        // Select the newly added/edited custom background
+        chooseCustomBackground(settings);
+    }
+
     var section = uiSection('background-list', context)
         .label(() => t.append('background.backgrounds'))
         .disclosureContent(renderDisclosureContent);
@@ -38,6 +56,37 @@ export function uiSectionBackgroundList(context) {
             .attr('dir', 'auto')
             .merge(container);
 
+        var customHeader = selection.selectAll('.custom-backgrounds-header')
+            .data([0]);
+
+        customHeader.enter()
+            .append('div')
+            .attr('class', 'custom-backgrounds-header')
+            .append('span')
+            .call(t.append('background.custom_backgrounds'));
+
+        var customContainer = selection.selectAll('.layer-custom-background-list')
+            .data([0]);
+
+        _customList = customContainer.enter()
+            .append('ul')
+            .attr('class', 'layer-list layer-custom-background-list')
+            .attr('dir', 'auto')
+            .merge(customContainer);
+
+        drawCustomListItems(_customList);
+
+        var addCustomButton = selection.selectAll('.add-custom-background')
+            .data([0]);
+
+        addCustomButton.enter()
+            .append('button')
+            .attr('class', 'add-custom-background')
+            .on('click', function(d3_event) {
+                d3_event.preventDefault();
+                editCustom();
+            })
+            .call(t.append('background.add_custom'));
 
         // add minimap toggle below list
         var bgExtrasListEnter = selection.selectAll('.bg-extras-list')
@@ -131,7 +180,7 @@ export function uiSectionBackgroundList(context) {
             .call(drawListItems, 'radio', function(d3_event, d) {
                 chooseBackground(d);
             }, function(d) {
-                return !d.isHidden() && !d.overlay;
+                return !d.isHidden() && !d.overlay && !(d.id && d.id.startsWith(CUSTOM_ID_PREFIX));
             });
     }
 
@@ -211,7 +260,7 @@ export function uiSectionBackgroundList(context) {
                 d3_event.preventDefault();
                 editCustom();
             })
-            .call(svgIcon('#iD-icon-more'));
+            .call(svgIcon('#iD-icon-edit'));
 
         enter.filter(function(d) { return d.best(); })
             .append('div')
@@ -252,34 +301,141 @@ export function uiSectionBackgroundList(context) {
         context.background().baseLayerSource(d);
     }
 
+    function drawCustomListItems(layerList) {
+        var customSources;
+        try {
+            customSources = JSON.parse(prefs('background-custom-templates') || '[]');
+        } catch {
+            customSources = [];
+        }
 
-    function customChanged(d) {
-        var background = context.background();
-        var customSource = background.findSource('custom');
-        if (!customSource) return;
+        var layerLinks = layerList.selectAll('li')
+            .data(customSources, function(d) { return d.id; });
 
-        if (d && d.template) {
-            customSource.template(d.template);
-            chooseBackground(customSource);
-        } else {
-            customSource.template('');
-            var noneSource = background.findSource('none');
-            if (noneSource) {
-                chooseBackground(noneSource);
-            }
+        layerLinks.exit()
+            .remove();
+
+        var enter = layerLinks.enter()
+            .append('li')
+            .attr('class', 'layer-custom');
+
+        var label = enter.append('label');
+
+        label.append('input')
+            .attr('type', 'radio')
+            .attr('name', 'background-layer')
+            .attr('value', function(d) { return d.id; })
+            .on('change', function(d3_event, d) {
+                chooseCustomBackground(d);
+            });
+
+        label.append('span')
+            .text(function(d) { return d.name || t('background.custom'); });
+
+        // Edit button
+        enter.append('button')
+            .attr('class', 'layer-browse')
+            .call(uiTooltip()
+                .title(() => t.append('background.edit_custom'))
+                .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
+            )
+            .on('click', function(d3_event, d) {
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+                editCustom(d);
+            })
+            .call(svgIcon('#iD-icon-edit'));
+
+        enter.append('button')
+            .attr('class', 'layer-delete')
+            .call(uiTooltip()
+                .title(() => t.append('background.delete_custom'))
+                .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
+            )
+            .on('click', function(d3_event, d) {
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+                deleteCustom(d.id);
+            })
+            .call(svgIcon('#iD-icon-close'));
+    }
+
+
+    function chooseCustomBackground(d) {
+        var source = context.background().findSource(d.id);
+        if (source) {
+            var previousBackground = context.background().baseLayerSource();
+            prefs('background-last-used-toggle', previousBackground.id);
+            prefs('background-last-used', d.id);
+            context.background().baseLayerSource(source);
         }
     }
 
 
-    function editCustom() {
+    function deleteCustom(customId) {
+        var modal = uiConfirm(context.container());
+
+        modal.select('.modal-section.header')
+            .append('h3')
+            .text(t('confirm.delete_custom_background'));
+
+        modal.okButton();
+
+        // Add a cancel button
+        var buttonSection = modal.select('.modal-section.buttons');
+        buttonSection
+            .insert('button', '.ok-button')
+            .attr('class', 'button cancel-button secondary-action')
+            .call(t.append('confirm.cancel'))
+            .on('click.cancel', function() {
+                modal.close();
+            });
+
+        modal.select('.ok-button')
+            .on('click.confirm', function() {
+                // If the deleted source is currently active, switch to a safe default
+                var currentSource = context.background().baseLayerSource();
+                if (currentSource && currentSource.id === customId) {
+                    context.background().baseLayerSource(
+                        context.background().findSource('Bing') ||
+                        context.background().findSource('none')
+                    );
+                }
+
+                // Remove from preferences
+                let customTemplates;
+                try {
+                    customTemplates = JSON.parse(prefs('background-custom-templates') || '[]');
+                } catch {
+                    customTemplates = [];
+                }
+                customTemplates = customTemplates.filter(function (entry) {
+                    return entry.id !== customId;
+                });
+                prefs('background-custom-templates', JSON.stringify(customTemplates));
+
+                // Remove from in-memory imagery index
+                context.background().removeCustomSource(customId);
+
+                // Re-render the custom list and update selections
+                drawCustomListItems(_customList);
+                _backgroundList.call(updateLayerSelections);
+
+                modal.close();
+            });
+    }
+
+
+    function editCustom(customData) {
         context.container()
-            .call(_settingsCustomBackground);
+            .call(_settingsCustomBackground, customData);
     }
 
 
     context.background()
         .on('change.background_list', function() {
             _backgroundList.call(updateLayerSelections);
+            _customList.call(updateLayerSelections);
         });
 
     context.map()
diff --git a/modules/ui/settings/custom_background.js b/modules/ui/settings/custom_background.js
index 7d7e0c917df..5e22d90025f 100644
--- a/modules/ui/settings/custom_background.js
+++ b/modules/ui/settings/custom_background.js
@@ -10,13 +10,11 @@ import { utilNoAuto, utilRebind } from '../../util';
 export function uiSettingsCustomBackground() {
     var dispatch = d3_dispatch('change');
 
-    function render(selection) {
-        // keep separate copies of original and current settings
-        var _origSettings = {
-            template: prefs('background-custom-template')
-        };
+    function render(selection, customData) {
         var _currSettings = {
-            template: prefs('background-custom-template')
+            template: customData ? customData.template : prefs('background-custom-template'),
+            name: customData ? customData.name : '',
+            id: customData ? customData.id : null
         };
 
         var example = 'https://tile.openstreetmap.org/{zoom}/{x}/{y}.png';
@@ -61,7 +59,18 @@ export function uiSettingsCustomBackground() {
             .attr('class', 'field-template')
             .attr('placeholder', t('settings.custom_background.template.placeholder'))
             .call(utilNoAuto)
-            .property('value', _currSettings.template);
+            .property('value', _currSettings.template)
+            .on('input', function() {
+                buttonSection.select('.ok-button').attr('disabled', isSaveDisabled);
+            });
+
+        textSection
+            .append('input')
+            .attr('class', 'field-name')
+            .attr('type', 'text')
+            .attr('placeholder', t('settings.custom_background.name.placeholder'))
+            .call(utilNoAuto)
+            .property('value', _currSettings.name || '');
 
 
         // insert a cancel button
@@ -82,22 +91,55 @@ export function uiSettingsCustomBackground() {
 
 
         function isSaveDisabled() {
-            return null;
+            var value = textSection.select('.field-template').property('value');
+            return (!value || value.trim() === '') ? 'disabled' : null;
         }
 
 
         // restore the original template
         function clickCancel() {
-            textSection.select('.field-template').property('value', _origSettings.template);
-            prefs('background-custom-template', _origSettings.template);
             this.blur();
             modal.close();
         }
 
-        // accept the current template
         function clickSave() {
             _currSettings.template = textSection.select('.field-template').property('value');
-            prefs('background-custom-template', _currSettings.template);
+            _currSettings.name = textSection.select('.field-name').property('value') || t('background.custom');
+            if (!_currSettings.template || _currSettings.template.trim() === '') {
+                return;
+            }
+
+            let customTemplates;
+            try {
+                customTemplates = JSON.parse(prefs('background-custom-templates') || '[]');
+            } catch {
+                customTemplates = [];
+            }
+            if (_currSettings.id) {
+                customTemplates = customTemplates.map(function(entry) {
+                    if (entry.id === _currSettings.id) {
+                        return {
+                            id: _currSettings.id,
+                            name: _currSettings.name,
+                            template: _currSettings.template
+                        };
+                    }
+                    return entry;
+                });
+            } else {
+                const maxId = customTemplates.reduce(function(max, e) {
+                    if (!e.id || !e.id.startsWith('custom-')) return max;
+                    const num = parseInt(e.id.replace('custom-', ''), 10);
+                    return isNaN(num) ? max : Math.max(max, num);
+                }, 0);
+                const newId = 'custom-' + (maxId + 1);
+                customTemplates.push({
+                    id: newId,
+                    name: _currSettings.name,
+                    template: _currSettings.template
+                });
+            }
+            prefs('background-custom-templates', JSON.stringify(customTemplates));
             this.blur();
             modal.close();
             dispatch.call('change', this, _currSettings);
diff --git a/test/spec/ui/sections/background_list.js b/test/spec/ui/sections/background_list.js
index c894275e83a..98400b7e586 100644
--- a/test/spec/ui/sections/background_list.js
+++ b/test/spec/ui/sections/background_list.js
@@ -5,94 +5,119 @@ describe('iD.uiSectionBackgroundList', function () {
         container = d3.select('body').append('div').attr('class', 'id-container');
         context = iD.coreContext().assetPath('../dist/').init();
         context.container(container);
+        // Clear custom background preferences between tests
+        window.localStorage.removeItem('background-custom-templates');
+        window.localStorage.removeItem('background-custom-template');
     });
 
     afterEach(function () {
         container.remove();
+        // Clean up any modals attached to body
+        d3.selectAll('.modal-wrap').remove();
     });
 
-    it('does not crash during initialization if custom source is missing', function () {
-        const originalFindSource = context.background().findSource;
-        context.background().findSource = (id) => {
-            if (id === 'custom') return null;
-            return originalFindSource(id);
-        };
-
-        try {
-            expect(() => {
-                iD.uiSectionBackgroundList(context);
-            }).not.to.throw();
-        } finally {
-            context.background().findSource = originalFindSource;
-        }
+    it('does not crash during initialization', function() {
+        expect(() => {
+            iD.uiSectionBackgroundList(context);
+        }).not.to.throw();
     });
 
-    it('customChanged handles missing custom source gracefully', function () {
+    it('renders the background list UI with custom section', function () {
         const section = iD.uiSectionBackgroundList(context);
         const selection = container.append('div').call(section.render);
 
-        // Find the browse button for the custom layer
-        const browseButton = selection.selectAll('.layer-custom button.layer-browse');
-        expect(browseButton.size()).to.equal(1);
+        // Should render the main background list
+        expect(selection.selectAll('.layer-background-list').size()).to.equal(1);
 
-        // Click it to open the settings modal
-        iD.utilTriggerEvent(browseButton, 'click');
+        // Should render the custom backgrounds header
+        expect(selection.selectAll('.custom-backgrounds-header').size()).to.equal(1);
 
-        // The modal should now be in the container
+        // Should render the custom background list
+        expect(selection.selectAll('.layer-custom-background-list').size()).to.equal(1);
+
+        // Should render the "Add Custom" button
+        expect(selection.selectAll('.add-custom-background').size()).to.equal(1);
+    });
+
+    it('opens settings modal when "Add Custom" button is clicked', function () {
+        const section = iD.uiSectionBackgroundList(context);
+        container.append('div').call(section.render);
+
+        // Find and click the "Add Custom" button
+        const addButton = container.select('.add-custom-background');
+        expect(addButton.size()).to.equal(1);
+
+        iD.utilTriggerEvent(addButton, 'click');
+
+        // The modal should be rendered inside the container (context.container())
         const modal = container.select('.modal');
         expect(modal.size()).to.equal(1);
 
-        // Mock findSource to return null right before we "save"
-        const originalFindSource = context.background().findSource;
-        context.background().findSource = (id) => {
-            if (id === 'custom') return null;
-            return originalFindSource(id);
-        };
-
-        try {
-            // Find and click the "OK" (save) button in the modal
-            const okButton = modal.select('.modal-section.buttons .ok-button');
-            expect(okButton.size()).to.equal(1);
-
-            expect(() => {
-                iD.utilTriggerEvent(okButton, 'click');
-            }).not.to.throw();
-
-        } finally {
-            context.background().findSource = originalFindSource;
-        }
+        // Clean up modal
+        modal.remove();
     });
 
-    it('customChanged fallback to "none" handles missing "none" source gracefully', function () {
+    it('filters custom- prefixed sources from the main background list', function () {
         const section = iD.uiSectionBackgroundList(context);
         const selection = container.append('div').call(section.render);
 
-        // Find the browse button for the custom layer and click it
-        const browseButton = selection.selectAll('.layer-custom button.layer-browse');
-        iD.utilTriggerEvent(browseButton, 'click');
+        // The main list should not show sources whose id starts with 'custom-'
+        const mainListItems = selection.select('.layer-background-list').selectAll('li');
+        mainListItems.each(function (d) {
+            if (d && d.id) {
+                expect(d.id.startsWith('custom-')).to.be.false;
+            }
+        });
+    });
 
-        const modal = container.select('.modal');
+    it('renders custom backgrounds from preferences', function () {
+        // Pre-populate prefs with custom backgrounds
+        var customBgs = [
+            { id: 'custom-1', name: 'My Custom Map', template: 'https://example.com/{z}/{x}/{y}.png' },
+            { id: 'custom-2', name: 'Another Map', template: 'https://other.com/{z}/{x}/{y}.png' }
+        ];
+        window.localStorage.setItem('background-custom-templates', JSON.stringify(customBgs));
+
+        const section = iD.uiSectionBackgroundList(context);
+        const selection = container.append('div').call(section.render);
+
+        var customListItems = selection.select('.layer-custom-background-list').selectAll('li');
+        expect(customListItems.size()).to.equal(2);
+    });
+
+    it('shows edit and delete buttons for each custom background', function () {
+        var customBgs = [
+            { id: 'custom-1', name: 'My Custom Map', template: 'https://example.com/{z}/{x}/{y}.png' }
+        ];
+        window.localStorage.setItem('background-custom-templates', JSON.stringify(customBgs));
+
+        const section = iD.uiSectionBackgroundList(context);
+        const selection = container.append('div').call(section.render);
+
+        var customLi = selection.select('.layer-custom-background-list').select('li');
+        expect(customLi.select('.layer-browse').size()).to.equal(1);
+        expect(customLi.select('.layer-delete').size()).to.equal(1);
+    });
+
+    it('opens delete confirmation with cancel button when delete is clicked', function () {
+        var customBgs = [
+            { id: 'custom-1', name: 'My Custom Map', template: 'https://example.com/{z}/{x}/{y}.png' }
+        ];
+        window.localStorage.setItem('background-custom-templates', JSON.stringify(customBgs));
+
+        const section = iD.uiSectionBackgroundList(context);
+        container.append('div').call(section.render);
+
+        var deleteButton = container.select('.layer-custom-background-list .layer-delete');
+        iD.utilTriggerEvent(deleteButton, 'click');
+
+        var modal = container.select('.modal');
         expect(modal.size()).to.equal(1);
 
-        // Clear the template field to simulate falling back to 'none'
-        modal.select('textarea.field-template').property('value', '');
-
-        // Mock findSource to return null for 'none'
-        const originalFindSource = context.background().findSource;
-        context.background().findSource = (id) => {
-            if (id === 'none') return null;
-            return originalFindSource(id);
-        };
-
-        try {
-            const okButton = modal.select('.modal-section.buttons .ok-button');
-            expect(okButton.size()).to.equal(1);
-
-            expect(() => {
-                iD.utilTriggerEvent(okButton, 'click');
-            }).not.to.throw();
-        } finally {
-            context.background().findSource = originalFindSource;
-        }
+        // Should have both cancel and ok buttons
+        expect(modal.select('.cancel-button').size()).to.equal(1);
+        expect(modal.select('.ok-button').size()).to.equal(1);
+
+        modal.remove();
     });
 });