diff --git a/resources/views/components/⚡contact-list.blade.php b/resources/views/components/⚡contact-list.blade.php
new file mode 100644
index 0000000..15b1a7a
--- /dev/null
+++ b/resources/views/components/⚡contact-list.blade.php
@@ -0,0 +1,89 @@
+<?php
+
+use App\Models\Contact;
+use Livewire\Component;
+use Livewire\Attributes\Computed;
+use Livewire\Attributes\On;
+use Livewire\WithPagination;
+
+new class extends Component {
+    use WithPagination;
+
+    public string $sortBy = 'last_name';
+    public string $sortDirection = 'asc';
+
+    public function sort($column): void
+    {
+        if ($this->sortBy === $column) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortBy        = $column;
+            $this->sortDirection = 'asc';
+        }
+    }
+
+    #[On('contact-created')]
+    #[On('contact-updated')]
+    public function refresh(): void {}
+
+    #[Computed]
+    public function contacts()
+    {
+        return Contact::orderBy($this->sortBy, $this->sortDirection)->paginate(10);
+    }
+};
+?>
+
+<!--suppress RequiredAttributes -->
+<div>
+    <flux:table :paginate="$this->contacts">
+        <flux:table.columns>
+            <flux:table.column sortable :sorted="$sortBy === 'first_name'" :direction="$sortDirection"
+                               wire:click="sort('first_name')">
+                First Name
+            </flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'last_name'" :direction="$sortDirection"
+                               wire:click="sort('last_name')">
+                Last Name
+            </flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'email'" :direction="$sortDirection"
+                               wire:click="sort('email')">
+                Email
+            </flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'phone'" :direction="$sortDirection"
+                               wire:click="sort('phone')">
+                Phone
+            </flux:table.column>
+            <flux:table.column sortable :sorted="$sortBy === 'created_at'" :direction="$sortDirection"
+                               wire:click="sort('created_at')">
+                Created
+            </flux:table.column>
+            <flux:table.column></flux:table.column>
+        </flux:table.columns>
+
+        <flux:table.rows>
+            @foreach($this->contacts as $contact)
+                <flux:table.row :key="$contact->id">
+                    <flux:table.cell>{{ $contact->first_name }}</flux:table.cell>
+                    <flux:table.cell>{{ $contact->last_name }}</flux:table.cell>
+                    <flux:table.cell>{{ $contact->email }}</flux:table.cell>
+                    <flux:table.cell>{{ $contact->phone }}</flux:table.cell>
+                    <flux:table.cell>{{ $contact->created_at->local()->format('m/d/Y | g:i A') }}</flux:table.cell>
+                    <flux:table.cell>
+                        <flux:dropdown position="bottom" align="start">
+                            <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal"
+                                         inset="top bottom"></flux:button>
+
+                            <flux:navmenu>
+                                <flux:menu.group heading="{{ $contact->first_name }} {{ $contact->last_name }}">
+                                    <flux:menu.separator></flux:menu.separator>
+                                    <flux:menu.item wire:click="$dispatch('edit-contact', { contactId: {{ $contact->id }} })" icon="pencil">Edit</flux:menu.item>
+                                </flux:menu.group>
+                            </flux:navmenu>
+                        </flux:dropdown>
+                    </flux:table.cell>
+                </flux:table.row>
+            @endforeach
+        </flux:table.rows>
+    </flux:table>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/⚡create-contact.blade.php b/resources/views/components/⚡create-contact.blade.php
new file mode 100644
index 0000000..b195a4a
--- /dev/null
+++ b/resources/views/components/⚡create-contact.blade.php
@@ -0,0 +1,61 @@
+<?php
+
+use App\Models\Contact;
+use Livewire\Component;
+use Livewire\Attributes\Validate;
+use Flux\Flux;
+
+new class extends Component {
+    #[Validate('required|string|max:255')]
+    public string $first_name = '';
+
+    #[Validate('required|string|max:255')]
+    public string $last_name = '';
+
+    #[Validate('required|email|max:255|unique:contacts,email')]
+    public string $email = '';
+
+    #[Validate('nullable|string|max:20')]
+    public string $phone = '';
+
+    public function save(): void
+    {
+        $this->validate();
+
+        Contact::create([
+            'first_name' => $this->first_name,
+            'last_name' => $this->last_name,
+            'email' => $this->email,
+            'phone' => $this->phone ?: null,
+        ]);
+
+        $this->reset();
+        Flux::modal('create-contact')->close();
+        $this->dispatch('contact-created');
+    }
+};
+?>
+
+<div>
+    <flux:modal.trigger name="create-contact">
+        <flux:button icon="plus" variant="primary">
+            New Contact
+        </flux:button>
+    </flux:modal.trigger>
+
+    <flux:modal name="create-contact" class="md:w-96">
+        <form wire:submit="save" class="space-y-6">
+            <flux:heading size="lg">Create Contact</flux:heading>
+
+            <flux:input label="First Name" wire:model="first_name" />
+            <flux:input label="Last Name" wire:model="last_name" />
+            <flux:input label="Email" wire:model="email" type="email" />
+            <flux:input label="Phone" wire:model="phone" type="tel" />
+
+            <div class="flex gap-2">
+                <flux:spacer />
+                <flux:button type="submit" variant="primary">Create</flux:button>
+            </div>
+        </form>
+    </flux:modal>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/⚡edit-contact.blade.php b/resources/views/components/⚡edit-contact.blade.php
new file mode 100644
index 0000000..637e58e
--- /dev/null
+++ b/resources/views/components/⚡edit-contact.blade.php
@@ -0,0 +1,79 @@
+<?php
+
+use App\Models\Contact;
+use Livewire\Component;
+use Livewire\Attributes\Validate;
+use Livewire\Attributes\On;
+use Flux\Flux;
+
+new class extends Component {
+    public ?int $contactId = null;
+
+    #[Validate('required|string|max:255')]
+    public string $first_name = '';
+
+    #[Validate('required|string|max:255')]
+    public string $last_name = '';
+
+    #[Validate('required|email|max:255')]
+    public string $email = '';
+
+    #[Validate('nullable|string|max:20')]
+    public string $phone = '';
+
+    #[On('edit-contact')]
+    public function edit(int $contactId): void
+    {
+        $this->contactId = $contactId;
+        $contact = Contact::findOrFail($contactId);
+
+        $this->first_name = $contact->first_name;
+        $this->last_name = $contact->last_name;
+        $this->email = $contact->email;
+        $this->phone = $contact->phone ?? '';
+
+        $this->resetValidation();
+        Flux::modal('edit-contact')->show();
+    }
+
+    public function save(): void
+    {
+        $this->validate([
+            'first_name' => 'required|string|max:255',
+            'last_name' => 'required|string|max:255',
+            'email' => 'required|email|max:255|unique:contacts,email,' . $this->contactId,
+            'phone' => 'nullable|string|max:20',
+        ]);
+
+        $contact = Contact::findOrFail($this->contactId);
+        $contact->update([
+            'first_name' => $this->first_name,
+            'last_name' => $this->last_name,
+            'email' => $this->email,
+            'phone' => $this->phone ?: null,
+        ]);
+
+        $this->reset();
+        Flux::modal('edit-contact')->close();
+        $this->dispatch('contact-updated');
+    }
+};
+?>
+
+<div>
+    <flux:modal name="edit-contact" class="md:w-96">
+        <form wire:submit="save" class="space-y-6">
+            <flux:heading size="lg">Edit Contact</flux:heading>
+
+            <flux:input label="First Name" wire:model="first_name" />
+            <flux:input label="Last Name" wire:model="last_name" />
+            <flux:input label="Email" wire:model="email" type="email" />
+            <flux:input label="Phone" wire:model="phone" type="tel" />
+
+            <div class="flex gap-2">
+                <flux:spacer />
+                <flux:button type="submit" variant="primary">Save</flux:button>
+            </div>
+        </form>
+    </flux:modal>
+</div>
\ No newline at end of file
diff --git a/resources/views/contacts/index.blade.php b/resources/views/contacts/index.blade.php
index e69de29..4ae884d 100644
--- a/resources/views/contacts/index.blade.php
+++ b/resources/views/contacts/index.blade.php
@@ -0,0 +1,9 @@
+<x-layouts::app :title="__('Contacts')">
+    <div class="max-w-7xl mx-auto space-y-4">
+        <div class="flex justify-end">
+            <livewire:create-contact />
+        </div>
+        <livewire:contact-list />
+        <livewire:edit-contact />
+    </div>
+</x-layouts::app>