diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index 8364c45a6..20319614b 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -133,17 +133,17 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
         </div>
         <!-- Game cards grid -->
@@ -204,17 +204,17 @@ export class GameModeSelector extends LitElement {
           ${this.renderSmallActionCard(
             translateText("main.create"),
             this.openHostLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("mode_selector.ranked_title"),
             this.openRankedMenu,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
           ${this.renderSmallActionCard(
             translateText("main.join"),
             this.openJoinLobby,
-            "bg-slate-700 hover:bg-slate-600 active:bg-slate-800",
+            "bg-slate-600 hover:bg-slate-500 active:bg-slate-700",
           )}
         </div>
       </div>
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 8d2c87b44..d2d4c4bae 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -348,7 +348,10 @@ export class ControlPanel extends LitElement implements Layer {
           ${this.renderMobileTroopBar()}
         </div>
         <!-- Sword + % label -->
-        <div class="flex flex-col items-center shrink-0 gap-0.5" translate="no">
+        <div
+          class="flex flex-col items-center shrink-0 gap-0.5 w-8"
+          translate="no"
+        >
           <img
             src=${swordIcon}
             alt=""
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index f8b2f1cae..a45e57e84 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -864,7 +864,7 @@ export class EventsDisplay extends LitElement implements Layer {
 
               <!-- Content Area -->
               <div
-                class="bg-gray-800/70 max-h-[30vh] overflow-y-auto w-full h-full min-[1200px]:rounded-b-xl events-container"
+                class="bg-gray-800/70 max-h-[15vh] lg:max-h-[30vh] overflow-y-auto w-full h-full min-[1200px]:rounded-b-xl events-container"
               >
                 <div>
                   <table
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index e7f885824..d1cab6db8 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -320,7 +320,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     return html`
       <div class="flex items-start gap-1 lg:gap-2 p-1.5 lg:p-2">
         <!-- Left: Gold & Troop bar -->
-        <div class="flex flex-col gap-1 shrink-0 w-36">
+        <div class="flex flex-col gap-1 shrink-0 w-28 md:w-36">
           <div class="flex items-center gap-1">
             <div
               class="flex flex-1 items-center justify-center p-1 border rounded-md border-yellow-400 font-bold text-yellow-400 text-sm lg:gap-1"
@@ -350,7 +350,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
               >
             </div>
           </div>
-          <div class="w-36" translate="no">
+          <div class="w-28 md:w-36" translate="no">
             ${this.renderTroopBar(totalTroops, attackingTroops, maxTroops)}
           </div>
         </div>