diff --git a/config/alert.php b/config/alert.php
index f722eb26..6e495f8d 100644
--- a/config/alert.php
+++ b/config/alert.php
@@ -28,6 +28,13 @@
         'tailwind' => Themes\Tailwind\Tailwind::class,
     ],
 
+    'icons' => [
+        'success' => \Digitlimit\Alert\Icons\Success::class,
+        'error' => \Digitlimit\Alert\Icons\Error::class,
+        'warning' => \Digitlimit\Alert\Icons\Warning::class,
+        'info' => \Digitlimit\Alert\Icons\Info::class,
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Themes Settings
@@ -56,12 +63,19 @@
                 'component' => Themes\Tailwind\Components\Modal::class,
             ],
 
+            'toastr' => [
+                'view' => 'alert-toastr',
+                'alert' => Types\Toastr::class,
+                'component' => Themes\Tailwind\Components\Toastr::class,
+            ],
+
             'notify' => [
                 'view' => 'alert-notify',
                 'alert' => Types\Notify::class,
                 'component' => Themes\Tailwind\Components\Notify::class,
             ],
         ],
+
         'attributes' => [
             'buttons' => [
                 'action' => [
@@ -84,84 +98,5 @@
                 ],
             ],
         ],
-        'classes' => [
-            'buttons' => [
-                'primary' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2 bg-neutral-950 hover:bg-neutral-900',
-                'secondary' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium transition-colors border rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-100 focus:ring-offset-2',
-
-                'success' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-offset-2 bg-green-600 hover:bg-green-700',
-                'error' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-red-700 focus:ring-offset-2 bg-red-600 hover:bg-red-700',
-                'warning' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-black transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-600 focus:ring-offset-2 bg-yellow-400 hover:bg-yellow-500',
-                'info' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2 bg-blue-600 hover:bg-blue-700',
-                'light' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-black transition-colors border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 bg-white hover:bg-gray-100',
-                'dark' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-colors border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 bg-gray-800 hover:bg-gray-900',
-                'link' => 'inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-blue-600 transition-colors rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 hover:underline',
-            ],
-
-            'field' => [
-                'levels' => [
-                    'success' => [
-                        'container' => 'p-3 text-green-800',
-                    ],
-                    'error' => [
-                        'container' => 'p-3 text-red-800',
-                    ],
-                    'warning' => [
-                        'container' => 'p-3 text-yellow-800',
-                    ],
-                    'info' => [
-                        'container' => 'p-3 text-blue-800',
-                    ],
-                ],
-            ],
-
-            'notify' => [
-                'levels' => [
-                    'success' => [
-                        'container' => 'bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center from-green-400 to-green-500',
-                    ],
-                    'error' => [
-                        'container' => 'bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center from-red-400 to-pink-500',
-                    ],
-                    'warning' => [
-                        'container' => 'bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center from-yellow-400 to-yellow-500',
-                    ],
-                    'info' => [
-                        'container' => 'bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center from-blue-400 to-blue-500',
-                    ],
-                ],
-
-                'position' => [
-                    'top-right' => 'top-0 right-0',
-                    'top-left' => 'top-0 left-0',
-                    'bottom-right' => 'bottom-0 right-0',
-                    'bottom-left' => 'bottom-0 left-0',
-                    'top-center' => 'top-0 left-1/2 transform -translate-x-1/2',
-                    'bottom-center' => 'bottom-0 left-1/2 transform -translate-x-1/2',
-                    'center' => 'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
-                ],
-            ],
-
-            'message' => [
-                'levels' => [
-                    'success' => [
-                        'container' => 'flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400',
-                        'close' => 'ms-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700',
-                    ],
-                    'error' => [
-                        'container' => 'flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400',
-                        'close' => 'ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700',
-                    ],
-                    'warning' => [
-                        'container' => 'flex items-center p-4 mb-4 text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300',
-                        'close' => 'ms-auto -mx-1.5 -my-1.5 bg-yellow-50 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-yellow-400 dark:hover:bg-gray-700',
-                    ],
-                    'info' => [
-                        'container' => 'flex items-center p-4 mb-4 text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400',
-                        'close' => 'ms-auto -mx-1.5 -my-1.5 bg-blue-50 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700',
-                    ],
-                ],
-            ],
-        ],
     ],
 ];
diff --git a/resources/css/themes/tailwind/alert.css b/resources/css/themes/tailwind/alert.css
index 259159f8..13f633eb 100644
--- a/resources/css/themes/tailwind/alert.css
+++ b/resources/css/themes/tailwind/alert.css
@@ -34,52 +34,52 @@
   @apply inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-blue-600 transition-colors rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 hover:underline;
 }
 
-.alert-notify-position {
+.alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 }
 
