diff --git a/templates/404.html b/templates/404.html
index a2b7278..0697a0e 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,17 +1,14 @@
 {% extends "base.html" %}
 
+{% import "macros.html" as macros %}
+
 {% block content %}
-    <div class="container text-center">
-        <h1 class="h1">Seite nicht gefunden</h1>
+    <div class="flex flex-col mx-auto text-center">
+        <h1>Page not found!</h1>
 
-        <img src="{{ get_url(path='images/404/bot.svg') | safe }}"
-             class="img-fluid"
-             width="300" />
+        <img class="mb-5 max-h-[50vh]"
+             src="{{ get_url(path='images/404/bot.svg') | safe }}" />
 
-        <div class="d-grid gap-2 pt-3">
-            <a class="btn btn-dark"
-               href="{{ get_url(path='/') | safe }}"
-               role="button">Zurück zur Startseite</a>
-        </div>
+        <div class="flex justify-center">{{ macros::btn(link=get_url(path='/') , text="Zurück zur Startseite") }}</div>
     </div>
 {% endblock %}
diff --git a/templates/macros.html b/templates/macros.html
new file mode 100644
index 0000000..c13e5e9
--- /dev/null
+++ b/templates/macros.html
@@ -0,0 +1,4 @@
+{% macro btn(link, text) %}
+    <a class="no-underline w-fit text-center my-1 px-4 py-2 text-white bg-green-700 rounded hover:scale-110 transition duration-500"
+       href="{{ link | safe }}">{{ text }}</a>
+{% endmacro %}