diff --git a/index.css b/index.css
index c94d83ad..419bf650 100644
--- a/index.css
+++ b/index.css
@@ -929,7 +929,7 @@ fieldset {
   padding: 0.1em 0.5em;
   float: left;
   font-size: 1.2em;
-  font-family: Copperplate, monospace;
+  font-family: monospace;
 }
 
 #brushesButtons > button {
@@ -1318,12 +1318,13 @@ div.slider .ui-slider-handle {
   scrollbar-width: thin;
 }
 
-.dialog::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: transparent;
+@media screen and (max-width: 600px) {
+  .table {
+    max-width: unset;
+  }
 }
 
+.dialog::-webkit-scrollbar,
 #alertMessage::-webkit-scrollbar,
 .table::-webkit-scrollbar,
 .matrix-table::-webkit-scrollbar {
@@ -1347,24 +1348,23 @@ div.slider .ui-slider-handle {
   background: #666;
 }
 
-.overflow {
+.dialog {
   max-width: 93vw;
-  overflow: auto;
-  max-height: 75vh;
 }
 
-.overflow > div {
+.dialog > div {
   width: max-content;
 }
 
-div.header > div {
+div.header {
+  display: grid;
+  width: 0;
   font-weight: bold;
   font-size: 0.9em;
-  display: inline-block;
-  position: sticky;
-  white-space: nowrap;
-  overflow-x: hidden;
-  vertical-align: bottom;
+}
+
+div.header > div:first-child {
+  margin-left: 1.8em;
 }
 
 .sortable {
@@ -1663,11 +1663,6 @@ div.states > div.biomeArea {
   width: 5em;
 }
 
-#militaryHeader > div,
-#regimentsHeader > div {
-  width: 5.2em;
-}
-
 #militaryBody div.states > input {
   -moz-appearance: textfield;
 }
@@ -1986,12 +1981,9 @@ input[type="checkbox"] {
 }
 
 div.textual select,
-div.textual textarea {
-  font-family: Copperplate, monospace;
-}
-
+div.textual textarea,
 div.textual input {
-  font-family: Copperplate, monospace;
+  font-family: monospace;
 }
 
 div.textual fieldset {
@@ -2006,7 +1998,7 @@ div.textual span,
 }
 
 #namesbaseExamples {
-  font-family: Copperplate, monospace;
+  font-family: monospace;
   cursor: pointer;
 }
 
@@ -2071,7 +2063,7 @@ div.textual span,
   outline: 0;
   overflow-y: auto;
   padding: 0.6em;
-  font-family: Copperplate, monospace;
+  font-family: monospace;
   background-color: #fff;
   border: 1px solid #dedede;
   color: #000;
@@ -2100,6 +2092,7 @@ svg.button {
 #reliefIconsDiv {
   margin-top: 2px;
   padding: 2px;
+  width: 100%;
 }
 
 #reliefIconsDiv svg {
@@ -2345,17 +2338,6 @@ svg.button {
 }
 
 @media only screen and (max-width: 420px) {
-  #collapsible,
-  #options {
-    margin: 0;
-    border: 0;
-  }
-
-  #options {
-    height: 100vh;
-    width: 100vw;
-  }
-
   table {
     width: 100%;
   }
@@ -2368,8 +2350,3 @@ svg.button {
     display: none;
   }
 }
-
-
-img {}
-
-div {}
\ No newline at end of file
diff --git a/index.html b/index.html
index 892120d5..a895ac77 100644
--- a/index.html
+++ b/index.html
@@ -1896,115 +1896,117 @@
 
     <div id="dialogs">
       <div id="worldConfigurator" class="dialog stable" style="display: none">
-        <div id="worldControls">
-          <div>
-            <i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
-            <label data-tip="Set temperature at equator">
-              <i>Equator:</i>
-              <input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50" />°C =
-              <span id="temperatureEquatorF"></span>°F
-              <input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-50" max="50" />
-            </label>
-          </div>
-          <div>
-            <i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
-            <label data-tip="Set temperature near poles">
-              <i>Poles:</i>
-              <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C = <span id="temperaturePoleF"></span>°F
-              <input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
-            </label>
-          </div>
-          <div>
-            <i data-locked="0" id="lock_mapSize" class="icon-lock-open"></i>
-            <label data-tip="Set map size relative to the world size">
-              <i>Map size:</i>
-              <input id="mapSizeInput" data-stored="mapSize" type="number" min="1" max="100" />%
-              <input id="mapSizeOutput" data-stored="mapSize" type="range" min="1" max="100" />
-            </label>
-          </div>
-          <div>
-            <i data-locked="0" id="lock_latitude" class="icon-lock-open"></i>
-            <label data-tip="Set a North-South map shift">
-              <i>Latitudes:</i>
-              <input id="latitudeInput" data-stored="latitude" type="number" min="0" max="100" step="1" />
-              <br /><i>N</i><input id="latitudeOutput" data-stored="latitude" type="range" min="0" max="100" step="1" style="width: 10.3em" /><i>S</i>
-            </label>
+        <div>
+          <div id="worldControls">
+            <div>
+              <i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
+              <label data-tip="Set temperature at equator">
+                <i>Equator:</i>
+                <input id="temperatureEquatorInput" data-stored="temperatureEquator" type="number" min="-50" max="50" />°C =
+                <span id="temperatureEquatorF"></span>°F
+                <input id="temperatureEquatorOutput" data-stored="temperatureEquator" type="range" min="-50" max="50" />
+              </label>
+            </div>
+            <div>
+              <i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
+              <label data-tip="Set temperature near poles">
+                <i>Poles:</i>
+                <input id="temperaturePoleInput" data-stored="temperaturePole" type="number" min="-50" max="50" />°C = <span id="temperaturePoleF"></span>°F
+                <input id="temperaturePoleOutput" data-stored="temperaturePole" type="range" min="-50" max="50" />
+              </label>
+            </div>
+            <div>
+              <i data-locked="0" id="lock_mapSize" class="icon-lock-open"></i>
+              <label data-tip="Set map size relative to the world size">
+                <i>Map size:</i>
+                <input id="mapSizeInput" data-stored="mapSize" type="number" min="1" max="100" />%
+                <input id="mapSizeOutput" data-stored="mapSize" type="range" min="1" max="100" />
+              </label>
+            </div>
+            <div>
+              <i data-locked="0" id="lock_latitude" class="icon-lock-open"></i>
+              <label data-tip="Set a North-South map shift">
+                <i>Latitudes:</i>
+                <input id="latitudeInput" data-stored="latitude" type="number" min="0" max="100" step="1" />
+                <br /><i>N</i><input id="latitudeOutput" data-stored="latitude" type="range" min="0" max="100" step="1" style="width: 10.3em" /><i>S</i>
+              </label>
+            </div>
+
+            <div>
+              <label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
+                <i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
+                <i>Precipitation:</i>
+                <input id="precInput" data-stored="prec" type="number" />%
+                <input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50" />
+              </label>
+            </div>
+            <div data-tip="Canvas size. Can be changed in general options on new map generation">
+              <i>Canvas size:</i><br />
+              <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
+            </div>
+            <div>
+              <i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br />
+              <span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
+              <span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
+              <span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
+            </div>
+            <div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
           </div>
 
