diff --git a/src/assets/base.css b/src/assets/base.css
index ebe1141c99dad505aa7b095eed9fc3c0bb088c43..098a59c97e9e9c82e1d99cb0a7eb0b12443ba8c4 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -9,12 +9,12 @@
   --navy-blue: #032a56;
   font-size: 62.5%;
   --color-Demographiccharacteristics: #092734;
-  --color-Landtenure: #1B695F;
-  --color-Livingconditions: #4BAFA3;
-  --color-Socioeconomicstatus: #e66c4b;
+  --color-Landtenure: #0C5048;
+  --color-Livingconditions: #45A196;
+  --color-Socioeconomicstatus: #FF5F33;
   --color-Health: #4B1B1B;
   --color-Riskperception: #365EB5;
-  --color-Exposure: #FFA600;
+  --color-Exposure: #CC8500;
   --color-themegrey: rgba(242, 242, 242, 0.95);
 }
 
diff --git a/src/assets/text/text_en.js b/src/assets/text/text_en.js
index 91eb6eda82d00fb78e60e07624df4ab7f79a6089..aee4041adf3c399925f34d5d42a8cb4a74313f31 100644
--- a/src/assets/text/text_en.js
+++ b/src/assets/text/text_en.js
@@ -60,7 +60,7 @@ export default {
       dendroExplainer: `Click on the topics below to see the different vulnerability indicators studied in relation to water insecurity. Thicker diagram lines indicate more well-studied topics. The number of studies for each indicator are displayed in parentheses.`
     },
     authorSection: {
-    text: "This site was created by the <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> led the project, with contributions from <a href='https://wim.usgs.gov/team/' http://localhost:5173/visualizations/vulnerability-indicators/>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>, Yajaira Ayala Alanis, and Paola Rivera Gonzalez."
+    text: "This site was created by the <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> led the project, with contributions from <a href='https://wim.usgs.gov/team/' http://localhost:5173/visualizations/vulnerability-indicators/>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, Yajaira Ayala Alanis, Paola Rivera Gonzalez, and <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>."
   }
 
   }
