diff --git a/mbox2web b/mbox2web
index f374818..dbe1d8c 100755
--- a/mbox2web
+++ b/mbox2web
@@ -962,10 +962,14 @@ class Message:
                 "date": msg["Date"],
                 "bodyhtml": bodyhtml,
                 "threadhtml": self.thread.as_html(),
+                "threadindex": self.threadindex(),
             }
             msghtml = msgtmpl.render(context)
             hfd.write(msghtml)
 
+    def threadindex(self):
+        return self.thread.index(self)
+
 
 # For each message-id, record the thread it belongs to.
 # This should probably be an instance variable of Archive instead of global,
diff --git a/style/luga.css b/style/luga.css
index 3421f1c..805fd96 100644
--- a/style/luga.css
+++ b/style/luga.css
@@ -115,6 +115,7 @@ header {
     grid-column: 1;
     grid-row: 3;
     overflow: hidden;
+    position: relative; /* to establish formatting context */
   }
 
   article {
@@ -340,3 +341,12 @@ pre {
     font-size: 1rem;
     font-size-adjust: 0.5625;
 }
+
+.month {
+    text-align: right;
+}
+
+.threadmarker {
+    width: 1000px; height: 32px;
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
+}
diff --git a/templates/message.html b/templates/message.html
index 10d089f..fd8beb2 100644
--- a/templates/message.html
+++ b/templates/message.html
@@ -13,9 +13,12 @@
           <h1>{{subject}}</h1>
         </header>
         <nav>
+          <div class="threadmarker" style="position: absolute; top: {{threadindex * 32}}px">
+          </div>
           {{threadhtml}}
         </nav>
         <article class="email">
+          Message #{{threadindex}}
           <table>
             <tr> <th>Message-Id </th> <td>{{message_id}} </td> </tr>
             <tr> <th>From </th> <td>{{from}} </td> </tr>