diff --git a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
index ee9a2d3b..479e7cd8 100644
--- a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
+++ b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
@@ -1,22 +1,25 @@
 <template>
-  <fwb-slot-listener
-    @click="onClick"
-    @mouseleave="onMouseleave"
-    @mouseenter="onMouseenter"
-  >
-    <fwb-button>HELLO</fwb-button>
-  </fwb-slot-listener>
+  toasts
+  <new-fwb-toast-provider />
 </template>
 
 <script lang="ts" setup>
-import { FwbButton, FwbSlotListener } from '../../../../src/index'
-const onClick = () => {
-  console.log('onClick from slot-listener')
-}
-const onMouseenter = () => {
-  console.log('onMouseenter from slot-listener')
-}
-const onMouseleave = () => {
-  console.log('onMouseleave from slot-listener')
-}
+
+import NewFwbToastProvider from '@/components/FwbToast/FwbToastProvider.vue'
+import UpdateToast from '../../toastProvider/examples/UpdateToast.vue'
+import { useToast } from '@/components/FwbToast/composables/useToast'
+import { shallowRef } from 'vue'
+const toastProvider = useToast()
+const myToastComponent = shallowRef(UpdateToast)
+
+toastProvider.addToast({
+  text: 'Hello',
+  component: myToastComponent,
+  time: 5000,
+  componentAttrs: {
+    text: 'Alert! Hello world!',
+    type: 'success',
+    closable: true,
+  },
+})
 </script>
diff --git a/docs/components/toast.md b/docs/components/toast.md
index 313b171f..a09fe7f0 100644
--- a/docs/components/toast.md
+++ b/docs/components/toast.md
@@ -1,11 +1,11 @@
 <script setup>
 import FwbToastExample from './toast/examples/FwbToastExample.vue'
 import FwbToastExampleClosable from './toast/examples/FwbToastExampleClosable.vue'
-import FwbToastExampleIcon from './toast/examples/FwbToastExampleIcon.vue'
 import FwbToastExampleDivide from './toast/examples/FwbToastExampleDivide.vue'
 import FwbToastExampleMessage from './toast/examples/FwbToastExampleMessage.vue'
 import FwbToastExampleInteractive from './toast/examples/FwbToastExampleInteractive.vue'
 </script>
+
 # Vue Toast - Flowbite
 
 #### Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
