diff --git a/Cargo.lock b/Cargo.lock
index c952db9..b23337c 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1853,6 +1853,7 @@ dependencies = [
  "dyn-clone",
  "eyre",
  "http",
+ "indexmap",
  "lazy_static",
  "mailpot",
  "minijinja",
diff --git a/archive-http/src/cal.rs b/archive-http/src/cal.rs
index 571950d..3725d8a 100644
--- a/archive-http/src/cal.rs
+++ b/archive-http/src/cal.rs
@@ -31,8 +31,8 @@ use chrono::*;
 ///
 /// # Examples
 /// ```
-/// use mailpot_archives::cal::calendarize;
 /// use chrono::*;
+/// use mailpot_archives::cal::calendarize;
 ///
 /// let date = NaiveDate::parse_from_str("2021-01-02", "%Y-%m-%d").unwrap();
 /// // Week = [Sun, Mon, Tue, Wed, Thu, Fri, Sat]
@@ -59,8 +59,8 @@ pub fn calendarize(date: NaiveDate) -> Vec<[u32; 7]> {
 ///
 /// # Examples
 /// ```
-/// use mailpot_archives::cal::calendarize_with_offset;
 /// use chrono::*;
+/// use mailpot_archives::cal::calendarize_with_offset;
 ///
 /// let date = NaiveDate::parse_from_str("2021-01-02", "%Y-%m-%d").unwrap();
 /// // Week = [Mon, Tue, Wed, Thu, Fri, Sat, Sun]
diff --git a/web/Cargo.toml b/web/Cargo.toml
index 0abb12a..1b8b008 100644
--- a/web/Cargo.toml
+++ b/web/Cargo.toml
@@ -28,6 +28,7 @@ chrono = { version = "^0.4" }
 dyn-clone = { version = "^1" }
 eyre = { version = "0.6" }
 http = "0.2"
+indexmap = { version = "1.9" }
 lazy_static = "^1.4"
 mailpot = { version = "^0.0", path = "../core" }
 minijinja = { version = "0.31.0", features = ["source", ] }
diff --git a/web/src/lists.rs b/web/src/lists.rs
index d9e400d..3c4c9ea 100644
--- a/web/src/lists.rs
+++ b/web/src/lists.rs
@@ -17,6 +17,8 @@
  * along with this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
+use indexmap::IndexMap;
+
 use super::*;
 
 /// Mailing list index.
diff --git a/web/src/templates/css.html b/web/src/templates/css.html
index 9290322..5c06388 100644
--- a/web/src/templates/css.html
+++ b/web/src/templates/css.html
@@ -85,7 +85,7 @@
     }
 
     a.self-link {
-        --width: 28px;
+        --width: 22px;
         position: absolute;
         top: 0px;
         left: calc(var(--width) - 3.5rem);
@@ -340,11 +340,12 @@
         margin: 1rem;
     }
 
-    main.layout>div.header>h2 {
-        margin-inline-start: 1rem;
+    main.layout>div.header>div.page-header {
+        width: 90vw;
+        margin: 0px auto;
     }
 
-    main.layout>div.header>nav + nav {
+    main.layout>div.header>div.page-header>nav:first-child {
         margin-top: 1rem;
     }
 
@@ -364,7 +365,9 @@
         gap: 1rem;
     }
     nav.main-nav>ul>li>a {
+        /* fallback if clamp() isn't supported */
         padding: 1rem;
+        padding: 1rem clamp(0.6svw,1rem,0.5vmin);
     }
     nav.main-nav > ul > li > a:hover {
         outline: 0.1rem solid;
@@ -380,7 +383,6 @@
 
     nav.breadcrumbs {
         padding: 10px 14px 10px 0px;
-        margin-inline-start: 1rem;
     }
 
     nav.breadcrumbs ol {
@@ -388,6 +390,18 @@
         padding-left: 0;
     }
 
+    /* If only the root crumb is visible, hide it to avoid unnecessary visual clutter */
+    li.crumb:only-child>span[aria-current="page"] {
+        --secs: 500ms;
+        transition: all var(--secs) linear;
+        color: transparent;
+    }
+
+    li.crumb:only-child>span[aria-current="page"]:hover {
+        transition: all var(--secs) linear;
+        color: revert;
+    }
+
     .crumb, .crumb>a {
         display: contents;
     }
@@ -508,20 +522,35 @@
     div.entries {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+    }
+
+    div.entries>p:first-child {
+        margin: 1rem 0rem;
     }
 
     div.entries>div.entry {
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
+        border: 1px solid var(--border-secondary);
+        padding: 1rem 1rem;
     }
 
-    div.posts>div.entry>span.subject {
-        font-size: larger;
+    div.entries>div.entry+div.entry {
+        border-top:none;
+    }
+
+    div.entries>div.entry span.metadata.replies {
+        background: CanvasText;
+        border-radius: .6rem;
+        color: Canvas;
+        padding: 0.1rem 0.4rem;
+        font-size: small;
+        font-variant-numeric: tabular-nums;
     }
 
     div.entries>div.entry>span.metadata {
+        font-size: small;
         color: GrayText;
         word-break: break-all;
     }
@@ -578,15 +607,18 @@
     span.message-id:before{
         content: '<';
         display: inline-block;
+        opacity: 0.6;
     }
     td.message-id:after,
     span.message-id:after{
         content: '>';
         display: inline-block;
+        opacity: 0.6;
     }
     span.message-id + span.message-id:before{
         content: ', <';
         display: inline-block;
+        opacity: 0.6;
     }
     td.faded,
     span.faded {
diff --git a/web/src/templates/header.html b/web/src/templates/header.html
index 6fc7615..eef1a3b 100644
--- a/web/src/templates/header.html
+++ b/web/src/templates/header.html
@@ -14,13 +14,21 @@
                     <p class="description">{{ description }}</p>
                 {% endif %}
                 {% include "menu.html" %}
-                {% if messages %}
-                    <ul class="messagelist">
-                        {% for message in messages %}
-                            <li class="{{ message.level|lower }}">
-                                <span class="label">{{ message.level }}: </span>{{ message.message }}
-                            </li>
-                        {% endfor %}
-                    </ul>
-                {% endif %}
+                <div class="page-header">
+                    {% if page_title %}
+                        <h2>{{ page_title }}</h2>
+                    {% endif %}
+                    <nav aria-label="Breadcrumb" class="breadcrumbs">
+                        <ol>{% for crumb in crumbs %}{% if loop.last %}<li class="crumb"><span aria-current="page" title="current page">{{ crumb.label }}</span></li>{% else %}<li class="crumb"><a href="{{ root_url_prefix }}{{ crumb.url }}">{{ crumb.label }}</a></li>{% endif %}{% endfor %}</ol>
+                    </nav>
+                    {% if messages %}
+                        <ul class="messagelist">
+                            {% for message in messages %}
+                                <li class="{{ message.level|lower }}">
+                                    <span class="label">{{ message.level }}: </span>{{ message.message }}
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </div>
             </div>
diff --git a/web/src/templates/menu.html b/web/src/templates/menu.html
index fc9fd3c..ead407e 100644
--- a/web/src/templates/menu.html
+++ b/web/src/templates/menu.html
@@ -9,9 +9,3 @@
         {% endif %}
     </ul>
 </nav>
-{% if page_title %}
-    <h2>{{ page_title }}</h2>
-{% endif %}
-<nav aria-label="Breadcrumb" class="breadcrumbs">
-    <ol>{% for crumb in crumbs %}{% if loop.last %}<li class="crumb"><span aria-current="page">{{ crumb.label }}</span></li>{% else %}<li class="crumb"><a href="{{ root_url_prefix }}{{ crumb.url }}">{{ crumb.label }}</a></li>{% endif %}{% endfor %}</ol>
-</nav>