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 e83e3f05c..9b47405fd 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 1adf4ba9c..96e89dc75 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 e6907a9c7..e8e4fbd70 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 a79a57cce..0b629d4f5 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 000000000..4aac229f4
--- /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 bad52c24a..4e875f45a 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 f3ddfaf5d..905f87f2d 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 000000000..242df9cd5
--- /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 000000000..c3bcf37e0
--- /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 da964526c..d8ca3d762 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 bc1825219..000000000
--- 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 049f42556..000000000
--- 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 254c98bd3..20b97eba6 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 7241720cc..000000000
--- 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 bbdfe7422..33cc7ffed 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 09e5f1a95..c3b89f99b 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 8a9b6e162..06c07ebaf 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 5311dbc35..59a89c43b 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 0bd92ac6c..daeea977a 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>