diff --git a/lib/decentralised_book_index_web/controllers/error_html.ex b/lib/decentralised_book_index_web/controllers/error_html.ex
index 1692c35..a0eb79f 100644
--- a/lib/decentralised_book_index_web/controllers/error_html.ex
+++ b/lib/decentralised_book_index_web/controllers/error_html.ex
@@ -13,7 +13,7 @@ defmodule DecentralisedBookIndexWeb.ErrorHTML do
   #   * lib/decentralised_book_index_web/controllers/error_html/404.html.heex
   #   * lib/decentralised_book_index_web/controllers/error_html/500.html.heex
   #
-  # embed_templates "error_html/*"
+  embed_templates "error_html/*"
 
   # The default is to render a plain text page based on
   # the template name. For example, "404.html" becomes
diff --git a/lib/decentralised_book_index_web/controllers/error_html/404.html.heex b/lib/decentralised_book_index_web/controllers/error_html/404.html.heex
new file mode 100644
index 0000000..cf78bfc
--- /dev/null
+++ b/lib/decentralised_book_index_web/controllers/error_html/404.html.heex
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" class="[scrollbar-gutter:stable]">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title default="DecentralisedBookIndex" suffix=" · Page not found">
+      {assigns[:page_title]}
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+  </head>
+  <body class="bg-white dark:bg-gray-900">
+    <header>
+      <.partial_navbar page_title="404" current_user={assigns[:current_user]} />
+    </header>
+
+    <main class="px-4 pt-20 pb-2 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-4xl">
+        <.flash_group flash={@flash} />
+
+        <section class="bg-white dark:bg-gray-900">
+          <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+            <div class="mx-auto max-w-screen-sm text-center">
+              <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-blue-600 dark:text-blue-500">
+                404
+              </h1>
+              <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+                Something's missing.
+              </p>
+              <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+                Sorry, we can't find that page.
+              </p>
+              <a
+                href="/books"
+                class="inline-flex text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4"
+              >
+                Go to books
+              </a>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <.partial_footer />
+  </body>
+</html>
diff --git a/lib/decentralised_book_index_web/controllers/error_html/500.html.heex b/lib/decentralised_book_index_web/controllers/error_html/500.html.heex
new file mode 100644
index 0000000..cac21b2
--- /dev/null
+++ b/lib/decentralised_book_index_web/controllers/error_html/500.html.heex
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en" class="[scrollbar-gutter:stable]">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="csrf-token" content={get_csrf_token()} />
+    <.live_title default="DecentralisedBookIndex" suffix=" · Something went wrong">
+      {assigns[:page_title]}
+    </.live_title>
+    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
+    </script>
+  </head>
+  <body class="bg-white dark:bg-gray-900">
+    <header>
+      <.partial_navbar page_title="505" current_user={assigns[:current_user]} />
+    </header>
+
+    <main class="px-4 pt-20 pb-2 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-4xl">
+        <.flash_group flash={@flash} />
+
+        <section class="bg-white dark:bg-gray-900">
+          <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+            <div class="mx-auto max-w-screen-sm text-center">
+              <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-blue-600 dark:text-blue-500">
+                500
+              </h1>
+              <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+                Something's went wrong.
+              </p>
+              <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+                Try to refresh the page. Feel free to contact us if the problem persists.
+              </p>
+              <a
+                href="/books"
+                class="inline-flex text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4"
+              >
+                Go to books
+              </a>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <.partial_footer />
+  </body>
+</html>
