diff --git a/assets/views/admin/base.html b/assets/views/admin/base.html
index 4a0e05f..a2734d2 100644
--- a/assets/views/admin/base.html
+++ b/assets/views/admin/base.html
@@ -117,8 +117,8 @@
           {% block crumb %}{{ t(key="admin-title", lang=lang | default(value='sk')) }}{% endblock crumb %}
         </span>
 
-        <!-- settings (language + theme) dropdown -->
-        <div x-data="{ open: false }" @keydown.escape="open = false" class="relative ml-auto">
+        <!-- settings (language + theme) dropdown (self-contained Alpine state) -->
+        <div class="ml-auto">
           {% include "partials/settings_dropdown.html" %}
         </div>
       </header>
diff --git a/assets/views/base.html b/assets/views/base.html
index 8560376..de365dd 100644
--- a/assets/views/base.html
+++ b/assets/views/base.html
@@ -115,10 +115,8 @@
               class="absolute -right-1 -top-1 inline-flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-4 text-on-primary dark:bg-primary-dark dark:text-on-primary-dark"></span>
           </a>
 
-          <!-- settings (language + theme) dropdown -->
-          <div x-data="{ open: false }" @keydown.escape="open = false" class="relative">
-            {% include "partials/settings_dropdown.html" %}
-          </div>
+          <!-- settings (language + theme) dropdown (self-contained Alpine state) -->
+          {% include "partials/settings_dropdown.html" %}
 
           <!-- mobile hamburger — Penguin animated icon swap (bars ↔ X), kept in
                our ghost-square icon-button shell for consistency with cart/gear -->
