diff --git a/app/Livewire/Admin/EditUserModal.php b/app/Livewire/Admin/EditUserModal.php
new file mode 100644
index 0000000..baf641e
--- /dev/null
+++ b/app/Livewire/Admin/EditUserModal.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Livewire\Admin;
+
+use LivewireUI\Modal\ModalComponent;
+use App\Models\User;
+
+class EditUserModal extends ModalComponent
+{
+    public $userId;
+    public $name;
+    public $email;
+
+    public function mount($userId)
+    {
+        $user = User::findOrFail($userId);
+        $this->userId = $user->id;
+        $this->name = $user->name;
+        $this->email = $user->email;
+    }
+
+    public function save()
+    {
+        $this->validate([
+            'name' => 'required',
+            'email' => 'required|email',
+        ]);
+
+        User::find($this->userId)->update([
+            'name' => $this->name,
+            'email' => $this->email,
+        ]);
+
+        $this->closeModal(); 
+        $this->dispatch('notify', '使用者更新成功');
+    }
+    
+    public function render()
+    {
+        return view('livewire.admin.edit-user-modal');
+    }
+}
diff --git a/app/Livewire/Admin/UserTable.php b/app/Livewire/Admin/UserTable.php
new file mode 100644
index 0000000..3ba91db
--- /dev/null
+++ b/app/Livewire/Admin/UserTable.php
@@ -0,0 +1,148 @@
+<?php
+
+namespace App\Livewire\Admin;
+
+use App\Models\User;
+use Illuminate\Support\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+use PowerComponents\LivewirePowerGrid\Button;
+use PowerComponents\LivewirePowerGrid\Column;
+use PowerComponents\LivewirePowerGrid\Facades\Filter;
+use PowerComponents\LivewirePowerGrid\Facades\PowerGrid;
+use PowerComponents\LivewirePowerGrid\PowerGridFields;
+use PowerComponents\LivewirePowerGrid\PowerGridComponent;
+use PowerComponents\LivewirePowerGrid\Traits\WithExport; 
+use PowerComponents\LivewirePowerGrid\Components\SetUp\Exportable; 
+use PowerComponents\LivewirePowerGrid\Facades\Rule;
+use Livewire\Attributes\On;
+
+final class UserTable extends PowerGridComponent
+{
+    use WithExport; 
+ 
+    public string $tableName = 'user-table';
+
+    public bool $showFilters = false;
+
+    public bool $showEditModal = false;
+    public $editingUserId;
+    public $name;
+    public $email;
+
+    public function boot(): void
+    {
+        config(['livewire-powergrid.filter' => 'outside']);
+    }
+
+    /* */
+   
+
+    public function setUp(): array
+    {
+        $this->showCheckBox();
+
+        return [
+            PowerGrid::exportable(fileName: 'my-export-file') 
+            ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
+            PowerGrid::header()
+                //->showSoftDeletes() 
+                ->showToggleColumns()
+                ->showSearchInput(),
+            PowerGrid::footer()->showPerPage()->showRecordCount(),
+        ];
+    }
+    public function header(): array
+    {
+        return [
+            Button::add('bulk-delete')
+                ->slot('Bulk delete (<span x-text="window.pgBulkActions.count(\'' . $this->tableName . '\')"></span>)')
+                ->icon('solid-trash',['id' => 'my-custom-icon-id', 'class' => 'font-bold'])
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatch('bulkDelete.' . $this->tableName, []),
+        ];
+    } 
+
+    public function datasource(): Builder
+    {
+        return User::query();
+    }
+
+    public function relationSearch(): array
+    {
+        return [];
+    }
+
+    public function fields(): PowerGridFields
+    {
+        return PowerGrid::fields()
+            ->add('id')
+            ->add('name')
+            ->add('email')
+            ->add('created_at_formatted', fn (User $model) => Carbon::parse($model->created_at)->format('d/m/Y H:i:s'));
+    }
+
+    public function columns(): array
+    {
+        return [
+            Column::make('ID', 'id'),
+            Column::make('名稱', 'name')->sortable()->searchable(),
+            Column::make('Email', 'email')->sortable()->searchable(),
+            Column::make('建立時間', 'created_at_formatted', 'created_at')->sortable(),
+            Column::action('操作')
+        ];
+    }
+
+    public function filters(): array
+    {
+        return [
+            Filter::inputText('name')->placeholder('Dish Name'),
+            Filter::inputText('email')->placeholder('Dish Email'),
+            Filter::datetimepicker('created_at'),
+        ];
+    }
+
+    public function actions(User $row): array
+    {
+        return [
+            Button::add('edit')
+            ->slot('編輯')
+            ->icon('solid-pencil-square')
+            ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+            ->openModal('admin.edit-user-modal', ['userId' => $row->id]),
+            Button::add('delete')
+            ->slot('刪除')
+            ->icon('solid-trash')
+            ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+            ->confirmPrompt('確定要刪除這位使用者嗎？|DELETE', 'DELETE') // 使用 'DELETE' 作為標識符
+            ->dispatch('delete-user', ['userId' => $row->id]),
+        ];
+    }
+    #[On('bulkDelete.{tableName}')]
+    public function bulkDelete(): void
+    {
+        $this->js('alert(window.pgBulkActions.get(\'' . $this->tableName . '\'))');
+        if($this->checkboxValues){
+            User::destroy($this->checkboxValues);
+            $this->js('window.pgBulkActions.clearAll()'); // clear the count on the interface.
+        }
+    }
+    
+    #[\Livewire\Attributes\On('delete-user')]
+    public function deleteUser($userId): void
+    {
+        User::findOrFail($userId)->delete();
+
+        $this->dispatch('notify', '刪除成功');
+    }
+    
+    /* public function actionRules($row): array
+    {
+       return [
+            // Hide button edit for ID 1
+            Rule::button('edit')
+                ->when(fn($row) => $row->id === 1)
+                ->hide(),
+        ];
+    }  */
+    
+}
diff --git a/app/Livewire/Admin/Users.php b/app/Livewire/Admin/Users.php
deleted file mode 100644
index 52fd57f..0000000
--- a/app/Livewire/Admin/Users.php
+++ /dev/null
@@ -1,104 +0,0 @@
-<?php
-
-namespace App\Livewire\Admin;
-
-use Livewire\Component;
-use Livewire\WithPagination;
-use App\Models\User;
-use Spatie\Permission\Models\Role;
-
-class Users extends Component
-{
-    use WithPagination;
-
-
-    public $search = '';
-    public $name = '';
-    public bool $showCreateModal = false;
-    public ?int $editingUserId = null;
-    public string $sortField = 'id';
-    public string $sortDirection = 'asc';
-    public $roles = []; // 所有權限清單
-    public $selectedRoles = []; // 表單中選到的權限
-    
-    protected $rules = [
-        'name' => 'required|string|max:255',
-    ];
-
-    protected $paginationTheme = 'tailwind';
-
-    public function getUsersProperty()
-    {
-        return User::where('name', 'like', "%{$this->search}%")
-            ->orderBy($this->sortField, $this->sortDirection)
-            ->paginate(10);
-    }
-
-    public function sortBy($field)
-    {
-        if ($this->sortField === $field) {
-            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
-        } else {
-            $this->sortField = $field;
-            $this->sortDirection = 'asc';
-        }
-    }
-    public function mount()
-    {
-        $this->roles = Role::all();
-    }
-
-    public function openCreateModal()
-    {
-        $this->resetFields();
-        $this->showCreateModal = true;
-    }
-
-    public function openEditModal($id)
-    {
-        $user = User::findOrFail($id);
-        $this->editingUserId = $user->id;
-        $this->name = $user->name;
-        $this->selectedRoles = $user->roles()->pluck('id')->toArray();
-        $this->showCreateModal = true;
-    }
-
-    public function save()
-    {
-        $this->validate();
-
-        if ($this->editingRoleId) {
-            $role = User::findOrFail($this->editingRoleId);
-            $role->update(['name' => $this->name]);
-            $role->syncRolses($this->selectedRoles);
-            session()->flash('message', '使用者已更新');
-        } else {
-            $role = User::create(['name' => $this->name]);
-            $role->syncRolses($this->selectedRoles);
-            session()->flash('message', '使用者已新增');
-        }
-
-        $this->resetFields();
-        $this->showCreateModal = false;
-    }
-
-    public function delete($id)
-    {
-        User::findOrFail($id)->delete();
-        session()->flash('message', '使用者已刪除');
-    }
-
-    public function resetFields()
-    {
-        $this->name = '';
-        $this->selectedRoles = [];
-        $this->editingUserId = null;
-    }
-
-    public function render()
-    {
-        return view('livewire.admin.users', [
-            'users' => $this->users,
-        ])->layout('layouts.admin');
-    }
-}
diff --git a/resources/views/livewire/admin/edit-user-modal.blade.php b/resources/views/livewire/admin/edit-user-modal.blade.php
new file mode 100644
index 0000000..2efe871
--- /dev/null
+++ b/resources/views/livewire/admin/edit-user-modal.blade.php
@@ -0,0 +1,16 @@
+<div class="p-6 space-y-4">
+    <h2 class="text-xl font-semibold">編輯使用者</h2>
+
+    <div>
+        <x-wireui:input label="名稱" wire:model.defer="name" />
+    </div>
+
+    <div>
+        <x-wireui:input label="Email" type="email" wire:model.defer="email" />
+    </div>
+
+    <div class="flex justify-end gap-2 mt-4">
+        <x-wireui:button flat label="取消" wire:click="closeModal" />
+        <x-wireui:button primary label="儲存" wire:click="save" />
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/livewire/admin/users.blade.php b/resources/views/livewire/admin/users.blade.php
index ff16b18..9087979 100644
--- a/resources/views/livewire/admin/users.blade.php
+++ b/resources/views/livewire/admin/users.blade.php
@@ -1,65 +1,20 @@
-<div class="space-y-4">
-    <div class="flex justify-between items-center">
-        <h2 class="text-xl font-bold">{{ __('users.list') }}</h2>
-        <x-button primary label="{{__('users.CreateNewRole')}}" wire:click="openCreateModal" />
-    </div>
-    
-    <div class="flex items-center gap-2">
-        <x-input wire:model.debounce.300ms="search" placeholder="搜尋使用者名稱..." class="w-64" />
-    </div>
 