-          <div>
-            <label data-tip="Set precipitation - water amount clouds can bring. Defines rivers and biomes generation">
-              <i data-locked="0" id="lock_prec" class="icon-lock-open"></i>
-              <i>Precipitation:</i>
-              <input id="precInput" data-stored="prec" type="number" />%
-              <input id="precOutput" data-stored="prec" type="range" min="0" max="500" value="50" />
-            </label>
-          </div>
-          <div data-tip="Canvas size. Can be changed in general options on new map generation">
-            <i>Canvas size:</i><br />
-            <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
-          </div>
-          <div>
-            <i data-tip="Length of Meridian. Almost half of the equator length">Meridian length:</i><br />
-            <span id="meridianLength" data-tip="Length of Meridian in pixels"></span> px =
-            <span id="meridianLengthFriendly" data-tip="Length of Meridian is friendly units (depends on user configuration)"></span>
-            <span id="meridianLengthEarth" data-tip="Fantasy world Meridian length relative to real-world Earth (20k km)"></span>
-          </div>
-          <div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
+          <svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
+            <defs>
+              <linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
+                <stop class="tempGradient90" offset="0%" stop-color="blue" />
+                <stop class="tempGradient60" offset="16.6%" stop-color="green" />
+                <stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
+                <stop class="tempGradient0" offset="50%" stop-color="red" />
+                <stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
+                <stop class="tempGradient60" offset="83.3%" stop-color="green" />
+                <stop class="tempGradient90" offset="100%" stop-color="blue" />
+              </linearGradient>
+            </defs>
+            <g id="globeNoteLines">
+              <line x1="5" x2="220" y1="0" y2="0" />
+              <line x1="5" x2="220" y1="13" y2="13" />
+              <line x1="5" x2="220" y1="49.5" y2="49.5" />
+              <line x1="-5" x2="220" y1="100" y2="100" />
+              <line x1="5" x2="220" y1="150.5" y2="150.5" />
+              <line x1="5" x2="220" y1="187" y2="187" />
+              <line x1="5" x2="220" y1="200" y2="200" />
+            </g>
+            <g id="globeWindArrows" data-tip="Click to change wind direction" stroke-linejoin="round">
+              <circle cx="210" cy="6" r="12" />
+              <path data-tier="0" d="M210,11 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 6)" />
+              <circle cx="210" cy="30" r="12" />
+              <path data-tier="1" d="M210,35 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(45 210 30)" />
+              <circle cx="210" cy="75" r="12" />
+              <path data-tier="2" d="M210,80 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 75)" />
+              <circle cx="210" cy="130" r="12" />
+              <path data-tier="3" d="M210,135 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 130)" />
+              <circle cx="210" cy="173" r="12" />
+              <path data-tier="4" d="M210,178 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(135 210 173)" />
+              <circle cx="210" cy="194" r="12" />
+              <path data-tier="5" d="M210,199 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 194)" />
+            </g>
+            <g id="globaAxisLabels">
+              <text x="82%" y="-4%">wind</text>
+              <text x="-8%" y="-4%">latitude</text>
+            </g>
+            <g id="globeLatLabels">
+              <text x="-15" y="5">90°</text>
+              <text x="-15" y="18">60°</text>
+              <text x="-15" y="53">30°</text>
+              <text x="-15" y="103">0°</text>
+              <text x="-15" y="153">30°</text>
+              <text x="-15" y="190">60°</text>
+              <text x="-15" y="204">90°</text>
+            </g>
+            <circle id="globeOutline" cx="100" cy="100" r="100" />
+            <line id="globeEquator" x1="1" x2="199" y1="100" y2="100" />
+            <path id="globeGraticule" />
+            <path id="globeArea" />
+          </svg>
         </div>
-
-        <svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240">
-          <defs>
-            <linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
-              <stop class="tempGradient90" offset="0%" stop-color="blue" />
-              <stop class="tempGradient60" offset="16.6%" stop-color="green" />
-              <stop class="tempGradient30" offset="33.3%" stop-color="yellow" />
-              <stop class="tempGradient0" offset="50%" stop-color="red" />
-              <stop class="tempGradient30" offset="66.6%" stop-color="yellow" />
-              <stop class="tempGradient60" offset="83.3%" stop-color="green" />
-              <stop class="tempGradient90" offset="100%" stop-color="blue" />
-            </linearGradient>
-          </defs>
-          <g id="globeNoteLines">
-            <line x1="5" x2="220" y1="0" y2="0" />
-            <line x1="5" x2="220" y1="13" y2="13" />
-            <line x1="5" x2="220" y1="49.5" y2="49.5" />
-            <line x1="-5" x2="220" y1="100" y2="100" />
-            <line x1="5" x2="220" y1="150.5" y2="150.5" />
-            <line x1="5" x2="220" y1="187" y2="187" />
-            <line x1="5" x2="220" y1="200" y2="200" />
-          </g>
-          <g id="globeWindArrows" data-tip="Click to change wind direction" stroke-linejoin="round">
-            <circle cx="210" cy="6" r="12" />
-            <path data-tier="0" d="M210,11 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 6)" />
-            <circle cx="210" cy="30" r="12" />
-            <path data-tier="1" d="M210,35 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(45 210 30)" />
-            <circle cx="210" cy="75" r="12" />
-            <path data-tier="2" d="M210,80 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(225 210 75)" />
-            <circle cx="210" cy="130" r="12" />
-            <path data-tier="3" d="M210,135 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 130)" />
-            <circle cx="210" cy="173" r="12" />
-            <path data-tier="4" d="M210,178 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(135 210 173)" />
-            <circle cx="210" cy="194" r="12" />
-            <path data-tier="5" d="M210,199 v-10 l-3,3 m6,0 l-3,-3" transform="rotate(315 210 194)" />
-          </g>
-          <g id="globaAxisLabels">
-            <text x="82%" y="-4%">wind</text>
-            <text x="-8%" y="-4%">latitude</text>
-          </g>
-          <g id="globeLatLabels">
-            <text x="-15" y="5">90°</text>
-            <text x="-15" y="18">60°</text>
-            <text x="-15" y="53">30°</text>
-            <text x="-15" y="103">0°</text>
-            <text x="-15" y="153">30°</text>
-            <text x="-15" y="190">60°</text>
-            <text x="-15" y="204">90°</text>
-          </g>
-          <circle id="globeOutline" cx="100" cy="100" r="100" />
-          <line id="globeEquator" x1="1" x2="199" y1="100" y2="100" />
-          <path id="globeGraticule" />
-          <path id="globeArea" />
-        </svg>
       </div>
 
       <div id="labelEditor" class="dialog" style="display: none">
