diff --git a/HISTORY.md b/HISTORY.md
index 5328570..51091b1 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -6,6 +6,7 @@ https://github.com/josdejong/jsoneditor
 ## not yet released, version 5.32.2
 
 - Fixed #416: Clipped action menu for append nodes.
+- Styling improvements in the transform modal.
 
 
 ## 2018-03-28, version 5.32.1
diff --git a/src/css/contextmenu.css b/src/css/contextmenu.css
index 0c8162c..1898fce 100644
--- a/src/css/contextmenu.css
+++ b/src/css/contextmenu.css
@@ -262,13 +262,16 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 
 .jsoneditor-modal table th,
 .jsoneditor-modal table td {
-  padding: 5px 20px 5px 0;
-
   text-align: left;
   vertical-align: top;
   font-weight: normal;
   color: #4d4d4d;
-  line-height: 32px;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.jsoneditor-modal table td {
+  padding: 5px 0;
 }
 
 .jsoneditor-modal p:first-child {
@@ -282,6 +285,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 .jsoneditor-modal table td:first-child {
 }
 
+.jsoneditor-modal .jsoneditor-jmespath-block {
+  margin-bottom: 10px;
+}
+
 .jsoneditor-modal table td.jsoneditor-modal-input {
   text-align: right;
   padding-right: 0;
@@ -323,6 +330,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
   font-family: arial, sans-serif;
 }
 
+.jsoneditor-modal table th {
+  vertical-align: middle;
+}
+
 .jsoneditor-modal #query,
 .jsoneditor-modal .jsoneditor-transform-preview {
   font-family: "dejavu sans mono", "droid sans mono", consolas, monaco, "lucida console", "courier new", courier, monospace, sans-serif;
@@ -433,12 +444,21 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 .jsoneditor-modal .jsoneditor-jmespath-wizard {
   line-height: 1.2em;
   width: 100%;
-  background: #ffffe0;
-  border: 1px solid #ffe99a;
-  padding: 0 10px 10px;
+  padding: 0;
   border-radius: 3px;
 }
 
+.jsoneditor-modal .jsoneditor-jmespath-label {
+  font-weight: bold;
+  color: dodgerblue;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.jsoneditor-modal .jsoneditor-jmespath-wizard-table {
+  width: 100%;
+}
+
 .jsoneditor-modal .jsoneditor-jmespath-wizard-label {
   font-style: italic;
   margin: 4px 0 2px 0;
@@ -448,7 +468,10 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
   position: relative;
   display: inline-block;
   width: 100%;
-  padding: 2px;
+}
+
+.jsoneditor-modal .jsoneditor-inline:not(:last-child) {
+  padding-right: 2px;
 }
 
 .jsoneditor-modal .jsoneditor-jmespath-filter {
diff --git a/src/js/showTransformModal.js b/src/js/showTransformModal.js
index 0c1d061..ff20813 100644
--- a/src/js/showTransformModal.js
+++ b/src/js/showTransformModal.js
@@ -21,84 +21,75 @@ function showTransformModal (node, container) {
       'Enter a <a href="http://jmespath.org" target="_blank">JMESPath</a> query to filter, sort, or transform the JSON data.<br/>' +
       'To learn JMESPath, go to <a href="http://jmespath.org/tutorial.html" target="_blank">the interactive tutorial</a>.' +
       '</p>' +
-      '<table>' +
-      '<tbody>' +
-      '<tr>' +
-      '  <th>' + translate('transformWizardLabel') + ' </th>' +
-      '  <td>' +
-      '  <div id="wizard" class="jsoneditor-jmespath-wizard">' +
-      '  <div>' +
-      '    <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardFilter') + '</div>' +
-      '    <div class="jsoneditor-jmespath-filter">' +
-      '      <div class="jsoneditor-inline jsoneditor-jmespath-filter-field" >' +
-      '        <select id="filterField">' +
-      '        </select>' +
-      '      </div>' +
-      '      <div class="jsoneditor-inline jsoneditor-jmespath-filter-relation" >' +
-      '        <select id="filterRelation">' +
-      '          <option value="==">==</option>' +
-      '          <option value="!=">!=</option>' +
-      '          <option value="<">&lt;</option>' +
-      '          <option value="<=">&lt;=</option>' +
-      '          <option value=">">&gt;</option>' +
-      '          <option value=">=">&gt;=</option>' +
-      '        </select>' +
-      '      </div>' +
-      '      <div class="jsoneditor-inline jsoneditor-jmespath-filter-value" >' +
-      '        <input placeholder="value..." id="filterValue" />' +
-      '      </div>' +
-      '    </div>' +
-      '  </div>' +
-      '  <div>' +
-      '    <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSortBy') + '</div>' +
-      '    <div class="jsoneditor-jmespath-filter">' +
-      '      <div class="jsoneditor-inline jsoneditor-jmespath-sort-field">' +
-      '        <select id="sortField">' +
-      '        </select>' +
-      '      </div>' +
-      '      <div class="jsoneditor-inline jsoneditor-jmespath-sort-order" >' +
-      '        <select id="sortOrder">' +
-      '          <option value="asc">Ascending</option>' +
-      '          <option value="desc">Descending</option>' +
-      '        </select>' +
-      '      </div>' +
-      '    </div>' +
-      '  </div>' +
-      '  <div id="selectFieldsPart">' +
-      '    <div class="jsoneditor-jmespath-wizard-label">' + translate('transformWizardSelectFields') + '</div>' +
-      '    <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple>' +
-      '    </select>' +
-      '  </div>' +
-      '  </div>' +
-      '  </td>' +
-      '</tr>' +
-      '<tr>' +
-      '  <th>' + translate('transformQueryLabel') + ' </th>' +
-      '  <td class="jsoneditor-modal-input">' +
-      '    <textarea id="query" ' +
-      '              rows="4" ' +
-      '              autocomplete="off" ' +
-      '              autocorrect="off" ' +
-      '              autocapitalize="off" ' +
-      '              spellcheck="false"' +
-      '              title="' + translate('transformQueryTitle') + '">[*]</textarea>' +
-      '  </td>' +
-      '</tr>' +
-      '<tr>' +
-      '  <th>' + translate('transformPreviewLabel') + ' </th>' +
-      '  <td class="jsoneditor-modal-input">' +
-      '    <textarea id="preview" ' +
-      '        class="jsoneditor-transform-preview"' +
-      '        readonly> </textarea>' +
-      '  </td>' +
-      '</tr>' +
-      '<tr>' +
-      '<td colspan="2" class="jsoneditor-modal-input jsoneditor-modal-actions">' +
+      '<div class="jsoneditor-jmespath-label">' + translate('transformWizardLabel') + ' </div>' +
+      '<div id="wizard" class="jsoneditor-jmespath-block jsoneditor-jmespath-wizard">' +
+      '  <table class="jsoneditor-jmespath-wizard-table">' +
+      '    <tbody>' +
+      '      <tr>' +
+      '        <th>' + translate('transformWizardFilter') + '</th>' +
+      '        <td class="jsoneditor-jmespath-filter">' +
+      '          <div class="jsoneditor-inline jsoneditor-jmespath-filter-field" >' +
+      '            <select id="filterField">' +
+      '            </select>' +
+      '          </div>' +
+      '          <div class="jsoneditor-inline jsoneditor-jmespath-filter-relation" >' +
+      '            <select id="filterRelation">' +
+      '              <option value="==">==</option>' +
+      '              <option value="!=">!=</option>' +
+      '              <option value="<">&lt;</option>' +
+      '              <option value="<=">&lt;=</option>' +
+      '              <option value=">">&gt;</option>' +
+      '              <option value=">=">&gt;=</option>' +
+      '            </select>' +
+      '          </div>' +
+      '          <div class="jsoneditor-inline jsoneditor-jmespath-filter-value" >' +
+      '            <input placeholder="value..." id="filterValue" />' +
+      '          </div>' +
+      '        </td>' +
+      '      </tr>' +
+      '      <tr>' +
+      '        <th>' + translate('transformWizardSortBy') + '</th>' +
+      '        <td class="jsoneditor-jmespath-filter">' +
+      '          <div class="jsoneditor-inline jsoneditor-jmespath-sort-field">' +
+      '            <select id="sortField">' +
+      '            </select>' +
+      '          </div>' +
+      '          <div class="jsoneditor-inline jsoneditor-jmespath-sort-order" >' +
+      '            <select id="sortOrder">' +
+      '              <option value="asc">Ascending</option>' +
+      '              <option value="desc">Descending</option>' +
+      '            </select>' +
+      '          </div>' +
+      '        </td>' +
+      '      </tr>' +
+      '      <tr>' +
+      '        <th>' + translate('transformWizardSelectFields') + '</th>' +
+      '        <td class="jsoneditor-jmespath-filter">' +
+      '          <select class="jsoneditor-jmespath-select-fields" id="selectFields" multiple></select>' +
+      '        </td>' +
+      '      </tr>' +
+      '    </tbody>' +
+      '  </table>' +
+      '</div>' +
+      '<div class="jsoneditor-jmespath-label">' + translate('transformQueryLabel') + ' </div>' +
+      '<div class="jsoneditor-jmespath-block">' +
+      '  <textarea id="query" ' +
+      '            rows="4" ' +
+      '            autocomplete="off" ' +
+      '            autocorrect="off" ' +
+      '            autocapitalize="off" ' +
+      '            spellcheck="false"' +
+      '            title="' + translate('transformQueryTitle') + '">[*]</textarea>' +
+      '</div>' +
+      '<div class="jsoneditor-jmespath-label">' + translate('transformPreviewLabel') + ' </div>' +
+      '<div class="jsoneditor-jmespath-block">' +
+      '  <textarea id="preview" ' +
+      '      class="jsoneditor-transform-preview"' +
+      '      readonly> </textarea>' +
+      '</div>' +
+      '<div class="jsoneditor-jmespath-block jsoneditor-modal-actions">' +
       '  <input type="submit" id="ok" value="' + translate('ok') + '" autofocus />' +
-      '</td>' +
-      '</tr>' +
-      '</tbody>' +
-      '</table>' +
+      '</div>' +
       '</div>';
 
   picoModal({
@@ -123,11 +114,8 @@ function showTransformModal (node, container) {
         var preview = elem.querySelector('#preview');
 
         if (!Array.isArray(value)) {
-          wizard.style.display = 'none';
-          wizard.parentNode.style.fontStyle = 'italic';
-          wizard.parentNode.appendChild(
-              document.createTextNode('(wizard not available for objects, only for arrays)')
-          );
+          wizard.style.fontStyle = 'italic';
+          wizard.innerHTML = '(wizard not available for objects, only for arrays)'
         }
 
         var paths = node.getChildPaths();
@@ -165,7 +153,7 @@ function showTransformModal (node, container) {
         var selectrFilterRelation = new Selectr(filterRelation, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'compare...' });
         var selectrSortField = new Selectr(sortField, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'field...' });
         var selectrSortOrder = new Selectr(sortOrder, { defaultSelected: false, clearable: true, allowDeselect: true, placeholder: 'order...' });
-        var selectrSelectFields = new Selectr(selectFields, {multiple: true, clearable: true, defaultSelected: false});
+        var selectrSelectFields = new Selectr(selectFields, {multiple: true, clearable: true, defaultSelected: false, placeholder: 'select fields...'});
 
         selectrFilterField.on('selectr.change', generateQueryFromWizard);
         selectrFilterRelation.on('selectr.change', generateQueryFromWizard);