-    
-    <x-table divider="thin" has_shadow="true" celled="true">
-         <x-slot name="header">
-            <th class="cursor-pointer" wire:click="sortBy('id')">{{__('users.no')}}</th>
-            <th class="cursor-pointer" wire:click="sortBy('name')">{{__('users.name')}}</th>
-            <th>{{__('users.action')}}</th>
-        </x-slot>
-        @forelse ($users as $user)
-            <tr>
-                <td>{{ $user->id }}</td>
-                <td>{{ $user->name }}</td>
-                <td class="space-x-2">
-                    @can('role-edit')
-                        <x-button  flat label="{{ __('users.edit') }}" color="yellow" icon="pencil-square"  wire:click="openEditModal({{ $user->id }})" />
-                    @endcan
-                    @can('role-delete')
-                        <x-button  flat label="{{ __('users.delete') }}" color="red" icon="trash" wire:click="delete({{ $user->id }})" />
-                    @endcan
-                </td>
-            </tr>
-        @empty
-            <tr>
-                <td colspan="3">{{ __('No users found.') }}</td>
-            </tr>
-        @endforelse
-    </x-table>
+<x-layouts.admin>
+    <x-slot name="header">
+        使用者管理
+    </x-slot>
 
-    <div class="mt-4">
-        {!! $users->links('pagination::tailwind') !!}
-    </div>
-
-    @if ($showCreateModal)
-        <x-modal-card title="{{ $editingUserId ? '編輯使用者' : '新增使用者' }}" blur wire:model.defer="showCreateModal">
-            <div class="space-y-4">
-                <x-input label="使用者名稱" wire:model.defer="name" />
-
-                <x-select
-                    label="角色"
-                    wire:model.defer="selectedRoles"
-                    placeholder="選擇角色"
-                    option-label="label"
-                    option-value="value"
-                    :options="$roles->map(fn($p) => ['value' => $p->id, 'label' => $p->name])->toArray()"
-                />
-            </div>
-
-            <x-slot name="footer">
-                <div class="flex justify-center gap-2">
-                    <x-button primary label="{{__('users.cancel')}}" x-on:click="$dispatch('close')" />
-                    <x-button primary label="{{__('users.submit')}}" wire:click="save" />
-                </div>
-            </x-slot>
-        </x-modal-card>
+    @if (session()->has('message'))
+        <x-wireui:notifications />
+        <script>
+            window.$wireui.notify({
+                title: '提示',
+                description: '{{ session('message') }}',
+                icon: 'success'
+            });
+        </script>
     @endif
-</div>
\ No newline at end of file
+
+    {{-- 單一 Livewire 元件，內含資料表與 Modal --}}
+    <livewire:admin.user-table />
+</x-layouts.admin>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index add497b..27fbb0d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -4,7 +4,7 @@ use Illuminate\Support\Facades\Route;
 
 use App\Livewire\Admin\Dashboard as AdminDashboard;
 use App\Livewire\Admin\Roles;
-use App\Livewire\Admin\Users;
+use App\Livewire\Admin\UserTable;
 
 Route::view('/', 'welcome');
 
@@ -19,7 +19,11 @@ Route::view('profile', 'profile')
 require __DIR__.'/auth.php';
 
 Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function () {
+    Route::get('/users', function () {
+        return view('livewire.admin.users');
+    })->name('users');
     Route::get('/dashboard', AdminDashboard::class)->name('dashboard');
     Route::get('/roles', Roles::class)->name('roles');
-    Route::get('/users', Users::class)->name('users');
+    //Route::get('/users', Users::class)->name('users');
+    Route::get('/users-table', UserTable::class)->name('users-table'); 
 });
\ No newline at end of file