-.alert-notify-position.top-right {
+.alert-toastr-position.top-right {
   @apply top-0 right-0;
 }
 
-.alert-notify-position.top-left {
+.alert-toastr-position.top-left {
   @apply top-0 left-0;
 }
 
-.alert-notify-position.bottom-right {
+.alert-toastr-position.bottom-right {
   @apply bottom-0 right-0;
 }
 
-.alert-notify-position.bottom-left {
+.alert-toastr-position.bottom-left {
   @apply bottom-0 left-0;
 }
 
-.alert-notify-position.top-center {
+.alert-toastr-position.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
 
-.alert-notify-position.bottom-center {
+.alert-toastr-position.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
 
-.alert-notify-position.center {
+.alert-toastr-position.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }
 
 .alert-field.success {
-  @apply p-3 text-green-800;
+  @apply pt-2 text-green-800;
 }
 
 .alert-field.error {
-  @apply p-3 text-red-800;
+  @apply pt-2 text-red-800;
 }
 
 .alert-field.warning {
-  @apply p-3 text-yellow-800;
+  @apply pt-2 text-yellow-800;
 }
 
 .alert-field.info {
-  @apply p-3 text-blue-800;
+  @apply pt-2 text-blue-800;
 }
 
 .alert-message {
@@ -146,54 +146,139 @@
   @apply sr-only;
 }
 
-.alert-notify {
+.alert-toastr {
   @apply bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center;
 }
 
-.alert-notify.success {
+.alert-toastr.success {
   @apply from-green-400 to-green-500;
 }
 
-.alert-notify.error {
+.alert-toastr.error {
   @apply from-red-400 to-pink-500;
 }
 
-.alert-notify.warning {
+.alert-toastr.warning {
   @apply from-yellow-400 to-yellow-500;
 }
 
-.alert-notify.info {
+.alert-toastr.info {
   @apply from-blue-400 to-blue-500;
 }
 
-.alert-notify.top-right {
+.alert-toastr.top-right {
   @apply top-0 right-0;
 }
 
-.alert-notify.top-left {
+.alert-toastr.top-left {
   @apply top-0 left-0;
 }
 
-.alert-notify.bottom-right {
+.alert-toastr.bottom-right {
   @apply bottom-0 right-0;
 }
 
-.alert-notify.bottom-left {
+.alert-toastr.bottom-left {
   @apply bottom-0 left-0;
 }
 
-.alert-notify.top-center {
+.alert-toastr.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
 
-.alert-notify.bottom-center {
+.alert-toastr.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
 
-.alert-notify.center {
+.alert-toastr.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }
 
+@keyframes progress-bar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+.alert-toastr .animate-width {
+  animation: progress-bar 5s linear forwards;
+}
+
+.notify-container {
+  @apply pointer-events-none fixed bottom-0 left-1/2 z-[100] flex w-full -translate-x-1/2 flex-col items-center space-y-4 transition-all will-change-transform -translate-y-10;
+}
+
+.notify-container .notifies {
+  @apply relative z-50 w-full max-w-[400px];
+}
+
+.notify-container .notify {
+  @apply py-2 bg-gray-800 pointer-events-auto relative flex min-h-12 w-full items-center justify-between gap-4 overflow-hidden rounded-xl pl-3 pr-2 shadow-2xl;
+}
+
+.notify-container .notify.top-right {
+  @apply top-0 right-0;
+}
+
+.notify-container .notify.top-left {
+  @apply top-0 left-0;
+}
+
+.notify-container .notify.bottom-right {
+  @apply bottom-0 right-0;
+}
+
+.notify-container .notify.bottom-left {
+  @apply bottom-0 left-0;
+}
+
+.notify-container .notify.top-center {
+  @apply top-0 left-1/2 transform -translate-x-1/2;
+}
+
+.notify-container .notify.bottom-center {
+  @apply bottom-0 left-1/2 transform -translate-x-1/2;
+}
+
+.notify-container .notify.center {
+  @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
+
+.notify-container .notify-content {
+  @apply relative flex flex-1 items-center gap-3;
+}
+
+.notify-container .notify-message {
+  @apply text-gray-300;
+}
+
+.notify-container .notify-buttons {
+  @apply flex items-center gap-3;
+}
+
+.notify-container .notify-buttons .cancel-button {
+  @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-gray-600 text-white hover:bg-gray-500;
+}
+
+.notify-container .notify-buttons .action-button {
+  @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-blue-500 text-white hover:bg-blue-400;
+}
+
+@keyframes progress-bar {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+.notify-container .notify-progress {
+  @apply absolute inset-0 animate-width bg-gray-700;
+  animation: progress-bar 10s linear forwards;
+}
+
 .alert-modal {
   @apply fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen;
 }
diff --git a/resources/css/themes/tailwind/components/field.css b/resources/css/themes/tailwind/components/field.css
index cb5c5ee9..c80f8dae 100644
--- a/resources/css/themes/tailwind/components/field.css
+++ b/resources/css/themes/tailwind/components/field.css
@@ -1,12 +1,12 @@
 .alert-field.success {
-  @apply p-3 text-green-800;
+  @apply pt-2 text-green-800;
 }
 .alert-field.error {
-  @apply p-3 text-red-800;
+  @apply pt-2 text-red-800;
 }
 .alert-field.warning {
-  @apply p-3 text-yellow-800;
+  @apply pt-2 text-yellow-800;
 }
 .alert-field.info {
-  @apply p-3 text-blue-800;
+  @apply pt-2 text-blue-800;
 }
diff --git a/resources/css/themes/tailwind/components/notify.css b/resources/css/themes/tailwind/components/notify.css
index 00092304..0ef2a551 100644
--- a/resources/css/themes/tailwind/components/notify.css
+++ b/resources/css/themes/tailwind/components/notify.css
@@ -1,36 +1,57 @@
-.alert-notify {
-  @apply bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center;
+.notify-container {
+  @apply pointer-events-none fixed bottom-0 left-1/2 z-[100] flex w-full -translate-x-1/2 flex-col items-center space-y-4 transition-all will-change-transform -translate-y-10;
 }
-.alert-notify.success {
-  @apply from-green-400 to-green-500;
+.notify-container .notifies {
+  @apply relative z-50 w-full max-w-[400px];
 }
-.alert-notify.error {
-  @apply from-red-400 to-pink-500;
+.notify-container .notify {
+  @apply py-2 bg-gray-800 pointer-events-auto relative flex min-h-12 w-full items-center justify-between gap-4 overflow-hidden rounded-xl pl-3 pr-2 shadow-2xl;
 }
-.alert-notify.warning {
-  @apply from-yellow-400 to-yellow-500;
-}
-.alert-notify.info {
-  @apply from-blue-400 to-blue-500;
-}
-.alert-notify.top-right {
+.notify-container .notify.top-right {
   @apply top-0 right-0;
 }
-.alert-notify.top-left {
+.notify-container .notify.top-left {
   @apply top-0 left-0;
 }
-.alert-notify.bottom-right {
+.notify-container .notify.bottom-right {
   @apply bottom-0 right-0;
 }
-.alert-notify.bottom-left {
+.notify-container .notify.bottom-left {
   @apply bottom-0 left-0;
 }
-.alert-notify.top-center {
+.notify-container .notify.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify.bottom-center {
+.notify-container .notify.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify.center {
+.notify-container .notify.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }
+.notify-container .notify-content {
+  @apply relative flex flex-1 items-center gap-3;
+}
+.notify-container .notify-message {
+  @apply text-gray-300;
+}
+.notify-container .notify-buttons {
+  @apply flex items-center gap-3;
+}
+.notify-container .notify-buttons .cancel-button {
+  @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-gray-600 text-white hover:bg-gray-500;
+}
+.notify-container .notify-buttons .action-button {
+  @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-blue-500 text-white hover:bg-blue-400;
+}
+@keyframes progress-bar {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+.notify-container .notify-progress {
+  @apply absolute inset-0 animate-width bg-gray-700;
+  animation: progress-bar 10s linear forwards;
+}
diff --git a/resources/css/themes/tailwind/components/position.css b/resources/css/themes/tailwind/components/position.css
index 05acb563..269b9d2f 100644
--- a/resources/css/themes/tailwind/components/position.css
+++ b/resources/css/themes/tailwind/components/position.css
@@ -1,24 +1,24 @@
-.alert-notify-position {
+.alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 }
-.alert-notify-position.top-right {
+.alert-toastr-position.top-right {
   @apply top-0 right-0;
 }
-.alert-notify-position.top-left {
+.alert-toastr-position.top-left {
   @apply top-0 left-0;
 }
-.alert-notify-position.bottom-right {
+.alert-toastr-position.bottom-right {
   @apply bottom-0 right-0;
 }
-.alert-notify-position.bottom-left {
+.alert-toastr-position.bottom-left {
   @apply bottom-0 left-0;
 }
-.alert-notify-position.top-center {
+.alert-toastr-position.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify-position.bottom-center {
+.alert-toastr-position.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify-position.center {
+.alert-toastr-position.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }
diff --git a/resources/css/themes/tailwind/components/toastr.css b/resources/css/themes/tailwind/components/toastr.css
new file mode 100644
index 00000000..6415bbfa
--- /dev/null
+++ b/resources/css/themes/tailwind/components/toastr.css
@@ -0,0 +1,47 @@
+.alert-toastr {
+  @apply bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center;
+}
+.alert-toastr.success {
+  @apply from-green-400 to-green-500;
+}
+.alert-toastr.error {
+  @apply from-red-400 to-pink-500;
+}
+.alert-toastr.warning {
+  @apply from-yellow-400 to-yellow-500;
+}
+.alert-toastr.info {
+  @apply from-blue-400 to-blue-500;
+}
+.alert-toastr.top-right {
+  @apply top-0 right-0;
+}
+.alert-toastr.top-left {
+  @apply top-0 left-0;
+}
+.alert-toastr.bottom-right {
+  @apply bottom-0 right-0;
+}
+.alert-toastr.bottom-left {
+  @apply bottom-0 left-0;
+}
+.alert-toastr.top-center {
+  @apply top-0 left-1/2 transform -translate-x-1/2;
+}
+.alert-toastr.bottom-center {
+  @apply bottom-0 left-1/2 transform -translate-x-1/2;
+}
+.alert-toastr.center {
+  @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
+@keyframes progress-bar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+.alert-toastr .animate-width {
+  animation: progress-bar 5s linear forwards;
+}
diff --git a/resources/scss/themes/tailwind/alert.css b/resources/scss/themes/tailwind/alert.css
index 1f3c93b0..7e39120e 100644
--- a/resources/scss/themes/tailwind/alert.css
+++ b/resources/scss/themes/tailwind/alert.css
@@ -26,42 +26,42 @@
   @apply inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-blue-600 transition-colors rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 hover:underline;
 }
 
-.alert-notify-position {
+.alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 }
-.alert-notify-position.top-right {
+.alert-toastr-position.top-right {
   @apply top-0 right-0;
 }
-.alert-notify-position.top-left {
+.alert-toastr-position.top-left {
   @apply top-0 left-0;
 }
-.alert-notify-position.bottom-right {
+.alert-toastr-position.bottom-right {
   @apply bottom-0 right-0;
 }
-.alert-notify-position.bottom-left {
+.alert-toastr-position.bottom-left {
   @apply bottom-0 left-0;
 }
-.alert-notify-position.top-center {
+.alert-toastr-position.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify-position.bottom-center {
+.alert-toastr-position.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify-position.center {
+.alert-toastr-position.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }
 
 .alert-field.success {
-  @apply p-3 text-green-800;
+  @apply pt-2 text-green-800;
 }
 .alert-field.error {
-  @apply p-3 text-red-800;
+  @apply pt-2 text-red-800;
 }
 .alert-field.warning {
-  @apply p-3 text-yellow-800;
+  @apply pt-2 text-yellow-800;
 }
 .alert-field.info {
-  @apply p-3 text-blue-800;
+  @apply pt-2 text-blue-800;
 }
 
 .alert-message {
@@ -113,42 +113,111 @@
   @apply sr-only;
 }
 
-.alert-notify {
+.alert-toastr {
   @apply bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center;
 }
-.alert-notify.success {
+.alert-toastr.success {
   @apply from-green-400 to-green-500;
 }
-.alert-notify.error {
+.alert-toastr.error {
   @apply from-red-400 to-pink-500;
 }
-.alert-notify.warning {
+.alert-toastr.warning {
   @apply from-yellow-400 to-yellow-500;
 }
-.alert-notify.info {
+.alert-toastr.info {
   @apply from-blue-400 to-blue-500;
 }
-.alert-notify.top-right {
+.alert-toastr.top-right {
   @apply top-0 right-0;
 }
-.alert-notify.top-left {
+.alert-toastr.top-left {
   @apply top-0 left-0;
 }
-.alert-notify.bottom-right {
+.alert-toastr.bottom-right {
   @apply bottom-0 right-0;
 }
-.alert-notify.bottom-left {
+.alert-toastr.bottom-left {
   @apply bottom-0 left-0;
 }
-.alert-notify.top-center {
+.alert-toastr.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify.bottom-center {
+.alert-toastr.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
-.alert-notify.center {
+.alert-toastr.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }
+@keyframes progress-bar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+.alert-toastr .animate-width {
+  animation: progress-bar 5s linear forwards;
+}
+
+.notify-container {
+  @apply pointer-events-none fixed bottom-0 left-1/2 z-[100] flex w-full -translate-x-1/2 flex-col items-center space-y-4 transition-all will-change-transform -translate-y-10;
+}
+.notify-container .notifies {
+  @apply relative z-50 w-full max-w-[400px];
+}
+.notify-container .notify {
+  @apply py-2 bg-gray-800 pointer-events-auto relative flex min-h-12 w-full items-center justify-between gap-4 overflow-hidden rounded-xl pl-3 pr-2 shadow-2xl;
+}
+.notify-container .notify.top-right {
+  @apply top-0 right-0;
+}
+.notify-container .notify.top-left {
+  @apply top-0 left-0;
+}
+.notify-container .notify.bottom-right {
+  @apply bottom-0 right-0;
+}
+.notify-container .notify.bottom-left {
+  @apply bottom-0 left-0;
+}
+.notify-container .notify.top-center {
+  @apply top-0 left-1/2 transform -translate-x-1/2;
+}
+.notify-container .notify.bottom-center {
+  @apply bottom-0 left-1/2 transform -translate-x-1/2;
+}
+.notify-container .notify.center {
+  @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+}
+.notify-container .notify-content {
+  @apply relative flex flex-1 items-center gap-3;
+}
+.notify-container .notify-message {
+  @apply text-gray-300;
+}
+.notify-container .notify-buttons {
+  @apply flex items-center gap-3;
+}
+.notify-container .notify-buttons .cancel-button {
+  @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-gray-600 text-white hover:bg-gray-500;
+}
+.notify-container .notify-buttons .action-button {
+  @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-blue-500 text-white hover:bg-blue-400;
+}
+@keyframes progress-bar {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+.notify-container .notify-progress {
+  @apply absolute inset-0 animate-width bg-gray-700;
+  animation: progress-bar 10s linear forwards;
+}
 
 .alert-modal {
   @apply fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen;
diff --git a/resources/scss/themes/tailwind/alert.css.map b/resources/scss/themes/tailwind/alert.css.map
index d41e73e7..331fc271 100644
--- a/resources/scss/themes/tailwind/alert.css.map
+++ b/resources/scss/themes/tailwind/alert.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["components/button.scss","components/position.scss","components/field.scss","components/message.scss","components/notify.scss","components/modal.scss"],"names":[],"mappings":"AACI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AClCR;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC3BF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;ACdJ;EAEE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACI;;AAIN;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC5DN;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC5CJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EAAU;;AACV;EAAW;;AACX;EAAU;;AACV;EAAgB;;AAChB;EAAe;;AACf;EAAe;;AAGjB;EACE;;AAEA;EAAiB;;AACjB;EAAe;;AACf;EAAiB;;AACjB;EAAc;;AAEd;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE","file":"alert.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["components/button.scss","components/position.scss","components/field.scss","components/message.scss","components/toastr.scss","components/notify.scss","components/modal.scss"],"names":[],"mappings":"AACI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AClCR;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC3BF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;ACdJ;EAEE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACI;;AAIN;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AC5DN;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;IAAO;;EACP;IAAK;;;AAGP;EACE;;;ACrDJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EAEE;;AAGF;EAEE;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;IAAO;;EACP;IAAK;;;AAGP;EACE;EACA;;;ACpEJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EAAU;;AACV;EAAW;;AACX;EAAU;;AACV;EAAgB;;AAChB;EAAe;;AACf;EAAe;;AAGjB;EACE;;AAEA;EAAiB;;AACjB;EAAe;;AACf;EAAiB;;AACjB;EAAc;;AAEd;EACE;;AAGF;EACE;;AAGF;EACE;;AAIJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE","file":"alert.css"}
\ No newline at end of file
diff --git a/resources/scss/themes/tailwind/alert.scss b/resources/scss/themes/tailwind/alert.scss
index f5250412..96d5db1b 100644
--- a/resources/scss/themes/tailwind/alert.scss
+++ b/resources/scss/themes/tailwind/alert.scss
@@ -2,5 +2,6 @@
 @use "./components/position";
 @use "./components/field";
 @use "./components/message";
+@use "./components/toastr";
 @use "./components/notify";
 @use "./components/modal";
\ No newline at end of file
diff --git a/resources/scss/themes/tailwind/components/field.scss b/resources/scss/themes/tailwind/components/field.scss
index 12c1655e..42d9113e 100644
--- a/resources/scss/themes/tailwind/components/field.scss
+++ b/resources/scss/themes/tailwind/components/field.scss
@@ -1,17 +1,17 @@
 .alert-field {
   &.success {
-    @apply p-3 text-green-800;
+    @apply pt-2 text-green-800;
   }
 
   &.error {
-    @apply p-3 text-red-800;
+    @apply pt-2 text-red-800;
   }
 
   &.warning {
-    @apply p-3 text-yellow-800;
+    @apply pt-2 text-yellow-800;
   }
 
   &.info {
-    @apply p-3 text-blue-800;
+    @apply pt-2 text-blue-800;
   }
 }
diff --git a/resources/scss/themes/tailwind/components/notify.scss b/resources/scss/themes/tailwind/components/notify.scss
index 42366f91..b344a063 100644
--- a/resources/scss/themes/tailwind/components/notify.scss
+++ b/resources/scss/themes/tailwind/components/notify.scss
@@ -1,47 +1,71 @@
-.alert-notify {
-  @apply bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center;
+.notify-container {
+  @apply pointer-events-none fixed bottom-0 left-1/2 z-[100] flex w-full -translate-x-1/2 flex-col items-center space-y-4 transition-all will-change-transform -translate-y-10;
 
-  &.success {
-    @apply from-green-400 to-green-500;
+  .notifies {
+    @apply relative z-50 w-full max-w-[400px];
   }
 
-  &.error {
-    @apply from-red-400 to-pink-500;
-  }
+  .notify {
+    @apply py-2 bg-gray-800 pointer-events-auto relative flex min-h-12 w-full items-center justify-between gap-4 overflow-hidden rounded-xl pl-3 pr-2 shadow-2xl;
 
-  &.warning {
-    @apply from-yellow-400 to-yellow-500;
-  }
+    &.top-right {
+      @apply top-0 right-0;
+    }
 
-  &.info {
-    @apply from-blue-400 to-blue-500;
-  }
+    &.top-left {
+      @apply top-0 left-0;
+    }
 
-  &.top-right {
-    @apply top-0 right-0;
-  }
+    &.bottom-right {
+      @apply bottom-0 right-0;
+    }
+
+    &.bottom-left {
+      @apply bottom-0 left-0;
+    }
+
+    &.top-center {
+      @apply top-0 left-1/2 transform -translate-x-1/2;
+    }
 
-  &.top-left {
-    @apply top-0 left-0;
+    &.bottom-center {
+      @apply bottom-0 left-1/2 transform -translate-x-1/2;
+    }
+
+    &.center {
+      @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+    }
   }
 
-  &.bottom-right {
-    @apply bottom-0 right-0;
+  .notify-content {
+    @apply relative flex flex-1 items-center gap-3;
   }
 
-  &.bottom-left {
-    @apply bottom-0 left-0;
+  .notify-message {
+
+    @apply text-gray-300;
   }
 
-  &.top-center {
-    @apply top-0 left-1/2 transform -translate-x-1/2;
+  .notify-buttons {
+
+    @apply flex items-center gap-3;
+
+    .cancel-button {
+      @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-gray-600 text-white hover:bg-gray-500;
+    }
+
+    .action-button {
+      @apply cursor-default relative isolate inline-flex items-center justify-center rounded-md border font-medium whitespace-nowrap focus:outline-none disabled:opacity-50 px-4 min-h-8 border-transparent bg-blue-500 text-white hover:bg-blue-400;
+    }
   }
 
-  &.bottom-center {
-    @apply bottom-0 left-1/2 transform -translate-x-1/2;
+  @keyframes progress-bar {
+    from { width: 0; }
+    to { width: 100%; }
   }
 
-  &.center {
-    @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+  .notify-progress {
+    @apply absolute inset-0 animate-width bg-gray-700;
+    animation: progress-bar 10s linear forwards;
   }
-}
+}
\ No newline at end of file
diff --git a/resources/scss/themes/tailwind/components/position.scss b/resources/scss/themes/tailwind/components/position.scss
index 9c27f487..3ae5a982 100644
--- a/resources/scss/themes/tailwind/components/position.scss
+++ b/resources/scss/themes/tailwind/components/position.scss
@@ -1,4 +1,4 @@
-.alert-notify-position {
+.alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 
   &.top-right {
diff --git a/resources/scss/themes/tailwind/components/toastr.scss b/resources/scss/themes/tailwind/components/toastr.scss
new file mode 100644
index 00000000..1aafe3fe
--- /dev/null
+++ b/resources/scss/themes/tailwind/components/toastr.scss
@@ -0,0 +1,56 @@
+.alert-toastr {
+  @apply bg-gray-900 bg-gradient-to-r text-white rounded-t mb-3 shadow-lg flex items-center;
+
+  &.success {
+    @apply from-green-400 to-green-500;
+  }
+
+  &.error {
+    @apply from-red-400 to-pink-500;
+  }
+
+  &.warning {
+    @apply from-yellow-400 to-yellow-500;
+  }
+
+  &.info {
+    @apply from-blue-400 to-blue-500;
+  }
+
+  &.top-right {
+    @apply top-0 right-0;
+  }
+
+  &.top-left {
+    @apply top-0 left-0;
+  }
+
+  &.bottom-right {
+    @apply bottom-0 right-0;
+  }
+
+  &.bottom-left {
+    @apply bottom-0 left-0;
+  }
+
+  &.top-center {
+    @apply top-0 left-1/2 transform -translate-x-1/2;
+  }
+
+  &.bottom-center {
+    @apply bottom-0 left-1/2 transform -translate-x-1/2;
+  }
+
+  &.center {
+    @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
+  }
+
+  @keyframes progress-bar {
+    from { width: 0%; }
+    to { width: 100%; }
+  }
+
+  .animate-width {
+    animation: progress-bar 5s linear forwards;
+  }
+}
diff --git a/resources/views/icons/error.blade.php b/resources/views/icons/error.blade.php
new file mode 100644
index 00000000..ab827198
--- /dev/null
+++ b/resources/views/icons/error.blade.php
@@ -0,0 +1,11 @@
+@if($circled)
+    <svg class="size-6 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="11" stroke="#FF9500" stroke-opacity="0.25" stroke-width="2"></circle>
+        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v5"></path>
+        <path fill="#fff" stroke="#fff" d="M12.5 16.5a.5.5 0 11-1 0 .5.5 0 011 0z"></path>
+    </svg>
+@else
+    <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+    </svg>
+@endif
\ No newline at end of file
diff --git a/resources/views/icons/info.blade.php b/resources/views/icons/info.blade.php
new file mode 100644
index 00000000..da798f67
--- /dev/null
+++ b/resources/views/icons/info.blade.php
@@ -0,0 +1,11 @@
+@if($circled)
+    <svg class="size-6 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle cx="12" cy="12" r="11" stroke="#0080F1" stroke-opacity="0.25" stroke-width="2"></circle>
+        <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v5"></path>
+        <path fill="#fff" stroke="#fff" d="M12.5 16.5a.5.5 0 11-1 0 .5.5 0 011 0z"></path>
+    </svg>
+@else
+    <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+    </svg>
+@endif
\ No newline at end of file
diff --git a/resources/views/icons/success.blade.php b/resources/views/icons/success.blade.php
new file mode 100644
index 00000000..20a8c377
--- /dev/null
+++ b/resources/views/icons/success.blade.php
@@ -0,0 +1,10 @@
+@if($circled)
+    <svg class="size-6 shrink-0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="11" stroke="#11FFB6" stroke-opacity="0.231373" stroke-width="2"></circle>
+        <path d="M8.45703 12.6263L10.332 14.7096L15.5404 9.29297" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+@else
+    <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+    </svg>
+@endif
diff --git a/resources/views/icons/warning.blade.php b/resources/views/icons/warning.blade.php
new file mode 100644
index 00000000..57ec6387
--- /dev/null
+++ b/resources/views/icons/warning.blade.php
@@ -0,0 +1,11 @@
+@if($circled)
+<svg class="size-6 shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="11" stroke="#FFC107" stroke-opacity="0.25" stroke-width="2"></circle>
+    <path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v5"></path>
+    <path fill="#fff" stroke="#fff" d="M12.5 16.5a.5.5 0 11-1 0 .5.5 0 011 0z"></path>
+</svg>
+@else
+    <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-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" clip-rule="evenodd" />
+    </svg>
+@endif
diff --git a/resources/views/themes/tailwind/components/field.blade.php b/resources/views/themes/tailwind/components/field.blade.php
index 2936879a..71f19971 100644
--- a/resources/views/themes/tailwind/components/field.blade.php
+++ b/resources/views/themes/tailwind/components/field.blade.php
@@ -1,54 +1,24 @@
-<div class="p-3" wire:ignore class="digitlimit-alert-field">
-        @inject('alert', 'Digitlimit\Alert\Alert')
-        @php
-                $field   = $data ? $alert->fromArray($data) : null;
-                $bag     = $data ? $alert->fieldBag($tag): null;
-
-                if ($field && $field->getName() == $name) {
-                    $level = $field->getLevel();
-                    $message = $field->getMessage();
-                } elseif($bag && $bag->messageFor($name)) {
-                    $level = $bag->getLevel();
-                    $message = $bag->messageFor($name);
-                } else {
-                    $level = null;
-                    $message = null;
-                }
-        @endphp
-
-        @if($level && $message)
-                <div
-                        id="{{ $field->getId() }}"
-
-                        class="alert-field {{ $level }}"
-
-                        x-transition.duration.300ms
-
-                        x-data="{show: true}"
-
-                        x-show="show"
-
-                        @open-alert-field.window="show = true"
-
-                        role="alert"
-                >
-                        {{ $message }}
-                </div>
-        @elseif($errors->has($name))
-                <div
-                        class="alert-field error"
-
-                        x-transition.duration.300ms
-
-                        x-data="{show: true}"
-
-                        x-show="show"
-
-                        @open-alert-field.window="show = true"
-
-                        role="alert"
-                >
-                        {{ $errors->first($name) }}
-                </div>
-        @endif
+<div class="digitlimit-alert-field">
+    <div
+        x-transition.duration.300ms
+        x-data="{
+            field: @entangle('alert'),
+        }"
+        x-init="$watch('field.message', message => {
+            if (message && field.timeout) {
+                clearTimeout(timeoutHandle); // clear any previous timers
+                timeoutHandle = setTimeout(() => {
+                    field.message = '';
+                    field.level = '';
+                    field.timeout = null;
+                    console.log('timeout cleared');
+                }, field.timeout);
+            }
+        })"
+        class="alert-field pl-0"
+        :class="field.level"
+        role="alert"
+    >
+        <span x-text="field.message"></span>
+    </div>
 </div>
diff --git a/resources/views/themes/tailwind/components/message.blade.php b/resources/views/themes/tailwind/components/message.blade.php
index 1bccf8c3..538a3f2c 100644
--- a/resources/views/themes/tailwind/components/message.blade.php
+++ b/resources/views/themes/tailwind/components/message.blade.php
@@ -1,57 +1,72 @@
-<div wire:ignore class="digitlimit-alert-message">
-    @inject('alert', 'Digitlimit\Alert\Alert')
-    @php
-        $message   = $alert->fromArray($data);
-        $level     = $message->getLevel();
-    @endphp
+<div class="digitlimit-alert-message">
     <div
-            id="{{ $message->getId() }}"
-
-            class="alert-message {{ $level }}"
-
-            x-transition.duration.300ms
-
-            x-data="{
-                show: true
-            }"
-
-            x-show="show"
-
-            @open-alert-message.window="show = true"
-
-            role="alert"
+        class="message-container"
+        x-data="{
+            messages: @entangle('alerts'),
+            dismiss(id) {
+                this.messages = this.messages.filter(n => n.id !== id);
+            }
+        }"
     >
-        <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-        </svg>
-
-        <span class="sr-only-fix">{{ ucwords($message->getLevel()) }}</span>
+        <template x-for="message in messages" :key="message.id">
+            <div
+                class="alert-message relative overflow-hidden"
+                :class="message.level"
+                x-transition.duration.300ms
+                role="alert"
+                x-init="
+                    if (message.timeout) {
+                        setTimeout(() => dismiss(message.id), message.timeout);
+                    }
+                "
+            >
+                <!-- Smooth Progress Bar with Dynamic Color -->
+                <div
+                    x-show="message.timeout"
+                    class="absolute bottom-0 left-0 h-1"
+                    style="width: 0%"
+                    x-init="
+                        requestAnimationFrame(() => {
+                            $el.style.width = '100%';
+                            $el.style.transition = `width ${message.timeout}ms linear`;
+                        })
+                    "
+                    :class="{
+                    'bg-blue-300': message.level === 'info',
+                    'bg-green-300': message.level === 'success',
+                    'bg-yellow-300': message.level === 'warning',
+                    'bg-red-300': message.level === 'error'
+                }"
+                ></div>
 
-        {{ $slot ?? '' }}
+                <!-- Icon -->
+                <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                </svg>
 
-        <div class="message">
-            @if($message->hasTitle())
-                <h3 class="title">{{ $message->getTitle() }}</h3>
-            @endif
+                <!-- Message -->
+                <span class="sr-only-fix" x-text="message.level"></span>
 
-            <p>{{ $message->getMessage() }}</p>
-        </div>
+                <div class="message">
+                    <h3 x-show="message.title !== null" class="title" x-text="message.title"></h3>
+                    <p x-text="message.message"></p>
+                </div>
 
-        <button
-                @click="show = false"
-                type="button"
-                class="close {{ $level }}"
-                aria-label="Close"
-        >
-            <span class="sr-only-fix">Close</span>
-            <svg class="close-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-                <path
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                />
-            </svg>
-        </button>
+                <!-- Close Button -->
+                <button
+                    @click="dismiss(message.id)"
+                    type="button"
+                    class="close"
+                    :class="message.level"
+                    aria-label="Close"
+                >
+                    <span class="sr-only-fix">Close</span>
+                    <svg class="close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                    </svg>
+                </button>
+            </div>
+        </template>
     </div>
 </div>
diff --git a/resources/views/themes/tailwind/components/modal.blade.php b/resources/views/themes/tailwind/components/modal.blade.php
index f0b6ab87..24db64e7 100644
--- a/resources/views/themes/tailwind/components/modal.blade.php
+++ b/resources/views/themes/tailwind/components/modal.blade.php
@@ -1,122 +1,166 @@
-<div wire:ignore class="digitlimit-alert-modal">
-    @inject('alert', 'Digitlimit\Alert\Alert')
-    @php
-        $modal  = $alert->fromArray($data);
-        $header = $header ?? null;
-        $body   = $body ?? null;
-        $footer = $footer ?? null;
-        $hasBody   = !is_null($body);
-        $hasHeader = !is_null($header);
-        $hasFooter = !is_null($footer);
-
-        $hasTitle  = $hasHeader || $modal->getTitle();
-    @endphp
+<div class="digitlimit-alert-modal">
     <div
-            id="{{ $modal->getId() }}"
-
-            x-data="{
-                show: true,
-                modalSize: '{{ $modal->getSize() }}',
-                scrollable: {{ $modal->isScrollable() ? 'true' : 'false' }}
-            }"
+        class="modal-container"
+        x-data="{
+            modals: @entangle('alerts'),
+            dismiss(id) {
+                this.modals = this.modals.filter(n => n.id !== id);
+            }
+        }"
+    >
+        <template x-for="modal in modals" :key="modal.id">
+            <div class="alert-modal" x-cloak>
+                <!-- Background Overlay -->
+                <div
+                    class="modal-overlay"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="ease-in duration-300"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                    @click="dismiss(modal.id)"
+                ></div>
 
-            @open-alert-modal.window="show = true"
+                <!-- Modal Content -->
+                <div
+                    class="modal-content"
+                    :class="{ 'scrollable': modal.scrollable, [modal.size]: true }"
+                    x-trap="true"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+                >
+                    <!-- Modal Header -->
+                    <div class="modal-header" :class="'text-' + modal.level">
+                        <h3 class="modal-title" x-show="modal.title" x-text="modal.title"></h3>
+                        <div class="relative w-10 h-10" x-data="{
+                            radius: 9,
+                            circumference: 2 * Math.PI * 9,
+                            progress: 0,
+                            startTimer(duration, id) {
+                                if (!duration) return;
 
-            x-cloak
-    >
-        <div
-                x-show="show"
-                class="alert-modal"
-                x-cloak
-                :inert="!show"
-        >
+                                let start = null;
+                                const step = (timestamp) => {
+                                    if (!start) start = timestamp;
+                                    const elapsed = timestamp - start;
+                                    progress = Math.min(elapsed / duration, 1);
+                                    this.progress = progress;
 
-            <!-- Background overlay, closes modal when clicked -->
-            <div x-show="show"
-                 x-transition:enter="ease-out duration-300"
-                 x-transition:enter-start="opacity-0"
-                 x-transition:enter-end="opacity-100"
-                 x-transition:leave="ease-in duration-300"
-                 x-transition:leave-start="opacity-100"
-                 x-transition:leave-end="opacity-0"
-                 class="modal-overlay">
-            </div>
+                                    if (progress < 1) {
+                                        requestAnimationFrame(step);
+                                    } else {
+                                        $dispatch('close-modal', id);
+                                    }
+                                };
+                                requestAnimationFrame(step);
+                            }
+                        }" x-init="startTimer(modal.timeout, modal.id)"
+                             @close-modal.window="dismiss($event.detail)"
+                        >
+                            <!-- Circular Progress Border -->
+                            <svg class="absolute inset-0 w-full h-full" viewBox="0 0 24 24" fill="none">
+                                <circle
+                                        cx="12" cy="12" :r="radius"
+                                        stroke="#e5e7eb" stroke-width="2" fill="none"
+                                />
+                                <circle
+                                        cx="12" cy="12" :r="radius"
+                                        stroke="currentColor"
+                                        :stroke-dasharray="circumference"
+                                        :stroke-dashoffset="circumference - (progress * circumference)"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        fill="none"
+                                />
+                            </svg>
 
-            <!-- Modal content -->
-            <div x-show="show"
-                 x-trap="show"
-                 x-transition:enter="ease-out duration-300"
-                 x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
-                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                 x-transition:leave="ease-in duration-200"
-                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                 class="modal-content {{ $modal->getSize() }} {{ $modal->isScrollable() ? 'scrollable' : '' }}"
-            >
+                            <!-- Actual Close Button Icon -->
+                            <button @click="dismiss(modal.id)" class="absolute inset-0 flex items-center justify-center z-10 text-gray-800 focus:outline-none">
+                                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none"
+                                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                          d="M6 18L18 6M6 6l12 12"/>
+                                </svg>
+                            </button>
+                        </div>
 
-                <!-- Modal header -->
-                <div class="modal-header {{ 'text-' . $modal->getLevel()}}">
-                    @if($modal->hasTitle())
-                        <h3 class="modal-title">{{ $modal->getTitle() }}</h3>
-                    @endif
-                    <button x-ref="modalCloseButton"
-                            @click="show = false;"
-                            class="modal-close"
-                    >
-                        <svg class="modal-close-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
+                    </div>
 
-                @if($modal->hasView())
-                    {!! $modal->getView() !!}
-                @else
+                    <!-- Modal Body -->
                     <div class="modal-body">
-                        @if($hasBody)
-                            {{ $body }}
-                        @elseif($modal->getMessage())
-                            {{ $modal->getMessage() }}
-                        @endif
+                        <template x-if="modal.view">
+                            <div x-html="modal.view"></div>
+                        </template>
+                        <template x-if="!modal.view && modal.message">
+                            <div x-text="modal.message"></div>
+                        </template>
                     </div>
-                @endif
 
-                <div class="modal-footer">
-                    @foreach($modal->getButtons() as $button)
-                        @if($button->isAction())
-                            @if($button->isLink())
-                                <a href="{{ $button->getLink() }}" {!! $this->actionLinkAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </a>
-                            @else
-                                <button {!! $this->actionAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </button>
-                            @endif
-                        @elseif($button->isCancel())
-                            @if($button->isLink())
-                                <a href="{{ $button->getLink() }}" {!! $this->cancelLinkAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </a>
-                            @else
-                                <button {!! $this->cancelAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
+                    <!-- Modal Footer Buttons -->
+                    <div class="modal-footer">
+                        <a
+                                x-show="modal.has_action_button && modal.action_button.link !== null"
+                                :href="modal.action_button.link"
+                                @click="dismiss(modal.id)"
+                                class="modal-action-button"
+                                x-bind="modal.action_button.attributes"
+                        >
+                            <span x-text="modal.action_button.label"></span>
+                        </a>
+
+                        <button
+                            x-show="modal.has_action_button && modal.action_button.link === null"
+                            @click="dismiss(modal.id)"
+                            class="modal-action-button"
+                            x-bind="modal.action_button.attributes"
+                        >
+                            <span x-text="modal.action_button.label"></span>
+                        </button>
+
+                        <a
+                            x-show="modal.has_cancel_button && modal.cancel_button.link !== null"
+                            :href="modal.cancel_button.link"
+                            @click="dismiss(modal.id)"
+                            class="modal-cancel-button"
+                            x-bind="modal.cancel_button.attributes"
+                        >
+                            <span x-text="modal.cancel_button.label"></span>
+                        </a>
+
+                        <button
+                                x-show="modal.has_cancel_button && modal.cancel_button.link === null"
+                                @click="dismiss(modal.id)"
+                                class="modal-cancel-button"
+                                x-bind="modal.cancel_button.attributes"
+                        >
+                            <span x-text="modal.cancel_button.label"></span>
+                        </button>
+
+                        <template x-for="button in modal.custom_buttons" :key="button.id">
+                            <template x-if="button.link === null">
+                                <button
+                                    x-bind="button.attributes"
+                                >
+                                    <span x-text="button.label"></span>
                                 </button>
-                            @endif
-                        @else
-                            @if($button->isLink())
-                                <a href="{{ $button->getLink() }}" {!! $button->getAttributes() !!}>
-                                    {{ $button->getLabel() }}
+                            </template>
+                            <template x-if="button.link !== null">
+                                <a
+                                    :href="button.link"
+                                    x-bind="button.attributes"
+                                >
+                                    <span x-text="button.label"></span>
                                 </a>
-                            @else
-                                <button {!! $button->getAttributes() !!}>
-                                    {{ $button->getLabel() }}
-                                </button>
-                            @endif
-                        @endif
-                    @endforeach
+                            </template>
+                        </template>
+                    </div>
                 </div>
             </div>
-        </div>
+        </template>
     </div>
 </div>
diff --git a/resources/views/themes/tailwind/components/modal1.blade.php b/resources/views/themes/tailwind/components/modal1.blade.php
deleted file mode 100644
index 16f83d52..00000000
--- a/resources/views/themes/tailwind/components/modal1.blade.php
+++ /dev/null
@@ -1,129 +0,0 @@
-<div wire:ignore class="digitlimit-alert-modal">
-    @inject('alert', 'Digitlimit\Alert\Alert')
-    @php
-        $modal  = $alert->fromArray($data);
-        $header = $header ?? null;
-        $body   = $body ?? null;
-        $footer = $footer ?? null;
-        $hasBody   = !is_null($body);
-        $hasHeader = !is_null($header);
-        $hasFooter = !is_null($footer);
-
-        $hasTitle  = $hasHeader || $modal->getTitle();
-    @endphp
-    <div
-            id="{{ $modal->getId() }}"
-
-            x-data="{
-                show: true,
-                modalSize: '{{ $modal->getSize() }}',
-                scrollable: {{ $modal->isScrollable() ? 'true' : 'false' }}
-            }"
-
-            @open-alert-modal.window="show = true"
-    >
-        <div
-                x-show="show"
-                class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
-                x-cloak
-                :inert="!show"
-        >
-
-            <!-- Background overlay, closes modal when clicked -->
-            <div x-show="show"
-                 x-transition:enter="ease-out duration-300"
-                 x-transition:enter-start="opacity-0"
-                 x-transition:enter-end="opacity-100"
-                 x-transition:leave="ease-in duration-300"
-                 x-transition:leave-start="opacity-100"
-                 x-transition:leave-end="opacity-0"
-                 class="absolute inset-0 w-full h-full bg-white backdrop-blur-sm bg-opacity-70">
-            </div>
-
-            <!-- Modal content -->
-            <div x-show="show"
-                 x-trap="show"
-                 x-transition:enter="ease-out duration-300"
-                 x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
-                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                 x-transition:leave="ease-in duration-200"
-                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-
-                 :class="{
-                     'w-1/4': modalSize === 'small',        // Small
-                     'w-1/2': modalSize === 'medium',        // Medium
-                     'w-3/4': modalSize === 'large',        // Large
-                     'w-4/5': modalSize === 'extra-large',        // Large
-                     'w-full h-full': modalSize === 'fullscreen', // Full Screen
-                      'max-h-[80vh] overflow-y-auto': scrollable // Enables scrolling inside modal
-                 }"
-                 class="bg-white p-6 rounded-lg shadow-lg relative max-w-full"
-            >
-
-                <!-- Modal header -->
-                <div class="flex items-center justify-between pb-3 {{ $modal->getLevel() ? 'text-' . $modal->getLevel() : '' }}">
-                    @if($modal->hasTitle())
-                        <h3 class="text-lg font-semibold">{{ $modal->getTitle() }}</h3>
-                    @endif
-                    <button x-ref="modalCloseButton"
-                            @click="show = false;"
-                            class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 text-gray-600 rounded-full hover:text-gray-800 hover:bg-gray-50"
-                    >
-                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                        </svg>
-                    </button>
-                </div>
-
-                @if($modal->hasView())
-                    {!! $modal->getView() !!}
-                @else
-                    <div class="relative w-auto pb-8">
-                        @if($hasBody)
-                            {{ $body }}
-                        @elseif($modal->getMessage())
-                            {{ $modal->getMessage() }}
-                        @endif
-                    </div>
-                @endif
-
-                <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-                    @foreach($modal->getButtons() as $button)
-                        @if($button->isAction())
-                            @if($button->isLink())
-                                <a href="{{ $button->getLink() }}" {!! $this->actionLinkAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </a>
-                            @else
-                                <button {!! $this->actionAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </button>
-                            @endif
-                        @elseif($button->isCancel())
-                            @if($button->isLink())
-                                <a href="{{ $button->getLink() }}" {!! $this->cancelLinkAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </a>
-                            @else
-                                <button {!! $this->cancelAttributes($button->getAttributes()) !!}>
-                                    {{ $button->getLabel() }}
-                                </button>
-                            @endif
-                        @else
-                            @if($button->isLink())
-                                <a href="{{ $button->getLink() }}" {!! $button->getAttributes() !!}>
-                                    {{ $button->getLabel() }}
-                                </a>
-                            @else
-                                <button {!! $button->getAttributes() !!}>
-                                    {{ $button->getLabel() }}
-                                </button>
-                            @endif
-                        @endif
-                    @endforeach
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/resources/views/themes/tailwind/components/notify.blade.php b/resources/views/themes/tailwind/components/notify.blade.php
index 30995a93..8055a8ec 100644
--- a/resources/views/themes/tailwind/components/notify.blade.php
+++ b/resources/views/themes/tailwind/components/notify.blade.php
@@ -1,109 +1,107 @@
 <div wire:ignore class="digitlimit-alert-notify">
-    @inject('alert', 'Digitlimit\Alert\Alert')
-    @php
-        $notify    = $alert->fromArray($data);
-    @endphp
     <div
-            x-data="{
-            position: 'top-right',
-            notifications: $store.notifications?.list || [],
-            counter: 0,
-            createNotification(message, type = 'info', timer = 2000) {
-                const index = this.notifications.length;
-                let totalVisible = this.notifications.filter(notify => notify.visible).length + 1;
-
-                this.notifications.push({
-                    id: this.counter++,
-                    message,
-                    type,
-                    timeOut: timer * totalVisible,
-                    visible: true
-                });
-
-                setTimeout(() => {
-                    this.destroyNotification(index);
-                }, timer * totalVisible);
-            },
-
-            destroyNotification(index) {
-                 this.notifications[index].visible = false;
-            },
-
-            closeNotification(id) {
-                const notification = this.notifications.find(notify => notify.id === id);
-                if (notification) {
-                    notification.visible = false;
-                }
+        class="notify-container"
+        x-data="{
+            notifications: @entangle('alerts'),
+            dismiss(id) {
+                this.notifications = this.notifications.filter(n => n.id !== id);
             }
         }"
+    >
+        <template x-for="notify in notifications" :key="notify.id">
+            <div class="notifies" style="opacity: 1; transform: translateY(0px);">
+                <div
+                    class="notify"
+                    x-init="
+                        if (notify.timeout) {
+                            setTimeout(() => dismiss(notify.id), notify.timeout);
+                        }
+                    "
+                >
+                    <template x-if="notify.timeout">
+                        <div class="notify-progress" :style="'animation-duration: ' + notify.timeout + 'ms;'"></div>
+                    </template>
 
-            x-init="
-            $store.notifications = $data;
+                    <div class="flex flex-1 items-center gap-4">
+                        <div class="notify-content">
+                            <template x-if="notify.level === 'info'">
+                                <x-alert-icon::info />
+                            </template>
+                            <template x-if="notify.level === 'success'">
+                                <x-alert-icon::success />
+                            </template>
+                            <template x-if="notify.level === 'warning'">
+                                <x-alert-icon::warning />
+                            </template>
+                            <template x-if="notify.level === 'error'">
+                                <x-alert-icon::error />
+                            </template>
+                            <div class="notify-message" x-text="notify.message" />
+                        </div>
+                    </div>
 
-            createNotification(
-                '{{ $notify->getMessage() }}',
-                '{{ $notify->getLevel() }}',
-                {{ $notify->getTimeOut() }}
-            );
-        "
+                    <div class="notify-buttons ml-auto">
+                        <button
+                            x-show="notify.has_action_button && notify.action_button.link === null"
+                            @click="dismiss(notify.id)"
+                            class="action-button"
+                            x-bind="notify.action_button.attributes"
+                        >
+                            <span x-text="notify.action_button.label"></span>
+                        </button>
 
-            @open-alert-notify.window="createNotification('{{ $notify->getMessage() }}', '{{ $notify->getLevel() }}', {{ $notify->getTimeOut() }})"
+                        <a
+                            x-show="notify.has_action_button && notify.action_button.link !== null"
+                            :href="notify.action_button.link"
+                            @click="dismiss(notify.id)"
+                            class="action-button"
+                            x-bind="notify.action_button.attributes"
+                        >
+                            <span x-text="notify.action_button.label"></span>
+                        </a>
 
-            x-cloak
+                        <button
+                            x-show="notify.has_cancel_button && notify.cancel_button.link === null"
+                            @click="dismiss(notify.id)"
+                            class="cancel-button"
+                            x-bind="notify.cancel_button.attributes"
+                        >
+                            <span x-text="notify.cancel_button.label"></span>
+                        </button>
 
-            class="alert-notify-position {{ $notify->getPosition() }}"
-    >
-        <template x-for="notify in notifications" :key="notify.id">
-            <div
-                    x-show="notify.visible"
-                    x-transition:enter="transition ease-in duration-200"
-                    x-transition:enter-start="transform opacity-0 translate-y-2"
-                    x-transition:enter-end="transform opacity-100"
-                    x-transition:leave="transition ease-out duration-500"
-                    x-transition:leave-start="transform translate-x-0 opacity-100"
-                    x-transition:leave-end="transform -translate-y-2 opacity-0"
-                    class="alert-notify {{ $notify->getLevel() }}"
-            >
-                <div class="flex flex-col w-full">
-                    <div class="flex items-center w-full px-1 my-2">
-                        <div class="self-start px-1">
-                            <svg x-show="notify.type == 'info'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
-                            </svg>
-                            <svg x-show="notify.type == 'success'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                            </svg>
-                            <svg x-show="notify.type == 'warning'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-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" clip-rule="evenodd" />
-                            </svg>
-                            <svg x-show="notify.type == 'error'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-                            </svg>
-                        </div>
+                        <a
+                            x-show="notify.has_cancel_button && notify.cancel_button.link !== null"
+                            :href="notify.cancel_button.link"
+                            @click="dismiss(notify.id)"
+                            class="cancel-button"
+                            x-bind="notify.cancel_button.attributes"
+                        >
+                            <span x-text="notify.cancel_button.label"></span>
+                        </a>
 
-                        <div class="py-3" x-text="notify.message"></div>
+                        <template x-for="button in notify.custom_buttons" :key="button.id">
+                            <template x-if="button.link === null">
+                                <button
+                                    @click="dismiss(notify.id)"
+                                    x-bind="button.attributes"
+                                >
+                                    <span x-text="button.label"></span>
+                                </button>
+                            </template>
+                            <template x-if="button.link !== null">
+                                <a
+                                    :href="button.link"
+                                    @click="dismiss(notify.id)"
+                                    x-bind="button.attributes"
+                                >
+                                    <span x-text="button.label"></span>
+                                </a>
+                            </template>
+                        </template>
 
-                        <div class="self-start px-1">
-                            <button type="button" class="pt-0 px-1" @click="closeNotification(notify.id)">
-                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                                </svg>
-                            </button>
-                        </div>
                     </div>
-                    <progress
-                            x-data="{ value : 0 }"
-                            x-init="
-                            setInterval(() => {
-                                if(value == 100) clearInterval(); else value+=1
-                            }, notify.timeOut / 100)
-                        "
-                            max="100"
-                            :value="value"
-                            class="w-full h-1 p-0">
-                    </progress>
                 </div>
             </div>
         </template>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/themes/tailwind/components/notify1.blade.php b/resources/views/themes/tailwind/components/toastr.blade.php
similarity index 52%
rename from resources/views/themes/tailwind/components/notify1.blade.php
rename to resources/views/themes/tailwind/components/toastr.blade.php
index f530315a..41a28ca3 100644
--- a/resources/views/themes/tailwind/components/notify1.blade.php
+++ b/resources/views/themes/tailwind/components/toastr.blade.php
@@ -1,93 +1,54 @@
-<div wire:ignore class="digitlimit-alert-notify">
-    @inject('alert', 'Digitlimit\Alert\Alert')
-    @php
-        $notify    = $alert->fromArray($data);
-        $position  = config('alert.tailwind.classes.notify.position.' . $notify->getPosition());
-        $container = config('alert.tailwind.classes.notify.levels.' . $notify->getLevel() . '.container');
-    @endphp
-    <span  class="hidden {{ $css->toString() }}" />
+<div wire:ignore class="digitlimit-alert-toastr">
     <div
-            x-data="{
+        class="alert-toastr-position"
+        :class="position"
+        x-data="{
             position: 'top-right',
-            notifications: $store.notifications?.list || [],
-            counter: 0,
-            createNotification(message, type = 'info', timer = 2000) {
-                const index = this.notifications.length;
-                let totalVisible = this.notifications.filter(notify => notify.visible).length + 1;
-
-                this.notifications.push({
-                    id: this.counter++,
-                    message,
-                    type,
-                    timeOut: timer * totalVisible,
-                    visible: true
-                });
-
-                setTimeout(() => {
-                    this.destroyNotification(index);
-                }, timer * totalVisible);
-            },
-
-            destroyNotification(index) {
-                 this.notifications[index].visible = false;
-            },
-
-            closeNotification(id) {
-                const notification = this.notifications.find(notify => notify.id === id);
-                if (notification) {
-                    notification.visible = false;
-                }
+            toasts: @entangle('alerts'),
+            dismiss(id) {
+                this.toasts = this.toasts.filter(n => n.id !== id);
             }
         }"
-
-            x-init="
-            $store.notifications = $data;
-
-            createNotification(
-                '{{ $notify->getMessage() }}',
-                '{{ $notify->getLevel() }}',
-                {{ $notify->getTimeOut() }}
-            );
-        "
-
-            @open-alert-notify.window="createNotification('{{ $notify->getMessage() }}', '{{ $notify->getLevel() }}', {{ $notify->getTimeOut() }})"
-
-            x-cloak
-
-            class="fixed {{ $position }} px-2 mt-3 overflow-x-hidden z-50"
     >
-        <template x-for="notify in notifications" :key="notify.id">
+        <template x-for="toast in toasts" :key="toast.id">
             <div
-                    x-show="notify.visible"
                     x-transition:enter="transition ease-in duration-200"
                     x-transition:enter-start="transform opacity-0 translate-y-2"
                     x-transition:enter-end="transform opacity-100"
                     x-transition:leave="transition ease-out duration-500"
                     x-transition:leave-start="transform translate-x-0 opacity-100"
                     x-transition:leave-end="transform -translate-y-2 opacity-0"
-                    class="{{ $container }}"
+                    class="alert-toastr"
+                    :class="toast.level"
+                    x-init="
+                        position = toast.position
+
+                        if (toast.timeout) {
+                            setTimeout(() => dismiss(toast.id), toast.timeout);
+                        }
+                    "
             >
                 <div class="flex flex-col w-full">
                     <div class="flex items-center w-full px-1 my-2">
                         <div class="self-start px-1">
-                            <svg x-show="notify.type == 'info'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <svg x-show="toast.type == 'info'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                             </svg>
-                            <svg x-show="notify.type == 'success'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <svg x-show="toast.type == 'success'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                             </svg>
-                            <svg x-show="notify.type == 'warning'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <svg x-show="toast.type == 'warning'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <path fill-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" clip-rule="evenodd" />
                             </svg>
-                            <svg x-show="notify.type == 'error'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <svg x-show="toast.type == 'error'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                             </svg>
                         </div>
 
-                        <div x-text="notify.message"></div>
+                        <div class="py-3" x-text="toast.message"></div>
 
                         <div class="self-start px-1">
-                            <button type="button" class="pt-0 px-1" @click="closeNotification(notify.id)">
+                            <button type="button" class="pt-0 px-1" @click="dismiss(toast.id)">
                                 <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                 </svg>
@@ -99,7 +60,7 @@ class="{{ $container }}"
                             x-init="
                             setInterval(() => {
                                 if(value == 100) clearInterval(); else value+=1
-                            }, notify.timeOut / 100)
+                            }, toast.timeout / 100)
                         "
                             max="100"
                             :value="value"
diff --git a/src/Alert.php b/src/Alert.php
index 5906661a..e61fa459 100644
--- a/src/Alert.php
+++ b/src/Alert.php
@@ -3,12 +3,12 @@
 namespace Digitlimit\Alert;
 
 use Digitlimit\Alert\Contracts\HasName;
-use Digitlimit\Alert\Contracts\Taggable;
 use Digitlimit\Alert\Factory\AlertFactory;
 use Digitlimit\Alert\Foundation\AlertInterface;
 use Digitlimit\Alert\Helpers\SessionKey;
 use Digitlimit\Alert\Helpers\Type;
 use Exception;
+use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Session;
 use Illuminate\Support\Traits\Macroable;
 
@@ -21,14 +21,19 @@ class Alert
      */
     const DEFAULT_TAG = 'default';
 
-    /**
-     * Fetch an alert based on the default tag.
-     *
-     * @throws Exception
-     */
-    public function default(string $type): ?Taggable
+    const MAIN_KEY = 'digitlimit.alert';
+
+    public static function key(string $type, string $tag): string
+    {
+        return self::mainKey()
+            .'.'.$type
+            .'.'.$tag;
+    }
+
+    public static function typeKey(string $type): string
     {
-        return self::tagged($type, self::DEFAULT_TAG);
+        return self::mainKey()
+            .'.'.$type;
     }
 
     /**
@@ -42,7 +47,7 @@ public static function named(string $type, string $name, string $tag): ?HasName
             throw new Exception("Invalid alert type '$type'. Check the alert config");
         }
 
-        $tag = $tag.'.'.$name;
+        $tag = $tag . '.' . $name;
 
         return Session::get(
             SessionKey::key($type, $tag)
@@ -54,83 +59,86 @@ public static function named(string $type, string $name, string $tag): ?HasName
      *
      * @throws Exception
      */
-    public static function tagged(string $type, string $tag): ?Taggable
+    public static function tagged(string $type, string $tag): Collection
     {
         if (! Type::exists($type)) {
             throw new Exception("Invalid alert type '$type'. Check the alert config");
         }
 
-        $tagged = Session::get(
+        $alerts = Session::get(
             SessionKey::key($type, $tag)
-        );
-
-        if (is_array($tagged)) {
-            return null;
-        }
+        ) ?? [];
 
-        return $tagged;
+        return collect($alerts);
     }
 
     /**
+     * Fetch an alert from the given alert type.
+     *
      * @throws Exception
      */
-    public static function taggedField(string $tag): ?Taggable
+    public static function from(string $type, ...$args): AlertInterface
     {
-        return self::tagged('field', $tag);
+        if (! Type::exists($type)) {
+            throw new Exception("Invalid alert type '$type'. Check the alert config");
+        }
+
+        return AlertFactory::make($type, ...$args);
     }
 
-    /**
-     * @throws Exception
-     */
-    public static function namedField(string $name, string $tag): ?AlertInterface
+    public static function forget(string $type, string $tag = Alert::DEFAULT_TAG): void
     {
-        return self::named('field', $name, $tag);
+        Session::forget(SessionKey::key($type, $tag));
     }
 
     /**
+     * Fetch an alert based on the type and named.
+     *
      * @throws Exception
      */
-    public static function fieldBag(string $tag): ?Taggable
+    public static function getField(string $name, string $tag = Alert::DEFAULT_TAG): ?HasName
     {
-        return self::tagged('bag', $tag);
+        return self::named('field', $name, $tag);
     }
 
     /**
+     * Fetch an alert based on the type and named.
+     *
      * @throws Exception
      */
-    public static function taggedMessage(string $tag): ?Taggable
+    public static function getMessage(string $tag = Alert::DEFAULT_TAG): Collection
     {
         return self::tagged('message', $tag);
     }
 
     /**
+     * Fetch an alert based on the type and named.
+     *
      * @throws Exception
      */
-    public static function taggedModal(string $tag): ?Taggable
+    public static function getModal(string $tag = Alert::DEFAULT_TAG): Collection
     {
         return self::tagged('modal', $tag);
     }
 
     /**
+     * Fetch an alert based on the type and named.
+     *
      * @throws Exception
      */
-    public static function taggedNotify(string $tag): ?Taggable
+    public static function getToastr(string $tag = Alert::DEFAULT_TAG): Collection
     {
-        return self::tagged('notify', $tag);
+        return self::tagged('toastr', $tag);
     }
 
     /**
-     * Fetch an alert from the given alert type.
+     * Fetch an alert based on the type and named.
      *
      * @throws Exception
      */
-    public static function from(string $type, ...$args): AlertInterface
+    public static function getNotify(string $tag = Alert::DEFAULT_TAG): Collection
     {
-        if (! Type::exists($type)) {
-            throw new Exception("Invalid alert type '$type'. Check the alert config");
-        }
-
-        return AlertFactory::make($type, ...$args);
+        return self::tagged('notify', $tag);
     }
 
     /**
@@ -151,6 +159,16 @@ public static function fromArray(array $alert): ?AlertInterface
         return AlertFactory::makeFromArray($alert);
     }
 
+    /**
+     * Create an alert from an array.
+     */
+    public static function fromArrays(array $alerts): Collection
+    {
+        return collect($alerts)->map(function ($alert) {
+            return self::fromArray($alert);
+        });
+    }
+
     /**
      * Fetch all alerts from the session.
      */
@@ -183,11 +201,9 @@ public static function count(?string $type = null): int
     /**
      * Fetch all alerts from the session.
      */
-    public static function all(?string $type = null): array
+    public static function all(): array
     {
-        return $type
-            ? Session::get(SessionKey::typeKey($type), [])
-            : Session::get(SessionKey::mainKey(), []);
+        return Session::get(SessionKey::mainKey()) ?? [];
     }
 
     /**
diff --git a/src/AlertServiceProvider.php b/src/AlertServiceProvider.php
index 50da161b..de7b7082 100644
--- a/src/AlertServiceProvider.php
+++ b/src/AlertServiceProvider.php
@@ -3,6 +3,7 @@
 namespace Digitlimit\Alert;
 
 use Exception;
+use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
 class AlertServiceProvider extends ServiceProvider
@@ -16,6 +17,8 @@ public function boot(): void
     {
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'alert');
 
+        Blade::componentNamespace('Digitlimit\\Alert\\Icons', 'alert-icon');
+
         $this->registerMacros();
 
         $this->bootForConsole();
@@ -66,10 +69,9 @@ protected function bootForConsole(): void
      */
     protected function registerMacros(): void
     {
-        Alert::macro('stickForget', function (?string $tag = null) {
+        Alert::macro('forget', function (string $tag = Alert::DEFAULT_TAG) {
             app(Alert::class)
-                ->sticky()
                 ->forget($tag);
         });
     }
-}
+}
\ No newline at end of file
diff --git a/src/Component/Button.php b/src/Component/Button.php
index 7c62d3fe..e09e8e16 100644
--- a/src/Component/Button.php
+++ b/src/Component/Button.php
@@ -7,6 +7,11 @@
  */
 class Button
 {
+    /**
+     * The button id.
+     */
+    protected string $id;
+
     /**
      * Create a new button instance.
      *
@@ -14,10 +19,25 @@ class Button
      */
     public function __construct(
         protected string $name,
-        protected ?string $label = null,
+        protected string $label,
         protected ?string $link = null,
         protected array $attributes = []
-    ) {}
+    ) {
+        $this->id = $attributes['id'] ?? uniqid();
+    }
+
+    public function id(string $id): self
+    {
+        $this->attributes['id'] = $id;
+        $this->id = $id;
+
+        return $this;
+    }
+
+    public function getId(): string
+    {
+        return $this->id;
+    }
 
     /**
      * Set the button name.
@@ -121,6 +141,7 @@ public function isCancel(): bool
     public function toArray(): array
     {
         return [
+            'id' => $this->getId(),
             'name' => $this->getName(),
             'label' => $this->getLabel(),
             'link' => $this->getLink(),
@@ -140,4 +161,14 @@ public static function fill(array $button): self
             $button['attributes']
         );
     }
+
+    /**
+     * Execute a callback and return the instance.
+     */
+    public function tap(callable $callback): self
+    {
+        $callback($this);
+
+        return $this;
+    }
 }
diff --git a/src/Contracts/LivewireInterface.php b/src/Contracts/LivewireInterface.php
index 6a4cea0e..caffe3a1 100644
--- a/src/Contracts/LivewireInterface.php
+++ b/src/Contracts/LivewireInterface.php
@@ -2,7 +2,9 @@
 
 namespace Digitlimit\Alert\Contracts;
 
+use Illuminate\Support\Collection;
+
 interface LivewireInterface
 {
-    public function refresh(string $tag, array $data): void;
+    public function refresh(string $tag, array $alerts): void;
 }
diff --git a/src/Events/Toastr/Flashed.php b/src/Events/Toastr/Flashed.php
new file mode 100644
index 00000000..faa3f782
--- /dev/null
+++ b/src/Events/Toastr/Flashed.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Digitlimit\Alert\Events\Toastr;
+
+use Digitlimit\Alert\Types\Toastr;
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class Flashed
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * Create a new event instance.
+     */
+    public function __construct(
+        public Toastr $alert
+    ) {}
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return array<int, Channel>
+     */
+    public function broadcastOn(): array
+    {
+        return [
+            new PrivateChannel('channel-name'),
+        ];
+    }
+}
diff --git a/src/Facades/Alert.php b/src/Facades/Alert.php
index ea9c5ab0..b07b7b92 100644
--- a/src/Facades/Alert.php
+++ b/src/Facades/Alert.php
@@ -7,12 +7,10 @@
 /**
  * @method static named(string $string, string $string1)
  * @method static message(string $string)
- * @method static default(string $string)
  * @method static modal(string $string)
- * @method static notify(string $string)
+ * @method static toastr(string $string)
  * @method static sticky(string $string)
  * @method static field(string $name, string $message)
- * @method static fieldBag($bag)
  * @method static form(string $string, string $string1)
  * @method static success(string $string)
  * @method static error(string $string)
diff --git a/src/Foundation/AbstractAlert.php b/src/Foundation/AbstractAlert.php
index 27feae82..2143dcc5 100644
--- a/src/Foundation/AbstractAlert.php
+++ b/src/Foundation/AbstractAlert.php
@@ -6,11 +6,13 @@
 use Digitlimit\Alert\Helpers\Helper;
 use Digitlimit\Alert\Helpers\SessionKey;
 use Illuminate\Support\Facades\Session;
+use Illuminate\Contracts\Support\Jsonable;
+use Illuminate\Contracts\Support\Arrayable;
 
 /**
  * @property string $message
  */
-abstract class AbstractAlert implements AlertInterface
+abstract class AbstractAlert implements AlertInterface, Jsonable, Arrayable
 {
     /**
      * Alert unique ID.
@@ -33,7 +35,12 @@ public function __construct()
      */
     public function id(string|int $id): self
     {
+        if (!empty($this->id) && $this->id !== $id) {
+            $this->forget();
+        }
+
         $this->id = $id;
+        $this->flash();
 
         return $this;
     }
@@ -43,6 +50,10 @@ public function id(string|int $id): self
      */
     public function autoSetId(): self
     {
+        if (! empty($this->id)) {
+            return $this;
+        }
+
         $this->id($this->key().'-'.Helper::randomString());
 
         return $this;
@@ -56,13 +67,28 @@ public function getId(): string|int
         return $this->id;
     }
 
+    /**
+     * Fetch the alert tag.
+     */
+    public function getIdTag(): string
+    {
+        return $this->getTag() . '.' . $this->getId();
+    }
+
     /**
      * Flash alert to store.
      * Its temporal store that is deleted once pulled/fetched.
      */
     public function flash(): void
     {
-        $sessionKey = SessionKey::key($this->key(), $this->getTag());
+        if (empty($this->id) || empty($this->message)) {
+            return;
+        }
+
+        $sessionKey = SessionKey::key(
+            $this->key(),
+            $this->getIdTag()
+        );
 
         if (empty($sessionKey)) {
             return;
@@ -76,11 +102,9 @@ public function flash(): void
      */
     public function forget(?string $tag = null): self
     {
-        if (empty($tag)) {
-            $tag = ! empty($this->tag)
-                ? $this->tag
-                : Alert::DEFAULT_TAG;
-        }
+        $tag = $tag
+            ? $tag . '.' . $this->getId()
+            : $this->getIdTag();
 
         $sessionKey = SessionKey::key($this->key(), $tag);
 
@@ -98,4 +122,12 @@ public function toArray(): array
             'id' => $this->getId(),
         ];
     }
+
+    /**
+     * Convert alert to json.
+     */
+    public function toJson($options = 0): string
+    {
+        return json_encode($this->toArray());
+    }
 }
diff --git a/src/Helpers.php b/src/Helpers.php
index a394581d..0e09601c 100644
--- a/src/Helpers.php
+++ b/src/Helpers.php
@@ -1,136 +1,69 @@
 <?php
 
+use Digitlimit\Alert\Alert;
 use Digitlimit\Alert\Types\Message;
 use Digitlimit\Alert\Types\Field;
 use Digitlimit\Alert\Types\Modal;
 use Digitlimit\Alert\Types\Notify;
-use Illuminate\Support\MessageBag;
-use Illuminate\Validation\Validator;
+use Digitlimit\Alert\Types\Toastr;
 
 if (! function_exists('alert')) {
-    function alert(
-        string $message,
-        ?string $title = null,
-        string $level = 'success'
-    ): Message {
+    function alert(string $message, ?string $title = null): Message {
         $alert = app('alert')
             ->message($message);
 
-        $alert->level($level);
-
         if ($title) {
             $alert->title($title);
         }
 
-        $alert->flash();
-
         return $alert;
     }
 }
 
 if (! function_exists('field')) {
-    function field(
-        string $name,
-        string $message,
-        ?string $tag = null,
-        string $level = 'success'
-    ): Field {
-        $alert = app('alert')->field($name, $message);
-
-        if ($tag) {
-            $alert->tag($tag);
-        }
-
-        $alert->level($level);
-
-        $alert->flash();
-
-        return $alert;
-    }
-}
-
-if (! function_exists('fieldBag')) {
-    function fieldBag(Validator|MessageBag $bag): FieldBag
-    {
-        $bag = app('alert')
-            ->fieldBag($bag);
-
-        $bag->flash();
-
-        return $bag;
+    function field(string $name, string $message): Field {
+        return app('alert')->field($name, $message);
     }
 }
 
 if (! function_exists('modal')) {
-    function modal(
-        string $message,
-        ?string $title = null,
-        ?string $tag = null,
-        string $level = 'success'
-    ): Modal {
+    function modal(string $message, ?string $title = null,): Modal {
         $alert = app('alert')->modal($message);
 
         if ($title) {
             $alert->title($title);
         }
 
-        $alert->level($level);
-
-        if ($tag) {
-            $alert->tag($tag);
-        }
-
-        $alert->flash();
-
         return $alert;
     }
 }
 
-if (! function_exists('notify')) {
-    function notify(
-        string $message,
-        ?string $title = null,
-        string $level = 'success',
-        string $position = 'top-right'
-    ): Notify {
-        $alert = app('alert')->notify($message);
+if (! function_exists('toastr')) {
+    function toastr(string $message, ?string $title = null,): Toastr {
+        $alert = app('alert')->toastr($message);
 
         if ($title) {
             $alert->title($title);
         }
 
-        $alert->level($level);
-        $alert->position($position);
-
-        $alert->flash();
-
         return $alert;
     }
 }
 
-if (! function_exists('sticky')) {
-    function sticky(
-        string $message,
-        ?string $title = null,
-        string $level = 'success'
-    ): Sticky {
-        $alert = app('alert')->sticky($message);
+if (! function_exists('notify')) {
+    function notify(string $message, ?string $title = null,): Notify {
+        $alert = app('alert')->notify($message);
 
         if ($title) {
             $alert->title($title);
         }
 
-        $alert->level($level);
-
-        $alert->flash();
-
         return $alert;
     }
 }
 
-if (! function_exists('forgetSticky')) {
-    function forgetSticky(?string $name = null): void
-    {
-        app('alert')->stickForget($name);
+if (! function_exists('forgetAlert')) {
+    function forgetAlert(string $type, string $tag = Alert::DEFAULT_TAG): void {
+        app('alert')->forget($type, $tag);
     }
 }
diff --git a/src/Helpers/Attribute.php b/src/Helpers/Attribute.php
index 8f1c3dd3..8755a4c5 100644
--- a/src/Helpers/Attribute.php
+++ b/src/Helpers/Attribute.php
@@ -9,6 +9,10 @@ class Attribute
      */
     public static function toString(array $attributes): string
     {
+        if (empty($attributes)) {
+            return '';
+        }
+
         $newAttributes = array_map(function ($key) use ($attributes) {
             $key = htmlspecialchars($key);
             $value = htmlspecialchars($attributes[$key]) ?? '';
diff --git a/src/Helpers/ValidationError.php b/src/Helpers/ValidationError.php
new file mode 100644
index 00000000..ed3dc040
--- /dev/null
+++ b/src/Helpers/ValidationError.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace Digitlimit\Alert\Helpers;
+
+use Illuminate\Support\MessageBag;
+
+class ValidationError
+{
+    /**
+     * Get Laravel errors.
+     */
+    public function errors(): MessageBag
+    {
+        $errors = session('errors');
+
+        return $errors instanceof MessageBag
+            ? $errors
+            : new MessageBag;
+    }
+
+    /**
+     * Get tagged view errors.
+     */
+    public function taggedErrors(string $tag): MessageBag
+    {
+        return $this->errors()->{$tag} ?? new MessageBag;
+    }
+
+    /**
+     * Get tagged view errors.
+     */
+    public function error(string $name, string $tag): ?string
+    {
+        $taggedErrors = $this->taggedErrors($tag);
+
+        if ($taggedErrors->has($name)) {
+            return $taggedErrors->first($name);
+        }
+
+        return $this->errors()->first($name);
+    }
+}
diff --git a/src/Icons/Error.php b/src/Icons/Error.php
new file mode 100644
index 00000000..628bcf78
--- /dev/null
+++ b/src/Icons/Error.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Digitlimit\Alert\Icons;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Error extends Component
+{
+    /**
+     * The alert icon is circled.
+     */
+    public bool $circled = true;
+
+    /**
+     * Check if the alert icon is circled.
+     *
+     * @return bool
+     */
+    public function isCircled(): bool
+    {
+        return $this->circled;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('alert::icons.error');
+    }
+}
diff --git a/src/Icons/Info.php b/src/Icons/Info.php
new file mode 100644
index 00000000..60068ae9
--- /dev/null
+++ b/src/Icons/Info.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Digitlimit\Alert\Icons;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Info extends Component
+{
+    /**
+     * The alert icon is circled.
+     */
+    public bool $circled = true;
+
+    /**
+     * Check if the alert icon is circled.
+     *
+     * @return bool
+     */
+    public function isCircled(): bool
+    {
+        return $this->circled;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('alert::icons.info');
+    }
+}
diff --git a/src/Icons/Success.php b/src/Icons/Success.php
new file mode 100644
index 00000000..77b44a52
--- /dev/null
+++ b/src/Icons/Success.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Digitlimit\Alert\Icons;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Success extends Component
+{
+    /**
+     * The alert icon is circled.
+     */
+    public bool $circled = true;
+
+    /**
+     * Check if the alert icon is circled.
+     *
+     * @return bool
+     */
+    public function isCircled(): bool
+    {
+        return $this->circled;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('alert::icons.success');
+    }
+}
diff --git a/src/Icons/Warning.php b/src/Icons/Warning.php
new file mode 100644
index 00000000..3bad66f4
--- /dev/null
+++ b/src/Icons/Warning.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Digitlimit\Alert\Icons;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Warning extends Component
+{
+    /**
+     * The alert icon is circled.
+     */
+    public bool $circled = true;
+
+    /**
+     * Check if the alert icon is circled.
+     *
+     * @return bool
+     */
+    public function isCircled(): bool
+    {
+        return $this->circled;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('alert::icons.warning');
+    }
+}
diff --git a/src/Themes/Tailwind/AbstractComponent.php b/src/Themes/Tailwind/AbstractComponent.php
new file mode 100644
index 00000000..42343259
--- /dev/null
+++ b/src/Themes/Tailwind/AbstractComponent.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace Digitlimit\Alert\Themes\Tailwind;
+
+use Livewire\Component;
+
+abstract class AbstractComponent extends Component
+{
+
+}
diff --git a/src/Themes/Tailwind/Components/Field.php b/src/Themes/Tailwind/Components/Field.php
index 2198aa73..9fa7c04d 100644
--- a/src/Themes/Tailwind/Components/Field.php
+++ b/src/Themes/Tailwind/Components/Field.php
@@ -6,42 +6,33 @@
 use Digitlimit\Alert\Contracts\LivewireInterface;
 use Exception;
 use Illuminate\Contracts\View\View;
-use Illuminate\Support\MessageBag;
 use Livewire\Attributes\On;
-use Livewire\Component;
+use Digitlimit\Alert\Themes\Tailwind\AbstractComponent;
 
 /**
  * Class Field
  */
-class Field extends Component implements LivewireInterface
+class Field extends AbstractComponent implements LivewireInterface
 {
     /**
      * The alias for named alert.
      */
-    public string $for;
+    public ?string $for = null;
 
     /**
      * The alert name
      */
-    public string $name;
+    public ?string $name = null;
 
     /**
-     * The alert tag.
+     * The alerts
      */
-    public string $tag = Alert::DEFAULT_TAG;
+    public array $alert = [];
 
     /**
-     * The alert
-     */
-    public array $data = [];
-
-    /**
-     * Set data for the alert.
+     * The alert tag.
      */
-    public function setUp(array $data): void
-    {
-        $this->data = $data;
-    }
+    public string $tag = Alert::DEFAULT_TAG;
 
     /**
      * Create a new component instance.
@@ -54,65 +45,41 @@ public function mount(): void
             $this->name = $this->for;
         }
 
-        if (! empty($this->name) && ! empty($this->tag)) {
-            $data = Alert::namedField($this->name, $this->tag)?->toArray();
-
-            if (! empty($data)) {
-                $this->setUp($data);
-            }
+        if (empty($this->name)) {
+            return;
         }
+
+        $this->resolve($this->tag);
     }
 
     #[On('refresh-alert-field')]
-    public function refresh(string $tag, array $data): void
+    public function refresh(string $tag, array $alerts): void
     {
-        if (empty($data) || empty($this->name)) {
-            return;
-        }
+        $alert = $alerts[$this->name] ?? [];
 
-        if ($this->tag !== $tag || $this->name !== $data['name']) {
+        if ($tag !== $this->tag) {
             return;
         }
 
-        $this->setUp($data);
+        $this->resolve($tag, $alert);
         $this->dispatch('open-alert-field');
     }
 
     /**
-     * Get Laravel errors.
+     * Set the alerts.
      */
-    public function getViewErrors(): MessageBag
+    public function resolve(string $tag, array $alert = []): void
     {
-        $errors = session('errors');
+        $alert = !empty($alert)
+            ? Alert::fromArray($alert)
+            : Alert::getField($tag, $this->name);
 
-        return $errors instanceof MessageBag
-            ? $errors
-            : new MessageBag;
-    }
-
-    /**
-     * Get tagged view errors.
-     */
-    public function getTaggedViewErrors(string $tag): MessageBag
-    {
-        return $this->getViewErrors()->{$tag} ?? new MessageBag;
-    }
-
-    public function getViewFieldError(string $name, string $tag): ?string
-    {
-        $taggedErrors = $this->getTaggedViewErrors($tag);
-
-        if ($taggedErrors->has($name)) {
-            return $taggedErrors->first($name);
-        }
-
-        $viewErrors = $this->getViewErrors();
-
-        if ($viewErrors->has($name)) {
-            return $viewErrors->first($name);
+        if (empty($alert)) {
+            return;
         }
 
-        return null;
+        $alert->forget();
+        $this->alert = $alert->toArray();
     }
 
     /**
@@ -120,8 +87,6 @@ public function getViewFieldError(string $name, string $tag): ?string
      */
     public function render(): View
     {
-        return view('alert::themes.tailwind.components.field', [
-            'error' => $this->getViewFieldError($this->name, $this->tag),
-        ]);
+        return view('alert::themes.tailwind.components.field');
     }
 }
diff --git a/src/Themes/Tailwind/Components/Message.php b/src/Themes/Tailwind/Components/Message.php
index e0bdb659..d92c6884 100644
--- a/src/Themes/Tailwind/Components/Message.php
+++ b/src/Themes/Tailwind/Components/Message.php
@@ -7,34 +7,41 @@
 use Exception;
 use Illuminate\Contracts\View\View;
 use Livewire\Attributes\On;
-use Livewire\Component;
+use Digitlimit\Alert\Themes\Tailwind\AbstractComponent;
 
 /**
  * Class Message
  */
-class Message extends Component implements LivewireInterface
+class Message extends AbstractComponent implements LivewireInterface
 {
-    /**
-     * The default alert tag.
-     */
-    public string $defaultTag = Alert::DEFAULT_TAG;
-
     /**
      * The alert tag.
      */
-    public string $tag;
+    public string $tag = Alert::DEFAULT_TAG;
 
     /**
-     * The alert
+     * The alerts
      */
-    public array $data = [];
+    public array $alerts = [];
 
     /**
-     * Set data for the alert.
+     * Set the alerts.
      */
-    public function setUp(array $data): void
+    public function resolve(string $tag, array $alerts = []): void
     {
-        $this->data = $data;
+        $alerts = !empty($alerts)
+            ? Alert::fromArrays($alerts)
+            : Alert::getMessage($tag);
+
+        $this->alerts = $alerts
+            ->filter(function ($alert) {
+                return $alert->getTag() === $this->tag;
+            })
+            ->values()
+            ->map(function ($alert) {
+                $alert->forget();
+                return $alert->toArray();
+            })->toArray();
     }
 
     /**
@@ -44,26 +51,17 @@ public function setUp(array $data): void
      */
     public function mount(): void
     {
-        $this->tag = $this->tag ?? $this->defaultTag;
-        $data = Alert::taggedModal($this->tag)?->toArray() ?? [];
-
-        if (empty($data)) {
-            $this->skipRender();
-
-            return;
-        }
-
-        $this->setUp($data);
+        $this->resolve($this->tag);
     }
 
     #[On('refresh-alert-message')]
-    public function refresh(string $tag, array $data): void
+    public function refresh(string $tag, array $alerts): void
     {
-        if ($this->tag !== $tag || empty($data)) {
+        if ($tag !== $this->tag) {
             return;
         }
 
-        $this->setUp($data);
+        $this->resolve($tag, array_values($alerts));
         $this->dispatch('open-alert-message');
     }
 
diff --git a/src/Themes/Tailwind/Components/Modal.php b/src/Themes/Tailwind/Components/Modal.php
index 114eb7cf..03d0df98 100644
--- a/src/Themes/Tailwind/Components/Modal.php
+++ b/src/Themes/Tailwind/Components/Modal.php
@@ -4,124 +4,79 @@
 
 use Digitlimit\Alert\Alert;
 use Digitlimit\Alert\Contracts\LivewireInterface;
-use Digitlimit\Alert\Helpers\Attribute;
 use Exception;
 use Illuminate\Contracts\View\View;
 use Livewire\Attributes\On;
-use Livewire\Component;
+use Digitlimit\Alert\Themes\Tailwind\AbstractComponent;
 
 /**
  * Class Modal
  */
-class Modal extends Component implements LivewireInterface
+class Modal extends AbstractComponent implements LivewireInterface
 {
     /**
-     * The default alert tag.
+     * The alert tag.
      */
-    public string $defaultTag = Alert::DEFAULT_TAG;
+    public string $tag = Alert::DEFAULT_TAG;
 
     /**
-     * The alert tag.
+     * The alerts
      */
-    public string $tag;
+    public array $alerts = [];
 
     /**
-     * The alert
+     * Set the alerts.
      */
-    public array $data = [];
+    public function resolve(string $tag, array $alerts = []): void
+    {
+        $alerts = !empty($alerts)
+            ? Alert::fromArrays($alerts)
+            : Alert::getModal($tag);
+
+        $this->alerts = $alerts
+            ->filter(function ($alert) {
+                return $alert->getTag() === $this->tag;
+            })
+            ->values()
+            ->map(function ($alert) {
+                $alert->forget();
+                $modal = $alert->toArray();
+
+                $modal['action_button'] = $alert->actionButton()?->toArray();
+                $modal['cancel_button'] = $alert->cancelButton()?->toArray();
+                $modal['custom_buttons'] = $alert->customButtons()
+                    ->map(fn ($button) => $button->toArray())
+                    ->toArray();
+
+                $modal['has_action_button'] = $modal['action_button'] !== null;
+                $modal['has_cancel_button'] = $modal['cancel_button'] !== null;
+                $modal['has_custom_buttons'] = count($modal['custom_buttons']);
+
+                return $modal;
+            })->toArray();
+    }
 
     /**
+     * Create a new component instance.
+     *
      * @throws Exception
      */
     public function mount(): void
     {
-        $this->tag = $this->tag ?? $this->defaultTag;
-        $this->data = Alert::taggedModal($this->tag)?->toArray() ?? [];
-
-        if (empty($this->data)) {
-            $this->skipRender();
-        }
+        $this->resolve($this->tag);
     }
 
     #[On('refresh-alert-modal')]
-    public function refresh(string $tag, array $data): void
+    public function refresh(string $tag, array $alerts): void
     {
-        if ($this->tag !== $tag) {
+        if ($tag !== $this->tag) {
             return;
         }
 
-        $this->data = $data;
+        $this->resolve($tag, array_values($alerts));
         $this->dispatch('open-alert-modal');
     }
 
-    /**
-     * Merge and convert array attributes to HTML string attributes.
-     */
-    public function actionAttributes(array $attributes = []): string
-    {
-//        $button = config('alert.tailwind.classes.buttons.primary');
-        $buttonAttributes = config('alert.tailwind.attributes.buttons.action');
-        $buttonAttributes['class'] = 'modal-action-button';
-
-        $newAttributes = array_merge(
-            $buttonAttributes,
-            $attributes
-        );
-
-        return Attribute::toString($newAttributes);
-    }
-
-    /**
-     * Merge and convert array attributes to HTML string attributes.
-     */
-    public function cancelAttributes(array $attributes = []): string
-    {
-//        $button = config('alert.tailwind.classes.buttons.secondary');
-        $buttonAttributes = config('alert.tailwind.attributes.buttons.cancel');
-        $buttonAttributes['class'] = 'modal-cancel-button';
-
-        $newAttributes = array_merge(
-            $buttonAttributes,
-            $attributes
-        );
-
-        return Attribute::toString($newAttributes);
-    }
-
-    /**
-     * Merge and convert array attributes to HTML string attributes.
-     */
-    public function actionLinkAttributes(array $attributes = []): string
-    {
-//        $button = config('alert.tailwind.classes.buttons.primary');
-        $linkAttributes = config('alert.tailwind.attributes.links.action');
-        $linkAttributes['class'] = 'modal-action-button';
-
-        $newAttributes = array_merge(
-            $linkAttributes,
-            $attributes
-        );
-
-        return Attribute::toString($newAttributes);
-    }
-
-    /**
-     * Merge and convert array attributes to HTML string attributes.
-     */
-    public function cancelLinkAttributes(array $attributes = []): string
-    {
-//        $button = config('alert.tailwind.classes.buttons.secondary');
-        $linkAttributes = config('alert.tailwind.attributes.links.cancel');
-        $linkAttributes['class'] = 'modal-cancel-button';;
-
-        $newAttributes = array_merge(
-            $linkAttributes,
-            $attributes
-        );
-
-        return Attribute::toString($newAttributes);
-    }
-
     /**
      * Get the view / contents that represent the component.
      */
@@ -129,5 +84,4 @@ public function render(): View
     {
         return view('alert::themes.tailwind.components.modal');
     }
-
 }
diff --git a/src/Themes/Tailwind/Components/Notify.php b/src/Themes/Tailwind/Components/Notify.php
index aa2beee5..65beaa18 100644
--- a/src/Themes/Tailwind/Components/Notify.php
+++ b/src/Themes/Tailwind/Components/Notify.php
@@ -7,12 +7,12 @@
 use Exception;
 use Illuminate\Contracts\View\View;
 use Livewire\Attributes\On;
-use Livewire\Component;
+use Digitlimit\Alert\Themes\Tailwind\AbstractComponent;
 
 /**
  * Class Notify
  */
-class Notify extends Component implements LivewireInterface
+class Notify extends AbstractComponent implements LivewireInterface
 {
     /**
      * The alert tag.
@@ -20,16 +20,40 @@ class Notify extends Component implements LivewireInterface
     public string $tag = Alert::DEFAULT_TAG;
 
     /**
-     * The alert
+     * The alerts
      */
-    public array $data = [];
+    public array $alerts = [];
 
     /**
-     * Set data for the alert.
+     * Set the alerts.
      */
-    public function setUp(array $data): void
+    public function resolve(string $tag, array $alerts = []): void
     {
-        $this->data = $data;
+        $alerts = !empty($alerts)
+            ? Alert::fromArrays($alerts)
+            : Alert::getNotify($tag);
+
+        $this->alerts = $alerts
+            ->filter(function ($alert) {
+                return $alert->getTag() === $this->tag;
+            })
+            ->values()
+            ->map(function ($alert) {
+                $alert->forget();
+                $notify = $alert->toArray();
+
+                $notify['action_button'] = $alert->actionButton()?->toArray();
+                $notify['cancel_button'] = $alert->cancelButton()?->toArray();
+                $notify['custom_buttons'] = $alert->customButtons()
+                    ->map(fn ($button) => $button->toArray())
+                    ->toArray();
+
+                $notify['has_action_button'] = $notify['action_button'] !== null;
+                $notify['has_cancel_button'] = $notify['cancel_button'] !== null;
+                $notify['has_custom_buttons'] = count($notify['custom_buttons']);
+
+                return $notify;
+            })->toArray();
     }
 
     /**
@@ -39,25 +63,17 @@ public function setUp(array $data): void
      */
     public function mount(): void
     {
-        $data = Alert::taggedNotify($this->tag)?->toArray() ?? [];
-
-        if (empty($data)) {
-            $this->skipRender();
-
-            return;
-        }
-
-        $this->setUp($data);
+        $this->resolve($this->tag);
     }
 
     #[On('refresh-alert-notify')]
-    public function refresh(string $tag, array $data): void
+    public function refresh(string $tag, array $alerts): void
     {
-        if ($this->tag !== $tag || empty($data)) {
+        if ($tag !== $this->tag) {
             return;
         }
 
-        $this->setUp($data);
+        $this->resolve($tag, array_values($alerts));
         $this->dispatch('open-alert-notify');
     }
 
diff --git a/src/Themes/Tailwind/Components/Toastr.php b/src/Themes/Tailwind/Components/Toastr.php
new file mode 100644
index 00000000..dbb262c5
--- /dev/null
+++ b/src/Themes/Tailwind/Components/Toastr.php
@@ -0,0 +1,75 @@
+<?php
+
+namespace Digitlimit\Alert\Themes\Tailwind\Components;
+
+use Digitlimit\Alert\Alert;
+use Digitlimit\Alert\Contracts\LivewireInterface;
+use Exception;
+use Illuminate\Contracts\View\View;
+use Livewire\Attributes\On;
+use Digitlimit\Alert\Themes\Tailwind\AbstractComponent;
+
+/**
+ * Class Toastr
+ */
+class Toastr extends AbstractComponent implements LivewireInterface
+{
+    /**
+     * The alert tag.
+     */
+    public string $tag = Alert::DEFAULT_TAG;
+
+    /**
+     * The alerts
+     */
+    public array $alerts = [];
+
+    /**
+     * Set the alerts.
+     */
+    public function resolve(string $tag, array $alerts = []): void
+    {
+        $alerts = !empty($alerts)
+            ? Alert::fromArrays($alerts)
+            : Alert::getToastr($tag);
+
+        $this->alerts = $alerts
+            ->filter(function ($alert) {
+                return $alert->getTag() === $this->tag;
+            })
+            ->values()
+            ->map(function ($alert) {
+                $alert->forget();
+                return $alert->toArray();
+            })->toArray();
+    }
+
+    /**
+     * Create a new component instance.
+     *
+     * @throws Exception
+     */
+    public function mount(): void
+    {
+        $this->resolve($this->tag);
+    }
+
+    #[On('refresh-alert-toastr')]
+    public function refresh(string $tag, array $alerts): void
+    {
+        if ($tag !== $this->tag) {
+            return;
+        }
+
+        $this->resolve($tag, array_values($alerts));
+        $this->dispatch('open-alert-toastr');
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('alert::themes.tailwind.components.toastr');
+    }
+}
diff --git a/src/Themes/Tailwind/Tailwind.php b/src/Themes/Tailwind/Tailwind.php
index 70c6a408..bd68953a 100644
--- a/src/Themes/Tailwind/Tailwind.php
+++ b/src/Themes/Tailwind/Tailwind.php
@@ -9,6 +9,7 @@
 use Digitlimit\Alert\Foundation\AbstractTheme;
 use Digitlimit\Alert\Foundation\AlertInterface;
 use Digitlimit\Alert\Helpers\SessionKey;
+use Illuminate\Support\Collection;
 use Livewire\Component;
 use Livewire\Livewire;
 
@@ -59,44 +60,23 @@ public static function dehydrate(): void
                 return false;
             }
 
-            foreach (Alert::all() as $alerts) {
+            $all = Alert::all();
 
-                if (empty($alerts)) {
-                    continue;
-                }
-
-                foreach ($alerts as $tag => $alert) {
-
-                    // For single alert example message, modal
-                    if (! is_array($alert)) {
-                        self::dispatch($component, $alert);
+            foreach ($all as $type => $alerts) {
+                $event = 'refresh-alert-' . $type;
 
+                foreach($alerts as $tag => $tagAlerts) {
+                    if (empty($tagAlerts)) {
                         continue;
                     }
-                    // For multiple alerts, usually from a field
-                    foreach ($alert as $field) {
-                        self::dispatch($component, $field);
-                    }
+
+                    $tagAlerts = collect($tagAlerts)->map(function ($alert) {
+                        return $alert->toArray();
+                    });
+
+                    $component->dispatch($event, $tag, $tagAlerts);
                 }
             }
-
-            return $component;
         });
     }
-
-    /**
-     * Dispatch the alert to the component
-     */
-    protected static function dispatch(Component $component, AlertInterface|Taggable $alert): Component
-    {
-        $event = 'refresh-alert-'.$alert->key();
-
-        $component->dispatch(
-            $event,
-            $alert->getTag(),
-            $alert->toArray()
-        );
-
-        return $component;
-    }
 }
diff --git a/src/Traits/WithButton.php b/src/Traits/WithButton.php
index 2b6b7ac5..281e2552 100644
--- a/src/Traits/WithButton.php
+++ b/src/Traits/WithButton.php
@@ -12,6 +12,59 @@ trait WithButton
      */
     protected Collection $buttons;
 
+    /**
+     * Get the action button.
+     */
+    public function actionButton(): ?Button
+    {
+        return $this->getButtons()
+            ->filter(fn($button) => $button->getName() === 'action')
+            ->first();
+    }
+
+    /**
+     * Get the cancel button.
+     */
+    public function cancelButton(): ?Button
+    {
+        return $this->getButtons()
+            ->filter(fn($button) => $button->getName() === 'cancel')
+            ->first();
+    }
+
+    /**
+     * Get the custom buttons.
+     */
+    public function customButtons(): Collection
+    {
+        return $this->getButtons()
+            ->filter(fn($button) => !in_array($button->getName(), ['action', 'cancel']));
+    }
+
+    /**
+     * Determine if the alert has buttons.
+     */
+    public function hasActionButton(): bool
+    {
+        return $this->actionButton() !== null;
+    }
+
+    /**
+     * Determine if the alert has buttons.
+     */
+    public function hasCancelButton(): bool
+    {
+        return $this->cancelButton() !== null;
+    }
+
+    /**
+     * Determine if the alert has custom buttons.
+     */
+    public function hasCustomButtons(): bool
+    {
+        return $this->customButtons()->count() > 0;
+    }
+
     /**
      * Add a button to the alert.
      */
@@ -40,7 +93,7 @@ public function buttons(array $buttons): self
         foreach ($buttons as $button) {
             $this->button(
                 $button['name'],
-                $button['label'] ?? null,
+                $button['label'],
                 $button['link'] ?? null,
                 $button['attributes'] ?? []
             );
@@ -70,4 +123,14 @@ public function buttonsToArray(): array
             ->map(fn ($button) => $button->toArray())
             ->toArray();
     }
+
+    /**
+     * Execute a callback and return the instance.
+     */
+    public function tap(callable $callback)
+    {
+        $callback($this);
+
+        return $this;
+    }
 }
diff --git a/src/Types/Field.php b/src/Types/Field.php
index bbcf47ad..eacd1935 100644
--- a/src/Types/Field.php
+++ b/src/Types/Field.php
@@ -4,7 +4,7 @@
 
 use Digitlimit\Alert\Contracts\HasMessage;
 use Digitlimit\Alert\Contracts\HasName;
-use Digitlimit\Alert\Contracts\HasTitle;
+use Digitlimit\Alert\Contracts\HasTimeout;
 use Digitlimit\Alert\Contracts\Levelable;
 use Digitlimit\Alert\Contracts\Taggable;
 use Digitlimit\Alert\Events\Field\Flashed;
@@ -17,13 +17,13 @@
 /**
  * Field alert class.
  */
-class Field extends AbstractAlert implements AlertInterface, HasMessage, HasName, HasTitle, Levelable, Taggable
+class Field extends AbstractAlert implements AlertInterface, HasMessage, HasName, Levelable, Taggable, HasTimeout
 {
     use Traits\Levelable;
     use Traits\Taggable;
     use Traits\WithMessage;
     use Traits\WithName;
-    use Traits\WithTitle;
+    use Traits\WithTimeout;
 
     /**
      * The default level of the alert.
@@ -37,6 +37,7 @@ public function __construct(
         protected string $name,
         protected string $message
     ) {
+        $this->timeout(0);
         parent::__construct();
     }
 
@@ -68,14 +69,6 @@ public function getTag(): string
         return $this->tag;
     }
 
-    /**
-     * Get the named tag for the field alert.
-     */
-    public function getNamedTag(): string
-    {
-        return $this->tag.'.'.$this->getName();
-    }
-
     /**
      * Get the field alert as an array.
      */
@@ -87,8 +80,8 @@ public function toArray(): array
             'tag' => $this->getTag(),
             'named_tag' => $this->getNamedTag(),
             'level' => $this->getLevel(),
-            'title' => $this->getTitle(),
             'message' => $this->getMessage(),
+            'timeout' => $this->getTimeout(),
         ]);
     }
 
@@ -103,13 +96,17 @@ public static function fill(array $alert): AlertInterface
         $field->tag($alert['tag']);
         $field->level($alert['level']);
 
-        if ($alert['title']) {
-            $field->title($alert['title']);
-        }
-
         return $field;
     }
 
+    /**
+     * Get the named tag for the field alert.
+     */
+    public function getNamedTag(): string
+    {
+        return $this->tag . '.' . $this->getName();
+    }
+
     /**
      * Flash field instance to store.
      */
diff --git a/src/Types/Message.php b/src/Types/Message.php
index 7f644e29..2f1e8647 100644
--- a/src/Types/Message.php
+++ b/src/Types/Message.php
@@ -6,6 +6,7 @@
 use Digitlimit\Alert\Contracts\HasMessage;
 use Digitlimit\Alert\Contracts\HasSticky;
 use Digitlimit\Alert\Contracts\HasTitle;
+use Digitlimit\Alert\Contracts\HasTimeout;
 use Digitlimit\Alert\Contracts\Levelable;
 use Digitlimit\Alert\Contracts\Taggable;
 use Digitlimit\Alert\Events\Message\Flashed;
@@ -16,7 +17,7 @@
 /**
  * Message alert class.
  */
-class Message extends AbstractAlert implements AlertInterface, Closable, HasMessage, HasSticky, HasTitle, Levelable, Taggable
+class Message extends AbstractAlert implements AlertInterface, Closable, HasMessage, HasSticky, HasTimeout, HasTitle, Levelable, Taggable
 {
     use Traits\Closable;
     use Traits\Levelable;
@@ -24,6 +25,7 @@ class Message extends AbstractAlert implements AlertInterface, Closable, HasMess
     use Traits\WithMessage;
     use Traits\WithSticky;
     use Traits\WithTitle;
+    use Traits\WithTimeout;
 
     /**
      * The default level of the alert.
@@ -38,6 +40,7 @@ class Message extends AbstractAlert implements AlertInterface, Closable, HasMess
     public function __construct(
         protected string $message
     ) {
+        $this->timeout(0);
         parent::__construct();
     }
 
@@ -72,6 +75,7 @@ public function toArray(): array
             'level' => $this->getLevel(),
             'message' => $this->getMessage(),
             'title' => $this->getTitle(),
+            'timeout' => $this->getTimeout(),
             'closable' => $this->isClosable(),
             'sticky' => $this->isSticky(),
         ]);
@@ -90,6 +94,10 @@ public static function fill(array $alert): AlertInterface
         $message->closable($alert['closable'] ?? false);
         $message->sticky($alert['sticky'] ?? false);
 
+        if (isset($alert['timeout'])) {
+            $message->timeout($alert['timeout']);
+        }
+
         if ($alert['title']) {
             $message->title($alert['title']);
         }
diff --git a/src/Types/Modal.php b/src/Types/Modal.php
index 2ee82bc1..5368b6a7 100644
--- a/src/Types/Modal.php
+++ b/src/Types/Modal.php
@@ -5,6 +5,7 @@
 use Digitlimit\Alert\Contracts\Closable;
 use Digitlimit\Alert\Contracts\HasButton;
 use Digitlimit\Alert\Contracts\HasMessage;
+use Digitlimit\Alert\Contracts\HasTimeout;
 use Digitlimit\Alert\Contracts\HasTitle;
 use Digitlimit\Alert\Contracts\HasView;
 use Digitlimit\Alert\Contracts\Levelable;
@@ -21,7 +22,7 @@
 /**
  * Modal alert class.
  */
-class Modal extends AbstractAlert implements AlertInterface, Closable, HasButton, HasMessage, HasTitle, HasView, Levelable, Scrollable, Sizable, Taggable
+class Modal extends AbstractAlert implements AlertInterface, Closable, HasButton, HasMessage, HasTimeout, HasTitle, HasView, Levelable, Scrollable, Sizable, Taggable
 {
     use Traits\Closable;
     use Traits\Levelable;
@@ -33,6 +34,7 @@ class Modal extends AbstractAlert implements AlertInterface, Closable, HasButton
     use Traits\WithCancelButton;
     use Traits\WithMessage;
     use Traits\WithTitle;
+    use Traits\WithTimeout;
     use Traits\WithView;
 
     /**
@@ -66,10 +68,11 @@ public function toArray(): array
             'message' => $this->getMessage(),
             'tag' => $this->getTag(),
             'size' => $this->getSize(),
+            'timeout' => $this->getTimeout(),
             'scrollable' => $this->isScrollable(),
             'closable' => $this->isClosable(),
-            'buttons' => $this->buttonsToArray(),
             'view' => $this->getView(),
+            'buttons' => $this->buttonsToArray(),
         ]);
     }
 
@@ -84,22 +87,15 @@ public static function fill(array $alert): AlertInterface
         $modal = new static($alert['message']);
 
         $modal->id($alert['id']);
-        $modal->size($alert['size']);
-        $modal->level($alert['level']);
         $modal->scrollable($alert['scrollable'] ?? false);
         $modal->closable($alert['closable'] ?? false);
         $modal->buttons($alert['buttons'] ?? []);
 
-        if (isset($alert['tag']) && $alert['tag']) {
-            $modal->tag($alert['tag']);
-        }
-
-        if (isset($alert['title']) && $alert['title']) {
-            $modal->title($alert['title']);
-        }
-
-        if (isset($alert['view']) && $alert['view']) {
-            $modal->setView($alert['view']);
+        foreach (['tag', 'size', 'level', 'title', 'view'] as $property) {
+            if (!empty($alert[$property])) {
+                $method = $property === 'view' ? 'setView' : $property;
+                $modal->$method($alert[$property]);
+            }
         }
 
         return $modal;
diff --git a/src/Types/Notify.php b/src/Types/Notify.php
index 3fa2c941..079e5725 100644
--- a/src/Types/Notify.php
+++ b/src/Types/Notify.php
@@ -3,6 +3,7 @@
 namespace Digitlimit\Alert\Types;
 
 use Digitlimit\Alert\Contracts\Closable;
+use Digitlimit\Alert\Contracts\HasButton;
 use Digitlimit\Alert\Contracts\HasMessage;
 use Digitlimit\Alert\Contracts\HasTimeout;
 use Digitlimit\Alert\Contracts\HasTitle;
@@ -12,13 +13,15 @@
 use Digitlimit\Alert\Events\Notify\Flashed;
 use Digitlimit\Alert\Foundation\AbstractAlert;
 use Digitlimit\Alert\Foundation\AlertInterface;
+use Digitlimit\Alert\Helpers\SessionKey;
 use Digitlimit\Alert\Traits;
 use Exception;
+use Illuminate\Support\Facades\Session;
 
 /**
  * Notify alert class.
  */
-class Notify extends AbstractAlert implements AlertInterface, Closable, HasMessage, HasTimeout, HasTitle, Levelable, Positionable, Taggable
+class Notify extends AbstractAlert implements AlertInterface, Closable, HasButton, HasMessage, HasTimeout, HasTitle, Levelable, Positionable, Taggable
 {
     use Traits\Closable;
     use Traits\Levelable;
@@ -27,6 +30,9 @@ class Notify extends AbstractAlert implements AlertInterface, Closable, HasMessa
     use Traits\WithMessage;
     use Traits\WithTimeout;
     use Traits\WithTitle;
+    use Traits\WithActionButton;
+    use Traits\WithButton;
+    use Traits\WithCancelButton;
 
     protected string $defaultLevel = 'info';
 
@@ -72,9 +78,11 @@ public function toArray(): array
             'timeout' => $this->getTimeout(),
             'message' => $this->getMessage(),
             'tag' => $this->getTag(),
+            'id_tag' => $this->getIdTag(),
             'level' => $this->getLevel(),
             'position' => $this->getPosition(),
             'closable' => $this->isClosable(),
+            'buttons' => $this->buttonsToArray(),
         ]);
     }
 
@@ -97,17 +105,36 @@ public static function fill(array $alert): AlertInterface
         $notify->position($alert['position']);
         $notify->timeout($alert['timeout']);
         $notify->closable($alert['closable']);
+        $notify->buttons($alert['buttons'] ?? []);
 
         return $notify;
     }
 
+    /**
+     * Get the named tag for the field alert.
+     */
+    public function getIdTag(): string
+    {
+        return $this->tag
+            . '.'
+            . $this->getId();
+    }
+
     /**
      * Flash field instance to store.
      */
     public function flash(): void
     {
-        parent::flash();
+        if (empty($this->id) || empty($this->message)) {
+            return;
+        }
+
+        $sessionKey = SessionKey::key(
+            $this->key(),
+            $this->getIdTag()
+        );
 
+        Session::flash($sessionKey, $this);
         Flashed::dispatch($this);
     }
 }
diff --git a/src/Types/Toastr.php b/src/Types/Toastr.php
new file mode 100644
index 00000000..2b0de966
--- /dev/null
+++ b/src/Types/Toastr.php
@@ -0,0 +1,113 @@
+<?php
+
+namespace Digitlimit\Alert\Types;
+
+use Digitlimit\Alert\Contracts\Closable;
+use Digitlimit\Alert\Contracts\HasMessage;
+use Digitlimit\Alert\Contracts\HasTimeout;
+use Digitlimit\Alert\Contracts\HasTitle;
+use Digitlimit\Alert\Contracts\Levelable;
+use Digitlimit\Alert\Contracts\Positionable;
+use Digitlimit\Alert\Contracts\Taggable;
+use Digitlimit\Alert\Events\Toastr\Flashed;
+use Digitlimit\Alert\Foundation\AbstractAlert;
+use Digitlimit\Alert\Foundation\AlertInterface;
+use Digitlimit\Alert\Traits;
+use Exception;
+
+/**
+ * Toastr alert class.
+ */
+class Toastr extends AbstractAlert implements AlertInterface, Closable, HasMessage, HasTimeout, HasTitle, Levelable, Positionable, Taggable
+{
+    use Traits\Closable;
+    use Traits\Levelable;
+    use Traits\Positionable;
+    use Traits\Taggable;
+    use Traits\WithMessage;
+    use Traits\WithTimeout;
+    use Traits\WithTitle;
+
+    protected string $defaultLevel = 'info';
+
+    /**
+     * Create a new toastr alert instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        protected string $message
+    ) {
+        parent::__construct();
+    }
+
+    /**
+     * Fetch the alert level.
+     */
+    public function getLevel(): string
+    {
+        if (empty($this->level)) {
+            return $this->defaultLevel;
+        }
+
+        return $this->level;
+    }
+
+    /**
+     * Message store key for the toastr alert.
+     */
+    public function key(): string
+    {
+        return 'toastr';
+    }
+
+    /**
+     * Convert the toastr alert to an array.
+     */
+    public function toArray(): array
+    {
+        return array_merge(parent::toArray(), [
+            'type' => $this->key(),
+            'title' => $this->getTitle(),
+            'timeout' => $this->getTimeout(),
+            'message' => $this->getMessage(),
+            'tag' => $this->getTag(),
+            'level' => $this->getLevel(),
+            'position' => $this->getPosition(),
+            'closable' => $this->isClosable(),
+        ]);
+    }
+
+    /**
+     * Fill the notification alert from an array.
+     *
+     * @throws Exception
+     */
+    public static function fill(array $alert): AlertInterface
+    {
+        $toastr = new static($alert['message']);
+        $toastr->id($alert['id']);
+
+        if ($alert['title']) {
+            $toastr->title($alert['title']);
+        }
+
+        $toastr->tag($alert['tag']);
+        $toastr->level($alert['level']);
+        $toastr->position($alert['position']);
+        $toastr->timeout($alert['timeout']);
+        $toastr->closable($alert['closable']);
+
+        return $toastr;
+    }
+
+    /**
+     * Flash field instance to store.
+     */
+    public function flash(): void
+    {
+        parent::flash();
+
+        Flashed::dispatch($this);
+    }
+}
diff --git a/tests/Feature/.gitkeep b/tests/Feature/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/tests/Unit/Component/ButtonTest.php b/tests/Unit/Component/ButtonTest.php
new file mode 100644
index 00000000..56b0a960
--- /dev/null
+++ b/tests/Unit/Component/ButtonTest.php
@@ -0,0 +1,88 @@
+<?php
+
+use Digitlimit\Alert\Component\Button;
+
+it('can instantiate a button and get its default values', function () {
+    $button = new Button('submit', 'Submit');
+
+    expect($button->getName())->toBe('submit')
+        ->and($button->getLabel())->toBe('Submit')
+        ->and($button->getLink())->toBeNull()
+        ->and($button->getAttributes())->toBe([])
+        ->and($button->isLink())->toBeFalse()
+        ->and($button->isAction())->toBeFalse()
+        ->and($button->isCancel())->toBeFalse();
+})->group('buttons', 'defaults');
+
+it('can set name, label, link, and attributes fluently', function () {
+    $button = new Button('submit', 'Submit');
+
+    $button->name('cancel')
+        ->label('Cancel Button')
+        ->link('/cancel')
+        ->attributes(['class' => 'btn-cancel']);
+
+    expect($button->getName())->toBe('cancel')
+        ->and($button->getLabel())->toBe('Cancel Button')
+        ->and($button->getLink())->toBe('/cancel')
+        ->and($button->getAttributes())->toBe(['class' => 'btn-cancel'])
+        ->and($button->isLink())->toBeTrue()
+        ->and($button->isCancel())->toBeTrue();
+})->group('buttons', 'setters');
+
+it('can detect an action button', function () {
+    $button = new Button('submit', 'Submit');
+    $button->name('action');
+
+    expect($button->isAction())->toBeTrue();
+})->group('buttons', 'logic');
+
+it('can convert the button to an array', function () {
+    $button = new Button('submit', 'Submit Form', '/submit', ['class' => 'btn-submit']);
+
+    $expected = [
+        'id' => $button->getId(),
+        'name' => 'submit',
+        'label' => 'Submit Form',
+        'link' => '/submit',
+        'attributes' => ['class' => 'btn-submit'],
+    ];
+
+    expect($button->toArray())->toBe($expected);
+})->group('buttons', 'to-array');
+
+it('can fill a button from an array', function () {
+    $data = [
+        'name' => 'delete',
+        'label' => 'Delete Item',
+        'link' => '/delete',
+        'attributes' => ['id' => 'btn-123', 'class' => 'btn-danger'],
+    ];
+
+    $button = Button::fill($data);
+
+    expect($button->getId())->toBe('btn-123')
+        ->and($button->getName())->toBe('delete')
+        ->and($button->getLabel())->toBe('Delete Item')
+        ->and($button->getLink())->toBe('/delete')
+        ->and($button->getAttributes())->toBe($data['attributes']);
+})->group('buttons', 'fill');
+
+it('can set and get a custom id', function () {
+    $button = new Button('submit', 'Submit');
+    $button->id('custom-id');
+
+    expect($button->getId())->toBe('custom-id')
+        ->and($button->getAttributes()['id'])->toBe('custom-id');
+})->group('buttons', 'id');
+
+it('can tap into the button and modify it', function () {
+    $button = new Button('submit', 'Submit');
+
+    $button->tap(function (Button $btn) {
+        $btn->label('Tapped Submit')->link('/tapped');
+    });
+
+    expect($button->getLabel())->toBe('Tapped Submit')
+        ->and($button->getLink())->toBe('/tapped');
+})->group('buttons', 'tap');
diff --git a/tests/Unit/Helpers/SessionKeyTest.php b/tests/Unit/Helpers/SessionKeyTest.php
index 972e3270..3f2d7b7c 100644
--- a/tests/Unit/Helpers/SessionKeyTest.php
+++ b/tests/Unit/Helpers/SessionKeyTest.php
@@ -3,8 +3,8 @@
 use Digitlimit\Alert\Helpers\SessionKey;
 
 it('can generate a session key from tag name and alert type', function () {
-    $key = SessionKey::key('notify', 'contact-form-1');
+    $key = SessionKey::key('toastr', 'contact-form-1');
 
     expect($key)
-        ->toEqual(SessionKey::MAIN_KEY.'.notify.contact-form-1');
+        ->toEqual(SessionKey::MAIN_KEY.'.toastr.contact-form-1');
 })->group('helpers', 'helpers-session-key');
diff --git a/tests/Unit/Icons/ErrorTest.php b/tests/Unit/Icons/ErrorTest.php
new file mode 100644
index 00000000..6a3d2877
--- /dev/null
+++ b/tests/Unit/Icons/ErrorTest.php
@@ -0,0 +1,21 @@
+<?php
+
+use Digitlimit\Alert\Icons\Error;
+use Illuminate\Support\Facades\View;
+
+it('is circled by default', function () {
+    $component = new Error();
+
+    expect($component->isCircled())->toBeTrue();
+})->group('icons', 'error-icon');
+
+it('renders the correct view', function () {
+    View::shouldReceive('make')
+        ->once()
+        ->with('alert::icons.error', [], [])
+        ->andReturn('rendered-view');
+
+    $component = new Error();
+
+    expect($component->render())->toBe('rendered-view');
+})->group('icons', 'error-icon', 'view');
diff --git a/tests/Unit/Icons/InfoTest.php b/tests/Unit/Icons/InfoTest.php
new file mode 100644
index 00000000..8af1f11e
--- /dev/null
+++ b/tests/Unit/Icons/InfoTest.php
@@ -0,0 +1,21 @@
+<?php
+
+use Digitlimit\Alert\Icons\Info;
+use Illuminate\Support\Facades\View;
+
+it('is circled by default', function () {
+    $component = new Info();
+
+    expect($component->isCircled())->toBeTrue();
+})->group('icons', 'info-icon');
+
+it('renders the correct view', function () {
+    View::shouldReceive('make')
+        ->once()
+        ->with('alert::icons.info', [], [])
+        ->andReturn('rendered-view');
+
+    $component = new Info();
+
+    expect($component->render())->toBe('rendered-view');
+})->group('icons', 'info-icon', 'view');
diff --git a/tests/Unit/Icons/SuccessTest.php b/tests/Unit/Icons/SuccessTest.php
new file mode 100644
index 00000000..1f894c5e
--- /dev/null
+++ b/tests/Unit/Icons/SuccessTest.php
@@ -0,0 +1,21 @@
+<?php
+
+use Digitlimit\Alert\Icons\Success;
+use Illuminate\Support\Facades\View;
+
+it('is circled by default', function () {
+    $component = new Success();
+
+    expect($component->isCircled())->toBeTrue();
+})->group('icons', 'success-icon');
+
+it('renders the correct view', function () {
+    View::shouldReceive('make')
+        ->once()
+        ->with('alert::icons.success', [], [])
+        ->andReturn('rendered-view');
+
+    $component = new Success();
+
+    expect($component->render())->toBe('rendered-view');
+})->group('icons', 'success-icon', 'view');
diff --git a/tests/Unit/Icons/WarningTest.php b/tests/Unit/Icons/WarningTest.php
new file mode 100644
index 00000000..396b88c3
--- /dev/null
+++ b/tests/Unit/Icons/WarningTest.php
@@ -0,0 +1,21 @@
+<?php
+
+use Digitlimit\Alert\Icons\Warning;
+use Illuminate\Support\Facades\View;
+
+it('is circled by default', function () {
+    $component = new Warning();
+
+    expect($component->isCircled())->toBeTrue();
+})->group('icons', 'warning-icon');
+
+it('renders the correct view', function () {
+    View::shouldReceive('make')
+        ->once()
+        ->with('alert::icons.warning', [], [])
+        ->andReturn('rendered-view');
+
+    $component = new Warning();
+
+    expect($component->render())->toBe('rendered-view');
+})->group('icons', 'warning-icon', 'view');
diff --git a/tests/Unit/Themes/Tailwind/Components/FieldTest.php b/tests/Unit/Themes/Tailwind/Components/FieldTest.php
new file mode 100644
index 00000000..49ecce07
--- /dev/null
+++ b/tests/Unit/Themes/Tailwind/Components/FieldTest.php
@@ -0,0 +1,10 @@
+<?php
+
+use Digitlimit\Alert\Themes\Tailwind\Components\Field;
+use Livewire\Livewire;
+
+it('mounts and initializes correctly', function () {
+    Livewire::test(Field::class, ['for' => 'test-field'])
+        ->assertSet('name', 'test-field')
+        ->assertSet('alert', []);
+})->group('tailwind', 'components', 'field');
\ No newline at end of file
diff --git a/tests/Unit/Types/FieldTest.php b/tests/Unit/Types/FieldTest.php
new file mode 100644
index 00000000..c012544a
--- /dev/null
+++ b/tests/Unit/Types/FieldTest.php
@@ -0,0 +1,87 @@
+<?php
+
+use Digitlimit\Alert\Types\Field;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Session;
+use Digitlimit\Alert\Events\Field\Flashed;
+use Digitlimit\Alert\Alert;
+
+beforeEach(function () {
+    Session::flush(); // Ensure clean session state
+});
+
+it('can create a field alert and get its properties', function () {
+    $alert = new Field('email', 'Email is required');
+
+    expect($alert->getName())->toBe('email')
+        ->and($alert->getMessage())->toBe('Email is required')
+        ->and($alert->getLevel())->toBe('error') // default level
+        ->and($alert->key())->toBe('field')
+        ->and($alert->getTag())->toBe('default')
+        ->and($alert->getNamedTag())->toBe('default.email');
+})->group('field', 'create');
+
+it('can convert the field alert to array', function () {
+    $alert = new Field('email', 'Invalid email');
+    $alert->level('warning')->tag('user');
+
+    $array = $alert->toArray();
+
+    expect($array)->toMatchArray([
+        'id' => $alert->getId(),
+        'type' => 'field',
+        'name' => 'email',
+        'tag' => 'user',
+        'named_tag' => 'user.email',
+        'level' => 'warning',
+        'message' => 'Invalid email',
+        'timeout' => 0,
+    ]);
+})->group('field', 'toArray');
+
+it('can fill a field alert from array', function () {
+    $data = [
+        'id' => 'alert-id',
+        'name' => 'password',
+        'message' => 'Password must be at least 6 characters',
+        'tag' => 'auth',
+        'level' => 'info',
+    ];
+
+    $alert = Field::fill($data);
+
+    expect($alert->getId())->toBe('alert-id')
+        ->and($alert->getName())->toBe('password')
+        ->and($alert->getMessage())->toBe('Password must be at least 6 characters')
+        ->and($alert->getTag())->toBe('auth')
+        ->and($alert->getLevel())->toBe('info');
+})->group('field', 'fill');
+
+it('can flash the field alert to session', function () {
+    Event::fake();
+
+    $alert = new Field('username', 'Username is required');
+    $alert->tag('register');
+
+    $sessionKey = Alert::MAIN_KEY . '.field.register.username';
+
+    $alert->flash();
+
+    expect(Session::get($sessionKey))->toBeInstanceOf(Field::class)
+        ->and(Session::get($sessionKey)->getMessage())->toBe('Username is required');
+
+    Event::assertDispatched(Flashed::class, function ($event) use ($alert) {
+        return $event->alert === $alert;
+    });
+})->group('field', 'flash');
+
+it('does not flash an alert with empty name or message', function () {
+    Session::flush();
+    Event::fake();
+
+    $alert = new Field('', '');
+    $alert->flash();
+
+    expect(Session::all())->toBeEmpty();
+    Event::assertNothingDispatched();
+})->group('field', 'flash', 'empty');
diff --git a/tests/Unit/Types/MessageTest.php b/tests/Unit/Types/MessageTest.php
new file mode 100644
index 00000000..c3ef2059
--- /dev/null
+++ b/tests/Unit/Types/MessageTest.php
@@ -0,0 +1,84 @@
+<?php
+
+use Digitlimit\Alert\Types\Message;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Session;
+use Digitlimit\Alert\Events\Message\Flashed;
+use Digitlimit\Alert\Alert;
+
+beforeEach(function () {
+    Session::flush();
+});
+
+it('can create a message alert and get its default properties', function () {
+    $alert = new Message('Something happened');
+
+    expect($alert->getMessage())->toBe('Something happened')
+        ->and($alert->getLevel())->toBe('info')
+        ->and($alert->getTimeout())->toBe(0)
+        ->and($alert->getTitle())->toBeNull()
+        ->and($alert->isClosable())->toBeTrue()
+        ->and($alert->key())->toBe('message')
+        ->and($alert->getTag())->toBe('default');
+})->group('message', 'create');
+
+it('can convert the message alert to an array', function () {
+    $alert = new Message('New update available');
+
+    $alert->tag('updates')
+        ->level('success')
+        ->title('Update')
+        ->timeout(10)
+        ->closable(true);
+
+    $array = $alert->toArray();
+
+    expect($array)->toMatchArray([
+        'id' => $alert->getId(),
+        'type' => 'message',
+        'tag' => 'updates',
+        'level' => 'success',
+        'message' => 'New update available',
+        'title' => 'Update',
+        'timeout' => 10,
+        'closable' => true,
+    ]);
+})->group('message', 'toArray');
+
+it('can fill a message alert from array', function () {
+    $data = [
+        'id' => 'alert-msg-1',
+        'tag' => 'dashboard',
+        'level' => 'warning',
+        'message' => 'Please verify your email',
+        'title' => 'Verification Needed',
+        'closable' => true,
+    ];
+
+    $alert = Message::fill($data);
+
+    expect($alert->getId())->toBe('alert-msg-1')
+        ->and($alert->getTag())->toBe('dashboard')
+        ->and($alert->getLevel())->toBe('warning')
+        ->and($alert->getMessage())->toBe('Please verify your email')
+        ->and($alert->getTitle())->toBe('Verification Needed')
+        ->and($alert->isClosable())->toBeTrue();
+
+})->group('message', 'fill');
+
+it('can flash a normal message to session and dispatch event', function () {
+    Event::fake();
+
+    $alert = new Message('Welcome to the app');
+    $alert->tag('intro');
+    $alert->flash();
+
+    $sessionKey = Alert::MAIN_KEY . '.message.default.' . $alert->getId();
+
+    expect(Session::get($sessionKey))->toBeInstanceOf(Message::class)
+        ->and(Session::get($sessionKey)->getMessage())->toBe('Welcome to the app');
+
+    Event::assertDispatched(Flashed::class, function ($event) use ($alert) {
+        return $event->alert === $alert;
+    });
+})->group('message', 'flash');
diff --git a/tests/Unit/Types/ModalTest.php b/tests/Unit/Types/ModalTest.php
new file mode 100644
index 00000000..110c589b
--- /dev/null
+++ b/tests/Unit/Types/ModalTest.php
@@ -0,0 +1,123 @@
+<?php
+
+use Digitlimit\Alert\Types\Modal;
+use Digitlimit\Alert\Events\Modal\Flashed;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Session;
+use Digitlimit\Alert\Helpers\SessionKey;
+
+beforeEach(function () {
+    Session::flush();
+});
+
+it('can create a modal alert and get its default properties', function () {
+    $alert = new Modal('This is a modal message');
+
+    expect($alert->getMessage())->toBe('This is a modal message')
+        ->and($alert->getLevel())->toBe('') // default is empty
+        ->and($alert->getTimeout())->toBe(2000)
+        ->and($alert->getTag())->toBe('default')
+        ->and($alert->getSize())->toBe('medium')
+        ->and($alert->getTitle())->toBeNull()
+        ->and($alert->getView())->toBeNull()
+        ->and($alert->isScrollable())->toBeTrue()
+        ->and($alert->isClosable())->toBeTrue()
+        ->and($alert->buttonsToArray())->toBe([])
+        ->and($alert->key())->toBe('modal');
+})->group('modal', 'create');
+
+it('can convert the modal alert to array', function () {
+    $alert = new Modal('Modal Message');
+
+    $alert->tag('confirm')
+        ->level('info')
+        ->timeout(30)
+        ->title('Confirm Action')
+        ->scrollable(true)
+        ->closable(true)
+        ->setView('modals.confirm')
+        ->buttons([
+            ['name' => 'cancel', 'label' => 'Cancel'],
+            ['name' => 'confirm', 'label' => 'Yes, Confirm']
+        ]);
+
+    $array = $alert->toArray();
+
+    expect($array)->toMatchArray([
+        "id" => $alert->getId(),
+        "type" => "modal",
+        "level" => "info",
+        "title" => "Confirm Action",
+        "message" => "Modal Message",
+        "tag" => "confirm",
+        "size" => "medium",
+        "timeout" => 30,
+        "scrollable" => true,
+        "closable" => true,
+        "view" => "modals.confirm",
+        "buttons" => [
+            [
+                "id" => $alert->cancelButton()->getId(),
+                "name" => "cancel",
+                "label" => "Cancel",
+                "link" => null,
+                "attributes" => [],
+            ],
+            [
+                "id" => $alert->customButtons()->first()->getId(),
+                "name" => "confirm",
+                "label" => "Yes, Confirm",
+                "link" => null,
+                "attributes" => []
+            ]
+        ]
+    ]);
+})->group('modal', 'toArray');
+
+it('can fill a modal alert from an array', function () {
+    $data = [
+        'id' => 'modal-123',
+        'message' => 'Do you want to continue?',
+        'tag' => 'dialog',
+        'level' => 'warning',
+        'timeout' => 15,
+        'title' => 'Continue?',
+        'scrollable' => true,
+        'closable' => true,
+        'view' => 'modals.continue',
+        'buttons' => [
+            ['name' => 'no', 'label' => 'No'],
+            ['name' => 'yes', 'label' => 'Yes']
+        ],
+    ];
+
+    $alert = Modal::fill($data);
+
+    expect($alert->getId())->toBe('modal-123')
+        ->and($alert->getMessage())->toBe('Do you want to continue?')
+        ->and($alert->getTag())->toBe('dialog')
+        ->and($alert->getLevel())->toBe('warning')
+        ->and($alert->getTitle())->toBe('Continue?')
+        ->and($alert->getView())->toBe('modals.continue')
+        ->and($alert->isScrollable())->toBeTrue()
+        ->and($alert->isClosable())->toBeTrue()
+        ->and($alert->buttonsToArray())->toHaveCount(2);
+})->group('modal', 'fill');
+//
+it('can flash the modal alert to session and dispatch event', function () {
+    Event::fake();
+
+    $alert = new Modal('Flashing modal');
+    $alert->tag('example');
+
+    $alert->flash();
+
+    $sessionKey = SessionKey::key('modal', 'example.' . $alert->getId());
+
+    expect(Session::get($sessionKey))->toBeInstanceOf(Modal::class)
+        ->and(Session::get($sessionKey)->getMessage())->toBe('Flashing modal');
+
+    Event::assertDispatched(Flashed::class, function ($event) use ($alert) {
+        return $event->alert === $alert;
+    });
+})->group('modal', 'flash');
diff --git a/tests/Unit/Types/NotifyTest.php b/tests/Unit/Types/NotifyTest.php
new file mode 100644
index 00000000..c35f724f
--- /dev/null
+++ b/tests/Unit/Types/NotifyTest.php
@@ -0,0 +1,55 @@
+<?php
+
+use Digitlimit\Alert\Types\Notify;
+use Digitlimit\Alert\Events\Notify\Flashed;
+use Illuminate\Support\Facades\Session;
+
+it('sets default level if none is provided', function () {
+    $notify = new Notify('Test message');
+    expect($notify->getLevel())->toBe('info');
+})->group('notify', 'default');
+
+it('returns correct key', function () {
+    $notify = new Notify('Test message');
+    expect($notify->key())->toBe('notify');
+})->group('notify', 'key');
+
+it('converts to array correctly', function () {
+    $notify = new Notify('Test message');
+    $notify->title('Test Title');
+    $notify->timeout(5000);
+    $notify->tag('test-tag');
+
+    $array = $notify->toArray();
+
+    expect($array)->toHaveKeys([
+        'type', 'title', 'timeout', 'message', 'tag', 'id_tag', 'level', 'position', 'closable', 'buttons'
+    ])->and($array['message'])->toBe('Test message')
+        ->and($array['title'])->toBe('Test Title')
+        ->and($array['tag'])->toBe('test-tag');
+})->group('notify', 'array');
+
+it('fills from array correctly', function () {
+    $alertData = [
+        'id' => '123',
+        'message' => 'Filled message',
+        'title' => 'Filled Title',
+        'timeout' => 5000,
+        'tag' => 'filled-tag',
+        'level' => 'warning',
+        'position' => 'top-right',
+        'closable' => true,
+        'buttons' => [],
+    ];
+
+    $notify = Notify::fill($alertData);
+
+    expect($notify->getMessage())->toBe('Filled message')
+        ->and($notify->getTitle())->toBe('Filled Title')
+        ->and($notify->getTimeout())->toBe(5000)
+        ->and($notify->getTag())->toBe('filled-tag')
+        ->and($notify->getLevel())->toBe('warning')
+        ->and($notify->getPosition())->toBe('top-right')
+        ->and($notify->isClosable())->toBeTrue();
+})->group('notify', 'fill');
+
diff --git a/tests/Unit/Types/ToastrTest.php b/tests/Unit/Types/ToastrTest.php
new file mode 100644
index 00000000..f8e46469
--- /dev/null
+++ b/tests/Unit/Types/ToastrTest.php
@@ -0,0 +1,72 @@
+<?php
+
+use Digitlimit\Alert\Types\Toastr;
+use Digitlimit\Alert\Events\Toastr\Flashed;
+use Illuminate\Support\Facades\Event;
+use Illuminate\Support\Facades\Session;
+
+it('creates a toastr alert instance', function () {
+    $toastr = new Toastr('Test message');
+
+    expect($toastr)->toBeInstanceOf(Toastr::class)
+        ->and($toastr->getMessage())->toBe('Test message')
+        ->and($toastr->getLevel())->toBe('info') // Default level
+        ->and($toastr->key())->toBe('toastr');
+})->group('alert', 'toastr');
+
+it('converts a toastr alert to array correctly', function () {
+    $toastr = new Toastr('Test message');
+    $toastr->title('Test Title')
+        ->timeout(3000)
+        ->tag('test-tag')
+        ->level('success')
+        ->position('top-right')
+        ->closable(true);
+
+    $array = $toastr->toArray();
+
+    expect($array)->toMatchArray([
+        'type' => 'toastr',
+        'title' => 'Test Title',
+        'timeout' => 3000,
+        'message' => 'Test message',
+        'tag' => 'test-tag',
+        'level' => 'success',
+        'position' => 'top-right',
+        'closable' => true,
+    ]);
+})->group('alert', 'convert', 'toastr');
+
+it('fills a toastr alert from an array', function () {
+    $alertArray = [
+        'id' => '123',
+        'message' => 'Filled message',
+        'title' => 'Filled Title',
+        'timeout' => 5000,
+        'tag' => 'filled-tag',
+        'level' => 'error',
+        'position' => 'bottom-left',
+        'closable' => false,
+    ];
+
+    $toastr = Toastr::fill($alertArray);
+
+    expect($toastr)->toBeInstanceOf(Toastr::class)
+        ->and($toastr->getMessage())->toBe('Filled message')
+        ->and($toastr->getTitle())->toBe('Filled Title')
+        ->and($toastr->getTimeout())->toBe(5000)
+        ->and($toastr->getTag())->toBe('filled-tag')
+        ->and($toastr->getLevel())->toBe('error')
+        ->and($toastr->getPosition())->toBe('bottom-left')
+        ->and($toastr->isClosable())->toBeFalse();
+})->group('alert', 'fill', 'toastr');
+
+it('flashes a toastr alert correctly', function () {
+    Session::shouldReceive('flash')->twice();
+    Event::fake();
+
+    $toastr = new Toastr('Flashed message');
+    $toastr->flash();
+
+    Event::assertDispatched(Flashed::class);
+})->group('alert', 'flash', 'toastr');