diff --git a/src/assets/text/text_en.js b/src/assets/text/text_en.js
index c9939a53f29703f5d073b25e30a2561a2e838705..99ac330bf775e18c013674eea66f50286fdc8674 100644
--- a/src/assets/text/text_en.js
+++ b/src/assets/text/text_en.js
@@ -1,6 +1,7 @@
 export default {
   pageTitle: "Unequal access to water",
   pageSubtitle: "How societal factors shape vulnerability to water insecurity",
+  readIn: 'Read in: ',
   components: {
     introNarrative: {
       paragraph1: `Imagine, for example, that you live in a big house in the suburbs where clean water flows out of every faucet. There’s enough water for you and your family to grow a nice garden every year. The public water supplier treats the water and maintains the distribution system regularly, so you know the water is safe for you to drink.`,
diff --git a/src/assets/text/text_es.js b/src/assets/text/text_es.js
index 0ea57679f18f3932e7b4fe63b7c519c8caa5306f..6971ffff810bf2d9483ac08d423fe3b34394b8bc 100644
--- a/src/assets/text/text_es.js
+++ b/src/assets/text/text_es.js
@@ -1,6 +1,7 @@
 export default {
   pageTitle: "Desigualdad de acceso al agua",
   pageSubtitle: "Por qué los factores sociales determinan el nivel de riesgo de la falta de agua potable",
+  readIn: 'Leer en: ',
   components: {
     introNarrative: {
       paragraph1: `Imagine, por ejemplo, que vive en una casa grande de una zona residencial donde el agua potable fluye de cada grifo. Hay suficiente agua para que disfrute con su familia de un bonito jardín cada año. La compañía de agua se ocupa de tratarla y mantener los sistemas de tuberías con regularidad, para asegurarse de que el agua continúe siendo apta para el consumo humano.`,
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 96ac51d71d71374c7eca7c604d5f7dd77fc4bb50..dd592627d5b6b60909742056c4933888f6eab3ea 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -1,5 +1,8 @@
 <template>
   <section id="beeswarm">
+    <div id="text1" class="text-container">
+    <LanguageButton />
+    </div>
     <div id="text1" class="text-container">
     <p v-html="t('text.components.chartText.bubbleCheckbox')"></p>
     <!-- Render the translated labels within the span elements -->
@@ -66,6 +69,7 @@
 import { onMounted, ref } from "vue";
 import * as d3 from 'd3';
 import { useI18n } from 'vue-i18n';
+import LanguageButton from '@/components/LanguageButton.vue';
 
 const { t } = useI18n();
 const userLang = navigator.language || navigator.userLanguage;
@@ -553,7 +557,9 @@ $ThemeGrey: var(--color-themegrey);
       margin: 10px;
     }
   }
-
+LanguageButton {
+  align-items: right;
+}
   #water-insecurity-tooltip {
     margin-left: -160px;
   }
diff --git a/src/components/LanguageButton.vue b/src/components/LanguageButton.vue
index 392212828df400ca269666794497b701426919ab..b2609ee4f1599ef184dc651ffd951200f24f055d 100644
--- a/src/components/LanguageButton.vue
+++ b/src/components/LanguageButton.vue
@@ -1,45 +1,64 @@
 <template>
-    <div class="button-container" >
-        <i>Read in 
-      <button @click="switchLanguage('en')">English</button>
-      Leer en 
-      <button @click="switchLanguage('es')">Español</button>
-        </i>
+    <div class="dropdown-container">
+        <label for="language-select"><i>{{ $t('text.readIn') }}</i></label>
+        <select id="language-select" v-model="selectedLanguage" @change="handleLanguageChange" >
+        <option value="en">English</option>
+        <option value="es">Español</option>
+        </select>
     </div>
-  </template>
+</template>
   
-  <script setup>
-  import { useI18n } from 'vue-i18n';
-  import { useRouter, useRoute } from 'vue-router';
   
-  const { locale } = useI18n();
-  const router = useRouter();
-  const route = useRoute();
-  
-  function switchLanguage(lang) {
-    locale.value = lang;
-    
-    // Update the URL with language ending
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+
+const { locale } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+// Create a reactive variable to track the selected language
+const selectedLanguage = ref(locale.value);
+
+function handleLanguageChange(event) {
+    switchLanguage(selectedLanguage.value);
+}
+
+function switchLanguage(lang) {
+  if (locale.value !== lang) {
+    locale.value = lang; // Update the locale
+
+    // Update the URL with the new language
     router.push({
       path: `/${lang}${route.path.substring(3) || ''}` // Preserve the existing path, only change the language
     });
   }
-  </script>
+}
+</script>
+
 
 <style scoped lang="scss">
-button {
-    color: black;
-    padding: 2px 5px;
-    border-radius: 10px;
-    white-space: nowrap;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.1s;
+.dropdown-container {
+  display: flex;
+  justify-content: flex-end; /* Align to the right */
+  align-items: center;
+  padding: 0px;
 }
-.button-container {
-    padding: 5px;
+
+select {
+  margin-left: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s;
 }
-p {
 
+select:focus {
+  outline: none;
+  border-color: #007bff;
 }
+
 </style>
\ No newline at end of file
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index 0fb1f1382a3a5a9d5a7ffc049cb9ccc15b71c4a6..c54e4e90e7deb7c9504c4a60bcc5ddb63e426c90 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -1,7 +1,6 @@
 <template>
   <section id="visualization">
     <VizTitle class="section-component"/>
-    <LanguageButton  class="section-component" />
     <BeeswarmChart class="section-component" /> 
     <NarrativeIntro class="section-component"/>
     <InteractiveDendrogram class="section-component"/>
@@ -18,7 +17,6 @@
 import { defineAsyncComponent } from 'vue';
 
 const VizTitle = defineAsyncComponent(() =>  import('../components/VizTitle.vue'));
-const LanguageButton = defineAsyncComponent(() =>  import('../components/LanguageButton.vue'));
 const BeeswarmChart = defineAsyncComponent(() => import('../components/BeeswarmChart.vue'));
 const NarrativeIntro = defineAsyncComponent(() => import('../components/NarrativeIntro.vue'));
 const InteractiveDendrogram = defineAsyncComponent(() => import('../components/InteractiveDendrogram.vue'));