diff --git a/app/Livewire/RoleForm.php b/app/Livewire/RoleForm.php
index ed03f3d..3864741 100644
--- a/app/Livewire/RoleForm.php
+++ b/app/Livewire/RoleForm.php
@@ -6,7 +6,6 @@ use Livewire\Component;
 use Livewire\Attributes\Layout;
 use Illuminate\Support\Facades\Auth;
 use Spatie\Permission\Models\Role;
-use Spatie\Permission\Models\Permission;
 use Spatie\Permission\PermissionRegistrar;
 
 #[Layout('layouts.app')]
@@ -16,7 +15,6 @@ class RoleForm extends Component
 
     public string $name = '';
     public string $description = '';
-    public array $rolePermissions = [];
 
     private const PROTECTED_ROLES = ['Admin'];
     private const CORE_PERMISSION = 'manage all';
@@ -26,10 +24,9 @@ class RoleForm extends Component
         abort_unless(Auth::user()?->can(self::CORE_PERMISSION), 403);
 
         if ($role && $role->exists) {
-            $this->role            = $role;
-            $this->name            = $role->name;
-            $this->description     = $role->description ?? '';
-            $this->rolePermissions = $role->permissions->pluck('name')->toArray();
+            $this->role        = $role;
+            $this->name        = $role->name;
+            $this->description = $role->description ?? '';
         }
     }
 