@@ -2651,7 +2653,7 @@
       </div>
 
       <div id="battleScreen" class="dialog stable" style="display: none">
-        <div id="battleBody" class="overflow">
+        <div id="battleBody">
           <template id="battlePhases_field">
             <button data-tip="Skirmish phase. Ranged units excel" data-phase="skirmish" class="icon-button-skirmish"></button>
             <button data-tip="Melee phase. Melee units excel" data-phase="melee" class="icon-button-melee"></button>
@@ -2806,15 +2808,13 @@
       </div>
 
       <div id="regimentSelectorScreen" class="dialog" style="display: none">
-        <div id="regimentSelectorHeader" class="header">
-          <div style="left: 1.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 9.2em" data-tip="Click to sort by regiment name" class="sortable alphabetically" data-sortby="regiment">Regiment&nbsp;</div>
-          <div style="left: 22.4em" data-tip="Click to sort by total military forces" class="sortable" data-sortby="total">Total&nbsp;</div>
-          <div style="left: 28em" data-tip="Click to sort by distance to the battlefield" class="sortable icon-sort-number-up" data-sortby="distance">
-            Distance&nbsp;
-          </div>
+        <div id="regimentSelectorHeader" class="header" style="grid-template-columns: 9em 13em 4em 6em">
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Click to sort by regiment name" class="sortable alphabetically" data-sortby="regiment">Regiment&nbsp;</div>
+          <div data-tip="Click to sort by total military forces" class="sortable" data-sortby="total">Total&nbsp;</div>
+          <div data-tip="Click to sort by distance to the battlefield" class="sortable icon-sort-number-up" data-sortby="distance">Distance&nbsp;</div>
         </div>
-        <div id="regimentSelectorBody"></div>
+        <div id="regimentSelectorBody" class="table"></div>
       </div>
 
       <div id="brushesPanel" class="dialog stable" style="display: none">
@@ -3034,14 +3034,12 @@
       </div>
 
       <div id="biomesEditor" class="dialog stable" style="display: none">
-        <div id="biomesHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome&nbsp;</div>
-          <div style="left: 12em" data-tip="Click to sort by biome habitability" class="sortable hide" data-sortby="habitability">Habitability&nbsp;</div>
-          <div style="left: 19em" data-tip="Click to sort by biome cells number" class="sortable hide icon-sort-number-down" data-sortby="cells">
-            Cells&nbsp;
-          </div>
-          <div style="left: 25em" data-tip="Click to sort by biome area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 30em" data-tip="Click to sort by biome population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+        <div id="biomesHeader" class="header" style="grid-template-columns: 13em 7em 5em 5em 7em">
+          <div data-tip="Click to sort by biome name" class="sortable alphabetically" data-sortby="name">Biome&nbsp;</div>
+          <div data-tip="Click to sort by biome habitability" class="sortable hide" data-sortby="habitability">Habitability&nbsp;</div>
+          <div data-tip="Click to sort by biome cells number" class="sortable hide icon-sort-number-down" data-sortby="cells">Cells&nbsp;</div>
+          <div data-tip="Click to sort by biome area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div data-tip="Click to sort by biome population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
         </div>
 
         <div id="biomesBody" class="table" data-type="absolute"></div>
@@ -3200,13 +3198,13 @@
       </div>
 
       <div id="provincesEditor" class="dialog stable" style="display: none">
-        <div id="provincesHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province&nbsp;</div>
-          <div style="left: 10.8em" data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 18.8em" data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-          <div style="left: 25.3em" data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 33.9em" data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 39.3em" data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+        <div id="provincesHeader" class="header" style="grid-template-columns: 11em 8em 8em 8em 5em 8em">
+          <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="name">Province&nbsp;</div>
+          <div data-tip="Click to sort by province form name" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+          <div data-tip="Click to sort by province capital" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+          <div data-tip="Click to sort by province owner" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Click to sort by province area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div data-tip="Click to sort by province population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
         </div>
 
         <div id="provincesBodySection" class="table" data-type="absolute"></div>
@@ -3262,11 +3260,9 @@
       </div>
 
       <div id="diplomacyEditor" class="dialog stable" style="display: none">
-        <div id="diplomacyHeader" class="header">
-          <div style="left: 0.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
-          <div style="left: 14.4em" data-tip="Click to sort by diplomatical relations" class="sortable alphabetically" data-sortby="relations">
-            Relations&nbsp;
-          </div>
+        <div id="diplomacyHeader" class="header" style="grid-template-columns: 15em 6em">
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
+          <div data-tip="Click to sort by diplomatical relations" class="sortable alphabetically" data-sortby="relations">Relations&nbsp;</div>
         </div>
 
         <div id="diplomacyBodySection" class="table"></div>
@@ -3408,12 +3404,12 @@
       </div>
 
       <div id="zonesEditor" class="dialog stable" style="display: none">
-        <div id="customHeader" class="header">
-          <div style="left: 1.8em" data-tip="Zone description">Description&nbsp;</div>
-          <div style="left: 13em" data-tip="Zone type">Type&nbsp;</div>
-          <div style="left: 20em" data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
-          <div style="left: 26.1em" data-tip="Zone area" class="hide">Area&nbsp;</div>
-          <div style="left: 31.6em" data-tip="Zone population" class="hide">Population&nbsp;</div>
+        <div id="customHeader" class="header" style="grid-template-columns: 13em 7em 6em 5em 9em">
+          <div data-tip="Zone description">Description&nbsp;</div>
+          <div data-tip="Zone type">Type&nbsp;</div>
+          <div data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
+          <div data-tip="Zone area" class="hide">Area&nbsp;</div>
+          <div data-tip="Zone population" class="hide">Population&nbsp;</div>
         </div>
 
         <div id="zonesBodySection" class="table" data-type="absolute"></div>
@@ -3487,17 +3483,13 @@
       </div>
 
       <div id="religionsEditor" class="dialog stable" style="display: none">
-        <div id="religionsHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
-          <div style="left: 12.8em" data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">
-            Type&nbsp;
-          </div>
-          <div style="left: 18.4em" data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
-          <div style="left: 25.6em" data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
-          <div style="left: 42.2em" data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 47.5em" data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">
-            Believers&nbsp;
-          </div>
+        <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 16em 5em 6em">
+          <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
+          <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
+          <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
+          <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
+          <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+          <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
         </div>
         <div id="religionsBody" class="table" data-type="absolute"></div>
 
