diff --git a/src/client/graphics/layers/RadialMenuElements.ts b/src/client/graphics/layers/RadialMenuElements.ts
index 2f55a55e6..72be1edaa 100644
--- a/src/client/graphics/layers/RadialMenuElements.ts
+++ b/src/client/graphics/layers/RadialMenuElements.ts
@@ -419,18 +419,19 @@ function createMenuElements(
           : !BuildableAttacks.has(item.unitType)),
     )
     .map((item: BuildItemDisplay) => {
-      const canBuildOrUpgrade = params.buildMenu.canBuildOrUpgrade(item);
       return {
         id: `${elementIdPrefix}_${item.unitType}`,
         name: item.key
           ? item.key.replace("unit_type.", "")
           : item.unitType.toString(),
-        disabled: () => !canBuildOrUpgrade,
-        color: canBuildOrUpgrade
-          ? filterType === "attack"
-            ? COLORS.attack
-            : COLORS.building
-          : undefined,
+        disabled: (p: MenuElementParams) =>
+          !p.buildMenu.canBuildOrUpgrade(item),
+        color: (p: MenuElementParams) =>
+          p.buildMenu.canBuildOrUpgrade(item)
+            ? filterType === "attack"
+              ? COLORS.attack
+              : COLORS.building
+            : COLORS.building,
         icon: item.icon,
         tooltipItems: [
           { text: translateText(item.key ?? ""), className: "title" },
@@ -455,7 +456,7 @@ function createMenuElements(
           if (buildableUnit === undefined) {
             return;
           }
-          if (canBuildOrUpgrade) {
+          if (params.buildMenu.canBuildOrUpgrade(item)) {
             params.buildMenu.sendBuildOrUpgrade(buildableUnit, params.tile);
           }
           params.closeMenu();
diff --git a/tests/client/graphics/RadialMenuElements.test.ts b/tests/client/graphics/RadialMenuElements.test.ts
index 3404accbf..d6317670d 100644
--- a/tests/client/graphics/RadialMenuElements.test.ts
+++ b/tests/client/graphics/RadialMenuElements.test.ts
@@ -557,7 +557,11 @@ describe("RadialMenuElements", () => {
       const subMenu = buildMenuElement.subMenu!(mockParams);
       const cityElement = subMenu.find((item) => item.id === "build_City");
 
-      expect(cityElement!.color).toBe(COLORS.building);
+      expect(
+        (cityElement!.color as (params: MenuElementParams) => string)(
+          mockParams,
+        ),
+      ).toBe(COLORS.building);
     });
 
     it("should use correct colors for attack elements", () => {
@@ -572,16 +576,24 @@ describe("RadialMenuElements", () => {
         (item) => item.id === "attack_Atom Bomb",
       );
 
-      expect(atomBombElement!.color).toBe(COLORS.attack);
+      expect(
+        (atomBombElement!.color as (params: MenuElementParams) => string)(
+          mockParams,
+        ),
+      ).toBe(COLORS.attack);
     });
 
-    it("should not set color when element is disabled", () => {
+    it("should use disabled color when element is disabled", () => {
       mockBuildMenu.canBuildOrUpgrade = vi.fn(() => false);
 
       const subMenu = buildMenuElement.subMenu!(mockParams);
       const cityElement = subMenu.find((item) => item.id === "build_City");
 
-      expect(cityElement!.color).toBeUndefined();
+      expect(
+        (cityElement!.color as (params: MenuElementParams) => string)(
+          mockParams,
+        ),
+      ).toBe(COLORS.building);
     });
   });