diff --git a/ui/app/models/cluster.js b/ui/app/models/cluster.js
index dea9ae2317d..6090d149fc3 100644
--- a/ui/app/models/cluster.js
+++ b/ui/app/models/cluster.js
@@ -53,6 +53,7 @@ export default DS.Model.extend({
   // this service exposes what mode the UI is currently viewing
   // replicationAttrs will then return the relevant `replication-attributes` fragment
   rm: service('replication-mode'),
+  drMode: alias('dr.mode'),
   replicationMode: alias('rm.mode'),
   replicationModeForDisplay: computed('replicationMode', function() {
     return this.replicationMode === 'dr' ? 'Disaster Recovery' : 'Performance';
diff --git a/ui/app/components/shamir-flow.js b/ui/lib/core/addon/components/shamir-flow.js
similarity index 98%
rename from ui/app/components/shamir-flow.js
rename to ui/lib/core/addon/components/shamir-flow.js
index 8e89f4db95a..11ff4f787c5 100644
--- a/ui/app/components/shamir-flow.js
+++ b/ui/lib/core/addon/components/shamir-flow.js
@@ -3,6 +3,7 @@ import { gt } from '@ember/object/computed';
 import { camelize } from '@ember/string';
 import Component from '@ember/component';
 import { get, computed } from '@ember/object';
+import layout from '../templates/components/shamir-flow';
 
 const DEFAULTS = {
   key: null,
@@ -26,6 +27,7 @@ export default Component.extend(DEFAULTS, {
   buttonText: 'Submit',
   thresholdPath: 'required',
   generateAction: false,
+  layout,
 
   init() {
     this._super(...arguments);
diff --git a/ui/app/components/shamir-modal-flow.js b/ui/lib/core/addon/components/shamir-modal-flow.js
similarity index 100%
rename from ui/app/components/shamir-modal-flow.js
rename to ui/lib/core/addon/components/shamir-modal-flow.js
diff --git a/ui/lib/core/addon/templates/components/replication-header.hbs b/ui/lib/core/addon/templates/components/replication-header.hbs
index 47c28c5a4aa..bd03a24218b 100644
--- a/ui/lib/core/addon/templates/components/replication-header.hbs
+++ b/ui/lib/core/addon/templates/components/replication-header.hbs
@@ -15,7 +15,7 @@
 {{/if}}
 <PageHeader as |p|>
   <p.top>
-    {{#if (not isSummaryDashboard) }}
+    {{#if (not (or isSummaryDashboard isSecondary)) }}
       {{#key-value-header
         baseKey=baseKey
         path="vault.cluster.replication-dr-promote"
@@ -25,8 +25,8 @@
           <span class="sep">
             /
           </span>
-          {{#link-to "vault.cluster.replication-dr-promote"}}
-            Disaster Recovery
+          {{#link-to "vault.cluster.replication.index"}}
+            Replication
           {{/link-to}}
         </li>
       {{/key-value-header}}
diff --git a/ui/lib/core/addon/templates/components/replication-page.hbs b/ui/lib/core/addon/templates/components/replication-page.hbs
index 4a07bcd12bf..b3beefa11ad 100644
--- a/ui/lib/core/addon/templates/components/replication-page.hbs
+++ b/ui/lib/core/addon/templates/components/replication-page.hbs
@@ -10,6 +10,7 @@
           isSecondary=isSecondary
           secondaryId=replicationDetails.secondaryId
           isSummaryDashboard=isSummaryDashboard
+          isDisabled=isDisabled
         )
         dashboard=(component
           'replication-dashboard'
diff --git a/ui/app/templates/components/shamir-flow.hbs b/ui/lib/core/addon/templates/components/shamir-flow.hbs
similarity index 100%
rename from ui/app/templates/components/shamir-flow.hbs
rename to ui/lib/core/addon/templates/components/shamir-flow.hbs
diff --git a/ui/app/templates/components/shamir-modal-flow.hbs b/ui/lib/core/addon/templates/components/shamir-modal-flow.hbs
similarity index 100%
rename from ui/app/templates/components/shamir-modal-flow.hbs
rename to ui/lib/core/addon/templates/components/shamir-modal-flow.hbs
diff --git a/ui/lib/core/app/components/shamir-flow.js b/ui/lib/core/app/components/shamir-flow.js
new file mode 100644
index 00000000000..e7ef071bb7f
--- /dev/null
+++ b/ui/lib/core/app/components/shamir-flow.js
@@ -0,0 +1 @@
+export { default } from 'core/components/shamir-flow';
diff --git a/ui/lib/core/app/components/shamir-modal-flow.js b/ui/lib/core/app/components/shamir-modal-flow.js
new file mode 100644
index 00000000000..16669241c46
--- /dev/null
+++ b/ui/lib/core/app/components/shamir-modal-flow.js
@@ -0,0 +1 @@
+export { default } from 'core/components/shamir-modal-flow';
diff --git a/ui/lib/replication/addon/routes/mode.js b/ui/lib/replication/addon/routes/mode.js
index c996ec97ae4..abf970c1a4c 100644
--- a/ui/lib/replication/addon/routes/mode.js
+++ b/ui/lib/replication/addon/routes/mode.js
@@ -1,4 +1,6 @@
 import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
+import { setProperties } from '@ember/object';
 import Route from '@ember/routing/route';
 
 const SUPPORTED_REPLICATION_MODES = ['dr', 'performance'];
@@ -17,4 +19,15 @@ export default Route.extend({
     this.replicationMode.setMode(replicationMode);
     return this.modelFor('application');
   },
+  afterModel(model) {
+    return hash({
+      // set new property on model to compare if the drMode changes when you are demoting the cluster
+      drModeInit: model.drMode,
+    }).then(({ drModeInit }) => {
+      setProperties(model, {
+        drModeInit,
+      });
+      return model;
+    });
+  },
 });
diff --git a/ui/lib/replication/addon/templates/index.hbs b/ui/lib/replication/addon/templates/index.hbs
index f4e55538193..a8b208a2247 100644
--- a/ui/lib/replication/addon/templates/index.hbs
+++ b/ui/lib/replication/addon/templates/index.hbs
@@ -1,6 +1,7 @@
 <section class="section">
   <div class="container is-widescreen">
     {{#if model.replicationIsInitializing }}
+      <nav class="navbar"></nav>
       <LayoutLoading />
     {{else}}
       {{#if (eq model.mode 'unsupported')}}
diff --git a/ui/lib/replication/addon/templates/mode.hbs b/ui/lib/replication/addon/templates/mode.hbs
index 9ca811ef34f..75901bb3a5e 100644
--- a/ui/lib/replication/addon/templates/mode.hbs
+++ b/ui/lib/replication/addon/templates/mode.hbs
@@ -1,57 +1,62 @@
 <section class="section">
   <div class="container is-widescreen">
-    {{#if model.replicationAttrs.replicationEnabled}}
-      <PageHeader as |p|>
-        <p.top>
-          <nav class="key-value-header breadcrumb">
+    {{#if (and (eq model.drMode "secondary") (eq model.drModeInit "primary"))}}
+      <nav class="navbar"></nav>
+      <LayoutLoading />
+    {{else}}
+      {{#if model.replicationAttrs.replicationEnabled}}
+        <PageHeader as |p|>
+          <p.top>
+            <nav class="key-value-header breadcrumb">
+              <ul>
+                <li>
+                  {{#link-to "index"}}
+                    <span class="sep" data-test-replication-breadcrumb />
+                    Replication
+                  {{/link-to}}
+                </li>
+                <li>
+                  <span class="sep"></span>
+                    {{model.replicationModeForDisplay}}
+                </li>
+              </ul>
+            </nav>
+            </p.top>
+            <p.levelLeft>
+              <h1 class="has-top-margin-m title is-3 " data-test-replication-title=true>
+                {{model.replicationModeForDisplay}}
+                <span class="tag is-light has-text-grey-dark" data-test-replication-mode-display=true>
+                  {{model.replicationAttrs.modeForHeader}}
+                </span>
+              </h1>
+          </p.levelLeft>
+        </PageHeader>
+        <div class="tabs-container box is-bottomless is-fullwidth is-paddingless is-marginless">
+          <nav class="tabs sub-nav">
             <ul>
-              <li>
-                {{#link-to "index"}}
-                  <span class="sep" data-test-replication-breadcrumb />
-                  Replication
+              <li class="{{if (is-active-route 'vault.cluster.replication.mode.index') 'is-active' ''}}">
+                {{#link-to "mode" replicationMode data-test-replication-link="details"}}
+                  Details
                 {{/link-to}}
               </li>
-              <li>
-                <span class="sep"></span>
-                  {{model.replicationModeForDisplay}}
+              <li class="{{if (is-active-route 'vault.cluster.replication.mode.manage') 'is-active' ''}}">
+                {{#link-to "mode.manage" replicationMode data-test-replication-link="manage"}}
+                  Manage
+                {{/link-to}}
               </li>
+              {{#if model.replicationAttrs.isPrimary}}
+                <li class="{{if (is-active-route 'vault.cluster.replication.mode.secondaries') 'is-active' ''}}">
+                  {{#link-to "mode.secondaries" replicationMode data-test-replication-link="secondaries"}}
+                    Secondaries
+                  {{/link-to}}
+                </li>
+              {{/if}}
             </ul>
           </nav>
-          </p.top>
-          <p.levelLeft>
-            <h1 class="has-top-margin-m title is-3 " data-test-replication-title=true>
-              {{model.replicationModeForDisplay}}
-              <span class="tag is-light has-text-grey-dark" data-test-replication-mode-display=true>
-                {{model.replicationAttrs.modeForHeader}}
-              </span>
-            </h1>
-        </p.levelLeft>
-      </PageHeader>
-      <div class="tabs-container box is-bottomless is-fullwidth is-paddingless is-marginless">
-        <nav class="tabs sub-nav">
-          <ul>
-            <li class="{{if (is-active-route 'vault.cluster.replication.mode.index') 'is-active' ''}}">
-              {{#link-to "mode" replicationMode data-test-replication-link="details"}}
-                Details
-              {{/link-to}}
-            </li>
-            <li class="{{if (is-active-route 'vault.cluster.replication.mode.manage') 'is-active' ''}}">
-              {{#link-to "mode.manage" replicationMode data-test-replication-link="manage"}}
-                Manage
-              {{/link-to}}
-            </li>
-            {{#if model.replicationAttrs.isPrimary}}
-              <li class="{{if (is-active-route 'vault.cluster.replication.mode.secondaries') 'is-active' ''}}">
-                {{#link-to "mode.secondaries" replicationMode data-test-replication-link="secondaries"}}
-                  Secondaries
-                {{/link-to}}
-              </li>
-            {{/if}}
-          </ul>
-        </nav>
-      </div>
+        </div>
+      {{/if}}
+      {{outlet}}
     {{/if}}
-    {{outlet}}
   </div>
 </section>