diff --git a/nummi/main/static/main/css/main.css b/nummi/main/static/main/css/main.css
index 6aa5a99..8930bbd 100644
--- a/nummi/main/static/main/css/main.css
+++ b/nummi/main/static/main/css/main.css
@@ -194,3 +194,25 @@ main h2.new {
 p {
   margin: 0.5em 0;
 }
+
+ul.messages {
+  font-weight: 550;
+  list-style-type: none;
+  margin: 0;
+  background: var(--bg-01);
+  padding: 0;
+}
+ul.messages li {
+  padding: calc(var(--gap) / 2) var(--gap);
+  border-left: var(--border) solid var(--gray);
+}
+
+ul.messages li.msg-level-25 {
+  border-left-color: var(--green-1);
+}
+ul.messages li.msg-level-30 {
+  border-left-color: var(--red-1);
+}
+ul.messages li.msg-level-40 {
+  border-left-color: var(--red);
+}
diff --git a/nummi/main/templates/main/base.html b/nummi/main/templates/main/base.html
index 61de121..3b3d2aa 100644
--- a/nummi/main/templates/main/base.html
+++ b/nummi/main/templates/main/base.html
@@ -89,8 +89,8 @@
         {% endblock %}
         <main id="main">
             {% if messages %}
-                <ul>
-                    {% for message in messages %}<li>{{ message }}</li>{% endfor %}
+                <ul class="messages">
+                    {% for message in messages %}<li class="msg-level-{{ message.level }}">{{ message }}</li>{% endfor %}
                 </ul>
             {% endif %}
             {% block body %}{% endblock %}