diff --git a/css/app.css b/css/app.css
index d1348a0f7..8a625152c 100644
--- a/css/app.css
+++ b/css/app.css
@@ -70,12 +70,12 @@ h2:last-child,
 h4:last-child { margin-bottom: 0;}
 
 h3 {
-    font-size: 18px;
+    font-size: 16px;
     line-height: 1.3333;
     font-weight: bold;
     margin-bottom: 10px;
     text-overflow: ellipsis;
-    white-space: nowrap
+    white-space: nowrap;
 }
 
 h4 {
@@ -134,6 +134,7 @@ a:hover {
 
 textarea  {
     resize: vertical;
+    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
 }
 
 textarea,
@@ -285,9 +286,6 @@ form.hide {
 }
 
 .pad1    {padding: 10px;}
-.pad2    {padding: 20px;}
-.margin1 {margin: 10px;}
-.margin2 {margin: 20px;}
 
 .loading {
     background: url(../img/loader_bg.gif);
@@ -443,12 +441,6 @@ button.save.has-count .count::before {
     border-right:  6px solid rgba(255,255,255,.5);
 }
 
-button.close {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-}
-
 button[disabled] {
     cursor:auto;
     background: rgba(255,255,255,.5);
@@ -580,6 +572,37 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     border-radius: 0;
 }
 
+
+/* Header for modals / panes
+------------------------------------------------------- */
+
+.header {
+    border-bottom: 1px solid #ccc;
+    z-index: 2;
+    position: relative;
+}
+
+.header h3 {
+    margin-bottom: 0;
+}
+
+.modal > button,
+.header button {
+    height: 100%;
+    border-radius: 0;
+    border-left: 1px solid #CCC;
+    width: 40px;
+    text-align: center;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+}
+
+.modal > button {
+    height: 61px;
+    z-index: 3;
+}
+
 /* Inspector
 ------------------------------------------------------- */
 
@@ -616,24 +639,13 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     position: relative;
 }
 
-.inspector-wrap .message {
-    height: 60px;
-    border-bottom: 1px solid #ccc;
-    z-index: 100;
-    position: relative;
-}
-
-.inspector-wrap .message button {
-    height: 100%;
-    border-radius: 0;
+.inspector-wrap .header button.preset-reset {
     border-right: 1px solid #CCC;
-    width: 60px;
-    text-align: center;
-    overflow: hidden;
     position: relative;
+    width: 60px;
 }
 
-.inspector-wrap .message button > div {
+.inspector-wrap .header button.preset-reset > div {
     height: 100%;
     padding: 20px 0;
     -webkit-transition: opacity 200ms;
@@ -641,38 +653,26 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
             transition: opacity 200ms;
 }
 
-.inspector-wrap .message button .col12:last-child {
+.inspector-wrap .header button.preset-reset .col12:last-child {
     position: absolute;
     width: 100%;
     padding: 20px 0;
     opacity: 0;
 }
 
-.inspector-wrap .message button:hover .col12:first-child {
+.inspector-wrap .header button:hover .col12:first-child {
     opacity: 0;
 }
 
-.inspector-wrap .message button:hover .col12:last-child {
+.inspector-wrap .header button:hover .col12:last-child {
     opacity: 1;
 }
 
-.inspector-wrap .message button.line > div {
+.inspector-wrap .header button.line > div {
     padding: 0;
 }
 
-.inspector-wrap .message button.fr {
-    border-left: 1px solid #CCC;
-    width: 40px;
-}
-
-.inspector-wrap .message h3 {
-    display: block;
-    font-size: 16px;
-    line-height: 20px;
-    overflow: hidden;
-}
-
-.pane:last-child .message h3 {
+.pane:last-child .header h3 {
     position: absolute;
     left: 60px;
     right: 40px;
@@ -1639,11 +1639,9 @@ div.typeahead a:first-child {
 .modal {
     display: inline-block;
     position:absolute;
-    width: 50%;
     left: 0;
     right: 0;
     margin: auto;
-    max-width: 600px;
     top: 80px;
     z-index: 3;
 }
@@ -1652,27 +1650,10 @@ div.typeahead a:first-child {
     margin-bottom: 10px;
 }
 
-.modal .content {
-    margin-bottom: 40px;
-}
-
 .modal .description {
     text-align: center;
 }
 
-.modal button.close-modal {
-    float:right;
-    position: absolute;
-    right:5px;
-    top:5px;
-    opacity: .5;
-}
-
-.modal button.close-modal:hover {
-    background-color: transparent;
-    opacity: 1;
-}
-
 .shaded {
     z-index: 2;
     position: absolute;
@@ -1680,6 +1661,7 @@ div.typeahead a:first-child {
     width: 100%;
     overflow: auto;
 }
+
 .shaded:before {
     content:'';
     background:rgba(0,0,0,0.5);
@@ -1689,29 +1671,7 @@ div.typeahead a:first-child {
 
 .modal-section {
     padding: 20px;
-}
-
-.modal-section:first-child {
-    border-radius: 4px 4px 0 0;
-}
-
-.modal-section:last-child {
-    border-radius: 0 0 4px 4px;
-}
-
-.modal-section:only-of-type {
-    border-radius: 4px;
-}
-
-.modal-section .buttons {
-    padding-top: 10px;
-    width: 100%;
-}
-
-.modal-section img.wiki-image {
-    max-width: 100%;
-    max-height: 300px;
-    display: block;
+    border-bottom: 1px solid #CCC;
 }
 
 .modal-flash .content {
@@ -1752,6 +1712,7 @@ div.typeahead a:first-child {
 
 .commit-modal .commit-info {
     margin-top: 10px;
+    padding-bottom: 20px;
 }
 
 .commit-modal .user-info img {
@@ -1775,66 +1736,46 @@ div.typeahead a:first-child {
 .commit-modal .changeset-list {
     overflow: auto;
     border:1px solid #ccc;
+    border-radius: 4px;
     background:#fff;
     max-height: 160px;
 }
 
+.commit-modal .warning-section .changeset-list {
+    border-radius: 4px 0 0 4px;
+}
+
 .commit-modal .warning-section .changeset-list  button {
     float: right;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: 0;
+    height: 100%;
+    width: 30px;
 }
 
-.commit-section.modal-section {
-    padding-bottom: 0;
-}
-
-.commit-section.modal-section:last-child { padding-bottom: 20px;}
-
 .commit-modal .changeset-list li {
     position: relative;
     border-top:1px solid #ccc;
     padding:5px 10px;
 }
 
-.modal-section {
-    padding: 20px;
-}
-
-.modal-section img.wiki-image {
-    max-width: 100%;
-    max-height: 300px;
-    display: block;
-}
-
-.modal-flash .content {
-    box-shadow: none;
-    border-radius: 4px;
-    background: #111;
-    color: #eee;
-}
-
-.modal-flash .close-modal {
-    display:none;
-}
-
 .changeset-list li span.count {
     font-size:10px;
     color:#555;
 }
 
 .changeset-list li span.count:before { content: '('; }
+
 .changeset-list li span.count:after { content: ')'; }
 
 .changeset-list li:first-child { border-top: 0;}
 
-.commit-modal .changeset-comment {
-    height: 60px;
-    width:100%;
-    /* firefox uses monospace in textareas */
-    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
-}
-
 /* Success
 ------------------------------------------------------- */
+
 a.success-action {
   display:inline-block;
   padding:10px;
@@ -2098,10 +2039,10 @@ a.success-action {
 ------------------------------------------------------- */
 
 @media only screen and (max-width: 840px) {
-    span.label {display: none;}
+    #bar span.label {display: none;}
+    #bar .icon.icon-pre-text { margin-right: 0px;}
     /* override hide for save button */
-    .icon.icon-pre-text { margin-right: 0px;}
-    .save .label, .apply .label, .cancel .label { display: block;}
+    #bar .save .label { display: block;}
 }
 
 @media only screen and (max-height: 840px) {
diff --git a/data/core.yaml b/data/core.yaml
index ff65d5278..efe40d55f 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -114,6 +114,7 @@ en:
   commit:
     title: Save Changes
     description_placeholder: Brief description of your contributions
+    message_label: Commit message
     upload_explanation: "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data."
     save: Save
     cancel: Cancel
diff --git a/data/locales.js b/data/locales.js
index 9e159756e..159850ab2 100644
--- a/data/locales.js
+++ b/data/locales.js
@@ -146,6 +146,7 @@ locale.en = {
     "commit": {
         "title": "Save Changes",
         "description_placeholder": "Brief description of your contributions",
+        "message_label": "Commit message",
         "upload_explanation": "The changes you upload as {user} will be visible on all maps that use OpenStreetMap data.",
         "save": "Save",
         "cancel": "Cancel",
diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js
index efdc1c190..770bb67f3 100644
--- a/js/id/ui/commit.js
+++ b/js/id/ui/commit.js
@@ -28,22 +28,30 @@ iD.ui.Commit = function(context) {
         var changes = selection.datum(),
             connection = changes.connection,
             user = connection.user(),
-            header = selection.append('div').attr('class', 'header modal-section fillL'),
+            header = selection.append('div').attr('class', 'header modal-section'),
             body = selection.append('div').attr('class', 'body');
 
-        header.append('h2')
+        header.append('h3')
             .text(t('commit.title'));
 
+        // Comment Section
         var commentSection = body.append('div')
-            .attr('class', 'modal-section fillD');
+            .attr('class', 'modal-section preset-field');
 
-        var commentField = commentSection.append('textarea')
-            .attr('class', 'changeset-comment')
-            .attr('placeholder', t('commit.description_placeholder'))
-            .property('value',  context.storage('comment') || '');
+            commentSection.append('h4')
+                .attr('for','input-commit-note')
+                .text(t('commit.message_label'));
+
+        var commentField = commentSection
+                .append('textarea')
+                .attr('placeholder', t('commit.description_placeholder'))
+                .property('value',  context.storage('comment') || '');
 
         commentField.node().select();
 
+        // Save Section
+        var saveSection = body.append('div').attr('class','modal-section cf');
+
         var userLink = d3.select(document.createElement('div'));
 
         if (user.image_url) {
@@ -58,18 +66,14 @@ iD.ui.Commit = function(context) {
             .attr('href', connection.url() + '/user/' + user.display_name)
             .attr('target', '_blank');
 
-        commentSection.append('p')
+        saveSection.append('p')
             .attr('class', 'commit-info')
             .html(t('commit.upload_explanation', {user: userLink.html()}));
 
         // Confirm / Cancel Buttons
-        var buttonWrap = commentSection.append('div')
-            .attr('class', 'buttons cf')
-            .append('div')
-            .attr('class', 'button-wrap joined col4');
 
-        var saveButton = buttonWrap.append('button')
-            .attr('class', 'save action col6 button')
+        var saveButton = saveSection.append('button')
+            .attr('class', 'action col3 button')
             .on('click.save', function() {
                 var comment = commentField.node().value;
                 localStorage.comment = comment;
@@ -82,21 +86,11 @@ iD.ui.Commit = function(context) {
             .attr('class', 'label')
             .text(t('commit.save'));
 
-        var cancelButton = buttonWrap.append('button')
-            .attr('class', 'cancel col6 button')
-            .on('click.cancel', function() {
-                event.cancel();
-            });
-
-        cancelButton.append('span')
-            .attr('class', 'label')
-            .text(t('commit.cancel'));
-
         var warnings = body.selectAll('div.warning-section')
             .data(iD.validate(changes, context.graph()))
             .enter()
             .append('div')
-            .attr('class', 'modal-section warning-section fillL');
+            .attr('class', 'modal-section warning-section fillL2');
 
         warnings.append('h3')
             .text(t('commit.warnings'));
diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js
index 6851e739f..5ff8f72f8 100644
--- a/js/id/ui/confirm.js
+++ b/js/id/ui/confirm.js
@@ -5,7 +5,7 @@ iD.ui.confirm = function(selection) {
         .classed('modal-alert', true);
 
     var section = modal.select('.content')
-        .attr('class', 'modal-section fillD');
+        .attr('class', 'modal-section');
 
     var description = section.append('div')
         .attr('class', 'description');
@@ -17,13 +17,7 @@ iD.ui.confirm = function(selection) {
         .attr('class', 'col2 action centered')
         .on('click.confirm', function() {
             modal.remove();
-        });
-
-    okbutton.append('span')
-        .attr('class', 'icon apply icon-pre-text');
-
-    okbutton.append('span')
-        .attr('class', 'label')
+        })
         .text('Okay');
 
     return modal;
diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js
index 539c89de8..5da396a2b 100644
--- a/js/id/ui/modal.js
+++ b/js/id/ui/modal.js
@@ -21,13 +21,15 @@ iD.ui.modal = function(selection, blocking) {
         });
 
     var modal = shaded.append('div')
-        .attr('class', 'modal');
+        .attr('class', 'modal fillL col6');
 
     modal.append('button')
-        .attr('class', 'icon remove')
+        .attr('class', 'close')
         .on('click', function() {
             if (!blocking) shaded.remove();
-        });
+        })
+        .append('div')
+            .attr('class','icon close');
 
     modal.append('div')
         .attr('class', 'content');
diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js
index 1ed641149..004de7510 100644
--- a/js/id/ui/preset_grid.js
+++ b/js/id/ui/preset_grid.js
@@ -12,7 +12,7 @@ iD.ui.PresetGrid = function(context, entity) {
         presets = context.presets().matchGeometry(entity, context.graph());
 
         var messagewrap = selection.append('div')
-            .attr('class', 'message fillL');
+            .attr('class', 'header fillL cf');
 
         var message = messagewrap.append('h3')
             .attr('class', 'inspector-inner fl')
@@ -20,13 +20,13 @@ iD.ui.PresetGrid = function(context, entity) {
 
         if (preset) {
             messagewrap.append('button')
-                .attr('class', 'tooltip-bottom preset-choose fr')
+                .attr('class', 'preset-choose')
                 .on('click', event.choose)
                 .append('span')
                 .attr('class', 'icon forward');
         } else {
             messagewrap.append('button')
-                .attr('class', 'tooltip-bottom preset-close fr')
+                .attr('class', 'close')
                 .on('click', event.close)
                 .append('span')
                 .attr('class', 'icon close');
diff --git a/js/id/ui/restore.js b/js/id/ui/restore.js
index 0c3d0a617..e5d272004 100644
--- a/js/id/ui/restore.js
+++ b/js/id/ui/restore.js
@@ -16,7 +16,7 @@ iD.ui.Restore = function(context) {
             .text(t('restore.description'));
 
         var buttonWrap = introModal.append('div')
-            .attr('class', 'modal-section fillD cf col12');
+            .attr('class', 'modal-section cf col12');
 
         var buttons = buttonWrap
             .append('div')
diff --git a/js/id/ui/success.js b/js/id/ui/success.js
index 4d4799ffd..fd3f14c0b 100644
--- a/js/id/ui/success.js
+++ b/js/id/ui/success.js
@@ -3,12 +3,10 @@ iD.ui.Success = function(connection) {
 
     function success(selection) {
         var changeset = selection.datum(),
-            header = selection.append('div').attr('class', 'header fillL modal-section'),
+            header = selection.append('div').attr('class', 'header modal-section'),
             body = selection.append('div').attr('class', 'body');
 
-        var section = body.append('div').attr('class','modal-section fillD');
-
-        header.append('h2').text(t('just_edited'));
+        header.append('h3').text(t('just_edited'));
 
         var m = '';
         if (changeset.comment) {
@@ -18,7 +16,9 @@ iD.ui.Success = function(connection) {
         var message = (m || 'Edited OSM!') +
             connection.changesetUrl(changeset.id);
 
-        header.append('a')
+        var links = body.append('div').attr('class','modal-section');
+
+        links.append('a')
             .attr('href', function() {
                 return connection.changesetUrl(changeset.id);
             })
@@ -26,7 +26,7 @@ iD.ui.Success = function(connection) {
             .attr('class', 'success-action')
             .text(t('view_on_osm'));
 
-        header.append('a')
+        links.append('a')
             .attr('target', '_blank')
             .attr('href', function() {
                 return 'https://twitter.com/intent/tweet?source=webclient&text=' +
@@ -35,17 +35,14 @@ iD.ui.Success = function(connection) {
             .attr('class', 'success-action')
             .text('Tweet');
 
-        var buttonwrap = section.append('div')
-            .attr('class', 'buttons cf');
+        var section = body.append('div').attr('class','modal-section cf');
 
-        var okbutton = buttonwrap.append('button')
+        section.append('button')
             .attr('class', 'action col2')
             .on('click.save', function() {
                 event.cancel();
-            });
-
-        okbutton.append('span').attr('class','icon apply icon-pre-text');
-        okbutton.append('span').attr('class','label').text('Okay');
+            })
+            .append('span').attr('class','label').text('Okay');
     }
 
     return d3.rebind(success, event, 'on');
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index 79ebedf9b..a97cb3afe 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -27,7 +27,7 @@ iD.ui.TagEditor = function(context, entity) {
         selection.html('');
 
         var messagewrap = selection.append('div')
-            .attr('class', 'message fillL');
+            .attr('class', 'header fillL cf');
 
         var back = messagewrap.append('button')
             .attr('class', 'preset-reset fl ' + geometry)