diff --git a/app/manifest/client.js b/app/manifest/client.js
index 55e2bfd..8c71326 100644
--- a/app/manifest/client.js
+++ b/app/manifest/client.js
@@ -1,8 +1,8 @@
 // This file is generated by Sapper — do not edit it!
 export const routes = [
 	{ pattern: /^\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_" */ '../../routes/index.html') },
-	{ pattern: /^\/4xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') },
-	{ pattern: /^\/5xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_5xx" */ '../../routes/5xx.html') },
+	{ error: '4xx', load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') },
+	{ error: '5xx', load: () => import(/* webpackChunkName: "_5xx" */ '../../routes/5xx.html') },
 	{ pattern: /^\/about\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "about" */ '../../routes/about.html') },
 	{ pattern: /^\/blog\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "blog" */ '../../routes/blog/index.html') },
 	{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), load: () => import(/* webpackChunkName: "blog_$slug$" */ '../../routes/blog/[slug].html') }
diff --git a/app/manifest/server.js b/app/manifest/server.js
index 6bc89c4..48f7bd9 100644
--- a/app/manifest/server.js
+++ b/app/manifest/server.js
@@ -10,8 +10,8 @@ import blog_$slug$ from '../../routes/blog/[slug].html';
 
 export const routes = [
 	{ id: '_', type: 'page', pattern: /^\/?$/, params: () => ({}), module: _ },
-	{ id: '_4xx', type: 'page', pattern: /^\/4xx\/?$/, params: () => ({}), module: _4xx },
-	{ id: '_5xx', type: 'page', pattern: /^\/5xx\/?$/, params: () => ({}), module: _5xx },
+	{ error: '4xx', module: _4xx },
+	{ error: '5xx', module: _5xx },
 	{ id: 'about', type: 'page', pattern: /^\/about\/?$/, params: () => ({}), module: about },
 	{ id: 'blog', type: 'page', pattern: /^\/blog\/?$/, params: () => ({}), module: blog },
 	{ id: 'api_blog_posts', type: 'route', pattern: /^\/api\/blog-posts\/?$/, params: () => ({}), module: api_blog_posts },
diff --git a/app/manifest/service-worker.js b/app/manifest/service-worker.js
index 0ea1a75..cb87744 100644
--- a/app/manifest/service-worker.js
+++ b/app/manifest/service-worker.js
@@ -1,5 +1,5 @@
 // This file is generated by Sapper — do not edit it!
-export const timestamp = 1518906946124;
+export const timestamp = 1518910653621;
 
 export const assets = [
 	"favicon.png",
@@ -11,22 +11,18 @@ export const assets = [
 ];
 
 export const shell = [
-	"/client/_.0.15d69aa40f5cf2c235b5.js",
-	"/client/blog.1.15d69aa40f5cf2c235b5.js",
-	"/client/blog_$slug$.2.15d69aa40f5cf2c235b5.js",
-	"/client/about.3.15d69aa40f5cf2c235b5.js",
-	"/client/_5xx.4.15d69aa40f5cf2c235b5.js",
-	"/client/_4xx.5.15d69aa40f5cf2c235b5.js",
-	"/client/6.6.15d69aa40f5cf2c235b5.js",
-	"/client/main.15d69aa40f5cf2c235b5.js",
-	"/client/0.b91f3b4b0888fc3dc282.hot-update.js",
-	"/client/b91f3b4b0888fc3dc282.hot-update.json"
+	"/client/_.0.6b48eb953c3d3763d72b.js",
+	"/client/blog.1.6b48eb953c3d3763d72b.js",
+	"/client/blog_$slug$.2.6b48eb953c3d3763d72b.js",
+	"/client/about.3.6b48eb953c3d3763d72b.js",
+	"/client/_5xx.4.6b48eb953c3d3763d72b.js",
+	"/client/_4xx.5.6b48eb953c3d3763d72b.js",
+	"/client/6.6.6b48eb953c3d3763d72b.js",
+	"/client/main.6b48eb953c3d3763d72b.js"
 ];
 
 export const routes = [
 	{ pattern: /^\/?$/ },
-	{ pattern: /^\/4xx\/?$/ },
-	{ pattern: /^\/5xx\/?$/ },
 	{ pattern: /^\/about\/?$/ },
 	{ pattern: /^\/blog\/?$/ },
 	{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/ }
diff --git a/app/server.js b/app/server.js
index 49743bc..0af7864 100644
--- a/app/server.js
+++ b/app/server.js
@@ -3,6 +3,7 @@ import express from 'express';
 import compression from 'compression';
 import sapper from 'sapper';
 import serve from 'serve-static';
+import fetch from 'node-fetch';
 import { routes } from './manifest/server.js';
 
 const app = express();
@@ -10,7 +11,6 @@ const app = express();
 const { PORT = 3000 } = process.env;
 
 // this allows us to do e.g. `fetch('/api/blog-posts')` on the server
-const fetch = require('node-fetch');
 global.fetch = (url, opts) => {
 	if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
 	return fetch(url, opts);
diff --git a/routes/4xx.html b/routes/4xx.html
index efe6e3b..0a98eb7 100644
--- a/routes/4xx.html
+++ b/routes/4xx.html
@@ -1 +1,43 @@
-TODO 4xx
\ No newline at end of file
+<:Head>
+	<title>Not found</title>
+</:Head>
+
+<Layout page='home'>
+	<h1>Not found</h1>
+
+	<p>Please check the URL</p>
+</Layout>
+
+<style>
+	h1, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script>
+	import Layout from './_components/Layout.html';
+
+	export default {
+		components: {
+			Layout
+		}
+	};
+</script>
diff --git a/routes/5xx.html b/routes/5xx.html
index 9391ebe..efcc337 100644
--- a/routes/5xx.html
+++ b/routes/5xx.html
@@ -1 +1,41 @@
-TODO 5xx
\ No newline at end of file
+<:Head>
+	<title>Internal server error</title>
+</:Head>
+
+<Layout page='home'>
+	<h1>Internal server error</h1>
+</Layout>
+
+<style>
+	h1, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script>
+	import Layout from './_components/Layout.html';
+
+	export default {
+		components: {
+			Layout
+		}
+	};
+</script>