diff --git a/nuxt4-app/app/components/UserMenu.vue b/nuxt4-app/app/components/UserMenu.vue
index 63ded28..b22bedf 100644
--- a/nuxt4-app/app/components/UserMenu.vue
+++ b/nuxt4-app/app/components/UserMenu.vue
@@ -24,12 +24,19 @@ const items = computed(() => [
     slot: 'account',
     type: 'label'
   }],
+  [{
+    label: 'Metadatos',
+    description: 'Información del usuario',
+    icon: 'i-heroicons-information-circle',
+    iconClass: 'text-purple-500',
+    slot: 'metadata'
+  }],
   [{
     label: 'Mi Perfil',
     description: 'Ver y editar perfil',
     icon: 'i-lucide-user',
     iconClass: 'text-blue-500',
-    to: '/profile',
+    click: () => goToProfile(),
     slot: 'profile'
   },
   {
@@ -39,15 +46,6 @@ const items = computed(() => [
     iconClass: 'text-gray-500',
     to: '/settings',
     slot: 'settings'
-  },
-  {
-    label: 'Notificaciones',
-    description: 'Gestionar notificaciones',
-    icon: 'i-lucide-bell',
-    iconClass: 'text-amber-500',
-    to: '/notifications',
-    slot: 'notifications',
-    badge: '3'
   }],
   [{
     label: 'Ayuda y Soporte',
@@ -150,6 +148,85 @@ const items = computed(() => [
       </div>
     </template>
 
+    <template #metadata="{ item }">
+      <div class="px-2 py-3 space-y-3 max-h-96 overflow-y-auto">
+        <!-- Username -->
+        <div class="flex items-start gap-3">
+          <UIcon name="i-heroicons-at-symbol" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+          <div class="flex-1 min-w-0">
+            <p class="text-xs text-gray-500 dark:text-gray-400">Username</p>
+            <p class="font-medium text-sm">{{ user?.username }}</p>
+          </div>
+        </div>
+
+        <!-- Email -->
+        <div class="flex items-start gap-3">
+          <UIcon name="i-heroicons-envelope" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+          <div class="flex-1 min-w-0">
+            <p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
+            <p class="font-medium text-sm">{{ user?.email || 'No especificado' }}</p>
+          </div>
+        </div>
+
+        <!-- Nombre completo -->
+        <div class="flex items-start gap-3">
+          <UIcon name="i-heroicons-user" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+          <div class="flex-1 min-w-0">
+            <p class="text-xs text-gray-500 dark:text-gray-400">Nombre Completo</p>
+            <p class="font-medium text-sm">{{ user?.name || 'No especificado' }}</p>
+          </div>
+        </div>
+
+        <!-- UID -->
+        <div class="flex items-start gap-3">
+          <UIcon name="i-heroicons-key" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+          <div class="flex-1 min-w-0">
+            <p class="text-xs text-gray-500 dark:text-gray-400">ID Único</p>
+            <p class="font-mono text-xs text-gray-600 dark:text-gray-300">{{ user?.uid }}</p>
+          </div>
+        </div>
+
+        <!-- Grupos -->
+        <div class="flex items-start gap-3">
+          <UIcon name="i-heroicons-user-group" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+          <div class="flex-1 min-w-0">
+            <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Grupos</p>
+            <div class="flex flex-wrap gap-2">
+              <UBadge
+                v-for="group in user?.groups"
+                :key="group"
+                color="primary"
+                variant="soft"
+                size="xs"
+              >
+                {{ group }}
+              </UBadge>
+              <UBadge v-if="!user?.groups || user.groups.length === 0" color="gray" variant="soft" size="xs">
+                Sin grupos
+              </UBadge>
+            </div>
+          </div>
+        </div>
+
+        <!-- Metadata de Authentik -->
+        <div v-if="user?.appSlug || user?.outpostName" class="pt-3 border-t border-gray-200 dark:border-gray-700">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Conexión Authentik</p>
+          <div class="space-y-2">
+            <div v-if="user?.appSlug" class="flex items-center gap-2 text-xs">
+              <UIcon name="i-heroicons-cube" class="text-gray-400" />
+              <span class="text-gray-600 dark:text-gray-300">App:</span>
+              <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">{{ user.appSlug }}</code>
+            </div>
+            <div v-if="user?.outpostName" class="flex items-center gap-2 text-xs">
+              <UIcon name="i-heroicons-server" class="text-gray-400" />
+              <span class="text-gray-600 dark:text-gray-300">Outpost:</span>
+              <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">{{ user.outpostName }}</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
     <template #settings="{ item }">
       <div class="flex items-center gap-3">
         <div :class="['w-9 h-9 rounded-lg bg-gray-50 dark:bg-gray-800/50 flex items-center justify-center transition-colors duration-200 group-hover:bg-gray-100 dark:group-hover:bg-gray-800']">
@@ -167,26 +244,5 @@ const items = computed(() => [
       </div>
     </template>
 
-    <template #notifications="{ item }">
-      <div class="flex items-center gap-3">
-        <div class="relative">
-          <div :class="['w-9 h-9 rounded-lg bg-amber-50 dark:bg-amber-950/30 flex items-center justify-center transition-colors duration-200 group-hover:bg-amber-100 dark:group-hover:bg-amber-950/50']">
-            <UIcon :name="item.icon" :class="['w-4 h-4', item.iconClass]" />
-          </div>
-          <span v-if="item.badge" class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center ring-2 ring-white dark:ring-gray-900">
-            {{ item.badge }}
-          </span>
-        </div>
-        <div class="flex-1 min-w-0">
-          <p class="font-semibold text-sm text-gray-900 dark:text-white">
-            {{ item.label }}
-          </p>
-          <p class="text-xs text-gray-500 dark:text-gray-400">
-            {{ item.description }}
-          </p>
-        </div>
-        <UIcon name="i-lucide-chevron-right" class="w-4 h-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200" />
-      </div>
-    </template>
   </UDropdownMenu>
 </template>
diff --git a/nuxt4-app/app/components/auth/BackendVerificationButton.vue b/nuxt4-app/app/components/auth/BackendVerificationButton.vue
new file mode 100644
index 0000000..a3cf8c0
--- /dev/null
+++ b/nuxt4-app/app/components/auth/BackendVerificationButton.vue
@@ -0,0 +1,82 @@
+<template>
+  <UButton
+    color="orange"
+    size="lg"
+    variant="outline"
+    :loading="loading"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-server" />
+    </template>
+    Verificación Backend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const toast = useToast()
+const loading = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+
+  try {
+    // Consultar el endpoint que lee los headers del servidor
+    const response = await $fetch<{
+      authenticated: boolean
+      user?: {
+        username: string
+        groups: string[]
+      }
+    }>('/api/auth/status')
+
+    if (response.authenticated && response.user) {
+      const groupCount = response.user.groups.length
+      const groupList = response.user.groups.join(', ') || 'Ninguno'
+
+      toast.add({
+        title: 'Verificación Backend',
+        description: `Usuario: ${response.user.username}
+Grupos (${groupCount}): ${groupList}`,
+        color: 'orange',
+        icon: 'i-heroicons-server-stack',
+        timeout: 5000
+      })
+    } else {
+      toast.add({
+        title: 'No Autenticado (Backend)',
+        description: 'No hay sesión activa en el servidor',
+        color: 'warning',
+        icon: 'i-heroicons-exclamation-triangle'
+      })
+    }
+  } catch (error) {
+    toast.add({
+      title: 'Error Backend',
+      description: 'No se pudo verificar en el servidor',
+      color: 'error',
+      icon: 'i-heroicons-x-circle'
+    })
+    console.error('Backend verification error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -1px rgba(249, 115, 22, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2), 0 4px 6px -2px rgba(249, 115, 22, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>
diff --git a/nuxt4-app/app/components/auth/CheckAuthentikAdminsButton.vue b/nuxt4-app/app/components/auth/CheckAuthentikAdminsButton.vue
new file mode 100644
index 0000000..f5a016d
--- /dev/null
+++ b/nuxt4-app/app/components/auth/CheckAuthentikAdminsButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="authentik Admins"
+    label="Authentik Admins"
+    icon="i-heroicons-shield-check"
+    color="red"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>
diff --git a/nuxt4-app/app/components/auth/CheckGrupoPruebaButton.vue b/nuxt4-app/app/components/auth/CheckGrupoPruebaButton.vue
new file mode 100644
index 0000000..b431160
--- /dev/null
+++ b/nuxt4-app/app/components/auth/CheckGrupoPruebaButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="grupo-prueba"
+    label="Grupo Prueba"
+    icon="i-heroicons-beaker"
+    color="blue"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>
diff --git a/nuxt4-app/app/components/auth/CheckLvl0Button.vue b/nuxt4-app/app/components/auth/CheckLvl0Button.vue
new file mode 100644
index 0000000..6591814
--- /dev/null
+++ b/nuxt4-app/app/components/auth/CheckLvl0Button.vue
@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="lvl0"
+    label="Level 0"
+    icon="i-heroicons-key"
+    color="green"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>
diff --git a/nuxt4-app/app/components/auth/CheckPublicAccessButton.vue b/nuxt4-app/app/components/auth/CheckPublicAccessButton.vue
new file mode 100644
index 0000000..120f006
--- /dev/null
+++ b/nuxt4-app/app/components/auth/CheckPublicAccessButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="public-access"
+    label="Acceso Público"
+    icon="i-heroicons-globe-alt"
+    color="gray"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>
diff --git a/nuxt4-app/app/components/auth/FrontendVerificationButton.vue b/nuxt4-app/app/components/auth/FrontendVerificationButton.vue
new file mode 100644
index 0000000..ed93d56
--- /dev/null
+++ b/nuxt4-app/app/components/auth/FrontendVerificationButton.vue
@@ -0,0 +1,59 @@
+<template>
+  <UButton
+    color="purple"
+    size="lg"
+    variant="outline"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-computer-desktop" />
+    </template>
+    Verificación Frontend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+const toast = useToast()
+
+const handleClick = () => {
+  if (!user.value) {
+    toast.add({
+      title: 'No Autenticado',
+      description: 'No hay usuario autenticado',
+      color: 'warning',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    return
+  }
+
+  const groupCount = user.value.groups.length
+  const groupList = user.value.groups.join(', ') || 'Ninguno'
+
+  toast.add({
+    title: 'Verificación Frontend',
+    description: `Usuario: ${user.value.username}
+Grupos (${groupCount}): ${groupList}`,
+    color: 'purple',
+    icon: 'i-heroicons-check-badge',
+    timeout: 5000
+  })
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.1), 0 2px 4px -1px rgba(147, 51, 234, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.2), 0 4px 6px -2px rgba(147, 51, 234, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>
diff --git a/nuxt4-app/app/components/auth/GroupCheckButton.vue b/nuxt4-app/app/components/auth/GroupCheckButton.vue
new file mode 100644
index 0000000..bf44d05
--- /dev/null
+++ b/nuxt4-app/app/components/auth/GroupCheckButton.vue
@@ -0,0 +1,112 @@
+<template>
+  <UButton
+    :color="color"
+    :size="size"
+    :variant="variant"
+    :loading="loading"
+    @click="handleClick"
+    class="group-check-button"
+  >
+    <template #leading>
+      <UIcon :name="icon" />
+    </template>
+    <slot>{{ label }}</slot>
+  </UButton>
+</template>
+
+<script setup lang="ts">
+import type { ButtonColor, ButtonVariant, ButtonSize } from '#ui/types'
+
+interface Props {
+  groupName: string
+  label?: string
+  icon?: string
+  color?: ButtonColor
+  variant?: ButtonVariant
+  size?: ButtonSize
+  verifyBackend?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Verificar Grupo',
+  icon: 'i-heroicons-shield-check',
+  color: 'primary',
+  variant: 'soft',
+  size: 'lg',
+  verifyBackend: false
+})
+
+const { hasGroup, checkGroupBackend } = useAuthentik()
+const toast = useToast()
+const loading = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+
+  try {
+    if (props.verifyBackend) {
+      // Verificación backend
+      const hasAccess = await checkGroupBackend(props.groupName)
+
+      if (hasAccess) {
+        toast.add({
+          title: 'Acceso Permitido (Backend)',
+          description: `Perteneces al grupo: ${props.groupName}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        toast.add({
+          title: 'Acceso Denegado (Backend)',
+          description: `No perteneces al grupo: ${props.groupName}`,
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+    } else {
+      // Verificación frontend
+      const hasAccess = hasGroup(props.groupName)
+
+      if (hasAccess) {
+        toast.add({
+          title: 'Acceso Permitido (Frontend)',
+          description: `Perteneces al grupo: ${props.groupName}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        toast.add({
+          title: 'Acceso Denegado (Frontend)',
+          description: `No perteneces al grupo: ${props.groupName}`,
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+    }
+  } catch (error) {
+    toast.add({
+      title: 'Error de Verificación',
+      description: 'No se pudo verificar el grupo',
+      color: 'error',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    console.error('Group check error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.group-check-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.group-check-button:hover {
+  transform: translateY(-2px);
+}
+
+.group-check-button:active {
+  transform: translateY(0);
+}
+</style>
diff --git a/nuxt4-app/app/components/auth/LoginButton.vue b/nuxt4-app/app/components/auth/LoginButton.vue
new file mode 100644
index 0000000..b02a705
--- /dev/null
+++ b/nuxt4-app/app/components/auth/LoginButton.vue
@@ -0,0 +1,19 @@
+<template>
+  <UButton
+    color="success"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
+    </template>
+    Iniciar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  // Recargar la página para forzar redirect de Authentik al login
+  window.location.reload()
+}
+</script>
diff --git a/nuxt4-app/app/components/auth/LogoutButton.vue b/nuxt4-app/app/components/auth/LogoutButton.vue
new file mode 100644
index 0000000..193012d
--- /dev/null
+++ b/nuxt4-app/app/components/auth/LogoutButton.vue
@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="error"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-on-rectangle" />
+    </template>
+    Cerrar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { logout } = useAuthentik()
+
+const handleClick = () => {
+  logout()
+}
+</script>
diff --git a/nuxt4-app/app/components/auth/ProfileButton.vue b/nuxt4-app/app/components/auth/ProfileButton.vue
new file mode 100644
index 0000000..11d81ff
--- /dev/null
+++ b/nuxt4-app/app/components/auth/ProfileButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <UButton
+    color="primary"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-user-circle" />
+    </template>
+    Ver Perfil
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { goToProfile } = useAuthentik()
+
+const handleClick = () => {
+  goToProfile()
+}
+</script>
diff --git a/nuxt4-app/app/components/auth/SessionStatusButton.vue b/nuxt4-app/app/components/auth/SessionStatusButton.vue
new file mode 100644
index 0000000..68b6465
--- /dev/null
+++ b/nuxt4-app/app/components/auth/SessionStatusButton.vue
@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="info"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-information-circle" />
+    </template>
+    Estado de Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { checkSessionStatus } = useAuthentik()
+
+const handleClick = () => {
+  checkSessionStatus()
+}
+</script>
diff --git a/nuxt4-app/app/components/auth/UserAvatar.vue b/nuxt4-app/app/components/auth/UserAvatar.vue
new file mode 100644
index 0000000..c11c039
--- /dev/null
+++ b/nuxt4-app/app/components/auth/UserAvatar.vue
@@ -0,0 +1,20 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <div class="flex items-center gap-4">
+      <UAvatar
+        :src="user.avatar"
+        :alt="user.name || user.username"
+        size="xl"
+      />
+      <div class="flex-1">
+        <h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ID: {{ user.uid }}</p>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>
diff --git a/nuxt4-app/app/components/auth/UserMetadata.vue b/nuxt4-app/app/components/auth/UserMetadata.vue
new file mode 100644
index 0000000..2151c63
--- /dev/null
+++ b/nuxt4-app/app/components/auth/UserMetadata.vue
@@ -0,0 +1,90 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <template #header>
+      <h3 class="font-semibold text-lg flex items-center gap-2">
+        <UIcon name="i-heroicons-information-circle" />
+        Metadatos del Usuario
+      </h3>
+    </template>
+
+    <div class="space-y-3">
+      <!-- Username -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-at-symbol" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Username</p>
+          <p class="font-medium">{{ user.username }}</p>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-envelope" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
+          <p class="font-medium">{{ user.email }}</p>
+        </div>
+      </div>
+
+      <!-- Nombre completo -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Nombre Completo</p>
+          <p class="font-medium">{{ user.name || 'No especificado' }}</p>
+        </div>
+      </div>
+
+      <!-- UID -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-key" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">ID Único</p>
+          <p class="font-mono text-sm">{{ user.uid }}</p>
+        </div>
+      </div>
+
+      <!-- Grupos -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user-group" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Grupos</p>
+          <div class="flex flex-wrap gap-2">
+            <UBadge
+              v-for="group in user.groups"
+              :key="group"
+              color="primary"
+              variant="soft"
+            >
+              {{ group }}
+            </UBadge>
+            <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
+              Sin grupos asignados
+            </UBadge>
+          </div>
+        </div>
+      </div>
+
+      <!-- Metadata de la Aplicación (si está disponible) -->
+      <div v-if="user.appSlug || user.outpostName" class="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
+        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Información de Conexión</p>
+        <div class="space-y-2">
+          <div v-if="user.appSlug" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-cube" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">App: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.appSlug }}</code>
+          </div>
+          <div v-if="user.outpostName" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-server" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">Outpost: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.outpostName }}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>