@@ -3817,14 +3809,14 @@
       </div>
 
       <div id="burgsOverview" class="dialog stable" style="display: none">
-        <div id="burgsHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg&nbsp;</div>
-          <div style="left: 8em" data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province&nbsp;</div>
-          <div style="left: 14.2em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-          <div style="left: 20.2em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div>
-          <div style="left: 27em" data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population&nbsp;</div>
-          <div style="left: 33.7em" data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div id="burgsInvertLock" style="left: 38em; color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></div>
+        <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 7em 7em 4em 2em">
+          <div data-tip="Click to sort by burg name" class="sortable alphabetically icon-sort-name-up" data-sortby="name">Burg&nbsp;</div>
+          <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">Province&nbsp;</div>
+          <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="culture">Culture&nbsp;</div>
+          <div data-tip="Click to sort by burg population" class="sortable" data-sortby="population">Population&nbsp;</div>
+          <div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div id="burgsInvertLock" style="color: #6e5e66" data-tip="Click to invert lock for all burgs" class="icon-lock pointer"></div>
         </div>
 
         <div id="burgsBody" class="table"></div>
@@ -3858,15 +3850,13 @@
       </div>
 
       <div id="riversOverview" class="dialog stable" style="display: none">
-        <div id="riversHeader" class="header">
-          <div style="left: 1.3em" data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River&nbsp;</div>
-          <div style="left: 8.6em" data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div style="left: 13em" data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">
-            Discharge&nbsp;
-          </div>
-          <div style="left: 19.3em" data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length&nbsp;</div>
-          <div style="left: 24.4em" data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width&nbsp;</div>
-          <div style="left: 30em" data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin&nbsp;</div>
+        <div id="riversHeader" class="header" style="grid-template-columns: 9em 4em 6em 6em 5em 9em">
+          <div data-tip="Click to sort by river name" class="sortable alphabetically" data-sortby="name">River&nbsp;</div>
+          <div data-tip="Click to sort by river type name" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div data-tip="Click to sort by discharge (flux in m3/s)" class="sortable icon-sort-number-down" data-sortby="discharge">Discharge&nbsp;</div>
+          <div data-tip="Click to sort by river length" class="sortable" data-sortby="length">Length&nbsp;</div>
+          <div data-tip="Click to sort by river mouth width" class="sortable" data-sortby="width">Width&nbsp;</div>
+          <div data-tip="Click to sort by river basin" class="sortable alphabetically" data-sortby="basin">Basin&nbsp;</div>
         </div>
 
         <div id="riversBody" class="table"></div>
@@ -3889,38 +3879,27 @@
       </div>
 
       <div id="militaryOverview" class="dialog stable" style="display: none">
-        <div class="overflow">
-          <div id="militaryHeader" class="header">
-            <div data-tip="State name. Click to sort" style="margin-left: 1.8em; width: 5.6em" class="sortable alphabetically" data-sortby="state">
-              State&nbsp;
-            </div>
-            <div
-              data-tip="Total military personnel (considering crew). Click to sort"
-              id="militaryTotal"
-              class="sortable icon-sort-number-down"
-              data-sortby="total"
-            >
-              Total&nbsp;
-            </div>
-            <div data-tip="State population. Click to sort" style="width: 6.5em; margin-left: -1em" class="sortable" data-sortby="population">
-              Population&nbsp;
-            </div>
-            <div
-              data-tip="Military personnel rate (% of state population). Depends on war alert. Click to sort"
-              style="width: 3.7em"
-              class="sortable"
-              data-sortby="rate"
-            >
-              Rate&nbsp;
-            </div>
-            <div data-tip="War Alert. Modifier to military forces number, depends of political situation. Click to sort" class="sortable" data-sortby="alert">
-              War Alert&nbsp;
-            </div>
+        <div id="militaryHeader" class="header">
+          <div data-tip="State name. Click to sort" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div
+            data-tip="Total military personnel (considering crew). Click to sort"
+            id="militaryTotal"
+            class="sortable icon-sort-number-down"
+            data-sortby="total"
+          >
+            Total&nbsp;
+          </div>
+          <div data-tip="State population. Click to sort" class="sortable" data-sortby="population">Population&nbsp;</div>
+          <div data-tip="Military personnel rate (% of state population). Depends on war alert. Click to sort" class="sortable" data-sortby="rate">
+            Rate&nbsp;
+          </div>
+          <div data-tip="War Alert. Modifier to military forces number, depends of political situation. Click to sort" class="sortable" data-sortby="alert">
+            War Alert&nbsp;
           </div>
-
-          <div id="militaryBody" data-type="absolute"></div>
         </div>
 
+        <div id="militaryBody" class="table" data-type="absolute"></div>
+
         <div id="militaryFooter" class="totalLine">
           <div data-tip="States number" style="margin-left: 4px">States:&nbsp;<span id="militaryFooterStates">0</span></div>
           <div data-tip="Total military forces" style="margin-left: 14px">Total forces:&nbsp;<span id="militaryFooterForcesTotal">0</span></div>
@@ -3941,26 +3920,21 @@
       </div>
 
       <div id="regimentsOverview" class="dialog stable" style="display: none">
-        <div class="overflow">
-          <div id="regimentsHeader" class="header">
-            <div data-tip="State name. Click to sort" style="left: 1.8em; width: 9em" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
-            <div data-tip="Regiment emblem and name. Click to sort by name" style="width: 12em" class="sortable alphabetically" data-sortby="name">
-              Name&nbsp;
-            </div>
-            <div
-              data-tip="Total military personnel (not considering crew). Click to sort"
-              style="margin-left: 0.8em"
-              id="regimentsTotal"
-              class="sortable icon-sort-number-down"
-              data-sortby="total"
-            >
-              Total&nbsp;
-            </div>
+        <div id="regimentsHeader" class="header">
+          <div data-tip="State name. Click to sort" class="sortable alphabetically" data-sortby="state">State&nbsp;</div>
+          <div data-tip="Regiment emblem and name. Click to sort by name" class="sortable alphabetically" data-sortby="name">Name&nbsp;</div>
+          <div
+            data-tip="Total military personnel (not considering crew). Click to sort"
+            id="regimentsTotal"
+            class="sortable icon-sort-number-down"
+            data-sortby="total"
+          >
+            Total&nbsp;
           </div>
-
-          <div id="regimentsBody" data-type="absolute"></div>
         </div>
 
+        <div id="regimentsBody" class="table" data-type="absolute"></div>
+
         <div id="regimentsBottom">
           <button id="regimentsOverviewRefresh" data-tip="Refresh the overview screen" class="icon-cw"></button>
           <button id="regimentsPercentage" data-tip="Toggle percentage / absolute values views" class="icon-percent"></button>
