diff --git a/laravel_app/app/View/Components/Badge.php b/laravel_app/app/View/Components/Badge.php
new file mode 100644
index 0000000..07e1260
--- /dev/null
+++ b/laravel_app/app/View/Components/Badge.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\View\Components;
+
+use App\Enums\Status;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class Badge extends Component
+{
+    /**
+     * @var array|string[]
+     */
+    public array $colorClasses;
+    public Status $status;
+
+    public function __construct($status = null)
+    {
+        $this->status = Status::tryFrom($status) ?? Status::Success;
+        $this->colorClasses = match($this->status) {
+            Status::Success => ['bg' => 'bg-green-100', 'text' => 'text-green-700'],
+            Status::Failed => ['bg' => 'bg-red-100', 'text' => 'text-red-700'],
+            Status::Pending => ['bg' => 'bg-gray-100', 'text' => 'text-gray-600'],
+        };
+    }
+
+    /**
+     * Get the view / contents that represents the component.
+     */
+    public function render(): View
+    {
+        return view('components.badge');
+    }
+}
diff --git a/laravel_app/resources/views/components/badge.blade.php b/laravel_app/resources/views/components/badge.blade.php
index 163cd38..20285f9 100644
--- a/laravel_app/resources/views/components/badge.blade.php
+++ b/laravel_app/resources/views/components/badge.blade.php
@@ -1,31 +1,3 @@
-@props([
-    'status' => \App\Enums\Status::Success,
-])
-<?php
-
-// Define a mapping of status to its corresponding colors
-$statusToColors = [
-    'success' => ['bg' => 'bg-green-100', 'text' => 'text-green-700'],
-    'error'   => ['bg' => 'bg-red-100',   'text' => 'text-red-700'],
-    'warning' => ['bg' => 'bg-yellow-100', 'text' => 'text-yellow-800'],
-    'info'    => ['bg' => 'bg-blue-100',   'text' => 'text-blue-700'],
-    'pending' => ['bg' => 'bg-gray-100',   'text' => 'text-gray-600'],
-];
-
-// If status is an object, try to convert it to a string
-if (is_object($status)) {
-    $status = (string) $status;
-}
-
-// Default to 'success' if the provided status is not in the defined array
-if (!array_key_exists($status, $statusToColors)) {
-    $status = \App\Enums\Status::Success;
-}
-
-// Get the color class for the given status
-$colorClasses = $statusToColors[$status];
-?>
-
 <span {{ $attributes }} class="inline-flex items-center rounded-md {{ $colorClasses['bg'] }} px-1.5 py-0.5 text-xs font-medium {{ $colorClasses['text'] }}">
     {{ $status }}
 </span>