diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 5b9e321..74b2034 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -24,3 +24,24 @@ button {
 .selected-item {
   background-color: #e0e0e0;
 }
+
+.actions {
+  margin-left: auto; 
+}
+
+.actions mat-icon {
+  cursor: pointer; 
+  margin-left: 48px; 
+  color: #757575; 
+}
+
+.actions mat-icon:hover {
+  color: #212121;
+}
+
+.elements-card{
+  margin: 10px;
+  width: 800px;
+  background-color: #fafafa;
+  
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index efeb674..4dc1d5d 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -5,7 +5,7 @@
 <mat-divider></mat-divider>
 <h2>Grupos</h2>
 <div class="groupLists-container">
-  <mat-card>
+  <mat-card >
     <mat-card-title>Unidad organizativa</mat-card-title>
     <mat-card-content>
       <mat-list role="list">
@@ -15,20 +15,35 @@
           <div>
             <mat-icon>apartment</mat-icon>
             {{ unidad.nombre }}
-        </div>
+          </div>
         </mat-list-item>
       </mat-list>
     </mat-card-content>
   </mat-card>
 
-  <mat-card *ngIf="children.length > 0">
+  <mat-card class="finder-card" *ngIf="children.length > 0">
     <mat-card-title>{{ breadcrumb.join(' > ') }}</mat-card-title>
     <mat-card-content>
       <mat-list role="list">
         <mat-list-item *ngFor="let child of children" 
-          (click)="onSelectChild(child)"
+          
           [ngClass]="{'clickable-item': true}">
-          {{ child.name || child.nombre }}
+          <div>
+            <span (click)="onSelectChild(child)">
+            <ng-container [ngSwitch]="getIcon(child['type'])">
+              <mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
+              <svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z"/></svg>
+              <svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z"/></svg>
+              <svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z"/></svg>
+              <svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z"/></svg>
+            </ng-container>
+            {{ child.name || child.nombre }}
+            </span>
+            <span class="actions">
+              <mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid)">edit</mat-icon>
+              <mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid)">delete</mat-icon>
+            </span>
+          </div>
         </mat-list-item>
       </mat-list>
     </mat-card-content>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 6009b91..340a751 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -27,17 +27,17 @@ export class GroupsComponent implements OnInit {
   onSelectUnidad(unidad: UnidadOrganizativa): void {
     this.selectedUnidad = unidad;
     this.breadcrumb = [unidad.nombre];
-    this.loadChildrenAndClients(unidad.uuid);
+    this.loadChildrenAndClients(unidad.uuid, unidad.id);
   }
 
   onSelectChild(child: any): void {
     if (child.uuid && child.id) {
       this.breadcrumb.push(child.name || child.nombre);
-      this.loadChildrenAndClients(child.uuid);
+      this.loadChildrenAndClients(child.uuid, child.id);
     }
   }
 
-  loadChildrenAndClients(uuid: string): void {
+  loadChildrenAndClients(uuid: string, id: number): void {
     this.dataService.getChildren(uuid).subscribe(
       childrenData => {
         this.dataService.getClients(uuid).subscribe(
@@ -60,4 +60,31 @@ export class GroupsComponent implements OnInit {
   addOU(): void {
     this.dialog.open(CreateOrganizationalUnitComponent);
   }
+
+  getIcon(type: string): string {
+    switch(type) {
+      case 'organizational-unit':
+        return 'apartment';
+      case 'classroom-group':
+        return 'classrooms-group-icon';
+      case 'classroom':
+        return 'classroom-icon';
+      case 'client':
+        return 'client-icon';
+      case 'clients-group':
+        return 'clients-group-icon';
+      default:
+        return '';
+    }
+  }
+
+  onDeleteClick(uuid: string): void {
+    console.log('UUID del elemento a eliminar:', uuid);
+    // Aquí puedes agregar lógica adicional para eliminar el elemento si es necesario
+  }
+
+  onEditClick(uuid: string): void {
+    console.log('UUID del elemento a editar:', uuid);
+    // Aquí puedes agregar lógica adicional para editar el elemento si es necesario
+  }
 }
diff --git a/ogWebconsole/src/app/components/groups/model.ts b/ogWebconsole/src/app/components/groups/model.ts
index 2436b80..77c405d 100644
--- a/ogWebconsole/src/app/components/groups/model.ts
+++ b/ogWebconsole/src/app/components/groups/model.ts
@@ -14,3 +14,4 @@ export interface UnidadOrganizativa {
   uuid: string;
   aulas: Aula[];
 }
+