diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 405cdc0..0cc1a01 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -194,13 +194,13 @@ mat-spinner {
 .result-card {
   width: 100%;
   max-width: 250px;
-  height: 250px; 
+  height: 250px;
 }
 .paginator-container {
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
-  
+
 }
 
 .divider {
@@ -214,3 +214,61 @@ mat-card {
 .mat-tooltip {
   white-space: pre-line;
 }
+
+.classroom-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: flex-start;
+}
+
+.classroom-item {
+  flex: 0 1 calc(16.66% - 16px);
+  max-width: calc(16.66% - 16px);
+  box-sizing: border-box;
+}
+
+.classroom-card {
+  width: 100%;
+  text-align: center;
+}
+
+.client-text {
+  font-size: 0.8rem;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.client-name {
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+.card-og-live {
+  background-color: #4caf50;
+  color: white;
+}
+
+.card-busy {
+  background-color: #f44336;
+  color: white;
+}
+
+.card-windows {
+  background-color: #2196f3;
+  color: white;
+}
+
+.card-linux {
+  background-color: #9c27b0;
+  color: white;
+}
+
+.card-macos {
+  background-color: #ff9800;
+  color: white;
+}
+
+.card-off {
+  background-color: #9e9e9e;
+  color: white;
+}
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 43a30ba..2b97926 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -57,7 +57,7 @@
         </mat-card-content>
       </mat-card>
 
-      <mat-card class="card elements-card" joyrideStep="elementsStep" text="{{ 'elementsStepText' | translate }}" matTooltipShowDelay="1000" matTooltipPosition="above">
+      <mat-card class="card elements-card">
         <mat-card-title>
           <div class="title-with-breadcrumb">
             <span>{{ 'internalElementsTitle' | translate }}</span>
@@ -71,13 +71,15 @@
         </mat-card-title>
         <mat-card-content class="element-content">
           <mat-spinner *ngIf="loadingChildren"></mat-spinner>
-          <mat-list *ngIf="!loadingChildren">
+
+          <!-- Mostrar lista normal si no es un aula -->
+          <mat-list *ngIf="!loadingChildren && selectedDetail?.type !== 'classroom'">
             <div *ngIf="children.length === 0" class="empty-list">
               <mat-icon>info</mat-icon>
               <span>{{ 'noInternalElementsMessage' | translate }}</span>
             </div>
-            <mat-list-item *ngFor="let child of children" 
-                           [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" 
+            <mat-list-item *ngFor="let child of children"
+                           [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}"
                            (click)="onSelectChild(child)">
               <div class="item-content">
                 <mat-icon [ngSwitch]="child.type">
@@ -88,46 +90,57 @@
                   <ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
                   <ng-container *ngSwitchDefault>help_outline</ng-container>
                 </mat-icon>
-                {{child.name}}
+                {{ child.name }}
                 <div class="actions">
                   <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                   <mat-menu #menu="matMenu">
                     <button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
-                      <mat-icon matTooltip="{{ 'editElementTooltip' | translate }}" matTooltipHideDelay="0">edit</mat-icon>
+                      <mat-icon>edit</mat-icon>
                       <span>{{ 'editElementMenu' | translate }}</span>
                     </button>
-
-                    <button *ngIf="child.type !== 'client'" mat-menu-item (click)="onShowClick($event, child)">
-                      <mat-icon matTooltip="{{ 'viewUnitTooltip' | translate }}" matTooltipHideDelay="0">visibility</mat-icon>
-                      <span>{{ 'viewUnitMenu' | translate }}</span>
-                    </button>
-
-                    <button *ngIf="child.type !== 'client'" mat-menu-item (click)="addOU($event, child)">
-                      <mat-icon matTooltip="{{ 'addInternalUnitTooltip' | translate }}" matTooltipHideDelay="0">add_home_work</mat-icon>
-                      <span>{{ 'addInternalUnitMenu' | translate }}</span>
-                    </button>
-
-                    <button *ngIf="child.type !== 'client'" mat-menu-item (click)="addClient($event, child)">
-                      <mat-icon matTooltip="{{ 'addClientTooltip' | translate }}" matTooltipHideDelay="0">devices</mat-icon>
-                      <span>{{ 'addClientMenu' | translate }}</span>
-                    </button>
-
                     <button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
-                      <mat-icon matTooltip="{{ 'deleteElementTooltip' | translate }}" matTooltipHideDelay="0">delete</mat-icon>
+                      <mat-icon>delete</mat-icon>
                       <span>{{ 'deleteElementMenu' | translate }}</span>
                     </button>
-
-                    <button mat-menu-item (click)="onExecuteCommand($event, child.uuid, child.name, child.type)">
-                      <mat-icon matTooltip="{{ 'executeCommandTooltip' | translate }}" matTooltipHideDelay="0">play_arrow</mat-icon>
-                      <span>{{ 'executeCommandMenu' | translate }}</span>
-                    </button>
                   </mat-menu>
                 </div>
               </div>
             </mat-list-item>
           </mat-list>
+
+          <!-- Mostrar cuadrícula si es un aula -->
+          <div *ngIf="selectedDetail?.type === 'classroom'" class="classroom-grid">
+            <div *ngFor="let pc of selectedDetail.clients" class="classroom-item">
+              <mat-card class="classroom-card" [ngClass]="{
+                  'card-og-live': pc.status === 'og-live',
+                  'card-busy': pc.status === 'busy',
+                  'card-windows': pc.status === 'windows' || pc.status === 'windows-session',
+                  'card-linux': pc.status === 'linux' || pc.status === 'linux-session',
+                  'card-macos': pc.status === 'macos',
+                  'card-off': pc.status === 'off'
+                  }">
+                <mat-card-header>
+                  <mat-card-title class="client-name">{{ pc.name }}</mat-card-title>
+                </mat-card-header>
+                <mat-card-content>
+                  <p class="client-text">{{ pc.ip }}</p>
+                  <p class="client-text">{{ pc.mac }}</p>
+                </mat-card-content>
+                <mat-card-actions align="end">
+                  <button mat-icon-button color="primary" (click)="onEditClick($event, 'client', pc.uuid)">
+                    <mat-icon>edit</mat-icon>
+                  </button>
+                  <button  mat-icon-button color="warn" (click)="onDeleteClick($event, pc.uuid, pc.name, 'client')">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </mat-card-actions>
+              </mat-card>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
+
+
     </div>
   </mat-tab>
 
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 70af3f9..3066539 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -141,11 +141,8 @@ export class GroupsComponent implements OnInit {
     this.breadcrumb = this.breadcrumb.slice(0, index + 1);
     const target = this.breadcrumbData[index];
     this.breadcrumbData = this.breadcrumbData.slice(0, index + 1);
-    if (target.type === 'client') {
-      this.selectedDetail = target;
-    } else {
-      this.loadChildrenAndClients(target.id);
-    }
+    this.selectedDetail = target;
+    this.loadChildrenAndClients(target.id);
   }
 
   loadChildrenAndClients(id: string): void {
@@ -303,7 +300,7 @@ export class GroupsComponent implements OnInit {
   }
 
   onExecuteCommand(event: MouseEvent, child: any, name: string, type:string): void {
-    console.log('Executing command on:', child); 
+    console.log('Executing command on:', child);
 
     this.dialog.open(ExecuteCommandOuComponent, {
       width: '50%',
@@ -455,7 +452,7 @@ export class GroupsComponent implements OnInit {
     this.joyrideService.startTour({
       steps: ['groupsTitleStepText', 'addStep', 'keyStep', 'unitStep', 'elementsStep', 'tabsStep'],
       showPrevButton: true,
-      themeColor: '#3f51b5' 
+      themeColor: '#3f51b5'
     });
   }
 }