diff --git a/content/assets/stylesheets/includes/events.scss b/content/assets/stylesheets/includes/events.scss
index f49e964..86462ab 100644
--- a/content/assets/stylesheets/includes/events.scss
+++ b/content/assets/stylesheets/includes/events.scss
@@ -1,3 +1,84 @@
-.subevent {
-  margin-left: 20px;
+.divider {
+  align-items:flex-start;
+  border: 1px solid lighten(gray, 45%);
+  width: 67%;
+  margin: 0 30% 0 3%;
+}
+
+.box.event-preview {
+  border-radius: 0px;
+  display: flex;
+  align-items: center;
+  box-shadow : none;
+  margin-bottom: 0px;
+
+  // border-top: 1px solid lighten(gray, 40%);
+
+  .image-holder {
+    border-radius: 50%;
+    padding: 10px;
+    border: 1px solid lighten(gray, 30%);
+    width: 15%;
+    height: 15%;
+  }
+
+  .image {
+    border-radius: 50%;
+    vertical-align: middle;
+    border: 1px solid gray;
+  }
+
+  .info {
+    margin: 1.5em;
+    box-shadow : none;
+    width: 60%;
+
+    .title {
+      font-size: 1.7em;
+      font-weight: 500;
+      margin-bottom: 0;
+      a {
+        color: darken(gray, 20%);
+      }
+      a:hover {
+        border-bottom: none;
+        color: #FF7F00;
+      }
+    }
+
+    .location  {
+      font-size: .9em;
+      a {
+        color: lighten(gray, 10%);
+      }
+    }
+
+    .description {
+      font-size: 1.7em;
+      font-weight: 200;
+      color: #FF7F00;
+    }
+
+    .time {
+      font-size: 1.6em;
+      font-weight: 400;
+    }
+  }
+
+  .main-event {
+    border-left: 1px solid gray;
+    border-radius: 0px;
+    box-shadow: none;
+    height: 8em;
+    // display: flex;
+    // align-items: center;
+
+    ul {
+      padding-left: .7em;
+    }
+
+    .active {
+      color: #FF7F00;
+    }
+  }
 }
diff --git a/content/events.erb b/content/events.erb
index 107c531..01c0757 100644
--- a/content/events.erb
+++ b/content/events.erb
@@ -9,17 +9,13 @@ title: Events
   </div>
 
   <% all_events.each do |event| %>
-  <div class="box">
-    <a href="<%= relative_path_to(event) %>">
-      <%= event[:title] %>
-    </a>
-    <% sub_events(event).each do |sub_event| %>
-    <div class="subevent">
-      <a href="<%= relative_path_to(sub_event) %>">
-        <%= sub_event[:title] %>
-      </a>
-    </div>
+    <!-- <hr class="divider"> -->
+    <% if (sub_events(event)).empty? %>
+      <%= render '/partials/_event_preview.*', event: event %>
+    <% else %>
+      <% sub_events(event).each do |sub_event| %>
+        <%= render '/partials/_event_preview.*', event: sub_event, main_event: event %>
+      <% end %>
     <% end %>
-  </div>
   <% end %>
 </div>
diff --git a/content/events/15-16/awk.md b/content/events/15-16/awk.md
index bf4c6e0..6b93e13 100644
--- a/content/events/15-16/awk.md
+++ b/content/events/15-16/awk.md
@@ -5,6 +5,7 @@ description: Een AWK-les voor AWK gerelateerde dingen
 created_at: 01-02-2016
 time: 23-02-2016
 location: Auditorium A1, Campus Sterre, Gebouw S9
+description: Dit is een description van het awk event!
 ---
 
 Op **dinsdag 23 februari 18:00** (na de les Scriptingtalen) in **Auditorium A1** organiseren we een **AWK-les** gegeven door **professor Peter Dawyndt**.
diff --git a/content/events/15-16/bottlebats/intro.md b/content/events/15-16/bottlebats/intro.md
index e610340..c410563 100644
--- a/content/events/15-16/bottlebats/intro.md
+++ b/content/events/15-16/bottlebats/intro.md
@@ -2,4 +2,5 @@
 title: Bottle Bats Introductie
 time: 12-3-16
 location: Grace Hopper
+description: Dit is een description!
 ---
diff --git a/content/events/15-16/bottlebats/test.md b/content/events/15-16/bottlebats/test.md
new file mode 100644
index 0000000..9c05546
--- /dev/null
+++ b/content/events/15-16/bottlebats/test.md
@@ -0,0 +1,6 @@
+---
+title: test
+time: 12-3-16
+location: Grace Hopper
+description: Dit is een description!
+---
diff --git a/layouts/partials/_event_preview.erb b/layouts/partials/_event_preview.erb
new file mode 100644
index 0000000..dc3f208
--- /dev/null
+++ b/layouts/partials/_event_preview.erb
@@ -0,0 +1,39 @@
+<div class="box event-preview">
+  <div class="image-holder">
+    <img src="https://placehold.it/150x150" alt="" class="image" />
+  </div>
+
+  <div class="box info">
+    <div class="title">
+      <a href="<%= relative_path_to(event) %>">
+        <%= event[:title] %>
+      </a>
+    </div>
+    <div class="location">
+      <a href="#">
+        <%= event[:location] %>
+      </a>
+    </div>
+    <div class="description">
+      <%= event[:description] %>
+    </div>
+    <div class="time">
+      <%= event[:time] %>
+    </div>
+  </div>
+
+  <% if @main_event %>
+    <div class="box main-event">
+      <p>
+        <%= main_event[:title] %>
+      </p>
+      <ul>
+        <% sub_events(main_event).each do |sub_event| %>
+          <li class="<%= "active" if sub_event[:title] == (event[:title])%>" >
+            <%= sub_event[:title] %>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</div>