@@ -18,21 +18,22 @@ Original reference: [https://flowbite.com/docs/components/toast/](https://flowbi
 
 The toast component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component.
 
-## Prop - type
+## Colors
 
 <fwb-toast-example />
+
 ```vue
 <template>
   <fwb-toast>
     You've unlocked achievement.
   </fwb-toast>
-  <fwb-toast type="warning">
+  <fwb-toast color="yellow">
     Improve password difficulty.
   </fwb-toast>
-  <fwb-toast type="success">
+  <fwb-toast color="green">
     Item moved successfully.
   </fwb-toast>
-  <fwb-toast type="danger">
+  <fwb-toast color="red">
     Item has been deleted.
   </fwb-toast>
 </template>
@@ -42,23 +43,15 @@ import { FwbToast } from 'flowbite-vue'
 </script>
 ```
 
-## Prop - closable
+## Dismissable
 
 <fwb-toast-example-closable />
+
 ```vue
 <template>
-  <fwb-toast closable>
+  <fwb-toast dismissable>
     You've unlocked achievement.
   </fwb-toast>
-  <fwb-toast closable type="warning">
-    Improve password difficulty.
-  </fwb-toast>
-  <fwb-toast closable type="success">
-    Item moved successfully.
-  </fwb-toast>
-  <fwb-toast closable type="danger">
-    Item has been deleted.
-  </fwb-toast>
 </template>
 
 <script setup>
@@ -66,23 +59,15 @@ import { FwbToast } from 'flowbite-vue'
 </script>
 ```
 
-## Prop - divide
+## Divide
 
 <fwb-toast-example-divide />
+
 ```vue
 <template>
   <fwb-toast divide>
     You've unlocked achievement.
   </fwb-toast>
-  <fwb-toast divide type="warning">
-    Improve password difficulty.
-  </fwb-toast>
-  <fwb-toast divide type="success">
-    Item moved successfully.
-  </fwb-toast>
-  <fwb-toast divide type="danger">
-    Item has been deleted.
-  </fwb-toast>
 </template>
 
 <script setup>
@@ -93,9 +78,10 @@ import { FwbToast } from 'flowbite-vue'
 ## Message
 
 <fwb-toast-example-message />
+
 ```vue
 <template>
-  <fwb-toast alignment="start" closable>
+  <fwb-toast alignment="start" dismissable>
     <template #icon>
       <img
         alt="Jese Leos image" class="w-8 h-8 rounded-full shadow-lg" src="avatar.jpg">
@@ -118,10 +104,10 @@ import { FwbButton, FwbToast } from 'flowbite-vue'
 ## Interactive
 
 <fwb-toast-example-interactive />
+
 ```vue
 <template>
-  <flowbite-themable theme="blue">
-    <fwb-toast alignment="start" closable>
+  <fwb-toast alignment="start" dismissable>
       <template #icon>
         <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
           <path clip-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" fill-rule="evenodd" />
@@ -140,50 +126,10 @@ import { FwbButton, FwbToast } from 'flowbite-vue'
         </fwb-button>
       </div>
     </fwb-toast>
-  </flowbite-themable>
 </template>
 
 <script setup>
-import { FlowbiteThemable, FwbButton, FwbToast } from 'flowbite-vue'
+import { FwbButton, FwbToast } from 'flowbite-vue'
 </script>
 
 ```
-
-## Slot - icon
-
-You can use icon slot for rendering your own icons. Also you can change icon background color by using [FlowbiteThemable](/components/flowbiteThemable/flowbiteThemable.md)
-
-<fwb-toast-example-icon />
-```vue
-<template>
-  <fwb-toast closable>
-    <template #icon>
-      <svg class="bi bi-mouse" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
-      </svg>
-    </template>
-    Scroll down to see more examples.
-  </fwb-toast>
-  <fwb-toast closable>
-    <template #icon>
-      <svg class="bi bi-person-plus" fill="#fff" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
-        <path d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" fill-rule="evenodd" />
-      </svg>
-    </template>
-    You have new friend request.
-  </fwb-toast>
-  <fwb-toast closabletype="success">
-    <template #icon>
-      <svg class="bi bi-earbuds" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z" fill-rule="evenodd" />
-      </svg>
-    </template>
-    Your airpods are connected.
-  </fwb-toast>
-</template>
-
-<script setup>
-import { FwbToast } from 'flowbite-vue'
-</script>
-```
diff --git a/docs/components/toast/examples/FwbToastExample.vue b/docs/components/toast/examples/FwbToastExample.vue
index bd22956a..6d8ed3d0 100644
--- a/docs/components/toast/examples/FwbToastExample.vue
+++ b/docs/components/toast/examples/FwbToastExample.vue
@@ -1,15 +1,87 @@
 <template>
-  <div class="vp-raw grid gap-2">
+  <div class="vp-raw grid gap-2 justify-center">
     <fwb-toast>
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+        <span class="sr-only">Fire icon</span>
+      </template>
       You've unlocked achievement.
     </fwb-toast>
-    <fwb-toast type="warning">
+    <fwb-toast color="yellow">
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+        <span class="sr-only">Fire icon</span>
+      </template>
       Improve password difficulty.
     </fwb-toast>
-    <fwb-toast type="success">
+    <fwb-toast color="green">
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+        <span class="sr-only">Fire icon</span>
+      </template>
       Item moved successfully.
     </fwb-toast>
-    <fwb-toast type="danger">
+    <fwb-toast color="red">
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+        <span class="sr-only">Fire icon</span>
+      </template>
       Item has been deleted.
     </fwb-toast>
   </div>
diff --git a/docs/components/toast/examples/FwbToastExampleClosable.vue b/docs/components/toast/examples/FwbToastExampleClosable.vue
index 189100f6..eddb4c77 100644
--- a/docs/components/toast/examples/FwbToastExampleClosable.vue
+++ b/docs/components/toast/examples/FwbToastExampleClosable.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="vp-raw grid gap-2">
-    <fwb-toast closable>
+  <div class="vp-raw grid gap-2 justify-center">
+    <fwb-toast dismissable>
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+        <span class="sr-only">Fire icon</span>
+      </template>
       You've unlocked achievement.
     </fwb-toast>
-    <fwb-toast
-      closable
-      type="warning"
-    >
-      Improve password difficulty.
-    </fwb-toast>
-    <fwb-toast
-      closable
-      type="success"
-    >
-      Item moved successfully.
-    </fwb-toast>
-    <fwb-toast
-      closable
-      type="danger"
-    >
-      Item has been deleted.
-    </fwb-toast>
   </div>
 </template>
 
diff --git a/docs/components/toast/examples/FwbToastExampleDivide.vue b/docs/components/toast/examples/FwbToastExampleDivide.vue
index 3ee3c4f0..a9561ef9 100644
--- a/docs/components/toast/examples/FwbToastExampleDivide.vue
+++ b/docs/components/toast/examples/FwbToastExampleDivide.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="vp-raw grid gap-2">
+  <div class="vp-raw grid gap-2 justify-center">
     <fwb-toast divide>
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+        <span class="sr-only">Fire icon</span>
+      </template>
       You've unlocked achievement.
     </fwb-toast>
-    <fwb-toast
-      divide
-      type="warning"
-    >
-      Improve password difficulty.
-    </fwb-toast>
-    <fwb-toast
-      divide
-      type="success"
-    >
-      Item moved successfully.
-    </fwb-toast>
-    <fwb-toast
-      divide
-      type="danger"
-    >
-      Item has been deleted.
-    </fwb-toast>
   </div>
 </template>
 
diff --git a/docs/components/toast/examples/FwbToastExampleIcon.vue b/docs/components/toast/examples/FwbToastExampleIcon.vue
deleted file mode 100644
index bcfa0e7e..00000000
--- a/docs/components/toast/examples/FwbToastExampleIcon.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div class="vp-raw grid gap-2">
-    <fwb-toast closable>
-      <template #icon>
-        <svg
-          class="bi bi-mouse"
-          fill="#fff"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z" />
-        </svg>
-      </template>
-      Scroll down to see more examples.
-    </fwb-toast>
-    <fwb-toast closable>
-      <template #icon>
-        <svg
-          class="bi bi-person-plus"
-          fill="#fff"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
-          <path
-            d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </template>
-      You have new friend request.
-    </fwb-toast>
-    <fwb-toast
-      closable
-      type="success"
-    >
-      <template #icon>
-        <svg
-          class="bi bi-earbuds"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </template>
-      Your airpods are connected.
-    </fwb-toast>
-  </div>
-</template>
-
-<script setup>
-import { FwbToast } from '../../../../src/index'
-</script>
diff --git a/docs/components/toast/examples/FwbToastExampleInteractive.vue b/docs/components/toast/examples/FwbToastExampleInteractive.vue
index d5dca21d..fa3d4cde 100644
--- a/docs/components/toast/examples/FwbToastExampleInteractive.vue
+++ b/docs/components/toast/examples/FwbToastExampleInteractive.vue
@@ -1,43 +1,46 @@
 <template>
-  <div class="vp-raw">
-    <flowbite-themable theme="blue">
-      <fwb-toast
-        alignment="start"
-        closable
-      >
-        <template #icon>
-          <svg
-            aria-hidden="true"
-            class="w-5 h-5"
-            fill="#ffff"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          ><path
-            clip-rule="evenodd"
-            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-            fill-rule="evenodd"
-          /></svg>
-        </template>
-        <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
-        <div class="mb-2 text-sm font-normal">
-          A new software version is available for download.
-        </div>
-        <div class="grid grid-cols-2 gap-2">
-          <fwb-button size="xs">
-            Update
-          </fwb-button>
-          <fwb-button
-            size="xs"
-            color="alternative"
-          >
-            Not now
-          </fwb-button>
-        </div>
-      </fwb-toast>
-    </flowbite-themable>
+  <div class="vp-raw flex justify-center">
+    <fwb-toast
+      alignment="start"
+      closable
+    >
+      <template #icon>
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"
+          />
+        </svg>
+        <span class="sr-only">Refresh icon</span>
+      </template>
+      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+      <div class="mb-2 text-sm font-normal">
+        A new software version is available for download.
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <fwb-button size="xs">
+          Update
+        </fwb-button>
+        <fwb-button
+          size="xs"
+          color="alternative"
+        >
+          Not now
+        </fwb-button>
+      </div>
+    </fwb-toast>
   </div>
 </template>
 
 <script setup>
-import { FlowbiteThemable, FwbButton, FwbToast } from '../../../../src/index'
+import { FwbButton, FwbToast } from '../../../../src/index'
 </script>
diff --git a/docs/components/toast/examples/FwbToastExampleMessage.vue b/docs/components/toast/examples/FwbToastExampleMessage.vue
index f0c76a7f..58e8b819 100644
--- a/docs/components/toast/examples/FwbToastExampleMessage.vue
+++ b/docs/components/toast/examples/FwbToastExampleMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vp-raw">
+  <div class="vp-raw flex justify-center">
     <fwb-toast
       alignment="start"
       closable
diff --git a/docs/components/toastProvider/examples/FwbToastProviderExample.vue b/docs/components/toastProvider/examples/FwbToastProviderExample.vue
index ca71bb78..56d42207 100644
--- a/docs/components/toastProvider/examples/FwbToastProviderExample.vue
+++ b/docs/components/toastProvider/examples/FwbToastProviderExample.vue
@@ -1,40 +1,93 @@
 <template>
-  <fwb-toast-provider :transition="transition">
+  <new-fwb-toast-provider />
+  <div class="flex flex-col gap-2">
     <label
-      for="countries"
-      class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
-    >Select transition</label>
-    <select
-      id="countries"
-      v-model="transition"
-      class="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      for="ms"
+      class="block text-sm font-medium text-gray-900 dark:text-gray-400"
+    >Duration(ms)</label>
+    <input
+      id="ms"
+      v-model.number="ms"
+      type="number"
+      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      placeholder="John"
+      required
     >
-      <option value="slide-left">
-        Slide left
-      </option>
-      <option value="slide-right">
-        Slide right
-      </option>
-      <option value="slide-top">
-        Slide top
-      </option>
-      <option value="slide-bottom">
-        Slide bottom
-      </option>
-      <option value="fade">
-        Fade
-      </option>
-    </select>
-    <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
-      <fwb-toast-provider-example-child />
+    <div class="flex gap-2">
+      <fwb-button
+        color="green"
+        @click="add('green')"
+      >
+        success
+      </fwb-button>
+      <fwb-button
+        color="yellow"
+        @click="add('yellow')"
+      >
+        warning
+      </fwb-button>
+      <fwb-button
+        color="red"
+        @click="add('red')"
+      >
+        danger
+      </fwb-button>
+      <fwb-button
+        color="purple"
+        @click="add('update')"
+      >
+        update
+      </fwb-button>
     </div>
-  </fwb-toast-provider>
+    <div class="flex">
+      <fwb-button
+        color="alternative"
+        @click="popToast"
+      >
+        pop
+      </fwb-button>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { FwbToastProvider } from '../../../../src/index'
-import FwbToastProviderExampleChild from './FwbToastProviderExampleChild.vue'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
+import { FwbButton, useToast } from '../../../../src/index'
+import UpdateToast from './UpdateToast.vue'
+import NewFwbToastProvider from '@/components/FwbToast/FwbToastProvider.vue'
+
+const ms = ref(5000)
+
+const toast = useToast()
+
+function addUpdate () {
+  toast.addToast({
+    time: parseInt(ms.value) || 0,
+    text: 'A new software version is available for download.',
+    component: shallowRef(UpdateToast),
+    componentAttrs: {
+      color: 'blue',
+      alignment: 'start',
+      dismissable: true,
+    },
+  })
+}
+
+function add (type) {
+  if (type === 'update') return addUpdate()
+  toast.addToast({
+    type,
+    time: parseInt(ms.value) || 0,
+    text: `${type} alert! Hello world!`,
+    componentAttrs: {
+      color: type,
+      dismissable: true,
+    },
+  })
+}
 
-const transition = ref('slide-left')
+function popToast () {
+  const lastToast = toast.toasts.value[toast.toasts.value.length - 1]
+  toast.removeToast(lastToast.id)
+}
 </script>
diff --git a/docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue b/docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue
deleted file mode 100644
index 7fa07db5..00000000
--- a/docs/components/toastProvider/examples/FwbToastProviderExampleChild.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="flex flex-col gap-2">
-    <label
-      for="ms"
-      class="block text-sm font-medium text-gray-900 dark:text-gray-400"
-    >Duration(ms)</label>
-    <input
-      id="ms"
-      v-model.number="ms"
-      type="number"
-      class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      placeholder="John"
-      required
-    >
-    <div class="flex gap-2">
-      <fwb-button
-        color="green"
-        @click="() => add('success')"
-      >
-        success
-      </fwb-button>
-      <fwb-button
-        color="yellow"
-        @click="() => add('warning')"
-      >
-        warning
-      </fwb-button>
-      <fwb-button
-        color="red"
-        @click="() => add('danger')"
-      >
-        danger
-      </fwb-button>
-      <fwb-button
-        color="purple"
-        @click="() => add('update')"
-      >
-        update
-      </fwb-button>
-    </div>
-    <div class="flex">
-      <fwb-button
-        color="alternative"
-        @click="remove"
-      >
-        pop
-      </fwb-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, shallowRef } from 'vue'
-import { FwbButton, useToast } from '../../../../src/index'
-import UpdateToast from './UpdateToast.vue'
-
-const ms = ref(5000)
-
-const toast = useToast()
-
-const addUpdate = () => {
-  toast.add({
-    time: parseInt(ms.value) || 0,
-    text: 'A new software version is available for download.',
-    component: shallowRef(UpdateToast),
-    componentProps: {
-      alignment: 'start',
-      closable: true,
-    },
-  })
-}
-
-const add = (type) => {
-  if (type === 'update') return addUpdate()
-  toast.add({
-    type,
-    time: parseInt(ms.value) || 0,
-    text: `${type} alert! Hello world!`,
-  })
-}
-const remove = () => {
-  toast.pop()
-}
-</script>
diff --git a/docs/components/toastProvider/examples/UpdateToast.vue b/docs/components/toastProvider/examples/UpdateToast.vue
index 6f7be76b..717b804b 100644
--- a/docs/components/toastProvider/examples/UpdateToast.vue
+++ b/docs/components/toastProvider/examples/UpdateToast.vue
@@ -1,45 +1,45 @@
 <template>
