diff --git a/css/message.css b/css/message.css
index d905d25..5e21241 100644
--- a/css/message.css
+++ b/css/message.css
@@ -1,31 +1,81 @@
 /**
- * @file
- * Stylesheet for inmail.
- */
-.inmail-message--header header {
-    display: -webkit-flex;
-    display: flex;
-    flex-wrap: wrap;
-}
+* @file
+* Stylesheet for inmail.
+*/
 
-.inmail-message--header-from,
-.inmail-message--header-to,
-.inmail-message--header-subject,
-.inmail-message--header-received-date {
-    margin: 10px;
-}
+/* General rules */
 
-.inmail-message--header-label {
-    font-weight: 700;
+.inmail-message {
+  margin: 10px;
 }
 
-.inmail-message--header-all-body{
-    font-family: monospace;
-    white-space: pre;
+/* Full view */
+
+.inmail-message--full .inmail-message__header .inmail-message__element {
+  display: flex;
+}
+.inmail-message--full .inmail-message__element label {
+  padding: 0;
+  font-weight: bold;
+  width: 100px;
+}
+.inmail-message--full .inmail-message__header__all {
+  display: none;
+}
+.inmail-message--full .inmail-message__header,
+.inmail-message--full .inmail-message__body,
+.inmail-message--full .inmail-message__footer {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
-.inmail--view-mode-teaser .inmail-message--body-plain {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+/* Teaser view */
+
+.inmail-message--teaser .inmail-message__header,
+.inmail-message--teaser .inmail-message__body {
+  display: -webkit-flex;
+  display: flex;
+}
+.inmail-message--teaser label {
+  display: none;
+}
+.inmail-message--teaser .inmail-message__element {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.inmail-message--teaser .inmail-message__header__to:before {
+  content: '>';
+  margin: 0 1em 0 1em;
+}
+.inmail-message--teaser .inmail-message__header__cc {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-basis: auto;
+  color: #777;
+}
+.inmail-message--teaser .inmail-message__header__cc:before {
+  content: '|';
+  margin: 0 1em 0 1em;
+}
+.inmail-message--teaser .inmail-message__header__received-date,
+.inmail-message--teaser .inmail-message__header__subject,
+.inmail-message--teaser .inmail-message__header__all {
+  display: none;
+}
+.inmail-message--teaser .inmail-message__body__subject {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-basis: auto;
+  margin-right: 1em;
+}
+.inmail-message--teaser .inmail-message__body__content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-basis: 70%;
+  color: #777;
+  font-size: 88%;
 }
diff --git a/src/Tests/IntegrationTest.php b/src/Tests/IntegrationTest.php
index aaad9e7..2fda2e7 100644
--- a/src/Tests/IntegrationTest.php
+++ b/src/Tests/IntegrationTest.php
@@ -83,7 +83,6 @@ class IntegrationTest extends WebTestBase {
     $this->assertRaw(htmlspecialchars($message->getTo()[0]));
     $this->assertRaw(htmlspecialchars($message->getCc()[0]));
     $this->assertRaw(htmlspecialchars($message->getSubject()));
-    $this->assertRaw(htmlspecialchars($message->getReceivedDate()));
     $this->assertText(htmlspecialchars($message->getPlainText(), ENT_QUOTES, 'UTF-8'));
 
     // Test "full" view mode of Inmail message element.
diff --git a/templates/inmail-message.html.twig b/templates/inmail-message.html.twig
index c316276..bf833ef 100644
--- a/templates/inmail-message.html.twig
+++ b/templates/inmail-message.html.twig
@@ -21,70 +21,65 @@
 
 {{ attach_library('inmail/message') }}
 
-{% if view_mode == 'teaser' %}
-    <section class="inmail-message inmail--view-mode-teaser">
-        <header>
-            <div class="inmail-message--header-from">{{ message.from }}</div>
-            {% if message.getTo is not empty %}
-                <div class="inmail-message--header-to">{{ message.getTo | join(', ') }}</div>
-            {% endif %}
-            {% if message.getCc is not empty %}
-                <div class="inmail-message--header-cc">{{ message.getCc | join(', ') }}</div>
-            {% endif %}
-            <div class="inmail-message--header-subject">{{ message.subject }}</div>
-            <div class="inmail-message--header-received-date">{{ message.getReceivedDate() }}</div>
-        </header>
-        <div class="inmail-message--body-plain">{{ message.getPlainText() | slice(0, 1000) }}</div>
-    </section>
-{% endif %}
-{% if view_mode == 'full' %}
-    <section class="inmail-message inmail--view-mode-full">
-        <header>
-            <div class="inmail-message--header-from">
-                <div class="inmail-message--header-label">From</div>
-                {{ message.from }}
-            </div>
-            {% if message.getTo is not empty %}
-                <div class="inmail-message--header-to">
-                    <div class="inmail-message--header-label">To</div>
-                    {{ message.getTo | join(', ') }}
-                </div>
-            {% endif %}
-            {% if message.getCc is not empty %}
-                <div class="inmail-message--header-cc">
-                    <div class="inmail-message--header-label">CC</div>
-                    {{ message.getCc | join(', ') }}
-                </div>
-            {% endif %}
-            <div class="inmail-message--header-received-date">
-                <div class="inmail-message--header-label">Received</div>
-                {{ message.getReceivedDate() }}
-            </div>
-            <div class="inmail-message--header-subject">
-                <div class="inmail-message--header-label">Subject</div>
-                {{ message.subject }}
-            </div>
-            <div class="inmail-message--header-all">
-                <div class="inmail-message--header-label">All Headers</div>
-                {{ message.header.toString() }}
-            </div>
-        </header>
+<section class="inmail-message inmail-message--{{ view_mode }}">
+  <header class="inmail-message__header">
+    <div class="inmail-message__element inmail-message__header__from">
+      <label>From</label>
+      {{ message.from }}
+    </div>
+    {% if message.getTo is not empty %}
+      <div class="inmail-message__element inmail-message__header__to">
+        <label>To</label>
+        {{ message.getTo | join(', ') }}
+      </div>
+    {% endif %}
+    {% if message.getCc is not empty %}
+      <div class="inmail-message__element inmail-message__header__cc">
+        <label>CC</label>
+        {{ message.getCc | join(', ') }}
+      </div>
+    {% endif %}
+    <div class="inmail-message__element inmail-message__header__received-date">
+      <label>Received</label>
+      {{ message.getReceivedDate() }}
+    </div>
+    <div class="inmail-message__element inmail-message__header__subject">
+      <label>Subject</label>
+      {{ message.subject }}
+    </div>
+    <div class="inmail-message__element inmail-message__header__all">
+      <label>All Headers</label>
+      {{ message.header.toString() }}
+    </div>
+  </header>
+  <div class="inmail-message__body">
+    {% if view_mode == 'teaser' %}
+      <div class="inmail-message__element inmail-message__body__subject">{{ message.subject }}</div>
+    {% endif %}
+    <div class="inmail-message__element inmail-message__body__content">
+      {% if view_mode == 'teaser' %}
+        {{ message.getPlainText() | slice(0, 1000) }}
+      {% else %}
         {# Use getPlainText() after https://www.drupal.org/node/2405069. #}
-        <div class="inmail-message--body">{{ message.getDecodedBody() }}</div>
-        {% if attachments %}
-            <footer>
-                <ul>
-                {% for attachment in attachments %}
-                    <li>
-                        {% if attachment.url %}
-                            <a href="{{ attachment.url }}" title="{{ attachment.filename }}" target="_blank">{{ attachment.filename }}</a> ({{ attachment.filesize }})
-                        {% else %}
-                            {{ attachment.filename }} ({{ attachment.filesize }})
-                        {% endif %}
-                    </li>
-                {% endfor %}
-                </ul>
-            </footer>
-        {% endif %}
-    </section>
-{% endif %}
+        {{ message.getDecodedBody() }}
+      {% endif %}
+    </div>
+  </div>
+
+  {% if attachments and view_mode == 'full' %}
+    <footer class="inmail-message__footer">
+      <label>Attachments</label>
+      <ul>
+        {% for attachment in attachments %}
+          <li>
+            {% if attachment.url %}
+              <a href="{{ attachment.url }}" title="{{ attachment.filename }}" target="_blank">{{ attachment.filename }}</a> ({{ attachment.filesize }})
+            {% else %}
+              {{ attachment.filename }} ({{ attachment.filesize }})
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </footer>
+  {% endif %}
+</section>