diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e2aa788..9f27127 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,13 +1,22 @@
 {{ define "main" }}
-  <div id="main">
+<div id="main">
     <div class="container">
-      {{ partial "content.html" . }}
-      {{ if .Content }}
+        {{ partial "content.html" . }}
+        {{ if .Content }}
         <hr>
-      {{ end }}
-      {{ range .Pages.ByTitle }}
-        {{ partial "list_item.html" . }}
-      {{ end }}
+        {{ end }}
+
+        <div class="item-list">
+            <div class="item-list-group">
+                <ul class="item-list-items">
+                    {{ range .Pages.ByTitle }}
+                    <li class="item-list-item" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
+                        {{ partial "list_item.html" . }}
+                    </li>
+                    {{ end }}
+                </ul>
+            </div>
+        </div>
     </div>
-  </div>
+</div>
 {{ end }}
diff --git a/layouts/partials/content-details.html b/layouts/partials/content-details.html
index 3f6c407..1d23904 100644
--- a/layouts/partials/content-details.html
+++ b/layouts/partials/content-details.html
@@ -1,9 +1,3 @@
-{{ if not .Date.IsZero }}
-  <span class="pr-2" title='{{ .Date.Format "January 2 2006" }}'>
-    <i class="far fa-calendar-alt pr-1 content-detail"></i> {{ .Date.Format "2006-01-02" }}
-  </span>
-{{ end }}
-
 {{ if not .Parent.IsHome }}
 {{ if gt .ReadingTime 2 }}
 <span class="pr-2" title="Reading time">
diff --git a/layouts/partials/list_item.html b/layouts/partials/list_item.html
index e190a65..c7485ac 100644
--- a/layouts/partials/list_item.html
+++ b/layouts/partials/list_item.html
@@ -1,9 +1,18 @@
-<div class="media list-page-item mb-3" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
-  <div class="media-body">
-    <a href="{{ .RelPermalink }}">
-      <h5 class="my-0">{{ .Title }}</h5>
-    </a>
-    <small>{{ partial "content-details.html" . }}</small>
-    <p>{{ partial "summary.html" . }}</p>
-  </div>
-</div>
+<!-- Obtain "dateformat" from scratchpad (or fall back to default) -->
+{{ if not (.Scratch.Get "dateformat") }}
+{{ .Scratch.Set "dateformat" "Jan 02, 2006" }}
+{{ end }}
+{{ $dateformat := .Scratch.Get "dateformat" }}
+<!-- Reset scratchpad for next use (in next page) - avoids using old values -->
+{{ .Scratch.Set "dateformat" nil }}
+
+
+<a class="item-link" href="{{ .RelPermalink }}">
+    <span class="item-title">{{ .Title }}</span>
+    {{ if not .Date.IsZero }}
+    <span class="item-day">{{ .Date.Format $dateformat }}</span>
+    {{ end }}
+</a>
+<small class="item-details">{{ partial "content-details.html" . }}</small>
+<!-- TODO: Only show summary on hover? -->
+<p class="item-summary">{{ partial "summary.html" . }}</p>
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
index 662b8de..c01899d 100644
--- a/layouts/posts/list.html
+++ b/layouts/posts/list.html
@@ -1,22 +1,34 @@
 {{ define "main" }}
-  <div id="main">
+<div id="main">
     <div class="container">
-      {{ partial "content.html" . }}
+        <!-- Total posts, total words, link to tag list page, RSS -->
 
-      <!--Group posts by months-->
-      {{ range .Pages.GroupByDate "2006-01" }}
-        {{ $month := print .Key  "-01"}}
-        {{ $display := dateFormat "2006-01" $month }}
-        <h3 class="mt-5" id="{{ $display }}">
-          <a href="#{{ $display }}">
-            <time datetime="{{ $month }}" title='{{ dateFormat "January 2006" $month }}'>{{ $display }}</time>
-          </a>
-        </h3>
-        <!--List posts belonging to current month -->
-        {{ range (sort .Pages "Date" "desc") }}
-          {{ partial "list_item.html" . }}
-        {{ end }}
-      {{ end }}
+        <div class="item-list">
+            {{ partial "content.html" . }}
+            <!-- Go through post groups by year -->
+            {{ range .Data.Pages.GroupByDate "2006" }}
+            {{ $year := .Key }}
+
+            <div class="item-list-group">
+                <!-- Show the year for this group -->
+                <h3 class="item-list-year" id="{{ $year }}">
+                    <a href="#{{ $year }}">
+                        <time datetime="{{ $year }}" title='{{ $year }}'>{{ $year }}</time>
+                    </a>
+                </h3>
+
+                <!-- List all posts in this year group -->
+                <ul class="item-list-items">
+                    {{ range .Pages }}
+                    <li class="item-list-item" data-id="{{ with .File}}{{ .File.UniqueID }}{{ end }}">
+                        {{ .Scratch.Set "dateformat" "Jan 02" }}
+                        {{ partial "list_item.html" . }}
+                    </li>
+                    {{ end }}
+                </ul>
+            </div>
+            {{ end }}
+        </div>
     </div>
-  </div>
+</div>
 {{ end }}
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index c606ee9..043e23b 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -195,3 +195,61 @@ img {
   width: 100%;
   height: 35vh;
 }
+
+.item-list {
+    width: 100%;
+    max-width: 1500px;
+    text-align: left;
+    padding: 20px;
+    margin: 20px auto;
+
+    .item-list-group {
+        display: flex;
+        margin-bottom: 1.9em;
+        line-height: normal;
+    }
+
+    .item-list-year {
+        padding-top: 6px;
+        margin-right: 1.8em;
+        font-size: 2em;
+    }
+
+    .item-list-items {
+        flex-grow: 1;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .item-list-item {
+        border-bottom: 1px grey dashed;
+
+        .item-link {
+            display: flex;
+            justify-content: space-between;
+            align-items: baseline;
+            text-decoration: none;
+        }
+
+        .item-title {
+            font-size: 1.3rem;
+            margin: 5px 0 5px 0;
+        }
+
+        .item-day {
+            flex-shrink: 0;
+            margin-left: 1em;
+            opacity: 0.8;
+        }
+
+        .item-details {
+            font-size: 0.8rem;
+            text-indent: 2em;
+        }
+
+        .item-summary {
+            font-size: 1rem;
+        }
+    }
+}