diff --git a/ui/packages/consul-ui/app/components/auth-form/index.hbs b/ui/packages/consul-ui/app/components/auth-form/index.hbs
index e83e3f05ce..9b47405fd8 100644
--- a/ui/packages/consul-ui/app/components/auth-form/index.hbs
+++ b/ui/packages/consul-ui/app/components/auth-form/index.hbs
@@ -9,31 +9,38 @@
   <div class="auth-form" ...attributes>
     <State @matches="error">
       {{#if error.status}}
-        <p role="alert" class="notice error">
-          {{#if value.Name}}
-            {{#if (eq error.status '403')}}
-              <strong>Consul login failed</strong><br />
-              We received a token from your OIDC provider but could not log in to Consul with it.
-            {{else if (eq error.status '401')}}
-              <strong>Could not log in to provider</strong><br />
-              The OIDC provider has rejected this access token. Please have an administrator check your auth method configuration.
-            {{else if (eq error.status '499')}}
-              <strong>SSO log in window closed</strong><br />
-              The OIDC provider window was closed. Please try again.
-            {{else}}
-              <strong>Error</strong><br />
-              {{error.detail}}
-            {{/if}}
-          {{else}}
-            {{#if (eq error.status '403')}}
-              <strong>Invalid token</strong><br />
-              The token entered does not exist. Please enter a valid token to log in.
-            {{else}}
-              <strong>Error</strong><br />
-              {{error.detail}}
-            {{/if}}
-          {{/if}}
-        </p>
+        <Notice
+          @type="error"
+          role="alert"
+        as |notice|>
+          <notice.Body>
+            <p>
+              {{#if value.Name}}
+                {{#if (eq error.status '403')}}
+                  <strong>Consul login failed</strong><br />
+                  We received a token from your OIDC provider but could not log in to Consul with it.
+                {{else if (eq error.status '401')}}
+                  <strong>Could not log in to provider</strong><br />
+                  The OIDC provider has rejected this access token. Please have an administrator check your auth method configuration.
+                {{else if (eq error.status '499')}}
+                  <strong>SSO log in window closed</strong><br />
+                  The OIDC provider window was closed. Please try again.
+                {{else}}
+                  <strong>Error</strong><br />
+                  {{error.detail}}
+                {{/if}}
+              {{else}}
+                {{#if (eq error.status '403')}}
+                  <strong>Invalid token</strong><br />
+                  The token entered does not exist. Please enter a valid token to log in.
+                {{else}}
+                  <strong>Error</strong><br />
+                  {{error.detail}}
+                {{/if}}
+              {{/if}}
+            </p>
+          </notice.Body>
+        </Notice>
       {{/if}}
     </State>
     <form onsubmit={{action dispatch "SUBMIT"}}>
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs
index 1adf4ba9c8..96e89dc75c 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/index.hbs
@@ -153,14 +153,7 @@
     </button>
     <h2>Permissions</h2>
 {{#if (gt item.Permissions.length 0) }}
-    <div class="notice info">
-      <p>
-        Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
-      </p>
-      <p>
-        <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>
-      </p>
-    </div>
+    <Consul::Intention::Notice::Permissions />
     <Consul::Intention::Permission::List
       @items={{item.Permissions}}
       @onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}}
diff --git a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
index e6907a9c78..e8e4fbd708 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/form/index.hbs
@@ -111,10 +111,12 @@ as |api|>
           <p>
             This Intention is view only because it is managed through an Intention Custom Resource in your Kubernetes cluster.
           </p>
+        </notice.Body>
+        <notice.Footer>
           <p>
             <a href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds" target="_blank" rel="noopener noreferrer">Learn more about CRDs</a>
           </p>
-        </notice.Body>
+        </notice.Footer>
       </Notice>
     {{/if}}
     <Consul::Intention::View
diff --git a/ui/packages/consul-ui/app/components/consul/intention/notice/custom-resource/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/notice/custom-resource/index.hbs
index a79a57cceb..0b629d4f58 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/notice/custom-resource/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/notice/custom-resource/index.hbs
@@ -12,8 +12,10 @@ as |notice|>
     <p>
       Some of your intentions are being managed through an Intention Custom Resource in your Kubernetes cluster. Those managed intentions will be view only in the UI. Any intentions created in the UI will work but will not be synced to the Custom Resource Definition (CRD) datastore.
     </p>
+  </notice.Body>
+  <notice.Footer>
     <p>
       <a href="{{env 'CONSUL_DOCS_URL'}}/k8s/crds" target="_blank" rel="noopener noreferrer">Learn more about CRDs</a>
     </p>
-  </notice.Body>
+  </notice.Footer>
 </Notice>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs
new file mode 100644
index 0000000000..4aac229f4b
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/intention/notice/permissions/index.hbs
@@ -0,0 +1,15 @@
+<Notice
+  @type="info"
+as |notice|>
+  <notice.Body>
+    <p>
+      Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
+    </p>
+  </notice.Body>
+  <notice.Footer>
+    <p>
+      <a href="{{env 'CONSUL_DOCS_URL'}}/connect/intentions" target="_blank" rel="noopener noreferrer">Learn more about permissions</a>
+    </p>
+  </notice.Footer>
+</Notice>
+
diff --git a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
index bad52c24a3..4e875f45ac 100644
--- a/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/intention/view/index.hbs
@@ -25,15 +25,7 @@
 
 {{#if (gt item.Permissions.length 0) }}
   <h2>Permissions</h2>
-  <div class="notice info">
-    <p>
-      Permissions are L7 attributes. If any of the following permissions match the request, the Intention will apply. Requests that fail to match any of the provided routes will do the opposite of the allow/deny action above.
-    </p>
-    <p>
-      <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">Learn more about permissions</a>
-    </p>
-  </div>
-
+  <Consul::Intention::Notice::Permissions />
   <Consul::Intention::Permission::List
     @items={{item.Permissions}}
   />
diff --git a/ui/packages/consul-ui/app/components/notice/index.hbs b/ui/packages/consul-ui/app/components/notice/index.hbs
index f3ddfaf5d3..905f87f2d4 100644
--- a/ui/packages/consul-ui/app/components/notice/index.hbs
+++ b/ui/packages/consul-ui/app/components/notice/index.hbs
@@ -5,5 +5,6 @@
 {{yield (hash
   Header=(component 'anonymous' tagName="header")
   Body=(component 'anonymous')
+  Footer=(component 'anonymous' tagName="footer")
 )}}
 </div>
diff --git a/ui/packages/consul-ui/app/components/notice/index.scss b/ui/packages/consul-ui/app/components/notice/index.scss
new file mode 100644
index 0000000000..242df9cd5a
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/notice/index.scss
@@ -0,0 +1,32 @@
+@import './skin';
+@import './layout';
+
+%notice {
+  margin: 1em 0;
+}
+/**/
+.notice.success {
+  @extend %notice-success;
+}
+.notice.warning {
+  @extend %notice-warning;
+}
+.notice.error {
+  @extend %notice-error;
+}
+.notice.info {
+  @extend %notice-info;
+}
+.notice.highlight {
+  @extend %notice-highlight;
+}
+.notice.policy-management {
+  @extend %notice-highlight;
+}
+.notice.crd::before {
+  -webkit-mask-image: none;
+  mask-image: none;
+  background-color: transparent;
+  @extend %with-logo-kubernetes-color-icon;
+}
+
diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/layout.scss b/ui/packages/consul-ui/app/components/notice/layout.scss
similarity index 100%
rename from ui/packages/consul-ui/app/styles/base/components/notice/layout.scss
rename to ui/packages/consul-ui/app/components/notice/layout.scss
diff --git a/ui/packages/consul-ui/app/components/notice/skin.scss b/ui/packages/consul-ui/app/components/notice/skin.scss
new file mode 100644
index 0000000000..c3bcf37e0c
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/notice/skin.scss
@@ -0,0 +1,68 @@
+%notice {
+  border-radius: $decor-radius-100;
+  border: $decor-border-100;
+  color: $black;
+}
+%notice::before {
+  @extend %as-pseudo;
+}
+%notice footer * {
+  @extend %p3;
+  font-weight: $typo-weight-bold;
+}
+%notice-success,
+%notice-info,
+%notice-highlight,
+%notice-error,
+%notice-warning {
+  @extend %notice;
+}
+%notice-success {
+  background-color: $green-050;
+  border-color: $green-500;
+}
+%notice-info {
+  border-color: $blue-100;
+  background-color: $gray-010;
+}
+%notice-info header * {
+  color: $blue-700;
+}
+%notice-highlight {
+  background-color: $gray-050;
+  border-color: $gray-300;
+}
+%notice-info header * {
+  color: $gray-700;
+}
+%notice-warning {
+  border-color: $yellow-100;
+  background-color: $yellow-050;
+}
+%notice-warning header * {
+  color: $yellow-800;
+}
+%notice-error {
+  background-color: $red-050;
+  border-color: $red-500;
+}
+%notice-success::before {
+  @extend %with-check-circle-fill-color-mask;
+  color: $green-500;
+}
+%notice-info::before {
+  @extend %with-info-circle-fill-color-mask;
+  color: $blue-500;
+}
+%notice-highlight::before {
+  @extend %with-star-fill-mask;
+  color: $yellow-500;
+}
+%notice-warning::before {
+  @extend %with-alert-triangle-color-mask;
+  color: $orange-500;
+}
+%notice-error::before {
+  @extend %with-cancel-square-fill-color-mask;
+  color: $red-500;
+}
diff --git a/ui/packages/consul-ui/app/styles/base/components/index.scss b/ui/packages/consul-ui/app/styles/base/components/index.scss
index da964526ce..d8ca3d7628 100644
--- a/ui/packages/consul-ui/app/styles/base/components/index.scss
+++ b/ui/packages/consul-ui/app/styles/base/components/index.scss
@@ -8,7 +8,6 @@
 @import './inline-alert/index';
 @import './menu-panel/index';
 @import './modal-dialog/index';
-@import './notice/index';
 @import './pill/index';
 @import './popover-menu/index';
 @import './radio-group/index';
diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/index.scss b/ui/packages/consul-ui/app/styles/base/components/notice/index.scss
deleted file mode 100644
index bc18252196..0000000000
--- a/ui/packages/consul-ui/app/styles/base/components/notice/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';
diff --git a/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss b/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss
deleted file mode 100644
index 049f425565..0000000000
--- a/ui/packages/consul-ui/app/styles/base/components/notice/skin.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-%notice {
-  border-radius: $decor-radius-100;
-  border: 1px solid;
-  color: $black;
-}
-%notice p:last-child a:only-child {
-  @extend %p3;
-  font-weight: $typo-weight-bold;
-}
-%notice-success,
-%notice-info,
-%notice-highlight,
-%notice-error,
-%notice-warning {
-  @extend %notice;
-}
-%notice::before {
-  @extend %as-pseudo;
-}
-%notice-success {
-  @extend %frame-green-500;
-}
-%notice-info {
-  border-color: $blue-100;
-  background-color: $gray-010;
-}
-%notice-info header * {
-  color: $blue-700;
-}
-%notice-highlight {
-  @extend %frame-gray-800;
-}
-%notice-warning {
-  border-color: $yellow-100;
-  background-color: $yellow-050;
-}
-%notice-warning header * {
-  color: $yellow-800;
-}
-%notice-error {
-  @extend %frame-red-500;
-}
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index 254c98bd32..20b97eba6c 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -29,7 +29,6 @@
 @import './components/modal-dialog';
 @import './components/auth-form';
 @import './components/auth-modal';
-@import './components/notice';
 @import './components/oidc-select';
 @import './components/discovery-chain';
 @import './components/empty-state';
@@ -55,11 +54,7 @@
 
 /**/
 
-/**
- * Migration: We are migrating our consul-* styles to use colocated styles
- * consul-* component styles should be moved or added under here
- * when convienient
- **/
+@import 'consul-ui/components/notice';
 
 @import 'consul-ui/components/consul/exposed-path/list';
 @import 'consul-ui/components/consul/external-source';
diff --git a/ui/packages/consul-ui/app/styles/components/notice.scss b/ui/packages/consul-ui/app/styles/components/notice.scss
deleted file mode 100644
index 7241720cc4..0000000000
--- a/ui/packages/consul-ui/app/styles/components/notice.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-%notice {
-  margin: 1em 0;
-}
-%notice-success::before {
-  @extend %with-check-circle-fill-color-icon;
-}
-%notice-info::before {
-  @extend %with-info-circle-fill-color-icon;
-}
-%notice-highlight::before {
-  @extend %with-star-icon;
-}
-%notice-warning::before {
-  @extend %with-alert-triangle-color-icon;
-}
-%notice-error::before {
-  @extend %with-cancel-square-fill-color-icon;
-}
-/**/
-.notice.success {
-  @extend %notice-success;
-}
-.notice.warning {
-  @extend %notice-warning;
-}
-.notice.error {
-  @extend %notice-error;
-}
-.notice.info {
-  @extend %notice-info;
-}
-.notice.policy-management {
-  @extend %notice-highlight;
-}
-.notice.crd::before {
-  @extend %with-logo-kubernetes-color-icon;
-}
diff --git a/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs b/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs
index bbdfe74222..33cc7ffede 100644
--- a/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/acls/policies/-view.hbs
@@ -1,4 +1,16 @@
-<p class="notice policy-management"><strong>Management</strong> This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens. Learn more in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
+<Notice
+  class="policy-management"
+  @type="none"
+as |notice|>
+  <notice.Header>
+    <h3>Management</h3>
+  </notice.Header>
+  <notice.Body>
+    <p>
+      This global-management token is built into Consul's policy system. You can apply this special policy to tokens for full access. This policy is not editable or removeable, but can be ignored by not applying it to any tokens. Learn more in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl.html#builtin-policies" target="_blank" rel="noopener noreferrer">documentation</a>.
+    </p>
+  </notice.Body>
+</Notice>
 <div class="definition-table">
   <dl>
     <dt>Name</dt>
diff --git a/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs b/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs
index 09e5f1a950..c3b89f99be 100644
--- a/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/acls/tokens/edit.hbs
@@ -60,7 +60,18 @@
     </BlockSlot>
     <BlockSlot @name="content">
         {{#if (token/is-legacy item)}}
-            <p class="notice info"><strong>Update.</strong> We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
+          <Notice
+            @type="info"
+          as |notice|>
+            <notice.Header>
+              <h3>Update</h3>
+            </notice.Header>
+            <notice.Body>
+              <p>
+                We have upgraded our ACL system by allowing you to create reusable policies which you can then apply to tokens. Don't worry, even though this token was written in the old style, it is still valid. However, we do recommend upgrading your old tokens to the new style. Learn how in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.
+              </p>
+            </notice.Body>
+          </Notice>
         {{/if}}
 {{#if (not create) }}
       <div class="definition-table">
diff --git a/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs b/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs
index 8a9b6e1626..06c07ebaf6 100644
--- a/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/acls/tokens/index.hbs
@@ -51,7 +51,16 @@
       </BlockSlot>
       <BlockSlot @name="content">
     {{#if (token/is-legacy items)}}
-        <p data-test-notification-update class="notice info"><strong>Update.</strong> We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
+    <Notice
+      @type="info"
+    as |notice|>
+      <notice.Header>
+        <h3>Update</h3>
+      </notice.Header>
+      <notice.Body>
+        <p data-test-notification-update>We have upgraded our ACL System to allow the creation of reusable policies that can be applied to tokens. Read more about the changes and how to upgrade legacy tokens in our <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>.</p>
+      </notice.Body>
+    </Notice>
     {{/if}}
     {{#let (filter (filter-predicate 'token' filters) items) as |filtered|}}
       {{#let (sort-by (comparator 'token' sort) filtered) as |sorted|}}
diff --git a/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs b/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs
index 5311dbc353..59a89c43bc 100644
--- a/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/kv/edit.hbs
@@ -25,9 +25,15 @@
   </BlockSlot>
   <BlockSlot @name="content">
   {{#if session}}
-    <p class="notice warning">
-      <strong>Warning.</strong> This KV has a lock session. You can edit KV's with lock sessions, but we recommend doing so with care, or not doing so at all. It may negatively impact the active node it's associated with. See below for more details on the Lock Session and see <a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html" target="_blank" rel="noopener noreferrer">our documentation</a> for more information.
-    </p>
+    <Notice
+      @type="warning"
+    as |notice|>
+      <notice.Body>
+        <p>
+          <strong>Warning.</strong> This KV has a lock session. You can edit KV's with lock sessions, but we recommend doing so with care, or not doing so at all. It may negatively impact the active node it's associated with. See below for more details on the Lock Session and see <a href="{{env 'CONSUL_DOCS_URL'}}/internals/sessions.html" target="_blank" rel="noopener noreferrer">our documentation</a> for more information.
+        </p>
+      </notice.Body>
+    </Notice>
   {{/if}}
     <Consul::Kv::Form
       @item={{item}}
diff --git a/ui/packages/consul-ui/app/templates/settings.hbs b/ui/packages/consul-ui/app/templates/settings.hbs
index 0bd92ac6c7..daeea977ac 100644
--- a/ui/packages/consul-ui/app/templates/settings.hbs
+++ b/ui/packages/consul-ui/app/templates/settings.hbs
@@ -6,12 +6,18 @@
     </h1>
   </BlockSlot>
   <BlockSlot @name="content">
-    <div class="notice info">
-      <h3>Local Storage</h3>
-      <p>
-        These settings are immediately saved to local storage and persisted through browser usage.
-      </p>
-    </div>
+    <Notice
+      @type="info"
+    as |notice|>
+      <notice.Header>
+        <h3>Local Storage</h3>
+      </notice.Header>
+      <notice.Body>
+        <p>
+          These settings are immediately saved to local storage and persisted through browser usage.
+        </p>
+      </notice.Body>
+    </Notice>
     <form>
     {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
       <fieldset data-test-blocking-queries>