diff --git a/claro.info.yml b/claro.info.yml
index 3d455d8..1c9ae47 100644
--- a/claro.info.yml
+++ b/claro.info.yml
@@ -80,7 +80,7 @@ libraries-override:
   classy/messages:
     css:
       component:
-        css/components/messages.css: css/dist/components/message.css
+        css/components/messages.css: false
 
   classy/progress:
     css:
@@ -123,6 +123,8 @@ libraries-extend:
     - claro/details-focus
   core/drupal.dropbutton:
     - claro/drupal-theme
+  core/drupal.message:
+    - claro/messages
   core/drupal.vertical-tabs:
     - claro/vertical-tabs
   core/drupal.tableselect:
diff --git a/claro.libraries.yml b/claro.libraries.yml
index e647b1e..7cd4a4d 100644
--- a/claro.libraries.yml
+++ b/claro.libraries.yml
@@ -15,7 +15,7 @@ global-styling:
       css/dist/components/button.css: {}
       css/dist/components/details.css: {}
       css/dist/components/divider.css: {}
-      css/dist/components/message.css: {}
+      css/dist/components/messages.css: {}
       css/dist/components/entity-meta.css: {}
       css/dist/components/fieldset.css: {}
       css/dist/components/form.css: {}
@@ -222,3 +222,7 @@ views:
   css:
     component:
       css/dist/components/views-exposed-form.css: {}
+
+messages:
+  js:
+    js/messages.js: {}
diff --git a/claro.theme b/claro.theme
index b0ea4d0..0dd8d8b 100644
--- a/claro.theme
+++ b/claro.theme
@@ -852,3 +852,13 @@ function claro_preprocess_views_mini_pager(&$variables) {
   // @todo Revisit after https://www.drupal.org/node/3059232 is fixed.
   $variables['heading_id'] = Html::getUniqueId('pagination-heading');
 }
+
+/**
+ * Implements hook_preprocess_HOOK() for status_messages.
+ */
+function claro_preprocess_status_messages(&$variables) {
+  $variables['title_ids'] = [];
+  foreach ($variables['message_list'] as $message_type => $messages) {
+    $variables['title_ids'][$message_type] = Html::getUniqueId("message-$message_type-title");
+  }
+}
diff --git a/css/src/components/messages.css b/css/src/components/messages.css
index 2044fd4..4a64e41 100644
--- a/css/src/components/messages.css
+++ b/css/src/components/messages.css
@@ -3,135 +3,111 @@
  */
 
 :root {
-  --message-padding: 1.5rem 1.5rem 2rem calc(1.5rem - 5px);
-  --message-bg-color: #353641;
-  --message-fg-color: var(--color-white);
-  --message-border-radius: 2px;
-  --message-border-width: 5px;
-  --message--status-color: #42a877;
-  --message--warning-color: #e0ac00;
-  --message--error-color: #e34f4f;
-  --message__link-color: var(--color-sunglow);
-  --message__link--hover-color: var(--color-white);
-  --message__icon-size: 16px;
-  --message__icon-margin: 24px;
-  --message__content-margin: calc(var(--message__icon-size) + var(--message__icon-margin));
-}
-
-.message {
+  --messages-padding: 1.5rem 1.5rem 2rem calc(1.5rem - 5px);
+  --messages-bg-color: #353641;
+  --messages-fg-color: var(--color-white);
+  --messages-border-radius: 2px;
+  --messages-border-width: 5px;
+  --messages--status-color: #42a877;
+  --messages--warning-color: #e0ac00;
+  --messages--error-color: #e34f4f;
+  --messages__link-color: var(--color-sunglow);
+  --messages__link--hover-color: var(--color-white);
+  --messages__icon-size: 1rem;
+  --messages__text-margin: calc(var(--messages__icon-size) + var(--space-l));
+}
+
+.messages {
   box-sizing: border-box;
-  background-color: var(--message-bg-color);
-  border-width: 0 0 0 var(--message-border-width);
+  background-color: var(--messages-bg-color);
+  border-width: 0 0 0 var(--messages-border-width);
   border-style: solid;
-  border-color: var(--message-bg-color);
-  color: var(--message-fg-color);
-  border-radius: var(--message-border-radius);
-  padding: var(--message-padding);
-}
-
-[dir="rtl"] .message {
-  border-width: 0 var(--message-border-width) 0 0;
-  padding: var(--space-l) calc(var(--space-l) - var(--message-border-width)) var(--space-l) var(--space-l);
-}
-
-.message--error {
-  border-color: var(--message--error-color);
+  border-color: var(--messages-bg-color);
+  color: var(--messages-fg-color);
+  border-radius: var(--messages-border-radius);
+  padding: var(--messages-padding);
+  margin-bottom: var(--space-m);
 }
 
