diff --git a/resources/views/livewire/show-roles.blade.php b/resources/views/livewire/show-roles.blade.php
index c7e173a..e5a5aa5 100755
--- a/resources/views/livewire/show-roles.blade.php
+++ b/resources/views/livewire/show-roles.blade.php
@@ -25,7 +25,7 @@
                 <a x-on:click="add = !add" class="flex items-center px-4 py-2 rounded-lg cursor-pointer text-white bg-[#B221FD] hover:bg-[#7a02b8] transition">
                     Añadir rol
                     <svg class="w-[0.87rem] ml-2" fill="#ffffff" viewBox="0 0 512 512">
-                        <path d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z"/>
+                        <path d="M480,224H288V32c0-17.673-14.327-32-32-32s-32,14.327-32,32v192H32c-17.673,0-32,14.327-32,32s14.327,32,32,32h192v192c0,17.673,14.327,32,32,32s32-14.327,32-32V288h192c17.673,0,32-14.327,32-32S497.673,224,480,224z" />
                     </svg>
                 </a>
                 @endif
@@ -41,8 +41,7 @@
                     x-model="search"
                     @input="open = true"
                     @click.away="open = false"
-                    class="w-full border border-gray-300 rounded-xl shadow-sm px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"
-                >
+                    class="w-full border border-gray-300 rounded-xl shadow-sm px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
 
                 <ul x-show="open && search.length > 0" x-transition class="absolute z-50 mt-2 w-full bg-white border border-gray-300 rounded-xl shadow-lg max-h-60 overflow-y-auto text-sm">
                     <template x-for="user in usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase()))" :key="user.id">
@@ -50,8 +49,7 @@
                             @click="selectedId = user.id; search = user.name + ' - ' + user.email; open = false"
                             class="px-4 py-2 hover:bg-blue-100 hover:text-blue-800 cursor-pointer"
                             :class="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }"
-                            x-text="user.name + ' - ' + user.email"
-                        ></li>
+                            x-text="user.name + ' - ' + user.email"></li>
                     </template>
                     <li x-show="usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase())).length === 0" class="px-4 py-2 text-gray-500 italic">
                         No se encontraron resultados.
@@ -102,7 +100,7 @@
                 </tbody>
             </table>
         </div>
-     
+
         {{-- Añadir rol --}}
         <div
             x-cloak
@@ -116,22 +114,29 @@
             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" class="block text-gray-700 text-sm font-bold mb-2">Nombre:</label>
-                            <input type="text" id="nombre" wire:model="nombre"
+                            <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>
-                            </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="crear"
+                                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>
@@ -139,7 +144,8 @@
         </div>
 
 
-        {{-- editar rol --}}
+
+        {{-- Editar rol --}}
         <div
             x-cloak
             x-show="editar"
@@ -181,5 +187,6 @@
             </div>
         </div>
 
+
     </div>
 </div>
\ No newline at end of file