diff --git a/index.css b/index.css
index 159384f5..caedf524 100644
--- a/index.css
+++ b/index.css
@@ -761,17 +761,17 @@ table.matrix-table td.x {
 }
 
 body button.noicon {
-	width: 24px;
-	height: 20px;
-	margin: 1px;
-	padding: 1px 6px;
-	float: left;
+	width: 1.8em;
+  height: 1.6em;
+  margin: 1px;
+  padding: .1em .5em;
+  float: left;
+  font-size: 1.2em;
 	font-family: Copperplate, monospace;
 }
 
 #brushesButtons > button {
 	padding: 0;
-	width: 25px;
 }
 
 #brushesButtons svg {
@@ -785,16 +785,16 @@ body button.noicon {
 
 #templateEditor #templateTools {
 	display: inline-block;
-	margin-bottom: -3px;
+	margin-bottom: -.3em;
 }
 
 #templateBody>div {
-	border: 1px solid #a3a3a3;
-	border-radius: 1px;
-	background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%);
-	margin: 1px 1px;
-	padding: 1px 2px;
-	height: 13px;
+  border: 1px solid #a3a3a3;
+  border-radius: 1px;
+  background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%);
+  margin: 1px 1px;
+  padding: .1em .2em;
+  height: 1.2em;
 }
 
 #templateBody>div:hover {
