diff --git a/src/app/settings/change-email.component.html b/src/app/settings/change-email.component.html
index b94521b1db1..3b3501b24ee 100644
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -15,8 +15,8 @@
     <ng-container *ngIf="tokenSent">
         <hr>
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
-        <div class="alert alert-warning" role="alert">
-            <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+        <div class="callout callout-warning" role="alert">
+            <h3 class="callout-heading">{{'warning' | i18n}}</h3>
             <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
         </div>
         <div class="row">
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index e1dd77c0934..0e2c752d170 100644
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -1,5 +1,5 @@
-<div class="alert alert-warning" role="alert">
-    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+<div class="callout callout-warning" role="alert">
+    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
     <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
 </div>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
diff --git a/src/app/settings/deauthorize-sessions.component.html b/src/app/settings/deauthorize-sessions.component.html
index f088020bb2c..0b167a2efcc 100644
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="modal-body">
                 <p>{{'deauthorizeSessionsDesc' | i18n}}</p>
-                <div class="alert alert-warning" role="alert">
-                    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+                <div class="callout callout-warning" role="alert">
+                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
                     <p class="mb-0">{{'deauthorizeSessionsWarning' | i18n}}</p>
                 </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/settings/delete-account.component.html b/src/app/settings/delete-account.component.html
index e8723742e10..11d68c7a4b2 100644
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="modal-body">
                 <p>{{'deleteAccountDesc' | i18n}}</p>
-                <div class="alert alert-warning" role="alert">
-                    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+                <div class="callout callout-warning" role="alert">
+                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
                     <p class="mb-0">{{'deleteAccountWarning' | i18n}}</p>
                 </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/settings/purge-vault.component.html b/src/app/settings/purge-vault.component.html
index 458ec337837..d1b7e4b087d 100644
--- a/src/app/settings/purge-vault.component.html
+++ b/src/app/settings/purge-vault.component.html
@@ -9,8 +9,8 @@
             </div>
             <div class="modal-body">
                 <p>{{'purgeVaultDesc' | i18n}}</p>
-                <div class="alert alert-warning" role="alert">
-                    <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+                <div class="callout callout-warning" role="alert">
+                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
                     <p class="mb-0">{{'purgeVaultWarning' | i18n}}</p>
                 </div>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index b05ba791d6a..613f13fd5d8 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -3,8 +3,8 @@
         <h1>{{'exportVault' | i18n}}</h1>
     </div>
     <p>{{'exportMasterPassword' | i18n}}</p>
-    <div class="alert alert-warning" role="alert">
-        <h4 class="alert-heading">{{'warning' | i18n}}</h4>
+    <div class="callout callout-warning" role="alert">
+        <h3 class="callout-heading">{{'warning' | i18n}}</h3>
         <p class="mb-0">{{'exportWarning' | i18n}}</p>
     </div>
     <div class="row">
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index 06af2d4ac8a..be7df2415c1 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -14,8 +14,8 @@
             </div>
         </div>
     </div>
-    <div class="alert alert-info" role="alert" *ngIf="format">
-        <h4 class="alert-heading">{{'instructionsFor' | i18n : getFormatName()}}</h4>
+    <div class="callout callout-info" role="alert" *ngIf="format">
+        <h3 class="callout-heading">{{'instructionsFor' | i18n : getFormatName()}}</h3>
         <p class="mb-0">
             <ng-container *ngIf="format === 'bitwardencsv'">
                 See detailed instructions on our help site at
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index cbc84e0ce60..e5e95250b5a 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -433,3 +433,61 @@ app-avatar {
         }
     }
 }
+
+.callout {
+    padding: $alert-padding-y $alert-padding-x;
+    margin-bottom: $alert-margin-bottom;
+    border: 1px solid $card-border-color;
+    border-left-width: 5px;
+    border-radius: $card-inner-border-radius;
+    background-color: $card-bg;
+
+    .callout-heading {
+        margin-top: 0;
+    }
+
+    h3.callout-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    &.callout-primary {
+        border-left-color: $primary;
+
+        .callout-heading {
+            color: $primary;
+        }
+    }
+
+    &.callout-info {
+        border-left-color: $gray-800;
+
+        .callout-heading {
+            color: $gray-800;
+        }
+    }
+
+    &.callout-danger {
+        border-left-color: $danger;
+
+        .callout-heading {
+            color: $danger;
+        }
+    }
+
+    &.callout-success {
+        border-left-color: $success;
+
+        .callout-heading {
+            color: $success;
+        }
+    }
+
+    &.callout-warning {
+        border-left-color: $warning;
+
+        .callout-heading {
+            color: $warning;
+        }
+    }
+}