diff --git a/src/components/LocaleSwitcher.vue b/src/components/LocaleSwitcher.vue
index 7daa5b6..d670f62 100644
--- a/src/components/LocaleSwitcher.vue
+++ b/src/components/LocaleSwitcher.vue
@@ -1,19 +1,38 @@
 <script setup lang="ts">
-const localeFlags = {
-  en: "🇬🇧 English",
-  de: "🇩🇪 Deutsch",
-};
+import { computed } from "vue";
+
+interface LocaleOption {
+  code: string;
+  name: string;
+}
+
+interface Props {
+  modelValue: string;
+  locales: LocaleOption[];
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(["update:modelValue"]);
+
+const selectModel = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit("update:modelValue", value);
+  },
+});
 </script>
 
 <template>
   <div class="localeswitch">
-    <select v-model="$i18n.locale">
+    <select v-model="selectModel">
       <option
-        v-for="locale in $i18n.availableLocales"
-        :key="`locale-${locale}`"
-        :value="locale"
+        v-for="locale in locales"
+        :key="`locale-${locale.code}`"
+        :value="locale.code"
       >
-        {{ localeFlags[locale] }}
+        {{ locale.name }}
       </option>
     </select>
   </div>