diff --git a/templates/400.html b/templates/400.html
index b4c0319..b8b20c9 100644
--- a/templates/400.html
+++ b/templates/400.html
@@ -1,70 +1,5 @@
-{% load static %}
-
-<!DOCTYPE html>
-<style>
-  @font-face {
-    font-family: "Press Start 2P";
-    src: url("{% static fonts/pressstart2p-regular-webfont.woff2 %}") format("woff2"),
-      url("{% static fonts/pressstart2p-regular-webfont.woff %}") format("woff");
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  :root {
-    --color: #54fe55;
-    --glowSize: 10px;
-  }
-
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }
-
-  * {
-    font-family: "Press Start 2P", cursive;
-    box-sizing: border-box;
-  }
-  #app {
-    padding: 1rem;
-    background: black;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    color: var(--color);
-    text-shadow: 0px 0px var(--glowSize);
-    font-size: 6rem;
-    flex-direction: column;
-    .txt {
-      font-size: 1.8rem;
-    }
-  }
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-    49% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .blink {
-    animation-name: blink;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-  }
-</style>
-<html lang="en">
-  <div id="app">
-    <div>400</div>
-    <div class="txt">Invalid request<span class="blink">_</span></div>
-  </div>
-</html>
+{% extends "error_template.html" %}
+{% block content %}
+<div>400</div>
+<div class="txt">Invalid request<span class="blink">_</span></div>
+{% endblock %}
diff --git a/templates/403.html b/templates/403.html
index e5afaf1..e308274 100644
--- a/templates/403.html
+++ b/templates/403.html
@@ -1,75 +1,7 @@
-{% load static %}
+{% extends "error_template.html" %}
 
-<!DOCTYPE html>
-<style>
-  @font-face {
-    font-family: "Press Start 2P";
-    src: url("{% static fonts/pressstart2p-regular-webfont.woff2 %}") format("woff2"),
-      url("{% static fonts/pressstart2p-regular-webfont.woff %}") format("woff");
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  :root {
-    --color: #54fe55;
-    --glowSize: 10px;
-  }
-
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }
-
-  * {
-    font-family: "Press Start 2P", cursive;
-    box-sizing: border-box;
-  }
-  #app {
-    padding: 1rem;
-    background: black;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    color: var(--color);
-    text-shadow: 0px 0px var(--glowSize);
-    font-size: 6rem;
-    flex-direction: column;
-    .txt {
-      font-size: 1.8rem;
-    }
-  }
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-    49% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .blink {
-    animation-name: blink;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-  }
-
-  a {
-    font-size: 4rem;
-  }
-</style>
-<html lang="en">
-  <div id="app">
-    <div>403</div>
-    <div class="txt">Forbidden<span class="blink">_</span></div>
-    <div><a href="/admin/login">Login</a></div>
-  </div>
-</html>
+{% block content %}
+<div>403</div>
+<div class="txt">Forbidden<span class="blink">_</span></div>
+<div><a href="/admin/login">Login</a></div>
+{% endblock %}
diff --git a/templates/404.html b/templates/404.html
index b156143..b117208 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,68 +1,8 @@
-<!DOCTYPE html>
-<style>
-  @font-face {
-    font-family: "Press Start 2P";
-    src: url("{% static fonts/pressstart2p-regular-webfont.woff2 %}") format("woff2"),
-      url("{% static fonts/pressstart2p-regular-webfont.woff %}") format("woff");
-    font-weight: normal;
-    font-style: normal;
-  }
+{% extends "error_template.html" %}
 
-  :root {
-    --color: #54fe55;
-    --glowSize: 10px;
-  }
+{% block content %}
+<div>404</div>
+<div class="txt">Not found<span class="blink">_</span></div>
+{% endblock %}
 
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }
 
-  * {
-    font-family: "Press Start 2P", cursive;
-    box-sizing: border-box;
-  }
-  #app {
-    padding: 1rem;
-    background: black;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    color: var(--color);
-    text-shadow: 0px 0px var(--glowSize);
-    font-size: 6rem;
-    flex-direction: column;
-    .txt {
-      font-size: 1.8rem;
-    }
-  }
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-    49% {
-      opacity: 0;
-    }
-    50% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .blink {
-    animation-name: blink;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-  }
-</style>
-<html lang="en">
-  <div id="app">
-    <div>404</div>
-    <div class="txt">Not found<span class="blink">_</span></div>
-  </div>
-</html>
diff --git a/templates/500.html b/templates/500.html
index 7dc6b35..d3994cb 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -1,77 +1,8 @@
-{% load static %}
+{% extends "error_template.html" %}
 
-<!DOCTYPE html>
-<style>
-  @font-face {
-    font-family: "Press Start 2P";
-    src: url("{% static fonts/pressstart2p-regular-webfont.woff2 %}") format("woff2"),
-      url("{% static fonts/pressstart2p-regular-webfont.woff %}") format("woff");
-    font-weight: normal;
-    font-style: normal;
-  }
-
-  :root {
-    --color: #54fe55;
-    --glowSize: 10px;
-  }
-
-  html,
-  body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-  }
-
-  * {
-    font-family: "Press Start 2P", cursive;
-    box-sizing: border-box;
-  }
-
-  #app {
-    padding: 1rem;
-    background: black;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    align-items: center;
-    color: var(--color);
-    text-shadow: 0px 0px var(--glowSize);
-    font-size: 6rem;
-    flex-direction: column;
-
-    .txt {
-      font-size: 1.8rem;
-    }
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 0;
-    }
-
-    49% {
-      opacity: 0;
-    }
-
-    50% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .blink {
-    animation-name: blink;
-    animation-duration: 1s;
-    animation-iteration-count: infinite;
-  }
-</style>
-<html lang="en">
-<div id="app">
+{% block content %}
   <div>500</div>
   <div class="txt">Something went wrong...<span class="blink">_</span></div>
-</div>
+{% endblock %}
+
 
-</html>
diff --git a/templates/error_template.html b/templates/error_template.html
new file mode 100644
index 0000000..44d3aea
--- /dev/null
+++ b/templates/error_template.html
@@ -0,0 +1,81 @@
+{% load static %}
+
+<!DOCTYPE html>
+<style>
+  @font-face {
+    font-family: "Press Start 2P";
+    src: url("{% static 'fonts/pressstart2p-regular-webfont.woff2' %}")
+        format("woff2"),
+      url("{% static 'fonts/pressstart2p-regular-webfont.woff' %}") format("woff");
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  :root {
+    --color: #54fe55;
+    --glowSize: 10px;
+  }
+
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+
+  * {
+    font-family: "Press Start 2P", cursive;
+    box-sizing: border-box;
+  }
+
+  #app {
+    padding: 1rem;
+    background: black;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    color: var(--color);
+    text-shadow: 0px 0px var(--glowSize);
+    font-size: 6rem;
+    flex-direction: column;
+
+    .txt {
+      font-size: 1.8rem;
+    }
+  }
+
+  @keyframes blink {
+    0% {
+      opacity: 0;
+    }
+
+    49% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .blink {
+    animation-name: blink;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+</style>
+<html lang="en">
+  <div id="app">
+    {% block content %}
+    <div>MISSING_ERROR_CODE</div>
+    <div class="txt">
+      MISSING ERROR DESCRIPTION <span class="blink">_</span>
+    </div>
+    {% endblock %}
+  </div>
+</html>
