diff --git a/app/Components/Permission/Form.php b/app/Components/Permission/Form.php
new file mode 100644
index 0000000..4888796
--- /dev/null
+++ b/app/Components/Permission/Form.php
@@ -0,0 +1,44 @@
+<?php
+namespace App\Components\Permission;
+
+use Livewire\Component;
+use Spatie\Permission\Models\Permission;
+
+class Form extends Component
+{
+    public $permissionId;
+    public $name;
+
+    protected function rules()
+    {
+        return [
+            'name' => 'required|string|unique:permissions,name' .
+                ($this->permissionId ? ",{$this->permissionId}" : ''),
+        ];
+    }
+
+    public function mount($permissionId = null)
+    {
+        $this->permissionId = $permissionId;
+        if ($permissionId) {
+            $perm = Permission::findOrFail($permissionId);
+            $this->name = $perm->name;
+        }
+    }
+
+    public function save()
+    {
+        $this->validate();
+        Permission::updateOrCreate(
+            ['id' => $this->permissionId],
+            ['name' => $this->name]
+        );
+        session()->flash('message', 'Permission saved.');
+        $this->emitUp('permissionSaved');
+    }
+
+    public function render()
+    {
+        return view('components.permission.form');
+    }
+}
diff --git a/app/Components/Permission/Index.php b/app/Components/Permission/Index.php
new file mode 100644
index 0000000..655e8bb
--- /dev/null
+++ b/app/Components/Permission/Index.php
@@ -0,0 +1,31 @@
+<?php
+namespace App\Components\Permission;
+
+use Livewire\Component;
+use Livewire\WithPagination;
+use Spatie\Permission\Models\Permission;
+
+class Index extends Component
+{
+    use WithPagination;
+
+    public $search = '';
+    protected $listeners = ['permissionSaved' => '$refresh'];
+
+    public function updatingSearch() { $this->resetPage(); }
+
+    public function delete($id)
+    {
+        Permission::findOrFail($id)->delete();
+        session()->flash('message', 'Permission deleted.');
+    }
+
+    public function render()
+    {
+        $permissions = Permission::where('name', 'like', "%{$this->search}%")
+            ->orderByDesc('id')
+            ->paginate(10);
+
+        return view('components.permission.index', compact('permissions'));
+    }
+}
diff --git a/app/Http/Controllers/PermissionController.php b/app/Http/Controllers/PermissionController.php
new file mode 100644
index 0000000..3b1aa7b
--- /dev/null
+++ b/app/Http/Controllers/PermissionController.php
@@ -0,0 +1,26 @@
+<?php
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use Spatie\Permission\Models\Permission;
+
+class PermissionController extends Controller
+{
+    public function index()
+    {
+        return view('admin.permissions.index');
+    }
+
+    public function create()
+    {
+        return view('admin.permissions.form');
+    }
+
+    public function edit(Permission $permission)
+    {
+        // truyền permissionId vào wrapper
+        return view('admin.permissions.form', [
+            'permissionId' => $permission->id,
+        ]);
+    }
+}
diff --git a/resources/views/admin/permissions/form.blade.php b/resources/views/admin/permissions/form.blade.php
new file mode 100644
index 0000000..45d4e97
--- /dev/null
+++ b/resources/views/admin/permissions/form.blade.php
@@ -0,0 +1,8 @@
+@extends('layouts.app')
+
+@section('title', isset($permissionId) ? 'Edit Permission' : 'Create Permission')
+
+@section('content')
+    {{-- truyền permissionId nếu có --}}
+    <livewire:permission.form :permission-id="$permissionId ?? null" />
+@endsection
diff --git a/resources/views/admin/permissions/index.blade.php b/resources/views/admin/permissions/index.blade.php
new file mode 100644
index 0000000..bf2686c
--- /dev/null
+++ b/resources/views/admin/permissions/index.blade.php
@@ -0,0 +1,7 @@
+@extends('layouts.app')
+
+@section('title', 'Permissions')
+
+@section('content')
+    <livewire:permission.index />
+@endsection
diff --git a/resources/views/components/permission/form.blade.php b/resources/views/components/permission/form.blade.php
new file mode 100644
index 0000000..ee165d5
--- /dev/null
+++ b/resources/views/components/permission/form.blade.php
@@ -0,0 +1,20 @@
+<div class="p-4 max-w-md">
+    @if (session()->has('message'))
+        <div class="alert alert-success mb-2">{{ session('message') }}</div>
+    @endif
+
+    <form wire:submit.prevent="save">
+        <div class="mb-4">
+            <label class="block mb-1">Name</label>
+            <input
+                type="text"
+                wire:model.defer="name"
+                class="border p-2 w-full"
+            >
+            @error('name') <span class="text-red-600">{{ $message }}</span> @enderror
+        </div>
+        <button type="submit" class="btn btn-primary">
+            {{ $permissionId ? 'Update' : 'Create' }}
+        </button>
+    </form>
+</div>
diff --git a/resources/views/components/permission/index.blade.php b/resources/views/components/permission/index.blade.php
new file mode 100644
index 0000000..2e3a8dd
--- /dev/null
+++ b/resources/views/components/permission/index.blade.php
@@ -0,0 +1,47 @@
+<div class="p-4">
+    <div class="flex justify-between mb-4">
+        <input
+            type="text"
+            wire:model.debounce.300ms="search"
+            placeholder="Search permissions..."
+            class="border p-2"
+        >
+        <a href="{{ route('permissions.create') }}" class="btn btn-primary">
+            New Permission
+        </a>
+    </div>
+
+    @if (session()->has('message'))
+        <div class="alert alert-success mb-2">{{ session('message') }}</div>
+    @endif
+
+    <table class="w-full table-auto border-collapse border">
+        <thead>
+            <tr>
+                <th class="border px-2 py-1">ID</th>
+                <th class="border px-2 py-1">Name</th>
+                <th class="border px-2 py-1">Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+        @foreach($permissions as $p)
+            <tr>
+                <td class="border px-2 py-1">{{ $p->id }}</td>
+                <td class="border px-2 py-1">{{ $p->name }}</td>
+                <td class="border px-2 py-1">
+                    <a
+                      href="{{ route('permissions.edit', $p) }}"
+                      class="text-blue-600"
+                    >Edit</a>
+                    <button
+                      wire:click="delete({{ $p->id }})"
+                      class="text-red-600 ml-2"
+                    >Delete</button>
+                </td>
+            </tr>
+        @endforeach
+        </tbody>
+    </table>
+
+    <div class="mt-4">{{ $permissions->links() }}</div>
+</div>
diff --git a/routes/web.php b/routes/web.php
index c2d830f..a7704c6 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,6 +3,12 @@
 use App\Http\Controllers\Auth\LoginController;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\DashboardController;
+use App\Http\Controllers\PermissionController;
 
 // Dashboard route (Livewire) for authenticated users only
 Route::get('dashboard', [DashboardController::class, 'index'])->name('dashboard');
+Route::middleware(['auth'])->group(function () {
+    Route::get('/permissions', [PermissionController::class, 'index'])->name('permissions.index');
+    Route::get('/permissions/create', [PermissionController::class, 'create'])->name('permissions.create');
+    Route::get('/permissions/{permission}/edit', [PermissionController::class, 'edit'])->name('permissions.edit');
+});