diff --git a/src/client/graphics/layers/UILayer.ts b/src/client/graphics/layers/UILayer.ts
index a743c5ae7..f3ba9711f 100644
--- a/src/client/graphics/layers/UILayer.ts
+++ b/src/client/graphics/layers/UILayer.ts
@@ -340,7 +340,11 @@ export class UILayer implements Layer {
       // full hp/dead warships dont need a hp bar
       this.allHealthBars.get(unit.id())?.clear();
       this.allHealthBars.delete(unit.id());
-    } else if (unit.health() < maxHealth && unit.health() > 0) {
+    } else if (
+      unit.isActive() &&
+      unit.health() < maxHealth &&
+      unit.health() > 0
+    ) {
       this.allHealthBars.get(unit.id())?.clear();
       const healthBar = new ProgressBar(
         COLOR_PROGRESSION,
diff --git a/tests/client/graphics/UILayer.test.ts b/tests/client/graphics/UILayer.test.ts
index dbc131cec..0a31d69be 100644
--- a/tests/client/graphics/UILayer.test.ts
+++ b/tests/client/graphics/UILayer.test.ts
@@ -83,6 +83,26 @@ describe("UILayer", () => {
     expect(ui["allHealthBars"].has(1)).toBe(false);
   });
 
+  it("should remove health bars for inactive units", () => {
+    const ui = new UILayer(game, eventBus, transformHandler);
+    ui.redraw();
+    const unit = {
+      id: () => 1,
+      type: () => "Warship",
+      health: () => 5,
+      tile: () => ({}),
+      owner: () => ({}),
+      isActive: () => true,
+    } as unknown as UnitView;
+    ui.drawHealthBar(unit);
+    expect(ui["allHealthBars"].has(1)).toBe(true);
+
+    // an inactive unit doesnt have a health bar
+    unit.isActive = () => false;
+    ui.drawHealthBar(unit);
+    expect(ui["allHealthBars"].has(1)).toBe(false);
+  });
+
   it("should add loading bar for unit", () => {
     const ui = new UILayer(game, eventBus, transformHandler);
     ui.redraw();