diff --git a/src/core/locale/en/LC_MESSAGES/django.po b/src/core/locale/en/LC_MESSAGES/django.po
index d415042cbe8c753fec3705d942da123539d03f66..204ae3184274a6c2afba4bb2ce7ba07230177541 100644
--- a/src/core/locale/en/LC_MESSAGES/django.po
+++ b/src/core/locale/en/LC_MESSAGES/django.po
@@ -18,6 +18,12 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
+msgid "messages_from_sender"
+msgstr "Message from"
+
+msgid "messages_was_sent"
+msgstr "sent"
+
 msgid "PlatformUser__favorite_event"
 msgstr "favorite event"
 
diff --git a/src/plainui/jinja2/plainui/components/form_elements.html b/src/plainui/jinja2/plainui/components/form_elements.html
index 7ef15fca543b5bc22d52fd93ac9902965923149c..54570bcc41916c9cd134b8d2325ef43a25fd1427 100644
--- a/src/plainui/jinja2/plainui/components/form_elements.html
+++ b/src/plainui/jinja2/plainui/components/form_elements.html
@@ -4,7 +4,7 @@
 {% macro input(form, name, type_) -%}
     {% set el = form[name] -%}
     <div class="row form-group">
-        <div class="col-sm-12 col-lg-4">
+        <div class="col-sm-12 col-lg-4 mb-2 mb-lg-0">
             <label
                 class="shadow-darkmorphism d-block font-headings p-3 text-center"
                 for="id_{{name}}"
@@ -44,7 +44,7 @@
 {% macro textarea(form, name) -%}
     {% set el = form[name] -%}
     <div class="row form-group">
-        <div class="col-sm-12 col-lg-4">
+        <div class="col-sm-12 col-lg-4 mb-2 mb-lg-0">
             <label
                 class="shadow-darkmorphism font-headings d-block p-3 text-center"
                 for="id_{{name}}"
@@ -74,7 +74,7 @@
 {% macro checkbox(form, name) -%}
     {% set el = form[name] -%}
     <div class="row form-group">
-        <div class="col-sm-12 col-lg-4">
+        <div class="col-sm-12 col-lg-4 mb-2 mb-lg-0">
             <p
                 class="shadow-darkmorphism d-block font-headings p-3 text-center mb-0"
                 for="id_{{name}}"
@@ -108,7 +108,7 @@
 {% macro select(form, name) -%}
     {% set el = form[name] -%}
     <div class="row form-group">
-        <div class="col-sm-12 col-lg-4">
+        <div class="col-sm-12 col-lg-4 mb-2 mb-lg-0">
             <label
                 for="id_{{name}}"
                 class="shadow-darkmorphism d-block font-headings p-3 text-center"
diff --git a/src/plainui/jinja2/plainui/components/title.html b/src/plainui/jinja2/plainui/components/title.html
index 8216bb5e5d9ece59e851a1b8fe14c5a2755537b8..afe065ad11633ed817a24a85639c0e0d1a7d132b 100644
--- a/src/plainui/jinja2/plainui/components/title.html
+++ b/src/plainui/jinja2/plainui/components/title.html
@@ -9,7 +9,7 @@
 {% macro title(title="", fav_id=false, fav_type=false, fav_is=false, sch_id=false, sch_is=false, share_url=false, stream_url=false, report_url=false, report_kind="url") -%}
     <div class="row w-100 my-11">
         <div class="col">
-            <h1 class="" title="{{ title }}">{{ title }}</h1>
+            <h1 class="mb-xl-0" title="{{ title }}">{{ title }}</h1>
         </div>
         {% if conf %}
         <div class="col-sm-auto text-righ align-self-center">
diff --git a/src/plainui/jinja2/plainui/header.html b/src/plainui/jinja2/plainui/header.html
index 078af6fd8b035f168d4ce5022cc1c39f0df51f10..a40d9450d57e4f21066ffabfc4e2d498f52cfe40 100644
--- a/src/plainui/jinja2/plainui/header.html
+++ b/src/plainui/jinja2/plainui/header.html
@@ -55,7 +55,7 @@
         <a class="btn btn-block rc3-header__additional-linkbox {{ 'btn-primary' if view_name == 'plainui:personal_message' else 'btn-secondary' }}" href="{{ url('plainui:personal_message', conf_slug=conf.slug) }}"  title="{{ _("Messages") }}">
             {{ _("Mess ages") -}}
             {% set num_unread = num_of_unread_messages(request) -%}
