diff --git a/app/Enums/InvoiceStatus.php b/app/Enums/InvoiceStatus.php
index 5f8d995..ec8eedc 100644
--- a/app/Enums/InvoiceStatus.php
+++ b/app/Enums/InvoiceStatus.php
@@ -8,4 +8,24 @@ enum InvoiceStatus: string
     case POSTED = 'posted';
     case VOID = 'void';
     case PAID = 'paid';
+
+    public function label(): string
+    {
+        return match ($this) {
+            self::DRAFT => 'Draft',
+            self::POSTED => 'Posted',
+            self::VOID => 'Voided',
+            self::PAID => 'Paid',
+        };
+    }
+
+    public function color(): string
+    {
+        return match ($this) {
+            self::DRAFT => 'gray',
+            self::POSTED => 'green',
+            self::VOID => 'zinc',
+            self::PAID => 'blue',
+        };
+    }
 }
diff --git a/resources/views/components/⚡invoice-list.blade.php b/resources/views/components/⚡invoice-list.blade.php
index e4b7a8e..18fd3ef 100644
--- a/resources/views/components/⚡invoice-list.blade.php
+++ b/resources/views/components/⚡invoice-list.blade.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Enums\InvoiceStatus;
 use App\Models\Invoice;
 use Livewire\Component;
 use Livewire\WithPagination;
@@ -31,7 +32,7 @@ new class extends Component {
 };
 ?>
 
-<!--suppress RequiredAttributes -->
+    <!--suppress RequiredAttributes -->
 <div>
     <flux:table :pagination="$this->invoices">
         <flux:table.columns>
@@ -74,10 +75,29 @@ new class extends Component {
                 <flux:table.row :key="$invoice->id">
                     <flux:table.cell>{{ $invoice->invoice_number }}</flux:table.cell>
                     <flux:table.cell>{{ $invoice->client->abbreviation }}</flux:table.cell>
-                    <flux:table.cell>{{ $invoice->status->value }}</flux:table.cell>
+                    <flux:table.cell>
+                        <flux:badge :color="$invoice->status->color()" rounded size="sm">
+                            {{ $invoice->status->label() }}
+                        </flux:badge>
+                    </flux:table.cell>
                     <flux:table.cell>{{ $invoice->invoice_date?->format('m/d/Y') }}</flux:table.cell>
-                    <flux:table.cell>{{ $invoice->sent_at?->format('m/d/Y') }}</flux:table.cell>
-                    <flux:table.cell>{{ $invoice->due_date?->format('m/d/Y') }}</flux:table.cell>
+                    <flux:table.cell>
+                        @if($invoice->sent_at)
+                            <flux:badge color="green" rounded
+                                        size="sm">{{ $invoice->sent_at->format('m/d/Y') }}</flux:badge>
+                        @elseif($invoice->status === InvoiceStatus::POSTED)
+                            <flux:badge color="red" rounded size="sm">Not Sent</flux:badge>
+                        @endif
+
+                    </flux:table.cell>
+                    <flux:table.cell>
+                        @if($invoice->due_date)
+                            <flux:badge size="sm" rounded
+                            :color="$invoice->due_date?->isPast() && $invoice->status === InvoiceStatus::POSTED ? 'red' : 'blue'">
+                                {{ $invoice->due_date?->format('m/d/Y') }}
+                            </flux:badge>
+                        @endif
+                    </flux:table.cell>
                     <flux:table.cell>{{ formatMoney($invoice->total) }}</flux:table.cell>
 
                 </flux:table.row>