diff --git a/app/Livewire/Admin/EditUserModal.php b/app/Livewire/Admin/EditUserModal.php
deleted file mode 100644
index baf641e..0000000
--- a/app/Livewire/Admin/EditUserModal.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<?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/RoleForm.php b/app/Livewire/Admin/RoleForm.php
new file mode 100644
index 0000000..482af39
--- /dev/null
+++ b/app/Livewire/Admin/RoleForm.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Livewire\Admin;
+
+use Livewire\Component;
+
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+
+class RoleForm extends Component
+{
+    protected $listeners = ['openCreateRoleModal','openEditRoleModal', 'deleteRole'];
+
+    public $showCreateModal=false;
+    public ?int $roleId = null;
+    public $name = '';
+    public $permissions = []; // 所有權限清單
+    public $selectedPermissions = []; // 表單中選到的權限
+
+   
+
+    public function mount()
+    {
+        $this->permissions = Permission::all();
+    }
+
+    public function openCreateRoleModal()
+    {
+        $this->resetFields();
+        $this->showCreateModal = true;
+    }
+
+    public function openEditRoleModal($id)
+    {
+        $role = Role::findOrFail($id);
+        $this->roleId = $role->id;
+        $this->name = $role->name;
+        $this->selectedPermissions = $role->permissions()->pluck('id')->toArray();
+        $this->showCreateModal = true;
+    }
+    
+    public function save()
+    {
+        $this->validate([
+            'name' => 'required|string|max:255',
+            'selectedPermissions' => 'array',
+        ]);
+        
+        if ($this->roleId) {
+            $role = Role::findOrFail($this->roleId);
+            $role->update(['name' => $this->name]);
+            $role->syncPermissions($this->selectedPermissions);
+            session()->flash('message', '角色已更新');
+        } else {
+            $role = Role::create(['name' => $this->name]);
+            $role->syncPermissions($this->selectedPermissions);
+            session()->flash('message', '角色已新增');
+        }
+
+        $this->resetFields();
+        $this->showCreateModal = false;
+    }
+
+    public function deleteRole($id)
+    {
+        Role::findOrFail($id)->delete();
+        session()->flash('message', '角色已刪除');
+    }
+
+    public function resetFields()
+    {
+        $this->name = '';
+        $this->selectedPermissions = [];
+        $this->roleId = null;
+    }
+
+    public function render()
+    {
+        return view('livewire.admin.role-form');
+    }
+}
diff --git a/app/Livewire/Admin/RoleTable.php b/app/Livewire/Admin/RoleTable.php
new file mode 100644
index 0000000..ad4223c
--- /dev/null
+++ b/app/Livewire/Admin/RoleTable.php
@@ -0,0 +1,104 @@
+<?php
+
+namespace App\Livewire\Admin;
+
+use Spatie\Permission\Models\Role;
+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;
+
+final class RoleTable extends PowerGridComponent
+{
+    public string $tableName = 'role-table';
+
+    public function boot(): void
+    {
+        config(['livewire-powergrid.filter' => 'outside']);
+    }
+
+    public function setUp(): array
+    {
+        //$this->showCheckBox();
+
+        return [
+            //PowerGrid::header()
+            //    ->showSearchInput(),
+            //PowerGrid::footer()
+            //    ->showPerPage()
+            //    ->showRecordCount(),
+        ];
+    }
+
+    public function datasource(): Builder
+    {
+       //dd(Role::with('permissions'));
+        return Role::with('permissions');
+    }
+
+    public function relationSearch(): array
+    {
+        return [];
+    }
+
+    public function fields(): PowerGridFields
+    {
+        return PowerGrid::fields()
+            ->add('id')
+            ->add('name')
+            ->add('created_at_formatted', fn (Role $model) => Carbon::parse($model->created_at)->format('d/m/Y H:i:s'));
+    }
+
+    public function columns(): array
+    {
+        return [
+            Column::make('ID', 'id')->sortable()->searchable(),
+            Column::make('名稱', 'name')->sortable()->searchable(),
+            //Column::make('權限', 'permissions_list', function ($role) {
+            //    return $role->permissions->pluck('name')->implode(', ');
+            //}),
+            Column::make('Created at', 'created_at_formatted', 'created_at')->sortable(),
+            Column::action('Action')
+        ];
+    }
+
+    public function filters(): array
+    {
+        return [
+            Filter::datetimepicker('created_at'),
+        ];
+    }
+
+
+    public function actions(Role $row): array
+    {
+        return [
+            Button::add('edit')
+                ->slot('編輯')
+                ->icon('solid-pencil-square')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('admin.role-form', 'openEditRoleModal', ['id' => $row->id]),
+            Button::add('delete')
+                ->slot('刪除')
+                ->icon('solid-trash')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('admin.role-form', 'deleteRole', ['id' => $row->id]),
+        ];
+    }
+
+    /*
+    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/Roles.php b/app/Livewire/Admin/Roles.php
index 2fb948b..47e67f7 100644
--- a/app/Livewire/Admin/Roles.php
+++ b/app/Livewire/Admin/Roles.php
@@ -99,6 +99,6 @@ class Roles extends Component
     {
         return view('livewire.admin.roles', [
             'roles' => $this->roles,
-        ])->layout('layouts.admin');
+        ]);
     }
 }
diff --git a/app/Livewire/Admin/UserForm.php b/app/Livewire/Admin/UserForm.php
new file mode 100644
index 0000000..bd78453
--- /dev/null
+++ b/app/Livewire/Admin/UserForm.php
@@ -0,0 +1,90 @@
+<?php
+
+namespace App\Livewire\Admin;
+
+use Livewire\Component;
+
+use App\Models\User;
+use Spatie\Permission\Models\Role;
+
+class UserForm extends Component
+{
+    protected $listeners = ['openCreateUserModal','openEditUserModal', 'deleteUser','bulkDeleteUser'];
+
+    public bool $showCreateModal = false;
+    public ?int $userId = null;
+    public $name;
+    public $email;
+    public $roles = []; // 所有角色清單
+    public $selectedRoles = []; // 表單中選到的權限
+
+    protected $rules = [
+        'name' => 'required|string|max:255',
+        'email' => 'required|string|max:255',
+    ];
+
+    public function mount()
+    {
+        $this->roles = Role::all();
+    }
+
+    public function openCreateUserModal()
+    {
+        $this->resetFields();
+        $this->showCreateModal = true;
+    }
+
+    public function openEditUserModal($id)
+    {
+        $user = User::findOrFail($id);
+        $this->userId = $user->id;
+        $this->name = $user->name;
+        $this->email =$user->email;
+        $this->selectedRoles = $user->roles()->pluck('id')->toArray();
+        $this->showCreateModal = true;
+    }
+
+    public function save()
+    {
+        $this->validate();
+
+        if ($this->userId) {
+            $role = User::findOrFail($this->userId);
+            $role->update([
+                'name' => $this->name,
+                'email' => $this->email,
+            ]);
+            $role->syncRolses($this->selectedRoles);
+            session()->flash('message', '使用者已更新');
+        } else {
+            $role = User::create([
+                'name' => $this->name,
+                'email' => $this->email,
+            ]);
+            $role->syncRolses($this->selectedRoles);
+            session()->flash('message', '使用者已新增');
+        }
+
+        $this->resetFields();
+        $this->showCreateModal = false;
+    }
+    
+    public function deleteUser($id)
+    {
+        User::findOrFail($id)->delete();
+        session()->flash('message', '使用者已刪除');
+    }
+
+    public function resetFields()
+    {
+        $this->name = '';
+        $this->email = '';
+        $this->selectedRoles = [];
+        $this->userId = null;
+    }
+    
+    public function render()
+    {
+        return view('livewire.admin.user-form');
+    }
+}
diff --git a/app/Livewire/Admin/UserTable.php b/app/Livewire/Admin/UserTable.php
index 3ba91db..ef565be 100644
--- a/app/Livewire/Admin/UserTable.php
+++ b/app/Livewire/Admin/UserTable.php
@@ -24,17 +24,10 @@ final class UserTable extends PowerGridComponent
 
     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
@@ -104,17 +97,17 @@ final class UserTable extends PowerGridComponent
     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]),
+                ->slot('編輯')
+                ->icon('solid-pencil-square')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('admin.user-form', 'openEditUserModal', ['id' => $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]),
+                ->slot('刪除')
+                ->icon('solid-trash')
+                ->class('inline-flex items-center gap-1 px-3 py-1 rounded ')
+                ->dispatchTo('admin.user-form', 'deleteUser', ['id' => $row->id]),
         ];
     }
     #[On('bulkDelete.{tableName}')]
@@ -127,13 +120,6 @@ final class UserTable extends PowerGridComponent
         }
     }
     
-    #[\Livewire\Attributes\On('delete-user')]
-    public function deleteUser($userId): void
-    {
-        User::findOrFail($userId)->delete();
-
-        $this->dispatch('notify', '刪除成功');
-    }
     
     /* public function actionRules($row): array
     {
diff --git a/resources/views/livewire/admin/edit-user-modal.blade.php b/resources/views/livewire/admin/edit-user-modal.blade.php
deleted file mode 100644
index 2efe871..0000000
--- a/resources/views/livewire/admin/edit-user-modal.blade.php
+++ /dev/null
@@ -1,16 +0,0 @@
-<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/role-form.blade.php b/resources/views/livewire/admin/role-form.blade.php
new file mode 100644
index 0000000..2488d7c
--- /dev/null
+++ b/resources/views/livewire/admin/role-form.blade.php
@@ -0,0 +1,25 @@
+<div>
+@if ($showCreateModal)
+        <x-wireui:modal-card title="{{ $roleId ? '編輯角色' : '新增角色' }}" blur wire:model.defer="showCreateModal">
+            <div class="space-y-4">
+                <x-wireui:input label="角色名稱" wire:model.defer="name" />
+                <x-wireui:select
+                    label="權限"
+                    wire:model.defer="selectedPermissions"
+                    placeholder="選擇權限"
+                    multiselect
+                    option-label="label"
+                    option-value="value"
+                    :options="$permissions->map(fn($p) => ['value' => $p->id, 'label' => $p->name])->toArray()"
+                />
+            </div>
+
+            <x-slot name="footer">
+                <div class="flex justify-center gap-2">
+                    <x-wireui:button primary label="{{__('roles.cancel')}}" x-on:click="$dispatch('close')" />
+                    <x-wireui:button primary label="{{__('roles.submit')}}" wire:click="save" />
+                </div>
+            </x-slot>
+        </x-wireui:modal-card>
+    @endif
+</div>
diff --git a/resources/views/livewire/admin/roles.blade.php b/resources/views/livewire/admin/roles.blade.php
index a871f22..190defc 100644
--- a/resources/views/livewire/admin/roles.blade.php
+++ b/resources/views/livewire/admin/roles.blade.php
@@ -1,66 +1,21 @@
-<div class="space-y-4">
-    <div class="flex justify-between items-center">
-        <h2 class="text-xl font-bold">{{ __('roles.list') }}</h2>
-        <x-button primary label="{{__('roles.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')">{{__('roles.no')}}</th>
-            <th class="cursor-pointer" wire:click="sortBy('name')">{{__('roles.name')}}</th>
-            <th>{{__('roles.action')}}</th>
-        </x-slot>
-        @forelse ($roles as $role)
-            <tr>
-                <td>{{ $role->id }}</td>
-                <td>{{ $role->name }}</td>
-                <td class="space-x-2">
-                    @can('role-edit')
-                        <x-button  flat label="{{ __('roles.edit') }}" color="yellow" icon="pencil-square"  wire:click="openEditModal({{ $role->id }})" />
-                    @endcan
-                    @can('role-delete')
-                        <x-button  flat label="{{ __('roles.delete') }}" color="red" icon="trash" wire:click="delete({{ $role->id }})" />
-                    @endcan 
-                </td>
-            </tr>
-        @empty
-            <tr>
-                <td colspan="3">{{ __('No roles found.') }}</td>
-            </tr>
-        @endforelse
-    </x-table>
+<x-layouts.admin>
+    <x-slot name="header">
+        角色管理
+    </x-slot>
 
-    <div class="mt-4">
-        {!! $roles->links('pagination::tailwind') !!}
-    </div>
-
-    @if ($showCreateModal)
-        <x-modal-card title="{{ $editingRoleId ? '編輯角色' : '新增角色' }}" blur wire:model.defer="showCreateModal">
-            <div class="space-y-4">
-                <x-input label="角色名稱" wire:model.defer="name" />
-
-                <x-select
-                    label="權限"
-                    wire:model.defer="selectedPermissions"
-                    placeholder="選擇權限"
-                    multiselect
-                    option-label="label"
-                    option-value="value"
-                    :options="$permissions->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="{{__('roles.cancel')}}" x-on:click="$dispatch('close')" />
-                    <x-button primary label="{{__('roles.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.role-table />
+    <livewire:admin.role-form />
+</x-layouts.admin>
\ No newline at end of file
diff --git a/resources/views/livewire/admin/user-form.blade.php b/resources/views/livewire/admin/user-form.blade.php
new file mode 100644
index 0000000..77cbae8
--- /dev/null
+++ b/resources/views/livewire/admin/user-form.blade.php
@@ -0,0 +1,28 @@
+<div class="p-6 space-y-4">
+@if ($showCreateModal)
+        <x-wireui:modal-card title="{{ $userId ? '編輯使用者' : '新增使用者' }}" blur wire:model.defer="showCreateModal">
+            <div class="space-y-4">
+                <x-wireui:input label="名稱" wire:model.defer="name" />
+
+                <x-wireui:input label="Email" wire:model.defer="email" />
+
+                <x-wireui:select
+                    label="角色"
+                    wire:model.defer="selectedRoles"
+                    placeholder="選擇角色"
+                    multiselect
+                    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-wireui:button primary label="{{__('users.cancel')}}" x-on:click="$dispatch('close')" />
+                    <x-wireui:button primary label="{{__('users.submit')}}" wire:click="save" />
+                </div>
+            </x-slot>
+        </x-wireui:modal-card>
+    @endif
+</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 9087979..2228e77 100644
--- a/resources/views/livewire/admin/users.blade.php
+++ b/resources/views/livewire/admin/users.blade.php
@@ -17,4 +17,5 @@
 
     {{-- 單一 Livewire 元件，內含資料表與 Modal --}}
     <livewire:admin.user-table />
+    <livewire:admin.user-form />
 </x-layouts.admin>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 27fbb0d..cf6a279 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,7 +3,7 @@
 use Illuminate\Support\Facades\Route;
 
 use App\Livewire\Admin\Dashboard as AdminDashboard;
-use App\Livewire\Admin\Roles;
+use App\Livewire\Admin\RoleTable;
 use App\Livewire\Admin\UserTable;
 
 Route::view('/', 'welcome');
@@ -19,11 +19,16 @@ Route::view('profile', 'profile')
 require __DIR__.'/auth.php';
 
 Route::middleware(['auth'])->prefix('admin')->name('admin.')->group(function () {
+    Route::get('/dashboard', AdminDashboard::class)->name('dashboard');
+
+    Route::get('/roles', function () {
+        return view('livewire.admin.roles');
+    })->name('roles');
+    Route::get('/roles-table', RoleTable::class)->name('roles-table'); 
+
     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-table', UserTable::class)->name('users-table'); 
+    
 });
\ No newline at end of file