diff --git a/src/data/buildings.ts b/src/data/buildings.ts
index d03ccff..2296435 100644
--- a/src/data/buildings.ts
+++ b/src/data/buildings.ts
@@ -56,6 +56,10 @@ export default [
             },
             constructionTimeReductionPerLevel: 0.025,
         },
+        description: {
+            short: '',
+            long: 'Increases the construction time of buildings by 2,5% per level, and unlocks new buildings.'
+        },
     },
     {
         type: 'woodcutter',
@@ -84,6 +88,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: '',
+            long: 'Produces wood.'
+        },
     },
     {
         type: 'mine',
@@ -112,6 +120,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: '',
+            long: 'Produces iron.'
+        },
     },
     {
         type: 'pit',
@@ -140,6 +152,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: '',
+            long: 'Produces stone.'
+        },
     },
     {
         type: 'field',
@@ -164,6 +180,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: '',
+            long: 'Produces food.'
+        },
     },
     {
         type: 'warehouse',
@@ -191,6 +211,10 @@ export default [
                 };
             },
         },
+        description: {
+            short: 'Stores wood, stone and iron',
+            long: 'Stores wood, stone and iron.'
+        },
     },
     {
         type: 'granary',
@@ -218,6 +242,10 @@ export default [
                 };
             },
         },
+        description: {
+            short: 'Stores food',
+            long: 'Stores food.'
+        },
     },
     {
         type: 'great-warehouse',
@@ -245,6 +273,10 @@ export default [
                 };
             },
         },
+        description: {
+            short: 'Stores great quantities of wood, stone and iron',
+            long: 'Stores great quantities of wood, stone and iron.'
+        },
     },
     {
         type: 'great-granary',
@@ -272,6 +304,10 @@ export default [
                 };
             },
         },
+        description: {
+            short: 'Stores great quantities of food',
+            long: 'Stores great quantities of food.'
+        },
     },
     {
         type: 'university',
@@ -299,6 +335,10 @@ export default [
                 recruitmentTime: (V: VillageState, self: BuildingType) => 3 - 0.06 * self.level,
             },
         },
+        description: {
+            short: 'To recruit philosophers',
+            long: 'Recruit philosophers. Recruitment time is lowered by 2% per level.'
+        },
     },
     {
         type: 'barracks',
@@ -323,9 +363,13 @@ export default [
             },
             units: {
                 type: 'soldier',
-                recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.03 * self.level,
+                recruitmentTime: (V: VillageState, self: BuildingType) => 2 - 0.04 * self.level,
             },
         },
+        description: {
+            short: 'To recruit soldiers',
+            long: 'Recruit soldiers. Recruitment time is lowered by 2% per level.'
+        },
     },
     {
         type: 'palace',
@@ -357,6 +401,10 @@ export default [
                 },
             },
         },
+        description: {
+            short: 'Attracts heroes',
+            long: 'Attracts a new hero at levels 5 and 10.'
+        },
     },
     {
         type: 'sawmill',
@@ -384,6 +432,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: 'Improves wood production',
+            long: 'Improves wood production by 5% per level.'
+        },
     },
     {
         type: 'stonecutter',
@@ -411,6 +463,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: 'Improves stone production',
+            long: 'Improves stone production by 5% per level.'
+        },
     },
     {
         type: 'blacksmith',
@@ -438,6 +494,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: 'Improves iron production',
+            long: 'Improves iron production by 5% per level.'
+        },
     },
     {
         type: 'bakery',
@@ -465,6 +525,10 @@ export default [
                 return prod;
             },
         },
+        description: {
+            short: 'Improves food production',
+            long: 'Improves food production by 5% per level.'
+        },
     },
     {
         type: 'wonder',
@@ -496,5 +560,9 @@ export default [
                 },
             },
         },
+        description: {
+            short: 'Provides a huge culture boost',
+            long: 'Gives 18,000 culture points upon construction.'
+        },
     },
 ];
diff --git a/src/hud/BuildingCreator.svelte b/src/hud/BuildingCreator.svelte
index afc805c..afdb151 100644
--- a/src/hud/BuildingCreator.svelte
+++ b/src/hud/BuildingCreator.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     import { createBuilding } from "../create";
     import buildings from "../data/buildings";
+    import { getTimeToBuild } from "../logic";
     import moves from "../moves";
     import showBuildingCreator from "../stores/showBuildingCreator";
-    import { canPayBuildingCost, getTownhall } from "../utils";
+    import { canPayBuildingCost, getPrettyTime, getTownhall } from "../utils";
     import village from "../village";
     import Cost from "./Cost.svelte";
 
@@ -38,21 +39,27 @@
 <section>
     <div class="building-creator">
         <header>
