diff --git a/app/assets/images/pictograms/check-circle-outline.svg b/app/assets/images/pictograms/check-circle-outline.svg
new file mode 100644
index 0000000..52ebeb3
--- /dev/null
+++ b/app/assets/images/pictograms/check-circle-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>check-circle-outline</title><g fill="white"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></g></svg>
diff --git a/app/assets/images/pictograms/information-slab-circle-outline.svg b/app/assets/images/pictograms/information-slab-circle-outline.svg
new file mode 100644
index 0000000..e675a8d
--- /dev/null
+++ b/app/assets/images/pictograms/information-slab-circle-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>information-slab-circle-outline</title><g fill="white"><path d="M11 7V9H13V7H11M14 17V15H13V11H10V13H11V15H10V17H14M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12M20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12Z" /></g></svg>
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index cd7132b..a96e781 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -18,10 +18,15 @@
   font-family: system-ui;
 }
 
-.app-menu {
-  height: 2.1em;
+body {
+  margin: 0 0.5em;
 }
-.app-menu a {
+
+.application-menu {
+  height: 2.1em;
+  margin: 0.5em 0;
+}
+.application-menu a {
   border: 0.1em solid;
   border-color: #a0a0a0;
   border-radius: 0.2em;
@@ -31,7 +36,7 @@
   font-weight: bold;
   padding: 0.6em;
 }
-.app-menu a:hover {
+.application-menu a:hover {
   background-color: #009ade;
   border-color: #009ade;
   color: white;
@@ -42,3 +47,49 @@
 a:not(:hover) {
   text-decoration: none;
 }
+
+.flashes {
+  height: 2.1em;
+}
+.flash {
+  align-items: center;
+  border-radius: 0.2em;
+  color: white;
+  display: flex;
+  font-size: 1.0em;
+}
+.flash.alert:before {
+  content: url('pictograms/check-circle-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
+}
+.flash.alert {
+  border-color: #ff1f5b;
+  background-color: #ff1f5b;
+}
+.flash.notice:before {
+  content: url('pictograms/information-slab-circle-outline.svg');
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
+}
+.flash.notice {
+  border-color: #00cd6c;
+  background-color: #00cd6c;
+}
+.flash button {
+  background-color: inherit;
+  border: inherit;
+  border-radius: inherit;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1.4em;
+  font-weight: bold;
+  margin-left:auto;
+  opacity: 0.6;
+  padding: 0.1em 0.2em;
+}
+.flash button:hover {
+  opacity: 1;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 26fa10e..3c51b90 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -11,19 +11,21 @@
   </head>
 
   <body>
-    <div class="app-menu">
+    <div class="application-menu">
       <%= link_to_if user_signed_in?, t(:sign_out), destroy_user_session_path,
-                     data: { turbo_method: :delete }  do
-            link_to t(:sign_in), new_user_session_path
-          end %>
+                       data: { turbo_method: :delete } do %>
+        <%= link_to t(:sign_in), new_user_session_path %>
+      <% end %>
     </div>
 
-    <% if flash[:notice] %>
-      <div style="border: green"><%= flash[:notice] %></div>
-    <% end %>
-    <% if flash[:alert] %>
-      <div style="border: red"><%= flash[:alert] %></div>
-    <% end %>
+    <div class="flashes">
+      <% flash.each do |entry, message| %>
+        <div class="flash <%= entry %>">
+          <div><%= message %></div>
+          <button onclick="this.parentElement.style.display='none';">&times;</button>
+        </div>
+      <% end %>
+    </div>
 
     <%= yield %>
   </body>
