diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 7f0db7c..b2923f7 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -218,17 +218,75 @@ mat-card {
 .classroom-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px; /* Espacio entre elementos */
-  justify-content: flex-start; /* Alinea los elementos a la izquierda */
+  gap: 16px;
+  justify-content: flex-start; /* Opcional: para alinear a la izquierda */
 }
 
 .classroom-item {
-  flex: 0 1 calc(16.66% - 16px); /* 6 columnas (para pantallas grandes) */
-  box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
+  flex: 0 1 calc(16.66% - 16px); /* 6 columnas */
+  max-width: calc(16.66% - 16px);
+  text-align: center;
+  box-sizing: border-box;
 }
 
-.classroom-card {
-  width: 100%; /* Asegura que el card ocupe todo el espacio del item */
+.classroom-pc {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  background-color: #f4f4f4;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.pc-image {
+  width: 80px;
+  height: 80px;
+}
+
+.pc-details {
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.client-name {
+  font-weight: bold;
+  display: block;
+}
+
+.client-ip,
+.client-mac {
+  color: #666;
+  font-size: 10px;
+  display: block;
+}
+
+.pc-actions {
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.pc-og-live {
+  border: 2px solid #4caf50;
+}
+
+.pc-busy {
+  border: 2px solid  #ff9800;
+}
+
+.pc-off {
+  border: 2px solid #f44336;
+}
+
+.pc-linux {
+  border: 2px solid #9c27b0;
+}
+
+.pc-windows {
+  border: 2px solid #2196f3;
 }
 
 /* Pantallas medianas: 4 columnas */
@@ -261,33 +319,3 @@ mat-card {
   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 5745561..2de059a 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -111,32 +111,32 @@
           <!-- 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">
+              <div class="classroom-pc" [ngClass]="{
+                'pc-og-live': pc.status === 'og-live',
+                'pc-busy': pc.status === 'busy',
+                'pc-windows': pc.status === 'windows' || pc.status === 'windows-session',
+                'pc-linux': pc.status === 'linux' || pc.status === 'linux-session',
+                'pc-macos': pc.status === 'macos',
+                'pc-off': pc.status === 'off'
+                }">
+                <img mat-card-image src="assets/images/client.png" alt="PC Icon" class="pc-image">
+                <div class="pc-details">
+                  <span class="client-name">{{ pc.name }}</span>
+                  <span class="client-ip">{{ pc.ip }}</span>
+                  <span class="client-mac">{{ pc.mac }}</span>
+                </div>
+                <div class="pc-actions">
                   <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')">
+                  <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>
             </div>
           </div>
+
         </mat-card-content>
       </mat-card>
     </div>