diff --git a/examples/crash_reporter/backend/public/assets/css/app.css b/examples/crash_reporter/backend/public/assets/css/app.css
index 0e7e487..8bbeebc 100644
--- a/examples/crash_reporter/backend/public/assets/css/app.css
+++ b/examples/crash_reporter/backend/public/assets/css/app.css
@@ -436,12 +436,85 @@ a:hover { text-decoration: underline; }
 .reports-toolbar .toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
 .toolbar-select { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
 .nav-locale {
-  padding: 10px 12px 6px;
+  padding: 8px 10px 6px;
   border-top: 1px solid var(--border);
 }
-.nav-locale--toolbar-dup { display: none; }
-.toolbar-select--nav { width: 100%; }
-.toolbar-select--nav select { flex: 1; min-width: 0; }
+.nav-locale .locale-picker {
+  width: 100%;
+  justify-content: flex-start;
+  padding: 6px 8px;
+}
+.nav-icon--locale {
+  width: 18px;
+  height: 18px;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.nav-icon--locale::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 1px;
+  bottom: 1px;
+  width: 2px;
+  margin-left: -1px;
+  background: currentColor;
+  border-radius: 1px;
+}
+.nav-icon--locale::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 50%;
+  height: 2px;
+  margin-top: -1px;
+  background: currentColor;
+  border-radius: 1px;
+}
+.locale-picker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 32px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  color: var(--muted);
+  box-sizing: border-box;
+}
+.locale-picker:hover,
+.locale-picker:focus-within {
+  background: var(--row-hover);
+  color: var(--text);
+}
+.locale-picker__select {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 2px 18px 2px 2px;
+  cursor: pointer;
+  max-width: 4.5rem;
+}
+.locale-picker__select:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.nav-locale .locale-picker__select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  opacity: 0;
+  padding: 0;
+}
 .login-locale {
   position: fixed;
   top: 12px;
diff --git a/examples/crash_reporter/backend/views/layout.php b/examples/crash_reporter/backend/views/layout.php
index e646d59..5f67fc0 100644
--- a/examples/crash_reporter/backend/views/layout.php
+++ b/examples/crash_reporter/backend/views/layout.php
@@ -61,14 +61,14 @@
           </a>
         </li>
       </ul>
-      <div class="nav-locale<?= ($view ?? '') === 'reports' ? ' nav-locale--toolbar-dup' : '' ?>">
-        <label class="toolbar-select toolbar-select--nav">
-          <span data-i18n="lang.label">Language</span>
-          <select class="lang-select" aria-label="Language">
-            <option value="en" data-i18n="lang.en">English</option>
-            <option value="ru" data-i18n="lang.ru">Russian</option>
+      <div class="nav-locale">
+        <div class="locale-picker" data-i18n-title="lang.label" title="Language">
+          <span class="nav-icon nav-icon--locale" aria-hidden="true"></span>
+          <select class="lang-select locale-picker__select" id="lang-select" data-i18n-aria="lang.label" aria-label="Language">
+            <option value="en">EN</option>
+            <option value="ru">RU</option>
           </select>
-        </label>
+        </div>
       </div>
       <div class="nav-user">
         <span class="nav-user-name" title="<?= h(Auth::user()['username'] ?? '') ?>">
@@ -102,13 +102,6 @@
             <div class="toolbar-actions">
               <button type="button" class="btn reports-mode-btn active" data-grouped="0" data-i18n="reports.by_time">By time</button>
               <button type="button" class="btn reports-mode-btn" data-grouped="1" data-i18n="reports.grouped">Grouped</button>
-              <label class="toolbar-select">
-                <span data-i18n="lang.label">Language</span>
-                <select class="lang-select" id="lang-select" aria-label="Language" data-i18n-options="lang">
-                  <option value="en" data-i18n="lang.en">English</option>
-                  <option value="ru" data-i18n="lang.ru">Russian</option>
-                </select>
-              </label>
               <label class="toolbar-select">
                 <span data-i18n="theme.label">Theme</span>
                 <select id="theme-select" aria-label="UI theme" data-i18n-options="theme">
diff --git a/examples/crash_reporter/backend/views/login.php b/examples/crash_reporter/backend/views/login.php
index 1d119f2..e7304e9 100644
--- a/examples/crash_reporter/backend/views/login.php
+++ b/examples/crash_reporter/backend/views/login.php
@@ -29,13 +29,13 @@ $bp = Auth::basePath();
 </head>
 <body class="login-page" data-base-path="<?= h($bp) ?>">
   <div class="login-locale">
-    <label class="toolbar-select">
-      <span data-i18n="lang.label">Language</span>
-      <select class="lang-select" aria-label="Language">
-        <option value="en" data-i18n="lang.en">English</option>
-        <option value="ru" data-i18n="lang.ru">Russian</option>
+    <div class="locale-picker" data-i18n-title="lang.label" title="Language">
+      <span class="nav-icon nav-icon--locale" aria-hidden="true"></span>
+      <select class="lang-select locale-picker__select" data-i18n-aria="lang.label" aria-label="Language">
+        <option value="en">EN</option>
+        <option value="ru">RU</option>
       </select>
-    </label>
+    </div>
   </div>
   <form class="login-card" method="post" action="<?= h($bp) ?>/login">
     <h1><?= h(cfg('app_name')) ?></h1>