-            {% if num_unread %}<span class="rc3-header__additional-linkbox-badge bg-info badge badge-info border border-primary">{{num_unread}}</span>{% endif %}
+            {% if num_unread %}<span class="rc3-header__additional-linkbox-badge badge badge-info font-headings">{{num_unread}}</span>{% endif %}
         </a>
         <a class="btn rc3-header__additional-linkbox {{ 'btn-primary' if view_name == 'plainui:fahrplan' else 'btn-secondary' }}" href="{{ url('plainui:fahrplan', conf_slug=conf.slug) }}"  title="{{ _("Fahrplan") }}">
             {{ _("Fahr plan") }}
diff --git a/src/plainui/jinja2/plainui/personal_message_list.html b/src/plainui/jinja2/plainui/personal_message_list.html
index f1a697dadf7691f1e3ee70d07c375636f0d946ce..bb97eaf0324a5e923b2bc54355bd1a6f69a6bdcd 100644
--- a/src/plainui/jinja2/plainui/personal_message_list.html
+++ b/src/plainui/jinja2/plainui/personal_message_list.html
@@ -5,80 +5,102 @@
 {% block content %}
 {{ titleMacro.title(_("Personal Messages") ) }}
 
-<div class="mb-2">
-    <a role="button" class="btn btn-primary mb-1" href="{{ url('plainui:personal_message', conf_slug=conf.slug) }}">{{_("Inbox")}}</a>
-    <a role="button" class="btn btn-primary mb-1" href="{{ url('plainui:personal_message_outbox', conf_slug=conf.slug) }}">{{_("Outbox")}}</a>
-    <a role="button" class="btn btn-primary mb-1" href="{{ url('plainui:personal_message_send', conf_slug=conf.slug) }}">{{_("New PM")}}</a>
+<div class="border my-8 p-6 text-center">
+    <ul class="row mb-0 list-unstyled mw-664 mx-auto">
+        {% if sent_mode %}
+            <li class="col-12 col-sm-6 mb-3 mb-sm-0">
+                <a role="button" class="btn btn-block btn-lg btn-secondary" href="{{ url('plainui:personal_message', conf_slug=conf.slug) }}">{{_("Inbox")}}</a>
+            </li>
+        {% endif %}
+        {% if not sent_mode %}
+            <li class="col-12 col-sm-6 mb-3 mb-sm-0">
+                <a role="button" class="btn btn-block btn-lg btn-secondary" href="{{ url('plainui:personal_message_outbox', conf_slug=conf.slug) }}">{{_("Outbox")}}</a>
+            </li>
+        {% endif %}
+        <li class="col-12 col-sm-6">
+            <a role="button" class="btn btn-block btn-lg btn-primary" href="{{ url('plainui:personal_message_send', conf_slug=conf.slug) }}">{{_("New PM")}}</a>
+        </li>
+    </ul>
 </div>
 
-<div class="border border-tertiary p-6 text-light mx-0">
-    <h2 class="w-100 bg bg-info p-2 px-5 h3 text-white text-center">{% if not sent_mode %}{{ _("Received Messages") }} {% else %}{{ _("Sent Messages") }}{% endif %}</h2>
+<div class="border p-6 mx-0 mt-8 mb-11">
+    <h2 class="text-center bg-info p-3 text-white h3">{% if not sent_mode %}{{ _("Received Messages") }} {% else %}{{ _("Sent Messages") }}{% endif %}</h2>
     <form method="POST" action="{{ url('plainui:personal_message_delete', conf_slug=conf.slug) }}">
         {{ csrf_input }}