@@ -41,26 +38,17 @@ class RoleForm extends Component
         ], [], ['name' => 'nombre', 'description' => 'descripción']);
 
         if ($this->role) {
-            $isProtected = in_array($this->role->name, self::PROTECTED_ROLES, true);
-            if (! $isProtected) {
+            // Protected roles can't be renamed
+            if (! in_array($this->role->name, self::PROTECTED_ROLES, true)) {
                 $this->role->name = $this->name;
             }
             $this->role->description = $this->description ?: null;
             $this->role->save();
-
-            $perms = $this->rolePermissions;
-            if ($this->role->name === 'Admin' && ! in_array(self::CORE_PERMISSION, $perms, true)) {
-                $perms[] = self::CORE_PERMISSION;
-            }
-            $this->role->syncPermissions($perms);
         } else {
-            $role = Role::create([
+            Role::create([
                 'name'        => $this->name,
                 'description' => $this->description ?: null,
             ]);
-            if (! empty($this->rolePermissions)) {
-                $role->syncPermissions($this->rolePermissions);
-            }
         }
 
         app(PermissionRegistrar::class)->forgetCachedPermissions();
@@ -72,7 +60,6 @@ class RoleForm extends Component
     public function render()
     {
         return view('livewire.roles.role-form', [
-            'permissions' => Permission::orderBy('name')->get(),
             'isProtected' => $this->role && in_array($this->role->name, self::PROTECTED_ROLES, true),
         ]);
     }
diff --git a/app/Livewire/RoleManager.php b/app/Livewire/RoleManager.php
deleted file mode 100644
index c62cff5..0000000
--- a/app/Livewire/RoleManager.php
+++ /dev/null
@@ -1,95 +0,0 @@
-<?php
-
-namespace App\Livewire;
-
-use Livewire\Component;
-use Livewire\Attributes\Layout;
-use Illuminate\Support\Facades\Auth;
-use Spatie\Permission\Models\Role;
-use Spatie\Permission\PermissionRegistrar;
-
-#[Layout('layouts.app')]
-class RoleManager extends Component
-{
-    // View modal
-    public ?int $viewingRole = null;
-
-    // Bulk selection
-    public array $selected = [];
-    public bool $selectAll = false;
-
-    private const PROTECTED_ROLES = ['Admin'];
-    private const CORE_PERMISSION = 'manage all';
-
-    public function mount(): void
-    {
-        abort_unless(Auth::user()?->can(self::CORE_PERMISSION), 403);
-    }
-
-    private function flushCache(): void
-    {
-        app(PermissionRegistrar::class)->forgetCachedPermissions();
-    }
-
-    public function updatedSelectAll($value): void
-    {
-        $this->selected = $value
-            ? Role::pluck('id')->map(fn ($id) => (string) $id)->toArray()
-            : [];
-    }
-
-    // ── View ─────────────────────────────────────────────────────────────────
-
-    public function openView(int $id): void
-    {
-        $this->viewingRole = $id;
-    }
-
-    public function closeView(): void
-    {
-        $this->viewingRole = null;
-    }
-
-    // ── Delete (single / bulk) ─────────────────────────────────────────────────
-
-    public function delete(int $id): void
-    {
-        $role = Role::findOrFail($id);
-        if (in_array($role->name, self::PROTECTED_ROLES, true)) {
-            $this->dispatch('notify', "El rol '{$role->name}' está protegido y no se puede borrar.");
-            return;
-        }
-        $role->delete();
-        $this->selected = array_values(array_diff($this->selected, [(string) $id, $id]));
-        $this->flushCache();
-        $this->dispatch('notify', 'Rol eliminado');
-    }
-
-    public function bulkDelete(): void
-    {
-        $roles = Role::whereIn('id', $this->selected)->get();
-        $deleted = 0;
-        $skipped = 0;
-        foreach ($roles as $role) {
-            if (in_array($role->name, self::PROTECTED_ROLES, true)) { $skipped++; continue; }
-            $role->delete();
-            $deleted++;
-        }
-        $this->selected = [];
-        $this->selectAll = false;
-        $this->flushCache();
-        $msg = "{$deleted} rol(es) eliminados";
-        if ($skipped) $msg .= " ({$skipped} protegido(s) omitido(s))";
-        $this->dispatch('notify', $msg);
-    }
-
-    public function render()
-    {
-        return view('livewire.role-manager', [
-            'roles'   => Role::with('permissions')->withCount('users')->orderBy('name')->get(),
-            'viewing' => $this->viewingRole
-                ? Role::with('permissions')->withCount('users')->find($this->viewingRole)
-                : null,
-        ]);
-    }
-}
diff --git a/app/Livewire/RoleTable.php b/app/Livewire/RoleTable.php
new file mode 100644
index 0000000..f2f595d
--- /dev/null
+++ b/app/Livewire/RoleTable.php
@@ -0,0 +1,105 @@
+<?php
+
+namespace App\Livewire;
+
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use Illuminate\Database\Eloquent\Builder;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\PermissionRegistrar;
+
+class RoleTable extends DataTableComponent
+{
+    protected $model = Role::class;
+
+    private const PROTECTED_ROLES = ['Admin'];
+
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id')
+             ->setDefaultSort('name', 'asc')
+             ->setSortingPillsEnabled(false);
+    }
+
+    public function builder(): Builder
+    {
+        return Role::withCount(['permissions', 'users']);
+    }
+
+    public function columns(): array
+    {
+        return [
+            Column::make(__('Name'), 'name')
+                  ->sortable()
+                  ->searchable()
+                  ->format(fn ($value, $row) =>
+                      '<a href="'.route('admin.roles.show', $row->id).'" class="font-semibold text-primary hover:underline" wire:navigate>'.e($value).'</a>'
+                      . (in_array($row->name, self::PROTECTED_ROLES, true) ? ' <span class="badge badge-ghost badge-xs">protegido</span>' : '')
+                  )
+                  ->html(),
+
+            Column::make(__('Description'), 'description')
+                  ->sortable()
+                  ->searchable()
+                  ->format(fn ($value) => $value
+                      ? '<span class="text-sm text-gray-500">'.e($value).'</span>'
+                      : '<span class="text-gray-300">—</span>')
+                  ->html(),
+
+            Column::make(__('Permissions'))
+                  ->label(fn ($row) => '<span class="badge badge-outline badge-sm">'.(int) $row->permissions_count.'</span>')
+                  ->html(),
+
+            Column::make(__('Users'))
+                  ->label(fn ($row) => '<span class="badge badge-ghost badge-sm">'.(int) $row->users_count.'</span>')
+                  ->html(),
+
+            Column::make(__('Actions'))
+                  ->label(function ($row) {
+                      $show = route('admin.roles.show', $row->id);
+                      $edit = route('admin.roles.edit', $row->id);
+                      $eye   = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>';
+                      $pencil = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>';
+                      $trash  = '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>';
+
+                      $html  = '<div class="flex items-center gap-1">';
+                      $html .= '<a href="'.$show.'" class="btn btn-xs btn-ghost" title="Ver" wire:navigate>'.$eye.'</a>';
+                      $html .= '<a href="'.$edit.'" class="btn btn-xs btn-ghost text-info" title="Editar" wire:navigate>'.$pencil.'</a>';
+                      if (! in_array($row->name, self::PROTECTED_ROLES, true)) {
+                          $html .= '<button wire:click="deleteRole('.$row->id.')" wire:confirm="¿Eliminar el rol \''.e($row->name).'\'?" class="btn btn-xs btn-ghost text-error" title="Eliminar">'.$trash.'</button>';
+                      }
+                      $html .= '</div>';
+                      return $html;
+                  })
+                  ->html(),
+        ];
+    }
+
+    public function bulkActions(): array
+    {
+        return ['bulkDelete' => __('Delete selected')];
+    }
+
+    public function bulkDelete(): void
+    {
+        $roles = Role::whereIn('id', $this->selected)->get();
+        foreach ($roles as $role) {
+            if (in_array($role->name, self::PROTECTED_ROLES, true)) continue;
+            $role->delete();
+        }
+        $this->clearSelected();
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->dispatch('notify', __('Roles deleted'));
+    }
+
+    public function deleteRole(int $id): void
+    {
+        $role = Role::findOrFail($id);
+        if (in_array($role->name, self::PROTECTED_ROLES, true)) {
+            return;
+        }
+        $role->delete();
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->dispatch('notify', __('Role deleted'));
+    }
+}
diff --git a/app/Livewire/RoleView.php b/app/Livewire/RoleView.php
new file mode 100644
index 0000000..f61c413
--- /dev/null
+++ b/app/Livewire/RoleView.php
@@ -0,0 +1,95 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+use Livewire\Attributes\Layout;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Str;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+use Spatie\Permission\PermissionRegistrar;
+
+#[Layout('layouts.app')]
+class RoleView extends Component
+{
+    public Role $role;
+    public string $tab = 'ficha';   // ficha | permisos
+
+    private const PROTECTED_ROLES = ['Admin'];
+    private const CORE_PERMISSION = 'manage all';
+
+    public function mount(Role $role): void
+    {
+        abort_unless(Auth::user()?->can(self::CORE_PERMISSION), 403);
+        $this->role = $role;
+    }
+
+    public function setTab(string $tab): void
+    {
+        $this->tab = in_array($tab, ['ficha', 'permisos'], true) ? $tab : 'ficha';
+    }
+
+    public function togglePermission(string $permissionName): void
+    {
+        // Admin must always keep the core permission
+        if ($this->role->name === 'Admin'
+            && $permissionName === self::CORE_PERMISSION
+            && $this->role->hasPermissionTo($permissionName)) {
+            $this->dispatch('notify', "El rol Admin no puede perder '" . self::CORE_PERMISSION . "'.");
+            return;
+        }
+
+        if ($this->role->hasPermissionTo($permissionName)) {
+            $this->role->revokePermissionTo($permissionName);
+        } else {
+            $this->role->givePermissionTo($permissionName);
+        }
+
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        $this->role->load('permissions');
+        $this->dispatch('notify', 'Permisos actualizados');
+    }
+
+    public function delete()
+    {
+        if (in_array($this->role->name, self::PROTECTED_ROLES, true)) {
+            $this->dispatch('notify', "El rol '{$this->role->name}' está protegido y no se puede borrar.");
+            return;
+        }
+        $this->role->delete();
+        app(PermissionRegistrar::class)->forgetCachedPermissions();
+        session()->flash('message', 'Rol eliminado.');
+
+        return $this->redirect(route('admin.roles'), navigate: true);
+    }
+
+    /** Section title for a permission name (groups by the resource / last word). */
+    private function sectionFor(string $name): string
+    {
+        if ($name === self::CORE_PERMISSION) {
+            return 'General';
+        }
+        $resource = Str::afterLast($name, ' ');
+        return Str::headline($resource ?: 'General');
+    }
+
+    public function render()
+    {
+        $users = $this->role->users()
+            ->orderBy('first_name')
+            ->orderBy('name')
+            ->get();
+
+        $grouped = Permission::orderBy('name')->get()
+            ->groupBy(fn ($perm) => $this->sectionFor($perm->name))
+            ->sortKeys();
+
+        return view('livewire.roles.role-view', [
+            'users'     => $users,
+            'grouped'   => $grouped,
+            'rolePerms' => $this->role->permissions->pluck('name')->toArray(),
+            'isProtected' => in_array($this->role->name, self::PROTECTED_ROLES, true),
+        ]);
+    }
+}
diff --git a/resources/views/admin/roles.blade.php b/resources/views/admin/roles.blade.php
new file mode 100644
index 0000000..19fe7cc
--- /dev/null
+++ b/resources/views/admin/roles.blade.php
@@ -0,0 +1,25 @@
+<x-app-layout>
+    <x-slot name="header">
+        <div class="flex items-center justify-between">
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                {{ __('Roles & permissions') }}
+            </h2>
+            <div class="flex items-center gap-2">
+                <a href="{{ route('admin.permissions') }}" class="btn btn-outline btn-sm gap-1" wire:navigate>
+                    <x-heroicon-o-table-cells class="w-4 h-4" /> {{ __('Matrix view') }}
+                </a>
+                <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm gap-1" wire:navigate>
+                    <x-heroicon-o-plus class="w-4 h-4" /> {{ __('New role') }}
+                </a>
+            </div>
+        </div>
+    </x-slot>
+
+    <div class="py-12">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div class="bg-white rounded-lg shadow p-6">
+                <livewire:role-table />
+            </div>
+        </div>
+    </div>
+</x-app-layout>
diff --git a/resources/views/livewire/role-manager.blade.php b/resources/views/livewire/role-manager.blade.php
deleted file mode 100644
index 4ac11a7..0000000
--- a/resources/views/livewire/role-manager.blade.php
+++ /dev/null
@@ -1,126 +0,0 @@
-<div class="py-8 max-w-6xl mx-auto sm:px-6 lg:px-8">
-
-    {{-- Cabecera --}}
-    <div class="flex items-center justify-between mb-6">
-        <div>
-            <h2 class="text-2xl font-bold text-gray-800">{{ __('Roles & permissions') }}</h2>
-            <p class="text-sm text-gray-500 mt-1">{{ __('Manage role groups and the permissions assigned to each.') }}</p>
-        </div>
-        <div class="flex items-center gap-2">
-            <a href="{{ route('admin.permissions') }}" class="btn btn-outline btn-sm gap-1" wire:navigate>
-                <x-heroicon-o-table-cells class="w-4 h-4" /> {{ __('Matrix view') }}
-            </a>
-            <a href="{{ route('admin.roles.create') }}" class="btn btn-primary btn-sm gap-1" wire:navigate>
-                <x-heroicon-o-plus class="w-4 h-4" /> {{ __('New role') }}
-            </a>
-        </div>
-    </div>
-
-    {{-- Barra de acciones en grupo --}}
-    @if(count($selected) > 0)
-        <div class="flex items-center justify-between bg-base-200 rounded-lg px-4 py-2 mb-3">
-            <span class="text-sm">{{ count($selected) }} {{ __('selected') }}</span>
-            <button wire:click="bulkDelete"
-                    wire:confirm="{{ __('Delete the selected roles? Protected roles will be skipped.') }}"
-                    class="btn btn-error btn-sm gap-1">
-                <x-heroicon-o-trash class="w-4 h-4" /> {{ __('Delete selected') }}
-            </button>
-        </div>
-    @endif
-
-    {{-- Tabla de roles --}}
-    <div class="overflow-x-auto border border-base-300 rounded-lg bg-white">
-        <table class="table table-zebra">
-            <thead>
-                <tr>
-                    <th class="w-10">
-                        <input type="checkbox" class="checkbox checkbox-sm" wire:model.live="selectAll" />
-                    </th>
-                    <th>{{ __('Name') }}</th>
-                    <th>{{ __('Description') }}</th>
-                    <th class="text-center">{{ __('Permissions') }}</th>
-                    <th class="text-center">{{ __('Users') }}</th>
-                    <th class="w-32 text-right">{{ __('Actions') }}</th>
-                </tr>
-            </thead>
-            <tbody>
-                @forelse($roles as $role)
-                    <tr wire:key="role-{{ $role->id }}" class="hover">
-                        <td>
-                            <input type="checkbox" class="checkbox checkbox-sm"
-                                   value="{{ $role->id }}" wire:model.live="selected" />
-                        </td>
-                        <td class="font-semibold">
-                            {{ $role->name }}
-                            @if(in_array($role->name, ['Admin'], true))
-                                <span class="badge badge-ghost badge-xs ml-1">{{ __('protected') }}</span>
-                            @endif
-                        </td>
-                        <td class="text-sm text-gray-500 max-w-xs truncate">{{ $role->description ?: '—' }}</td>
-                        <td class="text-center">
-                            <span class="badge badge-outline badge-sm">{{ $role->permissions->count() }}</span>
-                        </td>
-                        <td class="text-center">
-                            <span class="badge badge-ghost badge-sm">{{ $role->users_count }}</span>
-                        </td>
-                        <td class="text-right">
-                            <div class="flex items-center justify-end gap-1">
-                                <button wire:click="openView({{ $role->id }})" class="btn btn-ghost btn-xs" title="{{ __('View') }}">
-                                    <x-heroicon-o-eye class="w-4 h-4" />
-                                </button>
-                                <a href="{{ route('admin.roles.edit', $role->id) }}" class="btn btn-ghost btn-xs text-info" title="{{ __('Edit') }}" wire:navigate>
-                                    <x-heroicon-o-pencil class="w-4 h-4" />
-                                </a>
-                                @unless(in_array($role->name, ['Admin'], true))
-                                    <button wire:click="delete({{ $role->id }})"
-                                            wire:confirm="{{ __('Delete role') }} '{{ $role->name }}'?"
-                                            class="btn btn-ghost btn-xs text-error" title="{{ __('Delete') }}">
-                                        <x-heroicon-o-trash class="w-4 h-4" />
-                                    </button>
-                                @endunless
-                            </div>
-                        </td>
-                    </tr>
-                @empty
-                    <tr><td colspan="6" class="text-center text-gray-400 py-8">{{ __('No roles') }}</td></tr>
-                @endforelse
-            </tbody>
-        </table>
-    </div>
-
-    {{-- ════════════════ MODAL VER ════════════════ --}}
-    @if($viewing)
-        <div class="modal modal-open z-[1500]">
-            <div class="modal-box max-w-lg">
-                <div class="flex items-center justify-between mb-3">
-                    <h3 class="font-bold text-lg flex items-center gap-2">
-                        <x-heroicon-o-shield-check class="w-5 h-5 text-primary" /> {{ $viewing->name }}
-                    </h3>
-                    <button wire:click="closeView" class="btn btn-sm btn-circle btn-ghost"><x-heroicon-o-x-mark class="w-5 h-5" /></button>
-                </div>
-
-                <p class="text-sm text-gray-600 mb-1">{{ $viewing->description ?: __('No description') }}</p>
-                <p class="text-xs text-gray-400 mb-4">{{ $viewing->users_count }} {{ __('users') }} · {{ $viewing->permissions->count() }} {{ __('permissions') }}</p>
-
-                <div class="divider text-xs">{{ __('Permissions') }}</div>
-                @if($viewing->permissions->isEmpty())
-                    <p class="text-sm text-gray-400">{{ __('No permissions') }}</p>
-                @else
-                    <div class="flex flex-wrap gap-1">
-                        @foreach($viewing->permissions as $perm)
-                            <span class="badge badge-primary badge-sm">{{ $perm->name }}</span>
-                        @endforeach
-                    </div>
-                @endif
-
-                <div class="modal-action">
-                    <a href="{{ route('admin.roles.edit', $viewing->id) }}" class="btn btn-sm btn-info gap-1" wire:navigate>
-                        <x-heroicon-o-pencil class="w-4 h-4" /> {{ __('Edit') }}
-                    </a>
-                    <button wire:click="closeView" class="btn btn-sm">{{ __('Close') }}</button>
-                </div>
-            </div>
-            <div class="modal-backdrop bg-black/40" wire:click="closeView"></div>
-        </div>
-    @endif
-</div>
diff --git a/resources/views/livewire/roles/role-form.blade.php b/resources/views/livewire/roles/role-form.blade.php
index 6b1580b..7dfcd1d 100644
--- a/resources/views/livewire/roles/role-form.blade.php
+++ b/resources/views/livewire/roles/role-form.blade.php
@@ -42,23 +42,9 @@
                 </div>
             </div>
 
-            {{-- Permisos --}}
-            <div class="flex items-start gap-4">
-                <label class="w-40 shrink-0 pt-2 text-sm font-medium text-gray-700">
-                    {{ __('Permissions') }}
-                </label>
-                <div class="flex-1">
-                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-1 border border-base-300 rounded-lg p-3 max-h-72 overflow-y-auto">
-                        @foreach($permissions as $perm)
-                            <label class="flex items-center gap-2 text-sm cursor-pointer py-0.5">
-                                <input type="checkbox" class="checkbox checkbox-sm checkbox-primary"
-                                       value="{{ $perm->name }}" wire:model="rolePermissions" />
-                                {{ $perm->name }}
-                            </label>
-                        @endforeach
-                    </div>
-                </div>
-            </div>
+            <p class="text-xs text-gray-400 pl-44">
+                {{ __('Permissions are assigned from the role view, in the "Permissions" tab.') }}
+            </p>
 
             <div class="flex items-center justify-end gap-3 pt-2 border-t border-base-200">
                 <a href="{{ route('admin.roles') }}" class="btn btn-ghost" wire:navigate>{{ __('Cancel') }}</a>
diff --git a/resources/views/livewire/roles/role-view.blade.php b/resources/views/livewire/roles/role-view.blade.php
new file mode 100644
index 0000000..0746027
--- /dev/null
+++ b/resources/views/livewire/roles/role-view.blade.php
@@ -0,0 +1,128 @@
+<div class="py-8 max-w-4xl mx-auto sm:px-6 lg:px-8">
+
+    {{-- Cabecera: nombre del rol + botón Volver --}}
+    <div class="flex items-center justify-between mb-4">
+        <h2 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
+            <x-heroicon-o-shield-check class="w-6 h-6 text-primary" />
+            {{ $role->name }}
+            @if($isProtected)
+                <span class="badge badge-ghost badge-sm">{{ __('protected') }}</span>
+            @endif
+        </h2>
+        <a href="{{ route('admin.roles') }}" class="btn btn-ghost btn-sm gap-1" wire:navigate>
+            <x-heroicon-o-arrow-left class="w-4 h-4" /> {{ __('Back') }}
+        </a>
+    </div>
+
+    {{-- Tabs --}}
+    <div class="flex flex-wrap gap-1 mb-4">
+        <button wire:click="setTab('ficha')" class="btn btn-sm {{ $tab === 'ficha' ? 'btn-primary' : 'btn-ghost' }}">
+            {{ __('Details') }}
+        </button>
+        <button wire:click="setTab('permisos')" class="btn btn-sm {{ $tab === 'permisos' ? 'btn-primary' : 'btn-ghost' }}">
+            {{ __('Permissions') }}
+        </button>
+    </div>
+
+    {{-- ═══════════════ TAB FICHA ═══════════════ --}}
+    @if($tab === 'ficha')
+        <div class="bg-white rounded-lg shadow p-6 mb-6">
+            <div class="flex items-start justify-between gap-4">
+                <div class="flex-1">
+                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-1">{{ __('Description') }}</h3>
+                    <p class="text-gray-700">{{ $role->description ?: __('No description') }}</p>
+                </div>
+                <div class="flex items-center gap-2 shrink-0">
+                    <a href="{{ route('admin.roles.edit', $role->id) }}" class="btn btn-sm btn-info gap-1" wire:navigate>
+                        <x-heroicon-o-pencil class="w-4 h-4" /> {{ __('Edit') }}
+                    </a>
+                    @unless($isProtected)
+                        <button wire:click="delete"
+                                wire:confirm="{{ __('Delete role') }} '{{ $role->name }}'?"
+                                class="btn btn-sm btn-error btn-outline gap-1">
+                            <x-heroicon-o-trash class="w-4 h-4" /> {{ __('Delete') }}
+                        </button>
+                    @endunless
+                </div>
+            </div>
+        </div>
+
+        {{-- Usuarios con este rol --}}
+        <div class="bg-white rounded-lg shadow overflow-hidden">
+            <div class="px-6 py-3 border-b border-base-200">
+                <h3 class="font-semibold text-gray-700">{{ __('Users with this role') }} ({{ $users->count() }})</h3>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="table table-zebra">
+                    <thead>
+                        <tr>
+                            <th>{{ __('Name') }}</th>
+                            <th>{{ __('Last name') }}</th>
+                            <th>{{ __('Status') }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @forelse($users as $u)
+                            <tr wire:key="ru-{{ $u->id }}" class="hover">
+                                <td>
+                                    <div class="flex items-center gap-3">
+                                        <div class="avatar placeholder">
+                                            <div class="bg-neutral text-neutral-content rounded-full w-8">
+                                                <span class="text-xs">{{ strtoupper(mb_substr($u->first_name ?: $u->name, 0, 1)) }}</span>
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <p class="font-medium text-sm leading-tight">{{ $u->first_name ?: $u->name }}</p>
+                                            <p class="text-xs text-gray-500">{{ $u->email }}</p>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="text-sm">{{ $u->last_name ?: '—' }}</td>
+                                <td>
+                                    @php
+                                        [$cls, $label] = match($u->status) {
+                                            'active'    => ['badge-success', __('Active')],
+                                            'inactive'  => ['badge-ghost',   __('Inactive')],
+                                            'suspended' => ['badge-error',    __('Suspended')],
+                                            default     => ['badge-ghost', ucfirst((string) $u->status)],
+                                        };
+                                    @endphp
+                                    <span class="badge badge-sm {{ $cls }}">{{ $label }}</span>
+                                </td>
+                            </tr>
+                        @empty
+                            <tr><td colspan="3" class="text-center text-gray-400 py-8">{{ __('No users with this role') }}</td></tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    @endif
+
+    {{-- ═══════════════ TAB PERMISOS ═══════════════ --}}
+    @if($tab === 'permisos')
+        <div class="bg-white rounded-lg shadow p-6 space-y-6">
+            @forelse($grouped as $section => $perms)
+                <div>
+                    <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-3 border-b border-base-200 pb-1">
+                        {{ $section }}
+                    </h3>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2">
+                        @foreach($perms as $perm)
+                            <label class="flex items-center justify-between gap-3 cursor-pointer py-1">
+                                <span class="text-sm">{{ $perm->name }}</span>
+                                <input type="checkbox"
+                                       class="toggle toggle-primary toggle-sm"
+                                       wire:key="perm-{{ $role->id }}-{{ $perm->id }}"
+                                       @checked(in_array($perm->name, $rolePerms, true))
+                                       wire:click="togglePermission('{{ $perm->name }}')" />
+                            </label>
+                        @endforeach
+                    </div>
+                </div>
+            @empty
+                <p class="text-gray-400 text-sm">{{ __('No permissions') }}</p>
+            @endforelse
+        </div>
+    @endif
+</div>
diff --git a/routes/web.php b/routes/web.php
index 53c3b3b..ddeef43 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -136,9 +136,10 @@ Route::get('/reports/dashboard', ReportsDashboard::class)->name('reports.dashboa
         Route::get('/users/create',       \App\Livewire\UserForm::class)->name('users.create');
         Route::get('/users/{user}',       \App\Livewire\UserView::class)->name('users.show');
         Route::get('/users/{user}/edit',  \App\Livewire\UserForm::class)->name('users.edit');
-        Route::get('/roles',               \App\Livewire\RoleManager::class)->name('roles');
+        Route::get('/roles',               function () { return view('admin.roles'); })->name('roles');
         Route::get('/roles/create',        \App\Livewire\RoleForm::class)->name('roles.create');
         Route::get('/roles/{role}/edit',   \App\Livewire\RoleForm::class)->name('roles.edit');
+        Route::get('/roles/{role}',        \App\Livewire\RoleView::class)->name('roles.show');
         Route::get('/permissions',         \App\Livewire\RolePermissionManager::class)->name('permissions');
     });