diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 7e46598..22082d7 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -24,9 +24,10 @@
       </mat-list>
     </mat-card-content>
   </mat-card>
-  
-  <mat-card class="elements-card" *ngIf="children.length > 0">
-    <mat-card-title>{{ breadcrumb.join(' > ') }}</mat-card-title>
+
+  <mat-card class="elements-card">
+    <mat-card-title>Elementos</mat-card-title>
+    <mat-card-subtitle>{{ breadcrumb.join(' > ') }}</mat-card-subtitle>
     <mat-card-content>
       <mat-list role="list">
         <mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}">
@@ -67,4 +68,17 @@
     </mat-card-content>
   </mat-card>
 
-</div>
\ No newline at end of file
+  <mat-card class="details-card">
+    <mat-card-title>Detalles del elemento</mat-card-title>
+    <mat-card-content *ngIf="selectedDetail">
+      <p><strong>Nombre:</strong> {{ selectedDetail.name || selectedDetail.nombre }}</p>
+      <p><strong>Tipo:</strong> {{ selectedDetail.type }}</p>
+      <p><strong>ID:</strong> {{ selectedDetail.id }}</p>
+      <p *ngIf="selectedDetail.uuid"><strong>UUID:</strong> {{ selectedDetail.uuid }}</p>
+      <!-- Aquí puedes agregar más detalles específicos del elemento -->
+    </mat-card-content>
+    <mat-card-content *ngIf="!selectedDetail">
+      <p>Selecciona un elemento para ver sus detalles.</p>
+    </mat-card-content>
+  </mat-card>
+</div>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index c29a1db..1e249c5 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -16,6 +16,7 @@ import { EditClientComponent } from './clients/edit-client/edit-client.component
 export class GroupsComponent implements OnInit {
   unidadesOrganizativas: UnidadOrganizativa[] = [];
   selectedUnidad: UnidadOrganizativa | null = null;
+  selectedDetail: any | null = null;  // Nueva variable para el detalle del elemento seleccionado
   children: any[] = [];
   breadcrumb: string[] = [];
 
@@ -30,12 +31,14 @@ export class GroupsComponent implements OnInit {
 
   onSelectUnidad(unidad: UnidadOrganizativa): void {
     this.selectedUnidad = unidad;
+    this.selectedDetail = unidad;  // Mostrar detalles de la unidad seleccionada
     this.breadcrumb = [unidad.nombre];
     this.loadChildrenAndClients(unidad.uuid);
   }
 
   onSelectChild(child: any): void {
-    if (child.uuid && child.id) {
+    this.selectedDetail = child;  // Mostrar detalles del niño seleccionado
+    if (child.type !== 'client' && child.uuid && child.id) {
       this.breadcrumb.push(child.name || child.nombre);
       this.loadChildrenAndClients(child.uuid);
     }
@@ -72,6 +75,7 @@ export class GroupsComponent implements OnInit {
       }
     );
   }
+  
   addOU(): void {
     const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
 
@@ -143,14 +147,10 @@ export class GroupsComponent implements OnInit {
     console.log('Tipo del elemento a editar:', type);
     console.log('UUID del elemento a editar:', uuid);
     if (type != "client") {
-      const dialogRef = this.dialog.open(EditOrganizationalUnitComponent, {
-        data: { type, uuid }
-      });
+      const dialogRef = this.dialog.open(EditOrganizationalUnitComponent);
     } else {
       console.log('Editar cliente');
-      const dialogRef = this.dialog.open(EditClientComponent, {
-        data: { type, uuid }
-      });
+      const dialogRef = this.dialog.open(EditClientComponent);
     }
   }
 }