diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6
index 7703901e113..dce1c86ffa2 100644
--- a/app/assets/javascripts/vue_pagination/index.js.es6
+++ b/app/assets/javascripts/vue_pagination/index.js.es6
@@ -8,117 +8,38 @@
       'count',
       'pagenum',
     ],
-    data() {
-      return {
-        nslice: +this.pagenum,
-        endcount: this.last,
-      };
-    },
     methods: {
       pagenumberstatus(n) {
         if (n - 1 === +this.pagenum) return 'active';
         return '';
       },
-      prevstatus() {
-        if (+this.pagenum > 1) return '';
-        return 'disabled';
-      },
-      createSection(n) {
-        return Array.from(Array(n)).map((e, i) => i);
-      },
+      createSection(n) { return Array.from(Array(n)).map((e, i) => i); },
     },
     computed: {
-      dynamicpage() {
-        const section = this.createSection(this.upcount);
-        section.shift();
-        this.nslice = +this.pagenum;
-        this.endcount = +this.pagenum + 5;
-        if (+this.pagenum + 5 <= this.last) {
-          return section.slice(+this.pagenum, +this.pagenum + 5);
-        }
-        if (+this.pagenum + 5 > this.last) {
-          return section.slice(this.last - 5, this.last);
-        }
-      },
-      paginationsection() {
-        if (this.last < 6 && this.pagenum < 6) {
-          const pageArray = this.createSection(6);
-          pageArray.shift();
-          return pageArray.slice(0, this.upcount);
-        }
-        return this.dynamicpage;
-      },
-      last() {
-        return Math.ceil(+this.count / 5);
-      },
-      upcount() {
-        return +this.last + 1;
-      },
-      endspread() {
-        if (+this.pagenum < this.last) return true;
-        return false;
-      },
-      begspread() {
-        if (+this.pagenum > 5 && +this.pagenum < this.last) return true;
-        return false;
+      last() { return Math.ceil(+this.count / 5); },
+      getItems() {
+        const items = [];
+        const pages = this.createSection(+this.last + 1);
+        pages.shift();
+
+        if (+this.pagenum !== 1) items.push({ text: 'Prev' });
+
+        pages.forEach(i => items.push({ text: i }));
+
+        if (+this.pagenum < this.last) items.push({ text: 'Next' });
+        if (+this.pagenum !== this.last) items.push({ text: 'Last »' });
+
+        return items;
       },
     },
     template: `
       <div class="gl-pagination">
-        <ul class="pagination clearfix" v-for='n in paginationsection'>
-          <li
-            :class='prevstatus(n)'
-            v-if='n - 1 === 1 || n - 1 === nslice || n - 1 === this.last - 5'
-          >
-            <span @click='changepage($event, {where: pagenum - 1})'>Prev</span>
-          </li>
-          <li v-if='n - 1 === last && upcount > 4 && begspread'>
-            <span class="gap">…</span>
-          </li>
-          <li :class='pagenumberstatus(n)' v-if='n >= 2'>
-            <span @click='changepage($event)'>{{(n - 1)}}</span>
-          </li>
-          <li v-if='(n === upcount || n === endcount) && +pagenum + 5 !== last'>
-            <span class="gap">…</span>
-          </li>
-          <li
-            class="next"
-            v-if='(n === upcount || n === endcount) && pagenum !== last'
-          >
-            <span @click='changepage($event,{where: +pagenum + 1})'>Next</span>
-          </li>
-          <li
-            class="last"
-            v-if='(n === upcount || n === endcount) && +pagenum !== last'
-          >
-            <span @click='changepage($event, {where: last})'>Last »</span>
+        <ul class="pagination clearfix" v-for='(item, index) in getItems'>
+          <li :class='pagenumberstatus(index + 1)'>
+            <span @click='changepage($event, last)'>{{item.text}}</span>
           </li>
         </ul>
       </div>
     `,
-    // render(createElement) {
-    //   return createElement('div', {
-    //     class: {
-    //       'gl-pagination': true,
-    //     },
-    //   }, [createElement('ul', {
-    //     class: {
-    //       pagination: true,
-    //       clearfix: true,
-    //     },
-    //   }, this.paginationsection.map((e, i) => {
-    //     if (!i) return createElement('li', [createElement('span', {
-    //       class: {
-    //         prev: this.prevstatus,
-    //       },
-    //     }, 'Prev')]);
-    //     if (i) {
-    //       return createElement('li',
-    //         [createElement('span', i)]
-    //       );
-    //     }
-    //   })),
-    //   ]);
-    // },
   });
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js.es6 b/app/assets/javascripts/vue_pipelines_index/index.js.es6
index 1aea0820208..f7657879ac4 100644
--- a/app/assets/javascripts/vue_pipelines_index/index.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/index.js.es6
@@ -34,7 +34,7 @@
         <vue-pipelines
           :scope='scope'
           :store='store'
-          :count='90'
+          :count='count'
         >
         </vue-pipelines>
       </div>
diff --git a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6
index 2ead571aa9f..510e54f3a6f 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipeline_head.js.es6
@@ -3,13 +3,6 @@
 
 ((gl) => {
   gl.VuePipelineHead = Vue.extend({
-    components: {
-      'vue-running-icon': gl.VueRunningIcon,
-    },
-    props: [
-      'pipeline',
-      'pipelineurl',
-    ],
     template: `
       <thead>
         <tr>
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
index 4ef9fca6474..ecb07af9a32 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -35,10 +35,12 @@
       shortsha(pipeline) {
         return pipeline.sha.slice(0, 8);
       },
-      changepage(event, page = {}) {
-        if (page) this.pagenum = +event.target.innerText;
-        if (page.where) this.pagenum = +page.where;
-        if (page.where) this.pagenum = +page.where;
+      changepage(event, last) {
+        const text = event.target.innerText;
+        if (typeof +text === 'number') this.pagenum = +text;
+        if (text === 'Last »') this.pagenum = last;
+        if (text === 'Next') this.pagnum = +this.pagenum + 1;
+        if (text === 'Prev') this.pagenum = +this.pagenum - 1;
 
         window.history.pushState({}, null, `?p=${this.pagenum}`);
         clearInterval(this.intervalId);
diff --git a/app/assets/javascripts/vue_pipelines_index/store.js.es6 b/app/assets/javascripts/vue_pipelines_index/store.js.es6
index 89982b11b31..d4b0c79f225 100644
--- a/app/assets/javascripts/vue_pipelines_index/store.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/store.js.es6
@@ -21,7 +21,7 @@
       // eventually clearInterval(this.intervalId)
       this.intervalId = setInterval(() => {
         goFetch();
-      }, 60000);
+      }, 3000);
     }
   };
 })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_pipelines_status/failed.js.es6 b/app/assets/javascripts/vue_pipelines_status/failed.js.es6
index 92373e12c25..a877cfc688e 100644
--- a/app/assets/javascripts/vue_pipelines_status/failed.js.es6
+++ b/app/assets/javascripts/vue_pipelines_status/failed.js.es6
@@ -4,7 +4,7 @@
 ((gl) => {
   gl.VueFailedScope = Vue.extend({
     components: {
-      'vue-failed-icon': gl.VuePendingIcon,
+      'vue-failed-icon': gl.VueFailedIcon,
     },
     props: [
       'scope',