-            <h1>Build</h1>
+            <h1>Choose a new building</h1>
             <span class="close">
                 <button on:click={ close }>X</button>
             </span>
         </header>
         <div class="buildings">
             { #each constructible as building }
-            <div>
-                <p>{ building.name }</p>
+            <div class="building">
+                <div class="content">
+                    <img src="/img/buildings/{building.type}.png" alt="">
+                    <div>
+                        <h3>{ building.name }</h3>
+                        <p>{ building.description.short }</p>
+                    </div>
+                </div>
                 <Cost cost={ building.cost(1) } />
                 <button
                     on:click={ () => build(building.type) }
                     disabled={ !canPayBuildingCost($village, building) }
                 >
-                    Build
+                    Build ({ getPrettyTime(getTimeToBuild($village, building, 1)) })
                 </button>
             </div>
             { /each }
@@ -75,25 +82,60 @@
 
     .building-creator {
         background-color: hsl(0, 0%, 20%);
-        border: 0.2em solid grey;
+        border: 0.2em solid hsl(0, 0%, 40%);
         border-radius: .4em;
+        box-sizing: border-box;
         width: 80%;
         height: 60%;
     }
 
     .building-creator header {
+        align-items: center;
+        border-bottom: 2px solid hsl(0, 0%, 40%);
+        box-sizing: border-box;
+        display: flex;
+        height: 15%;
+        justify-content: center;
         position: relative;
     }
 
+    .building-creator header h1 {
+        margin: 0;
+    }
+
     .building-creator header .close {
         position: absolute;
         right: 1em;
-        top: 0;
+        top: 1em;
     }
 
     .building-creator .buildings {
+        box-sizing: border-box;
         display: grid;
         gap: 1em;
         grid-template-columns: repeat(4, 1fr);
+        height: 85%;
+        overflow: hidden;
+        overflow-y: scroll;
+        padding: 0.5em;
+    }
+
+    .building {
+        background-color: hsl(0, 0%, 22%);
+        box-shadow: 0 0 0.2em hsl(0, 0%, 15%);
+        padding: 0.4em 0.2em;
+    }
+
+    .building .content {
+        display: flex;
+        text-align: left;
+    }
+
+    .building .content img {
+        height: 10em;
+    }
+
+    .building .content h3 {
+        margin: 0;
     }
 </style>
diff --git a/src/hud/BuildingPanel.svelte b/src/hud/BuildingPanel.svelte
index 7ca8b89..2d3fb90 100644
--- a/src/hud/BuildingPanel.svelte
+++ b/src/hud/BuildingPanel.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+    import { getTimeToBuild } from "../logic";
     import moves from "../moves";
     import showBuildingPanel from "../stores/showBuildingPanel";
-    import { getBuilding, getBuildingUpgradeCost, getPrettyTime } from "../utils";
+    import { canPayBuildingCost, getBuilding, getBuildingUpgradeCost, getPrettyTime } from "../utils";
     import village from "../village";
     import BuildingRecruitment from "./BuildingRecruitment.svelte";
     import Cost from "./Cost.svelte";
@@ -33,6 +34,9 @@
                 <button on:click={ close }>X</button>
             </span>
         </header>
+        <div class="description">
+            <p>{ building.description.long }</p>
+        </div>
         <div class="content">
             { #if building.level === 0 }
             <p>Building in construction…</p>
@@ -51,7 +55,12 @@
             { :else }
             <div>
                 <Cost cost={ getBuildingUpgradeCost($village, building) } />
-                <button on:click={ () => upgrade() }>Upgrade</button>
+                <button
+                    disabled={ !canPayBuildingCost($village, building) }
+                    on:click={ () => upgrade() }
+                >
+                    Upgrade ({ getPrettyTime(getTimeToBuild($village, building, building.level + 1)) })
+                </button>
             </div>
             { /if }
         </div>
diff --git a/src/hud/Cost.svelte b/src/hud/Cost.svelte
index 1df4200..25148f9 100644
--- a/src/hud/Cost.svelte
+++ b/src/hud/Cost.svelte
@@ -2,6 +2,7 @@
     import { Duration } from 'luxon';
 
     import type { CostType } from "../types";
+    import village from '../village';
 
     export let cost: CostType;
     export let duration: number | null = null;
@@ -11,19 +12,30 @@
 </script>
 
 <div class="cost">
-    <div>
+    <div
+        class:short={ $village.resources.wood < cost.wood }
+    >
         <img src="/img/icons/wood.png" alt="Wood" />
         { cost.wood }
     </div>
-    <div>
+
+    <div
+        class:short={ $village.resources.stone < cost.stone }
+    >
         <img src="/img/icons/stone.png" alt="Stone" />
         { cost.stone }
     </div>
-    <div>
+
+    <div
+        class:short={ $village.resources.iron < cost.iron }
+    >
         <img src="/img/icons/iron.png" alt="Iron" />
         { cost.iron }
     </div>
-    <div>
+
+    <div
+        class:short={ $village.resources.food < cost.food }
+    >
         <img src="/img/icons/food.png" alt="Food" />
         { cost.food }
     </div>
@@ -48,4 +60,8 @@
         align-items: center;
         gap: 0.2em;
     }
+
+    .cost .short {
+        color: red;
+    }
 </style>
diff --git a/src/hud/Quests.svelte b/src/hud/Quests.svelte
index b680b6a..ea60a9c 100644
--- a/src/hud/Quests.svelte
+++ b/src/hud/Quests.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+    import { flip } from "svelte/animate";
     import { fly } from "svelte/transition";
 
     import moves from "../moves";
+    import { getPrettyTime } from "../utils";
     import village from "../village";
     import Reward from "./Reward.svelte";
-    import { flip } from "svelte/animate";
-    import { getPrettyTime } from "../utils";
 
 
     $: availableHeroes = $village.heroes.filter(h => !$village.quests.some(q => q.hero === h.id));
diff --git a/src/types.ts b/src/types.ts
index 8c79dff..dfae412 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -47,6 +47,10 @@ export interface BuildingSource {
             onLevelUp?: Function;
         };
     };
+    description: {
+        short: string;
+        long: string;
+    };
 }