diff --git a/src/board/BuildingTile.svelte b/src/board/BuildingTile.svelte
index f8e8da8..3c400f1 100644
--- a/src/board/BuildingTile.svelte
+++ b/src/board/BuildingTile.svelte
@@ -1,8 +1,57 @@
 <script lang="ts">
+    import moves from "../moves";
     import type { BuildingType } from "../types";
+    import { canPayBuildingCost } from "../utils";
+    import village from "../village";
 
     export let building: BuildingType;
+
+
+    $: isUpgrading = $village.queue.find(q => q.id === building.id);
+    $: canUpgrade = canPayBuildingCost($village, building);
+
+
+    function upgradeBuilding() {
+        moves.upgradeBuilding(building.id);
+        return false;
+    }
 </script>
 
-<p>{ building.name }</p>
-<p>{ building.level }</p>
+<div>
+    <p>{ building.name }</p>
+    <p>
+        <button
+            class="level"
+            class:can-upgrade={ canUpgrade }
+            class:is-upgrading={ isUpgrading }
+            on:click|stopPropagation={ upgradeBuilding }
+        >
+            { building.level }
+        </button>
+    </p>
+</div>
+
+<style>
+    .level {
+        aspect-ratio: 1;
+        background-color: hsl(208, 100%, 97%);
+        border: 0.4em solid hsl(0, 0%, 45%);
+        border-radius: 100%;
+        box-sizing: border-box;
+        box-shadow: 0 0 0.2em black;
+        color: hsl(0, 0%, 10%);
+        font-size: 1.2em;
+    }
+
+    .level.can-upgrade {
+        border-color: hsl(90, 99%, 36%);
+    }
+
+    .level.is-upgrading {
+        border-color: hsl(56, 99%, 43%);
+    }
+
+    .level:hover.can-upgrade {
+        border-color: hsl(90, 99%, 36%);
+    }
+</style>
diff --git a/src/moves/upgradeBuilding.ts b/src/moves/upgradeBuilding.ts
index be8fa7b..691384a 100644
--- a/src/moves/upgradeBuilding.ts
+++ b/src/moves/upgradeBuilding.ts
@@ -1,4 +1,4 @@
-import { enqueueBuilding } from "../utils";
+import { canPayBuildingCost, enqueueBuilding, getBuildingUpgradeCost } from "../utils";
 import type { VillageState } from "../village";
 
 
@@ -8,20 +8,12 @@ export default function upgradeBuilding(V: VillageState, buildingId: number) {
         return false;
     }
 
-    const ongoingUpgrades = V.queue.filter(q => q.id === building.id);
-    const level = building.level + 1 + ongoingUpgrades.length;
-
-    const cost = building.cost(level);
-
-    if (
-        cost.wood > V.resources.wood
-        || cost.stone > V.resources.stone
-        || cost.iron > V.resources.iron
-        || cost.food > V.resources.food
-    ) {
+    if (!canPayBuildingCost(V, building)) {
         return false;
     }
 
+    const cost = getBuildingUpgradeCost(V, building);
+
     V.resources.wood -= cost.wood;
     V.resources.stone -= cost.stone;
     V.resources.iron -= cost.iron;
diff --git a/src/utils.ts b/src/utils.ts
index b9cbe76..03ec5ae 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,5 @@
 import units from "./data/units";
-import type { BuildingType, ProductionType } from "./types";
+import type { BuildingType, CostType, ProductionType } from "./types";
 import type { VillageState } from "./village";
 
 
@@ -109,3 +109,22 @@ export function enqueueBuilding(V: VillageState, building: BuildingType) {
         remainingTime,
     });
 }
+
+
+export function getBuildingUpgradeCost(V: VillageState, building: BuildingType): CostType {
+    const ongoingUpgrades = V.queue.filter(q => q.id === building.id);
+    const level = building.level + ongoingUpgrades.length + 1;
+    return building.cost(level);
+}
+
+
+export function canPayBuildingCost(V: VillageState, building: BuildingType): boolean {
+    const cost = getBuildingUpgradeCost(V, building);
+
+    return !(
+        cost.wood > V.resources.wood
+        || cost.stone > V.resources.stone
+        || cost.iron > V.resources.iron
+        || cost.food > V.resources.food
+    );
+}