-  <flowbite-themable theme="blue">
-    <fwb-toast
-      v-bind="$attrs"
-      @close="$emit('close')"
-    >
-      <template #icon>
-        <svg
-          aria-hidden="true"
-          class="w-5 h-5"
-          fill="#ffff"
-          viewBox="0 0 20 20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </template>
-      <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
-      <div class="mb-2 text-sm font-normal">
-        <slot />
-      </div>
-      <div class="grid grid-cols-2 gap-2">
-        <fwb-button size="xs">
-          Update
-        </fwb-button>
-        <fwb-button
-          size="xs"
-          :color="'alternative'"
-        >
-          Not now
-        </fwb-button>
-      </div>
-    </fwb-toast>
-  </flowbite-themable>
+  <fwb-toast
+    v-bind="$attrs"
+    @close="$emit('close')"
+  >
+    <template #icon>
+      <svg
+        class="w-4 h-4"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 18 20"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97"
+        />
+      </svg>
+    </template>
+    <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+    <div class="mb-2 text-sm font-normal">
+      <slot />
+    </div>
+    <div class="grid grid-cols-2 gap-2">
+      <fwb-button size="xs">
+        Update
+      </fwb-button>
+      <fwb-button
+        size="xs"
+        :color="'alternative'"
+      >
+        Not now
+      </fwb-button>
+    </div>
+  </fwb-toast>
 </template>
 
 <script setup>
