diff --git a/app/assets/javascripts/vue_pagination/index.js.es6 b/app/assets/javascripts/vue_pagination/index.js.es6
index 8dabfef3b95..ed0d6f35ea6 100644
--- a/app/assets/javascripts/vue_pagination/index.js.es6
+++ b/app/assets/javascripts/vue_pagination/index.js.es6
@@ -10,6 +10,9 @@
     ],
     methods: {
       pagestatus(n) {
+        if (this.getItems[1].prev) {
+          if (n === +this.pagenum) return true;
+        }
         if (n - 1 === +this.pagenum) return true;
         return false;
       },
@@ -27,12 +30,17 @@
         const pages = this.createSection(+this.last + 1);
         pages.shift();
 
-        items.push({ text: 'Prev', class: this.prevstatus() });
+        if (+this.pagenum > 1) items.push({ text: 'First', first: true });
 
-        pages.forEach(i => items.push({ text: i }));
+        items.push({ text: 'Prev', prev: true, class: this.prevstatus() });
 
-        if (+this.pagenum < this.last) items.push({ text: 'Next' });
-        if (+this.pagenum !== this.last) items.push({ text: 'Last »' });
+        pages.forEach(i => items.push({ text: i, number: true }));
+
+        let nextDisabled = false;
+        if (+this.pagenum === this.last) { nextDisabled = true; }
+        items.push({ text: 'Next', next: true, disabled: nextDisabled });
+
+        if (+this.pagenum !== this.last) items.push({ text: 'Last »', last: true });
 
         return items;
       },
@@ -40,9 +48,40 @@
     template: `
       <div class="gl-pagination">
         <ul class="pagination clearfix" v-for='(item, i) in getItems'>
-          <li :class="{active: pagestatus(i + 1), disabled: prevstatus(i)}">
+          <!-- if defined as the first button, render first -->
+          <li
+            v-if='item.first'
+          >
+            <span @click='changepage($event)'>{{item.text}}</span>
+          </li>
+          <!-- if defined as the prev button, render prev -->
+          <li
+            :class="{disabled: prevstatus(i)}"
+            v-if='item.prev'
+          >
+            <span @click='changepage($event)'>{{item.text}}</span>
+          </li>
+          <!-- if defined as the next button, render next -->
+          <li
+            v-if='item.next'
+            :class="{disabled: item.disabled}"
+          >
+            <span @click='changepage($event)'>{{item.text}}</span>
+          </li>
+          <!-- if defined as the last button, render last -->
+          <li
+            v-if='item.last'
+            :class="{disabled: item.disabled}"
+          >
             <span @click='changepage($event, last)'>{{item.text}}</span>
           </li>
+          <!-- if defined as the number button, render number -->
+          <li
+            :class="{active: pagestatus((i))}"
+            v-if='item.number'
+          >
+            <span @click='changepage($event)'>{{item.text}}</span>
+          </li>
         </ul>
       </div>
     `,
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6 b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
index c3fdcd7249c..5c64ec57cce 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js.es6
@@ -41,6 +41,7 @@
         if (text === 'Last »') this.pagenum = last;
         if (text === 'Next') this.pagenum = +this.pagenum + 1;
         if (text === 'Prev') this.pagenum = +this.pagenum - 1;
+        if (text === 'First') this.pagenum = 1;
 
         window.history.pushState({}, null, `?p=${this.pagenum}`);
         clearInterval(this.intervalId);