diff --git a/css/message.css b/css/message.css
index 5e21241..1b9a89a 100644
--- a/css/message.css
+++ b/css/message.css
@@ -19,9 +19,23 @@
   font-weight: bold;
   width: 100px;
 }
-.inmail-message--full .inmail-message__header__all {
+.inmail-message--full .inmail-message__header .inmail-message__header__all {
+  display: block;
+}
+.inmail-message--full .inmail-message__header__all.show-less {
   display: none;
 }
+.inmail-message__more_link {
+  float: right;
+}
+.inmail-message--full .inmail-message__more_link.collapsed:after {
+  content: url(/core/misc/menu-collapsed-rtl.png);
+  padding: 10px;
+}
+.inmail-message--full .inmail-message__more_link.expanded:after {
+  content: url(/core/misc/menu-expanded.png);
+  padding: 10px;
+}
 .inmail-message--full .inmail-message__header,
 .inmail-message--full .inmail-message__body,
 .inmail-message--full .inmail-message__footer {
diff --git a/inmail.libraries.yml b/inmail.libraries.yml
index 95248f4..be98bb5 100644
--- a/inmail.libraries.yml
+++ b/inmail.libraries.yml
@@ -4,6 +4,13 @@ message:
     theme:
       css/message.css: {}
 
+inmail.message:
+  version: 1.x
+  js:
+    js/inmail.js: {}
+  dependencies:
+    - core/jquery.once
+
 inmail.admin:
   version: 1.x
   css:
diff --git a/js/inmail.js b/js/inmail.js
new file mode 100644
index 0000000..3c63afc
--- /dev/null
+++ b/js/inmail.js
@@ -0,0 +1,34 @@
+(function ($, Drupal, drupalSettings) {
+  /**
+   * For all header tag, add more/less UI logic.
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.inmailAllHeaders = {
+    attach: function (context, settings) {
+      $('.inmail-message__header', context).once('inmail-message').each(function () {
+        var $this = $(this);
+        var $thisMsg = $this.find('.inmail-message__header__all');
+        $thisMsg.addClass('show-less');
+
+        // Create a more/less link.
+        var $link = $('<a href="#" class="inmail-message__more_link collapsed">' + Drupal.t('Expand header') + '</a>');
+        $link.click(function () {
+          if ($thisMsg.hasClass('show-less')) {
+            $thisMsg.removeClass('show-less');
+            $link.removeClass('collapsed');
+            $link.addClass('expanded');
+            $link.text(Drupal.t('Hide header'));
+          }
+          else {
+            $thisMsg.addClass('show-less');
+            $link.removeClass('expanded');
+            $link.addClass('collapsed');
+            $link.text(Drupal.t('Expand header'));
+          }
+        });
+        $link.insertBefore($thisMsg);
+      });
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
diff --git a/templates/inmail-message.html.twig b/templates/inmail-message.html.twig
index 12bb9e9..72e551b 100644
--- a/templates/inmail-message.html.twig
+++ b/templates/inmail-message.html.twig
@@ -21,6 +21,10 @@
 
 {{ attach_library('inmail/message') }}
 
+{% if view_mode == 'full' %}
+  {{ attach_library('inmail/inmail.message') }}
+{% endif %}
+
 <section class="inmail-message inmail-message--{{ view_mode }}">
   <header class="inmail-message__header">
     <div class="inmail-message__element inmail-message__header__from">
@@ -48,8 +52,7 @@
       {{ message.subject }}
     </div>
     <div class="inmail-message__element inmail-message__header__all">
-      <label>All Headers</label>
-      {{ message.header.toString() }}
+      <pre>{{ message.header.toString() }}</pre>
     </div>
   </header>
   <main class="inmail-message__body">