diff --git a/frontend/src/main.less b/frontend/src/main.less
index a28a9902d019e90964d806ab755ecb322e06ad10..56468733ef5fce78e6445e901caaf24e5691c9d4 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -297,3 +297,39 @@ main {
 		display: none;
 	}
 }
+
+.flash {
+	border: 1px solid transparent;
+	border-radius: 4px;
+	padding: 0.5rem 1rem;
+
+	position: relative;
+
+	.flash-background {
+		opacity: 0.5;
+		z-index: -1;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	&.flash-error {
+		border-color: red;
+		.flash-background {
+			background-color: red;
+		}
+	}
+
+	&.flash-message {
+		border-color: var(--accent2);
+		.flash-background {
+			background-color: var(--accent2);
+		}
+	}
+
+	& > div {
+		opacity: 1;
+	}
+}
diff --git a/schilder2000/templates/_base.html.j2 b/schilder2000/templates/_base.html.j2
index 70954c51f7adc66b1e4fb92e0a4e25565903952a..6e6816345ce79a21870d967f99181e60fceffb1c 100644
--- a/schilder2000/templates/_base.html.j2
+++ b/schilder2000/templates/_base.html.j2
@@ -20,6 +20,17 @@
 	{%- endif -%}
 {%- endmacro -%}
 
+{%- macro flashes() -%}
+	{%- with messages = get_flashed_messages(with_categories=true) -%}
+		{%- for category, m in messages -%}
+			<div class="flash flash-{{ category }}">
+				<div>{{ m }}</div>
+				<div class="flash-background"></div>
+			</div>
+		{%- endfor -%}
+	{%- endwith -%}
+{%- endmacro -%}
+
 <!DOCTYPE HTML>
 <html lang="{{ lang|default('de') }}">
 	<head>
@@ -55,6 +66,10 @@
 			{%- endblock nav -%}
 
 			<main>
+				<div class="flashes">
+					{{ flashes() }}
+				</div>
+
 				{%- block main -%}
 				{%- endblock main -%}
 			</main>
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index d4bfa058320bf36d6abc886a3da7e139f28c468b..1b256f4ee465e90c5ab2eede3da0bd9f0d7d4d2d 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -10,18 +10,6 @@
 
 {% block main -%}
 	<div class="section-container">
-		<div class="section">
-			{%- with messages = get_flashed_messages() -%}
-				{%- if messages -%}
-					<ul class="flashes">
-						{%- for m in messages -%}
-							<li>{{ m }}</li>
-						{%- endfor -%}
-					</ul>
-				{%- endif -%}
-			{%- endwith -%}
-		</div>
-
 		<div class="section">
 			<form method="post" action="">
 				{{ form.csrf_token }}