diff --git a/frontend/src/components/DispositivoCard.vue b/frontend/src/components/DispositivoCard.vue
index 76da7b1..21a18b5 100644
--- a/frontend/src/components/DispositivoCard.vue
+++ b/frontend/src/components/DispositivoCard.vue
@@ -19,6 +19,17 @@ const connectedCount = computed(() => {
   const id = props.device.id;
   return props.users.filter(u => Array.isArray(u.dispositivos_conectados) && u.dispositivos_conectados.includes(id)).length;
 });
+
+// Usuarios conectados vs no conectados para mostrar en preview
+const connectedUsers = computed(() => {
+  const id = props.device.id;
+  return props.users.filter(u => Array.isArray(u.dispositivos_conectados) && u.dispositivos_conectados.includes(id));
+});
+
+const disconnectedUsers = computed(() => {
+  const id = props.device.id;
+  return props.users.filter(u => !Array.isArray(u.dispositivos_conectados) || !u.dispositivos_conectados.includes(id));
+});
 </script>
 
 <template>
@@ -43,6 +54,29 @@ const connectedCount = computed(() => {
       <div v-if="device.descripcion">Descripción: {{ device.descripcion }}</div>
     </div>
 
+    <!-- Preview de usuarios (siempre visible) -->
+    <div v-if="users && users.length && !simple" class="mt-2.5 pt-2.5 border-t border-border">
+      <div class="text-xs text-muted mb-1.5">Usuarios ({{ users.length }})</div>
+      <div class="flex flex-wrap gap-1.5">
+        <Badge
+          v-for="u in connectedUsers"
+          :key="u.username"
+          variant="pink"
+          class="text-[11px] py-0.5"
+        >
+          {{ u.username }}
+        </Badge>
+        <Badge
+          v-for="u in disconnectedUsers"
+          :key="u.username"
+          variant="secondary"
+          class="text-[11px] py-0.5"
+        >
+          {{ u.username }}
+        </Badge>
+      </div>
+    </div>
+
     <div v-if="expanded && users && users.length" class="mt-2">
       <div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-2.5">
         <UserCard