diff --git a/app/assets/sass/_status-page.scss b/app/assets/sass/_status-page.scss
index 9d1e70b8..a876d05f 100644
--- a/app/assets/sass/_status-page.scss
+++ b/app/assets/sass/_status-page.scss
@@ -63,22 +63,116 @@ body.status-page {
         }
     }
 
-    .badge {
-        padding-top: 8px;
-        padding-bottom: 8px;
-        padding-left: 12px;
-        padding-right: 12px;
-        &.badge-incident-1 {
-            background-color: $orange;
+    .timeline {
+        .content-wrapper {
+            margin-top: 40px;
+            margin-bottom: 40px;
         }
-        &.badge-incident-2 {
-            background-color: $yellow;
+        h3 {
+            margin-top: 30px;
+            margin-bottom: 40px;
+            font-size: 22px;
+            small {
+                margin-left: 15px;
+            }
         }
-        &.badge-incident-3 {
-            background-color: $blue;
+        .moment {
+            width: 100%;
+            padding-bottom: 50px;
+            position: relative;
+            &.first {
+                &:before {
+                    height: 130%;
+                    top: -20px;
+                }
+                &:after {
+                    content: '';
+                    position: absolute;
+                    left: 23px;
+                    top: -20px;
+                    width: 7px;
+                    height: 7px;
+                    background: $grey;
+                    border-radius: 50%;
+                }
+            }
+            &:before {
+                content: '';
+                position: absolute;
+                left: 25px;
+                top: 5px;
+                width: 3px;
+                height: 100%;
+                background: #eee;
+            }
+            .icon {
+                background: #000;
+                width: 35px;
+                height: 35px;
+                border-radius: 50%;
+                position: absolute;
+                left: 24px;
+                top: 4px;
+                .fa {
+                    color: #fff;
+                    position: absolute;
+                    &.fa-flag {
+                        top: 10px;
+                        left: 11px;
+                    }
+                    &.fa-warning {
+                        top: 10px;
+                        left: 11px;
+                    }
+                    &.fa-eye {
+                        top: 10px;
+                        left: 11px;
+                    }
+                    &.fa-check {
+                        top: 10px;
+                        left: 11px;
+                    }
+                }
+                &.status-1 {
+                    background-color: $orange;
+                }
+                &.status-2 {
+                    background-color: $yellow;
+                }
+                &.status-3 {
+                    background-color: $blue;
+                }
+                &.status-4 {
+                    background-color: $green;
+                }
+            }
+            &.last:before {
+                background: #fff;
+            }
+            .message .content {
+                float: left;
+                width: 80%;
+                p {
+                    margin-top: 15px;
+                    color: #555;
+                    .date {
+                        display: block;
+                        color: $dark-grey;
+                        margin-bottom: 6px;
+                        font-size: 13px;
+                    }
+                }
+            }
         }
-        &.badge-incident-4 {
-            background-color: $green;
+    }
+    @media (max-width: 991px) {
+        .timeline .moment .icon {
+            left: 17px;
+        }
+    }
+    @media (max-width: 767px) {
+        .timeline .moment .message .content {
+            width: 100%;
         }
     }
 
@@ -93,24 +187,8 @@ body.status-page {
             border: 1px solid $grey;
             font-size: 1.1em;
 
-            span.badge {
-                position: absolute;
-                top: 0;
-                right: 0;
-                border-radius: 0;
-                display: block;
-            }
-
-            i.glyphicon {
-                font-size: 1.4em;
-                color: rgba(white, 0.9);
-            }
-
-            h1, h2, h3, h4 {
-                margin-bottom: 2px;
-            }
-
             h4 {
+                margin-bottom: 2px;
                 font-weight: 400;
                 max-width: 90%;
             }
@@ -119,29 +197,6 @@ body.status-page {
                 margin-bottom: 0;
                 line-height: 1.3em;
             }
-
-            time {
-                color: #6C7A89;
-                // letter-spacing: 0.02em;
-                font-weight: 300;
-                font-size: 1.1em;
-            }
-
-            &.active {
-                background-color: #F2F1EF;
-                h3 {
-                    color: #22313F;
-                    padding-top: 2px;
-                    padding-bottom: 2px;
-                    font-weight: 600;
-                    font-size: 1.4em;
-                }
-
-                &:hover {
-                    color: inherit;
-                    border-color: $grey;
-                }
-            }
         }
 
         &.components {
diff --git a/app/views/partials/incident.blade.php b/app/views/partials/incident.blade.php
index 1cdd0f5b..4ee9fa71 100644
--- a/app/views/partials/incident.blade.php
+++ b/app/views/partials/incident.blade.php
@@ -1,23 +1,29 @@
-<ul class='list-group'>
-    <?php
-        $incidentDate = Carbon::now()->subDays($i);
-        $incidents = Incident::whereRaw('DATE(created_at) = "' . $incidentDate->format('Y-m-d') . '"')->orderBy('created_at', 'desc')->get();
-    ?>
-    <li class='list-group-item active'>
-        <h3 class='list-group-item-heading'>{{ $incidentDate->format('jS M Y') }}</h3>
-    </li>
-
-    @unless($incidents->count() > 0)
-    <li class='list-group-item'>{{ Lang::get('cachet.no_incidents') }}</li>
-    @endunless
-
-    @foreach($incidents as $incidentID => $incident)
-    <li class='list-group-item'>
-        <span class='badge badge-incident-{{ $incident->status }}'><i class='glyphicon {{ $incident->icon }}'></i></span>
-        <h4>{{ $incident->name }} <small><time>{{ $incident->created_at->format('H:i:s A') }}</time></small></h4>
-        {{ $incident->message }}
-        @if($incidentID < ($incident->count() - 1))
-    </li>
-    @endif
-    @endforeach
-</ul>
+<?php
+    $incidentDate = Carbon::now()->subDays($i);
+    $incidents = Incident::whereRaw('DATE(created_at) = "' . $incidentDate->format('Y-m-d') . '"')->orderBy('created_at', 'desc')->get();
+?>
+<h3>{{ $incidentDate->format('jS M Y') }}</h3>
+<div class='timeline'>
+    <div class='content-wrapper'>
+        @foreach($incidents as $incidentID => $incident)
+        <div class='moment {{ $incidentID === 0 ? "first" : null }}'>
+            <div class="row event clearfix">
+                <div class="col-sm-1">
+                    <div class="icon status-{{ $incident->status }}">
+                        <i class="{{ $incident->icon }}"></i>
+                    </div>
+                </div>
+                <div class="col-sm-11 message">
+                    <div class="content">
+                        <strong>{{ $incident->name }}</strong>
+                        <p>
+                            <span class='date'>{{ $incident->created_at->diffForHumans() }}</span>
+                            {{ $incident->message }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        @endforeach
+    </div>
+</div>
diff --git a/public/build/css/all-cd88aa4c.css b/public/build/css/all-301b2b9a.css
similarity index 98%
rename from public/build/css/all-cd88aa4c.css
rename to public/build/css/all-301b2b9a.css
index a5458a11..1ba3e853 100644
--- a/public/build/css/all-cd88aa4c.css
+++ b/public/build/css/all-301b2b9a.css
@@ -4416,19 +4416,91 @@ body.status-page {
       background: #ff6f6f;
       border-color: #ff3c3c;
       color: #FFF; }
-  body.status-page .badge {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 12px;
-    padding-right: 12px; }
-    body.status-page .badge.badge-incident-1 {
-      background-color: #E87E04; }
-    body.status-page .badge.badge-incident-2 {
-      background-color: #F7CA18; }
-    body.status-page .badge.badge-incident-3 {
-      background-color: #3498db; }
-    body.status-page .badge.badge-incident-4 {
-      background-color: #2ECC71; }
+  body.status-page .timeline .content-wrapper {
+    margin-top: 40px;
+    margin-bottom: 40px; }
+  body.status-page .timeline h3 {
+    margin-top: 30px;
+    margin-bottom: 40px;
+    font-size: 22px; }
+    body.status-page .timeline h3 small {
+      margin-left: 15px; }
+  body.status-page .timeline .moment {
+    width: 100%;
+    padding-bottom: 50px;
+    position: relative; }
+    body.status-page .timeline .moment.first:before {
+      height: 130%;
+      top: -20px; }
+    body.status-page .timeline .moment.first:after {
+      content: '';
+      position: absolute;
+      left: 23px;
+      top: -20px;
+      width: 7px;
+      height: 7px;
+      background: #ecf0f1;
+      border-radius: 50%; }
+    body.status-page .timeline .moment:before {
+      content: '';
+      position: absolute;
+      left: 25px;
+      top: 5px;
+      width: 3px;
+      height: 100%;
+      background: #eee; }
+    body.status-page .timeline .moment .icon {
+      background: #000;
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      position: absolute;
+      left: 24px;
+      top: 4px; }
+      body.status-page .timeline .moment .icon .fa {
+        color: #fff;
+        position: absolute; }
+        body.status-page .timeline .moment .icon .fa.fa-flag {
+          top: 10px;
+          left: 11px; }
+        body.status-page .timeline .moment .icon .fa.fa-warning {
+          top: 10px;
+          left: 11px; }
+        body.status-page .timeline .moment .icon .fa.fa-eye {
+          top: 10px;
+          left: 11px; }
+        body.status-page .timeline .moment .icon .fa.fa-check {
+          top: 10px;
+          left: 11px; }
+      body.status-page .timeline .moment .icon.status-1 {
+        background-color: #E87E04; }
+      body.status-page .timeline .moment .icon.status-2 {
+        background-color: #F7CA18; }
+      body.status-page .timeline .moment .icon.status-3 {
+        background-color: #3498db; }
+      body.status-page .timeline .moment .icon.status-4 {
+        background-color: #2ECC71; }
+    body.status-page .timeline .moment.last:before {
+      background: #fff; }
+    body.status-page .timeline .moment .message .content {
+      float: left;
+      width: 80%; }
+      body.status-page .timeline .moment .message .content p {
+        margin-top: 15px;
+        color: #555; }
+        body.status-page .timeline .moment .message .content p .date {
+          display: block;
+          color: #cfd9db;
+          margin-bottom: 6px;
+          font-size: 13px; }
+  @media (max-width: 991px) {
+    body.status-page .timeline .moment .icon {
+      left: 17px; }
+ }
+  @media (max-width: 767px) {
+    body.status-page .timeline .moment .message .content {
+      width: 100%; }
+ }
   body.status-page .list-group {
     margin-bottom: 20px;
     padding-left: 0;
@@ -4438,38 +4510,13 @@ body.status-page {
       background-color: #ffffff;
       border: 1px solid #ecf0f1;
       font-size: 1.1em; }
-      body.status-page .list-group .list-group-item span.badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        border-radius: 0;
-        display: block; }
-      body.status-page .list-group .list-group-item i.glyphicon {
-        font-size: 1.4em;
-        color: rgba(255, 255, 255, 0.9); }
-      body.status-page .list-group .list-group-item h1, body.status-page .list-group .list-group-item h2, body.status-page .list-group .list-group-item h3, body.status-page .list-group .list-group-item h4 {
-        margin-bottom: 2px; }
       body.status-page .list-group .list-group-item h4 {
+        margin-bottom: 2px;
         font-weight: 400;
         max-width: 90%; }
       body.status-page .list-group .list-group-item p, body.status-page .list-group .list-group-item time {
         margin-bottom: 0;
         line-height: 1.3em; }
-      body.status-page .list-group .list-group-item time {
-        color: #6C7A89;
-        font-weight: 300;
-        font-size: 1.1em; }
-      body.status-page .list-group .list-group-item.active {
-        background-color: #F2F1EF; }
-        body.status-page .list-group .list-group-item.active h3 {
-          color: #22313F;
-          padding-top: 2px;
-          padding-bottom: 2px;
-          font-weight: 600;
-          font-size: 1.4em; }
-        body.status-page .list-group .list-group-item.active:hover {
-          color: inherit;
-          border-color: #ecf0f1; }
     body.status-page .list-group.components {
       margin-bottom: 30px; }
       body.status-page .list-group.components p {
diff --git a/public/build/css/all.css b/public/build/css/all.css
index a5458a11..1ba3e853 100644
--- a/public/build/css/all.css
+++ b/public/build/css/all.css
@@ -4416,19 +4416,91 @@ body.status-page {
       background: #ff6f6f;
       border-color: #ff3c3c;
       color: #FFF; }
-  body.status-page .badge {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 12px;
-    padding-right: 12px; }
-    body.status-page .badge.badge-incident-1 {
-      background-color: #E87E04; }
-    body.status-page .badge.badge-incident-2 {
-      background-color: #F7CA18; }
-    body.status-page .badge.badge-incident-3 {
-      background-color: #3498db; }
-    body.status-page .badge.badge-incident-4 {
-      background-color: #2ECC71; }
+  body.status-page .timeline .content-wrapper {
+    margin-top: 40px;
+    margin-bottom: 40px; }
+  body.status-page .timeline h3 {
+    margin-top: 30px;
+    margin-bottom: 40px;
+    font-size: 22px; }
+    body.status-page .timeline h3 small {
+      margin-left: 15px; }
+  body.status-page .timeline .moment {
+    width: 100%;
+    padding-bottom: 50px;
+    position: relative; }
+    body.status-page .timeline .moment.first:before {
+      height: 130%;
+      top: -20px; }
+    body.status-page .timeline .moment.first:after {
+      content: '';
+      position: absolute;
+      left: 23px;
+      top: -20px;
+      width: 7px;
+      height: 7px;
+      background: #ecf0f1;
+      border-radius: 50%; }
+    body.status-page .timeline .moment:before {
+      content: '';
+      position: absolute;
+      left: 25px;
+      top: 5px;
+      width: 3px;
+      height: 100%;
+      background: #eee; }
+    body.status-page .timeline .moment .icon {
+      background: #000;
+      width: 35px;
+      height: 35px;
+      border-radius: 50%;
+      position: absolute;
+      left: 24px;
+      top: 4px; }
+      body.status-page .timeline .moment .icon .fa {
+        color: #fff;
+        position: absolute; }
+        body.status-page .timeline .moment .icon .fa.fa-flag {
+          top: 10px;
+          left: 11px; }
+        body.status-page .timeline .moment .icon .fa.fa-warning {
+          top: 10px;
+          left: 11px; }
+        body.status-page .timeline .moment .icon .fa.fa-eye {
+          top: 10px;
+          left: 11px; }
+        body.status-page .timeline .moment .icon .fa.fa-check {
+          top: 10px;
+          left: 11px; }
+      body.status-page .timeline .moment .icon.status-1 {
+        background-color: #E87E04; }
+      body.status-page .timeline .moment .icon.status-2 {
+        background-color: #F7CA18; }
+      body.status-page .timeline .moment .icon.status-3 {
+        background-color: #3498db; }
+      body.status-page .timeline .moment .icon.status-4 {
+        background-color: #2ECC71; }
+    body.status-page .timeline .moment.last:before {
+      background: #fff; }
+    body.status-page .timeline .moment .message .content {
+      float: left;
+      width: 80%; }
+      body.status-page .timeline .moment .message .content p {
+        margin-top: 15px;
+        color: #555; }
+        body.status-page .timeline .moment .message .content p .date {
+          display: block;
+          color: #cfd9db;
+          margin-bottom: 6px;
+          font-size: 13px; }
+  @media (max-width: 991px) {
+    body.status-page .timeline .moment .icon {
+      left: 17px; }
+ }
+  @media (max-width: 767px) {
+    body.status-page .timeline .moment .message .content {
+      width: 100%; }
+ }
   body.status-page .list-group {
     margin-bottom: 20px;
     padding-left: 0;
@@ -4438,38 +4510,13 @@ body.status-page {
       background-color: #ffffff;
       border: 1px solid #ecf0f1;
       font-size: 1.1em; }
-      body.status-page .list-group .list-group-item span.badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        border-radius: 0;
-        display: block; }
-      body.status-page .list-group .list-group-item i.glyphicon {
-        font-size: 1.4em;
-        color: rgba(255, 255, 255, 0.9); }
-      body.status-page .list-group .list-group-item h1, body.status-page .list-group .list-group-item h2, body.status-page .list-group .list-group-item h3, body.status-page .list-group .list-group-item h4 {
-        margin-bottom: 2px; }
       body.status-page .list-group .list-group-item h4 {
+        margin-bottom: 2px;
         font-weight: 400;
         max-width: 90%; }
       body.status-page .list-group .list-group-item p, body.status-page .list-group .list-group-item time {
         margin-bottom: 0;
         line-height: 1.3em; }
-      body.status-page .list-group .list-group-item time {
-        color: #6C7A89;
-        font-weight: 300;
-        font-size: 1.1em; }
-      body.status-page .list-group .list-group-item.active {
-        background-color: #F2F1EF; }
-        body.status-page .list-group .list-group-item.active h3 {
-          color: #22313F;
-          padding-top: 2px;
-          padding-bottom: 2px;
-          font-weight: 600;
-          font-size: 1.4em; }
-        body.status-page .list-group .list-group-item.active:hover {
-          color: inherit;
-          border-color: #ecf0f1; }
     body.status-page .list-group.components {
       margin-bottom: 30px; }
       body.status-page .list-group.components p {
diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json
index ab30a8da..ca171d32 100644
--- a/public/build/rev-manifest.json
+++ b/public/build/rev-manifest.json
@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-cd88aa4c.css",
+  "css/all.css": "css/all-301b2b9a.css",
   "js/all.js": "js/all-d8f5640f.js"
 }
\ No newline at end of file