-        <table class="table">
-            <thead>
-            <tr>
-                <th scope="col">{% if not sent_mode %}{{ _("messages_from") }} {% else %}{{ _("messages_to") }}{% endif %}</th>
-                <th scope="col">{{ _("messages_subject") }}</th>
-                <th scope="col">{{ _("messages_date") }}</th>
-                <th scope="col"></th>
-            </tr>
-            </thead>
-            <tbody>
+        <p class="my-5 font-headings text-white text-right px-2">
+            {{ msgs | length }} {{ _("messages_x_of_n") }} {{ total }}
+        </p>
+        <ul class="list-unstyled mb-0">
+            {%- for msg in msgs %}
+            <li class="rc3-tile-message card mb-5">
+                <article class="row no-gutters flex-nowrap border border-plattform-dark bg-gradient-plattform-vertical">
+                        <figure class="rc3-tile-message__icon-col col mb-0">
+                            <a class="rc3-tile-message__icon-container text-white" href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">
+                                {% if not sent_mode %}
+                                    {% if msg.has_responded %}
+                                        <svg class="rc3-tile-message__icon-flag" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reply-fill" viewBox="0 0 16 16">
+                                            <title>{{_("messages_was_responded")}}</title>
+                                            <path transform="translate(16), scale(-1, 1)" d="M9.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L9.079 4.1A.716.716 0 0 0 8 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z"/>
+                                        </svg>
+                                    {% endif %}
+                                    {% if msg.was_read %}
+                                        <svg class="rc3-tile-message__icon" xmlns="http://www.w3.org/2000/svg" width="3.125rem" height="3.125rem" fill="currentColor" class="bi bi-envelope-open" viewBox="0 0 16 16">
+                                            <title>{{_("messages_was_read")}}</title>
+                                            <path d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.818l5.724 3.465L8 8.917l1.276.766L15 6.218V5.4a1 1 0 0 0-.53-.882l-6-3.2zM15 7.388l-4.754 2.877L15 13.117v-5.73zm-.035 6.874L8 10.083l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738zM1 13.117l4.754-2.852L1 7.387v5.73zM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765l6-3.2z"/>
+                                        </svg>
+                                    {% else %}
+                                        <svg class="rc3-tile-message__icon" xmlns="http://www.w3.org/2000/svg" width="3.125rem" height="3.125rem" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
+                                            <title>{{_("messages_is_new")}}</title>
+                                            <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
+                                        </svg>
+                                    {% endif %}
+                                {% else %}
+                                    <svg class="rc3-tile-message__icon" xmlns="http://www.w3.org/2000/svg" width="3.125rem" height="3.125rem" fill="currentColor" class="bi bi-mailbox" viewBox="0 0 16 16">
+                                        <title>{{_("messages_was_sent")}}</title>
+                                        <path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z"/>
+                                    </svg>
+                                {% endif %}
+                            </a>
+                        </figure>
+                    <section class="col pt-3 px-2">
+                        {% set recipient = msg.sender_name if not sent_mode else msg.recipient_name %}
+                        <a class="text-white" href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=recipient) }}">
+                            <h3 class="px-2 card-title h4 text-white">
+                                {{recipient}}
+                            </h3>
+                        </a>
 
-        {%- for msg in msgs %}
-        <tr>
-            <td>
-                {% if not sent_mode %}
-                    {% if msg.was_read %}
-                        <span class="ml-2" title="{{_("messages_was_read")}}">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-open" viewBox="0 0 16 16">
-                              <path d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.818l5.724 3.465L8 8.917l1.276.766L15 6.218V5.4a1 1 0 0 0-.53-.882l-6-3.2zM15 7.388l-4.754 2.877L15 13.117v-5.73zm-.035 6.874L8 10.083l-6.965 4.18A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738zM1 13.117l4.754-2.852L1 7.387v5.73zM7.059.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765l6-3.2z"/>
-                            </svg>
-                        </span>
-                    {% else %}
-                        <span class="ml-2" title="{{_("messages_is_new")}}">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
-                              <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
-                            </svg>
-                        </span>
-                    {% endif %}
-                    <a href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.sender_name) }}">
-                    {{msg.sender_name}}
-                    </a>
-                {% else %}
-                    <a href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.recipient_name) }}">
-                        {{msg.recipient_name}}
-                    </a>
-                {% endif %}
+                        <a class="text-white" href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">
+                            <p class="px-2">
+                                {{msg.subject}}
+                            </p>
+                        </a>
 
