diff --git a/index.css b/index.css
index 55e03f9a..4e58b8c7 100644
--- a/index.css
+++ b/index.css
@@ -734,7 +734,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   background-color: var(--header-active);
 }
 
-#toolsContent div {
+#toolsContent > .grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin: 0.2em 0;
@@ -2375,6 +2375,29 @@ svg.button {
   background: #ccc;
 }
 
+.separator {
+  display: flex;
+  align-items: center;
+  text-align: center;
+
+  font-style: italic;
+  font-weight: bold;
+  color: #222;
+  margin: 0.8em 0 0 0;
+}
+.separator::before,
+.separator::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid #333;
+}
+.separator:not(:empty)::before {
+  margin-right: 0.25em;
+}
+.separator:not(:empty)::after {
+  margin-left: 0.25em;
+}
+
 @media print {
   div,
   canvas {
diff --git a/index.html b/index.html
index 11faecf1..23cbe985 100644
--- a/index.html
+++ b/index.html
@@ -380,7 +380,7 @@
         <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)" />
       </svg>
       <svg id="loading-rose" width="100%" height="100%" viewBox="0 0 700 700">
-        <use href="#rose" x="50%" y="50%" />
+        <use href="#defs-compass-rose" x="50%" y="50%" />
       </svg>
       <div id="loading-typography">
         <div id="titleName">Azgaar's</div>
@@ -2062,23 +2062,16 @@
         </div>
 
         <div id="toolsContent" class="tabcontent">
-          <p>Click to configure:</p>
-          <div>
-            <button
-              id="editHeightmapButton"
-              data-tip="Click to open Heightmap customization menu"
-              data-shortcut="Shift + H"
-            >
-              Heightmap
-            </button>
+          <div class="separator">Edit</div>
+          <div class="grid">
             <button id="editBiomesButton" data-tip="Click to open Biomes Editor" data-shortcut="Shift + B">
               Biomes
             </button>
-            <button id="editStatesButton" data-tip="Click to open States Editor" data-shortcut="Shift + S">
-              States
+            <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview" data-shortcut="Shift + T">
+              Burgs
             </button>
-            <button id="editProvincesButton" data-tip="Click to open Provinces Editor" data-shortcut="Shift + P">
-              Provinces
+            <button id="editCulturesButton" data-tip="Click to open Cultures Editor" data-shortcut="Shift + C">
+              Cultures
             </button>
             <button
               id="editDiplomacyButton"
@@ -2087,37 +2080,18 @@
             >
               Diplomacy
             </button>
-            <button id="editCulturesButton" data-tip="Click to open Cultures Editor" data-shortcut="Shift + C">
-              Cultures
-            </button>
-            <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor" data-shortcut="Shift + N">
-              Namesbase
-            </button>
-            <button id="editZonesButton" data-tip="Click to open Zones Editor" data-shortcut="Shift + Z">Zones</button>
-            <button id="editReligions" data-tip="Click to open Religions Editor" data-shortcut="Shift + R">
-              Religions
-            </button>
             <button id="editEmblemButton" data-tip="Click to open Emblem Editor" data-shortcut="Shift + Y">
               Emblems
             </button>
-            <button id="editUnitsButton" data-tip="Click to open Units Editor" data-shortcut="Shift + Q">Units</button>
-            <button id="editNotesButton" data-tip="Click to open Notes Editor" data-shortcut="Shift + O">Notes</button>
-          </div>
-
-          <p>Click to overview:</p>
-          <div>
             <button
-              id="overviewChartsButton"
-              data-tip="Click to open Charts to overview cells data"
-              data-shortcut="Shift + A"
+              id="editHeightmapButton"
+              data-tip="Click to open Heightmap customization menu"
+              data-shortcut="Shift + H"
             >
-              Charts
+              Heightmap
             </button>
-            <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview" data-shortcut="Shift + T">
-              Burgs
-            </button>
-            <button id="overviewRiversButton" data-tip="Click to open Rivers Overview" data-shortcut="Shift + V">
-              Rivers
+            <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">
+              Markers
             </button>
             <button
               id="overviewMilitaryButton"
@@ -2126,41 +2100,55 @@
             >
               Military
             </button>
-            <button id="overviewMarkersButton" data-tip="Click to open Markers Overview" data-shortcut="Shift + K">
-              Markers
+            <button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor" data-shortcut="Shift + N">
+              Namesbase
             </button>
-            <button id="overviewCellsButton" data-tip="Click to open Cell details view" data-shortcut="Shift + E">
-              Cells
+            <button id="editNotesButton" data-tip="Click to open Notes Editor" data-shortcut="Shift + O">Notes</button>
+            <button id="editProvincesButton" data-tip="Click to open Provinces Editor" data-shortcut="Shift + P">
+              Provinces
             </button>
+            <button id="editReligions" data-tip="Click to open Religions Editor" data-shortcut="Shift + R">
+              Religions
+            </button>
+            <button id="overviewRiversButton" data-tip="Click to open Rivers Overview" data-shortcut="Shift + V">
+              Rivers
+            </button>
+            <button id="editStatesButton" data-tip="Click to open States Editor" data-shortcut="Shift + S">
+              States
+            </button>
+            <button id="editUnitsButton" data-tip="Click to open Units Editor" data-shortcut="Shift + Q">Units</button>
+            <button id="editZonesButton" data-tip="Click to open Zones Editor" data-shortcut="Shift + Z">Zones</button>
           </div>
 
-          <p>Click to regenerate:</p>
-          <div id="regenerateFeature">
+          <div class="separator">Regenerate</div>
+          <div id="regenerateFeature" class="grid">
+            <button
+              id="regenerateBurgs"
+              data-tip="Click to regenerate all unlocked burgs and routes. States will remain as they are. Note: burgs are only generated in populated areas with culture assigned"
+            >
+              Burgs
+            </button>
+            <button id="regenerateCultures" data-tip="Click to regenerate non-locked cultures">Cultures</button>
+            <button id="regenerateEmblems" data-tip="Click to regenerate all emblems">Emblems</button>
+            <button id="regenerateIce" data-tip="Click to regenerate icebergs and glaciers">Ice</button>
             <button
               id="regenerateStateLabels"
               data-tip="Click to update state labels placement based on current borders"
             >
               Labels
             </button>
-            <button
-              id="regenerateReliefIcons"
-              data-tip="Click to regenerate all relief icons based on current cell biome and elevation"
-            >
-              Relief
+            <button id="regenerateMarkers" data-tip="Click to regenerate unlocked markers">
+              Markers <i id="configRegenerateMarkers" class="icon-cog" data-tip="Click to set number multiplier"></i>
             </button>
-            <button id="regenerateRoutes" data-tip="Click to regenerate all routes">Routes</button>
-            <button id="regenerateRivers" data-tip="Click to regenerate all rivers (restore default state)">
-              Rivers
+            <button
+              id="regenerateMilitary"
+              data-tip="Click to recalculate military forces based on current military options"
+            >
+              Military
             </button>
             <button id="regeneratePopulation" data-tip="Click to recalculate rural and urban population">
               Population
             </button>
-            <button
-              id="regenerateStates"
-              data-tip="Click to select new capitals and regenerate non-locked states. Emblems and military forces will be regenerated as well, burgs will remain as they are"
-            >
-              States
-            </button>
             <button
               id="regenerateProvinces"
               data-tip="Click to regenerate non-locked provinces. States will remain as they are"
@@ -2168,23 +2156,21 @@
               Provinces
             </button>
             <button
-              id="regenerateBurgs"
-              data-tip="Click to regenerate all unlocked burgs and routes. States will remain as they are. Note: burgs are only generated in populated areas with culture assigned"
+              id="regenerateReliefIcons"
+              data-tip="Click to regenerate all relief icons based on current cell biome and elevation"
             >
-              Burgs
+              Relief
             </button>
-            <button id="regenerateEmblems" data-tip="Click to regenerate all emblems">Emblems</button>
             <button id="regenerateReligions" data-tip="Click to regenerate non-locked religions">Religions</button>
-            <button id="regenerateCultures" data-tip="Click to regenerate non-locked cultures">Cultures</button>
-            <button
-              id="regenerateMilitary"
-              data-tip="Click to recalculate military forces based on current military options"
-            >
-              Military
+            <button id="regenerateRivers" data-tip="Click to regenerate all rivers (restore default state)">
+              Rivers
             </button>
-            <button id="regenerateIce" data-tip="Click to regenerate icebergs and glaciers">Ice</button>
-            <button id="regenerateMarkers" data-tip="Click to regenerate unlocked markers">
-              Markers <i id="configRegenerateMarkers" class="icon-cog" data-tip="Click to set number multiplier"></i>
+            <button id="regenerateRoutes" data-tip="Click to regenerate all routes">Routes</button>
+            <button
+              id="regenerateStates"
+              data-tip="Click to select new capitals and regenerate non-locked states. Emblems and military forces will be regenerated as well, burgs will remain as they are"
+            >
+              States
             </button>
             <button
               id="regenerateZones"
@@ -2194,8 +2180,8 @@
             </button>
           </div>
 
-          <p>Click to add:</p>
-          <div id="addFeature">
+          <div class="separator">Add</div>
+          <div id="addFeature" class="grid">
             <button
               id="addBurgTool"
               data-tip="Click on map to place a burg. Hold Shift to add multiple"
@@ -2210,6 +2196,13 @@
             >
               Label
             </button>
+            <button
+              id="addMarker"
+              data-tip="Click on map to place a marker. Hold Shift to add multiple"
+              data-shortcut="Shift + 5"
+            >
+              Marker
+            </button>
             <button
               id="addRiver"
               data-tip="Click on map to place a river. Hold Shift to add multiple"
@@ -2218,17 +2211,24 @@
               River
             </button>
             <button id="addRoute" data-tip="Click on map to place a route" data-shortcut="Shift + 4">Route</button>
+          </div>
+
+          <div class="separator">Show</div>
+          <div class="grid">
+            <button id="overviewCellsButton" data-tip="Click to open Cell details view" data-shortcut="Shift + E">
+              Cells
+            </button>
             <button
-              id="addMarker"
-              data-tip="Click on map to place a marker. Hold Shift to add multiple"
-              data-shortcut="Shift + 5"
+              id="overviewChartsButton"
+              data-tip="Click to open Charts to overview cells data"
+              data-shortcut="Shift + A"
             >
-              Marker
+              Charts
             </button>
           </div>
 
-          <p>Click to create a new map:</p>
-          <div>
+          <div class="separator">Create</div>
+          <div class="grid">
             <button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button>
             <button id="openResampleMenu" data-tip="Click to transform the map">Transform</button>
           </div>
@@ -7819,18 +7819,19 @@
           </symbol>
         </g>
 
-        <g id="rose" stroke-width="1">
-          <g id="sL" stroke="#3f3f3f">
+        <g id="defs-compass-rose" stroke-width="1.1">
+          <g id="rose-coord-line" stroke="#3f3f3f">
             <line id="sL1" x1="0" y1="-20000" x2="0" y2="20000" />
             <line id="sL2" x1="-20000" y1="0" x2="20000" y2="0" />
           </g>
-          <use href="#sL" transform="rotate(45)" />
-          <use href="#sL" transform="rotate(22.5)" />
-          <use href="#sL" transform="rotate(-22.5)" />
-          <use href="#sL" transform="rotate(11.25)" />
-          <use href="#sL" transform="rotate(-11.25)" />
-          <use href="#sL" transform="rotate(56.25)" />
-          <use href="#sL" transform="rotate(-56.25)" />
+          <use href="#rose-coord-line" transform="rotate(45)" />
+          <use href="#rose-coord-line" transform="rotate(22.5)" />
+          <use href="#rose-coord-line" transform="rotate(-22.5)" />
+          <use href="#rose-coord-line" transform="rotate(11.25)" />
+          <use href="#rose-coord-line" transform="rotate(-11.25)" />
+          <use href="#rose-coord-line" transform="rotate(56.25)" />
+          <use href="#rose-coord-line" transform="rotate(-56.25)" />
+
           <g stroke-width="8" stroke-opacity="1" shape-rendering="geometricprecision">
             <circle r="9" stroke="#000000" fill="#1b1b1b" />
             <circle r="75" stroke="#008000" fill="#ffffff" fill-opacity=".1" />
@@ -8058,7 +8059,7 @@
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js?v=1.88.00"></script>
-    <script src="modules/ocean-layers.js?v=1.96.00"></script>
+    <script src="modules/ocean-layers.js?v=1.98.00"></script>
     <script src="modules/river-generator.js?v=1.89.13"></script>
     <script src="modules/lakes.js"></script>
     <script src="modules/biomes.js"></script>
@@ -8082,7 +8083,7 @@
 
     <script src="modules/ui/general.js?v=1.96.00"></script>
     <script src="modules/ui/options.js?v=1.97.14"></script>
-    <script src="main.js?v=1.97.11"></script>
+    <script src="main.js?v=1.98.00"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js?v=1.96.00"></script>
@@ -8124,9 +8125,9 @@
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
     <script defer src="modules/io/save.js?v=1.96.00"></script>
-    <script defer src="modules/io/load.js?v=1.97.04"></script>
+    <script defer src="modules/io/load.js?v=1.98.00"></script>
     <script defer src="modules/io/cloud.js?v=1.96.00"></script>
-    <script defer src="modules/io/export.js?v=1.97.03"></script>
+    <script defer src="modules/io/export.js?v=1.98.00"></script>
 
     <!-- Web Components -->
     <script defer src="components/fill-box.js"></script>
diff --git a/main.js b/main.js
index b53a86dc..8900c18e 100644
--- a/main.js
+++ b/main.js
@@ -53,7 +53,7 @@ let biomes = viewbox.append("g").attr("id", "biomes");
 let cells = viewbox.append("g").attr("id", "cells");
 let gridOverlay = viewbox.append("g").attr("id", "gridOverlay");
 let coordinates = viewbox.append("g").attr("id", "coordinates");
-let compass = viewbox.append("g").attr("id", "compass");
+let compass = viewbox.append("g").attr("id", "compass").style("display", "none");
 let rivers = viewbox.append("g").attr("id", "rivers");
 let terrain = viewbox.append("g").attr("id", "terrain");
 let relig = viewbox.append("g").attr("id", "relig");
@@ -126,6 +126,9 @@ emblems.append("g").attr("id", "burgEmblems");
 emblems.append("g").attr("id", "provinceEmblems");
 emblems.append("g").attr("id", "stateEmblems");
 
+// compass
+compass.append("use").attr("xlink:href", "#defs-compass-rose");
+
 // fogging
 fogging.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
 fogging
diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
index c864cec5..38ae4403 100644
--- a/modules/dynamic/auto-update.js
+++ b/modules/dynamic/auto-update.js
@@ -846,4 +846,16 @@ export function resolveVersionConflicts(version) {
       }
     });
   }
