diff --git a/x-pack/plugins/cross_cluster_replication/public/app/app.js b/x-pack/plugins/cross_cluster_replication/public/app/app.js
index 543eafea98774..bf0aa2ace313d 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/app.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/app.js
@@ -45,12 +45,13 @@ export class App extends Component {
     return (
       <div>
         <Switch>
-          <Redirect exact from={`${BASE_PATH}/:section`} to={`${BASE_PATH}`} />
+          <Redirect exact from={`${BASE_PATH}`} to={`${BASE_PATH}/auto_follow_patterns`} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/add`} component={AutoFollowPatternAdd} />
           <Route exact path={`${BASE_PATH}/auto_follow_patterns/edit/:id`} component={AutoFollowPatternEdit} />
-          <Route path={`${BASE_PATH}`} component={CrossClusterReplicationHome} />
+          <Route exact path={`${BASE_PATH}/:section`} component={CrossClusterReplicationHome} />
         </Switch>
       </div>
     );
   }
 }
+
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js
index 51bef0e57b8ee..fe6a8d6783992 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_form.js
@@ -202,7 +202,7 @@ export class AutoFollowPatternFormUI extends PureComponent {
   };
 
   cancelForm = () => {
-    routing.navigate('/home');
+    routing.navigate('/auto_follow_patterns');
   };
 
   /**
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 348c000bab64b..ca614b95130eb 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
@@ -41,7 +41,8 @@ class AutoFollowPatternEditUi extends PureComponent {
   componentDidMount() {
     const { autoFollowPattern, match: { params: { id } } } = this.props;
     if (!autoFollowPattern) {
-      this.props.getAutoFollowPattern(id);
+      const decodedId = decodeURIComponent(id);
+      this.props.getAutoFollowPattern(decodedId);
     }
 
     chrome.breadcrumbs.set([ MANAGEMENT_BREADCRUMB, listBreadcrumb, editBreadcrumb ]);
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js
index bc523b167e024..a26a9cd544983 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/auto_follow_pattern_table/auto_follow_pattern_table.js
@@ -147,7 +147,7 @@ export class AutoFollowPatternTableUI extends PureComponent {
           icon: 'pencil',
           onClick: ({ name }) => {
             selectAutoFollowPattern(name);
-            routing.navigate(`/auto_follow_patterns/edit/${name}`);
+            routing.navigate(encodeURI(`/auto_follow_patterns/edit/${encodeURIComponent(name)}`));
           },
           type: 'icon',
         },
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 68ba6e100d1ae..a29ec8d06a6e7 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
@@ -6,9 +6,11 @@
 
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
+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 { BASE_PATH } from '../../../../common/constants';
 
 import {
   EuiButton,
@@ -113,16 +115,6 @@ export class CrossClusterReplicationHomeUI extends PureComponent {
     }
   }
 
-  getSection() {
-    const { match: { params: { section } } } = this.props;
-
-    switch(section) {
-      default: {
-        return <AutoFollowPatternList />;
-      }
-    }
-  }
-
   render() {
     return (
       <EuiPage>
@@ -130,7 +122,9 @@ export class CrossClusterReplicationHomeUI extends PureComponent {
           <EuiPageContent>
             {this.getHeaderSection()}
             {this.getUnauthorizedSection()}
-            {this.getSection()}
+            <Switch>
+              <Route exact path={`${BASE_PATH}/auto_follow_patterns`} component={AutoFollowPatternList} />
+            </Switch>
           </EuiPageContent>
         </EuiPageBody>
       </EuiPage>
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 2cd910329f914..3b8b194793973 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
@@ -28,7 +28,7 @@ export const loadAutoFollowPatterns = () => (
 );
 
 export const getAutoFollowPattern = (id) => (
-  httpClient.get(`${apiPrefix}/auto_follow_patterns/${id}`).then(extractData)
+  httpClient.get(`${apiPrefix}/auto_follow_patterns/${encodeURIComponent(id)}`).then(extractData)
 );
 
 export const loadRemoteClusters = () => (
@@ -36,11 +36,11 @@ export const loadRemoteClusters = () => (
 );
 
 export const saveAutoFollowPattern = (id, autoFollowPattern) => (
-  httpClient.put(`${apiPrefix}/auto_follow_patterns/${id}`, autoFollowPattern).then(extractData)
+  httpClient.put(`${apiPrefix}/auto_follow_patterns/${encodeURIComponent(id)}`, autoFollowPattern).then(extractData)
 );
 
 export const deleteAutoFollowPattern = (id) => {
-  const ids = arrify(id);
+  const ids = arrify(id).map(_id => encodeURIComponent(_id)).join(',');
 
-  return httpClient.delete(`${apiPrefix}/auto_follow_patterns/${ids.join(',')}`).then(extractData);
+  return httpClient.delete(`${apiPrefix}/auto_follow_patterns/${ids}`).then(extractData);
 };
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/services/routing.js b/x-pack/plugins/cross_cluster_replication/public/app/services/routing.js
index 536aaa6f13b2a..94fe431695ec3 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/services/routing.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/services/routing.js
@@ -68,7 +68,7 @@ class Routing {
       : undefined;
 
     this._reactRouter.history.push({
-      pathname: appToBasePathMap[app] + route,
+      pathname: encodeURI(appToBasePathMap[app] + route),
       search,
     });
   }
diff --git a/x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js b/x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js
index bc5b3662eb7ba..52a190300c627 100644
--- a/x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js
+++ b/x-pack/plugins/cross_cluster_replication/public/app/store/actions/auto_follow_pattern.js
@@ -66,7 +66,7 @@ export const saveAutoFollowPattern = (id, autoFollowPattern, isEditing = false)
         });
 
       toastNotifications.addSuccess(successMessage);
-      routing.navigate('/home');
+      routing.navigate('/auto_follow_patterns');
     },
   })
 );