diff --git a/administrator/templates/atum/scss/_variables.scss b/administrator/templates/atum/scss/_variables.scss
index 4f6c7e1bb0b96..bb0aeb91dd580 100644
--- a/administrator/templates/atum/scss/_variables.scss
+++ b/administrator/templates/atum/scss/_variables.scss
@@ -165,8 +165,8 @@ $card-border-color:                transparent;
 
 // Alerts
 $state-success-text:               var(--alert-success);
-$state-success-bg:                 lighten($green-dark, 70%);
-$state-success-border:             lighten($green-dark, 30%);
+$state-success-bg:                 lighten($green-dark, 80%);
+$state-success-border:             $green-dark;
 
 $state-info-text:                  var(--white);
 $state-info-bg:                    var(--atum-bg-dark);
diff --git a/administrator/templates/atum/scss/blocks/_alerts.scss b/administrator/templates/atum/scss/blocks/_alerts.scss
index 0c2b33ead0fe8..e1c93378be175 100644
--- a/administrator/templates/atum/scss/blocks/_alerts.scss
+++ b/administrator/templates/atum/scss/blocks/_alerts.scss
@@ -38,7 +38,7 @@ fieldset .alert {
 }
 
 .alert-heading {
-  font-size: $font-size-lg;
+  font-size: $h4-font-size;
 }
 
 @keyframes fadeIn {
@@ -52,3 +52,4 @@ fieldset .alert {
     transform: translateY(0);
   }
 }