-import { FlowbiteThemable, FwbButton, FwbToast } from '../../../../src/index'
+import { FwbButton, FwbToast } from '../../../../src/index'
 
 defineEmits(['close'])
 </script>
diff --git a/docs/components/toastProvider/toastProvider.md b/docs/components/toastProvider/toastProvider.md
index e16414ea..d4e61485 100644
--- a/docs/components/toastProvider/toastProvider.md
+++ b/docs/components/toastProvider/toastProvider.md
@@ -4,8 +4,4 @@ import FwbToastProviderExample from './examples/FwbToastProviderExample.vue'
 
 # Vue Toast Provider - Flowbite
 
-:::warning
-WIP, Do not use it in production
-:::
-
 <fwb-toast-provider-example />
diff --git a/src/components/FwbToast/FwbToast.vue b/src/components/FwbToast/FwbToast.vue
index 98c4ba46..d22a9bc1 100644
--- a/src/components/FwbToast/FwbToast.vue
+++ b/src/components/FwbToast/FwbToast.vue
@@ -1,127 +1,93 @@
 <template>
   <div
-    v-if="visible"
-    id="toast-default"
     :class="wrapperClasses"
     role="alert"
   >
-    <flowbite-themable-child
-      v-if="type !== 'empty' || $slots.icon"
-      :apply="['background', 'text']"
-      :class="[ 'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg', typeClasses ]"
+    <div
+      v-if="$slots.icon || icon"
+      :class="[ typeClasses, 'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg' ]"
     >
       <slot
