diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
index a2b7a90..4777339 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -8,20 +8,27 @@ import {
 import { Button } from '@/components/ui/button'
 import { Check } from 'lucide-vue-next'
 import { useLocale } from '@/composables/useLocale'
+import { computed } from 'vue'
+
+interface Locale {
+  code: string
+  name: string
+  flag: string
+}
 
 const { currentLocale, locales, setLocale } = useLocale()
+
+const currentLocaleInfo = computed<Locale | undefined>(() => 
+  locales.value.find((locale: Locale) => locale.code === currentLocale.value)
+)
 </script>
 
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" size="sm" class="gap-2 w-[120px] justify-start">
-        <span v-for="locale in locales" :key="locale.code">
-          {{ locale.code === currentLocale ? locale.flag : '' }}
-        </span>
-        <span v-for="locale in locales" :key="locale.code">
-          {{ locale.code === currentLocale ? locale.name : '' }}
-        </span>
+      <Button variant="ghost" size="sm" class="w-[120px] justify-start">
+        <span>{{ currentLocaleInfo?.flag }}</span>
+        <span>{{ currentLocaleInfo?.name }}</span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-[120px]">