diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index 0b2ffcf8..620dee79 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -35,7 +35,9 @@ const fullTitle = title ? `${title} · دیوان` : 'دیوان · اردو ک
         <a class="wordmark" href="/">دیوان</a>
         <form class="search-form" action="/search" method="get" role="search">
           <input type="search" name="q" id="q" value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
-          <button type="button" id="kb-toggle" aria-label="اردو کی بورڈ" aria-pressed="false" title="اردو کی بورڈ (فونیٹک ٹائپنگ)">ا ب</button>
+          <button type="button" id="kb-toggle" aria-label="اردو کی بورڈ" aria-pressed="false" title="اردو کی بورڈ (فونیٹک ٹائپنگ)">
+            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10" stroke-linecap="round" stroke-width="2"/></svg>
+          </button>
         </form>
         <div class="toggles">
           <button type="button" id="font-toggle" aria-label="خط بدلیں">نسخ</button>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index 4560f27e..c23be2ea 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -30,11 +30,11 @@ a:hover { color: var(--brand); }
 /* header: logo + search + toggles in a gold-bordered bar */
 .site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
 .wordmark { font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; }
-.search-form { flex: 1; min-width: 200px; display: flex; }
+.search-form { flex: 1; min-width: 200px; display: flex; position: relative; }
 .search-form input, .toggles button {
   font: inherit; border: 1.5px solid var(--border); background: var(--inner); color: var(--ink); border-radius: 10px;
 }
-.search-form input { flex: 1; padding: 4px 14px; }
+.search-form input { flex: 1; padding: 4px 14px; padding-inline-end: 40px; }
 .search-form input:focus { outline: none; border-color: var(--gold); }
 .toggles { display: flex; gap: 6px; }
 .toggles button { padding: 2px 12px; cursor: pointer; font-size: .85rem; }
@@ -108,8 +108,9 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
 h1 + .muted { text-align: center; margin-top: 0; }
 
 /* Urdu keyboard */
-#kb-toggle { font: inherit; border: 1.5px solid var(--border); background: var(--inner); color: var(--ink); border-radius: 10px; margin-inline-start: 6px; padding: 0 12px; cursor: pointer; }
-#kb-toggle[aria-pressed='true'] { border-color: var(--brand); color: var(--brand); }
+#kb-toggle { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); display: flex; padding: 4px; border: 0; background: none; color: var(--muted, currentColor); opacity: .7; cursor: pointer; border-radius: 6px; }
+#kb-toggle:hover { opacity: 1; }
+#kb-toggle[aria-pressed='true'] { color: var(--brand); opacity: 1; }
 .kb { padding-bottom: 10px; }
 .kb div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
 .kb button {