diff --git a/css/message-teaser.css b/css/message-teaser.css
new file mode 100644
index 0000000..3318d44
--- /dev/null
+++ b/css/message-teaser.css
@@ -0,0 +1,51 @@
+/**
+ * @file
+ * Stylesheet for inmail.
+ */
+.inmail--view-mode-teaser {
+  margin: 10px;
+}
+.inmail-message--body,
+.inmail-message--header {
+  display: flex;
+}
+.inmail-message--header-from,
+.inmail-message--header-to {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.inmail-message--header-cc,
+.inmail-message--body-plain {
+  display: inline-block;
+}
+.inmail-message--header-from {
+  margin: 0 1em 0 0;
+}
+.inmail-message--header-to {
+  margin: 0 1em 0 1em;
+}
+.inmail-message--header-cc {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-basis: auto;
+  margin-left: 1em;
+  color: #777;
+}
+.inmail-message--body-subject {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-basis: auto;
+    margin-right: 1em;
+}
+.inmail-message--body-plain {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-basis: 50%;
+  margin-left: 1em;
+  color: #777;
+  font-size: 88%;
+}
diff --git a/css/message.css b/css/message.css
index d905d25..08ddcfe 100644
--- a/css/message.css
+++ b/css/message.css
@@ -2,30 +2,26 @@
  * @file
  * Stylesheet for inmail.
  */
+.inmail--view-mode-full {
+    margin: 10px;
+}
 .inmail-message--header header {
     display: -webkit-flex;
     display: flex;
     flex-wrap: wrap;
 }
-
-.inmail-message--header-from,
-.inmail-message--header-to,
-.inmail-message--header-subject,
-.inmail-message--header-received-date {
-    margin: 10px;
-}
-
-.inmail-message--header-label {
+.inmail-message--header-label,
+.inmail-message--footer-label {
     font-weight: 700;
+    display: inline-block;
+    width: 100px;
 }
-
-.inmail-message--header-all-body{
-    font-family: monospace;
-    white-space: pre;
+.inmail-message--header,
+.inmail-message--body,
+.inmail-message--footer {
+    margin: 10px;
 }
-
-.inmail--view-mode-teaser .inmail-message--body-plain {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.inmail-message--header-all {
+    display: none;
 }
+
diff --git a/inmail.libraries.yml b/inmail.libraries.yml
index bc382ea..2d755d9 100644
--- a/inmail.libraries.yml
+++ b/inmail.libraries.yml
@@ -3,3 +3,9 @@ message:
   css:
     theme:
       css/message.css: {}
+
+message_teaser:
+  version: 1.x
+  css:
+    theme:
+      css/message-teaser.css: {}
diff --git a/templates/inmail-message.html.twig b/templates/inmail-message.html.twig
index c316276..861a249 100644
--- a/templates/inmail-message.html.twig
+++ b/templates/inmail-message.html.twig
@@ -19,71 +19,87 @@
  */
 #}
 
-{{ attach_library('inmail/message') }}
-
 {% if view_mode == 'teaser' %}
+    {{ attach_library('inmail/message_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>
+            <div class="inmail-message--header">
+                <div class="inmail-message--header-from">{{ message.from }}</div>
+                &gt;
+                {% 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>
         </header>
-        <div class="inmail-message--body-plain">{{ message.getPlainText() | slice(0, 1000) }}</div>
+        <div class="inmail-message--body">
+            {% if message.subject is not empty %}
+                <div class="inmail-message--body-subject">{{ message.subject }}</div>
+                |
+            {% endif %}
+            <div class="inmail-message--body-plain">{{ message.getPlainText() | slice(0, 1000) }}</div>
+        </div>
     </section>
 {% endif %}
 {% if view_mode == 'full' %}
+    {{ attach_library('inmail/message') }}
+
     <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 class="inmail-message--header">
+                <div class="inmail-message--header-from">
+                    <div class="inmail-message--header-label">From</div>
+                    {{ message.from }}
                 </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(', ') }}
+                {% 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>
-            {% 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>
         {# 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>
+                <div class="inmail-message--footer">
+                    <div class="inmail-message--footer-label">Attachments</div>
+                    <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>
+                </div>
             </footer>
         {% endif %}
     </section>