diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
index 0f123fdaddc..74e4f72a0ac 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.html
@@ -1,11 +1,11 @@
 <div class="abp-toast" [ngClass]="severityClass" (click)="tap()">
   <div class="abp-toast-icon">
-    <i class="fa icon" [ngClass]="iconClass" aria-hidden="true"></i>
+    <i class="bi icon" [ngClass]="iconClass" aria-hidden="true"></i>
   </div>
   <div class="abp-toast-content">
     @if (toast.options?.closable) {
       <button class="abp-toast-close-button" (click)="close()">
-        <i class="fa fa-times" aria-hidden="true"></i>
+        <i class="bi bi-x fs-4" aria-hidden="true"></i>
       </button>
     }
     <div class="abp-toast-title">
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss
index b4966c310da..b4be48fb956 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.scss
@@ -14,35 +14,39 @@ $toastClass: abp-toast;
 
 .#{$toastClass} {
   display: grid;
-  grid-template-columns: 50px 1fr;
-  gap: 10px;
+  grid-template-columns: 35px 1fr;
+  gap: 5px;
   margin: 5px 0;
-  padding: 10px;
-  border-radius: 0px;
+  padding: 7px;
   width: 350px;
   user-select: none;
   box-shadow: 0 0 10px -5px rgba(#000, 0.4);
   z-index: 9999;
+  color: #fff;
+  border-radius: 8px;
+  font-size: 14px;
+  box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
+
   @include fillColor(#f0f0f0, #000);
   opacity: 1;
   &.#{$toastClass}-success {
-    @include fillColor(#51a351, #fff);
+    @include fillColor(#4fbf67, #fff);
   }
   &.#{$toastClass}-info {
-    @include fillColor(#2f96b4, #fff);
+    @include fillColor(#438aa7, #fff);
   }
   &.#{$toastClass}-warning {
-    @include fillColor(#f89406, #fff);
+    @include fillColor(#ff9f38, #fff);
   }
   &.#{$toastClass}-error {
-    @include fillColor(#bd362f, #fff);
+    @include fillColor(#c00d49, #fff);
   }
   .#{$toastClass}-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     .icon {
-      font-size: 36px;
+      font-size: 32px;
     }
   }
   .#{$toastClass}-content {
@@ -51,6 +55,8 @@ $toastClass: abp-toast;
     align-self: center;
     flex-direction: column;
     word-break: break-word;
+    padding-bottom: 2px;
+
     .#{$toastClass}-close-button {
       position: absolute;
       top: 0;
@@ -61,7 +67,7 @@ $toastClass: abp-toast;
       margin: 0;
       padding: 0px 5px 0 0;
       width: 25px;
-      height: 25px;
+      height: 100%;
       border: none;
       border-radius: 50%;
       background: transparent;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
index 4d842df02a8..b528d490a46 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
@@ -18,22 +18,22 @@ export class ToastComponent implements OnInit {
 
   get iconClass(): string {
     const { iconClass } = this.toast.options || {};
-    
+
     if (iconClass) {
       return iconClass;
     }
 
     switch (this.toast.severity) {
       case 'success':
-        return 'fa-check-circle';
+        return 'bi-check';
       case 'info':
-        return 'fa-info-circle';
+        return 'bi-info-circle';
       case 'warning':
-        return 'fa-exclamation-triangle';
+        return 'bi-exclamation-triangle';
       case 'error':
-        return 'fa-times-circle';
+        return 'bi-shield-exclamation';
       default:
-        return 'fa-exclamation-circle';
+        return 'bi-exclamation-triangle';
     }
   }