diff --git a/index.html b/index.html
index 1a99b26..b897f96 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,9 @@
         <div id="choropleth">
             <svg width="100%" viewBox="0 0 2000 1000"></svg>
             <script>
+                const colorScale = d3.scaleLinear()
+                    .domain([0, 5]) 
+                    .range(["#f0f0f0", "#4CAF50"]); 
                 // here, I am trying to load the geoJSON file that is given to us
                 d3.json("https://enjalot.github.io/wwsd/data/world/world-110m.geojson").then(function (world) {
                     d3.csv("./data/WorldCupMatches.csv").then(function (data) {
@@ -91,7 +94,14 @@
                             .data(world.features)
                             .enter().append("path")
                             .attr("d", path)
-                            .attr("fill", "white")
+                            .attr("fill", d => {
+                                // Get the name of the country
+                                const countryName = d.properties.name;
+                                // Get the number of trophies won by the country, defaulting to 0 if not found
+                                const trophiesWon = winCount[countryName] || 0;
+                                // Map the number of trophies to the color scale
+                                return colorScale(trophiesWon);
+                            })
                             .on("mouseover", function (event, d) {
                                 // Transitioning to light blue
                                 d3.select(this)