-            </td>
-            <td>
-                {% if not sent_mode %}
-                    {% if msg.has_responded %}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reply-fill" viewBox="0 0 16 16">
-                            <path transform="translate(16), scale(-1, 1)" d="M9.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L9.079 4.1A.716.716 0 0 0 8 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z"/>
-                        </svg>
-                    {% endif %}
-                {%  endif %}
-                <a href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">{{msg.subject}}</a></td>
-            <td>{{msg.timestamp | strftime}}</td></a>
-            <td>
-                {# {% not implemented? should color the flag button instead! if msg.flagged_for_abuse %}[{ _("messages_flagged") }]{% endif %} #}
-                {% if not sent_mode %}
-                    {{ fbtns.report(report_url=msg.id, kind="pn", title=_("report this message")) }}
-                {% endif %}
-                <button class="ml-2 btn-icon-big btn btn-danger" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
-                      <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
-                    </svg>
-                </button>
-            </td>
-        </tr>
-        {%- endfor %}
-            </tbody>
-        </table>
-        {{ msgs | length }} {{ _("messages_x_of_n") }} {{ total }}
+                        <footer class="card-footer d-flex justify-content-between align-items-center bg-transparent text-white font-headings fs-medium">
+                            <time datetime="{{ msg.timestamp }}">{{msg.timestamp | strftime}}</time>
+                            <div class="d-inline-flex">
+                                <a class="ml-2 btn-icon-big btn btn-secondary" title="{{_("read")}}" href="{{ url('plainui:personal_message_show', conf_slug=conf.slug, msg_id=msg.id) }}">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
+                                        <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
+                                    </svg>
+                                </a>
+                                <button class="ml-2 btn-icon-big btn btn-secondary" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                                    </svg>
+                                </button>
+                                {% if not sent_mode %}
+                                    {{ fbtns.report(report_url=msg.id, kind="pn", title=_("report this message")) }}
+                                {% endif %}
+                            </div>
+                        </footer>
+                    </section>
+                </article>
+            </li>
+            {%- endfor %}
+        </ul>
     </form>
 </div>
 {% endblock %}
diff --git a/src/plainui/jinja2/plainui/personal_message_send.html b/src/plainui/jinja2/plainui/personal_message_send.html
index 5c1980e5a6fad60bfa204894544404f0d7f51a01..3cf00a4efbc1b612eb5aadad00b1d17b19e28e0a 100644
--- a/src/plainui/jinja2/plainui/personal_message_send.html
+++ b/src/plainui/jinja2/plainui/personal_message_send.html
@@ -4,8 +4,11 @@
 {% block content %}
 
 {{ titleMacro.title(_("Send Personal Message")) }}
-<form class="border border-tertiary p-6 text-light mx-0" method="POST">
-    <h2 class="w-100 bg bg-info p-2 px-5 h3 text-white text-center">{{ _("new message") }}</h2>
+<form
+    method="POST"
+    class="border p-6 mx-auto mb-11{% if form.errors %} border-danger{% endif %}"
+>
+    <h2 class="text-center bg-info p-3 text-white h3">{{ _("new message") }}</h2>
     {{ csrf_input }}
 
     {{ form_elements.errors(form) }}
@@ -14,9 +17,9 @@
     {{ form_elements.text(form, 'subject') }}
     {{ form_elements.textarea(form, 'body') }}
 
-    <ul class="list-unstyled row justify-content-end ">
-        <li class="col-1 order-last">
-            <button type="submit" class="btn btn-primary order-last">{{ _("Send") }}</button>
+    <ul class="list-unstyled row row-cols-1 row-cols-lg-3 justify-content-end">
+        <li class="col">
+            <button type="submit" class="btn btn-xl btn-block btn-primary">{{ _("Send") }}</button>
         </li>
     </ul>
 </form>
diff --git a/src/plainui/jinja2/plainui/personal_message_show.html b/src/plainui/jinja2/plainui/personal_message_show.html
index 91a727451238b580a44af2a8c53a8c69a54a3704..cd7038280b3b481fa23d22e302c2f2da7ffa8e7d 100644
--- a/src/plainui/jinja2/plainui/personal_message_show.html
+++ b/src/plainui/jinja2/plainui/personal_message_show.html
@@ -4,29 +4,44 @@
 {% extends "plainui/base.html" %}
 {% block title %}{{conf.name}} - {{ _("Personal Message") }}{% endblock %}
 {% block content %}
-{{ titleMacro.title(_("Personal Messages"), report_url=msg.id, report_kind="pn") }}
 
-<div class="border border-tertiary p-6 text-light mx-0">
-    <h2 class="w-100 bg bg-info p-2 px-5 h3 text-white text-center">{{ msg.subject }}</h2>
-    <h6 class="card-subtitle mb-2 text-muted">{{ _("messages_from_short") }} {{ msg.sender.username }} {{ _("messages_to_short") }} {{ msg.recipient.username }} {{ _("messages_at") }} {{ msg.timestamp | strftime }}</h6>
-    {{ markdown(msg_body) }}
-    <ul class="mt-2 list-unstyled row justify-content-end ">
-        <li class="col-1">
-            <form method="POST" action="{{ url('plainui:personal_message_delete', conf_slug=conf.slug) }}">
-                <button class="ml-2 btn-icon-big btn btn-danger" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square-fill" viewBox="0 0 16 16">
-                      <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z"/>
-                    </svg>
-                </button>
-            </form>
-        </li>
-        {% if user.id == msg.recipient.id %}
-            <li class="col-1">
-                <a class="btn btn-primary" href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.sender.username) ~ '?in_reply_to=' ~ msg.id | urlencode ~ '&subject=AW: ' ~ msg.subject | truncate(100) | urlencode }}">
-                    {{_("Reply")}}
+<article class="mb-11">
+    {% set title = _("messages_from_sender") + " " + msg.sender.username %}
+    {{ titleMacro.title( title , report_url=msg.id, report_kind="pn") }}
+
+    <div class="border my-8 p-6 text-center">
+        <ul class="row mb-0 list-unstyled mw-664 mx-auto">
+            <li class="col-12 col-sm-4 mb-3 mb-sm-0">
+                <a class="btn btn-xl btn-block btn-secondary" href="{{ url('plainui:personal_message', conf_slug=conf.slug) }}">
+                    {{_("Messages")}}
                 </a>
             </li>