@@ -3998,10 +3972,10 @@
       </div>
 
       <div id="markersOverview" class="dialog stable" style="display: none">
-        <div id="markersHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div id="markersInverPin" style="left: 14.9em; color: #6e5e66" data-tip="Click to invert pin state for all markers" class="icon-pin pointer"></div>
-          <div id="markersInverLock" style="left: 16.1em; color: #6e5e66" data-tip="Click to invert lock state for all markers" class="icon-lock pointer"></div>
+        <div id="markersHeader" class="header" style="grid-template-columns: 15em 1em 3em">
+          <div data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+          <div id="markersInverPin" style="color: #6e5e66" data-tip="Click to invert pin state for all markers" class="icon-pin pointer"></div>
+          <div id="markersInverLock" style="color: #6e5e66" data-tip="Click to invert lock state for all markers" class="icon-lock pointer"></div>
         </div>
 
         <div id="markersBody" class="table"></div>
@@ -4026,7 +4000,7 @@
           <span id="styleSaverTip" data-tip="Shows whether there is already a preset with this name" class="italic"></span>
         </div>
 
-        <div id="styleSaverBody" style="padding: 2px 0">
+        <div id="styleSaverBody" style="padding: 2px 0; width: 100%">
           <span>Style JSON:</span>
           <textarea
             id="styleSaverJSON"
@@ -4076,7 +4050,9 @@
             <option value="fontURL">Font URL</option>
           </select>
           <input id="addFontNameInput" placeholder="font family" style="width: 15em" />
-          <input id="addFontURLInput" placeholder="font file URL" style="width: 22.6em; margin-top: 0.1em; display: none" />
+          <div>
+            <input id="addFontURLInput" placeholder="font file URL" style="width: 22.6em; margin-top: 0.1em; display: none" />
+          </div>
         </div>
       </div>
 
@@ -4301,11 +4277,12 @@
       </div>
 
       <div id="resampleDialog" style="display: none" class="dialog">
-        <p style="font-weight: bold">
+        <div style="width: 34em; max-width: 80vw; font-weight: bold; padding: 6px">
           This operation is destructive and irreversible. It will create a completely new map based on the current one. Don't forget to save the current project
           as a .map file first!
-        </p>
-        <div style="display: grid; grid-template-columns: 2fr 3fr; grid-template-rows: repeat(4, 1fr); align-items: center; padding-left: 0.5em">
+        </div>
+
+        <div style="width: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 1fr); align-items: center; padding: 0.5em">
           <div>Points number</div>
           <div>
             <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
@@ -4339,7 +4316,8 @@
             <label for="submapMirrorV" class="checkbox-label">vertically</label>
           </div>
         </div>
-        <div id="submapPreview" style="border: 1px solid black; margin: 1em auto; overflow: hidden"></div>
+
+        <div id="submapPreview" style="border: 1px solid #666; margin: 1em auto; overflow: hidden; position: relative"></div>
       </div>
 
       <div id="submapOptionsDialog" style="display: none" class="dialog">
