diff --git a/src/App.vue b/src/App.vue
index b310b427eb901fc16713473ff206f3596d07d476..4da2f5643a7c52d43235d0632e4cd2dae453dcf3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,6 +45,15 @@ $SourceSans: 'Source Sans Pro', sans-serif;
 $textcolor: #000000;
 $linkcolor: #d66853;
 
+$DemographicCharacteristics: #625D0B;
+$LandTenure: #5C0601;
+$LivingConditions: #0B4E8B;
+$SocioeconomicStatus: #DC8260;
+$Health: #7F4A89;
+$RiskPerception: #249CB1;
+$Exposure: #B47D83;
+
+
 html {
   /* Make base font-size 100% of browser font-size */
   font-size: 100%;
@@ -176,8 +185,10 @@ a:active {
       max-width: 95vw;
       padding: 0.5rem;
     }  
-  }
-  .title-text {
-    width: 100%;  
-  }
+}
+.title-text {
+  width: 100%;  
+}
+
+
 </style>
diff --git a/src/components/BubbleChart2.vue b/src/components/Beeswarm.vue
similarity index 76%
rename from src/components/BubbleChart2.vue
rename to src/components/Beeswarm.vue
index ad4de7260c6b31d1a8d62e8b2788ac66ea234523..88e36660a1656af079a9f63fe2214f6d2268812c 100644
--- a/src/components/BubbleChart2.vue
+++ b/src/components/Beeswarm.vue
@@ -21,7 +21,7 @@
     });
 
     async function loadData() {
-        data.value = await d3.csv(publicPath + 'p2_agree_evid_stats.csv', d => { // using 'indicator_uncertainty.csv' instead doesn't separate by indicators and has fewer bubbles
+        data.value = await d3.csv(publicPath + 'indicator_uncertainty.csv', d => { // using 'indicator_uncertainty.csv' instead doesn't separate by indicators and has fewer bubbles
             d.level_agreement = +(+d.level_agreement).toFixed(2); 
             d.evidence_val = +d.evidence_val; 
             return d;
@@ -33,10 +33,15 @@
         const width = 1000;
         let margin = {top: 20, right: 20, bottom: 20, left: 20}
 
-        const categories = Array.from(new Set(data.value.map(d => d.dimension))); // Unique categories
-        
-        const colorScale = d3.scaleOrdinal(d3.schemeDark2)
-            .domain(categories)
+        const dimensionColors = {
+            DemographicCharacteristics: "#625D0B",
+            LandTenure: "#5C0601",
+            LivingConditions: "#0B4E8B",
+            SocioeconomicStatus: "#DC8260",
+            Health: "#7F4A89",
+            RiskPerception: "#249CB1",
+            Exposure: "#B47D83"
+        }
 
         const svg = d3.select("#chart-container")
             .append('svg')
@@ -58,11 +63,6 @@
             .attr("transform", "translate(0," + (height - margin.bottom) + ")")
             .call(d3.axisBottom(xScale))
 
-        // add line that connects bubble to xAxis
-        // const xLine = svg.append("line")
-        //     .attr("stroke","rgb(96, 126,139)")
-        //     .attr("stroke-dasharray", "1,2")
-        //     .style("opacity", 0);
 
         // define forces that control the bubbles
         const forceX = d3.forceX(d => xScale(d.level_agreement)).strength(1);
@@ -71,14 +71,14 @@
         // const forceCollide = d3.forceCollide(10); //forceCollide for bubbles of same size
         const forceManyBody = d3.forceManyBody().strength(-15); // Adjust the strength as needed
 
-        
+       
         const bubbles = svg.selectAll(".bubble")
             .data(data.value)
             .enter().append("circle")
-            .attr("class", "bubble")
+            .attr("class", d => "bubble " + d.dimension.replace(" ", ""))
             .attr('r', d => radiusScale(d.evidence_val)) // size bubbles based on evidence_val
             // .attr('r', 6) // size values explicitly
-            .style('fill',  d => colorScale(d.dimension));
+            .style('fill', d => dimensionColors[d.dimension.replace(" ", "")]);
         
         bubbles
             .on("mouseover", handleMouseOver)
@@ -112,10 +112,6 @@
             tooltip
                 .transition().duration(200)
                 .style("opacity", 1);
-            // optional dashed line to connect dot to x-axis
-            // xLine
-                // .transition().duration(200)
-                // .style("opacity", 1);
         }
 
         function handleMouseMove(event, d) {
@@ -123,17 +119,12 @@
             const containerRect = document.getElementById('chart-container').getBoundingClientRect();
             // console.log(containerRect);
             tooltip
-                .html(`${d.determinant} - ${d.indicator}, Level of Agreement: ${d.level_agreement}`) // remove d.indicator if using 'indicator_uncertainty.csv' as source 
+                .html(`${d.determinant}, Level of Agreement: ${d.level_agreement}`) // remove d.indicator if using 'indicator_uncertainty.csv' as source 
                 .style("left", (x) + "px")
                 .style("top", (y) + "px");
                 // console.log("left/X: ", x, " right/Y: ", y);
             d3.select(this)
-                .style("opacity", 0.8);
-            // optional dashed line to connect dot to x-axis
-            // xLine.attr("x1", d3.select(this).attr("cx"))
-            //     .attr("y1", d3.select(this).attr("cy"))
-            //     .attr("y2", (height - margin.bottom))
-            //     .attr("x2",  d3.select(this).attr("cx"))        
+                .style("opacity", 0.8);     
         }
 
         function handleMouseOut() {
@@ -150,10 +141,12 @@
 </script>
   
 <style scoped lang="scss">
+
 .bubble {
     stroke: black; /* Dark outline */
     stroke-width: 2px; /* Thicker outline */
     fill-opacity: 0.8; /* Higher fill opacity */
+    
 }
 
 #chart-container {
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index c46d5c12ae1ebaaec78b1c09b4dc77a0adc9d9f5..0640e58a6bbc4df556b57fc1bcb007583cd0ba3a 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -3,8 +3,8 @@
     <VizTitle />
     <Maps />
     <Dendrogram />
-    <BeeswarmChart2 />
     <BeeswarmChart />
+    <BubbleChart />
     <ReferencesSection />
     <AuthorshipSection />
   </section>
@@ -14,8 +14,8 @@
   import VizTitle from '.././components/VizTitle.vue'
   import Maps from '.././components/Maps.vue'
   import Dendrogram from '.././components/Dendrogram.vue'
-  import BeeswarmChart2 from '../components/BubbleChart2.vue';
-  import BeeswarmChart from '../components/BubbleChart.vue'
+  import BeeswarmChart from '../components/Beeswarm.vue';
+  import BubbleChart from '../components/BubbleChart.vue'
   import ReferencesSection from '.././components/References.vue'
   import AuthorshipSection from '.././components/Authorship.vue'
 </script>