diff --git a/assets/styles/app.css b/assets/styles/app.css
index ba7e05b..de3c520 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -124,3 +124,12 @@ table.dataTable {
 .statblock-collapse h3 {
     margin-top: 0.75rem;
 }
+
+/* --- Overview tiles ------------------------------------------------------ */
+.home-tile {
+    transition: border-color 0.12s ease, transform 0.12s ease;
+}
+.home-tile:hover {
+    border-color: var(--bs-primary);
+    transform: translateY(-2px);
+}
diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
index fb154ca..951fde9 100644
--- a/templates/home/index.html.twig
+++ b/templates/home/index.html.twig
@@ -3,37 +3,31 @@
 {% block title %}Overview · dmtools{% endblock %}
 
 {% block body %}
-    <div class="d-flex justify-content-between align-items-center mb-3">
-        <h1 class="h3 mb-0">Overview</h1>
-    </div>
+    <h1 class="h3 mb-3">Overview</h1>
 
-    <p class="text-body-secondary">
-        Starting point for the Monday-evening campaign tools. The table below is a
-        placeholder that shows the Bootstrap + DataTables layout wiring works
-        (search, sort, paging).
-    </p>
+    {% set tiles = [
+        { route: 'app_characters', icon: '🧝', label: 'Characters', blurb: 'The player characters' },
+        { route: 'app_npcs',       icon: '🧑‍🌾', label: "NPC's", blurb: 'Villagers and other non-player characters' },
+        { route: 'app_enemies',    icon: '👹', label: 'Enemies', blurb: 'Monster stat blocks' },
+        { route: 'app_tracker',    icon: '⚔️', label: 'Tracker', blurb: 'Run encounters and track hit points' },
+        { route: 'app_art',        icon: '🖼️', label: 'Art', blurb: 'Maps, handouts and character pieces' },
+        { route: 'app_storyline',  icon: '📜', label: 'Storyline', blurb: 'Campaign notes and plot threads' },
+    ] %}
 
-    <div class="card shadow-sm">
-        <div class="card-body">
-            <table class="table table-striped table-hover align-middle datatable"
-                   data-datatable-options='{"order": [[0, "asc"]]}'>
-                <thead>
-                    <tr>
-                        <th scope="col">Name</th>
-                        <th scope="col">Type</th>
-                        <th scope="col">Location</th>
-                        <th scope="col">Notes</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr><td>Seraphina Vane</td><td>NPC</td><td>Blackreach</td><td>Owes the party a favour</td></tr>
-                    <tr><td>Goblin ambush</td><td>Encounter</td><td>Old Kings Road</td><td>CR 2, 6 goblins</td></tr>
-                    <tr><td>The Sunken Vault</td><td>Location</td><td>Lake Nydra</td><td>Water-breathing required</td></tr>
-                    <tr><td>Rusted Key</td><td>Item</td><td>Party inventory</td><td>Opens the vault antechamber</td></tr>
-                    <tr><td>Captain Dorae</td><td>NPC</td><td>Saltmarsh docks</td><td>Will smuggle cargo for coin</td></tr>
-                    <tr><td>Owlbear den</td><td>Encounter</td><td>Whisperwood</td><td>CR 3, mother + 2 cubs</td></tr>
-                </tbody>
-            </table>
-        </div>
+    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
+        {% for t in tiles %}
+            <div class="col">
+                <a href="{{ path(t.route) }}"
+                   class="card shadow-sm h-100 text-decoration-none text-body home-tile">
+                    <div class="card-body d-flex align-items-start gap-3">
+                        <div class="fs-1 lh-1">{{ t.icon }}</div>
+                        <div>
+                            <div class="h5 mb-1">{{ t.label }}</div>
+                            <div class="text-body-secondary small">{{ t.blurb }}</div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        {% endfor %}
     </div>
 {% endblock %}