-        v-if="$slots.icon"
-        :class="{ 'ml-3': type !== 'empty' }"
         name="icon"
-      />
-      <svg
-        v-else-if="type === 'success'"
-        aria-hidden="true"
-        class="w-5 h-5"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          clip-rule="evenodd"
-          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-          fill-rule="evenodd"
-        />
-      </svg>
-      <svg
-        v-else-if="type === 'danger'"
-        aria-hidden="true"
-        class="w-5 h-5"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          fill-rule="evenodd"
-        />
-      </svg>
-      <svg
-        v-else-if="type === 'warning'"
-        aria-hidden="true"
-        class="w-5 h-5"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          clip-rule="evenodd"
-          d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </flowbite-themable-child>
-    <div :class="[contentClasses, { 'ml-3': $slots.icon || type !== 'empty' }]">
+        <svg
+          class="w-4 h-4"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 18 20"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+          />
+        </svg>
+      </slot>
+    </div>
+    <div :class="[contentClasses, { 'ml-3': $slots.icon || icon }]">
       <slot />
     </div>
-    <button
-      v-if="closable"
-      aria-label="Close"
-      class="border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
-      type="button"
-      @click="onClose"
+
+    <slot
+      name="close-button"
     >
-      <span class="sr-only">Close</span>
-      <svg
-        class="w-5 h-5"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
+      <button
+        v-if="dismissable"
+        aria-label="Close"
+        class="border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+        type="button"
+        @click="onClose"
       >
