diff --git a/app/Livewire/Components/Table.php b/app/Livewire/Components/Table.php
index 80c04c1..8bcaefa 100644
--- a/app/Livewire/Components/Table.php
+++ b/app/Livewire/Components/Table.php
@@ -19,6 +19,31 @@ class Table extends Component
     public $sortField = null;   // Column to sort
     public $sortDirection = 'asc';  // Default sort direction
 
+    // Inside App\Livewire\Components\Table
+
+public $showModal = false;
+public $modalMode = 'view'; // or 'edit'
+public $modalData = [];
+
+public function viewRow($id)
+{
+    $this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
+    $this->modalMode = 'view';
+    $this->showModal = true;
+}
+
+public function editRow($id)
+{
+    $this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
+    $this->modalMode = 'edit';
+    $this->showModal = true;
+}
+
+public function closeModal()
+{
+    $this->showModal = false;
+    $this->modalData = [];
+}
 
     public function mount($columns, $rows, $addRoute = null)
     {
@@ -53,7 +78,7 @@ class Table extends Component
         }
     }
 
-    // Simplified version
+    // Sorting
     public function sortBy($field)
     {
         if ($this->sortField === $field) {
diff --git a/resources/views/livewire/components/table.blade.php b/resources/views/livewire/components/table.blade.php
index fbbf26d..6dbf7c9 100644
--- a/resources/views/livewire/components/table.blade.php
+++ b/resources/views/livewire/components/table.blade.php
@@ -2,90 +2,126 @@
     <div class="p-4 bg-white shadow-md">
         <!-- Top Bar with Search & Add Button -->
         <div class="mb-4 flex items-center justify-between">
-            <input type="text" wire:model.debounce.500ms="search" 
+            <input type="text" wire:model.debounce.500ms="search"
                 class="w-80 p-2 border border-gray-300 rounded-md"
-                placeholder="Search..." 
+                placeholder="Search..."
                 autofocus>
 
-                @if ($hasAddButton && $addRoute)
-                    <a href="{{ $addRoute }}" wire:navigate
-                    class="ml-4 px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
-                        + Add
-                    </a>
-                @endif
+            @if ($hasAddButton && $addRoute)
+            <a href="{{ $addRoute }}" wire:navigate
+                class="ml-4 px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600">
+                + Add
+            </a>
+            @endif
         </div>
 
         <table class="table-auto w-full">
             <thead class="bg-gray-100">
                 <tr>
                     @if ($hasCheckbox)
-                        <th class="px-4 py-2 text-left">
-                            <input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
-                        </th>
+                    <th class="px-4 py-2 text-left">
+                        <input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
+                    </th>
                     @endif
 
                     @foreach ($columns as $column)
-                        <th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
-                            {{ $column['label'] }}
-                            @if ($sortField === $column['field'])
-                                @if ($sortDirection === 'asc')
-                                    <span class="ml-2">&#8593;</span>
-                                @else
-                                    <span class="ml-2">&#8595;</span>
-                                @endif
-                            @else
-                                <span class="ml-2">&#8597;</span>
-                            @endif
-                        </th>
+                    <th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
+                        {{ $column['label'] }}
+                        @if ($sortField === $column['field'])
+                        @if ($sortDirection === 'asc')
+                        <span class="ml-2">&#8593;</span>
+                        @else
+                        <span class="ml-2">&#8595;</span>
+                        @endif
+                        @else
+                        <span class="ml-2">&#8597;</span>
+                        @endif
+                    </th>
                     @endforeach
 
                     @if ($hasActions)
-                        <th class="px-4 py-2 text-left">Actions</th>
+                    <th class="px-4 py-2 text-left">Actions</th>
                     @endif
                 </tr>
             </thead>
             <tbody>
                 @forelse ($rows as $row)
-                    <tr class="hover:bg-gray-50">
-                        @if ($hasCheckbox)
-                            <td class="px-4 py-2">
-                                <input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')" 
-                                       @if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer">
-                            </td>
-                        @endif
+                <tr class="hover:bg-gray-50">
+                    @if ($hasCheckbox)
+                    <td class="px-4 py-2">
+                        <input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')"
+                            @if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer">
+                    </td>
+                    @endif
 
-                        @foreach ($columns as $column)
-                            <td class="px-4 py-2">
-                                {{ $row[$column['field']] ?? '' }}
-                            </td>
-                        @endforeach
+                    @foreach ($columns as $column)
+                    <td class="px-4 py-2">
+                        {{ $row[$column['field']] ?? '' }}
+                    </td>
+                    @endforeach
 
-                        @if ($hasActions)
-                            <td class="px-4 py-2 gap-2 flex">
-                                @if($isViewPage)
-                                    <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
-                                        <i class="fas fa-eye"></i>
-                                    </button>
-                                @else
-                                    <button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
-                                        <i class="fas fa-edit"></i>
-                                    </button>
-                                    <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
-                                        <i class="fas fa-eye"></i>
-                                    </button>
-                                    <button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
-                                        <i class="fas fa-trash-alt"></i>
-                                    </button>
-                                @endif
-                            </td>
+                    @if ($hasActions)
+                    <td class="px-4 py-2 gap-2 flex">
+                        @if($isViewPage)
+                        <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                        @else
+                        <button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
+                            <i class="fas fa-edit"></i>
+                        </button>
+                        <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                        <button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
                         @endif
-                    </tr>
+                    </td>
+                    @endif
+                    @if ($showModal)
+                    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
+                        <div class="bg-white p-6 rounded-lg shadow-lg w-1/2">
+                            <div class="flex justify-between items-center mb-4">
+                                <h2 class="text-lg font-semibold">
+                                    {{ $modalMode === 'view' ? 'View Details' : 'Edit Details' }}
+                                </h2>
+                                <button wire:click="closeModal" class="text-gray-600 hover:text-gray-800">&times;</button>
+                            </div>
+                            <div class="space-y-4">
+                                @foreach ($columns as $column)
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700">
+                                        {{ $column['label'] }}
+                                    </label>
+                                    @if ($modalMode === 'edit')
+                                    <input type="text" wire:model.defer="modalData.{{ $column['field'] }}"
+                                        class="mt-1 p-2 border border-gray-300 rounded w-full">
+                                    @else
+                                    <div class="mt-1 p-2 bg-gray-100 rounded">
+                                        {{ $modalData[$column['field']] ?? '' }}
+                                    </div>
+                                    @endif
+                                </div>
+                                @endforeach
+                            </div>
+                            @if ($modalMode === 'edit')
+                            <div class="mt-6 flex justify-end">
+                                <button wire:click="saveRow" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+                                    Save
+                                </button>
+                            </div>
+                            @endif
+                        </div>
+                    </div>
+                    @endif
+                </tr>
                 @empty
-                    <tr>
-                        <td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
-                    </tr>
+                <tr>
+                    <td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
+                </tr>
                 @endforelse
             </tbody>
         </table>
     </div>
-</div>
+</div>
\ No newline at end of file