diff --git a/_dev/css/theme/components/_index.scss b/_dev/css/theme/components/_index.scss
index 6edda917..6e2875a1 100644
--- a/_dev/css/theme/components/_index.scss
+++ b/_dev/css/theme/components/_index.scss
@@ -8,4 +8,3 @@
 @import "search/index";
 @import "page-loader/index";
 @import "links-list/index";
-@import "alert-toast/index";
diff --git a/_dev/css/theme/components/alert-toast/_alert-toast-stack.scss b/_dev/css/theme/components/alert-toast/_alert-toast-stack.scss
deleted file mode 100644
index 7fedf949..00000000
--- a/_dev/css/theme/components/alert-toast/_alert-toast-stack.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'sass:map';
-
-
-.alert-toast-stack {
-  position: fixed;
-  right: map.get($spacers, 3);
-  top: map.get($spacers, 3);
-  width: rem-calc(250px);
-  display: block;
-  z-index: 101;
-}
diff --git a/_dev/css/theme/components/alert-toast/_alert-toast.scss b/_dev/css/theme/components/alert-toast/_alert-toast.scss
deleted file mode 100644
index 5dab5b24..00000000
--- a/_dev/css/theme/components/alert-toast/_alert-toast.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use "sass:map";
-
-.alert-toast {
-  $self: &;
-
-  @include font-size($font-size-sm);
-  margin-bottom: map.get($spacers, 3);
-  opacity: 0;
-  transform: translateX(100%);
-  box-shadow: $box-shadow;
-  border-radius: $border-radius;
-  transition: 0.4s ease-in-out;
-
-  &__content {
-    padding: map.get($spacers, 2) map.get($spacers, 3);
-  }
-
-  &.show {
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  &--info {
-    color: color-yiq($primary);
-    background: $primary;
-  }
-
-  &--danger {
-    color: color-yiq($danger);
-    background: $danger;
-  }
-
-  &--warning {
-    color: color-yiq($warning);
-    background: $warning;
-  }
-
-  &--success {
-    color: color-yiq($success);
-    background: $success;
-  }
-}
-
diff --git a/_dev/css/theme/components/alert-toast/_index.scss b/_dev/css/theme/components/alert-toast/_index.scss
deleted file mode 100644
index a39e6fdb..00000000
--- a/_dev/css/theme/components/alert-toast/_index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "alert-toast-stack";
-@import "alert-toast";
diff --git a/_dev/css/theme/override/bootstrap/_toast.scss b/_dev/css/theme/override/bootstrap/_toast.scss
new file mode 100644
index 00000000..e8be1d4b
--- /dev/null
+++ b/_dev/css/theme/override/bootstrap/_toast.scss
@@ -0,0 +1,4 @@
+
+.toast-container {
+  width: rem-calc(250px);
+}
diff --git a/_dev/js/theme/components/useAlertToast.js b/_dev/js/theme/components/useAlertToast.js
index b1cced31..ea370bbf 100644
--- a/_dev/js/theme/components/useAlertToast.js
+++ b/_dev/js/theme/components/useAlertToast.js
@@ -1,4 +1,5 @@
 import { parseToHtml } from '../../utils/DOM/DOMHelpers';
+import { one } from '../../utils/event/eventHandler';
 
 let id = 0;
 
@@ -29,14 +30,18 @@ const useAlertToast = (params = {}) => {
   /**
    * Builds the template for an individual toast.
    * @param {string} text - The text content of the toast.
-   * @param {string} type - The type of toast ('info', 'success', 'danger', 'warning').
+   * @param {string|null} type - The type of toast ('info', 'success', 'danger', 'warning').
    * @param {string} toastId - The unique ID for the toast element.
    * @returns {HTMLElement} - The constructed toast element.
    */
   const buildToastTemplate = (text, type, toastId) => parseToHtml(`
-    <div class="alert-toast alert-toast--${type} d-none" id=${toastId}>
-      <div class="alert-toast__content">
-        ${text}
+    <div class="toast ${type ? `text-bg-${type}` : ''}" id=${toastId}>
+      <div class="d-flex">
+        <div class="toast-body">
+          ${text}
+        </div>
+        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close">
+        </button>
       </div>
     </div>
   `);
@@ -46,7 +51,7 @@ const useAlertToast = (params = {}) => {
    * @returns {HTMLElement} - The constructed toast stack container element.
    */
   const buildToastStackTemplate = () => parseToHtml(`
-    <div id="${stackTemplateId}" class="alert-toast-stack">
+    <div id="${stackTemplateId}" class="toast-container p-3 top-0 end-0 position-fixed">
     </div>
   `);
 
@@ -64,27 +69,13 @@ const useAlertToast = (params = {}) => {
     return getElement();
   };
 
-  /**
-   * Hides a toast element.
-   * @param {HTMLElement} toast - The toast element to hide.
-   */
-  const hideToast = (toast) => {
-    toast.classList.remove('show');
-
-    const hideDuration = (parseFloat(window.getComputedStyle(toast).transitionDuration)) * 1000;
-
-    setTimeout(() => {
-      toast.remove();
-    }, hideDuration);
-  };
-
   /**
    * Displays a toast with the given text, type, and optional timeout duration.
    * @param {string} text - The text content of the toast.
-   * @param {string} type - The type of toast ('info', 'success', 'danger', 'warning').
+   * @param {string|null} type - The type of toast ('info', 'success', 'danger', 'warning').
    * @param {number|boolean} [timeOut=false] - Optional timeout duration for the toast.
    */
-  const showToast = (text, type, timeOut = false) => {
+  const showToast = (text, type = null, timeOut = false) => {
     const toastId = getId();
     const toast = buildToastTemplate(text, type, toastId);
     const toastStack = getToastStackTemplate();
@@ -94,15 +85,17 @@ const useAlertToast = (params = {}) => {
 
     const toastInDOM = document.querySelector(`#${toastId}`);
 
-    toastInDOM.classList.remove('d-none');
+    const instance = window.bootstrap.Toast.getOrCreateInstance(toastInDOM, {
+      autohide: true,
+      animation: true,
+      delay: timeOut,
+    });
 
-    setTimeout(() => {
-      toastInDOM.classList.add('show');
-    }, 10);
+    instance.show();
 
-    toastInDOM.dataset.timeoutId = setTimeout(() => {
-      hideToast(toastInDOM);
-    }, timeOut);
+    one(toastInDOM, 'hidden.bs.toast', () => {
+      toastInDOM.remove();
+    });
   };
 
   /**
diff --git a/_dev/js/theme/index.js b/_dev/js/theme/index.js
index 4bf1efb2..37544804 100644
--- a/_dev/js/theme/index.js
+++ b/_dev/js/theme/index.js
@@ -1,9 +1,9 @@
 import EventEmitter from 'events';
 
 import './windowExpose';
+import './components/dynamic-bootstrap-components';
 import './core/index';
 import './vendors/index';
-import './components/dynamic-bootstrap-components';
 import bsCustomFileInput from 'bs-custom-file-input';
 import './components/header/index';
 import './components/customer/index';
diff --git a/_dev/js/utils/dynamicImports/useFunctionCallstackMap.js b/_dev/js/utils/dynamicImports/useFunctionCallstackMap.js
index 0ddd371c..b8e5cb82 100644
--- a/_dev/js/utils/dynamicImports/useFunctionCallstackMap.js
+++ b/_dev/js/utils/dynamicImports/useFunctionCallstackMap.js
@@ -75,8 +75,6 @@ const useFunctionCallstackMap = (key) => {
       callbackMap.set(key, new Map());
     }
 
-    callbackMap.set(key, new Map());
-
     const functionsCallMap = callbackMap.get(key);
     const currentCallbacks = functionsCallMap.get(elementKey) || [];
     const callbacks = [...currentCallbacks, callback];