diff --git a/public/img/buildings/barracks.png b/public/img/buildings/barracks.png
new file mode 100644
index 0000000..d295374
Binary files /dev/null and b/public/img/buildings/barracks.png differ
diff --git a/public/img/buildings/field.png b/public/img/buildings/field.png
new file mode 100644
index 0000000..a4de3c5
Binary files /dev/null and b/public/img/buildings/field.png differ
diff --git a/public/img/buildings/granary.png b/public/img/buildings/granary.png
new file mode 100644
index 0000000..ddfdec9
Binary files /dev/null and b/public/img/buildings/granary.png differ
diff --git a/public/img/buildings/mine.png b/public/img/buildings/mine.png
new file mode 100644
index 0000000..b67e6fc
Binary files /dev/null and b/public/img/buildings/mine.png differ
diff --git a/public/img/buildings/pit.png b/public/img/buildings/pit.png
new file mode 100644
index 0000000..205705c
Binary files /dev/null and b/public/img/buildings/pit.png differ
diff --git a/public/img/buildings/townhall.png b/public/img/buildings/townhall.png
new file mode 100644
index 0000000..3cb272e
Binary files /dev/null and b/public/img/buildings/townhall.png differ
diff --git a/public/img/buildings/university.png b/public/img/buildings/university.png
new file mode 100644
index 0000000..84e5655
Binary files /dev/null and b/public/img/buildings/university.png differ
diff --git a/public/img/buildings/warehouse.png b/public/img/buildings/warehouse.png
new file mode 100644
index 0000000..9ff2f57
Binary files /dev/null and b/public/img/buildings/warehouse.png differ
diff --git a/public/img/buildings/woodcutter.png b/public/img/buildings/woodcutter.png
new file mode 100644
index 0000000..c690ae0
Binary files /dev/null and b/public/img/buildings/woodcutter.png differ
diff --git a/src/board/BuildingTile.svelte b/src/board/BuildingTile.svelte
index cabb4c9..8d4b356 100644
--- a/src/board/BuildingTile.svelte
+++ b/src/board/BuildingTile.svelte
@@ -18,28 +18,57 @@
     }
 </script>
 
-<div>
-    <p>{ building.name }</p>
-    <p>
-        <button
-            class="level"
-            class:can-upgrade={ canUpgrade }
-            class:is-upgrading={ isUpgrading }
-            class:max-level={ maxLevelReached }
-            on:click|stopPropagation={ upgradeBuilding }
-        >
-            { building.level }
-            { #if building.state.upgrade.isUpgrading }
-            <span>
-                ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
-            </span>
-            { /if }
-        </button>
-    </p>
+<div class="building">
+    <div class="illustration">
+        <img src="/img/buildings/{ building.type }.png" alt="">
+    </div>
+    <div class="content">
+        <!-- <p>{ building.name }</p> -->
+        <div class="level">
+            <button
+                class:can-upgrade={ canUpgrade }
+                class:is-upgrading={ isUpgrading }
+                class:max-level={ maxLevelReached }
+                on:click|stopPropagation={ upgradeBuilding }
+            >
+                { building.level }
+                { #if building.state.upgrade.isUpgrading }
+                <span>
+                    ({ Math.ceil(building.state.upgrade.remainingTime / 1000) }’)
+                </span>
+                { /if }
+            </button>
+        </div>
+    </div>
 </div>
 
 <style>
+    .building {
+        position: relative;
+        height: 100%;
+    }
+
+    .building .illustration,
+    .building .illustration img {
+        width: 100%;
+    }
+
+    .building .content {
+        left: 0;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
     .level {
+        bottom: -0.4em;
+        left: 50%;
+        position: absolute;
+        translate: -50%;
+    }
+
+    .level button {
         aspect-ratio: 1;
         background-color: hsl(208, 100%, 97%);
         border: 0.4em solid hsl(0, 0%, 45%);
@@ -48,21 +77,26 @@
         box-shadow: 0 0 0.2em black;
         color: hsl(0, 0%, 10%);
         font-size: 1.2em;
+        transition: all 100ms ease-in-out;
     }
 
-    .level span {
+    .level button span {
         font-size: 0.9em;
     }
 
-    .level.can-upgrade {
+    .level button.can-upgrade {
         border-color: hsl(90, 99%, 36%);
     }
 
-    .level.is-upgrading {
+    .level button.is-upgrading {
         border-color: hsl(56, 99%, 43%);
     }
 
-    .level.max-level {
+    .level button.max-level {
         border-color: hsl(209, 70%, 52%);
     }
+
+    .level button:hover {
+        scale: 1.1;
+    }
 </style>
diff --git a/src/board/Tile.svelte b/src/board/Tile.svelte
index eebf700..2a6d1a6 100644
--- a/src/board/Tile.svelte
+++ b/src/board/Tile.svelte
@@ -16,8 +16,10 @@
 <style>
     .hexagon {
         aspect-ratio: 1;
-        background-color: hsl(220, 75%, 75%);
+        border: 0.2em solid;
+        border-color: hsl(220, 75%, 75%);
         border-radius: 100%;
+        box-sizing: border-box;
         cursor: pointer;
         font-size: 1.2vmin;
         height: 12em;
@@ -27,11 +29,11 @@
     }
 
     .hexagon:hover {
-        background-color: hsl(60, 75%, 75%);
+        border-color: hsl(60, 75%, 75%);
     }
 
     .hexagon:active {
-        background-color: hsl(60, 75%, 50%);
+        border-color: hsl(60, 75%, 50%);
     }
 
     .hexagon .content {