diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index 5f1ce765..3740b277 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -7,3 +7,4 @@
 @import 'components/btns';
 @import 'components/links';
 @import 'components/input';
+@import 'components/alert';
diff --git a/frontend/scss/components/_alert.scss b/frontend/scss/components/_alert.scss
new file mode 100644
index 00000000..f4234052
--- /dev/null
+++ b/frontend/scss/components/_alert.scss
@@ -0,0 +1,9 @@
+.alert {
+  &-success {
+    @apply bg-[#15803d];
+  }
+
+  &-error {
+    @apply bg-[#f43f5e];
+  }
+}
diff --git a/templates/auth/login.html.tera b/templates/auth/login.html.tera
index 47c8857a..f16fe0cf 100644
--- a/templates/auth/login.html.tera
+++ b/templates/auth/login.html.tera
@@ -8,16 +8,7 @@
     </div>
 
     {% if flash %}
-      {% if flash.0 == "success" %}
-      <div class="bg-[#4ade80] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-      {% endif %}
-      {% if flash.0 == "error" %}
-      <div class="bg-[#f43f5e] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-      {% endif %}
+      {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
     {% endif %}
     <form class="mt-8 space-y-6" method="post" action="/auth">
       <input type="hidden" name="remember" value="true">
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 279506f5..1c5de4f0 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -34,3 +34,10 @@
     <input type="checkbox" id="{{ name }}{{ id }}" name="{{ name }}"  {% if checked %} checked {% endif %}  class="h-4 w-4 accent-primary-600 mr-2"/> {{ label }}
   </label>
 {% endmacro checkbox %}
+
+{% macro alert(message, type, class='') %}
+<div class="{{ class }} alert-{{ type }} text-white px-3 py-1 rounded-md text-center">
+  {{ message }}
+</div>
+{% endmacro alert %}
+
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 4c874782..b43a2ae5 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -5,16 +5,7 @@
 {% block content %}
 <div class="max-w-screen-xl w-full grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
   {% if flash %}
-    {% if flash.0 == "success" %}
-      <div class="sm:col-span-2 lg:col-span-3 bg-[#4ade80] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-    {% endif %}
-    {% if flash.0 == "error" %}
-      <div class="sm:col-span-2 lg:col-span-3 bg-[#f43f5e] text-white px-3 py-1 rounded-md text-center">
-        {{ flash.1 }}
-      </div>
-    {% endif %}
+    {{ macros::alert(message=flash.1, type=flash.0, class="sm:col-span-2 lg:col-span-3") }}
   {% endif %}
 
   <h1 class="h1 sm:col-span-2 lg:col-span-3">Ausfahrten</h1>