diff --git a/Gemfile b/Gemfile
index 00056f9..82c4ae3 100644
--- a/Gemfile
+++ b/Gemfile
@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 source 'https://rubygems.org'
 
-gem 'nanoc', '4.7.4'
+gem 'nanoc', '4.7.7'
 
 # General filtering
 gem 'coffee-script'
diff --git a/Gemfile.lock b/Gemfile.lock
index 6d6ad1e..6b96971 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -13,7 +13,7 @@ GEM
     coffee-script-source (1.12.2)
     colored (1.2)
     concurrent-ruby (1.0.5)
-    cri (2.7.1)
+    cri (2.8.0)
       colored (~> 1.2)
     css_press (0.3.2)
       csspool-st (= 3.1.2)
@@ -60,8 +60,8 @@ GEM
       css_press
     multi_js (0.1.0)
       uglifier (~> 2)
-    nanoc (4.7.4)
-      cri (~> 2.3)
+    nanoc (4.7.7)
+      cri (~> 2.8)
       ddplugin (~> 1.0)
       hamster (~> 3.0)
       ref (~> 2.0)
@@ -111,7 +111,7 @@ DEPENDENCIES
   html_press
   icalendar
   kramdown
-  nanoc (= 4.7.4)
+  nanoc (= 4.7.7)
   sass
   terminal-notifier
   terminal-notifier-guard
diff --git a/content/assets/stylesheets/includes/blogpost.scss b/content/assets/stylesheets/includes/blogpost.scss
index b0274c7..41827bb 100644
--- a/content/assets/stylesheets/includes/blogpost.scss
+++ b/content/assets/stylesheets/includes/blogpost.scss
@@ -71,3 +71,17 @@ dl {
     background: $zeus-orange;
   }
 }
+
+.blog-preview {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    background: linear-gradient(to bottom, transparent, white);
+    height: 100px;
+    width: 100%;
+  }
+}
diff --git a/layouts/archive_page.erb b/layouts/archive_page.erb
index 756c39f..a77b803 100644
--- a/layouts/archive_page.erb
+++ b/layouts/archive_page.erb
@@ -22,31 +22,18 @@
     </aside>
   </div>
   <div class="column">
-    <% posts_in_year(item[:academic_year]).each do |post| %>
-    <a href="<%= relative_path_to(post) %>">
-      <article class="box padbox">
-        <div class="columns">
-          <div class="column">
-            <p class="title is-3"><%= post[:title] %></p>
-            <p class="subtitle is-5">
-              <% if post[:author] %>
-              door <%= post[:author] %>
-              <% end %>
-            </p>
-            <div class="content">
-              <%= post[:description] %>
-              <br>
-              <small><%= post[:created_at] %></small>
-            </div>
-          </div>
-          <div class="column">
-            <div class="content">
-              <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
-            </div>
-          </div>
-        </div>
-      </article>
-    </a>
-    <% end %>
+    <div class="columns is-multiline">
+      <div class="column">
+      <% posts_in_year(item[:academic_year]).each_with_index.select {|e, i| i.even?}.map(&:first).each do |post| %>
+        <%= render '/partials/_blog_preview.*', post: post %>
+      <% end %>
+      </div>
+
+      <div class="column">
+      <% posts_in_year(item[:academic_year]).each_with_index.reject {|e, i| i.even?}.map(&:first).each do |post| %>
+        <%= render '/partials/_blog_preview.*', post: post %>
+      <% end %>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/layouts/partials/_blog_preview.erb b/layouts/partials/_blog_preview.erb
new file mode 100644
index 0000000..c6bcfeb
--- /dev/null
+++ b/layouts/partials/_blog_preview.erb
@@ -0,0 +1,18 @@
+<a href="<%= relative_path_to(post) %>">
+  <article class="box blog-preview">
+    <div class="content">
+      <h3 class="has-text-centered"><%= post[:title] %></h3>
+      <p class="has-text-centered">
+      <%= post[:description] %>
+      </p>
+      <h5 class="has-text-centered">
+        <% if post[:author] %>
+        door <%= post[:author] %>
+        <% end %>
+      </h5>
+      <small><%= post[:created_at] %></small>
+      <br>
+      <%= excerptize(post.reps[:text].compiled_content, length: 200).tr("\n", ' ')%>
+    </div>
+  </article>
+</a>