From 371301b4bad27a5df529de6ec5e84380aabf45d7 Mon Sep 17 00:00:00 2001
From: Lisbet Alvarez <107949262+lisbet-alvarez@users.noreply.github.com>
Date: Wed, 4 Dec 2024 14:16:05 -0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20use=20hds::applicati?=
 =?UTF-8?q?onstate=20instead=20of=20rose::message=20(#2577)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 💡 use hds::applicationstate instead of rose::message

✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15639
---
 addons/api/mirage/factories/scope.js          |   2 +-
 .../addon/components/error/message/index.hbs  |  29 ++---
 .../addon/components/error/message/index.js   |  20 +---
 .../components/error/message-test.js          | 100 +++++++++---------
 addons/core/translations/actions/en-us.yaml   |   2 +-
 .../addon/components/rose/message/index.hbs   |  33 ------
 .../addon/components/rose/message/index.js    |   8 --
 addons/rose/app/components/rose/message.js    |   6 --
 .../app/styles/rose/components/_index.scss    |   1 -
 .../app/styles/rose/components/_message.scss  |  74 -------------
 .../components/rose/message-test.js           |  35 ------
 .../form/group/add-members/index.hbs          |  23 ++--
 .../form/host-set/add-hosts/index.hbs         |  29 ++---
 .../form/role/add-principals/index.hbs        |  25 ++---
 .../form/target/add-host-sets/index.hbs       |  27 ++---
 .../form/target/add-host-sets/index.js        |   6 +-
 .../form/user/add-accounts/index.hbs          |  23 ++--
 ui/admin/app/routes/scopes/index.js           |   2 +-
 ui/admin/app/templates/scopes/index.hbs       |  16 ++-
 .../auth-method/accounts/index.hbs            |  61 +++++------
 .../auth-method/managed-groups/index.hbs      |  64 ++++++-----
 .../managed-groups/managed-group/members.hbs  |  16 +--
 .../templates/scopes/scope/authenticate.hbs   |  18 ++--
 .../scopes/scope/authenticate/index.hbs       |  16 ++-
 .../credential-libraries/index.hbs            |  76 ++++++-------
 .../credential-store/credentials/index.hbs    |  63 +++++------
 ui/admin/app/templates/scopes/scope/edit.hbs  |   8 +-
 ui/admin/app/templates/scopes/scope/error.hbs |   5 +-
 .../scopes/scope/groups/group/members.hbs     |  23 ++--
 .../host-sets/host-set/hosts/index.hbs        |  16 +--
 .../host-catalog/host-sets/index.hbs          |  59 +++++------
 .../host-catalog/hosts/index.hbs              |  58 +++++-----
 .../scopes/scope/host-catalogs/index.hbs      |   1 -
 .../templates/scopes/scope/policies/index.hbs |  53 +++++-----
 .../scopes/scope/roles/role/principals.hbs    |  27 ++---
 .../scopes/scope/storage-buckets/index.hbs    |  55 +++++-----
 .../add-brokered-credential-sources.hbs       |  33 +++---
 .../scope/targets/target/add-host-sources.hbs |  33 ++----
 ...njected-application-credential-sources.hbs |  33 +++---
 .../target/brokered-credential-sources.hbs    |  35 +++---
 .../scope/targets/target/host-sources.hbs     |  29 ++---
 ...njected-application-credential-sources.hbs |  37 +++----
 .../scopes/scope/users/user/accounts.hbs      |  23 ++--
 .../scopes/scope/users/user/add-accounts.hbs  |  33 ++----
 .../templates/scopes/scope/workers/index.hbs  |  56 +++++-----
 ui/admin/config/environment.js                |   1 +
 .../tests/acceptance/aliases/read-test.js     |   6 +-
 .../credential-library/read-test.js           |   6 +-
 .../credential-store/credentials/read-test.js |   4 +-
 .../acceptance/credential-store/read-test.js  |   4 +-
 .../host-catalogs/host-sets/read-test.js      |   4 +-
 .../acceptance/host-catalogs/read-test.js     |   4 +-
 ui/admin/tests/acceptance/policy/list-test.js |  19 ++--
 ui/admin/tests/acceptance/policy/read-test.js |   6 +-
 .../brokered-credential-sources-test.js       |  15 ++-
 ...ted-application-credential-sources-test.js |  15 ++-
 .../tests/acceptance/targets/read-test.js     |   4 +-
 ui/admin/tests/helpers/selectors.js           |  10 +-
 ui/desktop/app/templates/error.hbs            |   2 +-
 .../templates/scopes/scope/authenticate.hbs   |  19 ++--
 .../scopes/scope/authenticate/index.hbs       |  16 ++-
 .../templates/scopes/scope/projects/error.hbs |   7 +-
 ui/desktop/config/environment.js              |   1 +
 ui/desktop/electron-app/src/index.js          |   3 +-
 64 files changed, 666 insertions(+), 872 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/message/index.hbs
 delete mode 100644 addons/rose/addon/components/rose/message/index.js
 delete mode 100644 addons/rose/app/components/rose/message.js
 delete mode 100644 addons/rose/app/styles/rose/components/_message.scss
 delete mode 100644 addons/rose/tests/integration/components/rose/message-test.js

diff --git a/addons/api/mirage/factories/scope.js b/addons/api/mirage/factories/scope.js
index 35484166e..edab1920f 100644
--- a/addons/api/mirage/factories/scope.js
+++ b/addons/api/mirage/factories/scope.js
@@ -15,7 +15,7 @@ export default factory.extend({
   authorized_actions() {
     const authorizedActions = ['no-op', 'read', 'update'];
 
-    // Storage policies can only be attatched to global and org scopes.
+    // Storage policies can only be attached to global and org scopes.
     if (this.type === 'global' || this.type === 'org') {
       authorizedActions.push('attach-storage-policy', 'detach-storage-policy');
     }
diff --git a/addons/core/addon/components/error/message/index.hbs b/addons/core/addon/components/error/message/index.hbs
index 860fa3e9d..ff045b625 100644
--- a/addons/core/addon/components/error/message/index.hbs
+++ b/addons/core/addon/components/error/message/index.hbs
@@ -3,16 +3,21 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<Rose::Message
-  @title={{t (concat 'errors.' this.messageCode '.title')}}
-  @subtitle={{concat (t 'errors.generic.title') ' ' @status}}
-  @icon={{this.icon}}
-  as |message|
->
-  <message.description>
-    {{t (concat 'errors.' this.messageCode '.description')}}
-  </message.description>
-  {{#if this.helpRoute}}
-    <message.link @route={{this.helpRoute}}>{{t 'actions.help'}}</message.link>
+<Hds::ApplicationState data-test-error-application-state as |A|>
+  <A.Header
+    @title={{t (concat 'errors.' this.messageCode '.title')}}
+    @icon={{this.icon}}
+    @errorCode={{@status}}
+  />
+  <A.Body @text={{t (concat 'errors.' this.messageCode '.description')}} />
+  {{#if @docLink}}
+    <A.Footer as |F|>
+      <F.LinkStandalone
+        @icon='help'
+        @text={{t 'actions.help'}}
+        @href={{@docLink}}
+        @iconPosition='trailing'
+      />
+    </A.Footer>
   {{/if}}
-</Rose::Message>
\ No newline at end of file
+</Hds::ApplicationState>
\ No newline at end of file
diff --git a/addons/core/addon/components/error/message/index.js b/addons/core/addon/components/error/message/index.js
index 07a6cea1e..f76f3c350 100644
--- a/addons/core/addon/components/error/message/index.js
+++ b/addons/core/addon/components/error/message/index.js
@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import MessageComponent from 'rose/components/rose/message';
-import { computed } from '@ember/object';
+import Component from '@glimmer/component';
 
 /*
  * Helpful error booleans are attached based on the error status code:
@@ -22,40 +21,29 @@ import { computed } from '@ember/object';
 
 const statuses = ['401', '403', '404', '500'];
 
-export default class ErrorMessageComponent extends MessageComponent {
+export default class ErrorMessageComponent extends Component {
   // =methods
 
   /**
    * Returns an icon for error status.
    * @return {string}
    */
-  @computed('args.status')
   get icon() {
     switch (this.args.status) {
       case '404':
-        return 'flight-icons/svg/help-16';
+        return 'help';
       case '401':
       case '403':
       default:
-        return 'flight-icons/svg/alert-circle-16';
+        return 'alert-circle';
     }
   }
 
-  // TODO: Enable when help documentation can be linked in.
-  /**
-   * Returns an route string for help text in message.
-   * @return {string}
-   */
-  // get helpRoute() {
-  //   return 'index'
-  // }
-
   /**
    * Returns 'unknown' status code when provided error status
    * isn't part of predefined statuses.
    * @return {string}
    */
-  @computed('args.status')
   get messageCode() {
     let messageCode = this.args.status;
     if (!statuses.includes(messageCode)) messageCode = 'unknown';
diff --git a/addons/core/tests/integration/components/error/message-test.js b/addons/core/tests/integration/components/error/message-test.js
index f15752647..2169a5190 100644
--- a/addons/core/tests/integration/components/error/message-test.js
+++ b/addons/core/tests/integration/components/error/message-test.js
@@ -5,7 +5,7 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
+import { render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 
@@ -13,61 +13,65 @@ module('Integration | Component | error/message', function (hooks) {
   setupRenderingTest(hooks);
   setupIntl(hooks, 'en-us');
 
+  const ERROR_MSG_TITLE =
+    '[data-test-error-application-state] .hds-application-state__title';
+  const ERROR_MSG_CODE =
+    '[data-test-error-application-state] .hds-application-state__error-code';
+  const ERROR_MSG_BODY =
+    '[data-test-error-application-state] .hds-application-state__body-text';
+  const ERROR_MSG_LINK =
+    '[data-test-error-application-state] .hds-link-standalone';
+  const ERROR_MSG_LINK_TEXT =
+    '[data-test-error-application-state] .hds-link-standalone__text';
+
   test('it renders predefined message for known error status', async function (assert) {
     await render(hbs`<Error::Message @status='401' />`);
-    assert.strictEqual(
-      find('.rose-message-title').textContent.trim(),
-      'You are not signed in',
-    );
-    assert.strictEqual(
-      find('.rose-message-subtitle').textContent.trim(),
-      'Error 401',
-    );
-    assert.strictEqual(
-      find('.rose-message-description').textContent.trim(),
-      'You are not signed in. Please sign in and try again later.',
-    );
+
+    assert.dom(ERROR_MSG_TITLE).hasText('You are not signed in');
+    assert.dom(ERROR_MSG_CODE).hasText('ERROR 401');
+    assert
+      .dom(ERROR_MSG_BODY)
+      .hasText('You are not signed in. Please sign in and try again later.');
+
     await render(hbs`<Error::Message @status='403' />`);
-    assert.strictEqual(
-      find('.rose-message-title').textContent.trim(),
-      'You are not authorized',
-    );
-    assert.strictEqual(
-      find('.rose-message-subtitle').textContent.trim(),
-      'Error 403',
-    );
-    assert.strictEqual(
-      find('.rose-message-description').textContent.trim(),
-      'You must be granted permissions to view this data. Ask your administrator if you think you should have access.',
-    );
+
+    assert.dom(ERROR_MSG_TITLE).hasText('You are not authorized');
+    assert.dom(ERROR_MSG_CODE).hasText('ERROR 403');
+    assert
+      .dom(ERROR_MSG_BODY)
+      .hasText(
+        'You must be granted permissions to view this data. Ask your administrator if you think you should have access.',
+      );
+
     await render(hbs`<Error::Message @status='404' />`);
-    assert.strictEqual(
-      find('.rose-message-title').textContent.trim(),
-      'Resource not found',
-    );
-    assert.strictEqual(
-      find('.rose-message-subtitle').textContent.trim(),
-      'Error 404',
-    );
-    assert.strictEqual(
-      find('.rose-message-description').textContent.trim(),
-      'We could not find the requested resource. You can ask your administrator or try again later.',
-    );
+
+    assert.dom(ERROR_MSG_TITLE).hasText('Resource not found');
+    assert.dom(ERROR_MSG_CODE).hasText('ERROR 404');
+    assert
+      .dom(ERROR_MSG_BODY)
+      .hasText(
+        'We could not find the requested resource. You can ask your administrator or try again later.',
+      );
   });
 
   test('it renders default error for unknown error status', async function (assert) {
     await render(hbs`<Error::Message @status='599' />`);
-    assert.strictEqual(
-      find('.rose-message-title').textContent.trim(),
-      'Something went wrong',
-    );
-    assert.strictEqual(
-      find('.rose-message-subtitle').textContent.trim(),
-      'Error 599',
-    );
-    assert.strictEqual(
-      find('.rose-message-description').textContent.trim(),
-      "We're not sure what happened.  Please contact your administrator or try again later.",
+
+    assert.dom(ERROR_MSG_TITLE).hasText('Something went wrong');
+    assert.dom(ERROR_MSG_CODE).hasText('ERROR 599');
+    assert
+      .dom(ERROR_MSG_BODY)
+      .hasText(
+        "We're not sure what happened.  Please contact your administrator or try again later.",
+      );
+  });
+
+  test('it renders help link with provided doc url', async function (assert) {
+    await render(
+      hbs`<Error::Message @status='599' @docLink='https://support' />`,
     );
+
+    assert.dom(ERROR_MSG_LINK_TEXT).hasText('Need help');
+    assert.dom(ERROR_MSG_LINK).hasAttribute('href', 'https://support');
   });
 });
diff --git a/addons/core/translations/actions/en-us.yaml b/addons/core/translations/actions/en-us.yaml
index 961420913..3bcd875c0 100644
--- a/addons/core/translations/actions/en-us.yaml
+++ b/addons/core/translations/actions/en-us.yaml
@@ -15,7 +15,7 @@ confirm: Confirm
 done: Done
 ok: OK
 deny: Deny
-help: Need help?
+help: Need help
 next: Next
 back: Back
 view: View
diff --git a/addons/rose/addon/components/rose/message/index.hbs b/addons/rose/addon/components/rose/message/index.hbs
deleted file mode 100644
index 526e5c7cc..000000000
--- a/addons/rose/addon/components/rose/message/index.hbs
+++ /dev/null
@@ -1,33 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: BUSL-1.1
-}}
-
-<article ...attributes class='rose-message'>
-
-  {{#if @title}}
-    <header class='rose-message-header'>
-      {{#if @icon}}
-        <Rose::Icon @name={{@icon}} />
-      {{/if}}
-
-      <h2 class='rose-message-title'>{{@title}}</h2>
-
-      {{#if @subtitle}}
-        <h3 class='rose-message-subtitle'>{{@subtitle}}</h3>
-      {{/if}}
-    </header>
-  {{/if}}
-
-  <section class='rose-message-body'>
-    {{yield
-      (hash
-        description=(component
-          'rose/anonymous' tagName='p' class='rose-message-description'
-        )
-        link=(component 'link-to')
-      )
-    }}
-  </section>
-
-</article>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/message/index.js b/addons/rose/addon/components/rose/message/index.js
deleted file mode 100644
index d10bcebbb..000000000
--- a/addons/rose/addon/components/rose/message/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import Component from '@glimmer/component';
-
-export default class RoseMessageComponent extends Component {}
diff --git a/addons/rose/app/components/rose/message.js b/addons/rose/app/components/rose/message.js
deleted file mode 100644
index cc99e8c15..000000000
--- a/addons/rose/app/components/rose/message.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-export { default } from 'rose/components/rose/message';
diff --git a/addons/rose/app/styles/rose/components/_index.scss b/addons/rose/app/styles/rose/components/_index.scss
index 65b2aead8..5763124ed 100644
--- a/addons/rose/app/styles/rose/components/_index.scss
+++ b/addons/rose/app/styles/rose/components/_index.scss
@@ -17,7 +17,6 @@
 @import 'page-header';
 @import 'separator';
 @import 'nav';
-@import 'message';
 @import 'toolbar';
 @import 'code-editor';
 @import 'metadata-list';
diff --git a/addons/rose/app/styles/rose/components/_message.scss b/addons/rose/app/styles/rose/components/_message.scss
deleted file mode 100644
index 7de93d0ce..000000000
--- a/addons/rose/app/styles/rose/components/_message.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-@use '../utilities/type';
-@use '../variables/sizing';
-@use '../variables/media';
-
-.rose-message {
-  --message-color: var(--ui-gray-starker-1);
-
-  display: flex;
-  flex-direction: column;
-  color: var(--message-color);
-  width: sizing.rems(l) * 15; // 16 rems/320 px
-  margin-bottom: sizing.rems(l);
-
-  @media (width <= (media.width(small))) {
-    width: auto;
-  }
-
-  // Icons always need tweaking
-  .rose-icon {
-    --size: #{sizing.rems(m)};
-
-    > svg {
-      vertical-align: text-bottom;
-    }
-  }
-
-  .rose-message-header {
-    display: grid;
-    grid-template-areas:
-      'icon title'
-      'icon subtitle';
-    grid-auto-columns: auto 1fr;
-    margin-bottom: sizing.rems(m);
-
-    .rose-icon {
-      // targeting 40px
-      --size: #{sizing.rems(xl) + sizing.rems(xxs)};
-
-      grid-area: icon;
-      margin-right: sizing.rems(s);
-    }
-
-    .rose-message-title {
-      @include type.type(l, semibold);
-
-      grid-area: title;
-      margin: 0;
-    }
-
-    .rose-message-subtitle {
-      @include type.type(s, normal);
-
-      grid-area: subtitle;
-      margin: 0;
-    }
-  }
-
-  .rose-message-body {
-    display: grid;
-    grid-template-areas:
-      'description description'
-      'left-link right-link';
-
-    .rose-message-description {
-      grid-area: description;
-      margin-bottom: sizing.rems(l);
-    }
-  }
-}
diff --git a/addons/rose/tests/integration/components/rose/message-test.js b/addons/rose/tests/integration/components/rose/message-test.js
deleted file mode 100644
index 48b5675bc..000000000
--- a/addons/rose/tests/integration/components/rose/message-test.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/message', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    await render(hbs`
-      <Rose::Message @title="Title" @subtitle="Subtitle" as |message|>
-        <message.description>Description</message.description>
-        <message.link @route="index">Link</message.link>
-      </Rose::Message>
-    `);
-
-    assert.ok(find('.rose-message'));
-    assert.strictEqual(find('.rose-message-title').textContent.trim(), 'Title');
-    assert.strictEqual(
-      find('.rose-message-subtitle').textContent.trim(),
-      'Subtitle',
-    );
-    assert.strictEqual(
-      find('.rose-message-description').textContent.trim(),
-      'Description',
-    );
-
-    assert.strictEqual(find('a').textContent.trim(), 'Link');
-  });
-});
diff --git a/ui/admin/app/components/form/group/add-members/index.hbs b/ui/admin/app/components/form/group/add-members/index.hbs
index 1b7fed6fa..8c9cf9cdf 100644
--- a/ui/admin/app/components/form/group/add-members/index.hbs
+++ b/ui/admin/app/components/form/group/add-members/index.hbs
@@ -54,17 +54,16 @@
 
 {{#unless this.availableUsers}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.group.messages.no-members.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.group.messages.no-members.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.groups.group.members'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header @title={{t 'resources.group.messages.no-members.title'}} />
+      <A.Body @text={{t 'resources.group.messages.no-members.description'}} />
+      <A.Footer as |F|>
+        <F.LinkStandalone
+          @icon='arrow-left'
+          @text={{t 'actions.back'}}
+          @route='scopes.scope.groups.group.members'
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/host-set/add-hosts/index.hbs b/ui/admin/app/components/form/host-set/add-hosts/index.hbs
index 84575d6c3..c65f5f51a 100644
--- a/ui/admin/app/components/form/host-set/add-hosts/index.hbs
+++ b/ui/admin/app/components/form/host-set/add-hosts/index.hbs
@@ -47,19 +47,20 @@
 
 {{#unless this.hasAvailableHosts}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.host-set.host.messages.add-none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.host-set.host.messages.add-none.description'}}
-      </message.description>
-      <message.link
-        @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
-      >
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header
+        @title={{t 'resources.host-set.host.messages.add-none.title'}}
+      />
+      <A.Body
+        @text={{t 'resources.host-set.host.messages.add-none.description'}}
+      />
+      <A.Footer as |F|>
+        <F.LinkStandalone
+          @icon='arrow-left'
+          @text={{t 'actions.back'}}
+          @route='scopes.scope.host-catalogs.host-catalog.host-sets.host-set.hosts'
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/role/add-principals/index.hbs b/ui/admin/app/components/form/role/add-principals/index.hbs
index 74c347afd..8cd43f987 100644
--- a/ui/admin/app/components/form/role/add-principals/index.hbs
+++ b/ui/admin/app/components/form/role/add-principals/index.hbs
@@ -56,17 +56,18 @@
 
 {{#unless this.hasAvailablePrincipals}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.role.principal.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.role.principal.messages.none.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.roles.role.principals'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header @title={{t 'resources.role.principal.messages.none.title'}} />
+      <A.Body
+        @text={{t 'resources.role.principal.messages.none.description'}}
+      />
+      <A.Footer as |F|>
+        <F.LinkStandalone
+          @icon='arrow-left'
+          @text={{t 'actions.back'}}
+          @route='scopes.scope.roles.role.principals'
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/target/add-host-sets/index.hbs b/ui/admin/app/components/form/target/add-host-sets/index.hbs
index 84b2805dd..d082d8dc4 100644
--- a/ui/admin/app/components/form/target/add-host-sets/index.hbs
+++ b/ui/admin/app/components/form/target/add-host-sets/index.hbs
@@ -49,17 +49,20 @@
 
 {{#unless this.hasAvailableHostSets}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.target.host-source.messages.none.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.target.host-source.messages.none.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.targets.target.host-sources'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header
+        @title={{t 'resources.target.host-source.messages.none.title'}}
+      />
+      <A.Body
+        @text={{t 'resources.target.host-source.messages.none.description'}}
+      />
+      <A.Footer as |F|>
+        <F.LinkStandalone
+          @icon='arrow-left'
+          @text={{t 'actions.back'}}
+          @route='scopes.scope.targets.target.host-sources'
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/admin/app/components/form/target/add-host-sets/index.js b/ui/admin/app/components/form/target/add-host-sets/index.js
index 106df7dc3..45b5de519 100644
--- a/ui/admin/app/components/form/target/add-host-sets/index.js
+++ b/ui/admin/app/components/form/target/add-host-sets/index.js
@@ -4,7 +4,7 @@
  */
 
 import Component from '@glimmer/component';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
 import { loading } from 'ember-loading';
@@ -25,11 +25,10 @@ export default class FormTargetAddHostSetsComponent extends Component {
   selectedHostSetIDs = A();
 
   /**
-   * Checks for unassigned hostsets.
+   * Checks for unassigned host-sets.
    * @param {[HostSetModel]} filteredHostSets
    * @type {boolean}
    */
-  @computed('filteredHostSets.length')
   get hasAvailableHostSets() {
     return this.filteredHostSets.length > 0;
   }
@@ -38,7 +37,6 @@ export default class FormTargetAddHostSetsComponent extends Component {
    * Host sets not already added to the target.
    * @type {[HostSetModel]}
    */
-  @computed('args.{hostSets.[],model.host_sources.[]}')
   get filteredHostSets() {
     // Get IDs for host sets already added to the current target
     const alreadyAddedHostSetIDs = this.args.model.host_sources.map(
diff --git a/ui/admin/app/components/form/user/add-accounts/index.hbs b/ui/admin/app/components/form/user/add-accounts/index.hbs
index 4377ab0c5..9d54ff5f4 100644
--- a/ui/admin/app/components/form/user/add-accounts/index.hbs
+++ b/ui/admin/app/components/form/user/add-accounts/index.hbs
@@ -53,17 +53,16 @@
 
 {{#unless this.hasAvailableAccounts}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.user.messages.no-accounts.title'}}
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.user.messages.no-accounts.description'}}
-      </message.description>
-      <message.link @route='scopes.scope.users.user.accounts'>
-        <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-        {{t 'actions.back'}}
-      </message.link>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header @title={{t 'resources.user.messages.no-accounts.title'}} />
+      <A.Body @text={{t 'resources.user.messages.no-accounts.description'}} />
+      <A.Footer as |F|>
+        <F.LinkStandalone
+          @icon='arrow-left'
+          @text={{t 'actions.back'}}
+          @route='scopes.scope.users.user.accounts'
+        />
+      </A.Footer>
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/admin/app/routes/scopes/index.js b/ui/admin/app/routes/scopes/index.js
index e4a068f8a..dc4a33abc 100644
--- a/ui/admin/app/routes/scopes/index.js
+++ b/ui/admin/app/routes/scopes/index.js
@@ -16,7 +16,7 @@ export default class ScopesIndexRoute extends Route {
   // =methods
 
   /**
-   * If authenticated, redirects to the scope route of the authenticted scope.
+   * If authenticated, redirects to the scope route of the authenticated scope.
    * If unauthenticated, redirects to the first scope that was loaded (if any).
    * @param {[ScopeModel]} model
    * @param {?ScopeModel} model[0]
diff --git a/ui/admin/app/templates/scopes/index.hbs b/ui/admin/app/templates/scopes/index.hbs
index c16222803..5f7437f28 100644
--- a/ui/admin/app/templates/scopes/index.hbs
+++ b/ui/admin/app/templates/scopes/index.hbs
@@ -10,15 +10,13 @@
     <sidebarLayout.body>
       <main>
         <Rose::Layout::Centered>
-          <Rose::Message
-            @title={{t 'auth.titles.no-scopes'}}
-            @icon='flight-icons/svg/alert-circle-16'
-            as |message|
-          >
-            <message.description>
-              {{t 'auth.descriptions.no-scopes'}}
-            </message.description>
-          </Rose::Message>
+          <Hds::ApplicationState as |A|>
+            <A.Header
+              @title={{t 'auth.titles.no-scopes'}}
+              @icon='alert-circle'
+            />
+            <A.Body @text={{t 'auth.descriptions.no-scopes'}} />
+          </Hds::ApplicationState>
         </Rose::Layout::Centered>
       </main>
     </sidebarLayout.body>
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
index 697076581..c6d93c1ab 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs
@@ -168,44 +168,35 @@
       {{/if}}
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.account.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-
-            {{#if (can 'list model' this.authMethod collection='accounts')}}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.account.description'}}
-
-            {{else if
-              (can 'create model' this.authMethod collection='accounts')
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.account.messages.welcome.title'}} />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list model' this.authMethod collection='accounts')
+                'resources.account.description'
+                (if
+                  (can 'create model' this.authMethod collection='accounts')
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.account.title_plural')
             }}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.account.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.account.title_plural')
-              }}
-            {{/if}}
-
-          </message.description>
-
+          />
           {{#if (can 'create model' this.authMethod collection='accounts')}}
-
-            <message.link
-              @route='scopes.scope.auth-methods.auth-method.accounts.new'
-            >
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'resources.account.actions.create'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'resources.account.actions.create'}}
+                @route='scopes.scope.auth-methods.auth-method.accounts.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
index 3ccb19705..5dab3749d 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs
@@ -108,45 +108,41 @@
       {{/if}}
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.managed-group.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-
-            {{#if
-              (can 'list model' this.authMethod collection='managed-groups')
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.managed-group.messages.welcome.title'}}
+          />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list model' this.authMethod collection='managed-groups')
+                'resources.managed-group.description'
+                (if
+                  (can
+                    'create model' this.authMethod collection='managed-groups'
+                  )
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.managed-group.title_plural')
             }}
-              {{! Can list (at least): show default welcome message }}
-              {{t 'resources.managed-group.description'}}
-            {{else if
-              (can 'create model' this.authMethod collection='managed-groups')
-            }}
-              {{! Can create only: show create but not list welcome message }}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.managed-group.title_plural')
-              }}
-            {{else}}
-              {{! Can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.managed-group.title_plural')
-              }}
-            {{/if}}
-          </message.description>
-
+          />
           {{#if
             (can 'create model' this.authMethod collection='managed-groups')
           }}
-            <message.link
-              @route='scopes.scope.auth-methods.auth-method.managed-groups.new'
-            >
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'resources.managed-group.actions.create'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'resources.managed-group.actions.create'}}
+                @route='scopes.scope.auth-methods.auth-method.managed-groups.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/if}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs
index a03e4580a..e1c9bceca 100644
--- a/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs
+++ b/ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs
@@ -102,14 +102,14 @@
       {{/if}}
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.managed-group.member.messages.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.managed-group.member.messages.description'}}
-          </message.description>
-        </Rose::Message>
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.managed-group.member.messages.title'}}
+          />
+          <A.Body
+            @text={{t 'resources.managed-group.member.messages.description'}}
+          />
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/if}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/authenticate.hbs b/ui/admin/app/templates/scopes/scope/authenticate.hbs
index 7dfbfdb9e..66abed3ee 100644
--- a/ui/admin/app/templates/scopes/scope/authenticate.hbs
+++ b/ui/admin/app/templates/scopes/scope/authenticate.hbs
@@ -63,15 +63,15 @@
           {{/if}}
           {{#unless @model.authMethods}}
             <Rose::Layout::Centered>
-              <Rose::Message
-                @title={{t 'resources.auth-method.messages.none.title'}}
-                @icon='flight-icons/svg/alert-circle-16'
-                as |message|
-              >
-                <message.description>
-                  {{t 'resources.auth-method.messages.none.description'}}
-                </message.description>
-              </Rose::Message>
+              <Hds::ApplicationState as |A|>
+                <A.Header
+                  @title={{t 'resources.auth-method.messages.none.title'}}
+                  @icon='alert-circle'
+                />
+                <A.Body
+                  @text={{t 'resources.auth-method.messages.none.description'}}
+                />
+              </Hds::ApplicationState>
             </Rose::Layout::Centered>
           {{/unless}}
         </:body>
diff --git a/ui/admin/app/templates/scopes/scope/authenticate/index.hbs b/ui/admin/app/templates/scopes/scope/authenticate/index.hbs
index e7be45d82..0dc8d659b 100644
--- a/ui/admin/app/templates/scopes/scope/authenticate/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/authenticate/index.hbs
@@ -5,14 +5,12 @@
 
 {{#unless @model}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.auth-method.messages.none.title'}}
-      @icon='flight-icons/svg/alert-circle-16'
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.auth-method.messages.none.description'}}
-      </message.description>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header
+        @title={{t 'resources.auth-method.messages.none.title'}}
+        @icon='alert-circle'
+      />
+      <A.Body @text={{t 'resources.auth-method.messages.none.description'}} />
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs
index 6db50d7bb..bfaead607 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/index.hbs
@@ -76,42 +76,35 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.credential-library.messages.none.title'}}
-          as |message|
-        >
-          <message.description>
-            {{#if
-              (can
-                'list model'
-                this.credentialStore
-                collection='credential-libraries'
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.credential-library.messages.none.title'}}
+          />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can
+                  'list model'
+                  this.credentialStore
+                  collection='credential-libraries'
+                )
+                'resources.credential-library.description'
+                (if
+                  (can
+                    'create model'
+                    this.credentialStore
+                    collection='credential-libraries'
+                  )
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
               )
+              resource=(t 'resources.credential-library.title_plural')
             }}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.credential-library.description'}}
-
-            {{else if
-              (can
-                'create model'
-                this.credentialStore
-                collection='credential-libraries'
-              )
-            }}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.credential-library.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.credential-library.title_plural')
-              }}
-            {{/if}}
-
-          </message.description>
+          />
           {{#if
             (can
               'create model'
@@ -119,14 +112,15 @@
               collection='credential-libraries'
             )
           }}
-            <message.link
-              @route='scopes.scope.credential-stores.credential-store.credential-libraries.new'
-            >
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'titles.new'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'titles.new'}}
+                @route='scopes.scope.credential-stores.credential-store.credential-libraries.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/index.hbs b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/index.hbs
index c37dd5ba0..3ae423b39 100644
--- a/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/index.hbs
@@ -73,46 +73,39 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.credential.messages.none.title'}}
-          as |message|
-        >
-          <message.description>
-            {{#if
-              (can 'list model' this.credentialStore collection='credentials')
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.credential.messages.none.title'}} />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list model' this.credentialStore collection='credentials')
+                'resources.credential.description'
+                (if
+                  (can
+                    'create model' this.credentialStore collection='credentials'
+                  )
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.credential.title_plural')
             }}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.credential.description'}}
-
-            {{else if
-              (can 'create model' this.credentialStore collection='credentials')
-            }}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.credential.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.credential.title_plural')
-              }}
-            {{/if}}
-
-          </message.description>
-
+          />
           {{#if
             (can 'create model' this.credentialStore collection='credentials')
           }}
-            <message.link
-              @route='scopes.scope.credential-stores.credential-store.credentials.new'
-            >
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'titles.new'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'titles.new'}}
+                @route='scopes.scope.credential-stores.credential-store.credentials.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/edit.hbs b/ui/admin/app/templates/scopes/scope/edit.hbs
index a9025bb54..c1252c091 100644
--- a/ui/admin/app/templates/scopes/scope/edit.hbs
+++ b/ui/admin/app/templates/scopes/scope/edit.hbs
@@ -83,11 +83,9 @@
           />
         {{else}}
           <Rose::Layout::Centered>
-            <Rose::Message as |message|>
-              <message.description>
-                {{t 'resources.scope.messages.cannot_read'}}
-              </message.description>
-            </Rose::Message>
+            <Hds::ApplicationState as |A|>
+              <A.Body @text={{t 'resources.scope.messages.cannot_read'}} />
+            </Hds::ApplicationState>
           </Rose::Layout::Centered>
         {{/if}}
       </bc.Body>
diff --git a/ui/admin/app/templates/scopes/scope/error.hbs b/ui/admin/app/templates/scopes/scope/error.hbs
index cf83a0292..90c841b4a 100644
--- a/ui/admin/app/templates/scopes/scope/error.hbs
+++ b/ui/admin/app/templates/scopes/scope/error.hbs
@@ -7,6 +7,9 @@
 
 <Rose::Layout::Centered>
   {{#each @model.errors as |error|}}
-    <Error::Message @status={{error.status}} />
+    <Error::Message
+      @status={{error.status}}
+      @docLink={{doc-url 'support-page'}}
+    />
   {{/each}}
 </Rose::Layout::Centered>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/groups/group/members.hbs b/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
index b10c84277..3a5e44ca9 100644
--- a/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
+++ b/ui/admin/app/templates/scopes/scope/groups/group/members.hbs
@@ -90,18 +90,17 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.group.messages.members.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.group.messages.members.description'}}
-          </message.description>
-          <message.link @route='scopes.scope.groups.group.add-members'>
-            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-            {{t 'resources.group.actions.add-members'}}
-          </message.link>
-        </Rose::Message>
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.group.messages.members.title'}} />
+          <A.Body @text={{t 'resources.group.messages.members.description'}} />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='plus-circle'
+              @text={{t 'resources.group.actions.add-members'}}
+              @route='scopes.scope.groups.group.add-members'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs
index 72f63cb50..5c3a7f98d 100644
--- a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/host-set/hosts/index.hbs
@@ -127,14 +127,14 @@
 
     {{#unless @model.hosts}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.host-set.host.messages.none.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.host-set.host.messages.none.description'}}
-          </message.description>
-        </Rose::Message>
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.host-set.host.messages.none.title'}}
+          />
+          <A.Body
+            @text={{t 'resources.host-set.host.messages.none.description'}}
+          />
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/unless}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs
index 1aa9aa758..b9a5c75af 100644
--- a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/host-sets/index.hbs
@@ -69,42 +69,35 @@
 
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.host-set.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-
-            {{#if (can 'list model' this.hostCatalog collection='host-sets')}}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.host-set.description'}}
-
-            {{else if
-              (can 'create model' this.hostCatalog collection='host-sets')
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.host-set.messages.welcome.title'}} />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list model' this.hostCatalog collection='host-sets')
+                'resources.host-set.description'
+                (if
+                  (can 'create model' this.hostCatalog collection='host-sets')
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.host-set.title_plural')
             }}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.host-set.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.host-set.title_plural')
-              }}
-            {{/if}}
-          </message.description>
-
+          />
           {{#if (can 'create model' this.hostCatalog collection='host-sets')}}
-            <message.link
-              @route='scopes.scope.host-catalogs.host-catalog.host-sets.new'
-            >
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'titles.new'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'titles.new'}}
+                @route='scopes.scope.host-catalogs.host-catalog.host-sets.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs
index 87188d295..bd24d59ed 100644
--- a/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs
@@ -69,39 +69,35 @@
 
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.host.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-            {{#if (can 'list model' this.hostCatalog collection='hosts')}}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.host.description'}}
-
-            {{else if (can 'create model' this.hostCatalog collection='hosts')}}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.host.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.host.title_plural')
-              }}
-            {{/if}}
-          </message.description>
-
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.host.messages.welcome.title'}} />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list model' this.hostCatalog collection='hosts')
+                'resources.host.description'
+                (if
+                  (can 'create model' this.hostCatalog collection='hosts')
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.host.title_plural')
+            }}
+          />
           {{#if (can 'create model' this.hostCatalog collection='hosts')}}
-            <message.link
-              @route='scopes.scope.host-catalogs.host-catalog.hosts.new'
-            >
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'titles.new'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'titles.new'}}
+                @route='scopes.scope.host-catalogs.host-catalog.hosts.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/if}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs b/ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs
index 3214d396f..35f122e61 100644
--- a/ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/host-catalogs/index.hbs
@@ -129,7 +129,6 @@
               @text={{t 'titles.new'}}
               @route='scopes.scope.host-catalogs.new'
             />
-
           </A.Footer>
         {{/if}}
       </Hds::ApplicationState>
diff --git a/ui/admin/app/templates/scopes/scope/policies/index.hbs b/ui/admin/app/templates/scopes/scope/policies/index.hbs
index 34b5f8d99..3f289db78 100644
--- a/ui/admin/app/templates/scopes/scope/policies/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/policies/index.hbs
@@ -121,34 +121,35 @@
       </Hds::Table>
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.policy.messages.none.title'}}
-          as |message|
-        >
-          <message.description>
-            {{#if (can 'list model' this.scope collection='policies')}}
-              {{t 'resources.policy.messages.none.description'}}
-            {{else if (can 'create model' this.scope collection='policies')}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.policy.title_plural')
-              }}
-            {{else}}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.policy.title_plural')
-              }}
-            {{/if}}
-          </message.description>
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.policy.messages.none.title'}} />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list model' this.scope collection='policies')
+                'resources.policy.messages.none.description'
+                (if
+                  (can 'create model' this.scope collection='policies')
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.policy.title_plural')
+            }}
+          />
           {{#if (can 'create model' this.scope collection='policies')}}
-            <Hds::Link::Standalone
-              @icon='plus-circle'
-              @iconPosition='leading'
-              @route='scopes.scope.policies.new'
-              @text={{t 'resources.policy.messages.none.link'}}
-            />
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'resources.policy.messages.none.link'}}
+                @route='scopes.scope.policies.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/if}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs b/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
index ba293dd21..37675ddff 100644
--- a/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
+++ b/ui/admin/app/templates/scopes/scope/roles/role/principals.hbs
@@ -98,18 +98,21 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.role.principal.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.role.principal.messages.welcome.description'}}
-          </message.description>
-          <message.link @route='scopes.scope.roles.role.add-principals'>
-            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-            {{t 'resources.role.principal.actions.add-principals'}}
-          </message.link>
-        </Rose::Message>
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.role.principal.messages.welcome.title'}}
+          />
+          <A.Body
+            @text={{t 'resources.role.principal.messages.welcome.description'}}
+          />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='plus-circle'
+              @text={{t 'resources.role.principal.actions.add-principals'}}
+              @route='scopes.scope.roles.role.add-principals'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs b/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs
index 6104e2a1a..ec18c3778 100644
--- a/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs
@@ -133,36 +133,37 @@
       </Hds::Table>
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.storage-bucket.messages.none.title'}}
-          as |message|
-        >
-          <message.description>
-            {{#if (can 'list scope' this.scope collection='storage-buckets')}}
-              {{t 'resources.storage-bucket.messages.none.description'}}
-            {{else if
-              (can 'create scope' this.scope collection='storage-buckets')
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.storage-bucket.messages.none.title'}}
+          />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list scope' this.scope collection='storage-buckets')
+                'resources.storage-bucket.messages.none.description'
+                (if
+                  (can 'create scope' this.scope collection='storage-buckets')
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.storage-bucket.title_plural')
             }}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.storage-bucket.title_plural')
-              }}
-            {{else}}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.storage-bucket.title_plural')
-              }}
-            {{/if}}
-          </message.description>
+          />
           {{#if (can 'create scope' this.scope collection='storage-buckets')}}
-            <Hds::Link::Standalone
-              @icon='plus-circle'
-              @iconPosition='leading'
-              @route='scopes.scope.storage-buckets.new'
-              @text={{t 'resources.storage-bucket.messages.none.link'}}
-            />
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'resources.storage-bucket.messages.none.link'}}
+                @route='scopes.scope.storage-buckets.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/if}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/add-brokered-credential-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/add-brokered-credential-sources.hbs
index 842293b66..04ea15936 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/add-brokered-credential-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/add-brokered-credential-sources.hbs
@@ -36,24 +36,25 @@
 
     {{#unless this.hasAvailableBrokeredCredentialSources}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t
-            'resources.target.brokered-credential-source.messages.none.title'
-          }}
-          as |message|
-        >
-          <message.description>
-            {{t
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t
+              'resources.target.brokered-credential-source.messages.none.title'
+            }}
+          />
+          <A.Body
+            @text={{t
               'resources.target.brokered-credential-source.messages.none.description'
             }}
-          </message.description>
-          <message.link
-            @route='scopes.scope.targets.target.brokered-credential-sources'
-          >
-            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-            {{t 'actions.back'}}
-          </message.link>
-        </Rose::Message>
+          />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='arrow-left'
+              @text={{t 'actions.back'}}
+              @route='scopes.scope.targets.target.brokered-credential-sources'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/unless}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs
index 6f5114fd2..600fad182 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/add-host-sources.hbs
@@ -24,32 +24,13 @@
   </page.header>
 
   <page.body>
-    {{#if @model.hostSets}}
-      <Form::Target::AddHostSets
-        @model={{@model.target}}
-        @hostCatalogs={{@model.hostCatalogs}}
-        @hostSets={{@model.hostSets}}
-        @submit={{fn this.save @model.target}}
-        @cancel={{this.cancel}}
-      />
-    {{/if}}
-
-    {{#unless @model.hostSets}}
-      <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.target.host-source.messages.none.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.target.host-source.messages.none.description'}}
-          </message.description>
-          <message.link @route='scopes.scope.targets.target.host-sources'>
-            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-            {{t 'actions.back'}}
-          </message.link>
-        </Rose::Message>
-      </Rose::Layout::Centered>
-    {{/unless}}
+    <Form::Target::AddHostSets
+      @model={{@model.target}}
+      @hostCatalogs={{@model.hostCatalogs}}
+      @hostSets={{@model.hostSets}}
+      @submit={{fn this.save @model.target}}
+      @cancel={{this.cancel}}
+    />
   </page.body>
 
 </Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/add-injected-application-credential-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/add-injected-application-credential-sources.hbs
index 5e0c12f69..8b05ee1e8 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/add-injected-application-credential-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/add-injected-application-credential-sources.hbs
@@ -41,24 +41,25 @@
 
     {{#unless this.hasAvailableInjectedApplicationCredentialSources}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t
-            'resources.target.injected-application-credential-source.messages.none.title'
-          }}
-          as |message|
-        >
-          <message.description>
-            {{t
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t
+              'resources.target.injected-application-credential-source.messages.none.title'
+            }}
+          />
+          <A.Body
+            @text={{t
               'resources.target.injected-application-credential-source.messages.none.description'
             }}
-          </message.description>
-          <message.link
-            @route='scopes.scope.targets.target.injected-application-credential-sources'
-          >
-            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-            {{t 'actions.back'}}
-          </message.link>
-        </Rose::Message>
+          />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='arrow-left'
+              @text={{t 'actions.back'}}
+              @route='scopes.scope.targets.target.injected-application-credential-sources'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/unless}}
   </page.body>
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs
index 4adf3821a..288265f4d 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs
@@ -106,24 +106,27 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t
-            'resources.target.brokered-credential-source.messages.welcome.title'
-          }}
-          as |message|
-        >
-          <message.description>
-            {{t
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t
+              'resources.target.brokered-credential-source.messages.welcome.title'
+            }}
+          />
+          <A.Body
+            @text={{t
               'resources.target.brokered-credential-source.messages.welcome.description'
             }}
-          </message.description>
-          <message.link
-            @route='scopes.scope.targets.target.add-brokered-credential-sources'
-          >
-            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-            {{t 'resources.target.actions.add-brokered-credential-sources'}}
-          </message.link>
-        </Rose::Message>
+          />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='plus-circle'
+              @text={{t
+                'resources.target.actions.add-brokered-credential-sources'
+              }}
+              @route='scopes.scope.targets.target.add-brokered-credential-sources'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs
index 3b4524e16..979ee77fb 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs
@@ -92,18 +92,23 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.target.host-source.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.target.host-source.messages.welcome.description'}}
-          </message.description>
-          <message.link @route='scopes.scope.targets.target.add-host-sources'>
-            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-            {{t 'resources.target.actions.add-host-sources'}}
-          </message.link>
-        </Rose::Message>
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t 'resources.target.host-source.messages.welcome.title'}}
+          />
+          <A.Body
+            @text={{t
+              'resources.target.host-source.messages.welcome.description'
+            }}
+          />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='plus-circle'
+              @text={{t 'resources.target.actions.add-host-sources'}}
+              @route='scopes.scope.targets.target.add-host-sources'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/targets/target/injected-application-credential-sources.hbs b/ui/admin/app/templates/scopes/scope/targets/target/injected-application-credential-sources.hbs
index 0a4e31f41..04fd1cf4f 100644
--- a/ui/admin/app/templates/scopes/scope/targets/target/injected-application-credential-sources.hbs
+++ b/ui/admin/app/templates/scopes/scope/targets/target/injected-application-credential-sources.hbs
@@ -110,26 +110,27 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t
-            'resources.target.injected-application-credential-source.messages.welcome.title'
-          }}
-          as |message|
-        >
-          <message.description>
-            {{t
+        <Hds::ApplicationState as |A|>
+          <A.Header
+            @title={{t
+              'resources.target.injected-application-credential-source.messages.welcome.title'
+            }}
+          />
+          <A.Body
+            @text={{t
               'resources.target.injected-application-credential-source.messages.welcome.description'
             }}
-          </message.description>
-          <message.link
-            @route='scopes.scope.targets.target.add-injected-application-credential-sources'
-          >
-            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-            {{t
-              'resources.target.actions.add-injected-application-credential-sources'
-            }}
-          </message.link>
-        </Rose::Message>
+          />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='plus-circle'
+              @text={{t
+                'resources.target.actions.add-injected-application-credential-sources'
+              }}
+              @route='scopes.scope.targets.target.add-injected-application-credential-sources'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs b/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
index b750196fc..4b97f4209 100644
--- a/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user/accounts.hbs
@@ -94,18 +94,17 @@
     {{else}}
 
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.user.messages.accounts.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.user.messages.accounts.description'}}
-          </message.description>
-          <message.link @route='scopes.scope.users.user.add-accounts'>
-            <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-            {{t 'resources.user.actions.add-accounts'}}
-          </message.link>
-        </Rose::Message>
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.user.messages.accounts.title'}} />
+          <A.Body @text={{t 'resources.user.messages.accounts.description'}} />
+          <A.Footer as |F|>
+            <F.LinkStandalone
+              @icon='plus-circle'
+              @text={{t 'resources.user.actions.add-accounts'}}
+              @route='scopes.scope.users.user.add-accounts'
+            />
+          </A.Footer>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
 
     {{/if}}
diff --git a/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs b/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs
index 0b6ae827d..ed0f2dedd 100644
--- a/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs
+++ b/ui/admin/app/templates/scopes/scope/users/user/add-accounts.hbs
@@ -21,32 +21,13 @@
   </page.header>
 
   <page.body>
-    {{#if @model.accounts}}
-      <Form::User::AddAccounts
-        @model={{@model.user}}
-        @authMethods={{@model.authMethods}}
-        @accounts={{@model.accounts}}
-        @submit={{fn this.addAccounts @model.user}}
-        @cancel={{this.cancel}}
-      />
-    {{/if}}
-
-    {{#unless @model.accounts}}
-      <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.user.messages.no-accounts.title'}}
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.user.messages.no-accounts.description'}}
-          </message.description>
-          <message.link @route='scopes.scope.users.user.accounts'>
-            <Rose::Icon @name='flight-icons/svg/chevron-left-16' />
-            {{t 'actions.back'}}
-          </message.link>
-        </Rose::Message>
-      </Rose::Layout::Centered>
-    {{/unless}}
+    <Form::User::AddAccounts
+      @model={{@model.user}}
+      @authMethods={{@model.authMethods}}
+      @accounts={{@model.accounts}}
+      @submit={{fn this.addAccounts @model.user}}
+      @cancel={{this.cancel}}
+    />
   </page.body>
 
 </Rose::Layout::Page>
\ No newline at end of file
diff --git a/ui/admin/app/templates/scopes/scope/workers/index.hbs b/ui/admin/app/templates/scopes/scope/workers/index.hbs
index bf0879ce9..09ad386fa 100644
--- a/ui/admin/app/templates/scopes/scope/workers/index.hbs
+++ b/ui/admin/app/templates/scopes/scope/workers/index.hbs
@@ -200,39 +200,39 @@
       {{/if}}
     {{else}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.worker.messages.welcome.title'}}
-          as |message|
-        >
-          <message.description>
-            {{#if (can 'list worker' this.scope collection='workers')}}
-              {{! can list (at least):  show default welcome message}}
-              {{t 'resources.worker.description'}}
-            {{else if
-              (can 'create worker led worker' this.scope collection='workers')
+        <Hds::ApplicationState as |A|>
+          <A.Header @title={{t 'resources.worker.messages.welcome.title'}} />
+          <A.Body
+            {{! can list (at least):  show default welcome message}}
+            {{! can create (only):  show create-but-not-list welcome message}}
+            {{! can neither list nor create:  show neither-list-nor-create welcome message}}
+            @text={{t
+              (if
+                (can 'list worker' this.scope collection='workers')
+                'resources.worker.description'
+                (if
+                  (can
+                    'create worker led worker' this.scope collection='workers'
+                  )
+                  'descriptions.create-but-not-list'
+                  'descriptions.neither-list-nor-create'
+                )
+              )
+              resource=(t 'resources.worker.title_plural')
             }}
-              {{! can create (only):  show create-but-not-list welcome message}}
-              {{t
-                'descriptions.create-but-not-list'
-                resource=(t 'resources.worker.title_plural')
-              }}
-            {{else}}
-              {{! can neither list nor create }}
-              {{t
-                'descriptions.neither-list-nor-create'
-                resource=(t 'resources.worker.title_plural')
-              }}
-            {{/if}}
-          </message.description>
+          />
           {{#if
             (can 'create worker led worker' this.scope collection='workers')
           }}
-            <message.link @route='scopes.scope.workers.new'>
-              <Rose::Icon @name='flight-icons/svg/plus-circle-16' />
-              {{t 'titles.new'}}
-            </message.link>
+            <A.Footer as |F|>
+              <F.LinkStandalone
+                @icon='plus-circle'
+                @text={{t 'titles.new'}}
+                @route='scopes.scope.workers.new'
+              />
+            </A.Footer>
           {{/if}}
-        </Rose::Message>
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/if}}
 
diff --git a/ui/admin/config/environment.js b/ui/admin/config/environment.js
index 5d7e0b26a..23f9ab7f8 100644
--- a/ui/admin/config/environment.js
+++ b/ui/admin/config/environment.js
@@ -131,6 +131,7 @@ module.exports = function (environment) {
         'storage-policy.update':
           '/docs/configuration/session-recording/update-storage-policy',
         alias: '/docs/concepts/aliases',
+        'support-page': 'https://support.hashicorp.com/hc/en-us',
       },
     },
 
diff --git a/ui/admin/tests/acceptance/aliases/read-test.js b/ui/admin/tests/acceptance/aliases/read-test.js
index 483132d84..13817733f 100644
--- a/ui/admin/tests/acceptance/aliases/read-test.js
+++ b/ui/admin/tests/acceptance/aliases/read-test.js
@@ -10,13 +10,13 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | aliases | read', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
   setupIndexedDb(hooks);
 
-  const MESSAGE_SELECTOR = '.rose-message-subtitle';
   const TABLE_LINK_SELECTOR = '.hds-table__tbody tr:first-child a';
 
   const instances = {
@@ -77,6 +77,8 @@ module('Acceptance | aliases | read', function (hooks) {
     await visit(urls.unknownAlias);
     await a11yAudit();
 
-    assert.dom(MESSAGE_SELECTOR).hasText('Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 });
diff --git a/ui/admin/tests/acceptance/credential-library/read-test.js b/ui/admin/tests/acceptance/credential-library/read-test.js
index 2794a145e..87fd41190 100644
--- a/ui/admin/tests/acceptance/credential-library/read-test.js
+++ b/ui/admin/tests/acceptance/credential-library/read-test.js
@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, click, currentURL, find } from '@ember/test-helpers';
+import { visit, click, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
@@ -111,7 +111,9 @@ module('Acceptance | credential-libraries | read', function (hooks) {
   test('visiting an unknown credential library displays 404 message', async function (assert) {
     await visit(urls.unknownCredentialLibrary);
     await a11yAudit();
-    assert.ok(find('.rose-message-subtitle').textContent.trim(), 'Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
   test('users can navigate to credential library and incorrect url auto-corrects', async function (assert) {
diff --git a/ui/admin/tests/acceptance/credential-store/credentials/read-test.js b/ui/admin/tests/acceptance/credential-store/credentials/read-test.js
index 91324a860..4af24cd7d 100644
--- a/ui/admin/tests/acceptance/credential-store/credentials/read-test.js
+++ b/ui/admin/tests/acceptance/credential-store/credentials/read-test.js
@@ -172,7 +172,9 @@ module('Acceptance | credential-stores | credentials | read', function (hooks) {
   test('visiting an unknown credential displays 404 message', async function (assert) {
     await visit(urls.unknownCredential);
     await a11yAudit();
-    assert.ok(find('.rose-message-subtitle').textContent.trim(), 'Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
   test('Users can link to docs page for credential', async function (assert) {
diff --git a/ui/admin/tests/acceptance/credential-store/read-test.js b/ui/admin/tests/acceptance/credential-store/read-test.js
index c96a18831..19e2d4198 100644
--- a/ui/admin/tests/acceptance/credential-store/read-test.js
+++ b/ui/admin/tests/acceptance/credential-store/read-test.js
@@ -132,7 +132,9 @@ module('Acceptance | credential-stores | read', function (hooks) {
     await visit(urls.unknownCredentialStore);
     await a11yAudit();
 
-    assert.dom('.rose-message-subtitle').hasText('Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
   test('users can link to docs page for credential store', async function (assert) {
diff --git a/ui/admin/tests/acceptance/host-catalogs/host-sets/read-test.js b/ui/admin/tests/acceptance/host-catalogs/host-sets/read-test.js
index a8a9b0536..777863969 100644
--- a/ui/admin/tests/acceptance/host-catalogs/host-sets/read-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/host-sets/read-test.js
@@ -94,7 +94,9 @@ module('Acceptance | host-catalogs | host-sets | read', function (hooks) {
     await visit(urls.unknownHostSet);
     await a11yAudit();
 
-    assert.dom('.rose-message-subtitle').hasText('Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
   test('users can link to docs page for host sets', async function (assert) {
diff --git a/ui/admin/tests/acceptance/host-catalogs/read-test.js b/ui/admin/tests/acceptance/host-catalogs/read-test.js
index b2ab8ccfe..790575beb 100644
--- a/ui/admin/tests/acceptance/host-catalogs/read-test.js
+++ b/ui/admin/tests/acceptance/host-catalogs/read-test.js
@@ -88,7 +88,9 @@ module('Acceptance | host-catalogs | read', function (hooks) {
     await visit(urls.unknownHostCatalog);
     await a11yAudit();
 
-    assert.dom('.rose-message-subtitle').hasText('Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
   test('users can link to docs page for host catalog', async function (assert) {
diff --git a/ui/admin/tests/acceptance/policy/list-test.js b/ui/admin/tests/acceptance/policy/list-test.js
index 55460be36..cb7faa2e4 100644
--- a/ui/admin/tests/acceptance/policy/list-test.js
+++ b/ui/admin/tests/acceptance/policy/list-test.js
@@ -9,6 +9,7 @@ import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | policies | list', function (hooks) {
   setupApplicationTest(hooks);
@@ -19,8 +20,6 @@ module('Acceptance | policies | list', function (hooks) {
   let intl;
 
   const STORAGE_POLICY_TITLE = 'Storage Policies';
-  const MESSAGE_DESCRIPTION_SELECTOR = '.rose-message-description';
-  const MESSAGE_LINK_SELECTOR = '.rose-message-body .hds-link-standalone';
   const DROPDOWN_BUTTON_SELECTOR = '.hds-dropdown-toggle-icon';
   const DROPDOWN_ITEM_SELECTOR = '.hds-dropdown-list-item a';
 
@@ -72,9 +71,9 @@ module('Acceptance | policies | list', function (hooks) {
     await click(`[href="${urls.policies}"]`);
 
     assert
-      .dom(MESSAGE_DESCRIPTION_SELECTOR)
+      .dom(commonSelectors.PAGE_MESSAGE_DESCRIPTION)
       .hasText(intl.t('resources.policy.messages.none.description'));
-    assert.dom(MESSAGE_LINK_SELECTOR).exists();
+    assert.dom(commonSelectors.PAGE_MESSAGE_LINK).exists();
   });
 
   test('user cannot navigate to index without either list or create actions', async function (assert) {
@@ -100,12 +99,12 @@ module('Acceptance | policies | list', function (hooks) {
 
     await visit(urls.policies);
 
-    assert.dom(MESSAGE_DESCRIPTION_SELECTOR).hasText(
+    assert.dom(commonSelectors.PAGE_MESSAGE_DESCRIPTION).hasText(
       intl.t('descriptions.neither-list-nor-create', {
         resource: STORAGE_POLICY_TITLE,
       }),
     );
-    assert.dom(MESSAGE_LINK_SELECTOR).doesNotExist();
+    assert.dom(commonSelectors.PAGE_MESSAGE_LINK).doesNotExist();
   });
 
   test('user can navigate to index with only create action', async function (assert) {
@@ -132,12 +131,12 @@ module('Acceptance | policies | list', function (hooks) {
 
     await click(`[href="${urls.policies}"]`);
 
-    assert.dom(MESSAGE_DESCRIPTION_SELECTOR).hasText(
+    assert.dom(commonSelectors.PAGE_MESSAGE_DESCRIPTION).hasText(
       intl.t('descriptions.create-but-not-list', {
         resource: STORAGE_POLICY_TITLE,
       }),
     );
-    assert.dom(MESSAGE_LINK_SELECTOR).exists();
+    assert.dom(commonSelectors.PAGE_MESSAGE_LINK).exists();
   });
 
   test('user can navigate to index with only list action', async function (assert) {
@@ -165,9 +164,9 @@ module('Acceptance | policies | list', function (hooks) {
     await click(`[href="${urls.policies}"]`);
 
     assert
-      .dom(MESSAGE_DESCRIPTION_SELECTOR)
+      .dom(commonSelectors.PAGE_MESSAGE_DESCRIPTION)
       .hasText(intl.t('resources.policy.messages.none.description'));
-    assert.dom(MESSAGE_LINK_SELECTOR).doesNotExist();
+    assert.dom(commonSelectors.PAGE_MESSAGE_LINK).doesNotExist();
   });
 
   test('user cannot navigate to index when feature is disabled', async function (assert) {
diff --git a/ui/admin/tests/acceptance/policy/read-test.js b/ui/admin/tests/acceptance/policy/read-test.js
index 04195cabc..598281199 100644
--- a/ui/admin/tests/acceptance/policy/read-test.js
+++ b/ui/admin/tests/acceptance/policy/read-test.js
@@ -10,6 +10,7 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { setupIndexedDb } from 'api/test-support/helpers/indexed-db';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 import { authenticateSession } from 'ember-simple-auth/test-support';
+import * as commonSelectors from 'admin/tests/helpers/selectors';
 
 module('Acceptance | policies | read', function (hooks) {
   setupApplicationTest(hooks);
@@ -18,7 +19,6 @@ module('Acceptance | policies | read', function (hooks) {
 
   let features;
 
-  const MESSAGE_SELECTOR = '.rose-message-subtitle';
   const TABLE_LINK_SELECTOR = '.hds-table__tbody tr:first-child a';
 
   const instances = {
@@ -81,6 +81,8 @@ module('Acceptance | policies | read', function (hooks) {
     await visit(urls.unknownPolicy);
     await a11yAudit();
 
-    assert.dom(MESSAGE_SELECTOR).hasText('Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 });
diff --git a/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js b/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js
index fa8170dec..e15443639 100644
--- a/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js
+++ b/ui/admin/tests/acceptance/targets/brokered-credential-sources-test.js
@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, find, findAll, click, currentURL } from '@ember/test-helpers';
+import { visit, findAll, click, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { Response } from 'miragejs';
@@ -167,7 +167,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     });
     await visit(urls.addBrokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, credentialSourceCount);
-    assert.dom('.rose-message-title').doesNotExist();
+    assert.dom('.hds-application-state__title').doesNotExist();
   });
 
   test('displays list of brokered credential sources with only credential libraries available', async function (assert) {
@@ -176,15 +176,14 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     });
     await visit(urls.addBrokeredCredentialSources);
     assert.strictEqual(findAll('tbody tr').length, getCredentialLibraryCount());
-    assert.dom('.rose-message-title').doesNotExist();
+    assert.dom('.hds-application-state__title').doesNotExist();
   });
 
   test('displays no brokered credential sources message when none available', async function (assert) {
     await visit(urls.addBrokeredCredentialSources);
-    assert.strictEqual(
-      find('.rose-message-title').textContent.trim(),
-      'No Brokered Credential Sources Available',
-    );
+    assert
+      .dom('.hds-application-state__title')
+      .hasText('No Brokered Credential Sources Available');
   });
 
   test('when no brokered credential sources available, button routes to add brokered credential sources', async function (assert) {
@@ -193,7 +192,7 @@ module('Acceptance | targets | brokered credential sources', function (hooks) {
     });
     await visit(urls.brokeredCredentialSources);
     // Click on the rose message link
-    await click(find('.rose-message > .rose-message-body > a'));
+    await click('.hds-application-state__footer .hds-link-standalone');
     assert.strictEqual(currentURL(), urls.addBrokeredCredentialSources);
   });
 
diff --git a/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js b/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js
index 0fc1be962..ae658c0c1 100644
--- a/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js
+++ b/ui/admin/tests/acceptance/targets/injected-application-credential-sources-test.js
@@ -4,7 +4,7 @@
  */
 
 import { module, test } from 'qunit';
-import { visit, find, findAll, click, currentURL } from '@ember/test-helpers';
+import { visit, findAll, click, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'admin/tests/helpers';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import { Response } from 'miragejs';
@@ -163,7 +163,7 @@ module(
       });
       await visit(urls.addInjectedApplicationCredentialSources);
       assert.strictEqual(findAll('tbody tr').length, credentialSourceCount);
-      assert.dom('.rose-message-title').doesNotExist();
+      assert.dom('.hds-application-state__title').doesNotExist();
     });
 
     test('displays list of injected application credential sources with only credential libraries available', async function (assert) {
@@ -177,15 +177,14 @@ module(
         findAll('tbody tr').length,
         getCredentialLibraryCount(),
       );
-      assert.dom('.rose-message-title').doesNotExist();
+      assert.dom('.hds-application-state__title').doesNotExist();
     });
 
     test('displays no injected application credential sources message when none available', async function (assert) {
       await visit(urls.addInjectedApplicationCredentialSources);
-      assert.strictEqual(
-        find('.rose-message-title').textContent.trim(),
-        'No Injected Application Credential Sources Available',
-      );
+      assert
+        .dom('.hds-application-state__title')
+        .hasText('No Injected Application Credential Sources Available');
     });
 
     test('when no injected application credential sources available, button routes to add injected application credential sources', async function (assert) {
@@ -194,7 +193,7 @@ module(
       });
       await visit(urls.injectedApplicationCredentialSources);
       // Click on the rose message link
-      await click(find('.rose-message > .rose-message-body > a'));
+      await click('.hds-application-state__footer .hds-link-standalone');
       assert.strictEqual(
         currentURL(),
         urls.addInjectedApplicationCredentialSources,
diff --git a/ui/admin/tests/acceptance/targets/read-test.js b/ui/admin/tests/acceptance/targets/read-test.js
index ab58bf8d8..1292b2946 100644
--- a/ui/admin/tests/acceptance/targets/read-test.js
+++ b/ui/admin/tests/acceptance/targets/read-test.js
@@ -145,7 +145,9 @@ module('Acceptance | targets | read', function (hooks) {
     await visit(urls.unknownTarget);
     await a11yAudit();
 
-    assert.dom('.rose-message-subtitle').hasText('Error 404');
+    assert
+      .dom(commonSelectors.RESOURCE_NOT_FOUND_SUBTITLE)
+      .hasText(commonSelectors.RESOURCE_NOT_FOUND_VALUE);
   });
 
   test('users can link to docs page for target', async function (assert) {
diff --git a/ui/admin/tests/helpers/selectors.js b/ui/admin/tests/helpers/selectors.js
index 4df37650d..4da6b4333 100644
--- a/ui/admin/tests/helpers/selectors.js
+++ b/ui/admin/tests/helpers/selectors.js
@@ -16,11 +16,13 @@ export const FIELD_DESCRIPTION_VALUE = 'description';
 
 export const TABLE_RESOURCE_LINK = (url) => `tbody [href="${url}"]`;
 
-export const RESOURCE_NOT_FOUND_SUBTITLE = '.rose-message-subtitle';
-export const RESOURCE_NOT_FOUND_VALUE = 'Error 404';
+export const RESOURCE_NOT_FOUND_SUBTITLE =
+  '[data-test-error-application-state] .hds-application-state__error-code';
+export const RESOURCE_NOT_FOUND_VALUE = 'ERROR 404';
 
-export const PAGE_MESSAGE_DESCRIPTION = '.rose-message-description';
-export const PAGE_MESSAGE_LINK = '.rose-message-body .hds-link-standalone';
+export const PAGE_MESSAGE_DESCRIPTION = '.hds-application-state__body-text';
+export const PAGE_MESSAGE_LINK =
+  '.hds-application-state__footer .hds-link-standalone';
 
 export const HREF = (url) => `[href="${url}"]`;
 
diff --git a/ui/desktop/app/templates/error.hbs b/ui/desktop/app/templates/error.hbs
index 465e90b0a..d3bbc7c8d 100644
--- a/ui/desktop/app/templates/error.hbs
+++ b/ui/desktop/app/templates/error.hbs
@@ -8,7 +8,7 @@
 <main>
 
   <Rose::Layout::Centered>
-    <Error::Message />
+    <Error::Message @docLink={{doc-url 'support-page'}} />
   </Rose::Layout::Centered>
 
   <Rose::Layout::Centered>
diff --git a/ui/desktop/app/templates/scopes/scope/authenticate.hbs b/ui/desktop/app/templates/scopes/scope/authenticate.hbs
index e9d6953e7..dea545b3f 100644
--- a/ui/desktop/app/templates/scopes/scope/authenticate.hbs
+++ b/ui/desktop/app/templates/scopes/scope/authenticate.hbs
@@ -49,16 +49,15 @@
     {{/if}}
     {{#unless @model.authMethods}}
       <Rose::Layout::Centered>
-        <Rose::Message
-          @title={{t 'resources.auth-method.messages.none.title'}}
-          @icon='flight-icons/svg/alert-circle-16'
-          data-test-no-auth-methods
-          as |message|
-        >
-          <message.description>
-            {{t 'resources.auth-method.messages.none.description'}}
-          </message.description>
-        </Rose::Message>
+        <Hds::ApplicationState data-test-no-auth-methods as |A|>
+          <A.Header
+            @icon='alert-circle'
+            @title={{t 'resources.auth-method.messages.none.title'}}
+          />
+          <A.Body
+            @text={{t 'resources.auth-method.messages.none.description'}}
+          />
+        </Hds::ApplicationState>
       </Rose::Layout::Centered>
     {{/unless}}
     <p class='change-origin'>
diff --git a/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs b/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs
index e7be45d82..4e61d82f5 100644
--- a/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs
+++ b/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs
@@ -5,14 +5,12 @@
 
 {{#unless @model}}
   <Rose::Layout::Centered>
-    <Rose::Message
-      @title={{t 'resources.auth-method.messages.none.title'}}
-      @icon='flight-icons/svg/alert-circle-16'
-      as |message|
-    >
-      <message.description>
-        {{t 'resources.auth-method.messages.none.description'}}
-      </message.description>
-    </Rose::Message>
+    <Hds::ApplicationState as |A|>
+      <A.Header
+        @icon='alert-circle'
+        @title={{t 'resources.auth-method.messages.none.title'}}
+      />
+      <A.Body @text={{t 'resources.auth-method.messages.none.description'}} />
+    </Hds::ApplicationState>
   </Rose::Layout::Centered>
 {{/unless}}
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/projects/error.hbs b/ui/desktop/app/templates/scopes/scope/projects/error.hbs
index 169983495..623b4f201 100644
--- a/ui/desktop/app/templates/scopes/scope/projects/error.hbs
+++ b/ui/desktop/app/templates/scopes/scope/projects/error.hbs
@@ -9,7 +9,10 @@
 {{#if @model.errors}}
   <Rose::Layout::Centered>
     {{#each @model.errors as |error|}}
-      <Error::Message @status={{error.status}} />
+      <Error::Message
+        @status={{error.status}}
+        @docLink={{doc-url 'support-page'}}
+      />
     {{/each}}
   </Rose::Layout::Centered>
 {{/if}}
@@ -17,7 +20,7 @@
 {{! But a disconnected state doesn't get normalized errors }}
 {{#unless @model.errors}}
   <Rose::Layout::Centered>
-    <Error::Message />
+    <Error::Message @docLink={{doc-url 'support-page'}} />
   </Rose::Layout::Centered>
 
   <Rose::Layout::Centered>
diff --git a/ui/desktop/config/environment.js b/ui/desktop/config/environment.js
index 801c944cf..7a4641079 100644
--- a/ui/desktop/config/environment.js
+++ b/ui/desktop/config/environment.js
@@ -53,6 +53,7 @@ module.exports = function (environment) {
           '/tutorials/oss-getting-started/oss-getting-started-desktop-app#connect',
         sessions:
           '/tutorials/oss-getting-started/oss-getting-started-desktop-app#connect',
+        'support-page': 'https://support.hashicorp.com/hc/en-us',
       },
     },
 
diff --git a/ui/desktop/electron-app/src/index.js b/ui/desktop/electron-app/src/index.js
index 131c672f5..e5118aa7a 100644
--- a/ui/desktop/electron-app/src/index.js
+++ b/ui/desktop/electron-app/src/index.js
@@ -163,7 +163,8 @@ const createWindow = (partition, closeWindowCB) => {
     if (
       isLocalhost(url) ||
       url.startsWith('https://developer.hashicorp.com/') ||
-      url.startsWith('https://releases.hashicorp.com/boundary-desktop/')
+      url.startsWith('https://releases.hashicorp.com/boundary-desktop/') ||
+      url.startsWith('https://support.hashicorp.com/hc/en-us')
     ) {
       shell.openExternal(url);
     }