-        {% endif %}
-    </ul>
-</div>
+
+            <li class="col-12 col-sm-4 mb-3 mb-sm-0">
+                <form method="POST" action="{{ url('plainui:personal_message_delete', conf_slug=conf.slug) }}">
+                    <button class="btn btn-xl btn-block btn-secondary" type="submit" name="id" value="{{msg.id}}" title="{{ _("messages_delete") }}">
+                        {{ _("Delete") }}
+                    </button>
+                </form>
+            </li>
+
+            {% if user.id == msg.recipient.id %}
+                <li class="col-12 col-sm-4">
+                    <a class="btn btn-xl btn-block btn-primary" href="{{ url('plainui:personal_message_send_to', conf_slug=conf.slug, recipient=msg.sender.username) ~ '?in_reply_to=' ~ msg.id | urlencode ~ '&subject=AW: ' ~ msg.subject | truncate(100) | urlencode }}">
+                        {{_("Reply")}}
+                    </a>
+                </li>
+            {% endif %}
+        </ul>
+    </div>
+
+    <h2 class="d-flex flex-row flex-wrap mt-11">
+        {{ msg.subject }}
+        <time datetime="{{msg.timestamp}}" class="d-block font-sans-serif fs-medium pl-2 ml-auto align-self-center">
+            {{ msg.timestamp | strftime }}
+        </time>
+    </h2>
+
+    {{ markdown(msg_body) }}
+</article>
 {% endblock %}
diff --git a/src/plainui/jinja2/plainui/redeem_token.html b/src/plainui/jinja2/plainui/redeem_token.html
index 96cb168eafae02adbd40284a3b83f161faf2372b..c0de89b6c6d9b4028607d8b57f80e2c80d154a23 100644
--- a/src/plainui/jinja2/plainui/redeem_token.html
+++ b/src/plainui/jinja2/plainui/redeem_token.html
@@ -5,7 +5,7 @@
     {{ titleMacro.title(_("Redeem Token")) }}
 
     {% if step == 'authenticated' %}
-    <form class="border p-6 my-8 border-tertiary" method="POST" action="{{ url('plainui:redeem_token_loggedin', conf_slug=conf.slug) }}">
+    <form class="border p-6 my-8" method="POST" action="{{ url('plainui:redeem_token_loggedin', conf_slug=conf.slug) }}">
         <h2 class="text-center bg-info p-3 text-white h3">{{ _("You are Logged in as '%(user)s', do you want to join the Conference with this User?", user=user.username) }}</h2>
         {{ csrf_input }}
         <input type="hidden" name="token" value="{{ form['jwt'].value() }}">
