diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
index 189dd2c7dcec77e594a0e036ed5647da5769a4d8..f2c2524908db5d58c4d8472e6a0b1a2fcd036c24 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.js
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -109,7 +109,9 @@ export default Vue.component('pipelines-table', {
         <i class="fa fa-spinner fa-spin"></i>
       </div>
 
-      <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
+      <empty-state
+        v-if="shouldRenderEmptyState"
+        :help-page-path="helpPagePath" />
 
       <error-state v-if="shouldRenderErrorState" />
 
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
index 78f111c74bcd0efe9ee5b41cef25a76a936f52c0..56b4858f4b487f1e60866d5c68713075edd8fc7d 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
@@ -8,21 +8,15 @@ export default {
     },
   },
 
-  data() {
-    return {
-      pipelinesEmptyStateSVG,
-    };
-  },
-
   template: `
-    <div class="row empty-state js-pipelines-empty-state">
-      <div class="col-xs-12 pull-right">
+    <div class="row empty-state">
+      <div class="col-xs-12">
         <div class="svg-content">
           ${pipelinesEmptyStateSVG}
         </div>
       </div>
 
-      <div class="col-xs-12 center">
+      <div class="col-xs-12 text-center">
         <div class="text-content">
           <h4>Build with confidence</h4>
           <p>
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.js b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
index f197395a6dbf4de4e636e7b0661f49e944efe4f1..e5d228bddf8cdf7cfb86051a6a6cf924b604575d 100644
--- a/app/assets/javascripts/vue_pipelines_index/components/error_state.js
+++ b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
@@ -1,21 +1,15 @@
 import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
 
 export default {
-  data() {
-    return {
-      pipelinesErrorStateSVG,
-    };
-  },
-
   template: `
     <div class="row empty-state js-pipelines-error-state">
-      <div class="col-xs-12 pull-right">
+      <div class="col-xs-12">
         <div class="svg-content">
           ${pipelinesErrorStateSVG}
         </div>
       </div>
 
-      <div class="col-xs-12 center">
+      <div class="col-xs-12 text-center">
         <div class="text-content">
           <h4>The API failed to fetch the pipelines.</h4>
         </div>
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
index 885ad465179c3e91509059868fef75ba0524cf94..796fd5b581ed82eb96698b3f1cf5d09bb90744de 100644
--- a/app/assets/javascripts/vue_pipelines_index/pipelines.js
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -1,7 +1,4 @@
-/* global Flash */
-/* eslint-disable no-new */
 import Vue from 'vue';
-import '~/flash';
 import PipelinesService from './services/pipelines_service';
 import eventHub from './event_hub';
 import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
@@ -177,14 +174,12 @@ export default {
         .catch(() => {
           this.hasError = true;
           this.pageRequest = false;
-          new Flash('An error occurred while fetching the pipelines, please reload the page again.');
         });
     },
   },
 
   template: `
-    <div
-      :class="cssClass">
+    <div :class="cssClass">
 
       <div
         class="top-area"
@@ -207,10 +202,14 @@ export default {
         <div
           class="realtime-loading"
           v-if="pageRequest">
-          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
         </div>
 
-        <empty-state v-if="shouldRenderEmptyState" :helpPagePath="helpPagePath" />
+        <empty-state
+          v-if="shouldRenderEmptyState"
+          :help-page-path="helpPagePath" />
 
         <error-state v-if="shouldRenderErrorState" />
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 44ed6dcf33a3fdd2c2548b755a2fba3fcbe00a6f..e8791f8d513428244edd04a07e6afc2acffb220a 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -14,6 +14,10 @@
     white-space: nowrap;
   }
 
+  .empty-state {
+    margin: 5% auto 0;
+  }
+
   .table-holder {
     width: 100%;
     overflow: auto;
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js
index cb51e6f3ef3db29314ef2b19d35ca6d1b8680c53..65093e533320a79cb11aa17c249574e2c447ccbd 100644
--- a/spec/javascripts/commit/pipelines/pipelines_spec.js
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js
@@ -33,7 +33,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
         });
 
         setTimeout(() => {
-          expect(component.$el.querySelector('.js-pipelines-empty-state')).toBeDefined();
+          expect(component.$el.querySelector('.empty-state')).toBeDefined();
           done();
         }, 1);
       });
diff --git a/spec/javascripts/vue_pipelines_index/pipelines_spec.js b/spec/javascripts/vue_pipelines_index/pipelines_spec.js
index 22d1c4e16a317d753a23ae577be3984c938253e2..b57761e3b12f76f9ed3bdf677fae95364c9ce1f5 100644
--- a/spec/javascripts/vue_pipelines_index/pipelines_spec.js
+++ b/spec/javascripts/vue_pipelines_index/pipelines_spec.js
@@ -71,7 +71,7 @@ describe('Pipelines', () => {
         }).$mount();
 
         setTimeout(() => {
-          expect(component.$el.querySelector('.js-pipelines-empty-state')).toBeDefined();
+          expect(component.$el.querySelector('.empty-state')).toBeDefined();
           done();
         });
       });