-        <path
-          clip-rule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          fill-rule="evenodd"
-        />
-      </svg>
-    </button>
+        <span class="sr-only">Close</span>
+        <svg
+          class="w-5 h-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </button>
+    </slot>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { type PropType, ref, toRefs } from 'vue'
-import type { ToastAlign, ToastType } from './types'
+import type { ToastAlign, ToastColor } from './types'
 import { useToastClasses } from './composables/useToastClasses'
-import FlowbiteThemableChild from '@/components/utils/FlowbiteThemable/FlowbiteThemableChild.vue'
 
-const props = defineProps({
-  type: {
-    type: String as PropType<ToastType>,
-    default: 'empty',
-  },
-  alignment: {
-    type: String as PropType<ToastAlign>,
-    default: 'center',
-  },
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-  divide: {
-    type: Boolean,
-    default: false,
-  },
+interface IFwbToastProps {
+  color?: ToastColor,
+  alignment?: ToastAlign,
+  dismissable?: boolean,
+  divide?: boolean,
+  icon?: boolean
+}
+const props = withDefaults(defineProps<IFwbToastProps>(), {
+  color: 'blue',
+  alignment: 'center',
+  dismissable: false,
+  divide: false,
+  icon: true,
 })
 
-const visible = ref(true)
-
 const emit = defineEmits(['close'])
 
 const {
   typeClasses,
   wrapperClasses,
   contentClasses,
-} = useToastClasses(toRefs(props))
+} = useToastClasses(props)
+console.log(typeClasses.value)
 
 const onClose = () => {
   emit('close')
-  visible.value = false
 }
 </script>
diff --git a/src/components/FwbToast/FwbToastProvider.vue b/src/components/FwbToast/FwbToastProvider.vue
index 6481908f..7e1d3aff 100644
--- a/src/components/FwbToast/FwbToastProvider.vue
+++ b/src/components/FwbToast/FwbToastProvider.vue
@@ -1,169 +1,40 @@
-<script lang="ts">
-import { useTimeoutFn } from '@vueuse/core'
-import { defineComponent, h, type PropType, provide, ref, TransitionGroup } from 'vue'
-import { FLOWBITE_TOAST_INJECTION_KEY } from './injection/config'
-import type {
-  ToastItem,
-  ToastItemWithId,
-  ToastTransition,
-  UseToastInjection,
-} from './types'
+<template>
+  <div class="xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50">
+    <TransitionGroup
+      :duration="150"
+      enter-from-class="translate-x-full"
+      enter-to-class="translate-x-0"
+      enter-active-class="transition duration-400 ease-out"
+      leave-active-class="transition duration-400 ease-in"
+      leave-from-class="translate-x-0"
+      leave-to-class="translate-x-full"
+    >
+      <template
+        v-for="item in toasts"
+        :key="item.id"
+      >
+        <component
+          :is="getComponent(item)"
+          v-bind="item.componentAttrs"
+          @close="removeToast(item.id)"
+        >
+          {{ item.text }}
+        </component>
+      </template>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '@/components/FwbToast/composables/useToast'
 import FwbToast from './FwbToast.vue'
+import type { ToastItem } from '@/components/FwbToast/types'
+const { toasts, removeToast } = useToast()
 
-export default defineComponent({
-  components: {
-    FwbToast,
-  },
-  props: {
-    transition: {
-      type: String as PropType<ToastTransition>,
-      default: 'slide-left',
-    },
-  },
-  setup () {
-    const toasts = ref<ToastItemWithId[]>([])
-
-    const runRemoveTimeout = (id: string, ms: number) => {
-      useTimeoutFn(() => removeToast(id), ms)
-    }
-
-    const addToast = (toast: ToastItem) => {
-      const id = parseInt((new Date().getTime() * Math.random()).toString()).toString()
-      toasts.value.push({
-        id,
-        ...toast,
-      })
-      if (toast.time > 0) {
-        runRemoveTimeout(id, toast.time)
-      }
-
-      return id
-    }
-
-    const popToast = () => {
-      if (toasts.value.length === 0) {
-        return ''
-      }
-
-      const lastId = toasts.value[toasts.value.length - 1].id
-      toasts.value.pop()
-
-      return lastId
-    }
-
-    const removeToast = (id: string) => {
-      const index = toasts.value.findIndex((_) => _.id === id)
-      if (index >= 0) {
-        toasts.value.splice(index, 1)
-      }
-
-      return index >= 0
-    }
-
-    provide<UseToastInjection>(FLOWBITE_TOAST_INJECTION_KEY, {
-      add: addToast,
-      pop: popToast,
-      remove: removeToast,
-    })
-
-    return {
-      toasts,
-      removeToast,
-    }
-  },
-  render () {
-    const { $props, $slots, toasts, removeToast } = this
-
-    return h('div', {}, [
-      $slots.default ? $slots.default() : null, // rendering default slot
-      h(
-        TransitionGroup,
-        {
-          name: $props.transition,
-          tag: 'div',
-          class: 'xl:w-1/6 md:w-1/4 sm:w-1/4 fixed top-3 right-3 flex flex-col gap-2 z-50',
-        },
-        {
-          default: () =>
-            toasts.map(
-              (
-                _toast, // rendering every toast
-              ) =>
-                _toast.component
-                  ? h(
-                    _toast.component,
-                    {
-                      key: _toast.id,
-                      onClose: () => removeToast(_toast.id),
-                      ...(_toast.componentProps ? _toast.componentProps : {}),
-                    },
-                    () => _toast.text,
-                  )
-                  : h(
-                    FwbToast,
-                    {
-                      closable: true,
-                      type: _toast.type,
-                      key: _toast.id,
-                      onClose: () => removeToast(_toast.id),
-                    },
-                    () => _toast.text,
-                  ),
-            ),
-        },
-      ),
-    ])
-  },
-})
-</script>
-
-<style scoped>
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: all 0.5s ease;
-}
-.slide-left-enter-from,
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
+function getComponent (item: ToastItem) {
+  if (!item.component) {
+    return FwbToast
+  }
+  return item.component
 }
