diff --git a/src/@fuse/scss/partials/_typography.scss b/src/@fuse/scss/partials/_typography.scss
index 8483c3df..d3251b11 100644
--- a/src/@fuse/scss/partials/_typography.scss
+++ b/src/@fuse/scss/partials/_typography.scss
@@ -368,7 +368,7 @@ strong {
     border-left: 6px solid #37474F;
     color: rgba(255, 255, 255, 1);
 
-    &.alert {
+    &.error {
         background: #EF5350;
         border-left-color: #B71C1C;
     }
diff --git a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html
index 9cb0af06..e3a27221 100644
--- a/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html
+++ b/src/app/main/ui/typography/tabs/message-boxes/message-boxes.component.html
@@ -26,7 +26,7 @@
         <div fxLayout="column" fxLayout.gt-md="row">
 
             <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
-                <div class="message-box alert">
+                <div class="message-box error">
                     This is an alert message box!
                 </div>
             </div>
@@ -34,7 +34,7 @@
             <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                             fxFlex="50">
                 <textarea #source hidden="hidden">
-                    <div class="message-box alert">
+                    <div class="message-box error">
                         This is an alert message box!
                     </div>
                 </textarea>