diff --git a/resources/views/livewire/admin/audit-logs.blade.php b/resources/views/livewire/admin/audit-logs.blade.php
index 146db3a..1c03116 100644
--- a/resources/views/livewire/admin/audit-logs.blade.php
+++ b/resources/views/livewire/admin/audit-logs.blade.php
@@ -180,7 +180,7 @@ new class extends Component
             </flux:field>
 
             @if($actionFilter || $targetFilter || $dateFrom || $dateTo || $search)
-                <flux:button wire:click="resetFilters" variant="ghost">
+                <flux:button wire:click="resetFilters" variant="outline">
                     {{ __('audit.reset') }}
                 </flux:button>
             @endif
diff --git a/resources/views/livewire/admin/bookings/pending.blade.php b/resources/views/livewire/admin/bookings/pending.blade.php
index 81c48ce..39951f7 100644
--- a/resources/views/livewire/admin/bookings/pending.blade.php
+++ b/resources/views/livewire/admin/bookings/pending.blade.php
@@ -195,7 +195,7 @@ new class extends Component
             </flux:field>
 
             @if($dateFrom || $dateTo)
-                <flux:button wire:click="clearFilters" variant="ghost">
+                <flux:button wire:click="clearFilters" variant="outline">
                     {{ __('common.clear') }}
                 </flux:button>
             @endif
@@ -216,7 +216,7 @@ new class extends Component
                             <span class="font-semibold text-zinc-900">
                                 {{ $booking->getClientName() }}
                             </span>
-                            <flux:badge variant="warning" size="sm">
+                            <flux:badge color="amber" size="sm">
                                 {{ $booking->status->label() }}
                             </flux:badge>
                         </div>
@@ -261,7 +261,7 @@ new class extends Component
                         <flux:button
                             wire:click="quickApprove({{ $booking->id }})"
                             wire:confirm="{{ __('admin.confirm_quick_approve') }}"
-                            variant="filled"
+                            variant="outline"
                             size="sm"
                             class="!bg-emerald-600 !text-white hover:!bg-emerald-700"
                         >
diff --git a/resources/views/livewire/admin/bookings/review.blade.php b/resources/views/livewire/admin/bookings/review.blade.php
index 66420f4..dd66ef9 100644
--- a/resources/views/livewire/admin/bookings/review.blade.php
+++ b/resources/views/livewire/admin/bookings/review.blade.php
@@ -190,7 +190,7 @@ new class extends Component
 
 <div class="max-w-4xl mx-auto">
     <div class="flex items-center gap-4 mb-6">
-        <flux:button href="{{ route('admin.bookings.pending') }}" variant="ghost" wire:navigate>
+        <flux:button href="{{ route('admin.bookings.pending') }}" variant="outline" wire:navigate>
             <flux:icon name="arrow-left" class="w-4 h-4 rtl:rotate-180" />
             {{ __('common.back') }}
         </flux:button>
@@ -281,11 +281,11 @@ new class extends Component
             </div>
             <div>
                 <p class="text-sm text-zinc-500">{{ __('admin.current_status') }}</p>
-                <flux:badge :variant="match($consultation->status) {
-                    ConsultationStatus::Pending => 'warning',
-                    ConsultationStatus::Approved => 'success',
-                    ConsultationStatus::Rejected => 'danger',
-                    default => 'default',
+                <flux:badge :color="match($consultation->status) {
+                    ConsultationStatus::Pending => 'amber',
+                    ConsultationStatus::Approved => 'green',
+                    ConsultationStatus::Rejected => 'red',
+                    default => 'zinc',
                 }">
                     {{ $consultation->status->label() }}
                 </flux:badge>
@@ -316,13 +316,13 @@ new class extends Component
                                 {{ $history->consultation_type?->value ?? '-' }}
                             </p>
                         </div>
-                        <flux:badge :variant="match($history->status) {
-                            ConsultationStatus::Pending => 'warning',
-                            ConsultationStatus::Approved => 'success',
-                            ConsultationStatus::Completed => 'default',
-                            ConsultationStatus::Rejected => 'danger',
-                            ConsultationStatus::Cancelled => 'danger',
-                            ConsultationStatus::NoShow => 'danger',
+                        <flux:badge :color="match($history->status) {
+                            ConsultationStatus::Pending => 'amber',
+                            ConsultationStatus::Approved => 'sky',
+                            ConsultationStatus::Completed => 'green',
+                            ConsultationStatus::Rejected => 'rose',
+                            ConsultationStatus::Cancelled => 'red',
+                            ConsultationStatus::NoShow => 'orange',
                         }" size="sm">
                             {{ $history->status->label() }}
                         </flux:badge>
diff --git a/resources/views/livewire/admin/clients/company/create.blade.php b/resources/views/livewire/admin/clients/company/create.blade.php
index 40c3efc..c047d78 100644
--- a/resources/views/livewire/admin/clients/company/create.blade.php
+++ b/resources/views/livewire/admin/clients/company/create.blade.php
@@ -80,7 +80,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
             {{ __('clients.back_to_companies') }}
         </flux:button>
     </div>
