diff --git a/assets/css/site.css b/assets/css/site.css
index b59d48b..18ac72d 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -218,3 +218,22 @@ button:hover .icon svg {
     from {left: -300px; opacity: 0}
     to {left: 0; opacity: 1}
 }
+.logo-404 {
+    max-width: 200px;
+    max-height: 200px;
+    margin: 0 auto;
+    display: block;
+}
+.logo-404 svg {
+    max-width: 200px;
+    max-height: 200px;
+}
+.toc-404 {
+    max-width: 250px;
+    margin: 0 auto;
+}
+.message-404 {
+    font-size: 2em;
+    margin: 0 auto;
+    text-align: center;
+}
diff --git a/assets/templates/404.phtml b/assets/templates/404.phtml
new file mode 100644
index 0000000..737b62d
--- /dev/null
+++ b/assets/templates/404.phtml
@@ -0,0 +1,11 @@
+<?php partial('header', ['title' => 'PHP Apprentice']) ?>
+
+<div class="container center">
+    <a href="/" class="logo-404"><?= icon('elephant') ?></a>
+    <p class="message-404">Whoops! The page could not be found.</p>
+    <div class="toc-404">
+        <?php partial('table_of_contents') ?>
+    </div>
+</div>
+
+<?php partial('footer') ?>
diff --git a/config.php b/config.php
index a71f8d7..b77d917 100644
--- a/config.php
+++ b/config.php
@@ -10,6 +10,7 @@ return [
     'pages' => [
         Page::create('index', 'index.phtml'),
         Page::create('credits', 'credits.phtml'),
+        Page::create('404', '404.phtml'),
         Page::create('basics', null, 'basics.php', [
             'title' => 'Basics',
             'subtitle' => 'Getting started',