-
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.5s ease;
-}
-.slide-right-enter-from,
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-.slide-top-enter-active,
-.slide-top-leave-active {
-  transition: all 0.5s ease;
-}
-.slide-top-enter-from,
-.slide-top-leave-to {
-  opacity: 0;
-  transform: translateY(30px);
-}
-
-.slide-bottom-enter-active,
-.slide-bottom-leave-active {
-  transition: all 0.5s ease;
-}
-.slide-bottom-enter-from,
-.slide-bottom-leave-to {
-  opacity: 0;
-  transform: translateY(-30px);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
+</script>
diff --git a/src/components/FwbToast/composables/useToast.ts b/src/components/FwbToast/composables/useToast.ts
index 0394c84b..8d18ae91 100644
--- a/src/components/FwbToast/composables/useToast.ts
+++ b/src/components/FwbToast/composables/useToast.ts
@@ -1,38 +1,40 @@
-import { inject } from 'vue'
-import type { ToastItem, UseToastInjection } from '../types'
-import { FLOWBITE_TOAST_INJECTION_KEY } from '../injection/config'
-
-export function useToast (): UseToastInjection {
-  const injection = inject<UseToastInjection | null>(FLOWBITE_TOAST_INJECTION_KEY, null)
-  if (injection === null) console.warn('Cannot use useToast outside <toast-provider> component. Please wrap your component with <toast-provider>')
-
-  const add = (toast: ToastItem): string => {
-    if (!injection) {
-      return ''
+import { ref, type Ref, type ShallowRef } from 'vue'
+import { type ToastAlign, type ToastColor } from '@/components/FwbToast/types'
+import { nanoid } from 'nanoid'
+import { useTimeoutFn } from '@vueuse/core'
+
+interface ToastItem {
+    id?: string
+    text: string,
+    time: number,
+    component?: ShallowRef
+    componentAttrs: {
+        type: ToastColor,
+        alignment: ToastAlign,
+        closable: boolean,
+        divide: boolean,
     }
-
-    return injection?.add(toast)
-  }
-
-  const remove = (id: string): boolean => {
-    if (!injection) {
-      return false
+}
+const toasts:Ref<ToastItem[]> = ref([])
+export function useToast () {
+  function addToast (item: ToastItem) {
+    const toastId = nanoid()
+    toasts.value.push({
+      ...item,
+      id: toastId,
+    })
+    if (item.time && item.time > 0) {
+      useTimeoutFn(() => removeToast(toastId), item.time)
     }
-
-    return injection?.remove(id)
   }
-
-  const pop = (): string => {
-    if (!injection) {
-      return ''
-    }
-
-    return injection?.pop()
+  function removeToast (id?: string) {
+    if (!id) return
+    toasts.value = toasts.value.filter(el => el.id !== id)
   }
 
   return {
-    add,
-    remove,
-    pop,
+    addToast,
+    removeToast,
+    toasts,
   }
 }
diff --git a/src/components/FwbToast/composables/useToastClasses.ts b/src/components/FwbToast/composables/useToastClasses.ts
index 314a713a..05d6d877 100644
--- a/src/components/FwbToast/composables/useToastClasses.ts
+++ b/src/components/FwbToast/composables/useToastClasses.ts
@@ -1,6 +1,6 @@
 import { computed, type Ref } from 'vue'
-import type { ToastAlign, ToastType } from '../types'
-import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import type { ToastAlign, ToastColor } from '../types'
+import { twMerge } from 'tailwind-merge'
 
 type UseToastClassesReturns = {
   typeClasses: Ref<string>
@@ -9,16 +9,23 @@ type UseToastClassesReturns = {
 }
 
 type UseToastClassesProps = {
-  type: Ref<ToastType>
-  divide: Ref<boolean>
-  alignment: Ref<ToastAlign>
+  color: ToastColor,
+  alignment: ToastAlign,
+  dismissable: boolean,
+  divide: boolean,
 }
 
-const typeClassesMap: Record<ToastType, string> = {
-  danger: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
-  empty: '',
-  success: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
-  warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+const typeClassesMap: Record<ToastColor, string> = {
+  primary: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+  red: 'text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200',
+  blue: 'text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200',
+  green: 'text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200',
+  yellow: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+  gray: 'text-gray-500 bg-gray-100 dark:bg-gray-700 dark:text-gray-200',
+  indigo: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-700 dark:text-indigo-200',
+  purple: 'text-purple-500 bg-purple-100 dark:bg-purple-700 dark:text-purple-200',
+  orange: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
+  none: '',
 }
 
 const wrapperAlignmentClasses: Record<ToastAlign, string> = {
@@ -26,25 +33,27 @@ const wrapperAlignmentClasses: Record<ToastAlign, string> = {
   end: 'items-end',
   start: 'items-start',
 }
-const defaultWrapperClasses = 'flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
+const defaultWrapperClasses = 'flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
 
 const defaultContentClasses = 'text-sm font-normal'
 
 export function useToastClasses (props: UseToastClassesProps): UseToastClassesReturns {
-  const typeClasses = computed(() => typeClassesMap[props.type.value])
+  const typeClasses = computed(() => typeClassesMap[props.color])
+  console.log('typeClasses', typeClasses.value, props.color)
 
   const wrapperClasses = computed(() => {
-    const alignmentClass = wrapperAlignmentClasses[props.alignment.value]
-    if (props.divide.value) {
-      return simplifyTailwindClasses(defaultWrapperClasses, 'dark:divide-gray-700 divide-x divide-gray-200', alignmentClass)
+    const alignmentClass = wrapperAlignmentClasses[props.alignment]
+
+    if (props.divide) {
+      return twMerge(defaultWrapperClasses, 'dark:divide-gray-700 divide-x divide-gray-200', alignmentClass)
     }
 
-    return simplifyTailwindClasses(defaultWrapperClasses, alignmentClass)
+    return twMerge(defaultWrapperClasses, alignmentClass)
   })
 
   const contentClasses = computed(() => {
-    if (props.type.value !== 'empty' && props.divide.value) {
-      return simplifyTailwindClasses(defaultContentClasses, 'pl-3')
+    if (props.divide) {
+      return twMerge(defaultContentClasses, 'pl-3')
     }
 
     return defaultContentClasses
diff --git a/src/components/FwbToast/injection/config.ts b/src/components/FwbToast/injection/config.ts
deleted file mode 100644
index 3e8e0e8f..00000000
--- a/src/components/FwbToast/injection/config.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const FLOWBITE_TOAST_INJECTION_KEY = 'flowbite-toast-injection-key'
diff --git a/src/components/FwbToast/types.ts b/src/components/FwbToast/types.ts
index 872aa361..ce38cfb5 100644
--- a/src/components/FwbToast/types.ts
+++ b/src/components/FwbToast/types.ts
@@ -1,24 +1,20 @@
-import type { DefineComponent } from 'vue'
+import type { ShallowRef } from 'vue'
 
 export type ToastAlign = 'start' | 'center' | 'end'
-export type ToastType = 'success' | 'warning' | 'danger' | 'empty'
+export type ToastType = 'success' | 'warning' | 'danger' | 'info'
+export type ToastColor = 'primary' | 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'orange' | 'none'
 
 export type ToastItem = {
-  time: number // ms
-  type: ToastType
-  text: string
-  component?: DefineComponent
-  componentProps?: Record<string, unknown>
-}
-
-export type ToastItemWithId = ToastItem & {
-  id: string
+  id?: string
+  text: string,
+  time: number,
+  component?: ShallowRef
+  componentAttrs: {
+    type: ToastColor,
+    alignment: ToastAlign,
+    closable: boolean,
+    divide: boolean,
+  }
 }
 
 export type ToastTransition = 'slide-left' | 'slide-right' | 'fade' | 'slide-top' | 'slide-bottom'
-
-export type UseToastInjection = {
-  add: (toast: ToastItem) => string
-  remove: (id: string) => boolean // true if removed, false if not found
-  pop: () => string // empty '' string if no toast to pop
-}