diff --git a/content/archives.erb b/content/archives.erb
index 2872249..2c734a9 100644
--- a/content/archives.erb
+++ b/content/archives.erb
@@ -1,4 +1,4 @@
-<ul>
+7<ul class="archive_list">
   <% academic_years_items.each do |year, item| %>
   <li>
     <%= link_to pretty_year(year), item %>
diff --git a/content/assets/stylesheets/main.scss b/content/assets/stylesheets/main.scss
index 089c009..864ecb7 100644
--- a/content/assets/stylesheets/main.scss
+++ b/content/assets/stylesheets/main.scss
@@ -14,3 +14,41 @@ $family-sans-serif: 'Open Sans', sans-serif;
   font-size: inherit;
   vertical-align: inherit;
 }
+
+// Issue 27 archive list styling
+
+.archive_list {
+list-style-type: none;
+font-family: family-sans-serif;
+}
+
+.archive_list > li {
+display: inline-block;
+position: relative;
+
+padding: 2em;
+border: 2px solid darkgrey;
+border-radius: 8px;
+
+
+font-size: 2em;
+font-weight:bold;
+}
+
+.archive_list > li:hover{
+  border-color: rgb(66,66,66);
+}
+
+.archive_list > li:first-child{
+  margin-left:15%;
+  margin-right:25%; // momenteel hard-coded, betere opl zou dynamische herberekening zijn om meer future-proof te zijn
+
+}
+
+.archive_list_ref{
+  border:  2px solid darkgrey;
+}
+
+.archive_list_item{
+  font-family: family-sans-serif;
+}
diff --git a/layouts/archive_page.erb b/layouts/archive_page.erb
index d8a056d..1bdd6ce 100644
--- a/layouts/archive_page.erb
+++ b/layouts/archive_page.erb
@@ -1,10 +1,10 @@
 <% posts_in_year(item[:academic_year]).each do |post| %>
-<a href="<%= relative_path_to(post) %>">
-  <div class="tipue_search_content_title">
+<a class="archive_list_ref" href="<%= relative_path_to(post) %>">
+  <div class= "archive_list_item">
     <%= post[:title] %>
   </div>
-  <div class="tipue_search_content_text">
-    <%= excerptize(post.reps[:text].compiled_content, length: 200) %>
+  <div class="archive_list_item">
+    <%= excerptize(post.reps[:text].compiled_content, length: 50) %>
   </div>
 </a>
 <% end %>