+
+  if (version < 1.98) {
+    // v1.98.00 changed compass layer and rose element id
+    const rose = compass.select("use");
+    rose.attr("xlink:href", "#defs-compass-rose");
+
+    if (!compass.selectAll("*").size()) {
+      compass.style("display", "none");
+      compass.append("use").attr("xlink:href", "#defs-compass-rose");
+      shiftCompass();
+    }
+  }
 }
diff --git a/modules/io/export.js b/modules/io/export.js
index c4742612..e860197c 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -295,7 +295,7 @@ async function getMapURL(type, options) {
 
   // add wind rose
   if (cloneEl.getElementById("compass")) {
-    const rose = svgDefs.getElementById("rose");
+    const rose = svgDefs.getElementById("defs-compass-rose");
     if (rose) cloneDefs.appendChild(rose.cloneNode(true));
   }
 
diff --git a/modules/io/load.js b/modules/io/load.js
index ff6b2731..94cad90d 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -456,7 +456,7 @@ async function parseLoadedData(data, mapVersion) {
     {
       // dynamically import and run auto-update script
       const versionNumber = parseFloat(params[0]);
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.97.04");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.98.00");
       resolveVersionConflicts(versionNumber);
     }
 
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index 9db58faa..d3b0e44d 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -1525,10 +1525,6 @@ function toggleCompass(event) {
   if (!layerIsOn("toggleCompass")) {
     turnButtonOn("toggleCompass");
     $("#compass").fadeIn();
-    if (!compass.selectAll("*").size()) {
-      compass.append("use").attr("xlink:href", "#rose");
-      shiftCompass();
-    }
     if (event && isCtrlClick(event)) editStyle("compass");
   } else {
     if (event && isCtrlClick(event)) {
diff --git a/modules/ui/stylePresets.js b/modules/ui/stylePresets.js
index aa13d800..adbf5c14 100644
--- a/modules/ui/stylePresets.js
+++ b/modules/ui/stylePresets.js
@@ -63,7 +63,7 @@ async function getStylePreset(desiredPreset) {
 
 async function fetchSystemPreset(preset) {
   try {
-    const res = await fetch(`./styles/${preset}.json`);
+    const res = await fetch(`./styles/${preset}.json?v=${version}`);
     return await res.json();
   } catch (err) {
     throw new Error("Cannot fetch style preset", preset);
@@ -198,7 +198,7 @@ function addStylePreset() {
         "mask"
       ],
       "#compass": ["opacity", "transform", "filter", "mask", "shape-rendering"],
-      "#rose": ["transform"],
+      "#compass > use": ["transform"],
       "#relig": ["opacity", "stroke", "stroke-width", "filter"],
       "#cults": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter"],
       "#landmass": ["opacity", "fill", "filter"],
diff --git a/styles/ancient.json b/styles/ancient.json
index 78cac9e1..17d210a5 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -72,8 +72,8 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": "translate(80 80) scale(.25)"
+  "#compass > use": {
+    "transform": "translate(80 80) scale(0.25)"
   },
   "#relig": {
     "opacity": 0.7,
diff --git a/styles/atlas.json b/styles/atlas.json
index 040e551c..d8936b65 100644
--- a/styles/atlas.json
+++ b/styles/atlas.json
@@ -72,7 +72,7 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
+  "#compass > use": {
     "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
diff --git a/styles/clean.json b/styles/clean.json
index 6f2e7ac6..ba6fc3a5 100644
--- a/styles/clean.json
+++ b/styles/clean.json
@@ -73,8 +73,8 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": null
+  "#compass > use": {
+    "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
     "opacity": 0.7,
diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json
index 7b8d64b6..152cd0cd 100644
--- a/styles/cyberpunk.json
+++ b/styles/cyberpunk.json
@@ -72,8 +72,8 @@
     "mask": "",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": null
+  "#compass > use": {
+    "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
     "opacity": 0.5,
diff --git a/styles/default.json b/styles/default.json
index 7e6521ea..5cf061ba 100644
--- a/styles/default.json
+++ b/styles/default.json
@@ -72,8 +72,8 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": null
+  "#compass > use": {
+    "transform": "translate(80 80) scale(0.25)"
   },
   "#relig": {
     "opacity": 0.7,
diff --git a/styles/gloom.json b/styles/gloom.json
index 72c123e1..766db87b 100644
--- a/styles/gloom.json
+++ b/styles/gloom.json
@@ -73,7 +73,7 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
+  "#compass > use": {
     "transform": "translate(100 100) scale(0.3)"
   },
   "#relig": {
diff --git a/styles/light.json b/styles/light.json
index 955c7091..30748daf 100644
--- a/styles/light.json
+++ b/styles/light.json
@@ -72,8 +72,8 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": null
+  "#compass > use": {
+    "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
     "opacity": 0.5,
diff --git a/styles/monochrome.json b/styles/monochrome.json
index c0810154..6af0d6a1 100644
--- a/styles/monochrome.json
+++ b/styles/monochrome.json
@@ -73,8 +73,8 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": null
+  "#compass > use": {
+    "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
     "opacity": 0.7,
diff --git a/styles/night.json b/styles/night.json
index dbbcf0bf..790cad8d 100644
--- a/styles/night.json
+++ b/styles/night.json
@@ -72,7 +72,7 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
+  "#compass > use": {
     "transform": "translate(80 80) scale(0.25)"
   },
   "#relig": {
diff --git a/styles/pale.json b/styles/pale.json
index 883c614b..3a32ed6d 100644
--- a/styles/pale.json
+++ b/styles/pale.json
@@ -72,8 +72,8 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
-    "transform": null
+  "#compass > use": {
+    "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
     "opacity": 0.5,
diff --git a/styles/watercolor.json b/styles/watercolor.json
index 2605433c..4386940f 100644
--- a/styles/watercolor.json
+++ b/styles/watercolor.json
@@ -72,7 +72,7 @@
     "mask": "url(#water)",
     "shape-rendering": "optimizespeed"
   },
-  "#rose": {
+  "#compass > use": {
     "transform": "translate(80 80) scale(.25)"
   },
   "#relig": {
diff --git a/versioning.js b/versioning.js
index 0a72c745..5fa763d4 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.97.16"; // generator version, update each time
+const version = "1.98.00"; // generator version, update each time
 
 {
   document.title += " v" + version;