diff --git a/app/View/Components/Alert.php b/app/View/Components/Alert.php
index be75644..8206119 100644
--- a/app/View/Components/Alert.php
+++ b/app/View/Components/Alert.php
@@ -7,16 +7,6 @@
 
 class Alert extends Component
 {
-    /**
-     * Create a new component instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        //
-    }
-
     /**
      * Get the view / contents that represent the component.
      *
diff --git a/app/View/Components/AlertDanger.php b/app/View/Components/AlertDanger.php
new file mode 100644
index 0000000..990a32e
--- /dev/null
+++ b/app/View/Components/AlertDanger.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertDanger extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.alert-danger');
+    }
+}
diff --git a/app/View/Components/AlertInfo.php b/app/View/Components/AlertInfo.php
new file mode 100644
index 0000000..cf349d4
--- /dev/null
+++ b/app/View/Components/AlertInfo.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertInfo extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.alert-info');
+    }
+}
diff --git a/app/View/Components/AlertSuccess.php b/app/View/Components/AlertSuccess.php
new file mode 100644
index 0000000..95d6457
--- /dev/null
+++ b/app/View/Components/AlertSuccess.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertSuccess extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|string|Closure
+    {
+        return view('components.alert-success');
+    }
+}
diff --git a/app/View/Components/AlertWarning.php b/app/View/Components/AlertWarning.php
new file mode 100644
index 0000000..24cfdad
--- /dev/null
+++ b/app/View/Components/AlertWarning.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class AlertWarning extends Component
+{
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return View|Closure|string
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.alert-warning');
+    }
+}
diff --git a/resources/views/components/alert-danger.blade.php b/resources/views/components/alert-danger.blade.php
new file mode 100644
index 0000000..76b011e
--- /dev/null
+++ b/resources/views/components/alert-danger.blade.php
@@ -0,0 +1,11 @@
+<div>
+    <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
+        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
+            <use xlink:href="#exclamation-triangle-fill"/>
+        </svg>
+        <div>
+            {{ $slot }}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    </div>
+</div>
diff --git a/resources/views/components/alert-info.blade.php b/resources/views/components/alert-info.blade.php
new file mode 100644
index 0000000..b5d5647
--- /dev/null
+++ b/resources/views/components/alert-info.blade.php
@@ -0,0 +1,11 @@
+<div>
+    <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
+        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
+            <use xlink:href="#info-fill"/>
+        </svg>
+        <div>
+            {{ $slot }}
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+</div>
diff --git a/resources/views/components/alert-success.blade.php b/resources/views/components/alert-success.blade.php
new file mode 100644
index 0000000..3250083
--- /dev/null
+++ b/resources/views/components/alert-success.blade.php
@@ -0,0 +1,11 @@
+<div>
+    <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
+        <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
+            <use xlink:href="#check-circle-fill"/>
+        </svg>
+        <div>
+            {{ $slot }}
+        </div>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+</div>
diff --git a/resources/views/components/alert-warning.blade.php b/resources/views/components/alert-warning.blade.php
new file mode 100644
index 0000000..bcd9e98
--- /dev/null
+++ b/resources/views/components/alert-warning.blade.php
@@ -0,0 +1,3 @@
+<div>
+    <!-- Because you are alive, everything is possible. - Thich Nhat Hanh -->
+</div>
\ No newline at end of file
diff --git a/resources/views/components/alert.blade.php b/resources/views/components/alert.blade.php
index 9cc8f75..a8b5b96 100644
--- a/resources/views/components/alert.blade.php
+++ b/resources/views/components/alert.blade.php
@@ -14,63 +14,29 @@
         </symbol>
     </svg>
     @if (session('error'))
-        <div>
-            <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
-                    <use xlink:href="#exclamation-triangle-fill"/>
-                </svg>
-                <div>
-                    {{ session('error') }}
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-            </div>
-        </div>
+        <x-alert-danger>
+            {{ session('error') }}
+        </x-alert-danger>
     @endif
     @if (session('status'))
-        <div>
-            <div class="alert alert-primary d-flex align-items-center alert-dismissible fade show" role="alert">
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
-                    <use xlink:href="#info-fill"/>
-                </svg>
-                <div>
-                    {{ session('status') }}
-                </div>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-            </div>
-        </div>
+        <x-alert-info>
+            {{ session('status') }}
+        </x-alert-info>
     @endif
 
     @if (session('success'))
-        <div>
-            <div class="alert alert-success d-flex align-items-center alert-dismissible fade show" role="alert">
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
-                    <use xlink:href="#check-circle-fill"/>
-                </svg>
-                <div>
-                    {{ session('success') }}
-
-                </div>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-            </div>
-        </div>
+        <x-alert-success>
+            {{ session('success') }}
+        </x-alert-success>
     @endif
     @if (isset($errors) && $errors->any())
-        <div>
-            <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-                <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
-                    <use xlink:href="#exclamation-triangle-fill"/>
-                </svg>
-                <div>
-                    <ul class="mb-0">
-                        @foreach ($errors->all() as $error)
-                            <li>{{ $error }}</li>
-                        @endforeach
-                    </ul>
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                </div>
-            </div>
-        </div>
-
+        <x-alert-danger>
+            <ul class="mb-0">
+                @foreach ($errors->all() as $error)
+                    <li>{{ $error }}</li>
+                @endforeach
+            </ul>
+        </x-alert-danger>
     @endif
 
 </div>