diff --git a/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.html b/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.html
index a689e989856..68f943568c4 100644
--- a/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.html
+++ b/apps/web/src/app/admin-console/organizations/manage/verify-recover-delete-org.component.html
@@ -3,9 +3,9 @@
     <p class="tw-text-xl tw-text-center tw-mb-4">{{ "deleteOrganization" | i18n }}</p>
     <div class="tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background">
       <div class="tw-p-5">
-        <app-callout type="warning">{{
-          "deletingOrganizationIsPermanentWarning" | i18n: name
-        }}</app-callout>
+        <bit-callout type="warning">
+          {{ "deletingOrganizationIsPermanentWarning" | i18n: name }}
+        </bit-callout>
         <p class="tw-text-center">
           <strong>{{ name }}</strong>
         </p>
diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html
index 0f420c6903b..28c3db83030 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-confirm.component.html
@@ -1,11 +1,11 @@
 <bit-dialog dialogSize="large" [title]="'confirmUsers' | i18n" [loading]="loading">
   <ng-container bitDialogContent>
-    <app-callout type="danger" *ngIf="filteredUsers.length <= 0">
+    <bit-callout type="danger" *ngIf="filteredUsers.length <= 0">
       {{ "noSelectedUsersApplicable" | i18n }}
-    </app-callout>
-    <app-callout type="error" *ngIf="error">
+    </bit-callout>
+    <bit-callout type="danger" [title]="'error' | i18n" *ngIf="error">
       {{ error }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="!loading && !done">
       <p bitTypography="body1">
         {{ "fingerprintEnsureIntegrityVerify" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html
index 3bcc749821a..8b921d69814 100644
--- a/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-remove.component.html
@@ -1,18 +1,18 @@
 <bit-dialog dialogSize="large" [title]="'removeUsers' | i18n">
   <ng-container bitDialogContent>
-    <app-callout type="danger" *ngIf="users.length <= 0">
+    <bit-callout type="danger" *ngIf="users.length <= 0">
       {{ "noSelectedUsersApplicable" | i18n }}
-    </app-callout>
-    <app-callout type="error" *ngIf="error">
+    </bit-callout>
+    <bit-callout type="danger" [title]="'error' | i18n" *ngIf="error">
       {{ error }}
-    </app-callout>
+    </bit-callout>
     <ng-container *ngIf="!done">
-      <app-callout type="warning" *ngIf="users.length > 0 && !error">
+      <bit-callout type="warning" *ngIf="users.length > 0 && !error">
         <p bitTypography="body1">{{ removeUsersWarning }}</p>
         <p *ngIf="this.showNoMasterPasswordWarning" bitTypography="body1">
           {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
         </p>
-      </app-callout>
+      </bit-callout>
       <bit-table>
         <ng-container header>
           <tr>
diff --git a/apps/web/src/app/admin-console/organizations/members/people.component.html b/apps/web/src/app/admin-console/organizations/members/people.component.html
index c6e7bfd070f..9123b39a375 100644
--- a/apps/web/src/app/admin-console/organizations/members/people.component.html
+++ b/apps/web/src/app/admin-console/organizations/members/people.component.html
@@ -48,14 +48,14 @@
 <ng-container *ngIf="firstLoaded">
   <p *ngIf="!dataSource.filteredData.length">{{ "noMembersInList" | i18n }}</p>
   <ng-container *ngIf="dataSource.filteredData.length">
-    <app-callout
+    <bit-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
-      icon="bwi bwi-check-circle"
+      icon="bwi-check-circle"
       *ngIf="showConfirmUsers"
     >
       {{ "usersNeedConfirmed" | i18n }}
-    </app-callout>
+    </bit-callout>
     <!-- The padding on the bottom of the cdk-virtual-scroll-viewport element is required to prevent table row content
     from overflowing the <main> element. -->
     <cdk-virtual-scroll-viewport scrollWindow [itemSize]="rowHeight" class="tw-pb-8">
diff --git a/apps/web/src/app/admin-console/organizations/policies/disable-send.component.html b/apps/web/src/app/admin-console/organizations/policies/disable-send.component.html
index 0e50c5838ee..5ca0e04c3f7 100644
--- a/apps/web/src/app/admin-console/organizations/policies/disable-send.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/disable-send.component.html
@@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
   {{ "disableSendExemption" | i18n }}
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
diff --git a/apps/web/src/app/admin-console/organizations/policies/master-password.component.html b/apps/web/src/app/admin-console/organizations/policies/master-password.component.html
index 6864519fde5..85670f7d193 100644
--- a/apps/web/src/app/admin-console/organizations/policies/master-password.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/master-password.component.html
@@ -1,6 +1,6 @@
-<app-callout type="info" *ngIf="showKeyConnectorInfo">
+<bit-callout type="info" *ngIf="showKeyConnectorInfo">
   {{ "keyConnectorPolicyRestriction" | i18n }}
-</app-callout>
+</bit-callout>
 
 <div [formGroup]="data">
   <bit-form-control>
diff --git a/apps/web/src/app/admin-console/organizations/policies/personal-ownership.component.html b/apps/web/src/app/admin-console/organizations/policies/personal-ownership.component.html
index 34cf1b5aa5f..85fb04730d4 100644
--- a/apps/web/src/app/admin-console/organizations/policies/personal-ownership.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/personal-ownership.component.html
@@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
   {{ "personalOwnershipExemption" | i18n }}
-</app-callout>
+</bit-callout>
 
 <div class="form-group">
   <div class="form-check">
diff --git a/apps/web/src/app/admin-console/organizations/policies/require-sso.component.html b/apps/web/src/app/admin-console/organizations/policies/require-sso.component.html
index 0056f654d01..57aa3471c72 100644
--- a/apps/web/src/app/admin-console/organizations/policies/require-sso.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/require-sso.component.html
@@ -1,9 +1,9 @@
-<app-callout type="tip" title="{{ 'prerequisite' | i18n }}">
+<bit-callout type="info" title="{{ 'prerequisite' | i18n }}">
   {{ "requireSsoPolicyReq" | i18n }}
-</app-callout>
-<app-callout type="warning">
+</bit-callout>
+<bit-callout type="warning">
   {{ "requireSsoExemption" | i18n }}
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
diff --git a/apps/web/src/app/admin-console/organizations/policies/send-options.component.html b/apps/web/src/app/admin-console/organizations/policies/send-options.component.html
index 7bf34ef3a69..6e7f595c82d 100644
--- a/apps/web/src/app/admin-console/organizations/policies/send-options.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/send-options.component.html
@@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
   {{ "sendOptionsExemption" | i18n }}
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
diff --git a/apps/web/src/app/admin-console/organizations/policies/single-org.component.html b/apps/web/src/app/admin-console/organizations/policies/single-org.component.html
index aaf6888eddb..5cf0c98f980 100644
--- a/apps/web/src/app/admin-console/organizations/policies/single-org.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/single-org.component.html
@@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
   {{ "singleOrgPolicyWarning" | i18n }}
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" bitCheckbox [formControl]="enabled" id="enabled" />
diff --git a/apps/web/src/app/admin-console/organizations/policies/two-factor-authentication.component.html b/apps/web/src/app/admin-console/organizations/policies/two-factor-authentication.component.html
index 261740314d1..08141c5a873 100644
--- a/apps/web/src/app/admin-console/organizations/policies/two-factor-authentication.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/two-factor-authentication.component.html
@@ -1,6 +1,6 @@
-<app-callout type="warning">
+<bit-callout type="warning">
   {{ "twoStepLoginPolicyWarning" | i18n }}
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
diff --git a/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html b/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html
index 23c5336ece2..06b963193d3 100644
--- a/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html
+++ b/apps/web/src/app/admin-console/organizations/settings/components/delete-organization-dialog.component.html
@@ -2,9 +2,9 @@
   <bit-dialog [loading]="!loaded">
     <span bitDialogTitle>{{ "deleteOrganization" | i18n }}</span>
     <div bitDialogContent>
-      <app-callout type="warning">{{
-        "deletingOrganizationIsPermanentWarning" | i18n: organization?.name
-      }}</app-callout>
+      <bit-callout type="warning">
+        {{ "deletingOrganizationIsPermanentWarning" | i18n: organization?.name }}
+      </bit-callout>
       <p id="organizationDeleteDescription">
         <ng-container
           *ngIf="
diff --git a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
index fd65192beea..05fff978b0c 100644
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
@@ -4,9 +4,6 @@
       <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       {{ "loading" | i18n }}
     </div>
-    <app-callout type="error" *ngIf="error">
-      {{ error }}
-    </app-callout>
     <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
     <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8">
       <ng-container *ngFor="let c of defaultColorPalette">
diff --git a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
index 6946f8b94bb..b555faf9a12 100644
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.ts
@@ -31,7 +31,6 @@ export class ChangeAvatarDialogComponent implements OnInit, OnDestroy {
   @ViewChild("colorPicker") colorPickerElement: ElementRef<HTMLElement>;
 
   loading = false;
-  error: string;
   defaultColorPalette: NamedAvatarColor[] = [
     { name: "brightBlue", color: "#16cbfc" },
     { name: "green", color: "#94cc4b" },
diff --git a/apps/web/src/app/auth/settings/account/change-email.component.html b/apps/web/src/app/auth/settings/account/change-email.component.html
index 4061f56833f..b097047e663 100644
--- a/apps/web/src/app/auth/settings/account/change-email.component.html
+++ b/apps/web/src/app/auth/settings/account/change-email.component.html
@@ -1,7 +1,7 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
-  <app-callout type="warning" *ngIf="showTwoFactorEmailWarning">
+  <bit-callout type="warning" *ngIf="showTwoFactorEmailWarning">
     {{ "changeEmailTwoFactorWarning" | i18n }}
-  </app-callout>
+  </bit-callout>
 
   <div class="tw-w-1/2 tw-pr-2" formGroupName="step1">
     <bit-form-field>
@@ -29,7 +29,7 @@
   <ng-container *ngIf="tokenSent">
     <hr />
     <p>{{ "changeEmailDesc" | i18n: formGroup.controls.step1.value.newEmail }}</p>
-    <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
+    <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
 
     <div class="tw-w-1/2 tw-pr-2">
       <bit-form-field>
diff --git a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html
index 56e2cda578d..3867e9d1ca7 100644
--- a/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html
+++ b/apps/web/src/app/auth/settings/account/deauthorize-sessions.component.html
@@ -20,7 +20,7 @@
       </div>
       <div class="modal-body">
         <p>{{ "deauthorizeSessionsDesc" | i18n }}</p>
-        <app-callout type="warning">{{ "deauthorizeSessionsWarning" | i18n }}</app-callout>
+        <bit-callout type="warning">{{ "deauthorizeSessionsWarning" | i18n }}</bit-callout>
         <app-user-verification [(ngModel)]="masterPassword" ngDefaultControl name="secret">
         </app-user-verification>
       </div>
diff --git a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.html b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.html
index 93fec807baa..d280f19bea5 100644
--- a/apps/web/src/app/auth/settings/account/delete-account-dialog.component.html
+++ b/apps/web/src/app/auth/settings/account/delete-account-dialog.component.html
@@ -2,7 +2,7 @@
   <bit-dialog dialogSize="default" [title]="'deleteAccount' | i18n">
     <ng-container bitDialogContent>
       <p bitTypography="body1">{{ "deleteAccountDesc" | i18n }}</p>
-      <app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
+      <bit-callout type="warning">{{ "deleteAccountWarning" | i18n }}</bit-callout>
       <app-user-verification-form-input
         formControlName="verification"
         name="verification"
diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
index 5c72efbd619..102f8499015 100644
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover.component.html
@@ -5,7 +5,7 @@
       <small class="tw-text-muted" *ngIf="params.name">{{ params.name }}</small>
     </span>
     <div bitDialogContent>
-      <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
+      <bit-callout type="warning">{{ "loggedOutWarning" | i18n }}</bit-callout>
       <auth-password-callout [policy]="enforcedPolicyOptions" *ngIf="enforcedPolicyOptions">
       </auth-password-callout>
       <div class="tw-w-full tw-flex tw-gap-4">
diff --git a/apps/web/src/app/auth/settings/security/api-key.component.html b/apps/web/src/app/auth/settings/security/api-key.component.html
index 118b17643cc..b9416305acc 100644
--- a/apps/web/src/app/auth/settings/security/api-key.component.html
+++ b/apps/web/src/app/auth/settings/security/api-key.component.html
@@ -5,11 +5,11 @@
       <p bitTypography="body1">{{ data.apiKeyDescription | i18n }}</p>
       <app-user-verification-form-input formControlName="masterPassword" *ngIf="!clientSecret">
       </app-user-verification-form-input>
-      <app-callout type="warning" *ngIf="clientSecret">{{ data.apiKeyWarning | i18n }}</app-callout>
-      <app-callout
+      <bit-callout type="warning" *ngIf="clientSecret">{{ data.apiKeyWarning | i18n }}</bit-callout>
+      <bit-callout
         type="info"
         title="{{ 'oauth2ClientCredentials' | i18n }}"
-        icon="bwi bwi-key"
+        icon="bwi-key"
         *ngIf="clientSecret"
       >
         <p bitTypography="body1" class="tw-mb-1">
@@ -28,7 +28,7 @@
           <strong>grant_type:</strong><br />
           <code>{{ data.grantType }}</code>
         </p>
-      </app-callout>
+      </bit-callout>
     </div>
     <div bitDialogFooter>
       <button type="submit" buttonType="primary" *ngIf="!clientSecret" bitButton bitFormButton>
diff --git a/apps/web/src/app/auth/settings/two-factor-authenticator.component.html b/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
index a7efaed731e..4e447bd8921 100644
--- a/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-authenticator.component.html
@@ -1,7 +1,7 @@
 <form *ngIf="authed" [formGroup]="formGroup" [bitSubmit]="submit">
   <bit-dialog dialogSize="default">
-    <span bitDialogTitle
-      >{{ "twoStepLogin" | i18n }}
+    <span bitDialogTitle>
+      {{ "twoStepLogin" | i18n }}
       <span bitTypography="body1">{{ "authenticatorAppTitle" | i18n }}</span>
     </span>
     <ng-container bitDialogContent>
@@ -13,10 +13,10 @@
         </p>
       </ng-container>
       <ng-container *ngIf="enabled">
-        <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
+        <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">
           <p bitTypography="body1">{{ "twoStepLoginProviderEnabled" | i18n }}</p>
           {{ "twoStepAuthenticatorReaddDesc" | i18n }}
-        </app-callout>
+        </bit-callout>
         <img class="float-right mfaType0" alt="Authenticator app logo" />
         <p bitTypography="body1">{{ "twoStepAuthenticatorNeedApp" | i18n }}</p>
       </ng-container>
diff --git a/apps/web/src/app/auth/settings/two-factor-email.component.html b/apps/web/src/app/auth/settings/two-factor-email.component.html
index d15bde1d938..f79a3bc7b0a 100644
--- a/apps/web/src/app/auth/settings/two-factor-email.component.html
+++ b/apps/web/src/app/auth/settings/two-factor-email.component.html
@@ -6,9 +6,9 @@
     </span>
     <ng-container bitDialogContent>
       <ng-container *ngIf="enabled">
-        <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
+        <bit-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi-check-circle">
           {{ "twoStepLoginProviderEnabled" | i18n }}
-        </app-callout>
+        </bit-callout>
         <strong>{{ "email" | i18n }}:</strong> {{ email }}
       </ng-container>
       <ng-container *ngIf="!enabled">
diff --git a/apps/web/src/app/billing/organizations/organization-plans.component.html b/apps/web/src/app/billing/organizations/organization-plans.component.html
index 227552119a3..b9a3cc6bf05 100644
--- a/apps/web/src/app/billing/organizations/organization-plans.component.html
+++ b/apps/web/src/app/billing/organizations/organization-plans.component.html
@@ -455,7 +455,9 @@
     </ng-container>
   </bit-section>
   <bit-section *ngIf="singleOrgPolicyBlock">
-    <app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
+    <bit-callout type="danger" [title]="'error' | i18n">
+      {{ "singleOrgBlockCreateMessage" | i18n }}
+    </bit-callout>
   </bit-section>
   <bit-section>
     <button
diff --git a/apps/web/src/app/billing/shared/payment.component.html b/apps/web/src/app/billing/shared/payment.component.html
index d76de65e507..4e71df2eff7 100644
--- a/apps/web/src/app/billing/shared/payment.component.html
+++ b/apps/web/src/app/billing/shared/payment.component.html
@@ -63,9 +63,9 @@
     </div>
   </ng-container>
   <ng-container *ngIf="showMethods && method === paymentMethodType.BankAccount">
-    <app-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
+    <bit-callout type="warning" title="{{ 'verifyBankAccount' | i18n }}">
       {{ "verifyBankAccountInitialDesc" | i18n }} {{ "verifyBankAccountFailureWarning" | i18n }}
-    </app-callout>
+    </bit-callout>
     <div class="tw-grid tw-grid-cols-12 tw-gap-4" formGroupName="bank">
       <bit-form-field class="tw-col-span-6">
         <bit-label>{{ "routingNumber" | i18n }}</bit-label>
@@ -106,8 +106,8 @@
     </div>
   </ng-container>
   <ng-container *ngIf="showMethods && method === paymentMethodType.Credit">
-    <app-callout type="note">
+    <bit-callout>
       {{ "makeSureEnoughCredit" | i18n }}
-    </app-callout>
+    </bit-callout>
   </ng-container>
 </div>
diff --git a/apps/web/src/app/settings/preferences.component.html b/apps/web/src/app/settings/preferences.component.html
index 984ae7536a5..0fe96a69ed3 100644
--- a/apps/web/src/app/settings/preferences.component.html
+++ b/apps/web/src/app/settings/preferences.component.html
@@ -3,7 +3,7 @@
 <bit-container>
   <p bitTypography="body1">{{ "preferencesDesc" | i18n }}</p>
   <form [formGroup]="form" [bitSubmit]="submit" class="tw-w-1/2">
-    <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
+    <bit-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
       <span *ngIf="policy.timeout && policy.action">
         {{
           "vaultTimeoutPolicyWithActionInEffect"
@@ -16,7 +16,7 @@
       <span *ngIf="!policy.timeout && policy.action">
         {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
       </span>
-    </app-callout>
+    </bit-callout>
     <app-vault-timeout-input
       [vaultTimeoutOptions]="vaultTimeoutOptions"
       [formControl]="form.controls.vaultTimeout"
diff --git a/apps/web/src/app/vault/individual-vault/add-edit.component.html b/apps/web/src/app/vault/individual-vault/add-edit.component.html
index db7a89003d1..07721ab6268 100644
--- a/apps/web/src/app/vault/individual-vault/add-edit.component.html
+++ b/apps/web/src/app/vault/individual-vault/add-edit.component.html
@@ -20,9 +20,9 @@
         </button>
       </div>
       <div class="modal-body" *ngIf="cipher">
-        <app-callout type="info" *ngIf="allowOwnershipAssignment() && !allowPersonal">
+        <bit-callout type="info" *ngIf="allowOwnershipAssignment() && !allowPersonal">
           {{ "personalOwnershipPolicyInEffect" | i18n }}
-        </app-callout>
+        </bit-callout>
         <div class="row" *ngIf="!editMode && !viewOnly">
           <div class="col-6 form-group">
             <label for="type">{{ "whatTypeOfItem" | i18n }}</label>
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.html b/apps/web/src/app/vault/individual-vault/vault.component.html
index f39ec3378dc..780614c3303 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault.component.html
@@ -33,9 +33,9 @@
     </div>
   </div>
   <div class="tw-basis-3/4 tw-max-w-3/4 tw-px-2.5">
-    <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi-exclamation-triangle">
+    <bit-callout type="warning" *ngIf="activeFilter.isDeleted">
       {{ trashCleanupWarning }}
-    </app-callout>
+    </bit-callout>
     <app-vault-items
       [ciphers]="ciphers"
       [collections]="collections"
diff --git a/apps/web/src/app/vault/org-vault/vault.component.html b/apps/web/src/app/vault/org-vault/vault.component.html
index d2715ce10d9..7d148026c1a 100644
--- a/apps/web/src/app/vault/org-vault/vault.component.html
+++ b/apps/web/src/app/vault/org-vault/vault.component.html
@@ -41,9 +41,9 @@
         {{ "addAccess" | i18n }}
       </bit-toggle>
     </bit-toggle-group>
-    <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi bwi-exclamation-triangle">
+    <bit-callout type="warning" *ngIf="activeFilter.isDeleted">
       {{ trashCleanupWarning }}
-    </app-callout>
+    </bit-callout>
     <app-vault-items
       [ciphers]="ciphers"
       [collections]="collections"
diff --git a/apps/web/src/app/vault/settings/purge-vault.component.html b/apps/web/src/app/vault/settings/purge-vault.component.html
index 407e0a39ad1..be1de973258 100644
--- a/apps/web/src/app/vault/settings/purge-vault.component.html
+++ b/apps/web/src/app/vault/settings/purge-vault.component.html
@@ -4,7 +4,7 @@
       <p bitTypography="body1">
         {{ (organizationId ? "purgeOrgVaultDesc" : "purgeVaultDesc") | i18n }}
       </p>
-      <app-callout type="warning">{{ "purgeVaultWarning" | i18n }}</app-callout>
+      <bit-callout type="warning">{{ "purgeVaultWarning" | i18n }}</bit-callout>
       <app-user-verification formControlName="masterPassword"></app-user-verification>
     </ng-container>
     <ng-container bitDialogFooter>
diff --git a/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html b/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html
index e61b965ce6f..0b3c8bf6bab 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/policies/activate-autofill.component.html
@@ -1,9 +1,9 @@
-<app-callout type="warning">
+<bit-callout type="warning">
   {{ "experimentalFeature" | i18n }}
   <a href="https://bitwarden.com/help/auto-fill-browser/" target="_blank" rel="noreferrer">{{
     "learnMoreAboutAutofill" | i18n
   }}</a>
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
diff --git a/bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html b/bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html
index 1bfc024f3a0..deb72cfb3b5 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html
@@ -1,6 +1,6 @@
-<app-callout type="tip" title="{{ 'prerequisite' | i18n }}">
+<bit-callout title="{{ 'prerequisite' | i18n }}">
   {{ "requireSsoPolicyReq" | i18n }}
-</app-callout>
+</bit-callout>
 
 <bit-form-control>
   <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
diff --git a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
index 2e4d8fcc448..6095ec72793 100644
--- a/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
+++ b/bitwarden_license/bit-web/src/app/auth/sso/sso.component.html
@@ -106,9 +106,9 @@
           showKeyConnectorOptions
         "
       >
-        <app-callout type="warning" [useAlertRole]="true">
+        <bit-callout type="warning" [useAlertRole]="true">
           {{ "keyConnectorWarning" | i18n }}
-        </app-callout>
+        </bit-callout>
 
         <bit-form-field>
           <bit-label>{{ "keyConnectorUrl" | i18n }}</bit-label>
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html
index 63409ca14e3..9e1f2e01591 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html
@@ -2,9 +2,9 @@
 
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <div class="tw-my-4 tw-max-w-xl">
-    <app-callout type="info" title="{{ 'exportingOrganizationSecretDataTitle' | i18n }}">
+    <bit-callout type="info" title="{{ 'exportingOrganizationSecretDataTitle' | i18n }}">
       {{ "exportingOrganizationSecretDataDescription" | i18n: orgName }}
-    </app-callout>
+    </bit-callout>
   </div>
 
   <bit-form-field class="tw-max-w-sm">