diff --git a/script/script.js b/script/script.js
index 44ef039..a108184 100644
--- a/script/script.js
+++ b/script/script.js
@@ -568,8 +568,8 @@ function drawChoropleth(data, worldData, selectedContinent) {
 
   // Color scale for choropleth
   const colorScale = d3.scaleSequential()
-    .interpolator(d3.interpolateYlGnBu)
-    .domain([0, 100]);
+    .interpolator(darkMode ? d3.interpolateYlOrRd : d3.interpolateYlGnBu)
+    .domain(darkMode ? [100, 0] : [0, 100]);
 
   // Remove previous map if any
   g.selectAll(".country").remove();
@@ -639,12 +639,15 @@ function drawChoropleth(data, worldData, selectedContinent) {
     }
   }
 
-  // Add legend for color scale
+  // Add legend for color scale (draw OUTSIDE zoom group, so it remains fixed)
   const legendWidth = 200;
   const legendHeight = 12;
-  const legendSvg = g.append("g")
+  // Remove any previous choropleth legend
+  svg.selectAll(".choropleth-legend").remove();
+  // Place legend at the bottom center of the SVG
+  const legendSvg = svg.append("g")
     .attr("class", "choropleth-legend")
-    .attr("transform", `translate(${width - legendWidth - 20},${height - 40})`);
+    .attr("transform", `translate(${(+svg.attr("width") - 200) / 2},${+svg.attr("height") - 40})`);
 
   const defs = svg.select("defs").empty() ? svg.append("defs") : svg.select("defs");
   defs.selectAll("#choropleth-gradient").remove();
@@ -667,4 +670,15 @@ function drawChoropleth(data, worldData, selectedContinent) {
   legendSvg.append("g")
     .attr("transform", `translate(0,${legendHeight})`)
     .call(legendAxis);
+
+  // Dark mode styling for legend axis and labels
+  if (darkMode) {
+    legendSvg.selectAll("text").style("fill", "#eee");
+    legendSvg.selectAll("path").style("stroke", "#eee");
+    legendSvg.selectAll("line").style("stroke", "#eee");
+  } else {
+    legendSvg.selectAll("text").style("fill", "#000");
+    legendSvg.selectAll("path").style("stroke", "#000");
+    legendSvg.selectAll("line").style("stroke", "#000");
+  }
 }
\ No newline at end of file