diff --git a/index.css b/index.css
index 8cbef85f..d29060a5 100644
--- a/index.css
+++ b/index.css
@@ -526,7 +526,23 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 	color: white;
 }
 
-.glow {
+#exitCustomization {
+	position: absolute;
+	display: none;
+}
+
+#exitCustomization > div {
+	width: 12em;
+	background: #5d4651;
+	cursor: move;
+}
+
+#finalizeHeightmap {
+	width: 100%;
+	border: none;
+	padding: .45em .75em;
+	margin: .4em 0;
+	font-family: Consolas, monospace;
 	animation: glowing 2s infinite;
 }
 
diff --git a/index.html b/index.html
index 0ffa511d..aa7616c6 100644
--- a/index.html
+++ b/index.html
@@ -1872,8 +1872,6 @@
           <span>Cell: </span><span id="heightmapInfoCell"></span><br>
           <span>Height: </span><span id="heightmapInfoHeight"></span>
         </div>
-
-        <button data-tip="Finalize the heightmap and exit the edit mode" id="finalizeHeightmap" class="glow">Exit Customization</button>
       </div>
 
       <div id="aboutContent" class="tabcontent">
@@ -1908,6 +1906,13 @@
       </div>
 
     </div>
+
+  </div>
+
+  <div id="exitCustomization">
+    <div data-tip="Drag to move the pane">
+      <button data-tip="Finalize the heightmap and exit the edit mode" id="finalizeHeightmap">Exit Customization</button>
+    </div>
   </div>
 
   <div id="dialogs" style="background-color: #ffffff">
@@ -1963,10 +1968,10 @@
           <span id="mapSize"></span> px = <span id="mapSizeFriendly"></span>
         </div>
         <div>
-          <i data-tip="Length of Medirian. Almost half of the equator length">Meridian length:</i><br>
-          <span id="meridianLength" data-tip="Length of Medirian in pixels"></span> px =
-          <span id="meridianLengthFriendly" data-tip="Length of Medirian is friendly units (depends on user configuration)"></span>
-          <span id="meridianLengthEarth" data-tip="Fantasy world medirian length relative to real-world Earth (20k km)"></span>
+          <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>
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 59bba74d..adb2771c 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -16,6 +16,7 @@ const tooltip = document.getElementById("tooltip");
 // show tip for non-svg elemets with data-tip
 document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
 document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
+document.getElementById("exitCustomization").addEventListener("mousemove", showDataTip);
 
 function tip(tip = "Tip is undefined", main, error, time) {
   tooltip.innerHTML = tip;
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 25fcfd73..d3859e95 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -66,6 +66,17 @@ function editHeightmap() {
     applyTemplate.style.display = type === "keep" ? "none" : "inline-block";
     convertImage.style.display = type === "keep" ? "none" : "inline-block";
 
+    // show finalize button
+    const box = exitCustomization.getBoundingClientRect();
+    exitCustomization.style.opacity = 0;
+    exitCustomization.style.right = (svgWidth + box.width) / 2 + "px";
+    exitCustomization.style.bottom = (svgHeight + box.height) / 2 + "px";
+    exitCustomization.style.transform = "scale(2)";
+    exitCustomization.style.display = "block";
+    d3.select("#exitCustomization")
+      .transition().duration(1000).style("opacity", 1)
+      .transition().duration(2000).ease(d3.easeSinInOut).style("right", "10px").style("bottom", "10px").style("transform", "scale(1)");
+
     openBrushesPanel();
     turnButtonOn("toggleHeight");
     layersPreset.value = "heightmap";
@@ -113,6 +124,7 @@ function editHeightmap() {
     customizationMenu.style.display = "none";
     toolsContent.style.display = "block";
     layersPreset.disabled = false;
+    exitCustomization.style.display = "none"; // hide finalize button
     restoreDefaultEvents();
     clearMainTip();
     closeDialogs();
diff --git a/modules/ui/options.js b/modules/ui/options.js
index cd81d757..8e9e407e 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -2,6 +2,7 @@
 "use strict";
 
 $("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
+$("#exitCustomization").draggable({handle: "div"});
 $("#mapLayers").disableSelection();
 
 // remove glow if tip is aknowledged