diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
index b3675e2..ae14626 100644
--- a/src/components/LanguageSwitcher.astro
+++ b/src/components/LanguageSwitcher.astro
@@ -42,7 +42,7 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
   <Dropdown openOn="click" placement="bottom-end" offset={5} shiftPadding={10} showArrow={true} closeOnSelect={true}>
     <span slot="trigger" class="wr:inline-flex wr:items-center wr:gap-2">
       <span data-current-icon class="wr:inline">
-        <Icon name="mdi:translate" class={icon} />
+        <Icon data-current-flag name="mdi:translate" class={icon} />
       </span>
       {showLabel && <span data-current-label class="wr:text-sm wr:font-medium">Language</span>}
       <svg data-dd-chev class="wr:size-4 wr:opacity-70 wr:transition-transform wr:duration-150" viewBox="0 0 24 24" fill="none">
@@ -101,14 +101,19 @@ const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
   const itemSelector = `[data-set-lang][data-owner="${containerId}"]`;
 
   function reflectUI(code) {
-    // set label
+
+    const flagEl = host.querySelector("[data-current-flag]");
+    if (flagEl) {
+      const lang = languages.find(l => l.code === code) || { flag: "mdi:earth" };
+      flagEl.setAttribute("name", lang.flag || "mdi:earth");
+    }
+
     const labelEl = host.querySelector("[data-current-label]");
     if (labelEl) {
       const lang = languages.find(l => l.code === code) || { label: code };
       labelEl.textContent = lang.label;
     }
 
-    // mark active items (remember they are portaled)
     document.querySelectorAll(itemSelector).forEach(el => {
       const active = el.getAttribute("data-set-lang") === code;
       el.setAttribute("aria-checked", active ? "true" : "false");