@@ -950,7 +950,7 @@ i.resetButton:active {
 	outline: none;
 	height: 2px;
 	background: #d4d4d4;
-	top: -4px;
+	top: -.35em;
 	position: relative;
 	appearance: none;
 	-webkit-appearance: none;
@@ -959,8 +959,8 @@ i.resetButton:active {
 .ui-dialog input[type="range"]::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	border-radius: 15%;
-	width: 10px;
-	height: 10px;
+  width: 1em;
+  height: 1em;
 	background: #e9e9e9;
 	border: 1px solid #9b9b9b;
 	cursor: pointer;
@@ -969,8 +969,8 @@ i.resetButton:active {
 .ui-dialog input[type="range"]::-moz-range-thumb {
 	appearance: none;
 	border-radius: 15%;
-	width: 10px;
-	height: 10px;
+  width: 1em;
+  height: 1em;
 	background: #e9e9e9;
 	border: 1px solid #9b9b9b;
 	cursor: pointer;
@@ -1044,13 +1044,13 @@ div.slider .ui-slider-handle {
 
 #brushPower,
 #brushRadius {
-	width: 88px;
+	width: 8em;
 }
 
 #rescaleHigher,
 #rescaleLower,
 #rescaleModifier {
-	width: 40px;
+	width: 3.7em;
 }
 
 .italic {
@@ -1363,11 +1363,16 @@ div.states > div.biomeArea {
 	stroke: #000000;
 }
 
+#pickerControls,
+#pickerSpaces {
+	font-size: 11px;
+}
+
 #pickerSpaces input {
 	height: 8px;
 	width: 16px;
-	font-size: 9px;
 	text-align: center;
+	font-size: 9px;
 	-moz-appearance: textfield;
 }
 
@@ -1625,18 +1630,17 @@ input[type="checkbox"] {
 	content: '';
 	display: inline-block;
 	vertical-align: text-top;
-	width: 7px;
-	height: 7px;
-	padding: 2px;
-	margin-right: 3px;
+  width: .6em;
+  height: .6em;
+  padding: .2em;
+  margin-right: .2em;
 	border: 1px solid darkgrey;
 	border-radius: 15%;
 	background: white;
 }
 
 .checkbox:checked+.checkbox-label:before {
-	line-height: 8px;
-	font-size: 12px;
+	line-height: .8em;
 	font-weight: bold;
 	content: '✓';
 	color: #333333;
@@ -1679,7 +1683,6 @@ div.textual textarea {
 div.textual input {
 	font-family: Copperplate, monospace;
 	outline: none;
-	height: 12px;
 }
 
 div.textual fieldset {
@@ -1688,7 +1691,7 @@ div.textual fieldset {
 }
 
 div.textual span, .textual legend {
-	font-size: 9px;
+	font-size: .8em;
 	font-weight: bold;
 }
 
@@ -1788,7 +1791,6 @@ svg.button {
 #reliefIconsDiv {
 	margin-top: 2px;
 	padding: 2px;
-	max-width: 30vw;
 }
 
 #reliefIconsDiv svg {
diff --git a/index.html b/index.html
index 8160dcbf..062812f8 100644
--- a/index.html
+++ b/index.html
@@ -2400,7 +2400,7 @@
         <button id="convertComplete" data-tip="Complete the assignment. All unassigned colors will be considered as ocean" class="icon-check"></button>
       </div>
 
-      <div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i>
+      <div data-tip="Set opacity of the loaded image" style="padding-top: 4px"><i>Overlay opacity:</i><br>
         <input id="convertOverlay" type="range" min=0 max=1 step=.01 value=0 style="width: 8em">
         <input id="convertOverlayNumber" type="number" min=0 max=1 step=.01 value=0 style="width: 3.5em; border: 1px solid #d4d4d4">
       </div>
@@ -2739,9 +2739,9 @@
     <div id="notesEditor" class="dialog stable textual" style="display: none">
       <div>
         <span>Select object: </span>
-        <select id="notesSelect" data-tip="Select object" style="width: 120px;"></select>
+        <select id="notesSelect" data-tip="Select object" style="width: 12em"></select>
         <span>Object name: </span>
-        <input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 120px;">
+        <input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 12em">
       </div>
       <div>
         <span>Legend:</span><br>
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index e0d203df..2c3aa432 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -418,7 +418,7 @@ function getHeight(h) {
   function openBrushesPanel() {
     if ($("#brushesPanel").is(":visible")) return;
     $("#brushesPanel").dialog({
-      title: "Paint Brushes", minHeight: 40, width: "auto", maxWidth: 200, resizable: false,
+      title: "Paint Brushes", resizable: false,
       position: {my: "right top", at: "right-10 top+10", of: "svg"}
     }).on('dialogclose', exitBrushMode);
 
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 654d77de..15fb4bcd 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -27,7 +27,7 @@ function editNotes(id, name) {
 
   // open a dialog
   $("#notesEditor").dialog({
-    title: "Notes Editor", minWidth: Math.min(svgWidth, 400),
+    title: "Notes Editor", minWidth: "40em",
     position: {my: "center", at: "center", of: "svg"}
   });
 
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 032b7f86..fee6774b 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -61,8 +61,9 @@ options.querySelector("div.tab").addEventListener("click", function(event) {
 
   if (id === "styleTab") styleContent.style.display = "block"; else
   if (id === "optionsTab") optionsContent.style.display = "block"; else
-  if (id === "toolsTab" && (!customization || customization === 10)) toolsContent.style.display = "block"; else
-  if (id === "toolsTab" && customization && customization !== 10) customizationMenu.style.display = "block"; else
+  if (id === "toolsTab") customization === 1 
+    ? customizationMenu.style.display = "block" 
+    : toolsContent.style.display = "block"; else
   if (id === "aboutTab") aboutContent.style.display = "block";
 });
 
@@ -601,9 +602,9 @@ function askToRestoreDefaultStyle() {
 // request a URL to image to be used as a texture
 function textureProvideURL() {
   alertMessage.innerHTML = `Provide an image URL to be used as a texture:
-                            <input id="textureURL" type="url" style="width: 254px" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)">
+                            <input id="textureURL" type="url" style="width: 24em" placeholder="http://www.example.com/image.jpg" oninput="fetchTextureURL(this.value)">
                             <div style="border: 1px solid darkgrey; height: 144px; margin-top: 2px"><canvas id="preview" width="256px" height="144px"></canvas></div>`;
-  $("#alert").dialog({resizable: false, title: "Load custom texture", width: 280,
+  $("#alert").dialog({resizable: false, title: "Load custom texture", width: "26em",
     buttons: {
       Apply: function() {
         const name = textureURL.value.split("/").pop();
@@ -679,6 +680,7 @@ optionsContent.addEventListener("input", function(event) {
   else if (id === "manorsInput") changeBurgsNumberSlider(value);
   else if (id === "religionsInput") religionsOutput.value = value;
   else if (id === "uiSizeInput") uiSizeOutput.value = value;
+  else if (id === "uiSizeOutput") changeUIsize(value);
   else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
   else if (id === "transparencyInput") changeDialogsTransparency(value);
   else if (id === "pngResolutionInput") pngResolutionOutput.value = value;
@@ -690,7 +692,7 @@ optionsContent.addEventListener("change", function(event) {
   const id = event.target.id, value = event.target.value;
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed();
-  else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value);
+  else if (id === "uiSizeInput") changeUIsize(value);
 });
 
 optionsContent.addEventListener("click", function(event) {
@@ -862,7 +864,7 @@ function applyStoredOptions() {
   if (localStorage.getItem("regions")) changeStatesNumber(localStorage.getItem("regions"));
 
   if (localStorage.getItem("uiSize")) changeUIsize(localStorage.getItem("uiSize"));
-  else changeUIsize(Math.max(Math.min(rn(mapWidthInput.value / 1230, 1), 3), 1));
+  else changeUIsize(Math.max(Math.min(rn(mapWidthInput.value / 1280, 1), 2.5), 1));
 }
 
 // randomize options if randomization is allowed (not locked)
@@ -1064,10 +1066,10 @@ function toggleLoadPane() {
 function loadURL() {
   const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
   const inner = `Provide URL to a .map file:
-    <input id="mapURL" type="url" style="width: 254px" placeholder="https://e-cloud.com/test.map">
+    <input id="mapURL" type="url" style="width: 24em" placeholder="https://e-cloud.com/test.map">
     <br><i>Please note server should allow CORS for file to be loaded. If CORS is not allowed, save file to Dropbox and provide a direct link</i>`;
   alertMessage.innerHTML = inner;
-  $("#alert").dialog({resizable: false, title: "Load map from URL", width: 280,
+  $("#alert").dialog({resizable: false, title: "Load map from URL", width: "26em",
     buttons: {
       Load: function() {
         const value = mapURL.value;
diff --git a/modules/ui/relief-editor.js b/modules/ui/relief-editor.js
index c53e8751..a361daa6 100644
--- a/modules/ui/relief-editor.js
+++ b/modules/ui/relief-editor.js
@@ -12,7 +12,7 @@ function editReliefIcon() {
   updateReliefSizeInput();
 
   $("#reliefEditor").dialog({
-    title: "Edit Relief Icons", resizable: false, width: 294,
+    title: "Edit Relief Icons", resizable: false, width: "27em",
     position: {my: "left top", at: "left+10 top+10", of: "#map"},
     close: closeReliefEditor
   });
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 0684113e..20841f49 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -340,7 +340,7 @@ function addRiverOnClick() {
     alertMessage.innerHTML = `<p>Heightmap is depressed and the system had to change the heightmap to allow water flux.</p>
     Would you like to <i>keep</i> the changes or <i>restore</i> the initial heightmap?`;
 
-    $("#alert").dialog({resizable: false, title: "Heightmap is changed", width: 300, modal: true,
+    $("#alert").dialog({resizable: false, title: "Heightmap is changed", width: "30em", modal: true,
       buttons: {
         Keep: function() {$(this).dialog("close");},
         Restore: function() {