diff --git a/index.html b/index.html
index 4bc616526..42bc9c5fc 100644
--- a/index.html
+++ b/index.html
@@ -4579,6 +4579,7 @@
         <div id="provincesBottom">
           <button id="provincesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
           <button id="provincesEditStyle" data-tip="Edit provinces style in Style Editor" class="icon-adjust"></button>
+          <button id="provincesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
           <button
             id="provincesRecolor"
             data-tip="Recolor listed provinces based on state color"
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index f8a88cfb1..673dc021a 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -26,6 +26,7 @@ function editProvinces() {
   document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
   document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
   document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
+  document.getElementById("provincesLegend").addEventListener("click", toggleLegend);
   document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("provincesChart").addEventListener("click", showChart);
   document.getElementById("provincesToggleLabels").addEventListener("click", toggleLabels);
@@ -583,6 +584,17 @@ function editProvinces() {
     pack.provinces[p].center = pack.burgs[+value].cell;
     pack.provinces[p].burg = +value;
   }
+  
+  function toggleLegend() {
+  if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+
+  const selectedState = +document.getElementById("provincesFilterState").value;
+  const data = pack.provinces
+    .filter(p => p.i && !p.removed && ((selectedState < 0) || (selectedState >= 0 && p.state == selectedState)))
+    .sort((a, b) => b.area - a.area)
+    .map(p => [p.i, p.color, p.name]);
+  drawLegend("Provinces", data);
+}
 
   function togglePercentageMode() {
     if (body.dataset.type === "absolute") {