diff --git a/libs/jquery-ui.css b/libs/jquery-ui.css
index a7589d45..94cc4790 100644
--- a/libs/jquery-ui.css
+++ b/libs/jquery-ui.css
@@ -359,7 +359,7 @@ body .ui-dialog {
   padding: 0.5em 1em;
   background: none;
   overflow-y: auto;
-  overflow-x: hidden;
+  overflow-x: auto;
 }
 .ui-dialog .ui-dialog-buttonpane {
   text-align: left;
diff --git a/main.js b/main.js
index cd5f0244..b62b6cfd 100644
--- a/main.js
+++ b/main.js
@@ -209,9 +209,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 });
 
 function hideLoading() {
-  d3.select("#loading").transition().duration(4000).style("opacity", 0);
-  d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
-  d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
+  d3.select("#loading").transition().duration(3000).style("opacity", 0);
+  d3.select("#optionsContainer").transition().duration(2000).style("opacity", 1);
+  d3.select("#tooltip").transition().duration(3000).style("opacity", 1);
 }
 
 function showLoading() {
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index 0e4f9768..90aa6f33 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -16,7 +16,6 @@ export function open() {
   $("#culturesEditor").dialog({
     title: "Cultures Editor",
     resizable: false,
-    width: fitContent(),
     close: closeCulturesEditor,
     position: {my: "right top", at: "right-10 top+10", of: "svg"}
   });
@@ -25,15 +24,15 @@ export function open() {
 
 function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable">
-    <div id="culturesHeader" class="header">
-      <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
-      <div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-      <div style="left: 16.2em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
-      <div style="left: 24.5em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
-      <div style="left: 29.8em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
-      <div style="left: 37.2em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-      <div style="left: 42.8em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population&nbsp;</div>
-      <div style="left: 50.8em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems&nbsp;</div>
+    <div id="culturesHeader" class="header" style="grid-template-columns: 10em 7em 8em 4em 8em 5em 8em 8em">
+      <div data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
+      <div data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+      <div data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
+      <div data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
+      <div data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
+      <div data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+      <div data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population&nbsp;</div>
+      <div data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems&nbsp;</div>
     </div>
     <div id="culturesBody" class="table" data-type="absolute"></div>
 
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index a5241a33..64244cb0 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -14,7 +14,6 @@ export function open() {
   $("#statesEditor").dialog({
     title: "States Editor",
     resizable: false,
-    width: fitContent(),
     close: closeStatesEditor,
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
@@ -22,17 +21,17 @@ export function open() {
 
 function insertEditorHtml() {
   const editorHtml = /* html */ `<div id="statesEditor" class="dialog stable">
-    <div id="statesHeader" class="header">
-      <div style="left: 1.8em" data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
-      <div style="left: 10.8em" data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div style="left: 19.1em" data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
-      <div style="left: 26.1em" data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
-      <div style="left: 33.4em" data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
-      <div style="left: 39.6em" data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
-      <div style="left: 45.9em" data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
-      <div style="left: 52.2em" data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
-      <div style="left: 59em" data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">Expansion&nbsp;</div>
-      <div style="left: 65.5em" data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells&nbsp;</div>
+    <div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
+      <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
+      <div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
+      <div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
+      <div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
+      <div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
+      <div data-tip="Click to sort by state population" class="sortable hide" data-sortby="population">Population&nbsp;</div>
+      <div data-tip="Click to sort by state type" class="sortable alphabetically hidden show hide" data-sortby="type">Type&nbsp;</div>
+      <div data-tip="Click to sort by state expansion value" class="sortable hidden show hide" data-sortby="expansionism">Expansion&nbsp;</div>
+      <div data-tip="Click to sort by state cells count" class="sortable hidden show hide" data-sortby="cells">Cells&nbsp;</div>
     </div>
 
     <div id="statesBodySection" class="table" data-type="absolute"></div>
diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
index e7621520..4e05c2c9 100644
--- a/modules/dynamic/heightmap-selection.js
+++ b/modules/dynamic/heightmap-selection.js
@@ -41,6 +41,7 @@ const heightmaps = [
   {id: "world-from-pacific", name: "World from Pacific"}
 ];
 
+const initialSeed = generateSeed();
 appendStyleSheet();
 insertEditorHtml();
 addListeners();
@@ -107,6 +108,14 @@ function appendStyleSheet() {
       }
     }
 
+    .heightmap-selection_options {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(50%, 200px));
+      grid-row-gap: 6px;
+      justify-items: start;
+      align-items: center;
+    }
+
     .heightmap-selection article {
       padding: 4px;
       border-radius: 8px;
@@ -154,15 +163,49 @@ function appendStyleSheet() {
 }
 
 function insertEditorHtml() {
-  const seed = generateSeed();
+  const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
+    <div class="heightmap-selection">
+      <section>
+        <header><h1>Heightmap templates</h1></header>
+        <div class="heightmap-selection_container"></div>
+      </section>
+      <section>
+        <header><h1>Pre-created heightmaps</h1></header>
+        <div class="heightmap-selection_container"></div>
+      </section>
+      <section>
+        <header><h1>Options</h1></header>
+        <div class="heightmap-selection_options">
+          <div>
+            <input id="heightmapSelectionRenderOcean" class="checkbox" type="checkbox" />
+            <label for="heightmapSelectionRenderOcean" class="checkbox-label">Render ocean heights</label>
+          </div>
+          <div>
+            Color scheme
+            <select id="heightmapSelectionColorScheme">
+              <option value="bright" selected>Bright</option>
+              <option value="light">Light</option>
+              <option value="green">Green</option>
+              <option value="monochrome">Monochrome</option>
+            </select>
+          </div>
+          <button data-tip="Open Template Editor" id="heightmapSelectionEditTemplates">Edit Templates</button>
+          <button data-tip="Open Image Converter" id="heightmapSelectionImportHeightmap">Import Heightmap</button>
+        </div>
+      </section>
+    </div>
+  </div>`;
 
-  const templatesHtml = templates
+  byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
+  const sections = document.getElementsByClassName("heightmap-selection_container");
+
+  sections[0].innerHTML = templates
     .map(({id, name}) => {
-      Math.random = aleaPRNG(seed);
+      Math.random = aleaPRNG(initialSeed);
       const heights = generateHeightmap(id);
       const dataUrl = drawHeights(heights);
 
-      return /* html */ `<article data-id="${id}" data-seed="${seed}">
+      return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
         <img src="${dataUrl}" alt="${name}" />
         <div>
           ${name}
@@ -172,35 +215,16 @@ function insertEditorHtml() {
     })
     .join("");
 
-  const heightmapsHtml = heightmaps
+  sections[1].innerHTML = heightmaps
     .map(({id, name}) => {
       drawPrecreatedHeightmap(id);
 
-      return /* html */ `<article data-id="${id}" data-seed="${seed}">
+      return /* html */ `<article data-id="${id}" data-seed="${initialSeed}">
         <img alt="${name}" />
         <div>${name}</div>
       </article>`;
     })
     .join("");
-
-  const heightmapSelectionHtml = /* html */ `<div id="heightmapSelection" class="dialog stable">
-    <div class="heightmap-selection">
-      <section>
-        <header><h1>Heightmap templates</h1></header>
-        <div class="heightmap-selection_container">
-          ${templatesHtml}
-        </div>
-      </section>
-      <section>
-        <header><h1>Pre-created heightmaps</h1></header>
-        <div class="heightmap-selection_container">
-          ${heightmapsHtml}
-        </div>
-      </section>
-    </div>
-  </div>`;
-
-  byId("dialogs").insertAdjacentHTML("beforeend", heightmapSelectionHtml);
 }
 
 function addListeners() {
@@ -209,9 +233,16 @@ function addListeners() {
     if (!article) return;
 
     const id = article.dataset.id;
-    if (event.target.matches("span.icon-cw")) regeneratePreview(article, id);
-    else setSelected(id);
+    if (event.target.matches("span.icon-cw")) {
+      const seed = generateSeed();
+      article.dataset.seed = seed;
+      Math.random = aleaPRNG(seed);
+      drawTemplatePreview(id);
+    } else setSelected(id);
   });
+
+  byId("heightmapSelectionRenderOcean").on("change", redrawAll);
+  byId("heightmapSelectionColorScheme").on("change", redrawAll);
 }
 
 function getSelected() {
@@ -234,11 +265,14 @@ function drawHeights(heights) {
   canvas.height = grid.cellsY;
   const ctx = canvas.getContext("2d");
   const imageData = ctx.createImageData(grid.cellsX, grid.cellsY);
-  const scheme = getColorScheme();
-  const waterColor = scheme(1);
+
+  const schemeId = byId("heightmapSelectionColorScheme").value;
+  const scheme = getColorScheme(schemeId);
+  const renderOcean = byId("heightmapSelectionRenderOcean").checked;
+  const getHeight = height => (height < 20 ? (renderOcean ? height : 0) : height);
 
   for (let i = 0; i < heights.length; i++) {
-    const color = heights[i] < 20 ? waterColor : scheme(1 - heights[i] / 100);
+    const color = scheme(1 - getHeight(heights[i]) / 100);
     const {r, g, b} = d3.color(color);
 
     const n = i * 4;
@@ -259,6 +293,13 @@ function generateHeightmap(id) {
   return heights;
 }
 
+function drawTemplatePreview(id) {
+  const heights = generateHeightmap(id);
+  const dataUrl = drawHeights(heights);
+  const article = byId("heightmapSelection").querySelector(`[data-id="${id}"]`);
+  article.querySelector("img").src = dataUrl;
+}
+
 async function drawPrecreatedHeightmap(id) {
   const heights = await HeightmapGenerator.fromPrecreated(id);
   const dataUrl = drawHeights(heights);
@@ -266,12 +307,14 @@ async function drawPrecreatedHeightmap(id) {
   article.querySelector("img").src = dataUrl;
 }
 
-function regeneratePreview(article, id) {
-  const seed = generateSeed();
-  article.dataset.seed = seed;
-  Math.random = aleaPRNG(seed);
+function redrawAll() {
+  const articles = byId("heightmapSelection").querySelectorAll(`article`);
+  for (const article of articles) {
+    const {id, seed} = article.dataset;
+    Math.random = aleaPRNG(seed);
 
-  const heights = generateHeightmap(id);
-  const dataUrl = drawHeights(heights);
-  article.querySelector("img").src = dataUrl;
+    const isTemplate = id in HeightmapTemplates;
+    if (isTemplate) drawTemplatePreview(id);
+    else drawPrecreatedHeightmap(id);
+  }
 }
diff --git a/modules/io/export.js b/modules/io/export.js
index 2fed9553..2389b89e 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -339,7 +339,7 @@ function removeUnusedElements(clone) {
 
 function updateMeshCells(clone) {
   const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
-  const scheme = getColorScheme();
+  const scheme = getColorScheme(terrs.attr("scheme"));
   clone.select("#heights").attr("filter", "url(#blur1)");
   clone
     .select("#heights")
diff --git a/modules/ui/elevation-profile.js b/modules/ui/elevation-profile.js
index 4f148e9b..20e381a6 100644
--- a/modules/ui/elevation-profile.js
+++ b/modules/ui/elevation-profile.js
@@ -109,7 +109,8 @@ function showElevationProfile(data, routeLen, isRiver) {
   draw();
 
   function downloadCSV() {
-    let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
+    let data =
+      "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
 
     for (let k = 0; k < chartData.points.length; k++) {
       let cell = chartData.cell[k];
@@ -179,9 +180,20 @@ function showElevationProfile(data, routeLen, isRiver) {
       .attr("id", "elevationSVG")
       .attr("class", "epbackground");
     // arrow-head definition
-    chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z").attr("fill", "darkgray");
+    chart
+      .append("defs")
+      .append("marker")
+      .attr("id", "arrowhead")
+      .attr("orient", "auto")
+      .attr("markerWidth", "2")
+      .attr("markerHeight", "4")
+      .attr("refX", "0.1")
+      .attr("refY", "2")
+      .append("path")
+      .attr("d", "M0,0 V4 L2,2 Z")
+      .attr("fill", "darkgray");
 
-    let colors = getColorScheme();
+    let colors = getColorScheme(terrs.attr("scheme"));
     const landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
 
     if (chartData.mah == chartData.mih) {
@@ -258,7 +270,24 @@ function showElevationProfile(data, routeLen, isRiver) {
       const populationDesc = rn(pop * populationRate);
 
       const provinceDesc = province ? ", " + pack.provinces[province].name : "";
-      const dataTip = biomesData.name[chartData.biome[k]] + provinceDesc + ", " + pack.states[state].name + ", " + pack.religions[religion].name + ", " + pack.cultures[culture].name + " (height: " + chartData.height[k] + " " + hu + ", population " + populationDesc + ", cell " + chartData.cell[k] + ")";
+      const dataTip =
+        biomesData.name[chartData.biome[k]] +
+        provinceDesc +
+        ", " +
+        pack.states[state].name +
+        ", " +
+        pack.religions[religion].name +
+        ", " +
+        pack.cultures[culture].name +
+        " (height: " +
+        chartData.height[k] +
+        " " +
+        hu +
+        ", population " +
+        populationDesc +
+        ", cell " +
+        chartData.cell[k] +
+        ")";
 
       g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
     }
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 9ff93af4..4f93cbab 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -157,7 +157,7 @@ function drawHeightmap() {
   const used = new Uint8Array(cells.i.length);
   const paths = new Array(101).fill("");
 
-  const scheme = getColorScheme();
+  const scheme = getColorScheme(terrs.attr("scheme"));
   const terracing = terrs.attr("terracing") / 10; // add additional shifted darker layer for pseudo-3d effect
   const skip = +terrs.attr("skip") + 1;
   const simplification = +terrs.attr("relax");
@@ -234,8 +234,7 @@ function drawHeightmap() {
   TIME && console.timeEnd("drawHeightmap");
 }
 
-function getColorScheme() {
-  const scheme = terrs.attr("scheme");
+function getColorScheme(scheme) {
   if (scheme === "bright") return d3.scaleSequential(d3.interpolateSpectral);
   if (scheme === "light") return d3.scaleSequential(d3.interpolateRdYlGn);
   if (scheme === "green") return d3.scaleSequential(d3.interpolateGreens);
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index 24cf9367..35a23ed4 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -47,6 +47,9 @@ function overviewMilitary() {
   // update military types in header and tooltips
   function updateHeaders() {
     const header = document.getElementById("militaryHeader");
+    const units = options.military.length;
+    header.style.gridTemplateColumns = `8em repeat(${units}, 5.2em) 4em 7em 5em 6em`;
+
     header.querySelectorAll(".removable").forEach(el => el.remove());
     const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html);
     for (const u of options.military) {
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 62000acf..4362fb25 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -42,7 +42,7 @@ function editNotes(id, name) {
 
   $("#notesEditor").dialog({
     title: "Notes Editor",
-    width: "70vw",
+    width: "minmax(80vw, 540px)",
     height: window.innerHeight * 0.75,
     position: {my: "center", at: "center", of: "svg"},
     close: removeEditor
diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js
index d243b34d..49fd7b8b 100644
--- a/modules/ui/regiments-overview.js
+++ b/modules/ui/regiments-overview.js
@@ -30,6 +30,9 @@ function overviewRegiments(state) {
   // update military types in header and tooltips
   function updateHeaders() {
     const header = document.getElementById("regimentsHeader");
+    const units = options.military.length;
+    header.style.gridTemplateColumns = `9em 13em repeat(${units}, 5.2em) 7em`;
+
     header.querySelectorAll(".removable").forEach(el => el.remove());
     const insert = html => document.getElementById("regimentsTotal").insertAdjacentHTML("beforebegin", html);
     for (const u of options.military) {
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
index 0c505895..737560c3 100644
--- a/modules/ui/submap.js
+++ b/modules/ui/submap.js
@@ -2,7 +2,6 @@
 // UI elements for submap generation
 
 window.UISubmap = (function () {
-  const byId = document.getElementById.bind(document);
   byId("submapPointsInput").addEventListener("input", function () {
     const output = byId("submapPointsOutputFormatted");
     const cells = cellsDensityMap[+this.value] || 1000;
@@ -13,7 +12,7 @@ window.UISubmap = (function () {
 
   byId("submapScaleInput").addEventListener("input", function (event) {
     const exp = Math.pow(1.1, +event.target.value);
-    byId("submapScaleOutput").value = rn(exp,2);
+    byId("submapScaleOutput").value = rn(exp, 2);
   });
 
   byId("submapAngleInput").addEventListener("input", function (event) {
@@ -28,7 +27,6 @@ window.UISubmap = (function () {
   function openSubmapMenu() {
     $("#submapOptionsDialog").dialog({
       title: "Create a submap",
-      width: "30em",
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
@@ -49,8 +47,8 @@ window.UISubmap = (function () {
     shiftY: +byId("submapShiftY").value,
     ratio: +byId("submapScaleInput").value,
     mirrorH: byId("submapMirrorH").checked,
-    mirrorV: byId("submapMirrorV").checked,
-  })
+    mirrorV: byId("submapMirrorV").checked
+  });
 
   async function openResampleMenu() {
     resetZoom(0);
@@ -64,14 +62,14 @@ window.UISubmap = (function () {
     $shiftX.value = 0;
     $shiftY.value = 0;
 
-    const previewScale = 400 / graphWidth;
-    const [w, h] = [400, graphHeight * previewScale];
-    $previewBox.style.width = w + 'px';
-    $previewBox.style.height = h + 'px';
-    $previewBox.style.position = 'relative';
+    const w = Math.min(400, window.innerWidth * 0.5);
+    const previewScale = w / graphWidth;
+    const h = graphHeight * previewScale;
+    $previewBox.style.width = w + "px";
+    $previewBox.style.height = h + "px";
 
     // handle mouse input
-    const dispatchInput = e => e.dispatchEvent(new Event('input', {bubbles:true}));
+    const dispatchInput = e => e.dispatchEvent(new Event("input", {bubbles: true}));
 
     // mouse wheel
     $previewBox.onwheel = e => {
@@ -80,14 +78,16 @@ window.UISubmap = (function () {
     };
 
     // mouse drag
-    let mouseIsDown = false, mouseX = 0, mouseY = 0;
+    let mouseIsDown = false,
+      mouseX = 0,
+      mouseY = 0;
     $previewBox.onmousedown = e => {
       mouseIsDown = true;
       mouseX = $shiftX.value - e.clientX / previewScale;
       mouseY = $shiftY.value - e.clientY / previewScale;
-    }
-    $previewBox.onmouseup = _ => mouseIsDown = false;
-    $previewBox.onmouseleave = _ => mouseIsDown = false;
+    };
+    $previewBox.onmouseup = _ => (mouseIsDown = false);
+    $previewBox.onmouseleave = _ => (mouseIsDown = false);
     $previewBox.onmousemove = e => {
       if (!mouseIsDown) return;
       e.preventDefault();
@@ -99,7 +99,6 @@ window.UISubmap = (function () {
 
     $("#resampleDialog").dialog({
       title: "Transform map",
-      width: "430px",
       resizable: false,
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
@@ -114,7 +113,7 @@ window.UISubmap = (function () {
     });
 
     // use double resolution for PNG to get sharper image
-    const $preview = await loadPreview($previewBox, w*2, h*2);
+    const $preview = await loadPreview($previewBox, w * 2, h * 2);
     // could be done with SVG. Faster to load, slower to use.
     // const $preview = await loadPreviewSVG($previewBox, w, h);
     $preview.style.position = "absolute";
@@ -122,22 +121,22 @@ window.UISubmap = (function () {
     $preview.style.height = h + "px";
 
     byId("resampleDialog").oninput = event => {
-      const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput();
-      const scale = Math.pow(1.1,ratio);
+      const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
+      const scale = Math.pow(1.1, ratio);
       const transformStyle = `
-        translate(${shiftX*previewScale}px, ${shiftY*previewScale}px)
-        scale(${mirrorH?-scale:scale}, ${mirrorV?-scale:scale})
+        translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
+        scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
         rotate(${angle}rad)
       `;
 
       $preview.style.transform = transformStyle;
-      $preview.style['transform-origin'] = 'center';
+      $preview.style["transform-origin"] = "center";
       event.stopPropagation();
-    }
+    };
   }
 
   async function loadPreview($container, w, h) {
-    const url = await getMapURL("png", { globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true });
+    const url = await getMapURL("png", {globe: false, noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noIce: true});
 
     const canvas = document.createElement("canvas");
     const ctx = canvas.getContext("2d");
@@ -148,16 +147,16 @@ window.UISubmap = (function () {
     img.onload = function () {
       ctx.drawImage(img, 0, 0, w, h);
     };
-    $container.textContent = '';
+    $container.textContent = "";
     $container.appendChild(canvas);
     return canvas;
   }
 
   // currently unused alternative to PNG version
   async function loadPreviewSVG($container, w, h) {
-    $container.innerHTML = /*html*/`
+    $container.innerHTML = /*html*/ `
       <svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
-        <rect width="100%" height="100%" fill="${byId('styleOceanFill').value}" />
+        <rect width="100%" height="100%" fill="${byId("styleOceanFill").value}" />
         <rect fill="url(#oceanic)" width="100%" height="100%" />
         <use href="#map"></use>
       </svg>
@@ -171,12 +170,12 @@ window.UISubmap = (function () {
     const cellNumId = +byId("submapPointsInput").value;
     if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
 
-    const { angle, shiftX, shiftY, ratio, mirrorH, mirrorV } = getTransformInput()
+    const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
 
     const [cx, cy] = [graphWidth / 2, graphHeight / 2];
     const rot = alfa => (x, y) => [(x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx, (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy];
     const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
-    const scale = r => (x, y) => [(x-cx) * r + cx, (y-cy) * r + cy];
+    const scale = r => (x, y) => [(x - cx) * r + cx, (y - cy) * r + cy];
     const flipH = (x, y) => [-x + 2 * cx, y];
     const flipV = (x, y) => [x, -y + 2 * cy];
     const app = (f, g) => (x, y) => f(...g(x, y));
@@ -186,7 +185,7 @@ window.UISubmap = (function () {
     let inverse = id;
 
     if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
-    if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1,ratio)), projection), app(inverse, scale(Math.pow(1.1,-ratio)))];
+    if (ratio) [projection, inverse] = [app(scale(Math.pow(1.1, ratio)), projection), app(inverse, scale(Math.pow(1.1, -ratio)))];
     if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
     if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
     if (shiftX || shiftY) {
@@ -230,7 +229,7 @@ window.UISubmap = (function () {
       smoothHeightMap: scale > 2,
       inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
       projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
-      scale: origScale,
+      scale: origScale
     };
 
     // converting map position on the planet
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index bfd28964..6fbc117a 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -3,7 +3,7 @@ function editWorld() {
   $("#worldConfigurator").dialog({
     title: "Configure World",
     resizable: false,
-    width: "42em",
+    width: "minmax(40em, 85vw)",
     buttons: {
       "Whole World": () => applyWorldPreset(100, 50),
       Northern: () => applyWorldPreset(33, 25),
diff --git a/utils/graphUtils.js b/utils/graphUtils.js
index 3814241f..3755f7c1 100644
--- a/utils/graphUtils.js
+++ b/utils/graphUtils.js
@@ -261,7 +261,7 @@ function drawCellsValue(data) {
 function drawPolygons(data) {
   const max = d3.max(data),
     min = d3.min(data),
-    scheme = getColorScheme();
+    scheme = getColorScheme(terrs.attr("scheme"));
   data = data.map(d => 1 - normalize(d, min, max));
 
   debug.selectAll("polygon").remove();