diff --git a/resources/views/livewire/show-roles.blade.php b/resources/views/livewire/show-roles.blade.php
index 1313016..9ad583a 100755
--- a/resources/views/livewire/show-roles.blade.php
+++ b/resources/views/livewire/show-roles.blade.php
@@ -106,23 +106,34 @@
                 </tbody>
             </table>
         </div>
-
         {{-- Añadir rol --}}
-        <div x-cloak x-show="add" x-transition:enter="transition duration-350" x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-100" class="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
-            <div class="grid h-full place-items-center ">
+        <div
+            x-cloak
+            x-show="add"
+            x-transition:enter="transition duration-350"
+            x-transition:enter-start="opacity-0 scale-100"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition duration-350"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-100"
+            class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
+            <div class="grid h-full place-items-center">
                 <form>
                     <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
                         <div class="mb-4">
                             <label for="nombre" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
-                            <input type="text" id="nombre" wire:model="nombre" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            <input type="text" id="nombre" wire:model="nombre"
+                                class="border-2 border-neutral-200 rounded-[0.8rem] shadow appearance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                         </div>
 
                         <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
                             <span>
-                                <button wire:click="crear" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
+                                <button wire:click="crear" type="button"
+                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
                             </span>
                             <span>
-                                <button wire:click="limpiarInputAdd" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
+                                <button wire:click="limpiarInputAdd" type="button"
+                                    class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
                             </span>
                         </div>
                     </div>
@@ -131,26 +142,46 @@
         </div>
 
         {{-- editar rol --}}
-        <div x-cloak x-show="editar" x-transition:enter="transition duration-350" x-transition:enter-start="opacity-0 scale-100" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition duration-350" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-100" class="absolute backdrop-blur-sm bg-black/20 left-0 bottom-0 top-0 right-0 h-full">
-            <div class="grid h-full place-items-center ">
+        <div
+            x-cloak
+            x-show="editar"
+            x-transition:enter="transition duration-350"
+            x-transition:enter-start="opacity-0 scale-100"
+            x-transition:enter-end="opacity-100 scale-100"
+            x-transition:leave="transition duration-350"
+            x-transition:leave-start="opacity-100 scale-100"
+            x-transition:leave-end="opacity-0 scale-100"
+            class="fixed inset-0 z-50 backdrop-blur-sm bg-black/20">
+            <div class="grid h-full place-items-center">
                 <form>
-                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md">
+                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 rounded-[1rem] shadow-md w-[20rem] sm:w-[24rem]">
                         <div class="mb-4">
                             <label for="nombre_edit" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
-                            <input type="text" id="nombre_edit" wire:model="nombre" class="border-2 border-neutral-200 rounded-[0.8rem] shadow apperance-none focus:border-neutral-300 focus:ring-0  w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
+                            <input
+                                type="text"
+                                id="nombre_edit"
+                                wire:model="nombre"
+                                class="border-2 border-neutral-200 rounded-[0.8rem] shadow appearance-none focus:border-neutral-300 focus:ring-0 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                         </div>
 
-                        <div class="bg-white px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse sm:justify-evenly gap-5 mt-4">
-                            <span>
-                                <button wire:click="actualizar" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 sm:mb-[0] mb-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out sm-text-sm sm-leading-5">Guardar</button>
-                            </span>
-                            <span>
-                                <button wire:click="limpiarInputAdd" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out sm-text-sm sm-leading-5">Cerrar</button>
-                            </span>
+                        <div class="px-4 py-3 sm:px-6 flex flex-col sm:flex-row-reverse sm:justify-evenly gap-3 mt-4">
+                            <button
+                                wire:click="actualizar"
+                                type="button"
+                                class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#B221FD] hover:bg-[#7a02b8] focus:shadow-outline-green ease-in-out text-sm">
+                                Guardar
+                            </button>
+                            <button
+                                wire:click="limpiarInputAdd"
+                                type="button"
+                                class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 text-white bg-[#585858] hover:bg-[#3a3a3a] ease-in-out text-sm">
+                                Cerrar
+                            </button>
                         </div>
                     </div>
                 </form>
             </div>
         </div>
+
     </div>
 </div>
\ No newline at end of file