diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6
index 3657d9c5b0daa4b838ae2c1969a0d7c45fdbf55a..3666155344464ce2b56c30f7f87aa672e3891ead 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6
@@ -2,6 +2,7 @@
 //= require vue-resource
 
 //= require ./store.js.es6
+//= require ./running_icon.vue.js.es6
+//= require ./running.vue.js.es6
 //= require ./status_data_icons.js.es6
-//= require ./vue_commit_link.vue.js.es6
 //= require ./pipelines.vue.js.es6
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
index 8036febd5935158064eab87984f78babf023cd09..ba6ef3011ab355cba010ba9309c9bbce82bcf83e 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6
@@ -3,13 +3,19 @@
 
 ((gl) => {
   gl.VuePipeLines = Vue.extend({
+    components: {
+      'vue-running-pipeline': gl.VueRunningPipeline,
+    },
     data() {
       return {
         pipelines: [],
         runnerStats: new gl.RunnerStats(),
       };
     },
-    props: ['scope', 'store'],
+    props: [
+      'scope',
+      'store',
+    ],
     created() {
       this.store.fetchDataLoop.call(this, Vue);
     },
@@ -31,24 +37,15 @@
       </thead>
       <tbody v-for='pipeline in pipelines'>
         <tr class="commit">
-          <td class="commit-link">
-            <a href="pipelines/{{pipeline.id}}">
-              <div v-if="pipeline.status === 'running'">
-                <span class="ci-status ci-{{pipeline.status}}">
-                  running
-                </span>
-              </div>
-              <div v-if="pipeline.status === 'passed'">
-                <span class="ci-status ci-{{pipeline.status}}">
-                  passed
-                </span>
-              </div>
-            </a>
+          <td class="commit-link" v-if="pipeline.status === 'running'">
+            <vue-running-pipeline :pipe='pipeline'></vue-running-pipeline>
           </td>
           <td>
-          <a href="pipelines/{{pipeline.id}}"><span class="pipeline-id">#{{pipeline.id}}</span>
-          </a><span>by</span>
-          <span class="api monospace">{{pipeline.user}}</span>
+            <a href="pipelines/{{pipeline.id}}">
+              <span class="pipeline-id">#{{pipeline.id}}</span>
+            </a>
+            <span>by</span>
+            <span class="api monospace">{{pipeline.user}}</span>
           </td>
           <td class="branch-commit">
             <div class="icon-container">
diff --git a/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6
new file mode 100644
index 0000000000000000000000000000000000000000..5edf8403bd96ac40c6ed497dc3be801f711a961d
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/running.vue.js.es6
@@ -0,0 +1,25 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRunningPipeline = Vue.extend({
+    components: {
+      'vue-running-icon': gl.VueRunningIcon,
+    },
+    props: [
+      'pipe',
+    ],
+    template: `
+      <td class="commit-link">
+        <a href="pipelines/{{pipe.id}}">
+          <span class="ci-status ci-running">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+              <vue-running-icon></vue-running-icon>
+            </svg>
+            &nbsp;running
+          </span>
+        </a>
+      </td>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6
new file mode 100644
index 0000000000000000000000000000000000000000..c37f213525c552dfb25612b4b8a076f0471789fe
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/running_icon.vue.js.es6
@@ -0,0 +1,13 @@
+/* global Vue, gl */
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRunningIcon = Vue.extend({
+    template: `
+      <g fill="#2D9FD8" fill-rule="evenodd">
+        <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"></path>
+        <path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"></path>
+      </g>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
index 7479caf107d74dacdaac481214ec03e15eb9b0ab..38797f85f0ae1ff123e26132239e8b36ac4020c5 100644
--- a/app/assets/javascripts/vue_pipelines_index/store.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6
@@ -13,7 +13,6 @@
           });
 
       goFetch(Vue);
-
       setInterval(() => {
         console.log('DID IT');
         goFetch(Vue);
diff --git a/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6 b/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6
deleted file mode 100644
index 9e2ef8993a290e4b0ea2e6be5ca78878eba85c11..0000000000000000000000000000000000000000
--- a/app/assets/javascripts/vue_pipelines_index/vue_commit_link.vue.js.es6
+++ /dev/null
@@ -1,50 +0,0 @@
-
-/* global Vue, gl */
-/* eslint-disable no-param-reassign */
-
-((gl) => {
-  gl.VueCommitLink = Vue.extend({
-    props: ['pipeline'],
-    template: `
-      <td class="commit-link">
-        <a href="pipelines/{{pipeline.id}}">
-          <div v-if="pipeline.status === 'running'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'passed'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'created'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === ''">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'r'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'ru'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-          <div v-if="pipeline.status === 'run'">
-            <span class="ci-status ci-{{pipeline.status}}">
-              <vue-runner-running></vue-runner-running>
-            </span>
-          </div>
-        </a>
-      </td>
-    `,
-  });
-})(window.gl || (window.gl = {}));
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 7cb77f2034b0bc850a3063f70643d75896119739..6309de5140921efddab10c93625a59ce8921d145 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -56,7 +56,6 @@
       store: new gl.PipelineStore(),
     },
     components: {
-      'vue-commit-link': gl.VueCommitLink,
       'vue-pipelines': gl.VuePipeLines,
     },
     template: ""