diff --git a/src/server/sass/build.js b/src/server/sass/build.js
index 07deedec5958c..fde59b96334ef 100644
--- a/src/server/sass/build.js
+++ b/src/server/sass/build.js
@@ -23,7 +23,7 @@ import fs from 'fs';
 import sass from 'node-sass';
 import autoprefixer from 'autoprefixer';
 import postcss from 'postcss';
-import postcssUrl from 'postcss-url';
+import postcssUrl from 'postcss-url'; // eslint-disable-line import/no-unresolved
 import mkdirp from 'mkdirp';
 import chalk from 'chalk';
 import isPathInside from 'is-path-inside';
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js
index 67461e156f28b..9dadb1a8960da 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js
@@ -512,7 +512,7 @@ export const FollowerIndexForm = injectI18n(
               <Fragment>
                 <EuiSpacer size="s"/>
                 {advancedSettingsFields.map((advancedSetting) => {
-                  const { field, title, description, label, helpText, defaultValue } = advancedSetting;
+                  const { field, title, description, label, helpText, defaultValue, type } = advancedSetting;
                   return (
                     <FormEntryRow
                       key={field}
@@ -539,6 +539,7 @@ export const FollowerIndexForm = injectI18n(
                       )}
                       label={label}
                       helpText={helpText}
+                      type={type}
                       areErrorsVisible={areErrorsVisible}
                       onValueUpdate={this.onFieldsChange}
                     />
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js b/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js
index bfc7d8e3c6c7b..533559c7cd604 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js
@@ -49,7 +49,14 @@ export class FormEntryRow extends PureComponent {
   onFieldChange = (value) => {
     const { field, onValueUpdate, type } = this.props;
     const isNumber = type === 'number';
-    onValueUpdate({ [field]: isNumber ? parseInt(value, 10) : value });
+
+    let valueParsed = value;
+
+    if (isNumber) {
+      valueParsed = !!value ? Math.max(0, parseInt(value, 10)) : value; // make sure we don't send NaN value or a negative number
+    }
+
+    onValueUpdate({ [field]: valueParsed });
   }
 
   renderField = (isInvalid) => {
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/remote_clusters_form_field.js b/x-pack/plugins/cross_cluster_replication/public/app/components/remote_clusters_form_field.js
index 33f9072068a08..7e6465f00a198 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/components/remote_clusters_form_field.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/components/remote_clusters_form_field.js
@@ -99,13 +99,10 @@ export const RemoteClustersFormField = injectI18n(
       const hasClusters = Boolean(remoteClusters.length);
       const remoteClustersOptions = hasClusters ? remoteClusters.map(({ name, isConnected }) => ({
         value: name,
-        text: isConnected ? name : (
-          <FormattedMessage
-            id="xpack.crossClusterReplication.forms.remoteClusterDropdownNotConnected"
-            defaultMessage="{name} (not connected)"
-            values={{ name }}
-          />
-        ),
+        text: isConnected ? name : this.props.intl.formatMessage({
+          id: 'xpack.crossClusterReplication.forms.remoteClusterDropdownNotConnected',
+          defaultMessage: '{name} (not connected)',
+        }, { name }),
         'data-test-subj': `option-${name}`
       })) : [];
       const errorMessage = this.renderErrorMessage();
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.container.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.container.js
index 6cee0f21236b2..f7d47b57dac33 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.container.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.container.js
@@ -14,8 +14,8 @@ import { AutoFollowPatternAdd as AutoFollowPatternAddView } from './auto_follow_
 const scope = SECTIONS.AUTO_FOLLOW_PATTERN;
 
 const mapStateToProps = (state) => ({
-  apiStatus: getApiStatus(scope)(state),
-  apiError: getApiError(scope)(state),
+  apiStatus: getApiStatus(`${scope}-save`)(state),
+  apiError: getApiError(`${scope}-save`)(state),
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
index 3a30e5f1b036f..99900d0fdd596 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_add/auto_follow_pattern_add.js
@@ -20,7 +20,6 @@ import {
   AutoFollowPatternPageTitle,
   RemoteClustersProvider,
   SectionLoading,
-  SectionError,
 } from '../../components';
 
 export const AutoFollowPatternAdd = injectI18n(
@@ -41,7 +40,7 @@ export const AutoFollowPatternAdd = injectI18n(
     }
 
     render() {
-      const { saveAutoFollowPattern, apiStatus, apiError, intl, match: { url: currentUrl } } = this.props;
+      const { saveAutoFollowPattern, apiStatus, apiError, match: { url: currentUrl } } = this.props;
 
       return (
         <EuiPageContent>
@@ -67,20 +66,12 @@ export const AutoFollowPatternAdd = injectI18n(
                 );
               }
 
-              if (error) {
-                const title = intl.formatMessage({
-                  id: 'xpack.crossClusterReplication.autoFollowPatternCreateForm.loadingRemoteClustersErrorTitle',
-                  defaultMessage: 'Error loading remote clusters',
-                });
-                return <SectionError title={title} error={error} />;
-              }
-
               return (
                 <AutoFollowPatternForm
                   apiStatus={apiStatus}
                   apiError={apiError}
                   currentUrl={currentUrl}
-                  remoteClusters={remoteClusters}
+                  remoteClusters={error ? [] : remoteClusters}
                   saveAutoFollowPattern={saveAutoFollowPattern}
                 />
               );
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js
index 64b6cd56a2495..5099555daa6d8 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/auto_follow_pattern_edit/auto_follow_pattern_edit.js
@@ -119,7 +119,7 @@ export const AutoFollowPatternEdit = injectI18n(
     }
 
     render() {
-      const { saveAutoFollowPattern, apiStatus, apiError, autoFollowPattern, intl, match: { url: currentUrl }  } = this.props;
+      const { saveAutoFollowPattern, apiStatus, apiError, autoFollowPattern, match: { url: currentUrl }  } = this.props;
 
       return (
         <EuiPageContent
@@ -154,20 +154,12 @@ export const AutoFollowPatternEdit = injectI18n(
                   );
                 }
 
-                if (error) {
-                  const title = intl.formatMessage({
-                    id: 'xpack.crossClusterReplication.autoFollowPatternEditForm.loadingRemoteClustersErrorTitle',
-                    defaultMessage: 'Error loading remote clusters',
-                  });
-                  return <SectionError title={title} error={error} />;
-                }
-
                 return (
                   <AutoFollowPatternForm
                     apiStatus={apiStatus.save}
                     apiError={apiError.save}
                     currentUrl={currentUrl}
-                    remoteClusters={remoteClusters}
+                    remoteClusters={error ? [] : remoteClusters}
                     autoFollowPattern={autoFollowPattern}
                     saveAutoFollowPattern={saveAutoFollowPattern}
                   />
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js
index 2e12804d37f40..460c22393db1b 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_add/follower_index_add.js
@@ -20,7 +20,6 @@ import {
   FollowerIndexPageTitle,
   RemoteClustersProvider,
   SectionLoading,
-  SectionError,
 } from '../../components';
 
 export const FollowerIndexAdd = injectI18n(
@@ -41,7 +40,7 @@ export const FollowerIndexAdd = injectI18n(
     }
 
     render() {
-      const { saveFollowerIndex, clearApiError, apiStatus, apiError, intl, match: { url: currentUrl }  } = this.props;
+      const { saveFollowerIndex, clearApiError, apiStatus, apiError, match: { url: currentUrl }  } = this.props;
 
       return (
         <EuiPageContent
@@ -70,20 +69,12 @@ export const FollowerIndexAdd = injectI18n(
                 );
               }
 
-              if (error) {
-                const title = intl.formatMessage({
-                  id: 'xpack.crossClusterReplication.followerIndexCreateForm.loadingRemoteClustersErrorTitle',
-                  defaultMessage: 'Error loading remote clusters',
-                });
-                return <SectionError title={title} error={error} />;
-              }
-
               return (
                 <FollowerIndexForm
                   apiStatus={apiStatus}
                   apiError={apiError}
                   currentUrl={currentUrl}
-                  remoteClusters={remoteClusters}
+                  remoteClusters={error ? [] : remoteClusters}
                   saveFollowerIndex={saveFollowerIndex}
                   clearApiError={clearApiError}
                 />
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
index 25f12267bfa33..370d4f53aca53 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/follower_index_edit/follower_index_edit.js
@@ -242,17 +242,13 @@ export const FollowerIndexEdit = injectI18n(
                   );
                 }
 
-                if (error) {
-                  remoteClusters = [];
-                }
-
                 return (
                   <FollowerIndexForm
                     followerIndex={rest}
                     apiStatus={apiStatus.save}
                     apiError={apiError.save}
                     currentUrl={currentUrl}
-                    remoteClusters={remoteClusters}
+                    remoteClusters={error ? [] : remoteClusters}
                     saveFollowerIndex={this.saveFollowerIndex}
                     clearApiError={clearApiError}
                   />
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js
index 50dd65b2bb27c..f541370fe247d 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/auto_follow_pattern_list.js
@@ -7,12 +7,19 @@
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import routing from '../../../services/routing';
 import { extractQueryParams } from '../../../services/query_params';
 import { API_STATUS } from '../../../constants';
-import { SectionLoading, SectionError } from '../../../components';
+import { SectionLoading, SectionError, SectionUnauthorized } from '../../../components';
 import { AutoFollowPatternTable, DetailPanel } from './components';
 
 const REFRESH_RATE_MS = 30000;
@@ -88,6 +95,79 @@ export const AutoFollowPatternList = injectI18n(
       clearInterval(this.interval);
     }
 
+    renderHeader() {
+      const { isAuthorized } = this.props;
+      return (
+        <Fragment>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="xpack.crossClusterReplication.autoFollowPatternList.autoFollowPatternsDescription"
+                    defaultMessage="Auto-follow patterns replicate leader indices from a remote
+                      cluster to follower indices on the local cluster."
+                  />
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              {isAuthorized && (
+                <EuiButton
+                  {...routing.getRouterLinkProps('/auto_follow_patterns/add')}
+                  fill
+                  iconType="plusInCircle"
+                >
+                  <FormattedMessage
+                    id="xpack.crossClusterReplication.autoFollowPatternList.addAutoFollowPatternButtonLabel"
+                    defaultMessage="Create an auto-follow pattern"
+                  />
+                </EuiButton>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          <EuiSpacer />
+        </Fragment>
+      );
+    }
+
+    renderContent(isEmpty) {
+      const { apiError, isAuthorized, intl } = this.props;
+      if (!isAuthorized) {
+        return (
+          <SectionUnauthorized
+            title={(
+              <FormattedMessage
+                id="xpack.crossClusterReplication.autoFollowPatternList.permissionErrorTitle"
+                defaultMessage="Permission error"
+              />
+            )}
+          >
+            <FormattedMessage
+              id="xpack.crossClusterReplication.autoFollowPatternList.noPermissionText"
+              defaultMessage="You do not have permission to view or add auto-follow patterns."
+            />
+          </SectionUnauthorized>
+        );
+      }
+
+      if (apiError) {
+        const title = intl.formatMessage({
+          id: 'xpack.crossClusterReplication.autoFollowPatternList.loadingErrorTitle',
+          defaultMessage: 'Error loading auto-follow patterns',
+        });
+        return <SectionError title={title} error={apiError} />;
+      }
+
+      if (isEmpty) {
+        return this.renderEmpty();
+      }
+
+      return this.renderList();
+    }
+
     renderEmpty() {
       return (
         <EuiEmptyPrompt
@@ -156,25 +236,15 @@ export const AutoFollowPatternList = injectI18n(
     }
 
     render() {
-      const { autoFollowPatterns, apiStatus, apiError, isAuthorized, intl } = this.props;
-
-      if (!isAuthorized) {
-        return null;
-      }
-
-      if (apiStatus === API_STATUS.IDLE && !autoFollowPatterns.length) {
-        return this.renderEmpty();
-      }
-
-      if (apiError) {
-        const title = intl.formatMessage({
-          id: 'xpack.crossClusterReplication.autoFollowPatternList.loadingErrorTitle',
-          defaultMessage: 'Error loading auto-follow patterns',
-        });
-        return <SectionError title={title} error={apiError} />;
-      }
+      const { autoFollowPatterns, apiStatus,  } = this.props;
+      const isEmpty = apiStatus === API_STATUS.IDLE && !autoFollowPatterns.length;
 
-      return this.renderList();
+      return (
+        <Fragment>
+          {!isEmpty && this.renderHeader()}
+          {this.renderContent(isEmpty)}
+        </Fragment>
+      );
     }
   }
 );
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js
index b20c375e9d4ac..8c1dfabe7ff32 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/follower_indices_list.js
@@ -7,12 +7,19 @@
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
-import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiEmptyPrompt,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import routing from '../../../services/routing';
 import { extractQueryParams } from '../../../services/query_params';
 import { API_STATUS } from '../../../constants';
-import { SectionLoading, SectionError } from '../../../components';
+import { SectionLoading, SectionError, SectionUnauthorized } from '../../../components';
 import { FollowerIndicesTable, DetailPanel } from './components';
 
 const REFRESH_RATE_MS = 30000;
@@ -84,6 +91,80 @@ export const FollowerIndicesList = injectI18n(
       clearInterval(this.interval);
     }
 
+    renderHeader() {
+      const { isAuthorized } = this.props;
+
+      return (
+        <Fragment>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
+            <EuiFlexItem grow={false}>
+              <EuiText>
+                <p>
+                  <FormattedMessage
+                    id="xpack.crossClusterReplication.followerIndexList.followerIndicesDescription"
+                    defaultMessage="Followers replicate operations from the leader index to the follower index."
+                  />
+                </p>
+              </EuiText>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              {isAuthorized && (
+                <EuiButton
+                  {...routing.getRouterLinkProps('/follower_indices/add')}
+                  fill
+                  iconType="plusInCircle"
+                >
+                  <FormattedMessage
+                    id="xpack.crossClusterReplication.followerIndexList.addFollowerButtonLabel"
+                    defaultMessage="Create a follower index"
+                  />
+                </EuiButton>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+
+          <EuiSpacer />
+        </Fragment>
+      );
+    }
+
+    renderContent(isEmpty) {
+      const { apiError, isAuthorized, intl } = this.props;
+
+      if (!isAuthorized) {
+        return (
+          <SectionUnauthorized
+            title={(
+              <FormattedMessage
+                id="xpack.crossClusterReplication.followerIndexList.permissionErrorTitle"
+                defaultMessage="Permission error"
+              />
+            )}
+          >
+            <FormattedMessage
+              id="xpack.crossClusterReplication.followerIndexList.noPermissionText"
+              defaultMessage="You do not have permission to view or add follower indices."
+            />
+          </SectionUnauthorized>
+        );
+      }
+
+      if (apiError) {
+        const title = intl.formatMessage({
+          id: 'xpack.crossClusterReplication.followerIndexList.loadingErrorTitle',
+          defaultMessage: 'Error loading follower indices',
+        });
+        return <SectionError title={title} error={apiError} />;
+      }
+
+      if (isEmpty) {
+        return this.renderEmpty();
+      }
+
+      return this.renderList();
+    }
+
     renderEmpty() {
       return (
         <EuiEmptyPrompt
@@ -152,25 +233,14 @@ export const FollowerIndicesList = injectI18n(
     }
 
     render() {
-      const { followerIndices, apiStatus, apiError, isAuthorized, intl } = this.props;
-
-      if (!isAuthorized) {
-        return null;
-      }
-
-      if (apiStatus === API_STATUS.IDLE && !followerIndices.length) {
-        return this.renderEmpty();
-      }
-
-      if (apiError) {
-        const title = intl.formatMessage({
-          id: 'xpack.crossClusterReplication.followerIndexList.loadingErrorTitle',
-          defaultMessage: 'Error loading follower indices',
-        });
-        return <SectionError title={title} error={apiError} />;
-      }
-
-      return this.renderList();
+      const { followerIndices, apiStatus } = this.props;
+      const isEmpty = apiStatus === API_STATUS.IDLE && !followerIndices.length;
+      return (
+        <Fragment>
+          {!isEmpty && this.renderHeader()}
+          {this.renderContent(isEmpty)}
+        </Fragment>
+      );
     }
   }
 );
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/home.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/home.js
index 89b691ecb1c61..e987c69ee1afd 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/home.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/home.js
@@ -4,23 +4,18 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { PureComponent, Fragment } from 'react';
-import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import chrome from 'ui/chrome';
 import { MANAGEMENT_BREADCRUMB } from 'ui/management';
 
 import {
-  EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiPageBody,
   EuiPageContent,
   EuiSpacer,
   EuiTab,
   EuiTabs,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 
@@ -29,17 +24,9 @@ import { listBreadcrumb } from '../../services/breadcrumbs';
 import routing from '../../services/routing';
 import { AutoFollowPatternList } from './auto_follow_pattern_list';
 import { FollowerIndicesList } from './follower_indices_list';
-import { SectionUnauthorized } from '../../components';
 
 export const CrossClusterReplicationHome = injectI18n(
   class extends PureComponent {
-    static propTypes = {
-      autoFollowPatterns: PropTypes.array,
-      isAutoFollowApiAuthorized: PropTypes.bool,
-      isFollowerIndexApiAuthorized: PropTypes.bool,
-      followerIndices: PropTypes.array,
-    }
-
     state = {
       activeSection: 'follower_indices'
     }
@@ -77,128 +64,6 @@ export const CrossClusterReplicationHome = injectI18n(
       routing.navigate(`/${section}`);
     }
 
-    renderHeaderSection() {
-      const { followerIndices, autoFollowPatterns } = this.props;
-
-      // If we're rendering the empty prompt, we don't want to render the header.
-      if (this.state.activeSection === 'follower_indices' && followerIndices.length > 0) {
-        return (
-          <Fragment>
-            <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
-              <EuiFlexItem grow={false}>
-                <EuiText>
-                  <p>
-                    <FormattedMessage
-                      id="xpack.crossClusterReplication.followerIndexList.followerIndicesDescription"
-                      defaultMessage="Followers replicate operations from the leader index to the follower index."
-                    />
-                  </p>
-                </EuiText>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  {...routing.getRouterLinkProps('/follower_indices/add')}
-                  fill
-                  iconType="plusInCircle"
-                >
-                  <FormattedMessage
-                    id="xpack.crossClusterReplication.followerIndexList.addFollowerButtonLabel"
-                    defaultMessage="Create a follower index"
-                  />
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-
-            <EuiSpacer />
-          </Fragment>
-        );
-      }
-
-      // If we're rendering the empty prompt, we don't want to render the header.
-      if (autoFollowPatterns.length > 0) {
-        return (
-          <Fragment>
-            <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
-              <EuiFlexItem grow={false}>
-                <EuiText>
-                  <p>
-                    <FormattedMessage
-                      id="xpack.crossClusterReplication.autoFollowPatternList.autoFollowPatternsDescription"
-                      defaultMessage="Auto-follow patterns replicate leader indices from a remote
-                      cluster to follower indices on the local cluster."
-                    />
-                  </p>
-                </EuiText>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  {...routing.getRouterLinkProps('/auto_follow_patterns/add')}
-                  fill
-                  iconType="plusInCircle"
-                >
-                  <FormattedMessage
-                    id="xpack.crossClusterReplication.autoFollowPatternList.addAutoFollowPatternButtonLabel"
-                    defaultMessage="Create an auto-follow pattern"
-                  />
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-
-            <EuiSpacer />
-          </Fragment>
-        );
-      }
-    }
-
-    renderContent() {
-      const { isAutoFollowApiAuthorized, isFollowerIndexApiAuthorized } = this.props;
-
-      if (!isAutoFollowApiAuthorized || !isFollowerIndexApiAuthorized) {
-        return (
-          <SectionUnauthorized
-            title={(
-              <FormattedMessage
-                id="xpack.crossClusterReplication.home.permissionErrorTitle"
-                defaultMessage="Permission error"
-              />
-            )}
-          >
-            <FormattedMessage
-              id="xpack.crossClusterReplication.home.permissionErrorText"
-              defaultMessage="You do not have permission to view or add follower indices or auto-follow patterns."
-            />
-          </SectionUnauthorized>
-        );
-      }
-
-      return (
-        <Fragment>
-          <EuiTabs>
-            {this.tabs.map(tab => (
-              <EuiTab
-                onClick={() => this.onSectionChange(tab.id)}
-                isSelected={tab.id === this.state.activeSection}
-                key={tab.id}
-              >
-                {tab.name}
-              </EuiTab>
-            ))}
-          </EuiTabs>
-
-          <EuiSpacer size="m" />
-
-          {this.renderHeaderSection()}
-
-          <Switch>
-            <Route exact path={`${BASE_PATH}/follower_indices`} component={FollowerIndicesList} />
-            <Route exact path={`${BASE_PATH}/auto_follow_patterns`} component={AutoFollowPatternList} />
-          </Switch>
-        </Fragment>
-      );
-    }
-
     render() {
       return (
         <EuiPageBody>
@@ -214,7 +79,24 @@ export const CrossClusterReplicationHome = injectI18n(
 
             <EuiSpacer size="s" />
 
-            {this.renderContent()}
+            <EuiTabs>
+              {this.tabs.map(tab => (
+                <EuiTab
+                  onClick={() => this.onSectionChange(tab.id)}
+                  isSelected={tab.id === this.state.activeSection}
+                  key={tab.id}
+                >
+                  {tab.name}
+                </EuiTab>
+              ))}
+            </EuiTabs>
+
+            <EuiSpacer size="m" />
+
+            <Switch>
+              <Route exact path={`${BASE_PATH}/follower_indices`} component={FollowerIndicesList} />
+              <Route exact path={`${BASE_PATH}/auto_follow_patterns`} component={AutoFollowPatternList} />
+            </Switch>
           </EuiPageContent>
         </EuiPageBody>
       );
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/services/api.js b/x-pack/plugins/cross_cluster_replication/public/app/services/api.js
index d1e1386003ed2..10676826c1b77 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/services/api.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/services/api.js
@@ -95,7 +95,7 @@ export const updateFollowerIndex = (id, followerIndex) => (
 
 /* Stats */
 export const loadAutoFollowStats = () => (
-  httpClient.get(`${apiPrefixIndexManagement}/stats/auto_follow`).then(extractData)
+  httpClient.get(`${apiPrefix}/stats/auto-follow`).then(extractData)
 );
 
 /* Indices */
diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap
index 0f8537289951f..f87ba977b06e5 100644
--- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap
+++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/__snapshots__/remote_cluster_list.test.js.snap
@@ -5,7 +5,7 @@ exports[`RemoteClusterList renders empty state when loading is complete and ther
   class="euiPageBody"
 >
   <div
-    class="euiPanel euiPanel--paddingLarge euiPageContent euiPageContent--horizontalCenter"
+    class="euiPanel euiPanel--paddingLarge euiPageContent"
   >
     <div
       class="euiEmptyPrompt"
diff --git a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js
index bc9878a883226..698d66fc57086 100644
--- a/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js
+++ b/x-pack/plugins/remote_clusters/public/sections/remote_cluster_list/remote_cluster_list.js
@@ -88,18 +88,37 @@ export const RemoteClusterList = injectI18n(
       clearInterval(this.interval);
     }
 
-    getHeaderSection() {
+    getHeaderSection(isAuthorized) {
       return (
-        <EuiPageContentHeaderSection>
-          <EuiTitle size="l">
-            <h1>
-              <FormattedMessage
-                id="xpack.remoteClusters.remoteClusterListTitle"
-                defaultMessage="Remote clusters"
-              />
-            </h1>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
+        <Fragment>
+          <EuiPageContentHeader>
+            <EuiPageContentHeaderSection>
+              <EuiTitle size="l">
+                <h1>
+                  <FormattedMessage
+                    id="xpack.remoteClusters.remoteClusterListTitle"
+                    defaultMessage="Remote clusters"
+                  />
+                </h1>
+              </EuiTitle>
+            </EuiPageContentHeaderSection>
+
+            { isAuthorized && (
+              <EuiPageContentHeaderSection>
+                <EuiButton
+                  {...getRouterLinkProps(`${CRUD_APP_BASE_PATH}/add`)}
+                  fill
+                >
+                  <FormattedMessage
+                    id="xpack.remoteClusters.remoteClusterList.connectButtonLabel"
+                    defaultMessage="Add a remote cluster"
+                  />
+                </EuiButton>
+              </EuiPageContentHeaderSection>
+            )}
+          </EuiPageContentHeader>
+          <EuiSpacer size="m" />
+        </Fragment>
       );
     }
 
@@ -124,20 +143,16 @@ export const RemoteClusterList = injectI18n(
         defaultMessage: 'Permission error',
       });
       return (
-        <Fragment>
-          {this.getHeaderSection()}
-          <EuiSpacer size="m" />
-          <EuiCallOut
-            title={title}
-            color="warning"
-            iconType="help"
-          >
-            <FormattedMessage
-              id="xpack.remoteClusters.remoteClusterList.noPermissionText"
-              defaultMessage="You do not have permission to view or add remote clusters."
-            />
-          </EuiCallOut>
-        </Fragment>
+        <EuiCallOut
+          title={title}
+          color="warning"
+          iconType="help"
+        >
+          <FormattedMessage
+            id="xpack.remoteClusters.remoteClusterList.noPermissionText"
+            defaultMessage="You do not have permission to view or add remote clusters."
+          />
+        </EuiCallOut>
       );
     }
 
@@ -155,17 +170,13 @@ export const RemoteClusterList = injectI18n(
         defaultMessage: 'Error loading remote clusters',
       });
       return (
-        <Fragment>
-          {this.getHeaderSection()}
-          <EuiSpacer size="m" />
-          <EuiCallOut
-            title={title}
-            color="danger"
-            iconType="alert"
-          >
-            {statusCode} {errorString}
-          </EuiCallOut>
-        </Fragment>
+        <EuiCallOut
+          title={title}
+          color="danger"
+          iconType="alert"
+        >
+          {statusCode} {errorString}
+        </EuiCallOut>
       );
     }
 
@@ -208,58 +219,37 @@ export const RemoteClusterList = injectI18n(
       );
     }
 
-    renderList() {
-      const { isLoading, clusters } = this.props;
-
-      let table;
-
-      if (isLoading) {
-        table = (
-          <EuiFlexGroup
-            justifyContent="flexStart"
-            alignItems="center"
-            gutterSize="s"
-          >
-            <EuiFlexItem grow={false}>
-              <EuiLoadingSpinner size="m" />
-            </EuiFlexItem>
-
-            <EuiFlexItem grow={false}>
-              <EuiText>
-                <EuiTextColor color="subdued">
-                  <FormattedMessage
-                    id="xpack.remoteClusters.remoteClusterList.loadingTitle"
-                    defaultMessage="Loading remote clusters..."
-                  />
-                </EuiTextColor>
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        );
-      } else {
-        table = <RemoteClusterTable clusters={clusters} />;
-      }
-
+    renderLoading() {
       return (
-        <Fragment>
-          <EuiPageContentHeader>
-            {this.getHeaderSection()}
-
-            <EuiPageContentHeaderSection>
-              <EuiButton
-                {...getRouterLinkProps(`${CRUD_APP_BASE_PATH}/add`)}
-                fill
-              >
+        <EuiFlexGroup
+          justifyContent="flexStart"
+          alignItems="center"
+          gutterSize="s"
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="m" />
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <EuiTextColor color="subdued">
                 <FormattedMessage
-                  id="xpack.remoteClusters.remoteClusterList.connectButtonLabel"
-                  defaultMessage="Add a remote cluster"
+                  id="xpack.remoteClusters.remoteClusterList.loadingTitle"
+                  defaultMessage="Loading remote clusters..."
                 />
-              </EuiButton>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+              </EuiTextColor>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      );
+    }
 
-          {table}
+    renderList() {
+      const { clusters } = this.props;
 
+      return (
+        <Fragment>
+          <RemoteClusterTable clusters={clusters} />
           <DetailPanel />
         </Fragment>
       );
@@ -267,28 +257,31 @@ export const RemoteClusterList = injectI18n(
 
     render() {
       const { isLoading, clusters, clusterLoadError } = this.props;
+      const isEmpty = !isLoading && !clusters.length;
+      const isAuthorized = !clusterLoadError || clusterLoadError.status !== 403;
+      const isHeaderVisible = clusterLoadError || !isEmpty;
 
       let content;
 
       if (clusterLoadError) {
-        if (clusterLoadError.status === 403) {
+        if (!isAuthorized) {
           content = this.renderNoPermission();
         } else {
           content = this.renderError(clusterLoadError);
         }
-      } else if (!isLoading && !clusters.length) {
+      } else if (isEmpty) {
         content = this.renderEmpty();
+      } else if (isLoading) {
+        content = this.renderLoading();
       } else {
         content = this.renderList();
       }
 
       return (
         <EuiPageBody>
-          <EuiPageContent
-            horizontalPosition="center"
-          >
+          <EuiPageContent>
+            {(isHeaderVisible) && this.getHeaderSection(isAuthorized)}
             {content}
-
             {this.renderBlockingAction()}
           </EuiPageContent>
         </EuiPageBody>