diff --git a/assets/views/partials/profile_menu.html b/assets/views/partials/profile_menu.html
index bdf2833..a419895 100644
--- a/assets/views/partials/profile_menu.html
+++ b/assets/views/partials/profile_menu.html
@@ -1,17 +1,16 @@
 {# Customer profile dropdown in the storefront navbar.
 
-   Penguin UI markup (navbar/with-user-profile.html dropdown + avatar rendered as
-   avatar-with-initials.html, primary variant, since we have no photo), but with
-   the same minimal core-Alpine toggle as settings_dropdown.html — plain
-   open / @click.outside, NOT Penguin's x-trap / $focus keyboard nav (that needs
-   the Alpine Focus plugin we don't rely on). Self-contained Alpine state.
+   Proper Penguin UI dropdown: behaviour is the vendored
+   dropdowns/dropdown-with-icons.html verbatim (isOpen / openedWithKeyboard,
+   x-trap + $focus keyboard nav, x-cloak x-show, @click.outside). Trigger is the
+   round initials avatar (avatar-with-initials.html, primary variant). Menu items
+   are our account links.
 
-   IMPORTANT: the dropdown <ul> needs an inline style="display: none" in addition
-   to x-cloak. Because it has id="userMenu", htmx hx-boost "settles" it by id
-   across boosted navigations, and that interferes with Alpine re-applying x-show,
-   leaving the menu visible (open=false) after navigating. The inline display:none
-   keeps it hidden until x-show explicitly opens it. (settings_dropdown has no id,
-   so it is not settled and does not need this.) #}
+   Needs the Alpine Focus plugin (loaded before Alpine core in base.html) for
+   x-trap / $focus. Self-contained Alpine state; the host only needs to place it
+   in the navbar flex row. The panel has NO id on purpose — an id would make htmx
+   hx-boost "settle" it across boosted navigations and reappear; id-less Penguin
+   dropdowns are unaffected. #}
 
 {# initials from the full name, e.g. "Filip Priec" -> "FP" #}
 {% set _name = customer_name | default(value='') | trim %}
@@ -22,34 +21,53 @@
 
 {% set _person_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-5"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/></svg>' %}
 
-<div x-data="{ open: false }"
-  x-on:keydown.esc.window="open = false"
-  class="relative flex items-center">
-  <!-- Toggle Button: plain circular avatar (name/type live in the dropdown) -->
-  <button type="button" x-on:click="open = !open"
-    x-bind:aria-expanded="open" aria-haspopup="true" aria-controls="userMenu"
+<div x-data="{ isOpen: false, openedWithKeyboard: false }"
+  x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false"
+  class="relative">
+  <!-- Toggle Button: round initials avatar -->
+  <button type="button" x-on:click="isOpen = ! isOpen"
+    x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true"
+    x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true"
     aria-label="{{ t(key='nav-account', lang=lang | default(value='sk')) }}"
     class="flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-sm font-bold tracking-wider text-on-primary/90 transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90 dark:focus-visible:outline-primary-dark">
     {%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
   </button>
-  <!-- User Dropdown -->
-  <ul x-cloak x-show="open" x-transition.opacity style="display: none"
-    x-on:click.outside="open = false"
-    id="userMenu" class="absolute right-0 top-12 flex w-60 min-w-48 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt py-1.5 shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
-    <li class="border-b border-outline dark:border-outline-dark">
-      <div class="flex items-center gap-3 px-4 py-2.5">
-        <span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-base font-bold tracking-wider text-on-primary/90 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90">
-          {%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
-        </span>
-        <div class="flex min-w-0 flex-col">
-          <span class="truncate text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ _name }}</span>
-          <p class="truncate text-xs text-on-surface dark:text-on-surface-dark">{{ _type_label }}</p>
-        </div>
+  <!-- Dropdown Menu (positioned like the settings cog: right-0 mt-2) -->
+  <div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard"
+    x-on:click.outside="isOpen = false, openedWithKeyboard = false"
+    x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()"
+    class="absolute right-0 mt-2 flex w-60 min-w-48 flex-col divide-y divide-outline overflow-hidden rounded-radius border border-outline bg-surface-alt shadow-lg dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
+    <!-- header: avatar + name + account type -->
+    <div class="flex items-center gap-3 px-4 py-2.5">
+      <span class="flex size-11 shrink-0 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-base font-bold tracking-wider text-on-primary/90 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark/90">
+        {%- if _initials %}{{ _initials }}{% else %}{{ _person_icon | safe }}{% endif -%}
+      </span>
+      <div class="flex min-w-0 flex-col">
+        <span class="truncate text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ _name }}</span>
+        <p class="truncate text-xs text-on-surface dark:text-on-surface-dark">{{ _type_label }}</p>
       </div>
-    </li>
-    <li><a href="/account/orders" data-nav="/account/orders" role="menuitem" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">{{ t(key="account-orders", lang=lang | default(value='sk')) }}</a></li>
-    <li><a href="/account/profile" data-nav="/account/profile" role="menuitem" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">{{ t(key="profile-title", lang=lang | default(value='sk')) }}</a></li>
-    <li><a href="/account/password" data-nav="/account/password" role="menuitem" class="block bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">{{ t(key="account-change-password", lang=lang | default(value='sk')) }}</a></li>
-    <li><form method="post" action="/logout" hx-boost="false"><button type="submit" role="menuitem" class="block w-full bg-surface-alt px-4 py-2 text-left text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">{{ t(key="logout", lang=lang | default(value='sk')) }}</button></form></li>
-  </ul>
+    </div>
+    <!-- account links (with icons) -->
+    <div class="flex flex-col py-1.5">
+      <a href="/account/orders" data-nav="/account/orders" role="menuitem" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path d="M5.566 4.657A4.505 4.505 0 016.75 4.5h10.5c.41 0 .806.055 1.183.157A3 3 0 0015.75 3h-7.5a3 3 0 00-2.684 1.657zM2.25 9a3 3 0 013-3h13.5a3 3 0 013 3v.776a48.485 48.485 0 00-18 0V9zM18.75 11.25a47.97 47.97 0 00-13.5 0c-1.31.176-2.25 1.32-2.25 2.625V18a3 3 0 003 3h12a3 3 0 003-3v-4.125c0-1.305-.94-2.45-2.25-2.625z"/></svg>
+        {{ t(key="account-orders", lang=lang | default(value='sk')) }}
+      </a>
+      <a href="/account/profile" data-nav="/account/profile" role="menuitem" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/></svg>
+        {{ t(key="profile-title", lang=lang | default(value='sk')) }}
+      </a>
+      <a href="/account/password" data-nav="/account/password" role="menuitem" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path fill-rule="evenodd" d="M15.75 1.5a6.75 6.75 0 00-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 00-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 00.75-.75v-1.5h1.5A.75.75 0 009 21v-1.5h1.5a.75.75 0 00.53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1015.75 1.5zm0 3a.75.75 0 000 1.5A2.25 2.25 0 0118 8.25a.75.75 0 001.5 0 3.75 3.75 0 00-3.75-3.75z" clip-rule="evenodd"/></svg>
+        {{ t(key="account-change-password", lang=lang | default(value='sk')) }}
+      </a>
+    </div>
+    <!-- logout -->
+    <div class="flex flex-col py-1.5">
+      <form method="post" action="/logout" hx-boost="false"><button type="submit" role="menuitem" class="flex w-full items-center gap-2 bg-surface-alt px-4 py-2 text-left text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4 shrink-0"><path fill-rule="evenodd" d="M7.5 3.75A1.5 1.5 0 006 5.25v13.5a1.5 1.5 0 001.5 1.5h6a1.5 1.5 0 001.5-1.5V15a.75.75 0 011.5 0v3.75a3 3 0 01-3 3h-6a3 3 0 01-3-3V5.25a3 3 0 013-3h6a3 3 0 013 3V9A.75.75 0 0115 9V5.25a1.5 1.5 0 00-1.5-1.5h-6zm10.72 4.72a.75.75 0 011.06 0l3 3a.75.75 0 010 1.06l-3 3a.75.75 0 11-1.06-1.06l1.72-1.72H9a.75.75 0 010-1.5h10.94l-1.72-1.72a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
+        {{ t(key="logout", lang=lang | default(value='sk')) }}
+      </button></form>
+    </div>
+  </div>
 </div>
diff --git a/assets/views/partials/settings_dropdown.html b/assets/views/partials/settings_dropdown.html
index b9308f9..6a5da1b 100644
--- a/assets/views/partials/settings_dropdown.html
+++ b/assets/views/partials/settings_dropdown.html
@@ -1,18 +1,22 @@
 {# Settings dropdown (language + theme). Shared by base.html and admin/base.html
    to kill the former ~100-line copy-paste duplication.
 
-   Adapted from the vendored Penguin UI component
-   penguinui-components/dropdowns/dropdown-with-click.html: Penguin's dropdown
-   menu container + item treatment. Deviations: kept our gear icon-only trigger
-   and our core-Alpine open / @click.outside toggle (upstream's x-trap / $focus
-   need the Alpine Focus plugin, which we don't bundle); item hover uses
-   bg-primary/5 to stay consistent with the rest of our Penguin-ified UI.
+   Proper Penguin UI dropdown: behaviour is the vendored
+   dropdowns/dropdown-with-icons.html verbatim (isOpen / openedWithKeyboard,
+   x-trap + $focus keyboard nav, x-cloak x-show, @click.outside). Trigger is our
+   gear icon-only button; content is the language form + theme toggle. Needs the
+   Alpine Focus plugin (loaded in base.html) for x-trap / $focus.
 
-   The host template provides the wrapper
-   <div x-data="{ open: false }" @keydown.escape="open = false" class="relative ...">
-   so it controls its own positioning (e.g. ml-auto in admin). #}
-{{ ui::icon_button(aria_label=t(key='settings', lang=lang | default(value='sk')), attrs='@click="open = !open" :aria-expanded="open"', icon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>') }}
-<div x-show="open" x-cloak @click.outside="open = false" x-transition.origin.top.right
+   Self-contained Alpine state + relative positioning; the host only places it
+   (e.g. ml-auto in admin). The panel has NO id on purpose (see profile_menu.html
+   for why — htmx hx-boost settles by id). #}
+<div x-data="{ isOpen: false, openedWithKeyboard: false }"
+  x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false"
+  class="relative">
+{{ ui::icon_button(aria_label=t(key='settings', lang=lang | default(value='sk')), attrs='x-on:click="isOpen = ! isOpen" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true"', icon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>') }}
+<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard"
+  x-on:click.outside="isOpen = false, openedWithKeyboard = false"
+  x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()"
   class="absolute right-0 mt-2 flex w-56 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt py-1 shadow-lg dark:border-outline-dark dark:bg-surface-dark-alt"
   role="menu">
   <form method="post" action="/lang" hx-boost="false">
@@ -54,3 +58,4 @@
     </label>
   </div>
 </div>
+</div>