diff --git a/resources/lang/en.json b/resources/lang/en.json
index 5f6dac416..6f941c61c 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -575,6 +575,7 @@
   },
   "events_display": {
     "retreating": "retreating",
+    "retaliate": "Retaliate",
     "boat": "Boat",
     "alliance_request_status": "{name} {status} your alliance request",
     "alliance_accepted": "accepted",
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index 803f81e3f..c8276491e 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -35,6 +35,7 @@ import {
   CancelBoatIntentEvent,
   SendAllianceExtensionIntentEvent,
   SendAllianceReplyIntentEvent,
+  SendAttackIntentEvent,
 } from "../../Transport";
 import { Layer } from "./Layer";
 
@@ -736,28 +737,54 @@ export class EventsDisplay extends LitElement implements Layer {
     }
   }
 
+  private handleRetaliate(attack: AttackUpdate) {
+    const attacker = this.game.playerBySmallID(attack.attackerID) as PlayerView;
+    if (!attacker) return;
+
+    const myPlayer = this.game.myPlayer();
+    if (!myPlayer) return;
+
+    // Launch counterattack with the same number of troops as the incoming attack
+    this.eventBus.emit(new SendAttackIntentEvent(attacker.id(), attack.troops));
+  }
+
   private renderIncomingAttacks() {
     return html`
       ${this.incomingAttacks.length > 0
         ? html`
-            ${this.incomingAttacks.map(
-              (attack) => html`
-                ${this.renderButton({
-                  content: html`
-                    ${renderTroops(attack.troops)}
-                    ${(
-                      this.game.playerBySmallID(attack.attackerID) as PlayerView
-                    )?.name()}
-                    ${attack.retreating
-                      ? `(${translateText("events_display.retreating")}...)`
+            <div class="flex flex-wrap gap-y-1 gap-x-2">
+              ${this.incomingAttacks.map(
+                (attack) => html`
+                  <div class="inline-flex items-center gap-1">
+                    ${this.renderButton({
+                      content: html`
+                        ${renderTroops(attack.troops)}
+                        ${(
+                          this.game.playerBySmallID(
+                            attack.attackerID,
+                          ) as PlayerView
+                        )?.name()}
+                        ${attack.retreating
+                          ? `(${translateText("events_display.retreating")}...)`
+                          : ""}
+                      `,
+                      onClick: () => this.attackWarningOnClick(attack),
+                      className: "text-left text-red-400",
+                      translate: false,
+                    })}
+                    ${!attack.retreating
+                      ? this.renderButton({
+                          content: translateText("events_display.retaliate"),
+                          onClick: () => this.handleRetaliate(attack),
+                          className:
+                            "inline-block px-3 py-1 text-white rounded text-md md:text-sm cursor-pointer transition-colors duration-300 bg-red-600 hover:bg-red-700",
+                          translate: true,
+                        })
                       : ""}
-                  `,
-                  onClick: () => this.attackWarningOnClick(attack),
-                  className: "text-left text-red-400",
-                  translate: false,
-                })}
-              `,
-            )}
+                  </div>
+                `,
+              )}
+            </div>
           `
         : ""}
     `;