+
diff --git a/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
new file mode 100644
index 0000000000000..525d53e24781a
--- /dev/null
+++ b/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
@@ -0,0 +1,86 @@
+@import "../../variables";
+@import "../../../../../../node_modules/joomla-ui-custom-elements/dist/css/joomla-alert";
+
+// The following is a restyle for the system alerts
+
+#system-message-container joomla-alert {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 16rem;
+  padding: 0;
+  margin-bottom: 1rem;
+  color: var(--atum-text-dark);
+  background-color: var(--white);
+  border: 1px solid var(--alert-accent-color, transparent);
+  border-radius: .25rem;
+  transition: opacity .15s linear;
+
+  .alert-heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    padding: .8rem;
+    color: rgba(255, 255, 255, .95);
+    background: var(--alert-accent-color, transparent);
+  }
+
+  .alert-link {
+    color: var(--success, inherit);
+  }
+
+  &[type="success"] {
+    --alert-accent-color: var(--success);
+  }
+
+  &[type="info"] {
+    --alert-accent-color: var(--info);
+  }
+
+  &[type="warning"] {
+    --alert-accent-color: var(--warning);
+  }
+
+  &[type="danger"] {
+    --alert-accent-color: var(--danger);
+  }
+
+  .joomla-alert--close,
+  .joomla-alert-button--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .2rem .8rem;
+    font-size: 2rem;
+    color: var(--alert-accent-color);
+    background: none;
+    border: 0;
+    opacity: 1;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+      opacity: .75;
+    }
+
+    [dir=rtl] & {
+      right: auto;
+      left: 0;
+      padding: .2rem .6rem;
+    }
+  }
+
+  div {
+    font-size: 1rem;
+    .alert-message {
+      padding: .3rem 2rem .3rem .3rem;
+      margin: .5rem;
+
+      [dir=rtl] & {
+        padding: .3rem .3rem .3rem 2rem;
+      }
+    }
+  }
+}
diff --git a/build/build-modules-js/compilecss.es6.js b/build/build-modules-js/compilecss.es6.js
index 2c15e022ef003..cd19459fb65b3 100644
--- a/build/build-modules-js/compilecss.es6.js
+++ b/build/build-modules-js/compilecss.es6.js
@@ -46,12 +46,14 @@ module.exports.compile = (options, path) => {
           `${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
           `${RootPath}/templates/cassiopeia/scss/system/searchtools/searchtools.scss`,
           `${RootPath}/templates/cassiopeia/scss/vendor/choicesjs/choices.scss`,
+          `${RootPath}/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss`,
           `${RootPath}/administrator/templates/atum/scss/template.scss`,
           `${RootPath}/administrator/templates/atum/scss/template-rtl.scss`,
           `${RootPath}/administrator/templates/atum/scss/system/searchtools/searchtools.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/awesomplete/awesomplete.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/choicesjs/choices.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/minicolors/minicolors.scss`,
+          `${RootPath}/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss`,
           `${RootPath}/installation/template/scss/template.scss`,
diff --git a/build/media_source/system/js/core.es6/message.es6 b/build/media_source/system/js/core.es6/message.es6
index f0144da99a606..981cd42a59c06 100644
--- a/build/media_source/system/js/core.es6/message.es6
+++ b/build/media_source/system/js/core.es6/message.es6
@@ -75,7 +75,7 @@
 
       // Skip titles with untranslated strings
       if (typeof title !== 'undefined') {
-        titleWrapper = document.createElement('span');
+        titleWrapper = document.createElement('div');
         titleWrapper.className = 'alert-heading';
         titleWrapper.innerHTML = Joomla.Text._(type) ? Joomla.Text._(type) : type;
         messagesBox.appendChild(titleWrapper);
@@ -84,7 +84,7 @@
       // Add messages to the message box
       typeMessages.forEach((typeMessage) => {
         messageWrapper = document.createElement('div');
-        messageWrapper.innerHTML = typeMessage;
+        messageWrapper.innerHTML = `<div class="alert-message">${typeMessage}</div>`;
         messagesBox.appendChild(messageWrapper);
       });
 
diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
index 20acf4c9038c3..1f6e5633c7613 100644
--- a/installation/template/scss/template.scss
+++ b/installation/template/scss/template.scss
@@ -15,6 +15,7 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
 @import "../../../administrator/templates/atum/scss/blocks/global";
 @import "../../../administrator/templates/atum/scss/blocks/header";
 @import "../../../administrator/templates/atum/scss/vendor/bootstrap/custom-forms";
+@import "../../../administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert";
 
 // Safari fix
 @import "../../../administrator/templates/atum/scss/vendor/bootstrap/reboot";
@@ -39,7 +40,6 @@ body {
   }
 }
 
-
 .j-container {
   width: 100%;
   max-width: 40rem;
@@ -95,7 +95,6 @@ body {
   }
 }
 
-
 .languageForm {
   padding: 0 0 30px;
 
@@ -104,41 +103,13 @@ body {
   }
 }
 
-.system-message .alert {
-  margin: 25px 50px;
-}
-
-.alert {
-  position: relative;
-  display: flex;
-  margin: 0 0 20px;
-  background: #fafafa;
-  border: 1px solid rgba(0, 0, 0, .1);
-  box-shadow: 0 0 10px rgba(0, 0, 0, .05);
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.alert-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 25%;
-  margin-bottom: 0;
-  font-size: 3rem;
-  opacity: .6;
-
-  .fas {
-    width: 100%;
-    text-align: center;
-  }
+// Alerts
+#system-message-container joomla-alert {
+  margin-top: 25px;
 }
 
-.alert-text {
-  width: 75%;
-  padding: 10px 20px;
+.alert-heading {
+  font-size: $h4-font-size;
 }
 
 .hidden,
diff --git a/layouts/joomla/system/message.php b/layouts/joomla/system/message.php
index d102f98422ccf..a319f23564460 100644
--- a/layouts/joomla/system/message.php
+++ b/layouts/joomla/system/message.php
@@ -48,7 +48,7 @@
 						<div class="alert-heading"><?php echo Text::_($type); ?></div>
 						<div>
 							<?php foreach ($msgs as $msg) : ?>
-								<p><?php echo $msg; ?></p>
+								<div class="alert-message"><?php echo $msg; ?></div>
 							<?php endforeach; ?>
 						</div>
 					<?php endif; ?>
diff --git a/plugins/system/stats/layouts/message.php b/plugins/system/stats/layouts/message.php
index 36049eb2265b2..4cb940caf6c31 100644
--- a/plugins/system/stats/layouts/message.php
+++ b/plugins/system/stats/layouts/message.php
@@ -26,18 +26,20 @@
 <joomla-alert type="info" dismiss="true" class="js-pstats-alert hidden" role="alertdialog">
 	<div class="alert-heading"><?php echo Text::_('PLG_SYSTEM_STATS_LABEL_MESSAGE_TITLE'); ?></div>
 	<div>
-		<p>
-			<?php echo Text::_('PLG_SYSTEM_STATS_MSG_JOOMLA_WANTS_TO_SEND_DATA'); ?>
-			<a href="#" class="js-pstats-btn-details alert-link"><?php echo Text::_('PLG_SYSTEM_STATS_MSG_WHAT_DATA_WILL_BE_SENT'); ?></a>
-		</p>
-		<?php
-			echo $plugin->render('stats', compact('statsData'));
-		?>
-		<p><?php echo Text::_('PLG_SYSTEM_STATS_MSG_ALLOW_SENDING_DATA'); ?></p>
-		<p class="actions">
-			<button type="button" class="btn btn-primary js-pstats-btn-allow-always"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_ALWAYS'); ?></button>
-			<button type="button" class="btn btn-primary js-pstats-btn-allow-once"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_NOW'); ?></button>
-			<button type="button" class="btn btn-primary js-pstats-btn-allow-never"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_NEVER_SEND'); ?></button>
-		</p>
+		<div class="alert-message">
+			<p>
+				<?php echo Text::_('PLG_SYSTEM_STATS_MSG_JOOMLA_WANTS_TO_SEND_DATA'); ?>
+				<a href="#" class="js-pstats-btn-details alert-link"><?php echo Text::_('PLG_SYSTEM_STATS_MSG_WHAT_DATA_WILL_BE_SENT'); ?></a>
+			</p>
+			<?php
+				echo $plugin->render('stats', compact('statsData'));
+			?>
+			<p><?php echo Text::_('PLG_SYSTEM_STATS_MSG_ALLOW_SENDING_DATA'); ?></p>
+			<p class="actions">
+				<button type="button" class="btn btn-primary js-pstats-btn-allow-always"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_ALWAYS'); ?></button>
+				<button type="button" class="btn btn-primary js-pstats-btn-allow-once"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_NOW'); ?></button>
+				<button type="button" class="btn btn-primary js-pstats-btn-allow-never"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_NEVER_SEND'); ?></button>
+			</p>
+		</div>
 	</div>
 </joomla-alert>
diff --git a/templates/cassiopeia/scss/blocks/_alerts.scss b/templates/cassiopeia/scss/blocks/_alerts.scss
index 7f80233cf3aee..01e1e3159a53d 100644
--- a/templates/cassiopeia/scss/blocks/_alerts.scss
+++ b/templates/cassiopeia/scss/blocks/_alerts.scss
@@ -8,6 +8,10 @@
 
 }
 
+.alert-heading {
+  font-size: $h4-font-size;
+}
+
 @keyframes fadeIn {
 
   from {
diff --git a/templates/cassiopeia/scss/template.scss b/templates/cassiopeia/scss/template.scss
index 79425c2089ded..310f22d274560 100644
--- a/templates/cassiopeia/scss/template.scss
+++ b/templates/cassiopeia/scss/template.scss
@@ -20,9 +20,6 @@
 // B/C for Icomoon
 @import "../../../build/media_source/system/scss/icomoon";
 
-// Alert
-@import "../../../build/media_source/system/scss/jalert";
-
 // jQuery Minicolors
 @import "../../../build/media_source/system/scss/jquery-minicolors";
 
diff --git a/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss b/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss
new file mode 100644
index 0000000000000..1810f32b56ccc
--- /dev/null
+++ b/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss
@@ -0,0 +1,86 @@
+@import "../../variables";
+@import "../../../../../node_modules/joomla-ui-custom-elements/dist/css/joomla-alert";
+
+// The following is a restyle for the system alerts
+
+#system-message-container joomla-alert {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 16rem;
+  padding: 0;
+  margin-bottom: 1rem;
+  color: var(--atum-text-dark);
+  background-color: var(--white);
+  border: 1px solid var(--alert-accent-color, transparent);
+  border-radius: .25rem;
+  transition: opacity .15s linear;
+
+  .alert-heading {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    padding: .8rem;
+    color: rgba(255, 255, 255, .95);
+    background: var(--alert-accent-color, transparent);
+  }
+
+  .alert-link {
+    color: var(--success, inherit);
+  }
+
+  &[type="success"] {
+    --alert-accent-color: var(--success);
+  }
+
+  &[type="info"] {
+    --alert-accent-color: var(--info);
+  }
+
+  &[type="warning"] {
+    --alert-accent-color: var(--warning);
+  }
+
+  &[type="danger"] {
+    --alert-accent-color: var(--danger);
+  }
+
+  .joomla-alert--close,
+  .joomla-alert-button--close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .2rem .8rem;
+    font-size: 2rem;
+    color: var(--alert-accent-color);
+    background: none;
+    border: 0;
+    opacity: 1;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+      opacity: .75;
+    }
+
+    [dir=rtl] & {
+      right: auto;
+      left: 0;
+      padding: .2rem .6rem;
+    }
+  }
+
+  div {
+    font-size: 1rem;
+    .alert-message {
+      padding: .3rem 2rem .3rem .3rem;
+      margin: .5rem;
+
+      [dir=rtl] & {
+        padding: .3rem .3rem .3rem 2rem;
+      }
+    }
+  }
+}