diff --git a/ui/admin/app/routes/account/change-password.js b/ui/admin/app/routes/account/change-password.js
index bf097e196..f947fa6f4 100644
--- a/ui/admin/app/routes/account/change-password.js
+++ b/ui/admin/app/routes/account/change-password.js
@@ -12,6 +12,7 @@ export default class AccountChangePasswordRoute extends Route {
   @service session;
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -42,7 +43,7 @@ export default class AccountChangePasswordRoute extends Route {
     // redirects depending on the authentication context.  These additional
     // redirects may abort this initial transition, resulting in a
     // TransitionAborted error, which we do not want to show to the user.
-    await this.replaceWith('index').catch(() => {});
+    await this.router.replaceWith('index').catch(() => {});
   }
 
   /**
@@ -50,6 +51,6 @@ export default class AccountChangePasswordRoute extends Route {
    */
   @action
   cancel() {
-    this.replaceWith('index');
+    this.router.replaceWith('index');
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope.js b/ui/admin/app/routes/scopes/scope.js
index eb8f01260..998117b27 100644
--- a/ui/admin/app/routes/scopes/scope.js
+++ b/ui/admin/app/routes/scopes/scope.js
@@ -12,6 +12,7 @@ export default class ScopesScopeRoute extends Route {
   @service intl;
   @service session;
   @service scope;
+  @service router;
 
   // =methods
 
@@ -149,7 +150,7 @@ export default class ScopesScopeRoute extends Route {
   async delete(scope) {
     const { scopeID } = scope;
     await scope.destroyRecord();
-    await this.replaceWith('scopes.scope.scopes', scopeID);
+    await this.router.replaceWith('scopes.scope.scopes', scopeID);
     //this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods.js b/ui/admin/app/routes/scopes/scope/auth-methods.js
index 2eef64750..2348a2d83 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods.js
@@ -14,6 +14,7 @@ export default class ScopesScopeAuthMethodsRoute extends Route {
   @service session;
   @service can;
   @service resourceFilterStore;
+  @service router;
 
   // =attributes
 
@@ -97,7 +98,7 @@ export default class ScopesScopeAuthMethodsRoute extends Route {
     // Reload the scope, since this is where the primary_auth_method_id is
     // stored.  An auth method deletion could affect this field.
     await scopeModel.reload();
-    await this.replaceWith('scopes.scope.auth-methods');
+    await this.router.replaceWith('scopes.scope.auth-methods');
     this.refresh();
   }
 
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js
index 51951aaef..cce5799e7 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts.js
@@ -11,6 +11,8 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsRoute extends Route
   @service intl;
   @service notify;
   @service can;
+  @service router;
+
   // =methods
 
   /**
@@ -82,7 +84,9 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsRoute extends Route
   @notifySuccess('notifications.delete-success')
   async deleteAccount(account) {
     await account.destroyRecord();
-    await this.replaceWith('scopes.scope.auth-methods.auth-method.accounts');
+    await this.router.replaceWith(
+      'scopes.scope.auth-methods.auth-method.accounts'
+    );
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js
index 7f6212ded..019933eaf 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/accounts/account/set-password.js
@@ -9,6 +9,7 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsAccountSettingsRout
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -40,7 +41,7 @@ export default class ScopesScopeAuthMethodsAuthMethodAccountsAccountSettingsRout
   @notifySuccess('notifications.save-success')
   async setPassword(account, password) {
     await account.setPassword(password);
-    await this.replaceWith(
+    await this.router.replaceWith(
       'scopes.scope.auth-methods.auth-method.accounts.account.set-password'
     );
   }
diff --git a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
index 8271d74df..820ef822a 100644
--- a/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
+++ b/ui/admin/app/routes/scopes/scope/auth-methods/auth-method/managed-groups.js
@@ -11,6 +11,7 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends
   @service intl;
   @service notify;
   @service can;
+  @service router;
 
   //=methods
 
@@ -80,7 +81,7 @@ export default class ScopesScopeAuthMethodsAuthMethodManagedGroupsRoute extends
   @notifySuccess('notifications.delete-success')
   async delete(managedGroup) {
     await managedGroup.destroyRecord();
-    await this.replaceWith(
+    await this.router.replaceWith(
       'scopes.scope.auth-methods.auth-method.managed-groups'
     );
     this.refresh();
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores.js b/ui/admin/app/routes/scopes/scope/credential-stores.js
index ef068f788..dbdd28f24 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores.js
@@ -8,6 +8,8 @@ import { notifySuccess, notifyError } from 'core/decorators/notify';
 export default class ScopesScopeCredentialStoresRoute extends Route {
   // =methods
   @service can;
+  @service router;
+
   /**
    * Load all credential stores under current scope
    * @returns {Promise[CredentialStoreModel]}
@@ -65,7 +67,7 @@ export default class ScopesScopeCredentialStoresRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(credentialStore) {
     await credentialStore.destroyRecord();
-    await this.replaceWith('scopes.scope.credential-stores');
+    await this.router.replaceWith('scopes.scope.credential-stores');
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js
index 56f3fb967..8b8b0b259 100644
--- a/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js
+++ b/ui/admin/app/routes/scopes/scope/credential-stores/credential-store/credential-libraries.js
@@ -8,6 +8,7 @@ import { inject as service } from '@ember/service';
 export default class ScopesScopeCredentialStoresCredentialStoreCredentialLibrariesRoute extends Route {
   // =methods
   @service can;
+  @service router;
 
   /**
    * Loads all credential libraries under the current credential store.
@@ -79,7 +80,7 @@ export default class ScopesScopeCredentialStoresCredentialStoreCredentialLibrari
   @notifySuccess('notifications.delete-success')
   async delete(credentialLibrary) {
     await credentialLibrary.destroyRecord();
-    await this.replaceWith(
+    await this.router.replaceWith(
       'scopes.scope.credential-stores.credential-store.credential-libraries'
     );
     this.refresh();
diff --git a/ui/admin/app/routes/scopes/scope/groups.js b/ui/admin/app/routes/scopes/scope/groups.js
index e57885eae..18ac1bef8 100644
--- a/ui/admin/app/routes/scopes/scope/groups.js
+++ b/ui/admin/app/routes/scopes/scope/groups.js
@@ -12,6 +12,8 @@ export default class ScopesScopeGroupsRoute extends Route {
   @service notify;
   @service session;
   @service can;
+  @service router;
+
   // =methods
 
   /**
@@ -76,7 +78,7 @@ export default class ScopesScopeGroupsRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(group) {
     await group.destroyRecord();
-    await this.replaceWith('scopes.scope.groups');
+    await this.router.replaceWith('scopes.scope.groups');
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/groups/group/add-members.js b/ui/admin/app/routes/scopes/scope/groups/group/add-members.js
index b67e2cbbd..fda2aaaed 100644
--- a/ui/admin/app/routes/scopes/scope/groups/group/add-members.js
+++ b/ui/admin/app/routes/scopes/scope/groups/group/add-members.js
@@ -10,6 +10,7 @@ export default class ScopesScopeGroupsGroupAddMembersRoute extends Route {
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -70,7 +71,7 @@ export default class ScopesScopeGroupsGroupAddMembersRoute extends Route {
   @notifySuccess('notifications.add-success')
   async addMembers(group, userIDs) {
     await group.addMembers(userIDs);
-    await this.replaceWith('scopes.scope.groups.group.members');
+    await this.router.replaceWith('scopes.scope.groups.group.members');
   }
 
   /**
@@ -78,6 +79,6 @@ export default class ScopesScopeGroupsGroupAddMembersRoute extends Route {
    */
   @action
   cancel() {
-    this.replaceWith('scopes.scope.groups.group.members');
+    this.router.replaceWith('scopes.scope.groups.group.members');
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/host-catalogs.js b/ui/admin/app/routes/scopes/scope/host-catalogs.js
index cc5a1f508..50fea0152 100644
--- a/ui/admin/app/routes/scopes/scope/host-catalogs.js
+++ b/ui/admin/app/routes/scopes/scope/host-catalogs.js
@@ -12,6 +12,8 @@ export default class ScopesScopeHostCatalogsRoute extends Route {
   @service notify;
   @service session;
   @service can;
+  @service router;
+
   // =methods
 
   /**
@@ -79,7 +81,7 @@ export default class ScopesScopeHostCatalogsRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(hostCatalog) {
     await hostCatalog.destroyRecord();
-    await this.replaceWith('scopes.scope.host-catalogs');
+    await this.router.replaceWith('scopes.scope.host-catalogs');
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets.js b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets.js
index 2cc93e571..a5cb4df1f 100644
--- a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets.js
+++ b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets.js
@@ -11,6 +11,8 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsRoute extends Rou
   @service intl;
   @service notify;
   @service can;
+  @service router;
+
   // =methods
 
   /**
@@ -83,6 +85,8 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsRoute extends Rou
   @notifySuccess('notifications.delete-success')
   async deleteHostSet(hostSet) {
     await hostSet.destroyRecord();
-    await this.replaceWith('scopes.scope.host-catalogs.host-catalog.host-sets');
+    await this.router.replaceWith(
+      'scopes.scope.host-catalogs.host-catalog.host-sets'
+    );
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts.js b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts.js
index 1173cf192..6ade00f97 100644
--- a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts.js
+++ b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/add-hosts.js
@@ -10,6 +10,7 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetAddHostsRo
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -75,7 +76,7 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetAddHostsRo
   @notifySuccess('notifications.add-success')
   async addHosts(hostSet, hostIDs) {
     await hostSet.addHosts(hostIDs);
-    await this.replaceWith(
+    await this.router.replaceWith(
       'scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
     );
   }
@@ -85,7 +86,7 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetAddHostsRo
    */
   @action
   cancel() {
-    this.replaceWith(
+    this.router.replaceWith(
       'scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
     );
   }
diff --git a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host.js b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host.js
index 2e6f95bb1..99aa7fe2e 100644
--- a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host.js
+++ b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/create-and-add-host.js
@@ -9,6 +9,7 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetCreateAndA
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -70,7 +71,7 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetCreateAndA
     );
     await host.save();
     await hostSet.addHost(host.id);
-    await this.replaceWith(
+    await this.router.replaceWith(
       'scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
     );
   }
@@ -80,7 +81,7 @@ export default class ScopesScopeHostCatalogsHostCatalogHostSetsHostSetCreateAndA
    */
   @action
   cancel() {
-    this.replaceWith(
+    this.router.replaceWith(
       'scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
     );
   }
diff --git a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts.js b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts.js
index 6f9f55614..06ced047b 100644
--- a/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts.js
+++ b/ui/admin/app/routes/scopes/scope/host-catalogs/host-catalog/hosts.js
@@ -11,6 +11,8 @@ export default class ScopesScopeHostCatalogsHostCatalogHostsRoute extends Route
   @service intl;
   @service notify;
   @service can;
+  @service router;
+
   // =methods
 
   /**
@@ -80,7 +82,9 @@ export default class ScopesScopeHostCatalogsHostCatalogHostsRoute extends Route
   @notifySuccess('notifications.delete-success')
   async deleteHost(host) {
     await host.destroyRecord();
-    await this.replaceWith('scopes.scope.host-catalogs.host-catalog.hosts');
+    await this.router.replaceWith(
+      'scopes.scope.host-catalogs.host-catalog.hosts'
+    );
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/roles.js b/ui/admin/app/routes/scopes/scope/roles.js
index b58427ec6..61d763561 100644
--- a/ui/admin/app/routes/scopes/scope/roles.js
+++ b/ui/admin/app/routes/scopes/scope/roles.js
@@ -12,6 +12,7 @@ export default class ScopesScopeRolesRoute extends Route {
   @service notify;
   @service session;
   @service can;
+  @service router;
 
   // =methods
 
@@ -77,7 +78,7 @@ export default class ScopesScopeRolesRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(role) {
     await role.destroyRecord();
-    await this.replaceWith('scopes.scope.roles');
+    await this.router.replaceWith('scopes.scope.roles');
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js b/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js
index 041952b82..c6dcf8b50 100644
--- a/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js
+++ b/ui/admin/app/routes/scopes/scope/roles/role/add-principals.js
@@ -10,6 +10,7 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -64,7 +65,7 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
   @notifySuccess('notifications.add-success')
   async addPrincipals(role, principalIDs) {
     await role.addPrincipals(principalIDs);
-    this.replaceWith('scopes.scope.roles.role.principals');
+    this.router.replaceWith('scopes.scope.roles.role.principals');
   }
 
   /**
@@ -72,6 +73,6 @@ export default class ScopesScopeRolesRoleAddPrincipalsRoute extends Route {
    */
   @action
   cancel() {
-    this.replaceWith('scopes.scope.roles.role.principals');
+    this.router.replaceWith('scopes.scope.roles.role.principals');
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/targets.js b/ui/admin/app/routes/scopes/scope/targets.js
index c07321095..1fc5d68ec 100644
--- a/ui/admin/app/routes/scopes/scope/targets.js
+++ b/ui/admin/app/routes/scopes/scope/targets.js
@@ -12,6 +12,7 @@ export default class ScopesScopeTargetsRoute extends Route {
   @service notify;
   @service session;
   @service can;
+  @service router;
 
   // =methods
 
@@ -79,7 +80,7 @@ export default class ScopesScopeTargetsRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(target) {
     await target.destroyRecord();
-    await this.replaceWith('scopes.scope.targets');
+    await this.router.replaceWith('scopes.scope.targets');
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/targets/target/add-credential-sources.js b/ui/admin/app/routes/scopes/scope/targets/target/add-credential-sources.js
index df5aac4a2..ed884719e 100644
--- a/ui/admin/app/routes/scopes/scope/targets/target/add-credential-sources.js
+++ b/ui/admin/app/routes/scopes/scope/targets/target/add-credential-sources.js
@@ -10,6 +10,7 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesRoute extends R
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -78,7 +79,7 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesRoute extends R
   @notifySuccess('notifications.add-success')
   async save(target, credentialLibraryIDs) {
     await target.addCredentialSources(credentialLibraryIDs);
-    this.replaceWith('scopes.scope.targets.target.credential-sources');
+    this.router.replaceWith('scopes.scope.targets.target.credential-sources');
   }
 
   /**
@@ -86,6 +87,6 @@ export default class ScopesScopeTargetsTargetAddCredentialSourcesRoute extends R
    */
   @action
   cancel() {
-    this.replaceWith('scopes.scope.targets.target.credential-sources');
+    this.router.replaceWith('scopes.scope.targets.target.credential-sources');
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/targets/target/add-host-sources.js b/ui/admin/app/routes/scopes/scope/targets/target/add-host-sources.js
index 1118e144d..4a2987bb5 100644
--- a/ui/admin/app/routes/scopes/scope/targets/target/add-host-sources.js
+++ b/ui/admin/app/routes/scopes/scope/targets/target/add-host-sources.js
@@ -10,6 +10,7 @@ export default class ScopesScopeTargetsTargetAddHostSourcesRoute extends Route {
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -72,7 +73,7 @@ export default class ScopesScopeTargetsTargetAddHostSourcesRoute extends Route {
   @notifySuccess('notifications.add-success')
   async save(target, hostSetIDs) {
     await target.addHostSources(hostSetIDs);
-    this.replaceWith('scopes.scope.targets.target.host-sources');
+    this.router.replaceWith('scopes.scope.targets.target.host-sources');
   }
 
   /**
@@ -80,6 +81,6 @@ export default class ScopesScopeTargetsTargetAddHostSourcesRoute extends Route {
    */
   @action
   cancel() {
-    this.replaceWith('scopes.scope.targets.target.host-sources');
+    this.router.replaceWith('scopes.scope.targets.target.host-sources');
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/users.js b/ui/admin/app/routes/scopes/scope/users.js
index 6c07f23fb..de0aa8b0f 100644
--- a/ui/admin/app/routes/scopes/scope/users.js
+++ b/ui/admin/app/routes/scopes/scope/users.js
@@ -12,6 +12,7 @@ export default class ScopesScopeUsersRoute extends Route {
   @service notify;
   @service session;
   @service can;
+  @service router;
 
   // =methods
 
@@ -78,7 +79,7 @@ export default class ScopesScopeUsersRoute extends Route {
   @notifySuccess('notifications.delete-success')
   async delete(user) {
     await user.destroyRecord();
-    await this.replaceWith('scopes.scope.users');
+    await this.router.replaceWith('scopes.scope.users');
     this.refresh();
   }
 }
diff --git a/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js b/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js
index fecc99be7..ab62093a4 100644
--- a/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js
+++ b/ui/admin/app/routes/scopes/scope/users/user/add-accounts.js
@@ -10,6 +10,7 @@ export default class ScopesScopeUsersUserAddAccountsRoute extends Route {
 
   @service intl;
   @service notify;
+  @service router;
 
   // =methods
 
@@ -74,7 +75,7 @@ export default class ScopesScopeUsersUserAddAccountsRoute extends Route {
   @notifySuccess('notifications.add-success')
   async addAccounts(user, accountIDs) {
     await user.addAccounts(accountIDs);
-    await this.replaceWith('scopes.scope.users.user.accounts');
+    await this.router.replaceWith('scopes.scope.users.user.accounts');
   }
 
   /**
@@ -82,6 +83,6 @@ export default class ScopesScopeUsersUserAddAccountsRoute extends Route {
    */
   @action
   cancel() {
-    this.replaceWith('scopes.scope.users.user.accounts');
+    this.router.replaceWith('scopes.scope.users.user.accounts');
   }
 }
diff --git a/ui/admin/app/styles/app.scss b/ui/admin/app/styles/app.scss
index e8f3d4987..4112bd921 100644
--- a/ui/admin/app/styles/app.scss
+++ b/ui/admin/app/styles/app.scss
@@ -51,7 +51,7 @@
 
   .rose-dropdown {
     $icon-width: sizing.rems(m) + sizing.rems(s);
-    $indent:  $icon-width + sizing.rems(xs);
+    $indent: $icon-width + sizing.rems(xs);
 
     .rose-form-radio-label {
       display: flex;
@@ -129,7 +129,14 @@
   &.loading {
     &::after {
       animation: gradient 1s linear infinite;
-      background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle));
+      background: repeating-linear-gradient(
+        to right,
+        var(--subtle),
+        var(--subtle),
+        var(--info),
+        var(--subtle),
+        var(--subtle)
+      );
       background-position: -100% 0;
       background-size: 200% auto;
       content: ' ';
@@ -140,8 +147,12 @@
       top: 100%;
 
       @keyframes gradient {
-        0%   { background-position: -100% 0; }
-        100% { background-position: -200% 0; }
+        0% {
+          background-position: -100% 0;
+        }
+        100% {
+          background-position: -200% 0;
+        }
       }
     }
   }
@@ -183,8 +194,12 @@
     color: inherit;
 
     @keyframes fadeBackground {
-      0%   { background-color: var(--action-subtler-1); }
-      100% { background-color: transparent; }
+      0% {
+        background-color: var(--action-subtler-1);
+      }
+      100% {
+        background-color: transparent;
+      }
     }
   }
 }
diff --git a/ui/desktop/app/routes/index.js b/ui/desktop/app/routes/index.js
index 200135491..5972dfd50 100644
--- a/ui/desktop/app/routes/index.js
+++ b/ui/desktop/app/routes/index.js
@@ -5,6 +5,7 @@ export default class IndexRoute extends Route {
   // =services
 
   @service origin;
+  @service router;
 
   // =methods
 
@@ -14,9 +15,9 @@ export default class IndexRoute extends Route {
   redirect() {
     const rendererOrigin = this.origin.rendererOrigin;
     if (!rendererOrigin) {
-      this.replaceWith('origin');
+      this.router.replaceWith('origin');
     } else {
-      this.replaceWith('scopes');
+      this.router.replaceWith('scopes');
     }
   }
 }
diff --git a/ui/desktop/app/routes/origin.js b/ui/desktop/app/routes/origin.js
index ddd557c84..6e7760781 100644
--- a/ui/desktop/app/routes/origin.js
+++ b/ui/desktop/app/routes/origin.js
@@ -12,6 +12,7 @@ export default class OriginRoute extends Route {
   @service origin;
   @service intl;
   @service notify;
+  @service router;
 
   // =attributes
 
@@ -40,7 +41,7 @@ export default class OriginRoute extends Route {
    * processing.  User must be logged out before changing the origin.
    */
   beforeModel() {
-    if (this.session.isAuthenticated) this.replaceWith('index');
+    if (this.session.isAuthenticated) this.router.replaceWith('index');
   }
 
   /**
@@ -71,7 +72,7 @@ export default class OriginRoute extends Route {
   async setOrigin(origin) {
     try {
       await this.origin.setOrigin(origin);
-      this.replaceWith('index');
+      this.router.replaceWith('index');
     } catch (e) {
       // If scopes do not load, we assume this is not a Boundary API
       const errorMessage = this.intl.t(
diff --git a/ui/desktop/app/routes/scopes/index.js b/ui/desktop/app/routes/scopes/index.js
index 08660d8d2..7df757bd4 100644
--- a/ui/desktop/app/routes/scopes/index.js
+++ b/ui/desktop/app/routes/scopes/index.js
@@ -6,6 +6,7 @@ export default class ScopesIndexRoute extends Route {
   // =services
 
   @service session;
+  @service router;
 
   // =methods
 
@@ -21,9 +22,9 @@ export default class ScopesIndexRoute extends Route {
       'data.authenticated.scope.id'
     );
     if (authenticatedScopeID) {
-      this.replaceWith('scopes.scope', authenticatedScopeID);
+      this.router.replaceWith('scopes.scope', authenticatedScopeID);
     } else {
-      this.replaceWith('scopes.scope', 'global');
+      this.router.replaceWith('scopes.scope', 'global');
     }
   }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/authenticate.js b/ui/desktop/app/routes/scopes/scope/authenticate.js
index 9d71324f5..3190d1fed 100644
--- a/ui/desktop/app/routes/scopes/scope/authenticate.js
+++ b/ui/desktop/app/routes/scopes/scope/authenticate.js
@@ -7,11 +7,13 @@ export default class ScopesScopeAuthenticateRoute extends Route {
 
   @service session;
   @service origin;
+  @service router;
 
   // =methods
 
   beforeModel() {
-    if (this.session.isAuthenticated) this.replaceWith('scopes.scope.index');
+    if (this.session.isAuthenticated)
+      this.router.replaceWith('scopes.scope.index');
   }
 
   /**
@@ -29,7 +31,7 @@ export default class ScopesScopeAuthenticateRoute extends Route {
   }
 
   redirect() {
-    if (!this.origin.rendererOrigin) this.replaceWith('index');
+    if (!this.origin.rendererOrigin) this.router.replaceWith('index');
   }
 
   /**
diff --git a/ui/desktop/app/routes/scopes/scope/authenticate/index.js b/ui/desktop/app/routes/scopes/scope/authenticate/index.js
index 392c5cd24..8775336a2 100644
--- a/ui/desktop/app/routes/scopes/scope/authenticate/index.js
+++ b/ui/desktop/app/routes/scopes/scope/authenticate/index.js
@@ -1,6 +1,11 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeAuthenticateIndexRoute extends Route {
+  // =services
+
+  @service router;
+
   // =methods
 
   /**
@@ -12,7 +17,10 @@ export default class ScopesScopeAuthenticateIndexRoute extends Route {
   redirect({ authMethods }) {
     const firstAuthMethod = authMethods.firstObject;
     if (firstAuthMethod) {
-      this.replaceWith('scopes.scope.authenticate.method', firstAuthMethod);
+      this.router.replaceWith(
+        'scopes.scope.authenticate.method',
+        firstAuthMethod
+      );
     }
   }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/index.js b/ui/desktop/app/routes/scopes/scope/index.js
index 5df8ead9e..61a33dee2 100644
--- a/ui/desktop/app/routes/scopes/scope/index.js
+++ b/ui/desktop/app/routes/scopes/scope/index.js
@@ -5,6 +5,7 @@ export default class ScopesScopeIndexRoute extends Route {
   // =services
 
   @service session;
+  @service router;
 
   // =methods
 
@@ -15,9 +16,9 @@ export default class ScopesScopeIndexRoute extends Route {
    */
   redirect() {
     if (!this.session.isAuthenticated) {
-      this.replaceWith('scopes.scope.authenticate');
+      this.router.replaceWith('scopes.scope.authenticate');
     } else {
-      this.replaceWith('scopes.scope.projects.targets');
+      this.router.replaceWith('scopes.scope.projects.targets');
     }
   }
 }
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 112756757..120390356 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -257,7 +257,8 @@
   border-radius: sizing.rems(xxxs);
   margin: 0 auto;
   margin-top: sizing.rems(l) * 1.25;
-  padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2) (sizing.rems(l) * 3);
+  padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2)
+    (sizing.rems(l) * 3);
   position: relative;
   width: sizing.rems(l) * 16;
 
@@ -324,7 +325,6 @@
   text-align: center;
 }
 
-
 // Dialog Detail
 // These styles are a Work In Progress. Expect changes (lots of them)
 .rose-dialog,
@@ -487,12 +487,14 @@ $chevron-down: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231
       color: var(--ui-gray-subtler-2);
     }
 
-    .rose-button-ghost { // Copyable button icon.
+    .rose-button-ghost {
+      // Copyable button icon.
       color: var(--ui-gray-subtler-1);
     }
   }
 
-  .rose-button-ghost { // Hide/Show secret button icon.
+  .rose-button-ghost {
+    // Hide/Show secret button icon.
     color: var(--ui-gray);
   }
 }
diff --git a/ui/desktop/tests/acceptance/authentication-test.js b/ui/desktop/tests/acceptance/authentication-test.js
index 085a7d045..1869e1de3 100644
--- a/ui/desktop/tests/acceptance/authentication-test.js
+++ b/ui/desktop/tests/acceptance/authentication-test.js
@@ -34,6 +34,9 @@ module('Acceptance | authentication', function (hooks) {
       global: null,
       org: null,
     },
+    user: null,
+    target: null,
+    session: null,
   };
 
   const stubs = {
@@ -65,6 +68,10 @@ module('Acceptance | authentication', function (hooks) {
   };
 
   hooks.beforeEach(function () {
+    instances.user = this.server.create('user', {
+      scope: instances.scopes.global,
+    });
+
     invalidateSession();
 
     // create scopes
@@ -91,6 +98,22 @@ module('Acceptance | authentication', function (hooks) {
       type: 'password',
     });
 
+    instances.target = this.server.create(
+      'target',
+      { scope: instances.scopes.project },
+      'withAssociations'
+    );
+    instances.session = this.server.create(
+      'session',
+      {
+        scope: instances.scopes.project,
+        target: instances.target,
+        status: 'active',
+        user: instances.user,
+      },
+      'withAssociations'
+    );
+
     urls.scopes.global = `/scopes/${instances.scopes.global.id}`;
     urls.scopes.org = `/scopes/${instances.scopes.org.id}`;
     urls.authenticate.global = `${urls.scopes.global}/authenticate`;
@@ -176,16 +199,20 @@ module('Acceptance | authentication', function (hooks) {
 
   test('401 responses result in deauthentication', async function (assert) {
     assert.expect(3);
-    await visit(urls.authenticate.methods.global);
-    await fillIn('[name="identification"]', 'test');
-    await fillIn('[name="password"]', 'test');
-    await click('[type="submit"]');
+    authenticateSession({
+      scope: {
+        id: instances.scopes.global.id,
+        type: instances.scopes.global.type,
+      },
+    });
+    await visit(urls.sessions);
     assert.ok(
       currentSession().isAuthenticated,
       'Session begins authenticated, before encountering 401'
     );
     assert.ok(currentURL(), urls.targets);
     this.server.get('/sessions', () => new Response(401));
+    await visit(urls.targets);
     await visit(urls.sessions);
     assert.notOk(
       currentSession().isAuthenticated,