diff --git a/web/index.html b/web/index.html
index cb17602..fc234de 100644
--- a/web/index.html
+++ b/web/index.html
@@ -38,11 +38,11 @@
     .body {
       background: white;
       color: black;
-      margin-left: -0.5em;
-      margin-right: -0.5em;
       margin-top: 0.5em;
+      padding: 1em;
       width: 0;
       min-width: 100%;
+      overflow-wrap: break-word;
     }
 
     .error {
@@ -146,11 +146,19 @@
       color: #555;
     }
 
-    .mobile .search-results,
-    .mobile .thread {
+    .mobile .search-results {
       padding: 1em;
     }
 
+    .mobile .thread h3 {
+      padding: 1em 1em 0;
+      overflow-wrap: break-word;
+    }
+
+    .mobile .thread .tags {
+      padding: 0 1em;
+    }
+
     .search-results .row {
       display: flex;
       flex-direction: row;
diff --git a/web/src/state.rs b/web/src/state.rs
index 98bc3ce..6a5b908 100644
--- a/web/src/state.rs
+++ b/web/src/state.rs
@@ -180,7 +180,6 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             first,
             last,
         } => {
-            info!("making FrontPageRequest: {query} after:{after:?} before:{before:?} first:{first:?} last:{last:?}");
             model.query = query.clone();
             orders.skip().perform_cmd(async move {
                 Msg::FrontPageResult(
@@ -336,7 +335,6 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             } = &mut model.context
             {
                 selected_threads.insert(tid);
-                info!("selected threads {selected_threads:?}");
             }
         }
         Msg::SelectionRemoveThread(tid) => {
@@ -345,19 +343,16 @@ pub fn update(msg: Msg, model: &mut Model, orders: &mut impl Orders<Msg>) {
             } = &mut model.context
             {
                 selected_threads.remove(&tid);
-                info!("selected threads {selected_threads:?}");
             }
         }
         Msg::MessageCollapse(id) => {
             if let Context::ThreadResult { open_messages, .. } = &mut model.context {
                 open_messages.remove(&id);
-                info!("open_messages threads {open_messages:?}");
             }
         }
         Msg::MessageExpand(id) => {
             if let Context::ThreadResult { open_messages, .. } = &mut model.context {
                 open_messages.insert(id);
-                info!("open_messages threads {open_messages:?}");
             }
         }
     }
diff --git a/web/src/view/mod.rs b/web/src/view/mod.rs
index cd2aa6a..0dd8f6b 100644
--- a/web/src/view/mod.rs
+++ b/web/src/view/mod.rs
@@ -5,7 +5,7 @@ use std::{
 
 use chrono::{DateTime, Datelike, Duration, Local, Utc};
 use itertools::Itertools;
-use log::error;
+use log::{error, info};
 use seed::{prelude::*, *};
 use seed_hooks::{state_access::CloneState, topo, use_state};
 use wasm_timer::Instant;
@@ -351,90 +351,75 @@ fn has_unread(tags: &[String]) -> bool {
     tags.contains(&String::from("unread"))
 }
 
-fn read_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg> {
+fn message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg> {
     let id = msg.id.clone();
     let expand_id = msg.id.clone();
     let is_unread = has_unread(&msg.tags);
     div![
         C!["message"],
-        div![
-            C!["headers"],
-            span![
-                C!["read-status"],
-                i![
-                    style! {
-                        St::Color => "gold"
-                    },
-                    C![
-                        "far",
-                        if is_unread {
-                            "fa-envelope"
-                        } else {
-                            "fa-envelope-open"
-                        },
-                    ],
-                    ev(Ev::Click, move |e| {
-                        e.stop_propagation();
-                        Msg::SetUnread(format!("id:{id}"), !is_unread)
-                    }),
+        article![
+            C!["media"],
+            figure![
+                C!["media-left"],
+                p![
+                    C!["image", "is-64x64"],
+                    img![attrs! {At::Src=>"https://bulma.io/images/placeholders/128x128.png"}],
                 ],
             ],
-            " ",
-            msg.from
-                .as_ref()
-                .map(|from| span![C!["header"], view_address(&from)]),
-            " ",
-            msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
-            // TODO(wathiede): add first line of message body
-        ],
-        ev(Ev::Click, move |e| {
-            e.stop_propagation();
-            if open {
-                Msg::MessageCollapse(expand_id)
-            } else {
-                Msg::MessageExpand(expand_id)
-            }
-        }),
-    ]
-}
-fn unread_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Node<Msg> {
-    let id = msg.id.clone();
-    let expand_id = msg.id.clone();
-    let is_unread = has_unread(&msg.tags);
-    div![
-        C!["message"],
-        div![
-            C!["headers"],
-            span![
-                C!["read-status"],
-                i![
-                    style! {
-                        St::Color => "gold"
-                    },
-                    C![
-                        "far",
-                        if is_unread {
-                            "fa-envelope"
-                        } else {
-                            "fa-envelope-open"
-                        },
-                    ],
-                    ev(Ev::Click, move |e| {
-                        e.stop_propagation();
-                        Msg::SetUnread(format!("id:{id}"), !is_unread)
-                    }),
-                ],
-            ],
-            msg.from
-                .as_ref()
-                .map(|from| div![C!["header"], "From: ", view_address(&from)]),
-            msg.timestamp
-                .map(|ts| div![C!["header"], "Date: ", human_age(ts)]),
-            div![C!["header"], "Message-ID: ", &msg.id],
             div![
-                C!["header"],
-                IF!(!msg.to.is_empty() => span!["To: ", view_addresses(&msg.to)]),
-                IF!(!msg.cc.is_empty() =>  span!["CC: ", view_addresses(&msg.cc)])
+                C!["media-content"],
+                div![
+                    C!["content"],
+                    p![
+                        msg.from.as_ref().map(|from| strong![from
+                            .name()
+                            .as_ref()
+                            .unwrap_or(&from.addr().unwrap_or("(UNKNOWN)"))]),
+                        br![],
+                        IF!(!msg.to.is_empty() =>
+                        nodes![
+                            small![" to "],
+                            msg.to.iter().enumerate().map(|(i, to)| small![
+                                if i > 0 { ", " } else { "" },
+                                to.name()
+                                    .as_ref()
+                                    .unwrap_or(&to.addr().unwrap_or("(UNKNOWN)"))
+                            ]).collect::<Vec<_>>()
+                        ]),
+                        IF!(!msg.cc.is_empty() =>
+                        nodes![
+                            small![" cc "],
+                            msg.cc.iter().enumerate().map(|(i, cc)| small![
+                                if i > 0 { ", " } else { "" },
+                                cc.name()
+                                    .as_ref()
+                                    .unwrap_or(&cc.addr().unwrap_or("(UNKNOWN)"))
+                            ]).collect::<Vec<_>>()
+                        ]),
+                        br![],
+                        msg.timestamp.map(|ts| span![C!["header"], human_age(ts)]),
+                    ],
+                ],
+            ],
+            div![
+                C!["media-right"],
+                span![
+                    C!["read-status"],
+                    i![
+                        C![
+                            "far",
+                            if is_unread {
+                                "fa-envelope"
+                            } else {
+                                "fa-envelope-open"
+                            },
+                        ],
+                        ev(Ev::Click, move |e| {
+                            e.stop_propagation();
+                            Msg::SetUnread(format!("id:{id}"), !is_unread)
+                        }),
+                    ],
+                ],
             ],
             ev(Ev::Click, move |e| {
                 e.stop_propagation();
@@ -445,6 +430,7 @@ fn unread_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Nod
                 }
             }),
         ],
+        IF!(open =>
         div![
             C!["body"],
             match &msg.body {
@@ -480,7 +466,7 @@ fn unread_message_render(msg: &ShowThreadQueryThreadMessages, open: bool) -> Nod
                     view_content_tree(&content_tree),
                 ],
             }
-        ],
+        ])
     ]
 }
 
@@ -500,18 +486,14 @@ fn thread(thread: &ShowThreadQueryThread, open_messages: &HashSet<String>) -> No
     tags.sort();
     let messages = thread.messages.iter().map(|msg| {
         let open = open_messages.contains(&msg.id);
-        if open {
-            unread_message_render(&msg, open)
-        } else {
-            read_message_render(&msg, open)
-        }
+        message_render(&msg, open)
     });
     let read_thread_id = thread.thread_id.clone();
     let unread_thread_id = thread.thread_id.clone();
     div![
         C!["thread"],
-        h3![C!["is-size-5"], &thread.subject,],
-        tags_chiclet(&tags, false),
+        h3![C!["is-size-5"], &thread.subject],
+        span![C!["tags"], tags_chiclet(&tags, false)],
         span![
             C!["level-item", "buttons", "has-addons"],
             button![