diff --git a/src/assets/text/text_es.js b/src/assets/text/text_es.js
index dee522a1e1f04a605fbcac737a1ab317f95d12c7..85b5c238ed20a7640e7afe0afb1214e4c53415e4 100644
--- a/src/assets/text/text_es.js
+++ b/src/assets/text/text_es.js
@@ -60,7 +60,7 @@ export default {
       dendroExplainer: `Haga clic en cada tema para ver los diferentes indicadores de riesgo estudiados en relación con la carencia de agua. Las líneas más gruesas del diagrama indican temas mejor estudiados. El número de estudios de cada indicador se muestra entre paréntesis.`
     },
     authorSection: {
-    text: "Este sitio fue creado por el <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> dirigió el proyecto, con contribuciones de <a href='https://wim.usgs.gov/team/' target='_blank'>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>, Yajaira Ayala Alanis, y Paola Rivera Gonzalez."
+    text: "Este sitio fue creado por el <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> dirigió el proyecto, con contribuciones de <a href='https://wim.usgs.gov/team/' target='_blank'>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, Yajaira Ayala Alanis, Paola Rivera Gonzalez, y <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>."
   }
 
   }
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 682eb1db802c3865a74c80e42a7640bad86ed67f..f6755469d9a65640793bee066094b5bfe764b84c 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -94,14 +94,15 @@ const isChecked = ref({
 
 // Set colors for bubble charts
 const dimensionColors = {
-  Demographiccharacteristics: "#092734",
-  Landtenure: "#1B695F",
-  Livingconditions: "#4BAFA3",
-  Socioeconomicstatus: "#FF734D",
+  Demographiccharacteristics: "#092734", 
+  Landtenure: "#0C5048", 
+  Livingconditions: "#45A196", 
+  Socioeconomicstatus: "#FF5F33",
   Health: "#4B1B1B",
   Riskperception: "#365EB5",
-  Exposure: "#FFA600"
-};
+  Exposure: "#CC8500" //C08A16
+}; 
+
 
 // Computed properties for translations
 const bubbleCheckboxText = computed(() => t('text.components.chartText.bubbleCheckbox'));
@@ -109,6 +110,8 @@ const bubbleCheckboxEndText = computed(() => t('text.components.chartText.bubble
 const bubbleTooltipText = computed(() => t('text.components.chartText.bubbleText'));
 const bubbleLegendText = computed(() => t('text.components.chartText.bubbleLegend'));
 const bubbleYAxisText = computed(() => t('text.components.chartText.bubbleYaxis'));
+const bubbleYlabelMax = computed(() => t('text.components.chartText.bubbleYlabelMax'));
+const bubbleYlabelMin = computed(() => t('text.components.chartText.bubbleYlabelMin'));
 
 // Labels for each category
 const demographicText = computed(() => t('text.components.chartText.bubbleLabels.Demographiccharacteristics'));
@@ -256,14 +259,14 @@ function createBeeswarmChart() {
     .attr("text-anchor", "left")
     .attr("font-weight", 700)
     .attr("transform", `translate(${margin.left}, ${margin.top / 2})`)
-    .text(t('text.components.chartText.bubbleYlabelMax'));
+    .text(bubbleYlabelMax.value);
 
   svg.append('text')
     .attr("class", "yLabel")
     .attr("text-anchor", "left")
     .attr("font-weight", 700)
     .attr("transform", `translate(${margin.left}, ${containerHeight - (margin.bottom / 2) + 10})`)
-    .text(t('text.components.chartText.bubbleYlabelMin'));
+    .text(bubbleYlabelMin.value);
 
   // Set forces
   const forceY = d3.forceY(d => yScale(d.level_agreement)).strength(0.9);
diff --git a/src/components/InteractiveDendrogram.vue b/src/components/InteractiveDendrogram.vue
index 082c6920c05dd9df9b960d4b0b4b2f376c1acccf..da5538974c4575a6147630ca32b26f1722f71e62 100644
--- a/src/components/InteractiveDendrogram.vue
+++ b/src/components/InteractiveDendrogram.vue
@@ -63,22 +63,22 @@ let textSize;
 // set colors for dimension
 const dimensionColors = {
   "demographiccharacteristics": "#092734",
-  "landtenure": "#1B695F",
-  "livingconditions": "#4BAFA3",
-  "socioeconomicstatus": "#e66c4b",
+  "landtenure": "#0C5048",
+  "livingconditions": "#45A196",
+  "socioeconomicstatus": "#FF5F33",
   "health": "#4B1B1B",
   "riskperception": "#365EB5",
-  "exposure": "#FFA600"
+  "exposure": "#CC8500"
 };
 
 const dimensionColors_es = {
   "lascaracterísticasdemográficas": "#092734",
-  "latenenciadelatierra": "#1B695F",
-  "lascondicionesdevida": "#4BAFA3",
-  "elestatussocioeconómico": "#e66c4b",
+  "latenenciadelatierra": "#0C5048",
+  "lascondicionesdevida": "#45A196",
+  "elestatussocioeconómico": "#FF5F33",
   "lasalud": "#4B1B1B",
   "lapercepcióndelriesgo": "#365EB5",
-  "laexposiciónafuentesdeestrés": "#FFA600"
+  "laexposiciónafuentesdeestrés": "#CC8500"
 };
 
 // Define scales for link width and node radius
diff --git a/src/components/LanguageButton.vue b/src/components/LanguageButton.vue
index 87e8321de2bf1207233b88e43887ca8a52540efa..a4f8e5197c8f5b90c5c73ccda906a2787211234a 100644
--- a/src/components/LanguageButton.vue
+++ b/src/components/LanguageButton.vue
@@ -43,9 +43,11 @@ function switchLanguage(lang) {
 watch(
   () => route.params.lang,
   (newLang) => {
+    // Update selectedLanguage to match route change
+    selectedLanguage.value = newLang;
+    // if locale.value does not match newLang, also update it
     if (newLang && locale.value !== newLang) {
       locale.value = newLang;
-      selectedLanguage.value = newLang;
     }
   },
   { immediate: true }
diff --git a/src/components/ReferencesSection.vue b/src/components/ReferencesSection.vue
index bfe18a36ddb1df7657ed73441c7bdd420acfc1c3..c480153ddbaa0585b0e739a5f488e9c541513037 100644
--- a/src/components/ReferencesSection.vue
+++ b/src/components/ReferencesSection.vue
@@ -22,43 +22,49 @@
 
 <script>
 import { useI18n } from 'vue-i18n';
+import { ref, watch } from 'vue';
 
 export default {
   name: 'ReferencesSection',
-  data() {
-    return {
-      text: {}
-    };
-  },
-  created() {
+  setup() {
     const { locale } = useI18n();
-    const lang = locale.value;
+    const text = ref({});
+
+    const loadReferencesText = (lang) => {
+      if (lang === 'es') {
+        import('@/assets/text/referencesText_es.js')
+          .then((module) => {
+            text.value = module.default.referencesContent;
+            sortReferences();
+          })
+          .catch((error) => console.error('Failed to load Spanish references:', error));
+      } else {
+        import('@/assets/text/referencesText_en.js')
+          .then((module) => {
+            text.value = module.default.referencesContent;
+            sortReferences();
+          })
+          .catch((error) => console.error('Failed to load English references:', error));
+      }
+    };
 
-    // Dynamically import the correct references file based on the language
-    if (lang === 'es') {
-      import('@/assets/text/referencesText_es.js')
-        .then((module) => {
-          this.text = module.default.referencesContent;
-          this.sortReferences();
-        })
-        .catch((error) => console.error('Failed to load Spanish references:', error));
-    } else {
-      import('@/assets/text/referencesText_en.js')
-        .then((module) => {
-          this.text = module.default.referencesContent;
-          this.sortReferences();
-        })
-        .catch((error) => console.error('Failed to load English references:', error));
-    }
-  },
-  methods: {
-    sortReferences() {
-      if (this.text.references && Array.isArray(this.text.references)) {
-        this.text.references.sort((a, b) => {
-          return a.authors.localeCompare(b.authors);
-        });
+    const sortReferences = () => {
+      if (text.value.references && Array.isArray(text.value.references)) {
+        text.value.references.sort((a, b) => a.authors.localeCompare(b.authors));
       }
-    }
+    };
+
+    // Initial load based on current language
+    loadReferencesText(locale.value);
+
+    // Watch for changes in the locale and update the references accordingly
+    watch(locale, (newLocale) => {
+      loadReferencesText(newLocale);
+    });
+
+    return {
+      text
+    };
   }
 };
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index 4e726c3e9fb4f9573a8653a0008a77849b32fa93..78351be02302f576f29f76fa4a2101c340d94222 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import { setLocale } from './../i18n';
 import VisualizationView from '../views/VisualizationView.vue';
 
@@ -48,7 +48,7 @@ const routes = [
 
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes
 })