diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index 3af01a0ec..5ff2640a9 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -193,6 +193,7 @@ export class PlayerPanel extends LitElement implements Layer {
 
   private closeSend = () => {
     this.sendTarget = null;
+    this.sendMode = "none";
   };
 
   private confirmSend = (
@@ -418,10 +419,15 @@ export class PlayerPanel extends LitElement implements Layer {
               }}
             />`
           : ""}
-        <h1 class="text-2xl font-bold tracking-[-0.01em] truncate text-zinc-50">
-          ${other.name()}
-        </h1>
 
+        <div class="flex-1 min-w-0">
+          <h2
+            class="text-xl font-bold tracking-[-0.01em] text-zinc-50 truncate"
+            title=${other.name()}
+          >
+            ${other.name()}
+          </h2>
+        </div>
         ${chip
           ? html`<span
               class=${`inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-semibold ${chip.classes}`}
@@ -445,28 +451,28 @@ export class PlayerPanel extends LitElement implements Layer {
     return html`
       <div class="mb-1 flex justify-between gap-2">
         <div
-          class="inline-flex items-center gap-1.5 rounded-full bg-white/[0.04] px-2.5 py-1
-                    text-base font-semibold text-zinc-200"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-white/[0.04] px-3 py-1.5 
+                    text-white w-[140px] min-w-[140px] flex-shrink-0"
         >
           <span class="mr-0.5">💰</span>
-          <span translate="no" class="inline-block w-[45px] text-right">
+          <span translate="no" class="tabular-nums w-[5ch]font-semibold">
             ${renderNumber(other.gold() || 0)}
           </span>
-          <span class="opacity-95 whitespace-nowrap"
-            >${translateText("player_panel.gold")}</span
+          <span class="text-zinc-200 whitespace-nowrap">
+            ${translateText("player_panel.gold")}</span
           >
         </div>
 
         <div
-          class="inline-flex items-center gap-1.5 rounded-full bg-white/[0.04] px-2.5 py-1
-                    text-base font-semibold text-zinc-200"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-white/[0.04] px-3 py-1.5 
+                    text-white w-[140px] min-w-[140px] flex-shrink-0"
         >
           <span class="mr-0.5">🛡️</span>
-          <span translate="no" class="inline-block w-[45px] text-right">
+          <span translate="no" class="tabular-nums w-[5ch] font-semibold">
             ${renderTroops(other.troops() || 0)}
           </span>
-          <span class="opacity-95 whitespace-nowrap"
-            >${translateText("player_panel.troops")}</span
+          <span class="text-zinc-200 whitespace-nowrap">
+            ${translateText("player_panel.troops")}</span
           >
         </div>
       </div>
@@ -476,32 +482,34 @@ export class PlayerPanel extends LitElement implements Layer {
   private renderStats(other: PlayerView, my: PlayerView) {
     return html`
       <!-- Betrayals -->
-      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2 text-base">
+      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
         <div
-          class="flex items-center gap-2 font-semibold text-zinc-300 leading-snug"
+          class="flex items-center gap-2 text-[15px] font-medium text-zinc-100 leading-snug"
         >
           <span aria-hidden="true">⚠️</span>
           <span>${translateText("player_panel.betrayals")}</span>
         </div>
-        <div class="text-right font-semibold text-zinc-200">
+        <div class="text-right text-[14px] font-semibold text-zinc-200">
           ${other.data.betrayals ?? 0}
         </div>
       </div>
 
       <!-- Trading / Embargo -->
-      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2 text-base">
+      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
         <div
-          class="flex items-center gap-2 font-semibold text-zinc-300 leading-snug"
+          class="flex items-center gap-2 text-[15px] font-medium text-zinc-100 leading-snug"
         >
           <span aria-hidden="true">⚓</span>
           <span>${translateText("player_panel.trading")}</span>
         </div>
-        <div class="flex items-center justify-end gap-2 font-semibold">
+        <div
+          class="flex items-center justify-end gap-2 text-[14px] font-semibold"
+        >
           ${other.hasEmbargoAgainst(my)
-            ? html`<span class="text-[#f59e0b]"
+            ? html`<span class="text-amber-400"
                 >${translateText("player_panel.stopped")}</span
               >`
-            : html`<span class="text-emerald-400"
+            : html`<span class="text-blue-400"
                 >${translateText("player_panel.active")}</span
               >`}
         </div>
@@ -512,60 +520,57 @@ export class PlayerPanel extends LitElement implements Layer {
   private renderAlliances(other: PlayerView) {
     const allies = other.allies();
 
+    const nameCollator = new Intl.Collator(undefined, { sensitivity: "base" });
+    const alliesSorted = [...allies].sort((a, b) =>
+      nameCollator.compare(a.name(), b.name()),
+    );
+
     return html`
-      <div class="text-base select-none">
-        <!-- Header -->
+      <div class="select-none">
         <div class="flex items-center justify-between mb-2">
-          <div class="font-semibold text-zinc-300 text-base">
+          <div
+            id="alliances-title"
+            class="text-[15px] font-medium text-zinc-200"
+          >
             ${translateText("player_panel.alliances")}
           </div>
           <span
-            aria-label="Alliance count"
-            class="inline-flex items-center justify-center min-w-[20px] h-5 px-[6px] rounded-[10px] 
-              text-[12px] text-zinc-100 bg-white/10 border border-white/20"
+            aria-labelledby="alliances-title"
+            class="inline-flex items-center justify-center min-w-[20px] h-5 px-[6px] rounded-[10px]
+                 text-[12px] text-zinc-100 bg-white/10 border border-white/20"
           >
             ${allies.length}
           </span>
         </div>
 
-        <div class="mt-1 rounded-lg border border-zinc-600 bg-zinc-800/80">
-          <div
-            class="max-h-[72px] overflow-y-auto p-2 text-zinc-200 text-[12.5px] leading-relaxed"
+        <div
+          class="rounded-lg bg-zinc-800/70 ring-1 ring-zinc-700/60 w-full min-w-0"
+        >
+          <ul
+            class="max-h-[120px] overflow-y-auto p-2
+                 flex flex-wrap gap-1.5
+                 scrollbar-thin scrollbar-thumb-zinc-600 hover:scrollbar-thumb-zinc-500 scrollbar-track-zinc-800"
             role="list"
-            aria-label="Alliance list"
+            aria-labelledby="alliances-title"
             translate="no"
           >
-            ${allies.length > 0
-              ? allies.map((p) => {
-                  const color = p.territoryColor().toHex();
-                  return html`
-                    <div
-                      role="listitem"
-                      class="grid grid-cols-[16px_1fr] items-center gap-2 w-full h-[30px]
-                            px-2 rounded-lg border border-transparent text-left
-                            hover:bg-[#141821] hover:border-white/30 transition-colors"
+            ${alliesSorted.length === 0
+              ? html`<li class="text-zinc-400 text-[14px] px-1">
+                  ${translateText("common.none")}
+                </li>`
+              : alliesSorted.map(
+                  (p) =>
+                    html`<li
+                      class="max-w-full inline-flex items-center gap-1.5
+                             rounded-md border border-white/10 bg-white/[0.05]
+                             px-2.5 py-1 text-[14px] text-zinc-100
+                             hover:bg-white/[0.08] active:scale-[0.99] transition"
                       title=${p.name()}
                     >
-                      <span
-                        class="inline-block w-3 h-3 rounded-full mr-2"
-                        style="background-color: ${color}"
-                      >
-                      </span>
-
-                      <span
-                        class="truncate select-none pointer-events-none font-medium"
-                      >
-                        ${p.name()}
-                      </span>
-                    </div>
-                  `;
-                })
-              : html`
-                  <div class="py-2 text-zinc-300">
-                    ${translateText("common.none")}
-                  </div>
-                `}
-          </div>
+                      <span class="truncate">${p.name()}</span>
+                    </li>`,
+                )}
+          </ul>
         </div>
       </div>
     `;
@@ -580,7 +585,7 @@ export class PlayerPanel extends LitElement implements Layer {
         </div>
         <div class="text-right font-semibold">
           <span
-            class="inline-flex items-center rounded-full px-2 py-0.5 text-base font-bold ${this.getExpiryColorClass(
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-[14px] font-bold ${this.getExpiryColorClass(
               this.allianceExpirySeconds,
             )}"
             >${this.allianceExpiryText}</span
@@ -605,7 +610,7 @@ export class PlayerPanel extends LitElement implements Layer {
     const canEmbargo = this.actions?.interaction?.canEmbargo;
 
     return html`
-      <div class="flex flex-col gap-2">
+      <div class="flex flex-col gap-2.5">
         <div class="grid auto-cols-fr grid-flow-col gap-1">
           ${actionButton({
             onClick: (e: MouseEvent) => this.handleChat(e, my, other),
@@ -657,6 +662,7 @@ export class PlayerPanel extends LitElement implements Layer {
               })
             : ""}
         </div>
+        <ui-divider></ui-divider>
 
         <div class="grid auto-cols-fr grid-flow-col gap-1">
           ${other !== my
@@ -754,80 +760,85 @@ export class PlayerPanel extends LitElement implements Layer {
 
       <div
         class="fixed inset-0 z-[1001] flex items-center justify-center overflow-auto
-               bg-black/15 backdrop-blur-sm backdrop-brightness-110 pointer-events-auto"
+               bg-black/15 backdrop-brightness-110 pointer-events-auto"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
         @wheel=${(e: MouseEvent) => e.stopPropagation()}
         @click=${() => this.hide()}
       >
         <div
-          class="pointer-events-auto max-h-[90vh] overflow-y-auto min-w-[240px] w-auto px-4 py-2"
+          class="pointer-events-auto max-h-[90vh] min-w-[300px] max-w-[400px] px-4 py-2"
           @click=${(e: MouseEvent) => e.stopPropagation()}
         >
-          <div
-            class=${`relative mt-2 w-full bg-zinc-900/90 backdrop-blur-sm p-5 shadow-2xl rounded-xl text-zinc-200
-                     ${other.isTraitor() ? "traitor-ring" : "ring-1 ring-zinc-700"}`}
-          >
-            <!-- Close button -->
-            <button
-              @click=${this.handleClose}
-              class="absolute -top-3 -right-3 flex h-7 w-7 items-center justify-center
-                     rounded-full bg-zinc-700 text-white shadow hover:bg-red-500 transition-colors"
-              aria-label=${translateText("common.close") || "Close"}
-              title=${translateText("common.close") || "Close"}
-            >
-              ✕
-            </button>
-
+          <div class="relative">
             <div
-              class="flex flex-col gap-2 font-sans antialiased text-[14px] leading-relaxed"
+              class="absolute inset-2 -z-10 rounded-2xl bg-black/25 backdrop-blur-[2px]"
+            ></div>
+            <div
+              class=${`relative w-full bg-zinc-900/95 p-6 rounded-2xl text-zinc-100 overflow-visible shadow-2xl shadow-black/50
+                 ${other.isTraitor() ? "traitor-ring" : "ring-1 ring-white/5"}`}
             >
-              <!-- Identity (flag, name, type, traitor, relation) -->
-              <div class="mb-1">${this.renderIdentityRow(other, my)}</div>
+              <!-- Close button -->
+              <button
+                @click=${this.handleClose}
+                class="absolute -top-3 -right-3 flex h-7 w-7 items-center justify-center
+                     rounded-full bg-zinc-700 text-white shadow hover:bg-red-500 transition-colors"
+                aria-label=${translateText("common.close") || "Close"}
+                title=${translateText("common.close") || "Close"}
+              >
+                ✕
+              </button>
 
-              ${this.sendTarget
-                ? html`
-                    <send-resource-modal
-                      .open=${this.sendMode !== "none"}
-                      .mode=${this.sendMode}
-                      .total=${this.sendMode === "troops"
-                        ? myTroopsNum
-                        : myGoldNum}
-                      .uiState=${this.uiState}
-                      .myPlayer=${my}
-                      .target=${this.sendTarget}
-                      .gameView=${this.g}
-                      .eventBus=${this.eventBus}
-                      .format=${this.sendMode === "troops"
-                        ? renderTroops
-                        : renderNumber}
-                      @confirm=${this.confirmSend}
-                      @close=${this.closeSend}
-                    ></send-resource-modal>
-                  `
-                : ""}
+              <div
+                class="flex flex-col gap-2 font-sans antialiased text-[14.5px] leading-relaxed"
+              >
+                <!-- Identity (flag, name, type, traitor, relation) -->
+                <div class="mb-1">${this.renderIdentityRow(other, my)}</div>
 
-              <ui-divider></ui-divider>
+                ${this.sendTarget
+                  ? html`
+                      <send-resource-modal
+                        .open=${this.sendMode !== "none"}
+                        .mode=${this.sendMode}
+                        .total=${this.sendMode === "troops"
+                          ? myTroopsNum
+                          : myGoldNum}
+                        .uiState=${this.uiState}
+                        .myPlayer=${my}
+                        .target=${this.sendTarget}
+                        .gameView=${this.g}
+                        .eventBus=${this.eventBus}
+                        .format=${this.sendMode === "troops"
+                          ? renderTroops
+                          : renderNumber}
+                        @confirm=${this.confirmSend}
+                        @close=${this.closeSend}
+                      ></send-resource-modal>
+                    `
+                  : ""}
 
-              <!-- Resources -->
-              ${this.renderResources(other)}
+                <ui-divider></ui-divider>
 
-              <ui-divider></ui-divider>
+                <!-- Resources -->
+                ${this.renderResources(other)}
 
-              <!-- Stats: betrayals / trading -->
-              ${this.renderStats(other, my)}
+                <ui-divider></ui-divider>
 
-              <ui-divider></ui-divider>
+                <!-- Stats: betrayals / trading -->
+                ${this.renderStats(other, my)}
 
-              <!-- Alliances list -->
-              ${this.renderAlliances(other)}
+                <ui-divider></ui-divider>
 
-              <!-- Alliance time remaining -->
-              ${this.renderAllianceExpiry()}
+                <!-- Alliances list -->
+                ${this.renderAlliances(other)}
 
-              <ui-divider></ui-divider>
+                <!-- Alliance time remaining -->
+                ${this.renderAllianceExpiry()}
 
-              <!-- Actions -->
-              ${this.renderActions(my, other)}
+                <ui-divider class="mt-1"></ui-divider>
+
+                <!-- Actions -->
+                ${this.renderActions(my, other)}
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/client/graphics/layers/SendResourceModal.ts b/src/client/graphics/layers/SendResourceModal.ts
index c3de5319a..5e7b3a1ed 100644
--- a/src/client/graphics/layers/SendResourceModal.ts
+++ b/src/client/graphics/layers/SendResourceModal.ts
@@ -244,19 +244,22 @@ export class SendResourceModal extends LitElement {
   private renderHeader() {
     const name = this.target?.name?.() ?? "";
     return html`
-      <div class="mb-3 flex items-center justify-between">
+      <div class="mb-3 flex items-center justify-between relative">
         <h2
           id="send-title"
           class="text-lg font-semibold tracking-tight text-zinc-100"
         >
           ${this.heading ?? this.i18n.title(name)}
         </h2>
+        <!-- Close button -->
         <button
-          class="rounded-md px-2 text-2xl leading-none text-zinc-300 hover:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-white/30"
+          type="button"
           @click=${() => this.closeModal()}
+          class="absolute -top-3 -right-3 flex h-7 w-7 items-center justify-center rounded-full bg-zinc-700 text-white shadow hover:bg-red-500 transition-colors focus-visible:ring-2 focus-visible:ring-white/30 focus:outline-none"
           aria-label=${this.i18n.closeLabel()}
+          title=${this.i18n.closeLabel()}
         >
-          ×
+          ✕
         </button>
       </div>
     `;
@@ -264,7 +267,6 @@ export class SendResourceModal extends LitElement {
 
   private renderAvailable() {
     const total = this.getTotalNumber();
-    const cap = this.getCapacityLeft();
 
     return html`
       <div class="mb-4 pb-3 border-b border-zinc-800">
@@ -277,21 +279,6 @@ export class SendResourceModal extends LitElement {
             <span class="opacity-90">${this.i18n.availableChip()}</span>
             <span class="font-mono tabular-nums">${this.format(total)}</span>
           </span>
-
-          ${cap !== null
-            ? html`
-                <!-- Cap -->
-                <span
-                  class="inline-flex items-center gap-1 rounded-full bg-amber-500/10 px-2 py-0.5 ring-1 ring-amber-400/40 text-amber-200"
-                  title=${this.i18n.capTooltip()}
-                >
-                  <span class="opacity-90">${this.i18n.cap()}</span>
-                  <span class="font-mono tabular-nums"
-                    >${this.format(cap)}</span
-                  >
-                </span>
-              `
-            : html``}
         </div>
       </div>
     `;
@@ -554,9 +541,11 @@ export class SendResourceModal extends LitElement {
     const allowed = this.limitAmount(this.sendAmount);
 
     return html`
-      <div class="fixed inset-0 z-[1100] flex items-center justify-center p-4">
+      <div
+        class="absolute inset-0 z-[1100] flex items-center justify-center p-4"
+      >
         <div
-          class="absolute inset-0 bg-black/60 backdrop-blur-sm rounded-2xl"
+          class="absolute inset-0 bg-black/60 rounded-2xl"
           @click=${() => this.closeModal()}
         ></div>