diff --git a/src/client/conversation-viewer/conversation-email.vala b/src/client/conversation-viewer/conversation-email.vala
index 5115a2c1..caf29b24 100644
--- a/src/client/conversation-viewer/conversation-email.vala
+++ b/src/client/conversation-viewer/conversation-email.vala
@@ -324,7 +324,6 @@ public class ConversationEmail : Gtk.Box {
      */
     public void expand_email(bool include_transitions=true) {
         is_collapsed = false;
-        get_style_context().add_class("geary_show_body");
         attachments_button.set_sensitive(true);
         star_button.set_sensitive(true);
         unstar_button.set_sensitive(true);
@@ -337,7 +336,6 @@ public class ConversationEmail : Gtk.Box {
      */
     public void collapse_email() {
         is_collapsed = true;
-        get_style_context().remove_class("geary_show_body");
         attachments_button.set_sensitive(false);
         star_button.set_sensitive(false);
         unstar_button.set_sensitive(false);
diff --git a/src/client/conversation-viewer/conversation-web-view.vala b/src/client/conversation-viewer/conversation-web-view.vala
index e3818546..773058d2 100644
--- a/src/client/conversation-viewer/conversation-web-view.vala
+++ b/src/client/conversation-viewer/conversation-web-view.vala
@@ -79,7 +79,9 @@ public class ConversationWebView : StylishWebView {
 
         int preferred_height = 0;
         if (load_status == WebKit.LoadStatus.FINISHED) {
-            preferred_height = (int) get_dom_document().get_body().offset_height;
+            // XXX We need this 12px padding since WK doesn't seem to
+            // report the bottom margin?
+            preferred_height = (int) get_dom_document().get_body().scroll_height + 12;
         }
 
         // XXX Currently, for some messages the WebView will report
diff --git a/ui/conversation-email.ui b/ui/conversation-email.ui
index e28004cf..cad44279 100644
--- a/ui/conversation-email.ui
+++ b/ui/conversation-email.ui
@@ -146,7 +146,7 @@
       <object class="GtkIconView" id="attachments_view">
         <property name="visible">True</property>
         <property name="can_focus">True</property>
-        <property name="margin">0</property>
+        <property name="margin">6</property>
         <property name="selection_mode">multiple</property>
         <property name="item_orientation">horizontal</property>
         <property name="model">attachments_model</property>
@@ -168,6 +168,9 @@
             <attribute name="text">1</attribute>
           </attributes>
         </child>
+        <style>
+          <class name="geary-attachments"/>
+        </style>
       </object>
       <packing>
         <property name="expand">True</property>
@@ -331,5 +334,8 @@
     <child>
       <placeholder/>
     </child>
+    <style>
+      <class name="geary-submessages"/>
+    </style>
   </object>
 </interface>
diff --git a/ui/conversation-message.ui b/ui/conversation-message.ui
index 8ced5e0f..59e4e1bb 100644
--- a/ui/conversation-message.ui
+++ b/ui/conversation-message.ui
@@ -3,7 +3,6 @@
 <interface>
   <requires lib="gtk+" version="3.14"/>
   <template class="ConversationMessage" parent="GtkBox">
-    <property name="name">ConversationMessage</property>
     <property name="visible">True</property>
     <property name="can_focus">False</property>
     <property name="orientation">vertical</property>
@@ -60,9 +59,6 @@
                                 <property name="label" translatable="yes">From &lt;email&gt;</property>
                                 <property name="ellipsize">end</property>
                                 <property name="xalign">0</property>
-                                <style>
-                                  <class name="geary-header-label"/>
-                                </style>
                               </object>
                               <packing>
                                 <property name="expand">True</property>
@@ -77,9 +73,6 @@
                                 <property name="label" translatable="yes">1/1/1970	</property>
                                 <property name="selectable">True</property>
                                 <property name="ellipsize">end</property>
-                                <style>
-                                  <class name="geary-header-label"/>
-                                </style>
                               </object>
                               <packing>
                                 <property name="expand">False</property>
@@ -184,9 +177,6 @@
                                 <property name="label" translatable="yes">1/1/1970	</property>
                                 <property name="selectable">True</property>
                                 <property name="ellipsize">end</property>
-                                <style>
-                                  <class name="geary-header-label"/>
-                                </style>
                               </object>
                               <packing>
                                 <property name="expand">False</property>
@@ -381,6 +371,9 @@
             <property name="position">0</property>
           </packing>
         </child>
+        <style>
+          <class name="geary-message-summary"/>
+        </style>
       </object>
       <packing>
         <property name="expand">False</property>
@@ -397,17 +390,6 @@
             <property name="visible">True</property>
             <property name="can_focus">False</property>
             <property name="orientation">vertical</property>
-            <child>
-              <object class="GtkSeparator">
-                <property name="visible">True</property>
-                <property name="can_focus">False</property>
-              </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-                <property name="position">0</property>
-              </packing>
-            </child>
             <child>
               <object class="GtkBox" id="infobar_box">
                 <property name="visible">True</property>
@@ -519,9 +501,6 @@
                 <property name="position">1</property>
               </packing>
             </child>
-            <child>
-              <placeholder/>
-            </child>
           </object>
         </child>
       </object>
@@ -531,6 +510,9 @@
         <property name="position">1</property>
       </packing>
     </child>
+    <style>
+      <class name="geary-message"/>
+    </style>
   </template>
   <object class="GtkPopover" id="link_popover">
     <property name="can_focus">False</property>
diff --git a/ui/conversation-web-view.css b/ui/conversation-web-view.css
index cfabae6c..ba2bc600 100644
--- a/ui/conversation-web-view.css
+++ b/ui/conversation-web-view.css
@@ -6,10 +6,17 @@
  * General HTML style.
  */
 
-html, body {
+html {
+  /* Disallow changes to HTML style using !important since this it is
+  needed for sizing the ConversationWebView. */
   left: 0 !important;
   width: 100% !important;
+  margin: 0 !important;
+  border: 0 !important;
+  padding: 0 !important;
+}
 
+html, body {
   /* Trigger CSS 2.1 § 10.6.7 to get a shrink-wrapped height.
      See also ConversationWebView.get_preferred_height */
   position: absolute !important;
@@ -22,13 +29,15 @@ html, body {
 }
 
 body {
-  margin: 0 !important;
-  border: 0 !important;
-  padding: 0 !important;
+  /* Allow email style to change the body however. */
+  left: 0;
+  right: 0;
+  margin: 12px;
+  border: 0;
+  padding: 0;
   color: black;
   background-color: white;
-  font: caption;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 /* By default, tables reset the font properties to "normal" */
@@ -81,6 +90,10 @@ blockquote {
     border-left: 3px #aaa solid;
 }
 
+pre {
+  white-space: pre-wrap;
+}
+
 /**
  * Message chrome style.
  */
diff --git a/ui/geary.css b/ui/geary.css
index 5996f27a..618f6a31 100644
--- a/ui/geary.css
+++ b/ui/geary.css
@@ -69,13 +69,11 @@ row.geary-folder-popover-list-row > label {
   transition: margin 0.1s;
 }
 #conversation_listbox > row > box {
-  background: shade(@theme_base_color, 0.96);
+  background: @theme_base_color;
   transition: background 0.25s;
 }
-#conversation_listbox > row:hover > box,
-#conversation_listbox > row > box.geary_show_body,
-#conversation_listbox > row:hover > box.geary_show_body {
-  background: @theme_base_color;
+#conversation_listbox > row:hover > box {
+  background: shade(@theme_base_color, 0.96);
 }
 #conversation_listbox > row.geary_expand,
 #conversation_listbox > row.geary_composer {
@@ -86,22 +84,18 @@ row.geary-folder-popover-list-row > label {
   margin-bottom: 0;
 }
 
-#ConversationMessage {
-  padding: 12px;
+.geary-message .geary-message-summary {
+  margin: 12px;
 }
-#ConversationMessage .geary-header-label {
+.geary-message .geary-header-label {
   margin-right: 6px;
 }
-#ConversationMessage .geary-headers flowboxchild {
+.geary-message .geary-headers flowboxchild {
   margin: 0;
   padding: 0;
 }
-#ConversationMessage separator {
-  margin: 12px 0;
-}
-#ConversationMessage infobar {
-  border-radius: 2px;
-  margin-bottom: 12px;
+.geary-submessages .geary-message {
+  background-image: linear-gradient(rgba(0,0,0,0.2), @bg_color 6px);
 }
 
 #composer_embed headerbar {