@@ -175,7 +175,7 @@ new class extends Component {
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate>
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/clients/company/edit.blade.php b/resources/views/livewire/admin/clients/company/edit.blade.php
index 8b0c0d1..8ab848a 100644
--- a/resources/views/livewire/admin/clients/company/edit.blade.php
+++ b/resources/views/livewire/admin/clients/company/edit.blade.php
@@ -104,7 +104,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
             {{ __('clients.back_to_companies') }}
         </flux:button>
     </div>
@@ -211,7 +211,7 @@ new class extends Component {
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate>
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/clients/company/index.blade.php b/resources/views/livewire/admin/clients/company/index.blade.php
index e1c089d..4c3a162 100644
--- a/resources/views/livewire/admin/clients/company/index.blade.php
+++ b/resources/views/livewire/admin/clients/company/index.blade.php
@@ -94,7 +94,7 @@ new class extends Component {
                 </flux:select>
             </div>
             @if ($search || $statusFilter)
-                <flux:button wire:click="clearFilters" variant="ghost" icon="x-mark">
+                <flux:button wire:click="clearFilters" variant="outline" icon="x-mark">
                     {{ __('clients.clear_filters') }}
                 </flux:button>
             @endif
@@ -160,7 +160,7 @@ new class extends Component {
                             <td class="whitespace-nowrap px-6 py-4 text-end">
                                 <div class="flex items-center justify-end gap-2">
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="eye"
                                         :href="route('admin.clients.company.show', $client)"
@@ -168,7 +168,7 @@ new class extends Component {
                                         :title="__('clients.view')"
                                     />
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="pencil"
                                         :href="route('admin.clients.company.edit', $client)"
@@ -191,7 +191,7 @@ new class extends Component {
                                         @endif
                                     </flux:text>
                                     @if ($search || $statusFilter)
-                                        <flux:button wire:click="clearFilters" variant="ghost" class="mt-4">
+                                        <flux:button wire:click="clearFilters" variant="outline" class="mt-4">
                                             {{ __('clients.clear_filters') }}
                                         </flux:button>
                                     @endif
diff --git a/resources/views/livewire/admin/clients/company/show.blade.php b/resources/views/livewire/admin/clients/company/show.blade.php
index f299c72..6fa60f3 100644
--- a/resources/views/livewire/admin/clients/company/show.blade.php
+++ b/resources/views/livewire/admin/clients/company/show.blade.php
@@ -24,12 +24,12 @@ new class extends Component {
 <div>
     <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-            <flux:button variant="ghost" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
+            <flux:button variant="outline" :href="route('admin.clients.company.index')" wire:navigate icon="arrow-left">
                 {{ __('clients.back_to_companies') }}
             </flux:button>
         </div>
         <div class="flex flex-wrap gap-2">
-            <flux:button variant="ghost" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-individual').show()" icon="user">
+            <flux:button variant="outline" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-individual').show()" icon="user">
                 {{ __('clients.convert_to_individual') }}
             </flux:button>
             <flux:button variant="primary" :href="route('admin.clients.company.edit', $client)" wire:navigate icon="pencil">
diff --git a/resources/views/livewire/admin/clients/consultation-history.blade.php b/resources/views/livewire/admin/clients/consultation-history.blade.php
index 3563e44..ca4b1e7 100644
--- a/resources/views/livewire/admin/clients/consultation-history.blade.php
+++ b/resources/views/livewire/admin/clients/consultation-history.blade.php
@@ -41,11 +41,11 @@ new class extends Component
 <div class="max-w-5xl mx-auto">
     <div class="mb-6">
         @if($user->user_type->value === 'individual')
-            <flux:button href="{{ route('admin.clients.individual.show', $user) }}" variant="ghost" icon="arrow-left" wire:navigate>
+            <flux:button href="{{ route('admin.clients.individual.show', $user) }}" variant="outline" icon="arrow-left" wire:navigate>
                 {{ __('common.back') }}
             </flux:button>
         @else
-            <flux:button href="{{ route('admin.clients.company.show', $user) }}" variant="ghost" icon="arrow-left" wire:navigate>
+            <flux:button href="{{ route('admin.clients.company.show', $user) }}" variant="outline" icon="arrow-left" wire:navigate>
                 {{ __('common.back') }}
             </flux:button>
         @endif
@@ -95,32 +95,32 @@ new class extends Component
 
                         <div class="flex flex-wrap items-center gap-2">
                             @php
-                                $statusVariant = match($consultation->status) {
-                                    \App\Enums\ConsultationStatus::Pending => 'warning',
-                                    \App\Enums\ConsultationStatus::Approved => 'primary',
-                                    \App\Enums\ConsultationStatus::Completed => 'success',
-                                    \App\Enums\ConsultationStatus::Cancelled => 'danger',
-                                    \App\Enums\ConsultationStatus::NoShow => 'danger',
-                                    \App\Enums\ConsultationStatus::Rejected => 'danger',
+                                $statusColor = match($consultation->status) {
+                                    \App\Enums\ConsultationStatus::Pending => 'amber',
+                                    \App\Enums\ConsultationStatus::Approved => 'sky',
+                                    \App\Enums\ConsultationStatus::Completed => 'green',
+                                    \App\Enums\ConsultationStatus::Cancelled => 'red',
+                                    \App\Enums\ConsultationStatus::NoShow => 'orange',
+                                    \App\Enums\ConsultationStatus::Rejected => 'rose',
                                 };
                             @endphp
-                            <flux:badge variant="{{ $statusVariant }}" size="sm">
+                            <flux:badge color="{{ $statusColor }}" size="sm">
                                 {{ $consultation->status->label() }}
                             </flux:badge>
 
-                            <flux:badge variant="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'primary' : 'outline' }}" size="sm">
+                            <flux:badge color="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'indigo' : 'zinc' }}" size="sm">
                                 {{ $consultation->consultation_type->label() }}
                             </flux:badge>
 
                             @if($consultation->consultation_type === \App\Enums\ConsultationType::Paid)
                                 @php
-                                    $paymentVariant = match($consultation->payment_status) {
-                                        \App\Enums\PaymentStatus::Pending => 'warning',
-                                        \App\Enums\PaymentStatus::Received => 'success',
-                                        default => 'outline',
+                                    $paymentColor = match($consultation->payment_status) {
+                                        \App\Enums\PaymentStatus::Pending => 'amber',
+                                        \App\Enums\PaymentStatus::Received => 'green',
+                                        default => 'zinc',
                                     };
                                 @endphp
-                                <flux:badge variant="{{ $paymentVariant }}" size="sm">
+                                <flux:badge color="{{ $paymentColor }}" size="sm">
                                     {{ $consultation->payment_status->label() }}
                                 </flux:badge>
                             @endif
@@ -135,7 +135,7 @@ new class extends Component
 
                     <flux:button
                         href="{{ route('admin.consultations.show', $consultation) }}"
-                        variant="ghost"
+                        variant="outline"
                         size="sm"
                         wire:navigate
                     >
diff --git a/resources/views/livewire/admin/clients/convert-to-company-modal.blade.php b/resources/views/livewire/admin/clients/convert-to-company-modal.blade.php
index 5ba3524..1559c07 100644
--- a/resources/views/livewire/admin/clients/convert-to-company-modal.blade.php
+++ b/resources/views/livewire/admin/clients/convert-to-company-modal.blade.php
@@ -131,7 +131,7 @@ new class extends Component {
                     </flux:field>
 
                     <div class="flex gap-2 pt-4">
-                        <flux:button type="button" variant="ghost" x-on:click="$flux.modal('convert-to-company').close()">
+                        <flux:button type="button" variant="outline" x-on:click="$flux.modal('convert-to-company').close()">
                             {{ __('clients.cancel') }}
                         </flux:button>
                         <flux:button type="submit" variant="primary">
@@ -164,7 +164,7 @@ new class extends Component {
                     </div>
 
                     <div class="flex gap-2 pt-4">
-                        <flux:button type="button" variant="ghost" wire:click="cancelConfirmation">
+                        <flux:button type="button" variant="outline" wire:click="cancelConfirmation">
                             {{ __('clients.back') }}
                         </flux:button>
                         <flux:button type="button" variant="primary" wire:click="convertToCompany">
diff --git a/resources/views/livewire/admin/clients/convert-to-individual-modal.blade.php b/resources/views/livewire/admin/clients/convert-to-individual-modal.blade.php
index 23e7ce0..faacf32 100644
--- a/resources/views/livewire/admin/clients/convert-to-individual-modal.blade.php
+++ b/resources/views/livewire/admin/clients/convert-to-individual-modal.blade.php
@@ -117,7 +117,7 @@ new class extends Component {
                     </flux:callout>
 
                     <div class="flex gap-2 pt-4">
-                        <flux:button type="button" variant="ghost" x-on:click="$flux.modal('convert-to-individual').close()">
+                        <flux:button type="button" variant="outline" x-on:click="$flux.modal('convert-to-individual').close()">
                             {{ __('clients.cancel') }}
                         </flux:button>
                         <flux:button type="submit" variant="primary">
@@ -146,7 +146,7 @@ new class extends Component {
                     </div>
 
                     <div class="flex gap-2 pt-4">
-                        <flux:button type="button" variant="ghost" wire:click="cancelConfirmation">
+                        <flux:button type="button" variant="outline" wire:click="cancelConfirmation">
                             {{ __('clients.back') }}
                         </flux:button>
                         <flux:button type="button" variant="primary" wire:click="convertToIndividual">
diff --git a/resources/views/livewire/admin/clients/individual/create.blade.php b/resources/views/livewire/admin/clients/individual/create.blade.php
index d4d0a2e..c556434 100644
--- a/resources/views/livewire/admin/clients/individual/create.blade.php
+++ b/resources/views/livewire/admin/clients/individual/create.blade.php
@@ -73,7 +73,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
             {{ __('clients.back_to_clients') }}
         </flux:button>
     </div>
@@ -148,7 +148,7 @@ new class extends Component {
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate>
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/clients/individual/edit.blade.php b/resources/views/livewire/admin/clients/individual/edit.blade.php
index f8e3540..8521cb0 100644
--- a/resources/views/livewire/admin/clients/individual/edit.blade.php
+++ b/resources/views/livewire/admin/clients/individual/edit.blade.php
@@ -95,7 +95,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
             {{ __('clients.back_to_clients') }}
         </flux:button>
     </div>
@@ -182,7 +182,7 @@ new class extends Component {
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate>
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/clients/individual/index.blade.php b/resources/views/livewire/admin/clients/individual/index.blade.php
index 92faf95..29136f0 100644
--- a/resources/views/livewire/admin/clients/individual/index.blade.php
+++ b/resources/views/livewire/admin/clients/individual/index.blade.php
@@ -94,7 +94,7 @@ new class extends Component {
                 </flux:select>
             </div>
             @if ($search || $statusFilter)
-                <flux:button wire:click="clearFilters" variant="ghost" icon="x-mark">
+                <flux:button wire:click="clearFilters" variant="outline" icon="x-mark">
                     {{ __('clients.clear_filters') }}
                 </flux:button>
             @endif
@@ -160,7 +160,7 @@ new class extends Component {
                             <td class="whitespace-nowrap px-6 py-4 text-end">
                                 <div class="flex items-center justify-end gap-2">
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="eye"
                                         :href="route('admin.clients.individual.show', $client)"
@@ -168,7 +168,7 @@ new class extends Component {
                                         :title="__('clients.view')"
                                     />
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="pencil"
                                         :href="route('admin.clients.individual.edit', $client)"
@@ -191,7 +191,7 @@ new class extends Component {
                                         @endif
                                     </flux:text>
                                     @if ($search || $statusFilter)
-                                        <flux:button wire:click="clearFilters" variant="ghost" class="mt-4">
+                                        <flux:button wire:click="clearFilters" variant="outline" class="mt-4">
                                             {{ __('clients.clear_filters') }}
                                         </flux:button>
                                     @endif
diff --git a/resources/views/livewire/admin/clients/individual/show.blade.php b/resources/views/livewire/admin/clients/individual/show.blade.php
index 710fda2..6c5851e 100644
--- a/resources/views/livewire/admin/clients/individual/show.blade.php
+++ b/resources/views/livewire/admin/clients/individual/show.blade.php
@@ -24,12 +24,12 @@ new class extends Component {
 <div>
     <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-            <flux:button variant="ghost" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
+            <flux:button variant="outline" :href="route('admin.clients.individual.index')" wire:navigate icon="arrow-left">
                 {{ __('clients.back_to_clients') }}
             </flux:button>
         </div>
         <div class="flex flex-wrap gap-2">
-            <flux:button variant="ghost" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-company').show()" icon="building-office">
+            <flux:button variant="outline" class="border border-amber-500 text-amber-600 hover:bg-amber-50" x-data x-on:click="$flux.modal('convert-to-company').show()" icon="building-office">
                 {{ __('clients.convert_to_company') }}
             </flux:button>
             <flux:button variant="primary" :href="route('admin.clients.individual.edit', $client)" wire:navigate icon="pencil">
diff --git a/resources/views/livewire/admin/clients/lifecycle-actions.blade.php b/resources/views/livewire/admin/clients/lifecycle-actions.blade.php
index 4151c38..ffc294c 100644
--- a/resources/views/livewire/admin/clients/lifecycle-actions.blade.php
+++ b/resources/views/livewire/admin/clients/lifecycle-actions.blade.php
@@ -214,17 +214,17 @@ new class extends Component {
     {{-- Action Buttons --}}
     <div class="flex flex-wrap gap-2">
         {{-- Password Reset Button --}}
-        <flux:button variant="ghost" icon="key" wire:click="openPasswordResetModal">
+        <flux:button variant="outline" icon="key" wire:click="openPasswordResetModal">
             {{ __('clients.reset_password') }}
         </flux:button>
 
         {{-- Deactivate/Reactivate Button --}}
         @if ($client->isActive())
-            <flux:button variant="ghost" class="text-amber-600 hover:bg-amber-50" icon="pause-circle" wire:click="openDeactivateModal">
+            <flux:button variant="outline" class="text-amber-600 hover:bg-amber-50" icon="pause-circle" wire:click="openDeactivateModal">
                 {{ __('clients.deactivate') }}
             </flux:button>
         @else
-            <flux:button variant="ghost" class="text-green-600 hover:bg-green-50" icon="play-circle" wire:click="openReactivateModal">
+            <flux:button variant="outline" class="text-green-600 hover:bg-green-50" icon="play-circle" wire:click="openReactivateModal">
                 {{ __('clients.reactivate') }}
             </flux:button>
         @endif
@@ -257,7 +257,7 @@ new class extends Component {
             </div>
 
             <div class="flex gap-2 pt-4">
-                <flux:button type="button" variant="ghost" wire:click="closeDeactivateModal">
+                <flux:button type="button" variant="outline" wire:click="closeDeactivateModal">
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button type="button" variant="primary" class="bg-amber-600 hover:bg-amber-700" wire:click="deactivate">
@@ -288,7 +288,7 @@ new class extends Component {
             </div>
 
             <div class="flex gap-2 pt-4">
-                <flux:button type="button" variant="ghost" wire:click="closeReactivateModal">
+                <flux:button type="button" variant="outline" wire:click="closeReactivateModal">
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button type="button" variant="primary" wire:click="reactivate">
@@ -327,7 +327,7 @@ new class extends Component {
             </flux:field>
 
             <div class="flex gap-2 pt-4">
-                <flux:button type="button" variant="ghost" wire:click="closeDeleteModal">
+                <flux:button type="button" variant="outline" wire:click="closeDeleteModal">
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button type="button" variant="danger" wire:click="delete">
@@ -358,7 +358,7 @@ new class extends Component {
             </div>
 
             <div class="flex gap-2 pt-4">
-                <flux:button type="button" variant="ghost" wire:click="closePasswordResetModal">
+                <flux:button type="button" variant="outline" wire:click="closePasswordResetModal">
                     {{ __('clients.cancel') }}
                 </flux:button>
                 <flux:button type="button" variant="primary" wire:click="resetPassword">
diff --git a/resources/views/livewire/admin/consultations/export-consultations.blade.php b/resources/views/livewire/admin/consultations/export-consultations.blade.php
index f8ffb53..d17cf6a 100644
--- a/resources/views/livewire/admin/consultations/export-consultations.blade.php
+++ b/resources/views/livewire/admin/consultations/export-consultations.blade.php
@@ -236,7 +236,7 @@ new class extends Component {
 
         @if ($consultationType !== 'all' || $status !== 'all' || $paymentStatus !== 'all' || $dateFrom || $dateTo)
             <div class="mt-4">
-                <flux:button wire:click="clearFilters" variant="ghost" icon="x-mark" size="sm">
+                <flux:button wire:click="clearFilters" variant="outline" icon="x-mark" size="sm">
                     {{ __('export.clear_filters') }}
                 </flux:button>
             </div>
@@ -268,7 +268,7 @@ new class extends Component {
                     wire:click="exportPdf"
                     wire:loading.attr="disabled"
                     wire:target="exportCsv,exportPdf"
-                    variant="filled"
+                    variant="outline"
                     icon="document-text"
                     class="!bg-zinc-700 !text-white hover:!bg-zinc-800"
                     :disabled="$previewCount === 0"
diff --git a/resources/views/livewire/admin/consultations/index.blade.php b/resources/views/livewire/admin/consultations/index.blade.php
index 8e17d49..6d0ffb6 100644
--- a/resources/views/livewire/admin/consultations/index.blade.php
+++ b/resources/views/livewire/admin/consultations/index.blade.php
@@ -282,7 +282,7 @@ new class extends Component
             </flux:field>
 
             @if($search || $statusFilter || $typeFilter || $paymentFilter || $dateFrom || $dateTo)
-                <flux:button wire:click="clearFilters" variant="ghost">
+                <flux:button wire:click="clearFilters" variant="outline">
                     {{ __('common.clear') }}
                 </flux:button>
             @endif
@@ -329,7 +329,7 @@ new class extends Component
                             <a href="{{ route('admin.consultations.show', $consultation) }}" class="font-semibold text-zinc-900 hover:text-blue-600" wire:navigate>
                                 {{ $consultation->user?->full_name ?? __('common.unknown') }}
                             </a>
-                            <flux:badge size="sm" variant="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'primary' : 'outline' }}">
+                            <flux:badge size="sm" color="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'indigo' : 'zinc' }}">
                                 {{ $consultation->consultation_type->label() }}
                             </flux:badge>
                         </div>
@@ -341,16 +341,16 @@ new class extends Component
                     <!-- Status Badge -->
                     <div class="lg:w-24">
                         @php
-                            $statusVariant = match($consultation->status) {
-                                \App\Enums\ConsultationStatus::Pending => 'warning',
-                                \App\Enums\ConsultationStatus::Approved => 'primary',
-                                \App\Enums\ConsultationStatus::Completed => 'success',
-                                \App\Enums\ConsultationStatus::Cancelled => 'danger',
-                                \App\Enums\ConsultationStatus::NoShow => 'danger',
-                                \App\Enums\ConsultationStatus::Rejected => 'danger',
+                            $statusColor = match($consultation->status) {
+                                \App\Enums\ConsultationStatus::Pending => 'amber',
+                                \App\Enums\ConsultationStatus::Approved => 'sky',
+                                \App\Enums\ConsultationStatus::Completed => 'green',
+                                \App\Enums\ConsultationStatus::Cancelled => 'red',
+                                \App\Enums\ConsultationStatus::NoShow => 'orange',
+                                \App\Enums\ConsultationStatus::Rejected => 'rose',
                             };
                         @endphp
-                        <flux:badge variant="{{ $statusVariant }}" size="sm">
+                        <flux:badge color="{{ $statusColor }}" size="sm">
                             {{ $consultation->status->label() }}
                         </flux:badge>
                     </div>
@@ -359,13 +359,13 @@ new class extends Component
                     <div class="lg:w-24">
                         @if($consultation->consultation_type === \App\Enums\ConsultationType::Paid)
                             @php
-                                $paymentVariant = match($consultation->payment_status) {
-                                    \App\Enums\PaymentStatus::Pending => 'warning',
-                                    \App\Enums\PaymentStatus::Received => 'success',
-                                    default => 'outline',
+                                $paymentColor = match($consultation->payment_status) {
+                                    \App\Enums\PaymentStatus::Pending => 'amber',
+                                    \App\Enums\PaymentStatus::Received => 'green',
+                                    default => 'zinc',
                                 };
                             @endphp
-                            <flux:badge variant="{{ $paymentVariant }}" size="sm">
+                            <flux:badge color="{{ $paymentColor }}" size="sm">
                                 {{ $consultation->payment_status->label() }}
                             </flux:badge>
                         @else
@@ -377,7 +377,7 @@ new class extends Component
                     <div class="lg:w-48 flex flex-wrap gap-2">
                         <flux:button
                             href="{{ route('admin.consultations.show', $consultation) }}"
-                            variant="filled"
+                            variant="outline"
                             size="sm"
                             wire:navigate
                         >
@@ -386,7 +386,7 @@ new class extends Component
 
                         @if($consultation->status === \App\Enums\ConsultationStatus::Approved)
                             <flux:dropdown>
-                                <flux:button variant="ghost" size="sm" icon="ellipsis-vertical" />
+                                <flux:button variant="outline" size="sm" icon="ellipsis-vertical" />
 
                                 <flux:menu>
                                     <flux:menu.item
diff --git a/resources/views/livewire/admin/consultations/show.blade.php b/resources/views/livewire/admin/consultations/show.blade.php
index 692aa20..06e1d3b 100644
--- a/resources/views/livewire/admin/consultations/show.blade.php
+++ b/resources/views/livewire/admin/consultations/show.blade.php
@@ -311,7 +311,7 @@ new class extends Component
 
 <div class="max-w-5xl mx-auto">
     <div class="mb-6">
-        <flux:button href="{{ route('admin.consultations.index') }}" variant="ghost" icon="arrow-left" wire:navigate>
+        <flux:button href="{{ route('admin.consultations.index') }}" variant="outline" icon="arrow-left" wire:navigate>
             {{ __('common.back') }}
         </flux:button>
     </div>
@@ -321,7 +321,7 @@ new class extends Component
 
         @if($consultation->status === \App\Enums\ConsultationStatus::Approved)
             <div class="flex gap-2">
-                <flux:button wire:click="openRescheduleModal" variant="filled" icon="calendar">
+                <flux:button wire:click="openRescheduleModal" variant="outline" icon="calendar">
                     {{ __('admin.reschedule') }}
                 </flux:button>
             </div>
@@ -370,16 +370,16 @@ new class extends Component
                         <dt class="text-sm text-zinc-500">{{ __('admin.current_status') }}</dt>
                         <dd>
                             @php
-                                $statusVariant = match($consultation->status) {
-                                    \App\Enums\ConsultationStatus::Pending => 'warning',
-                                    \App\Enums\ConsultationStatus::Approved => 'primary',
-                                    \App\Enums\ConsultationStatus::Completed => 'success',
-                                    \App\Enums\ConsultationStatus::Cancelled => 'danger',
-                                    \App\Enums\ConsultationStatus::NoShow => 'danger',
-                                    \App\Enums\ConsultationStatus::Rejected => 'danger',
+                                $statusColor = match($consultation->status) {
+                                    \App\Enums\ConsultationStatus::Pending => 'amber',
+                                    \App\Enums\ConsultationStatus::Approved => 'sky',
+                                    \App\Enums\ConsultationStatus::Completed => 'green',
+                                    \App\Enums\ConsultationStatus::Cancelled => 'red',
+                                    \App\Enums\ConsultationStatus::NoShow => 'orange',
+                                    \App\Enums\ConsultationStatus::Rejected => 'rose',
                                 };
                             @endphp
-                            <flux:badge variant="{{ $statusVariant }}">
+                            <flux:badge color="{{ $statusColor }}">
                                 {{ $consultation->status->label() }}
                             </flux:badge>
                         </dd>
@@ -387,7 +387,7 @@ new class extends Component
                     <div>
                         <dt class="text-sm text-zinc-500">{{ __('admin.consultation_type') }}</dt>
                         <dd>
-                            <flux:badge variant="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'primary' : 'outline' }}">
+                            <flux:badge color="{{ $consultation->consultation_type === \App\Enums\ConsultationType::Paid ? 'indigo' : 'zinc' }}">
                                 {{ $consultation->consultation_type->label() }}
                             </flux:badge>
                         </dd>
@@ -430,13 +430,13 @@ new class extends Component
                             <dt class="text-sm text-zinc-500">{{ __('admin.payment_status') }}</dt>
                             <dd>
                                 @php
-                                    $paymentVariant = match($consultation->payment_status) {
-                                        \App\Enums\PaymentStatus::Pending => 'warning',
-                                        \App\Enums\PaymentStatus::Received => 'success',
-                                        default => 'outline',
+                                    $paymentColor = match($consultation->payment_status) {
+                                        \App\Enums\PaymentStatus::Pending => 'amber',
+                                        \App\Enums\PaymentStatus::Received => 'green',
+                                        default => 'zinc',
                                     };
                                 @endphp
-                                <flux:badge variant="{{ $paymentVariant }}">
+                                <flux:badge color="{{ $paymentColor }}">
                                     {{ $consultation->payment_status->label() }}
                                 </flux:badge>
                             </dd>
@@ -491,7 +491,7 @@ new class extends Component
                                     @enderror
                                 </flux:field>
                                 <div class="mt-2 flex gap-2 justify-end">
-                                    <flux:button wire:click="cancelEditNote" variant="ghost" size="sm">
+                                    <flux:button wire:click="cancelEditNote" variant="outline" size="sm">
                                         {{ __('common.cancel') }}
                                     </flux:button>
                                     <flux:button wire:click="updateNote" variant="primary" size="sm">
@@ -510,7 +510,7 @@ new class extends Component
                                     <span>{{ \Carbon\Carbon::parse($note['created_at'])->translatedFormat('d M Y, g:i A') }}</span>
                                 </div>
                                 <div class="mt-2 flex gap-2 justify-end">
-                                    <flux:button wire:click="startEditNote({{ $index }})" variant="ghost" size="sm">
+                                    <flux:button wire:click="startEditNote({{ $index }})" variant="outline" size="sm">
                                         {{ __('common.edit') }}
                                     </flux:button>
                                     <flux:button
@@ -560,7 +560,7 @@ new class extends Component
                     <div class="mt-4 pt-4 border-t border-zinc-200">
                         <flux:button
                             href="{{ route('admin.clients.consultation-history', $consultation->user) }}"
-                            variant="ghost"
+                            variant="outline"
                             size="sm"
                             class="w-full"
                             wire:navigate
@@ -582,7 +582,7 @@ new class extends Component
                         <flux:button
                             wire:click="markCompleted"
                             wire:confirm="{{ __('admin.confirm_mark_completed') }}"
-                            variant="filled"
+                            variant="outline"
                             class="w-full"
                             icon="check-circle"
                         >
@@ -592,7 +592,7 @@ new class extends Component
                         <flux:button
                             wire:click="markNoShow"
                             wire:confirm="{{ __('admin.confirm_mark_no_show') }}"
-                            variant="ghost"
+                            variant="outline"
                             class="w-full"
                             icon="x-circle"
                         >
@@ -672,7 +672,7 @@ new class extends Component
             </div>
 
             <div class="mt-6 flex gap-2 justify-end">
-                <flux:button wire:click="closeRescheduleModal" variant="ghost">
+                <flux:button wire:click="closeRescheduleModal" variant="outline">
                     {{ __('common.cancel') }}
                 </flux:button>
                 <flux:button wire:click="reschedule" variant="primary" :disabled="!$newDate || !$newTime">
diff --git a/resources/views/livewire/admin/dashboard.blade.php b/resources/views/livewire/admin/dashboard.blade.php
index 8c9261e..03ea41f 100644
--- a/resources/views/livewire/admin/dashboard.blade.php
+++ b/resources/views/livewire/admin/dashboard.blade.php
@@ -326,7 +326,7 @@ new class extends Component
                 <div class="flex gap-2">
                     <flux:button
                         wire:click="$set('chartPeriod', '6m')"
-                        :variant="$chartPeriod === '6m' ? 'primary' : 'ghost'"
+                        :variant="$chartPeriod === '6m' ? 'primary' : 'outline'"
                         size="sm"
                         class="flex-1 sm:flex-none"
                     >
@@ -334,7 +334,7 @@ new class extends Component
                     </flux:button>
                     <flux:button
                         wire:click="$set('chartPeriod', '12m')"
-                        :variant="$chartPeriod === '12m' ? 'primary' : 'ghost'"
+                        :variant="$chartPeriod === '12m' ? 'primary' : 'outline'"
                         size="sm"
                         class="flex-1 sm:flex-none"
                     >
@@ -361,7 +361,7 @@ new class extends Component
                     </div>
                     <flux:button
                         wire:click="setCustomRange"
-                        :variant="$chartPeriod === 'custom' ? 'primary' : 'ghost'"
+                        :variant="$chartPeriod === 'custom' ? 'primary' : 'outline'"
                         size="sm"
                         class="w-full sm:w-auto"
                     >
diff --git a/resources/views/livewire/admin/pages/edit.blade.php b/resources/views/livewire/admin/pages/edit.blade.php
index 525635c..c17f2fd 100644
--- a/resources/views/livewire/admin/pages/edit.blade.php
+++ b/resources/views/livewire/admin/pages/edit.blade.php
@@ -61,7 +61,7 @@ new class extends Component
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.pages.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.pages.index')" wire:navigate icon="arrow-left">
             {{ __('pages.back_to_pages') }}
         </flux:button>
     </div>
@@ -131,7 +131,7 @@ new class extends Component
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.pages.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.pages.index')" wire:navigate>
                     {{ __('common.cancel') }}
                 </flux:button>
                 <flux:button type="button" wire:click="togglePreview">
diff --git a/resources/views/livewire/admin/posts/create.blade.php b/resources/views/livewire/admin/posts/create.blade.php
index 65dd53d..8fb0c8c 100644
--- a/resources/views/livewire/admin/posts/create.blade.php
+++ b/resources/views/livewire/admin/posts/create.blade.php
@@ -124,7 +124,7 @@ new class extends Component
 
 <div wire:poll.60s="autoSave">
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
             {{ __('posts.back_to_posts') }}
         </flux:button>
     </div>
@@ -195,7 +195,7 @@ new class extends Component
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.posts.index')" wire:navigate>
                     {{ __('common.cancel') }}
                 </flux:button>
                 <flux:button type="button" wire:click="preview">
diff --git a/resources/views/livewire/admin/posts/edit.blade.php b/resources/views/livewire/admin/posts/edit.blade.php
index 773876e..77f9034 100644
--- a/resources/views/livewire/admin/posts/edit.blade.php
+++ b/resources/views/livewire/admin/posts/edit.blade.php
@@ -154,7 +154,7 @@ new class extends Component
 
 <div wire:poll.60s="autoSave">
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.posts.index')" wire:navigate icon="arrow-left">
             {{ __('posts.back_to_posts') }}
         </flux:button>
     </div>
@@ -242,7 +242,7 @@ new class extends Component
                     </flux:button>
                 </div>
                 <div class="flex items-center gap-4">
-                    <flux:button variant="ghost" :href="route('admin.posts.index')" wire:navigate>
+                    <flux:button variant="outline" :href="route('admin.posts.index')" wire:navigate>
                         {{ __('common.cancel') }}
                     </flux:button>
                     <flux:button type="button" wire:click="preview">
diff --git a/resources/views/livewire/admin/posts/index.blade.php b/resources/views/livewire/admin/posts/index.blade.php
index 9307350..1b8182c 100644
--- a/resources/views/livewire/admin/posts/index.blade.php
+++ b/resources/views/livewire/admin/posts/index.blade.php
@@ -210,7 +210,7 @@ new class extends Component
 
             @if($search || $statusFilter)
                 <div class="flex items-end">
-                    <flux:button wire:click="clearFilters" variant="ghost">
+                    <flux:button wire:click="clearFilters" variant="outline">
                         {{ __('common.clear') }}
                     </flux:button>
                 </div>
@@ -282,7 +282,7 @@ new class extends Component
                     <div class="lg:w-48 flex flex-wrap gap-2">
                         <flux:button
                             href="{{ route('admin.posts.edit', $post) }}"
-                            variant="filled"
+                            variant="outline"
                             size="sm"
                             wire:navigate
                         >
diff --git a/resources/views/livewire/admin/potential-clients/create.blade.php b/resources/views/livewire/admin/potential-clients/create.blade.php
index 37cf1dd..0afe51e 100644
--- a/resources/views/livewire/admin/potential-clients/create.blade.php
+++ b/resources/views/livewire/admin/potential-clients/create.blade.php
@@ -55,7 +55,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.potential-clients.index')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.potential-clients.index')" wire:navigate icon="arrow-left">
             {{ __('potential-clients.back_to_list') }}
         </flux:button>
     </div>
@@ -160,7 +160,7 @@ new class extends Component {
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.potential-clients.index')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.potential-clients.index')" wire:navigate>
                     {{ __('potential-clients.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/potential-clients/edit.blade.php b/resources/views/livewire/admin/potential-clients/edit.blade.php
index f1edf2d..200ead9 100644
--- a/resources/views/livewire/admin/potential-clients/edit.blade.php
+++ b/resources/views/livewire/admin/potential-clients/edit.blade.php
@@ -70,7 +70,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.potential-clients.show', $potentialClient)" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.potential-clients.show', $potentialClient)" wire:navigate icon="arrow-left">
             {{ __('potential-clients.back_to_details') }}
         </flux:button>
     </div>
@@ -175,7 +175,7 @@ new class extends Component {
             </div>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6">
-                <flux:button variant="ghost" :href="route('admin.potential-clients.show', $potentialClient)" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.potential-clients.show', $potentialClient)" wire:navigate>
                     {{ __('potential-clients.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/potential-clients/index.blade.php b/resources/views/livewire/admin/potential-clients/index.blade.php
index c000ea4..fd4bf47 100644
--- a/resources/views/livewire/admin/potential-clients/index.blade.php
+++ b/resources/views/livewire/admin/potential-clients/index.blade.php
@@ -122,7 +122,7 @@ new class extends Component {
                 </flux:select>
             </div>
             @if ($search || $typeFilter)
-                <flux:button wire:click="clearFilters" variant="ghost" icon="x-mark">
+                <flux:button wire:click="clearFilters" variant="outline" icon="x-mark">
                     {{ __('potential-clients.clear_filters') }}
                 </flux:button>
             @endif
@@ -188,7 +188,7 @@ new class extends Component {
                             <td class="whitespace-nowrap px-6 py-4 text-end">
                                 <div class="flex items-center justify-end gap-2">
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="eye"
                                         :href="route('admin.potential-clients.show', $potentialClient)"
@@ -196,7 +196,7 @@ new class extends Component {
                                         :title="__('potential-clients.view')"
                                     />
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="pencil"
                                         :href="route('admin.potential-clients.edit', $potentialClient)"
@@ -204,7 +204,7 @@ new class extends Component {
                                         :title="__('potential-clients.edit')"
                                     />
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="sm"
                                         icon="trash"
                                         wire:click="confirmDelete({{ $potentialClient->id }})"
@@ -227,7 +227,7 @@ new class extends Component {
                                         @endif
                                     </flux:text>
                                     @if ($search || $typeFilter)
-                                        <flux:button wire:click="clearFilters" variant="ghost" class="mt-4">
+                                        <flux:button wire:click="clearFilters" variant="outline" class="mt-4">
                                             {{ __('potential-clients.clear_filters') }}
                                         </flux:button>
                                     @else
@@ -262,7 +262,7 @@ new class extends Component {
             </div>
             <div class="flex gap-2">
                 <flux:spacer />
-                <flux:button variant="ghost" wire:click="cancelDelete">
+                <flux:button variant="outline" wire:click="cancelDelete">
                     {{ __('potential-clients.cancel') }}
                 </flux:button>
                 <flux:button variant="danger" wire:click="delete">
diff --git a/resources/views/livewire/admin/potential-clients/show.blade.php b/resources/views/livewire/admin/potential-clients/show.blade.php
index c04cbc4..d61a82a 100644
--- a/resources/views/livewire/admin/potential-clients/show.blade.php
+++ b/resources/views/livewire/admin/potential-clients/show.blade.php
@@ -31,7 +31,7 @@ new class extends Component {
 <div>
     <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-            <flux:button variant="ghost" :href="route('admin.potential-clients.index')" wire:navigate icon="arrow-left">
+            <flux:button variant="outline" :href="route('admin.potential-clients.index')" wire:navigate icon="arrow-left">
                 {{ __('potential-clients.back_to_list') }}
             </flux:button>
         </div>
@@ -176,7 +176,7 @@ new class extends Component {
             </div>
             <div class="flex gap-2">
                 <flux:spacer />
-                <flux:button variant="ghost" wire:click="cancelDelete">
+                <flux:button variant="outline" wire:click="cancelDelete">
                     {{ __('potential-clients.cancel') }}
                 </flux:button>
                 <flux:button variant="danger" wire:click="delete">
diff --git a/resources/views/livewire/admin/timelines/create.blade.php b/resources/views/livewire/admin/timelines/create.blade.php
index 2751e21..f2a3002 100644
--- a/resources/views/livewire/admin/timelines/create.blade.php
+++ b/resources/views/livewire/admin/timelines/create.blade.php
@@ -106,7 +106,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.dashboard')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.dashboard')" wire:navigate icon="arrow-left">
             {{ __('timelines.back_to_timelines') }}
         </flux:button>
     </div>
@@ -128,7 +128,7 @@ new class extends Component {
                             <div class="font-medium text-zinc-900 ">{{ $selectedUser->full_name }}</div>
                             <div class="text-sm text-zinc-500 ">{{ $selectedUser->email }}</div>
                         </div>
-                        <flux:button variant="ghost" size="sm" wire:click="clearSelection" icon="x-mark" />
+                        <flux:button variant="outline" size="sm" wire:click="clearSelection" icon="x-mark" />
                     </div>
                 @else
                     <div class="relative">
@@ -211,7 +211,7 @@ new class extends Component {
             </flux:field>
 
             <div class="flex items-center justify-end gap-4 border-t border-zinc-200 pt-6 ">
-                <flux:button variant="ghost" :href="route('admin.dashboard')" wire:navigate>
+                <flux:button variant="outline" :href="route('admin.dashboard')" wire:navigate>
                     {{ __('timelines.cancel') }}
                 </flux:button>
                 <flux:button variant="primary" type="submit">
diff --git a/resources/views/livewire/admin/timelines/export-timelines.blade.php b/resources/views/livewire/admin/timelines/export-timelines.blade.php
index fb893aa..aeb9b9d 100644
--- a/resources/views/livewire/admin/timelines/export-timelines.blade.php
+++ b/resources/views/livewire/admin/timelines/export-timelines.blade.php
@@ -280,7 +280,7 @@ new class extends Component {
 
         @if ($clientId || $status !== 'all' || $dateFrom || $dateTo || $includeUpdates)
             <div class="mt-4">
-                <flux:button wire:click="clearFilters" variant="ghost" icon="x-mark" size="sm">
+                <flux:button wire:click="clearFilters" variant="outline" icon="x-mark" size="sm">
                     {{ __('export.clear_filters') }}
                 </flux:button>
             </div>
@@ -312,7 +312,7 @@ new class extends Component {
                     wire:click="exportPdf"
                     wire:loading.attr="disabled"
                     wire:target="exportCsv,exportPdf"
-                    variant="filled"
+                    variant="outline"
                     icon="document-text"
                     class="!bg-zinc-700 !text-white hover:!bg-zinc-800"
                     :disabled="$previewCount === 0"
diff --git a/resources/views/livewire/admin/timelines/index.blade.php b/resources/views/livewire/admin/timelines/index.blade.php
index 38fff28..0a03bd3 100644
--- a/resources/views/livewire/admin/timelines/index.blade.php
+++ b/resources/views/livewire/admin/timelines/index.blade.php
@@ -200,7 +200,7 @@ new class extends Component
             </flux:field>
 
             @if($search || $clientFilter || $statusFilter || $dateFrom || $dateTo)
-                <flux:button wire:click="clearFilters" variant="ghost">
+                <flux:button wire:click="clearFilters" variant="outline">
                     {{ __('common.clear') }}
                 </flux:button>
             @endif
@@ -288,7 +288,7 @@ new class extends Component
 
                     <!-- Updates Count -->
                     <div class="lg:w-20 text-center">
-                        <flux:badge variant="outline" size="sm">
+                        <flux:badge color="zinc" size="sm">
                             {{ $timeline->updates_count }}
                         </flux:badge>
                     </div>
@@ -297,7 +297,7 @@ new class extends Component
                     <div class="lg:w-32 flex gap-2">
                         <flux:button
                             href="{{ route('admin.timelines.show', $timeline) }}"
-                            variant="filled"
+                            variant="outline"
                             size="sm"
                             wire:navigate
                         >
@@ -305,7 +305,7 @@ new class extends Component
                         </flux:button>
 
                         <flux:dropdown>
-                            <flux:button variant="ghost" size="sm" icon="ellipsis-vertical" />
+                            <flux:button variant="outline" size="sm" icon="ellipsis-vertical" />
 
                             <flux:menu>
                                 <flux:menu.item
diff --git a/resources/views/livewire/admin/timelines/show.blade.php b/resources/views/livewire/admin/timelines/show.blade.php
index 7dfccf7..6cab6af 100644
--- a/resources/views/livewire/admin/timelines/show.blade.php
+++ b/resources/views/livewire/admin/timelines/show.blade.php
@@ -151,7 +151,7 @@ new class extends Component {
 
 <div>
     <div class="mb-6">
-        <flux:button variant="ghost" :href="route('admin.dashboard')" wire:navigate icon="arrow-left">
+        <flux:button variant="outline" :href="route('admin.dashboard')" wire:navigate icon="arrow-left">
             {{ __('timelines.back_to_timelines') }}
         </flux:button>
     </div>
@@ -244,7 +244,7 @@ new class extends Component {
                         <flux:button variant="primary" type="submit">
                             {{ __('timelines.save_edit') }}
                         </flux:button>
-                        <flux:button variant="ghost" type="button" wire:click="cancelEdit">
+                        <flux:button variant="outline" type="button" wire:click="cancelEdit">
                             {{ __('timelines.cancel') }}
                         </flux:button>
                     @else
@@ -297,7 +297,7 @@ new class extends Component {
 
                                     @if(!$editingUpdateId && $timeline->isActive())
                                         <flux:button
-                                            variant="ghost"
+                                            variant="outline"
                                             size="sm"
                                             wire:click="editUpdate({{ $update->id }})"
                                             icon="pencil"
@@ -328,7 +328,7 @@ new class extends Component {
 
             <div class="flex justify-end gap-3">
                 <flux:modal.close>
-                    <flux:button variant="ghost">{{ __('timelines.cancel') }}</flux:button>
+                    <flux:button variant="outline">{{ __('timelines.cancel') }}</flux:button>
                 </flux:modal.close>
                 <flux:button variant="danger" wire:click="archive" x-on:click="$flux.modal('archive-confirm').close()">
                     {{ __('timelines.archive') }}
diff --git a/resources/views/livewire/admin/users/export-users.blade.php b/resources/views/livewire/admin/users/export-users.blade.php
index 980ad58..b84286a 100644
--- a/resources/views/livewire/admin/users/export-users.blade.php
+++ b/resources/views/livewire/admin/users/export-users.blade.php
@@ -201,7 +201,7 @@ new class extends Component {
 
         @if ($userType !== 'all' || $status !== 'all' || $dateFrom || $dateTo)
             <div class="mt-4">
-                <flux:button wire:click="clearFilters" variant="ghost" icon="x-mark" size="sm">
+                <flux:button wire:click="clearFilters" variant="outline" icon="x-mark" size="sm">
                     {{ __('export.clear_filters') }}
                 </flux:button>
             </div>
@@ -233,7 +233,7 @@ new class extends Component {
                     wire:click="exportPdf"
                     wire:loading.attr="disabled"
                     wire:target="exportCsv,exportPdf"
-                    variant="filled"
+                    variant="outline"
                     icon="document-text"
                     class="!bg-zinc-700 !text-white hover:!bg-zinc-800"
                     :disabled="$previewCount === 0"
diff --git a/resources/views/livewire/auth/verify-email.blade.php b/resources/views/livewire/auth/verify-email.blade.php
index 1ae520f..a65eda8 100644
--- a/resources/views/livewire/auth/verify-email.blade.php
+++ b/resources/views/livewire/auth/verify-email.blade.php
@@ -20,7 +20,7 @@
 
             <form method="POST" action="{{ route('logout') }}">
                 @csrf
-                <flux:button variant="ghost" type="submit" class="text-sm cursor-pointer" data-test="logout-button">
+                <flux:button variant="outline" type="submit" class="text-sm cursor-pointer" data-test="logout-button">
                     {{ __('Log out') }}
                 </flux:button>
             </form>
diff --git a/resources/views/livewire/availability-calendar.blade.php b/resources/views/livewire/availability-calendar.blade.php
index 340ad9c..9495c05 100644
--- a/resources/views/livewire/availability-calendar.blade.php
+++ b/resources/views/livewire/availability-calendar.blade.php
@@ -158,13 +158,13 @@ new class extends Component
 <div>
     <!-- Calendar Header -->
     <div class="flex items-center justify-between mb-4">
-        <flux:button size="sm" wire:click="previousMonth" variant="ghost">
+        <flux:button size="sm" wire:click="previousMonth" variant="outline">
             <flux:icon name="chevron-{{ app()->getLocale() === 'ar' ? 'right' : 'left' }}" class="size-5" />
         </flux:button>
 
         <flux:heading size="lg" class="text-body">{{ $monthName }}</flux:heading>
 
-        <flux:button size="sm" wire:click="nextMonth" variant="ghost">
+        <flux:button size="sm" wire:click="nextMonth" variant="outline">
             <flux:icon name="chevron-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}" class="size-5" />
         </flux:button>
     </div>
diff --git a/resources/views/livewire/client/dashboard.blade.php b/resources/views/livewire/client/dashboard.blade.php
index 200bf85..f205410 100644
--- a/resources/views/livewire/client/dashboard.blade.php
+++ b/resources/views/livewire/client/dashboard.blade.php
@@ -78,7 +78,7 @@ new class extends Component {
                         </div>
                         <div class="pt-2">
                             <flux:button
-                                variant="ghost"
+                                variant="outline"
                                 size="sm"
                                 :href="route('client.consultations.index')"
                                 wire:navigate
@@ -134,7 +134,7 @@ new class extends Component {
                         @endif
                         <div class="pt-2">
                             <flux:button
-                                variant="ghost"
+                                variant="outline"
                                 size="sm"
                                 :href="route('client.timelines.index')"
                                 wire:navigate
@@ -174,7 +174,7 @@ new class extends Component {
                                         </flux:text>
                                     </div>
                                     <flux:button
-                                        variant="ghost"
+                                        variant="outline"
                                         size="xs"
                                         :href="route('client.timelines.show', $update->timeline)"
                                         wire:navigate
diff --git a/resources/views/livewire/client/timelines/index.blade.php b/resources/views/livewire/client/timelines/index.blade.php
index aab82ec..754519c 100644
--- a/resources/views/livewire/client/timelines/index.blade.php
+++ b/resources/views/livewire/client/timelines/index.blade.php
@@ -52,7 +52,7 @@ new class extends Component
                                 </p>
                             </div>
                             <div class="flex items-center gap-2 flex-shrink-0">
-                                <flux:badge variant="success">{{ __('client.active') }}</flux:badge>
+                                <flux:badge color="green">{{ __('client.active') }}</flux:badge>
                                 <flux:button size="sm" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
                                     {{ __('client.view') }}
                                 </flux:button>
@@ -88,7 +88,7 @@ new class extends Component
                             </div>
                             <div class="flex items-center gap-2 flex-shrink-0">
                                 <flux:badge>{{ __('client.archived') }}</flux:badge>
-                                <flux:button size="sm" variant="ghost" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
+                                <flux:button size="sm" variant="outline" href="{{ route('client.timelines.show', $timeline) }}" class="min-h-[44px]">
                                     {{ __('client.view') }}
                                 </flux:button>
                             </div>
diff --git a/resources/views/livewire/client/timelines/show.blade.php b/resources/views/livewire/client/timelines/show.blade.php
index 05bec6c..39d84bb 100644
--- a/resources/views/livewire/client/timelines/show.blade.php
+++ b/resources/views/livewire/client/timelines/show.blade.php
@@ -25,7 +25,7 @@ new class extends Component
                 <p class="text-zinc-600 ">{{ __('client.reference') }}: {{ $timeline->case_reference }}</p>
             @endif
         </div>
-        <flux:badge :variant="$timeline->status->value === 'active' ? 'success' : 'default'">
+        <flux:badge :color="$timeline->status->value === 'active' ? 'green' : 'zinc'">
             {{ __('client.' . $timeline->status->value) }}
         </flux:badge>
     </div>
diff --git a/resources/views/livewire/settings/delete-user-form.blade.php b/resources/views/livewire/settings/delete-user-form.blade.php
index 6c064cf..cac10f2 100644
--- a/resources/views/livewire/settings/delete-user-form.blade.php
+++ b/resources/views/livewire/settings/delete-user-form.blade.php
@@ -48,7 +48,7 @@ new class extends Component {
 
             <div class="flex justify-end space-x-2 rtl:space-x-reverse">
                 <flux:modal.close>
-                    <flux:button variant="filled">{{ __('Cancel') }}</flux:button>
+                    <flux:button variant="outline">{{ __('Cancel') }}</flux:button>
                 </flux:modal.close>
 
                 <flux:button variant="danger" type="submit" data-test="confirm-delete-user-button">
diff --git a/resources/views/livewire/settings/two-factor/recovery-codes.blade.php b/resources/views/livewire/settings/two-factor/recovery-codes.blade.php
index 9b9a9a1..0265038 100644
--- a/resources/views/livewire/settings/two-factor/recovery-codes.blade.php
+++ b/resources/views/livewire/settings/two-factor/recovery-codes.blade.php
@@ -90,7 +90,7 @@ new class extends Component {
                 <flux:button
                     x-show="showRecoveryCodes"
                     icon="arrow-path"
-                    variant="filled"
+                    variant="outline"
                     wire:click="regenerateRecoveryCodes"
                 >
                     {{ __('Regenerate Codes') }}