diff --git a/script/script.js b/script/script.js
index 61387b5..1979502 100644
--- a/script/script.js
+++ b/script/script.js
@@ -12,9 +12,9 @@ const y = d3.scaleLinear().rangeRound([height, 0]);
 
 // Education levels for legend and grouped charts
 const educationLevels = [
-  "Primary education",
-  "Secondary education",
-  "Tertiary education"
+  "Primary Education",
+  "Secondary Education",
+  "Tertiary Education"
 ];
 
 // Color scale for education levels
@@ -82,8 +82,19 @@ darkModeToggle.addEventListener('click', () => {
   g.selectAll(".lowest-box").attr("fill", darkMode ? "#222" : "#fff").attr("stroke", darkMode ? "#aaa" : "#999");
 });
 
+
 // Load data
 d3.csv("PHSwithContinent.csv").then(function(data) {
+  // Normalize Socio-economic status values to match educationLevels
+  data.forEach(d => {
+    if (d["Socio-economic status"] === "Pre-primary, primary and lower secondary education") {
+      d["Socio-economic status"] = "Primary Education";
+    } else if (d["Socio-economic status"] === "Upper secondary and post-secondary non-tertiary, all programmes") {
+      d["Socio-economic status"] = "Secondary Education";
+    } else if (d["Socio-economic status"] === "Tertiary education") {
+      d["Socio-economic status"] = "Tertiary Education";
+    }
+  });
   const allData = data;
 
   // Populate continent and education dropdowns