diff --git a/src/plainui/jinja2/plainui/report_content.html b/src/plainui/jinja2/plainui/report_content.html
index 4a171fc05a56a8ba3f414cf2df98263f7fbcc4f4..0715219cf7eb1e59f48bdb11871a7c649d828488 100644
--- a/src/plainui/jinja2/plainui/report_content.html
+++ b/src/plainui/jinja2/plainui/report_content.html
@@ -5,7 +5,7 @@
 {% block content %}
     {{ titleMacro.title(_("Help, there is a Problem...")) }}
 
-    <form method="POST" id="report_content" class="border p-6 mt-11 mb-8{% if form.errors %} border-danger{% else %} border-tertiary{% endif %}">
+    <form method="POST" id="report_content" class="border p-6 mt-11 mb-8{% if form.errors %} border-danger{% endif %}">
         <h1 class="text-center bg-info p-3 text-white h3">{{_("Report Content")}}</h1>
 
         {{ csrf_input }}
diff --git a/src/plainui/locale/de/LC_MESSAGES/django.po b/src/plainui/locale/de/LC_MESSAGES/django.po
index f72e339edee1ed84586a4ee8865512a7e577c51b..02bf1e0b2830f65038c93cd8a37c54c8aa0ba5ca 100644
--- a/src/plainui/locale/de/LC_MESSAGES/django.po
+++ b/src/plainui/locale/de/LC_MESSAGES/django.po
@@ -411,6 +411,9 @@ msgstr "Löschen"
 msgid "messages_was_read"
 msgstr "gelesen"
 
+msgid "messages_was_sent"
+msgstr "gesendet"
+
 msgid "messages_x_of_n"
 msgstr "von"
 
@@ -426,6 +429,9 @@ msgstr "Abschicken"
 msgid "Personal Message"
 msgstr "Persönliche Nachricht"
 
+msgid "messages_from_sender"
+msgstr "Nachricht von"
+
 msgid "messages_from_short"
 msgstr "Von"
 
diff --git a/src/plainui/styles/components/_header.scss b/src/plainui/styles/components/_header.scss
index c1cdc10f5b4c8855473823e1b658a371cd2aa2f8..37baabc2018aa364d10cf79af60e9674e0496f1b 100644
--- a/src/plainui/styles/components/_header.scss
+++ b/src/plainui/styles/components/_header.scss
@@ -51,10 +51,14 @@
         }
 
         &-linkbox-badge {
-            position: absolute !important;
-            left: -0.4rem !important;
-            top: -0.4rem !important;
-            padding: 0.1rem 0.5rem !important;
+            position: absolute;
+            left: -0.4rem;
+            top: -0.4rem;
+            padding: 0.19rem 0.5rem;
+            background: $body-bg;
+            border: 1px solid $primary;
+            font-size: $small-font-size;
+            line-height: 1;
         }
 
         &-box-2x1 {
diff --git a/src/plainui/styles/components/_index.scss b/src/plainui/styles/components/_index.scss
index c4396267c3d62be3292f7927f5f618f1eaa2e1d8..6ff5732fe9841535ec435ad49c336e11c25317c4 100644
--- a/src/plainui/styles/components/_index.scss
+++ b/src/plainui/styles/components/_index.scss
@@ -7,4 +7,5 @@
 @import "syntaxhilite";
 @import "player";
 @import "tile-board";
+@import "tile-message";
 @import "slider";
diff --git a/src/plainui/styles/components/_tile-message.scss b/src/plainui/styles/components/_tile-message.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ac48988c09c959b5febba6086187202a05e76c24
--- /dev/null
+++ b/src/plainui/styles/components/_tile-message.scss
@@ -0,0 +1,40 @@
+.rc3-tile-message {
+    &__icon-col {
+        width: 9.375rem;
+        flex: 0 0 9.375rem;
+    }
+
+    &__icon-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: center;
+        justify-content: center;
+
+        margin-bottom: 0;
+        text-decoration: none;
+    }
+
+    &__icon {
+        &-flag {
+            margin-left: 2.5rem;
+        }
+    }
+
+    @include media-breakpoint-down('md') {
+        &__icon-col {
+            width: 5rem;
+            flex: 0 0 5rem;
+        }
+
+        &__icon {
+            max-width: 2.5rem;
+
+            &-flag {
+                margin-left: 1.25rem;
+            }
+        }
+    }
+}