-.message--status {
-  border-color: var(--message--status-color);
+[dir="rtl"] .messages {
+  border-width: 0 var(--messages-border-width) 0 0;
+  padding: var(--space-l) calc(var(--space-l) - var(--messages-border-width)) var(--space-l) var(--space-l);
 }
 
-.message--warning {
-  border-color: var(--message--warning-color);
+.messages--error {
+  border-color: var(--messages--error-color);
 }
 
-.message__icon {
-  width: var(--message__icon-size);
-  height: var(--message__icon-size);
-  margin-right: var(--message__icon-margin);
-  line-height: 1;
+.messages--status {
+  border-color: var(--messages--status-color);
 }
 
-[dir="rtl"] .message__icon {
-  margin-right: 0;
-  margin-left: var(--message__icon-margin);
+.messages--warning {
+  border-color: var(--messages--warning-color);
 }
 
-.message__icon svg {
-  fill: var(--message-fg-color);
+.messages__title {
+  margin: 0 0 0 var(--messages__text-margin);
+  font-size: var(--font-size-base);
 }
 
-.message--error .message__icon svg {
-  fill: var(--message--error-color);
+.messages--error .messages__header {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 14 14'%3E%3Cpath d='M3 11.1931L11.4501 2.99995' stroke='%23e34f4f' stroke-width='2'/%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='%23e34f4f' stroke-width='2'/%3E%3C/svg%3E%0A") no-repeat left center;
 }
 
-.message--status .message__icon svg {
-  fill: var(--message--status-color);
+.messages--status .messages__header  {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 13'%3E%3Cpath d='M2 6.57143L5.6 10L14 2' fill='none' stroke='%2342a877' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat left center;
 }
 
-.message--warning .message__icon svg {
-  fill: var(--message--warning-color);
+.messages--warning .messages__header {
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 4 14' fill='%23e0ac00'%3E%3Crect x='0.5' width='3' height='9'/%3E%3Ccircle cx='2' cy='12.5' r='1.5'/%3E%3C/svg%3E%0A") no-repeat left center;
 }
 
-.message__header {
+.messages__header {
   display: flex;
   align-items: center;
   margin-bottom: var(--space-m);
 }
 
 @media screen and (min-width: 48rem) {
-  .message__content {
-    margin-left: var(--message__content-margin);
+  .messages__content {
+    margin-left: var(--messages__text-margin);
   }
 
-  [dir="rtl"] .message__content {
+  [dir="rtl"] .messages__content {
     margin-left: 0;
-    margin-right: var(--message__content-margin);
+    margin-right: var(--messages__text-margin);
   }
 }
 
-.message__title {
-  margin: 0;
-  font-size: var(--font-size-base);
-}
-
-/* Adding 32px bottom padding only when message with header. */
-.message__header + .message__content {
+/* Adding 32px bottom padding only when messages with header. */
+.messages__header + .messages__content {
   margin-bottom: var(--space-xs);
 }
 
-.message__content a {
-  color: var(--message__link-color);
+.messages a {
+  color: var(--messages__link-color);
   text-decoration: underline;
 }
 
-.message__content a:hover {
-  color: var(--message__link--hover-color);
+.messages a:hover {
+  color: var(--messages__link--hover-color);
 }
 
-.message pre {
+.messages pre {
   margin: 0;
 }
 
-/* Message List is a small BEM component to avoid .message component external geometry */
-
-.message-list__item + .message-list__item {
-  margin-top: var(--space-m);
-}
-
-@media screen and (min-width: 48rem) {
-  .message-list__item + .message-list__item {
-    margin-top: var(--space-l);
-  }
-}
-
-.message__list {
+.messages__list {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.message__item + .message__item {
+.messages__item + .messages__item {
   margin-top: var(--space-s);
 }
+
+.messages-list {
+  padding-bottom: var(--space-l);
+}
diff --git a/images/src/message--error.svg b/images/src/message--error.svg
index f8a2ba3..359c423 100644
--- a/images/src/message--error.svg
+++ b/images/src/message--error.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 14 14">
-  <path d="M3 11.1931L11.4501 2.99995" stroke="#D72222" stroke-width="2"/>
-  <circle cx="7" cy="7" r="6" fill="none" stroke="#D72222" stroke-width="2"/>
+  <path d="M3 11.1931L11.4501 2.99995" stroke="#e34f4f" stroke-width="2"/>
+  <circle cx="7" cy="7" r="6" fill="none" stroke="#e34f4f" stroke-width="2"/>
 </svg>
diff --git a/images/src/message--status.svg b/images/src/message--status.svg
index 0755f32..3789417 100644
--- a/images/src/message--status.svg
+++ b/images/src/message--status.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 13">
-  <path d="M2 6.57143L5.6 10L14 2" fill="none" stroke="#26A769" stroke-width="3"/>
+  <path d="M2 6.57143L5.6 10L14 2" fill="none" stroke="#42a877" stroke-width="3"/>
 </svg>
diff --git a/images/src/message--warning.svg b/images/src/message--warning.svg
index 1e97b76..44feca1 100644
--- a/images/src/message--warning.svg
+++ b/images/src/message--warning.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4 14" fill="#ffd23f">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4 14" fill="#e0ac00">
   <rect x="0.5" width="3" height="9"/>
   <circle cx="2" cy="12.5" r="1.5"/>
 </svg>
diff --git a/js/messages.es6.js b/js/messages.es6.js
index e69de29..43da959 100644
--- a/js/messages.es6.js
+++ b/js/messages.es6.js
@@ -0,0 +1,31 @@
+/**
+ * @file
+ * Message template overrides.
+ */
+
+Drupal.theme.message = ({ text }, { type, id }) => {
+  const messagesTypes = Drupal.Message.getMessageTypeLabels();
+  const messageWrapper = document.createElement('div');
+
+  messageWrapper.setAttribute('class', `messages messages--${type}`);
+  messageWrapper.setAttribute(
+    'role',
+    type === 'error' || type === 'warning' ? 'alert' : 'status',
+  );
+  messageWrapper.setAttribute('aria-labelledby', `${id}-title`);
+  messageWrapper.setAttribute('data-drupal-message-id', id);
+  messageWrapper.setAttribute('data-drupal-message-type', type);
+
+  messageWrapper.innerHTML = `
+    <div class="messages__header">
+      <h2 id="${id}-title" class="messages__title">
+        ${messagesTypes[type]}
+      </h2>
+    </div>
+    <div class="messages__content">
+      ${text}
+    </div>
+  `;
+
+  return messageWrapper;
+};
diff --git a/templates/misc/status-messages.html.twig b/templates/misc/status-messages.html.twig
index 136d978..91207a5 100644
--- a/templates/misc/status-messages.html.twig
+++ b/templates/misc/status-messages.html.twig
@@ -17,15 +17,18 @@
  * - status_headings: List of all status types.
  * - attributes: HTML attributes for the element, including:
  *   - class: HTML classes.
+ * - title_ids: A list of unique ids keyed by message type.
+ *
+ * @see claro_preprocess_status_messages().
  */
 #}
-<div data-drupal-messages class="message-list">
+<div data-drupal-messages class="messages-list">
 {% for type, messages in message_list %}
   {%
     set classes = [
-      'message-list__item',
-      'message',
-      'message--' ~ type,
+      'messages-list__item',
+      'messages',
+      'messages--' ~ type,
     ]
   %}
   {%
@@ -35,27 +38,24 @@
     set is_message_with_icon = type in ['error', 'status', 'warning']
   %}
 
-  <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
+  <div role="contentinfo" aria-labelledby="{{ title_ids[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
     {% if type == 'error' %}
       <div role="alert">
     {% endif %}
       {% if is_message_with_title or is_message_with_icon %}
-        <div class="message__header">
-          <div class="message__icon">
-            {% if is_message_with_icon %}
-              {% include '@claro/../images/src/message--' ~ type ~ '.svg' %}
-            {% endif %}
-          </div>
+        <div class="messages__header">
           {% if is_message_with_title %}
-            <h2 class="message__title">{{ status_headings[type] }}</h2>
+            <h2 id="{{ title_ids[type] }}" class="messages__title">
+              {{ status_headings[type] }}
+            </h2>
           {% endif %}
         </div>
       {% endif %}
-      <div class="message__content">
+      <div class="messages__content">
         {% if messages|length > 1 %}
-          <ul class="message__list">
+          <ul class="messages__list">
             {% for message in messages %}
-              <li class="message__item">{{ message }}</li>
+              <li class="messages__item">{{ message }}</li>
             {% endfor %}
           </ul>
         {% else %}