diff --git a/src/client/hud/layers/ControlPanel.ts b/src/client/hud/layers/ControlPanel.ts
index 4d4f0b668e..0c0c96dde9 100644
--- a/src/client/hud/layers/ControlPanel.ts
+++ b/src/client/hud/layers/ControlPanel.ts
@@ -627,21 +627,29 @@ export class ControlPanel extends LitElement implements Controller {
>
${this.renderMobileTroopBar()}
-
+
-

-
${(this.attackRatio * 100).toFixed(0)}%
+

+
${(this.attackRatio * 100).toFixed(0)}%
+
+ (${renderTroops(
+ (this.game?.myPlayer()?.troops() ?? 0) * this.attackRatio,
+ )})
diff --git a/tests/client/ControlPanelAttackRatio.test.ts b/tests/client/ControlPanelAttackRatio.test.ts
index 249c33cc4e..4de8333466 100644
--- a/tests/client/ControlPanelAttackRatio.test.ts
+++ b/tests/client/ControlPanelAttackRatio.test.ts
@@ -53,4 +53,18 @@ describe("control-panel attack ratio", () => {
expect(uiState.attackRatio).toBeCloseTo(0.2);
});
+
+ it("renders the calculated troop count alongside percentage in mobile view", async () => {
+ panel.game = {
+ inSpawnPhase: () => false,
+ myPlayer: () => ({ isAlive: () => true, troops: () => 100_000 }),
+ } as unknown as GameView;
+
+ panel.setVisibile(true);
+ await (panel as any).updateComplete;
+
+ const mobileContainer = panel.querySelector(".lg\\:hidden");
+ expect(mobileContainer?.textContent).toContain("20%");
+ expect(mobileContainer?.textContent).toContain("(2.00K)");
+ });
});