diff --git a/index.html b/index.html
index 5c56fc6d..e5b858e5 100644
--- a/index.html
+++ b/index.html
@@ -2261,7 +2261,7 @@
       </div>
 
       <div id="reliefBottom">
-        <button id="reliefEditStyle" data-tip="Edit Relief Icons style in Style Editor" class="icon-brush"></button>
+        <button id="reliefEditStyle" data-tip="Edit Relief Icons style in Style Editor" class="icon-adjust"></button>
         <button id="reliefCopy" data-tip="Copy selected relief icon" class="icon-clone"></button>
         <button id="reliefMoveFront" data-tip="Move selected relief icon to front" class="icon-level-up"></button>
         <button id="reliefMoveBack" data-tip="Move selected relief icon back" class="icon-level-down"></button>
@@ -3203,6 +3203,7 @@
       <div id="riversBottom">
         <button id="riversOverviewRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
         <button id="addNewRiver" data-tip="Add a new river. Hold Shift to add multiple" class="icon-plus"></button>
+        <button id="riversBasinHighlight" data-tip="Toggle basin highlight mode" class="icon-sitemap"></button>
         <button id="riversExport" data-tip="Save rivers-related data as a text file (.csv)" class="icon-download"></button>
         <button id="riversRemoveAll" data-tip="Remove all rivers" class="icon-trash"></button>
       </div>
diff --git a/modules/ui/rivers-overview.js b/modules/ui/rivers-overview.js
index 20adf356..e0b9c5c3 100644
--- a/modules/ui/rivers-overview.js
+++ b/modules/ui/rivers-overview.js
@@ -19,6 +19,7 @@ function overviewRivers() {
   // add listeners
   document.getElementById("riversOverviewRefresh").addEventListener("click", riversOverviewAddLines);
   document.getElementById("addNewRiver").addEventListener("click", toggleAddRiver);
+  document.getElementById("riversBasinHighlight").addEventListener("click", toggleBasinsHightlight);
   document.getElementById("riversExport").addEventListener("click", downloadRiversData);
   document.getElementById("riversRemoveAll").addEventListener("click", triggerAllRiversRemove);
 
@@ -99,6 +100,23 @@ function overviewRivers() {
     highlightElement(river);
   }
 
+  function toggleBasinsHightlight() {
+    if (rivers.attr("data-basin") === "hightlighted") {
+      rivers.selectAll("*").attr("fill", null);
+      rivers.attr("data-basin", null);
+    } else {
+      rivers.attr("data-basin", "hightlighted");
+      const basins = [...(new Set(pack.rivers.map(r=>r.basin)))];
+      const colors = getColors(basins.length);
+  
+      basins.forEach((b,i) => {
+        pack.rivers.filter(r => r.basin === b).forEach(r => {
+          rivers.select("#river"+r.i).attr("fill", colors[i]);
+        });
+      });
+    }
+  }
+
   function downloadRiversData() {
     let data = "Id,River,Type,Length,Basin\n"; // headers