diff --git a/nuxt4/app/components/auth/EditProfileButton.vue b/nuxt4/app/components/auth/EditProfileButton.vue
index ff10298..d1ffc8a 100644
--- a/nuxt4/app/components/auth/EditProfileButton.vue
+++ b/nuxt4/app/components/auth/EditProfileButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <UModal v-model:open="isOpen" title="Editar Perfil">
+  <div>
     <UButton
       icon="i-heroicons-pencil-square"
       color="primary"
@@ -10,56 +10,58 @@
       Editar Perfil
     </UButton>
 
-    <template #content>
-      <div class="p-4 space-y-4">
-        <UFormGroup label="Nombre Completo" name="name">
-          <UInput
-            v-model="formData.name"
-            placeholder="Tu nombre completo"
-            :disabled="isUpdating"
-          />
-        </UFormGroup>
+    <UModal v-model:open="isOpen" title="Editar Perfil">
+      <template #content>
+        <div class="p-4 space-y-4">
+          <UFormGroup label="Nombre Completo" name="name">
+            <UInput
+              v-model="formData.name"
+              placeholder="Tu nombre completo"
+              :disabled="isUpdating"
+            />
+          </UFormGroup>
 
-        <UFormGroup label="Email" name="email">
-          <UInput
-            v-model="formData.email"
-            type="email"
-            placeholder="tu@email.com"
-            :disabled="isUpdating"
-          />
-        </UFormGroup>
+          <UFormGroup label="Email" name="email">
+            <UInput
+              v-model="formData.email"
+              type="email"
+              placeholder="tu@email.com"
+              :disabled="isUpdating"
+            />
+          </UFormGroup>
 
-        <UFormGroup label="Username" name="username">
-          <UInput
-            v-model="formData.username"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">El username no se puede cambiar</span>
-          </template>
-        </UFormGroup>
+          <UFormGroup label="Username" name="username">
+            <UInput
+              v-model="formData.username"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <template #help>
+              <span class="text-xs text-gray-500">El username no se puede cambiar</span>
+            </template>
+          </UFormGroup>
 
-        <div class="flex justify-end gap-2 pt-4">
-          <UButton
-            color="neutral"
-            variant="ghost"
-            :disabled="isUpdating"
-            @click="isOpen = false"
-          >
-            Cancelar
-          </UButton>
-          <UButton
-            color="primary"
-            :loading="isUpdating"
-            @click="updateProfile"
-          >
-            Guardar Cambios
-          </UButton>
+          <div class="flex justify-end gap-2 pt-4">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :disabled="isUpdating"
+              @click="isOpen = false"
+            >
+              Cancelar
+            </UButton>
+            <UButton
+              color="primary"
+              :loading="isUpdating"
+              @click="updateProfile"
+            >
+              Guardar Cambios
+            </UButton>
+          </div>
         </div>
-      </div>
-    </template>
-  </UModal>
+      </template>
+    </UModal>
+  </div>
 </template>
 
 <script setup lang="ts">