diff --git a/css/80_app.css b/css/80_app.css
index a8f7a63e9..72ba5f369 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -440,19 +440,6 @@ button[disabled].action:hover {
     color: #333;
 }
 
-.notification-badge {
-    display: block;
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    right: 7px;
-    top: 9px;
-}
-
-.notification-badge.hide {
-    display: none;
-}
-
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
@@ -556,7 +543,7 @@ button.save .count {
     text-align: center;
 }
 
-.help-wrap svg.icon.pre-text.add-note,
+.help-pane svg.icon.pre-text.add-note,
 button.add-note svg.icon {
     height: 15px;
     width: 15px;
@@ -573,7 +560,7 @@ button.add-note svg.icon {
     margin-left: 4px;
     margin-right: unset;
 }
-.help-wrap svg.icon.pre-text.add-note {
+.help-pane svg.icon.pre-text.add-note {
     margin-left: 3px;
     margin-right: 3px;
 }
@@ -3185,10 +3172,6 @@ button.autofix.action.active {
     /*fill: #597be7;*/
 }
 
-.notification-badge.warning {
-    color: #ffdf5c;
-}
-
 
 /* error styles */
 .errors-list,
@@ -3232,10 +3215,6 @@ button.autofix.action.active {
     /*fill: #597be7;*/
 }
 
-.notification-badge.error {
-    color: #ff0c05;
-}
-
 
 /* Issues Pane */
 .issues-options-container {
@@ -3584,7 +3563,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     z-index: 10;
 }
 
-.map-pane.help-wrap {
+.map-pane.help-pane {
     width: 600px;
 }
 
@@ -3624,12 +3603,12 @@ li.issue-fix-item:not(.actionable) .fix-icon {
 
 /* Help
 ------------------------------------------------------- */
-.help-wrap p {
+.help-pane p {
     font-size: 15px;
     margin-bottom: 20px;
 }
 
-.help-wrap .left-content .body p code {
+.help-pane .left-content .body p code {
     padding: 3px 4px;
     font-size: 12px;
     color: #555;
@@ -3642,14 +3621,14 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     box-shadow: inset 0 -1px 0 #bbb;
 }
 
-.help-wrap .left-content .icon.pre-text {
+.help-pane .left-content .icon.pre-text {
     vertical-align: text-top;
     margin-right: 0;
     margin-left: 0;
     display: inline-block;
 }
 
-.help-wrap .toc {
+.help-pane .toc {
     width: 40%;
     float: right;
     margin-left: 20px;
@@ -3657,68 +3636,68 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     padding-left: 5px;
 }
 
-.help-wrap .toc li a,
-.help-wrap .nav a {
+.help-pane .toc li a,
+.help-pane .nav a {
     display: block;
     border: 1px solid #ccc;
     padding: 5px 10px;
 }
 
-.help-wrap .toc li a {
+.help-pane .toc li a {
     border-bottom: 0;
 }
 
-.help-wrap .toc li a:hover,
-.help-wrap .nav a:hover {
+.help-pane .toc li a:hover,
+.help-pane .nav a:hover {
     background: #ececec;
 }
 
-.help-wrap .toc li a.selected {
+.help-pane .toc li a.selected {
     background: #e8ebff;
 }
 
-.help-wrap .toc li:first-child a {
+.help-pane .toc li:first-child a {
     border-radius: 4px 4px 0 0;
 }
 
-.help-wrap .toc li:nth-last-child(3) a {
+.help-pane .toc li:nth-last-child(3) a {
     border-bottom: 1px solid #ccc;
     border-radius: 0 0 4px 4px
 }
 
-.help-wrap .toc li.shortcuts a,
-.help-wrap .toc li.walkthrough a {
+.help-pane .toc li.shortcuts a,
+.help-pane .toc li.walkthrough a {
     overflow: hidden;
     margin-top: 10px;
     border-bottom: 1px solid #ccc;
     border-radius: 4px;
 }
 
-.help-wrap .toc li.walkthrough a {
+.help-pane .toc li.walkthrough a {
     text-align: center;
 }
 
-.help-wrap .nav {
+.help-pane .nav {
     position: relative;
     padding-bottom: 30px;
 }
 
-.help-wrap .nav a {
+.help-pane .nav a {
     float: left;
     width: 50%;
     text-align: center;
 }
 
-.help-wrap .nav a:first-child {
+.help-pane .nav a:first-child {
     border-radius: 4px 0 0 4px;
 }
 
-.help-wrap .nav a:last-child:not(:only-child) {
+.help-pane .nav a:last-child:not(:only-child) {
     border-radius: 0 4px 4px 0;
     border-left: 0;
 }
 
-.help-wrap .nav a:only-child {
+.help-pane .nav a:only-child {
     width: 100%;
     border-radius: 4px;
 }
diff --git a/modules/ui/index.js b/modules/ui/index.js
index 2c973f43d..e663bed92 100644
--- a/modules/ui/index.js
+++ b/modules/ui/index.js
@@ -1,7 +1,6 @@
 export { uiInit } from './init';
 export { uiAccount } from './account';
 export { uiAttribution } from './attribution';
-export { uiBackground } from './background';
 export { uiBackgroundDisplayOptions } from './background_display_options';
 export { uiBackgroundOffset } from './background_offset';
 export { uiChangesetEditor } from './changeset_editor';
@@ -27,7 +26,6 @@ export { uiFlash } from './flash';
 export { uiFormFields } from './form_fields';
 export { uiFullScreen } from './full_screen';
 export { uiGeolocate } from './geolocate';
-export { uiHelp } from './help';
 export { uiImproveOsmComments } from './improveOSM_comments';
 export { uiImproveOsmDetails } from './improveOSM_details';
 export { uiImproveOsmEditor } from './improveOSM_editor';
@@ -40,7 +38,6 @@ export { uiKeepRightEditor } from './keepRight_editor';
 export { uiKeepRightHeader } from './keepRight_header';
 export { uiLasso } from './lasso';
 export { uiLoading } from './loading';
-export { uiMapData } from './map_data';
 export { uiMapInMap } from './map_in_map';
 export { uiModal } from './modal';
 export { uiNotice } from './notice';
@@ -48,7 +45,6 @@ export { uiNoteComments } from './note_comments';
 export { uiNoteEditor } from './note_editor';
 export { uiNoteHeader } from './note_header';
 export { uiNoteReport } from './note_report';
-export { uiPreferences } from './preferences';
 export { uiPresetEditor } from './preset_editor';
 export { uiPresetIcon } from './preset_icon';
 export { uiPresetList } from './preset_list';
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 3aa7dd7c8..b893cbf60 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -14,22 +14,17 @@ import { utilGetDimensions } from '../util/dimensions';
 
 import { uiAccount } from './account';
 import { uiAttribution } from './attribution';
-import { uiBackground } from './background';
 import { uiContributors } from './contributors';
 import { uiFeatureInfo } from './feature_info';
 import { uiFullScreen } from './full_screen';
 import { uiGeolocate } from './geolocate';
-import { uiHelp } from './help';
 import { uiInfo } from './info';
 import { uiIntro } from './intro';
-import { uiIssues } from './issues';
 import { uiIssuesInfo } from './issues_info';
 import { uiLoading } from './loading';
-import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
 import { uiNotice } from './notice';
 import { uiPhotoviewer } from './photoviewer';
-import { uiPreferences } from './preferences';
 import { uiRestore } from './restore';
 import { uiScale } from './scale';
 import { uiShortcuts } from './shortcuts';
@@ -42,6 +37,11 @@ import { uiVersion } from './version';
 import { uiZoom } from './zoom';
 import { uiCmd } from './cmd';
 
+import { uiBackground } from './panes/background';
+import { uiHelp } from './panes/help';
+import { uiIssues } from './panes/issues';
+import { uiMapData } from './panes/map_data';
+import { uiPreferences } from './panes/preferences';
 
 export function uiInit(context) {
     var _initCounter = 0;
@@ -106,35 +106,20 @@ export function uiInit(context) {
             .attr('class', 'map-control geolocate-control')
             .call(uiGeolocate(context));
 
-        var background = uiBackground(context);
-        controls
-            .append('div')
-            .attr('class', 'map-control background-control')
-            .call(background.renderToggleButton);
+        var uiPanes = [
+            uiBackground(context),
+            uiMapData(context),
+            uiIssues(context),
+            uiPreferences(context),
+            uiHelp(context)
+        ];
 
-        var mapData = uiMapData(context);
-        controls
-            .append('div')
-            .attr('class', 'map-control map-data-control')
-            .call(mapData.renderToggleButton);
-
-        var issues = uiIssues(context);
-        controls
-            .append('div')
-            .attr('class', 'map-control map-issues-control')
-            .call(issues.renderToggleButton);
-
-        var preferences = uiPreferences(context);
-        controls
-            .append('div')
-            .attr('class', 'map-control preferences-control')
-            .call(preferences.renderToggleButton);
-
-        var help = uiHelp(context);
-        controls
-            .append('div')
-            .attr('class', 'map-control help-control')
-            .call(help.renderToggleButton);
+        uiPanes.forEach(function(pane) {
+            controls
+                .append('div')
+                .attr('class', 'map-control ' + pane.id + '-control')
+                .call(pane.renderToggleButton);
+        });
 
         content
             .append('div')
@@ -252,12 +237,10 @@ export function uiInit(context) {
             .append('div')
             .attr('class', 'map-panes');
 
-        panes
-            .call(background.renderPane)
-            .call(mapData.renderPane)
-            .call(issues.renderPane)
-            .call(preferences.renderPane)
-            .call(help.renderPane);
+        uiPanes.forEach(function(pane) {
+            panes
+                .call(pane.renderPane);
+        });
 
         ui.info = uiInfo(context);
 
diff --git a/modules/ui/pane.js b/modules/ui/pane.js
new file mode 100644
index 000000000..1d221ba59
--- /dev/null
+++ b/modules/ui/pane.js
@@ -0,0 +1,118 @@
+import {
+    event as d3_event,
+    select as d3_select
+} from 'd3-selection';
+
+import { svgIcon } from '../svg/icon';
+import { textDirection } from '../util/locale';
+import { tooltip } from '../util/tooltip';
+import { uiTooltipHtml } from './tooltipHtml';
+
+
+export function uiPane(id, context) {
+
+    var _key;
+    var _title = '';
+    var _description = '';
+    var _iconName = '';
+
+    var _paneSelection = d3_select(null);
+
+    var _paneTooltip;
+
+    var pane = {
+        id: id
+    };
+
+    pane.title = function(val) {
+        if (!arguments.length) return _title;
+        _title = val;
+        return pane;
+    };
+
+    pane.key = function(val) {
+        if (!arguments.length) return _key;
+        _key = val;
+        return pane;
+    };
+
+    pane.description = function(val) {
+        if (!arguments.length) return _description;
+        _description = val;
+        return pane;
+    };
+
+    pane.iconName = function(val) {
+        if (!arguments.length) return _iconName;
+        _iconName = val;
+        return pane;
+    };
+
+    pane.selection = function() {
+        return _paneSelection;
+    };
+
+    function hidePane() {
+        context.ui().togglePanes();
+    }
+
+    pane.togglePane = function() {
+        if (d3_event) d3_event.preventDefault();
+        _paneTooltip.hide();
+        context.ui().togglePanes(!_paneSelection.classed('shown') ? _paneSelection : undefined);
+    };
+
+    pane.renderToggleButton = function(selection) {
+
+        if (!_paneTooltip) {
+            _paneTooltip = tooltip()
+                .placement((textDirection === 'rtl') ? 'right' : 'left')
+                .html(true)
+                .title(uiTooltipHtml(_description, _key));
+        }
+
+        selection
+            .append('button')
+            .on('click', pane.togglePane)
+            .call(svgIcon('#' + _iconName, 'light'))
+            .call(_paneTooltip);
+    };
+
+    pane.renderContent = function() {
+        // override
+    };
+
+    pane.renderPane = function(selection) {
+
+        _paneSelection = selection
+            .append('div')
+            .attr('class', 'fillL map-pane hide ' + id + '-pane')
+            .attr('pane', id);
+
+        var heading = _paneSelection
+            .append('div')
+            .attr('class', 'pane-heading');
+
+        heading
+            .append('h2')
+            .text(_title);
+
+        heading
+            .append('button')
+            .on('click', hidePane)
+            .call(svgIcon('#iD-icon-close'));
+
+
+        _paneSelection
+            .append('div')
+            .attr('class', 'pane-content')
+            .call(pane.renderContent);
+
+        if (_key) {
+            context.keybinding()
+                .on(_key, pane.togglePane);
+        }
+    };
+
+    return pane;
+}
diff --git a/modules/ui/background.js b/modules/ui/panes/background.js
similarity index 82%
rename from modules/ui/background.js
rename to modules/ui/panes/background.js
index 29003ecb3..90c9f8f36 100644
--- a/modules/ui/background.js
+++ b/modules/ui/panes/background.js
@@ -3,22 +3,22 @@ import _debounce from 'lodash-es/debounce';
 import { descending as d3_descending, ascending as d3_ascending } from 'd3-array';
 import { event as d3_event, select as d3_select } from 'd3-selection';
 
-import { t, textDirection } from '../util/locale';
-import { svgIcon } from '../svg/icon';
-import { uiBackgroundDisplayOptions } from './background_display_options';
-import { uiBackgroundOffset } from './background_offset';
-import { uiCmd } from './cmd';
-import { uiDisclosure } from './disclosure';
-import { uiMapInMap } from './map_in_map';
-import { uiSettingsCustomBackground } from './settings/custom_background';
-import { uiTooltipHtml } from './tooltipHtml';
-import { tooltip } from '../util/tooltip';
+import { t, textDirection } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { svgIcon } from '../../svg/icon';
+import { uiBackgroundDisplayOptions } from '../background_display_options';
+import { uiBackgroundOffset } from '../background_offset';
+import { uiCmd } from '../cmd';
+import { uiDisclosure } from '../disclosure';
+import { uiMapInMap } from '../map_in_map';
+import { uiSettingsCustomBackground } from '../settings/custom_background';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { uiPane } from '../pane';
 
 
 export function uiBackground(context) {
-    var key = t('background.key');
 
-    var _pane = d3_select(null);
+    var _key = t('background.key');
 
     var _customSource = context.background().findSource('custom');
     var _previousBackground = context.background().findSource(context.storage('background-last-used-toggle'));
@@ -51,7 +51,7 @@ export function uiBackground(context) {
                     .html(true)
                     .title(function() {
                         var tip = '<div>' + t('background.switch') + '</div>';
-                        return uiTooltipHtml(tip, uiCmd('⌘' + key));
+                        return uiTooltipHtml(tip, uiCmd('⌘' + _key));
                     })
                 );
             } else if (description || isOverflowing) {
@@ -292,11 +292,11 @@ export function uiBackground(context) {
 
 
     function update() {
-        if (!_pane.select('.disclosure-wrap-background_list').classed('hide')) {
+        if (!backgroundPane.selection().select('.disclosure-wrap-background_list').classed('hide')) {
             updateBackgroundList();
         }
 
-        if (!_pane.select('.disclosure-wrap-overlay_list').classed('hide')) {
+        if (!backgroundPane.selection().select('.disclosure-wrap-overlay_list').classed('hide')) {
             updateOverlayList();
         }
 
@@ -318,55 +318,14 @@ export function uiBackground(context) {
         }
     }
 
-    var paneTooltip = tooltip()
-        .placement((textDirection === 'rtl') ? 'right' : 'left')
-        .html(true)
-        .title(uiTooltipHtml(t('background.description'), key));
 
-    uiBackground.togglePane = function() {
-        if (d3_event) d3_event.preventDefault();
-        paneTooltip.hide();
-        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
-    };
+    var backgroundPane = uiPane('background', context)
+        .key(_key)
+        .title(t('background.title'))
+        .description(t('background.description'))
+        .iconName('iD-icon-layers');
 
-    function hidePane() {
-        context.ui().togglePanes();
-    }
-
-    uiBackground.renderToggleButton = function(selection) {
-
-        selection
-            .append('button')
-            .on('click', uiBackground.togglePane)
-            .call(svgIcon('#iD-icon-layers', 'light'))
-            .call(paneTooltip);
-    };
-
-    uiBackground.renderPane = function(selection) {
-
-        _pane = selection
-            .append('div')
-            .attr('class', 'fillL map-pane background-pane hide')
-            .attr('pane', 'background');
-
-
-        var heading = _pane
-            .append('div')
-            .attr('class', 'pane-heading');
-
-        heading
-            .append('h2')
-            .text(t('background.title'));
-
-        heading
-            .append('button')
-            .on('click', hidePane)
-            .call(svgIcon('#iD-icon-close'));
-
-
-        var content = _pane
-            .append('div')
-            .attr('class', 'pane-content');
+    backgroundPane.renderContent = function(content) {
 
         // background list
         content
@@ -411,9 +370,8 @@ export function uiBackground(context) {
         update();
 
         context.keybinding()
-            .on(key, uiBackground.togglePane)
-            .on(uiCmd('⌘' + key), quickSwitch);
+            .on(uiCmd('⌘' + _key), quickSwitch);
     };
 
-    return uiBackground;
+    return backgroundPane;
 }
diff --git a/modules/ui/help.js b/modules/ui/panes/help.js
similarity index 86%
rename from modules/ui/help.js
rename to modules/ui/panes/help.js
index d2e56f2d1..c23bde88e 100644
--- a/modules/ui/help.js
+++ b/modules/ui/panes/help.js
@@ -1,23 +1,17 @@
-import {
-    event as d3_event,
-    select as d3_select
-} from 'd3-selection';
 
 import marked from 'marked';
-import { svgIcon } from '../svg/icon';
-import { uiCmd } from './cmd';
-import { uiIntro } from './intro/intro';
-import { uiShortcuts } from './shortcuts';
-import { uiTooltipHtml } from './tooltipHtml';
+import { svgIcon } from '../../svg/icon';
+import { uiCmd } from '../cmd';
+import { uiIntro } from '../intro/intro';
+import { uiShortcuts } from '../shortcuts';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { uiPane } from '../pane';
 
-import { t, textDirection } from '../util/locale';
-import { tooltip } from '../util/tooltip';
-import { icon } from './intro/helper';
+import { t, textDirection } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { icon } from '../intro/helper';
 
 export function uiHelp(context) {
-    var key = t('help.key');
-
-    var _pane = d3_select(null);
 
     var docKeys = [
         ['help', [
@@ -281,36 +275,18 @@ export function uiHelp(context) {
         };
     });
 
-    var paneTooltip = tooltip()
-        .placement((textDirection === 'rtl') ? 'right' : 'left')
-        .html(true)
-        .title(uiTooltipHtml(t('help.title'), key));
+    var helpPane = uiPane('help', context)
+        .key(t('help.key'))
+        .title(t('help.title'))
+        .description(t('help.title'))
+        .iconName('iD-icon-help');
 
-    function hidePane() {
-        context.ui().togglePanes();
-    }
-
-    uiHelp.togglePane = function() {
-        if (d3_event) d3_event.preventDefault();
-        paneTooltip.hide();
-        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
-    };
-
-    uiHelp.renderToggleButton = function(selection) {
-
-        selection.append('button')
-            .on('click', uiHelp.togglePane)
-            .call(svgIcon('#iD-icon-help', 'light'))
-            .call(paneTooltip);
-    };
-
-
-    uiHelp.renderPane = function(selection) {
+    helpPane.renderContent = function(content) {
 
         function clickHelp(d, i) {
             var rtl = (textDirection === 'rtl');
             content.property('scrollTop', 0);
-            doctitle.html(d.title);
+            helpPane.selection().select('.pane-heading h2').html(d.title);
 
             body.html(d.html);
             body.selectAll('a')
@@ -373,29 +349,6 @@ export function uiHelp(context) {
             context.container().call(uiShortcuts(context), true);
         }
 
-
-        _pane = selection.append('div')
-            .attr('class', 'help-wrap map-pane fillL hide')
-            .attr('pane', 'help');
-
-        var heading = _pane
-            .append('div')
-            .attr('class', 'pane-heading');
-
-        var doctitle = heading
-            .append('h2')
-            .text(t('help.title'));
-
-        heading
-            .append('button')
-            .on('click', hidePane)
-            .call(svgIcon('#iD-icon-close'));
-
-
-        var content = _pane
-            .append('div')
-            .attr('class', 'pane-content');
-
         var toc = content
             .append('ul')
             .attr('class', 'toc');
@@ -454,10 +407,7 @@ export function uiHelp(context) {
 
         clickHelp(docs[0], 0);
 
-        context.keybinding()
-            .on(key, uiHelp.togglePane);
-
     };
 
-    return uiHelp;
+    return helpPane;
 }
diff --git a/modules/ui/issues.js b/modules/ui/panes/issues.js
similarity index 85%
rename from modules/ui/issues.js
rename to modules/ui/panes/issues.js
index 780741282..38705d204 100644
--- a/modules/ui/issues.js
+++ b/modules/ui/panes/issues.js
@@ -2,19 +2,18 @@ import _debounce from 'lodash-es/debounce';
 
 import { event as d3_event, select as d3_select } from 'd3-selection';
 
-import { t, textDirection } from '../util/locale';
-import { tooltip } from '../util/tooltip';
+import { t } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
 
 //import { actionNoop } from '../actions/noop';
-import { geoSphericalDistance } from '../geo';
-import { svgIcon } from '../svg/icon';
-import { uiDisclosure } from './disclosure';
-import { uiTooltipHtml } from './tooltipHtml';
-import { utilGetSetValue, utilHighlightEntities, utilNoAuto } from '../util';
+import { geoSphericalDistance } from '../../geo';
+import { svgIcon } from '../../svg/icon';
+import { uiDisclosure } from '../disclosure';
+import { utilGetSetValue, utilHighlightEntities, utilNoAuto } from '../../util';
+import { uiPane } from '../pane';
 
 
 export function uiIssues(context) {
-    var key = t('issues.key');
 
     var MINSQUARE = 0;
     var MAXSQUARE = 20;
@@ -23,8 +22,6 @@ export function uiIssues(context) {
     var _errorsSelection = d3_select(null);
     var _warningsSelection = d3_select(null);
     var _rulesList = d3_select(null);
-    var _pane = d3_select(null);
-    var _toggleButton = d3_select(null);
 
     var _errors = [];
     var _warnings = [];
@@ -42,22 +39,6 @@ export function uiIssues(context) {
     );
 
 
-    function addNotificationBadge(selection) {
-        var d = 10;
-        selection.selectAll('svg.notification-badge')
-            .data([0])
-            .enter()
-            .append('svg')
-            .attr('viewbox', '0 0 ' + d + ' ' + d)
-            .attr('class', 'notification-badge hide')
-            .append('circle')
-            .attr('cx', d / 2)
-            .attr('cy', d / 2)
-            .attr('r', (d / 2) - 1)
-            .attr('fill', 'currentColor');
-    }
-
-
     function renderErrorsList(selection) {
         _errorsSelection = selection
             .call(drawIssuesList, 'errors', _errors);
@@ -402,7 +383,7 @@ export function uiIssues(context) {
                 var opts = cases[type];
                 var hiddenIssues = context.validator().getIssues(opts);
                 if (hiddenIssues.length) {
-                    _pane.select('.issues-none .details')
+                    issuesPane.selection().select('.issues-none .details')
                         .text(t(
                             'issues.no_issues.hidden_issues.' + type,
                             { count: hiddenIssues.length.toString() }
@@ -410,7 +391,7 @@ export function uiIssues(context) {
                     return;
                 }
             }
-            _pane.select('.issues-none .details')
+            issuesPane.selection().select('.issues-none .details')
                 .text(t('issues.no_issues.hidden_issues.none'));
         }
 
@@ -465,7 +446,7 @@ export function uiIssues(context) {
             messageType = 'no_edits';
         }
 
-        _pane.select('.issues-none .message')
+        issuesPane.selection().select('.issues-none .message')
             .text(t('issues.no_issues.message.' + messageType));
 
     }
@@ -487,31 +468,25 @@ export function uiIssues(context) {
         _warnings = _warnings.slice(0, 1000);
 
 
-        _toggleButton.selectAll('.notification-badge')
-            .classed('error', (_errors.length > 0))
-            .classed('warning', (_errors.length === 0 && _warnings.length > 0))
-            .classed('hide', (_errors.length === 0 && _warnings.length === 0));
-
-
-        _pane.selectAll('.issues-errors')
+        issuesPane.selection().selectAll('.issues-errors')
             .classed('hide', _errors.length === 0);
 
         if (_errors.length > 0) {
-            _pane.selectAll('.hide-toggle-issues_errors .hide-toggle-text')
+            issuesPane.selection().selectAll('.hide-toggle-issues_errors .hide-toggle-text')
                 .text(t('issues.errors.list_title', { count: errorCount }));
-            if (!_pane.select('.disclosure-wrap-issues_errors').classed('hide')) {
+            if (!issuesPane.selection().select('.disclosure-wrap-issues_errors').classed('hide')) {
                 _errorsSelection
                     .call(drawIssuesList, 'errors', _errors);
             }
         }
 
-        _pane.selectAll('.issues-warnings')
+        issuesPane.selection().selectAll('.issues-warnings')
             .classed('hide', _warnings.length === 0);
 
         if (_warnings.length > 0) {
-            _pane.selectAll('.hide-toggle-issues_warnings .hide-toggle-text')
+            issuesPane.selection().selectAll('.hide-toggle-issues_warnings .hide-toggle-text')
                 .text(t('issues.warnings.list_title', { count: warningCount }));
-            if (!_pane.select('.disclosure-wrap-issues_warnings').classed('hide')) {
+            if (!issuesPane.selection().select('.disclosure-wrap-issues_warnings').classed('hide')) {
                 _warningsSelection
                     .call(drawIssuesList, 'warnings', _warnings);
                 renderIgnoredIssuesReset(_warningsSelection);
@@ -520,14 +495,14 @@ export function uiIssues(context) {
 
         var hasIssues = _warnings.length > 0 || _errors.length > 0;
 
-        var issuesNone = _pane.select('.issues-none');
+        var issuesNone = issuesPane.selection().select('.issues-none');
         issuesNone.classed('hide', hasIssues);
         if (!hasIssues) {
             renderIgnoredIssuesReset(issuesNone);
             setNoIssuesText();
         }
 
-        if (!_pane.select('.disclosure-wrap-issues_rules').classed('hide')) {
+        if (!issuesPane.selection().select('.disclosure-wrap-issues_rules').classed('hide')) {
             updateRulesList();
         }
 
@@ -654,58 +629,14 @@ export function uiIssues(context) {
     }
 
 
-    function hidePane() {
-        context.ui().togglePanes();
-    }
+    var issuesPane = uiPane('issues', context)
+        .key(t('issues.key'))
+        .title(t('issues.title'))
+        .description(t('issues.title'))
+        .iconName('iD-icon-alert');
 
 
-
-    var paneTooltip = tooltip()
-        .placement((textDirection === 'rtl') ? 'right' : 'left')
-        .html(true)
-        .title(uiTooltipHtml(t('issues.title'), key));
-
-
-
-    uiIssues.togglePane = function() {
-        if (d3_event) d3_event.preventDefault();
-        paneTooltip.hide();
-        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
-    };
-
-
-    uiIssues.renderToggleButton = function(selection) {
-        _toggleButton = selection
-            .append('button')
-            .on('click', uiIssues.togglePane)
-            .call(svgIcon('#iD-icon-alert', 'light'))
-            .call(addNotificationBadge)
-            .call(paneTooltip);
-    };
-
-
-    uiIssues.renderPane = function(selection) {
-        _pane = selection
-            .append('div')
-            .attr('class', 'fillL map-pane issues-pane hide')
-            .attr('pane', 'map-issues');
-
-        var heading = _pane
-            .append('div')
-            .attr('class', 'pane-heading');
-
-        heading
-            .append('h2')
-            .text(t('issues.title'));
-
-        heading
-            .append('button')
-            .on('click', hidePane)
-            .call(svgIcon('#iD-icon-close'));
-
-        var content = _pane
-            .append('div')
-            .attr('class', 'pane-content');
+    issuesPane.renderContent = function(content) {
 
         content
             .append('div')
@@ -743,10 +674,7 @@ export function uiIssues(context) {
             );
 
         // update();
-
-        context.keybinding()
-            .on(key, uiIssues.togglePane);
     };
 
-    return uiIssues;
+    return issuesPane;
 }
diff --git a/modules/ui/map_data.js b/modules/ui/panes/map_data.js
similarity index 92%
rename from modules/ui/map_data.js
rename to modules/ui/panes/map_data.js
index d6362a518..9686f87fc 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/panes/map_data.js
@@ -3,19 +3,19 @@ import {
     select as d3_select
 } from 'd3-selection';
 
-import { svgIcon } from '../svg/icon';
-import { t, textDirection } from '../util/locale';
-import { tooltip } from '../util/tooltip';
-import { geoExtent } from '../geo';
-import { modeBrowse } from '../modes/browse';
-import { uiDisclosure } from './disclosure';
-import { uiSettingsCustomData } from './settings/custom_data';
-import { uiTooltipHtml } from './tooltipHtml';
-import { uiCmd } from './cmd';
+import { svgIcon } from '../../svg/icon';
+import { t, textDirection } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { geoExtent } from '../../geo';
+import { modeBrowse } from '../../modes/browse';
+import { uiDisclosure } from '../disclosure';
+import { uiSettingsCustomData } from '../settings/custom_data';
+import { uiTooltipHtml } from '../tooltipHtml';
+import { uiCmd } from '../cmd';
+import { uiPane } from '../pane';
 
 
 export function uiMapData(context) {
-    var key = t('map_data.key');
     var osmDataToggleKey = uiCmd('⌥' + t('area_fill.wireframe.key'));
     var features = context.features().keys();
     var layers = context.layers();
@@ -24,8 +24,6 @@ export function uiMapData(context) {
     var settingsCustomData = uiSettingsCustomData(context)
         .on('change', customChanged);
 
-    var _pane = d3_select(null);
-
     var _fillSelected = context.storage('area-fill') || 'partial';
     var _dataLayerContainer = d3_select(null);
     var _photoOverlayContainer = d3_select(null);
@@ -775,16 +773,16 @@ export function uiMapData(context) {
 
     function update() {
 
-        if (!_pane.select('.disclosure-wrap-data_layers').classed('hide')) {
+        if (!mapDataPane.selection().select('.disclosure-wrap-data_layers').classed('hide')) {
             updateDataLayers();
         }
-        if (!_pane.select('.disclosure-wrap-photo_overlays').classed('hide')) {
+        if (!mapDataPane.selection().select('.disclosure-wrap-photo_overlays').classed('hide')) {
             updatePhotoOverlays();
         }
-        if (!_pane.select('.disclosure-wrap-fill_area').classed('hide')) {
+        if (!mapDataPane.selection().select('.disclosure-wrap-fill_area').classed('hide')) {
             updateFillList();
         }
-        if (!_pane.select('.disclosure-wrap-map_features').classed('hide')) {
+        if (!mapDataPane.selection().select('.disclosure-wrap-map_features').classed('hide')) {
             updateFeatureList();
         }
 
@@ -809,56 +807,13 @@ export function uiMapData(context) {
         context.map().pan([0,0]);  // trigger a redraw
     }
 
-    var paneTooltip = tooltip()
-        .placement((textDirection === 'rtl') ? 'right' : 'left')
-        .html(true)
-        .title(uiTooltipHtml(t('map_data.description'), key));
-
-    function hidePane() {
-        context.ui().togglePanes();
-    }
-
-    uiMapData.togglePane = function() {
-        if (d3_event) d3_event.preventDefault();
-        paneTooltip.hide();
-        context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
-    };
-
-    uiMapData.renderToggleButton = function(selection) {
-
-        selection
-            .append('button')
-            .on('click', uiMapData.togglePane)
-            .call(svgIcon('#iD-icon-data', 'light'))
-            .call(paneTooltip);
-    };
-
-
-    uiMapData.renderPane = function(selection) {
-
-        _pane = selection
-            .append('div')
-            .attr('class', 'fillL map-pane map-data-pane hide')
-            .attr('pane', 'map-data');
-
-        var heading = _pane
-            .append('div')
-            .attr('class', 'pane-heading');
-
-        heading
-            .append('h2')
-            .text(t('map_data.title'));
-
-        heading
-            .append('button')
-            .on('click', hidePane)
-            .call(svgIcon('#iD-icon-close'));
-
-
-        var content = _pane
-            .append('div')
-            .attr('class', 'pane-content');
+    var mapDataPane = uiPane('map-data', context)
+        .key(t('map_data.key'))
+        .title(t('map_data.title'))
+        .description(t('map_data.description'))
+        .iconName('iD-icon-data');
 
+    mapDataPane.renderContent = function(content) {
 
         // data layers
         content
@@ -905,7 +860,6 @@ export function uiMapData(context) {
         setFill(_fillSelected);
 
         context.keybinding()
-            .on(key, uiMapData.togglePane)
             .on(t('area_fill.wireframe.key'), toggleWireframe)
             .on(osmDataToggleKey, function() {
                 d3_event.preventDefault();
@@ -915,5 +869,5 @@ export function uiMapData(context) {
             .on(t('map_data.highlight_edits.key'), toggleHighlightEdited);
     };
 
-    return uiMapData;
-}
\ No newline at end of file
+    return mapDataPane;
+}
diff --git a/modules/ui/preferences.js b/modules/ui/panes/preferences.js
similarity index 56%
rename from modules/ui/preferences.js
rename to modules/ui/panes/preferences.js
index 1b4364378..db284ace5 100644
--- a/modules/ui/preferences.js
+++ b/modules/ui/panes/preferences.js
@@ -1,23 +1,15 @@
-import { event as d3_event, select as d3_select } from 'd3-selection';
+import { event as d3_event } from 'd3-selection';
 
-import { svgIcon } from '../svg/icon';
-import { t, textDirection } from '../util/locale';
-import { tooltip } from '../util/tooltip';
-import { uiDisclosure } from './disclosure';
-import { uiTooltipHtml } from './tooltipHtml';
+import { svgIcon } from '../../svg/icon';
+import { t } from '../../util/locale';
+import { tooltip } from '../../util/tooltip';
+import { uiDisclosure } from '../disclosure';
+import { uiPane } from '../pane';
 
 
 export function uiPreferences(context) {
-  const key = t('preferences.key');
-  let _pane = d3_select(null);
   let _showThirdPartyIcons = context.storage('preferences.privacy.thirdpartyicons') || 'true';
 
-  const paneTooltip = tooltip()
-    .placement((textDirection === 'rtl') ? 'right' : 'left')
-    .html(true)
-    .title(uiTooltipHtml(t('preferences.description'), key));
-
-
   function renderPrivacyOptions(selection) {
     // enter
     let privacyOptionsListEnter = selection.selectAll('.privacy-options-list')
@@ -74,46 +66,13 @@ export function uiPreferences(context) {
     }
   }
 
+  let preferencesPane = uiPane('preferences', context)
+    .key(t('preferences.key'))
+    .title(t('preferences.title'))
+    .description(t('preferences.description'))
+    .iconName('fas-user-cog');
 
-  uiPreferences.togglePane = () => {
-    if (d3_event) d3_event.preventDefault();
-    paneTooltip.hide();
-    context.ui().togglePanes(!_pane.classed('shown') ? _pane : undefined);
-  };
-
-
-  uiPreferences.renderToggleButton = (selection) => {
-    selection
-      .append('button')
-      .on('click', uiPreferences.togglePane)
-      .call(svgIcon('#fas-user-cog', 'light'))
-      .call(paneTooltip);
-  };
-
-
-  uiPreferences.renderPane = (selection) => {
-    _pane = selection
-      .append('div')
-      .attr('class', 'fillL map-pane preferences-pane hide')
-      .attr('pane', 'preferences');
-
-    let heading = _pane
-      .append('div')
-      .attr('class', 'pane-heading');
-
-    heading
-      .append('h2')
-      .text(t('preferences.title'));
-
-    heading
-      .append('button')
-      .on('click', () => context.ui().togglePanes())
-      .call(svgIcon('#iD-icon-close'));
-
-
-    let content = _pane
-      .append('div')
-      .attr('class', 'pane-content');
+  preferencesPane.renderContent = (content) => {
 
     content
       .append('div')
@@ -122,10 +81,7 @@ export function uiPreferences(context) {
         .title(t('preferences.privacy.title'))
         .content(renderPrivacyOptions)
       );
-
-    context.keybinding()
-      .on(key, uiPreferences.togglePane);
   };
 
-  return uiPreferences;
+  return preferencesPane;
 }