diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 5bc8c3a7e6c..e79c7e59720 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -231,7 +231,57 @@
 }
 
 // Pipeline visualization
+
+.pipeline-visualization {
+  position: relative;
+}
+
 .stage-column {
   display: inline-block;
   vertical-align: top;
+  margin-right: 40px;
+
+  .stage-name {
+    margin-bottom: 15px;
+    font-weight: bold;
+  }
+
+  .builds-container {
+
+  }
+
+  .build {
+    border: 1px solid $border-color;
+    position: relative;
+    padding: 6px 10px;
+    border-radius: 30px;
+    width: 150px;
+    // TODO truncate text within .build div; not on build div itself
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    margin-bottom: 10px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      margin-right: 5px;
+    }
+
+    &:first-child {
+      &::after, &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: -44px;
+        border-top: 1px solid $border-color;
+        width: 44px;
+        height: 1px;
+      }
+    }
+    &:first-child::before, &:last-child::after{
+      border: 0 none;
+    }
+
+  }
 }
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index 2452326fc04..b993ad5ce50 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,16 +1,22 @@
-.row-content-block.build-content.middle-block
+.row-content-block.white
+
   .pipeline-visualization
     - pipeline.statuses.stages.each do |stage|
       - statuses = pipeline.statuses.where(stage: stage)
+      - status = statuses.latest.status
       .stage-column
-        %strong
+        .stage-name
           %a{name: stage}
           - if stage
             = stage.titleize
-        - statuses.each do |status|
-          %div= status.name
-
+        .builds-container
+          - statuses.each do |build|
+            .build
+              %span{class: "ci-status-link ci-status-icon-#{status}"}
+                = ci_icon_for_status(status)
+              = build.name
 
+.row-content-block.build-content.middle-block
   .pull-right
     - if can?(current_user, :update_pipeline, pipeline.project)
       - if pipeline.builds.latest.failed.any?(&:retryable?)