diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
index 31e967e..52a3268 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
@@ -31,7 +31,10 @@
   </div>
   <div class="table-header-container">
     <h2 class="title" i18n="@@adminImagesTitle">Discos/Particiones</h2>
-    <mat-chip> {{ clientData.firmwareType }}</mat-chip>
+    <mat-chip *ngIf="clientData.firmwareType" class="firmware-chip">
+      <mat-icon>memory</mat-icon>
+      {{ clientData.firmwareType }}
+    </mat-chip>
   </div>
 
   <div class="disk-container">
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index f4a5383..722ad3e 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -20,6 +20,8 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  min-height: 0;
+  will-change: auto;
 }
 
 .clients-mat-divider {
@@ -46,7 +48,7 @@
     padding: 1rem !important;
     box-sizing: border-box !important;
     min-height: 250px !important;
-    overflow-y: auto !important;
+    overflow: hidden !important;
   }
 
   .filters-panel,
@@ -56,6 +58,7 @@
     padding: 0.5rem !important;
     box-sizing: border-box !important;
     margin-bottom: 0 !important;
+    max-height: 300px !important;
   }
 
   .filters-container {
@@ -85,18 +88,20 @@
   }
 
   .cards-view {
-    max-height: none !important;
+    max-height: calc(100vh - 400px) !important;
   }
 
   .clients-table {
-    max-height: unset !important;
-    overflow: unset !important;
-    display: table !important;
-    flex-direction: unset !important;
+    max-height: none !important;
+    overflow: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    flex: 1 !important;
   }
 
   .clients-container {
     padding: 0em 1em 0em 1em !important;
+    overflow: auto !important;
   }
 }
 
@@ -162,7 +167,9 @@
 
 .clients-view {
   flex-grow: 1;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
 }
 
 .cards-view {
@@ -184,16 +191,23 @@
 
 .list-view {
   overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  scroll-behavior: smooth;
 }
 
 .clients-table {
-  max-height: calc(100vh - 330px);
+  flex: 1;
   overflow: auto;
   display: flex;
   flex-direction: column;
   width: 100%;
   table-layout: auto;
   border-collapse: collapse;
+  will-change: scroll-position;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
 }
 
 .clients-table th,
@@ -223,11 +237,13 @@
   width: 100%;
   margin-left: 1rem;
   background-color: #fafafa;
+  margin-bottom: 1rem;
 }
 
 .list-paginator {
   width: 100%;
   background-color: #f3f3f3;
+  margin-bottom: 1rem;
 }
 
 .actions mat-icon {
@@ -305,7 +321,6 @@ mat-tree mat-tree-node:hover mat-icon {
 }
 
 mat-tree mat-tree-node mat-icon.node-icon {
-  color: #757575;
   margin-right: 10px;
 }
 
@@ -382,19 +397,26 @@ mat-tree mat-tree-node.disabled:hover {
 .clients-container {
   flex: 8;
   box-sizing: border-box;
-  overflow: hidden;
+  overflow: auto;
   display: flex;
   flex-direction: column;
   padding: 0rem 1rem 0rem 0.5rem;
+  background: #fafbfc;
+  border-radius: 12px;
+  margin-left: 0.5rem;
+  min-height: 0;
 }
 
 .filters-and-tree-container {
-  flex: 2;
   display: flex;
   flex-direction: column;
-  flex-shrink: 1;
-  width: 100%;
+  gap: 0.5rem;
+  flex: 2;
+  min-width: 400px;
+  max-width: 100%;
   box-sizing: border-box;
+  width: 100%;
+  padding: 0 0.5rem;
 }
 
 .filters-container {
@@ -418,8 +440,321 @@ mat-tree mat-tree-node.disabled:hover {
 .tree-container {
   flex-grow: 1;
   overflow-y: auto;
-  max-height: calc(100% - var(--filters-panel-height));
   margin-bottom: 1rem;
+  background: white;
+  border-radius: 12px;
+  border: 1px solid #e9ecef;
+  width: 100%;
+  min-width: 0;
+  max-height: calc(100vh - 400px);
+  min-height: 200px;
+  will-change: scroll-position;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+}
+
+.tree-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 2px solid #e9ecef;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 12px 12px 0 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.tree-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: #2c3e50;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.tree-title mat-icon {
+  color: #3f51b5;
+  font-size: 28px;
+  width: 28px;
+  height: 28px;
+  background: rgba(63, 81, 181, 0.1);
+  border-radius: 50%;
+  padding: 4px;
+}
+
+.tree-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.tree-actions button {
+  color: #6c757d;
+  transition: all 0.3s ease;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+.tree-actions button:hover {
+  color: #3f51b5;
+  background-color: rgba(63, 81, 181, 0.1);
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(63, 81, 181, 0.2);
+}
+
+.modern-tree {
+  background: transparent;
+  padding: 12px 0;
+  border-radius: 0 0 12px 12px;
+}
+
+.tree-node {
+  margin: 2px 8px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  position: relative;
+  border-left: 3px solid transparent;
+}
+
+.tree-node:hover {
+  background-color: rgba(102, 126, 234, 0.08);
+  transform: translateX(4px);
+  border-left-color: #667eea;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  gap: 12px;
+  width: 100%;
+  min-height: 52px;
+}
+
+.expand-button {
+  min-width: 36px;
+  color: #6c757d;
+  transition: all 0.3s ease;
+  border-radius: 50%;
+}
+
+.expand-button:hover:not(.disabled-toggle) {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.1);
+  transform: scale(1.1);
+}
+
+.expand-icon {
+  transition: transform 0.3s ease;
+  font-size: 20px;
+}
+
+.tree-node:hover .expand-icon {
+  transform: scale(1.2);
+}
+
+.node-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.node-main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.node-icon {
+  font-size: 22px;
+  width: 22px;
+  height: 22px;
+  transition: all 0.3s ease;
+  border-radius: 50%;
+  padding: 4px;
+  background: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.tree-node:hover .node-icon {
+  transform: scale(1.1);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.node-name {
+  font-weight: 500;
+  color: #2c3e50;
+  font-size: 0.95rem;
+  transition: color 0.2s ease;
+}
+
+.tree-node:hover .node-name {
+  color: #1a237e;
+  font-weight: 600;
+}
+
+.node-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 0.8rem;
+  color: #6c757d;
+}
+
+.node-ip {
+  font-family: 'Courier New', monospace;
+  color: #495057;
+  font-weight: 500;
+}
+
+.node-count {
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  display: inline-block;
+  margin-top: 2px;
+}
+
+.node-status {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.node-status.status-off { 
+  background: linear-gradient(135deg, #dc3545, #c82333); 
+  color: white; 
+  box-shadow: 0 1px 3px rgba(220, 53, 69, 0.3);
+}
+
+.node-status.status-og-live { 
+  background: linear-gradient(135deg, #28a745, #20c997); 
+  color: white; 
+  box-shadow: 0 1px 3px rgba(40, 167, 69, 0.3);
+}
+
+.node-status.status-linux { 
+  background: linear-gradient(135deg, #17a2b8, #138496); 
+  color: white; 
+  box-shadow: 0 1px 3px rgba(23, 162, 184, 0.3);
+}
+
+.node-status.status-windows { 
+  background: linear-gradient(135deg, #007bff, #0056b3); 
+  color: white; 
+  box-shadow: 0 1px 3px rgba(0, 123, 255, 0.3);
+}
+
+.node-status.status-busy { 
+  background: linear-gradient(135deg, #ffc107, #e0a800); 
+  color: #212529; 
+  box-shadow: 0 1px 3px rgba(255, 193, 7, 0.3);
+}
+
+.node-status.status-disconnected { 
+  background: linear-gradient(135deg, #6c757d, #545b62); 
+  color: white; 
+  box-shadow: 0 1px 3px rgba(108, 117, 125, 0.3);
+}
+
+.node-status.status-initializing { 
+  background: linear-gradient(135deg, #fd7e14, #e55a00); 
+  color: white; 
+  box-shadow: 0 1px 3px rgba(253, 126, 20, 0.3);
+}
+
+.node-actions {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.tree-node:hover .node-actions {
+  opacity: 1;
+}
+
+.menu-button {
+  min-width: 32px;
+  color: #6c757d;
+  transition: all 0.2s ease;
+}
+
+.menu-button:hover {
+  color: #667eea;
+  background-color: rgba(102, 126, 234, 0.1);
+}
+
+.selected-node {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(102, 126, 234, 0.08));
+  border-left-color: #667eea;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
+}
+
+.selected-node .node-name {
+  color: #1a237e;
+  font-weight: 600;
+}
+
+.selected-node .node-icon {
+  background: rgba(102, 126, 234, 0.1);
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+/* Animaciones */
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.tree-node {
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .tree-header {
+    padding: 12px 16px;
+  }
+  
+  .tree-title {
+    font-size: 1rem;
+  }
+  
+  .node-content {
+    padding: 8px 12px;
+    min-height: 48px;
+  }
+  
+  .node-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+  
+  .node-name {
+    font-size: 0.9rem;
+  }
+  
+  .node-details {
+    font-size: 0.75rem;
+  }
 }
 
 .client-item {
@@ -428,24 +763,26 @@ mat-tree mat-tree-node.disabled:hover {
 }
 
 .client-card {
-  background-color: #fff;
-  border: 1px solid #ccc;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border: 1.5px solid #e1e5e9cc;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   width: 100%;
-  max-width: 300px;
+  max-width: 260px;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  transition: all 0.2s ease;
   position: relative;
+  padding: 6px 4px;
 }
 
 .client-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
 }
 
 .client-details {
@@ -454,6 +791,8 @@ mat-tree mat-tree-node.disabled:hover {
   flex-direction: column;
   justify-content: space-between;
   margin-top: 4px;
+  width: 100%;
+  gap: 4px;
 }
 
 .type-view-text {
@@ -465,19 +804,76 @@ mat-tree mat-tree-node.disabled:hover {
   justify-content: center;
   align-items: center;
   gap: 1px;
-  margin-top: 10px;
+  margin-top: 4px;
+  padding: 3px;
+  border-radius: 4px;
+  width: 100%;
 }
 
-.client-status-container {
-  display: flex;
-  align-items: center;
-  gap: 5px;
+.action-icons button {
+  transition: all 0.15s ease;
+}
+
+.action-icons button:hover {
+  transform: scale(1.05);
+  background: rgba(63, 81, 181, 0.08);
+}
+
+.client-image {
+  width: 32px;
+  height: 32px;
+  margin: 4px 0;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+  transition: transform 0.2s ease;
+}
+
+/* Iconos más grandes solo en vista de tarjetas */
+.cards-view .client-image {
+  width: 42px;
+  height: 42px;
+  margin: 5px 0;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
+}
+
+.client-card:hover .client-image {
+  transform: scale(1.05);
+}
+
+.cards-view .client-card:hover .client-image {
+  transform: scale(1.1);
+}
+
+.client-name {
+  display: block;
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 2px;
+  padding: 0 4px;
+  color: #2c3e50;
+  line-height: 1.2;
+  word-break: break-word;
 }
 
 .client-ip {
   display: block;
-  font-size: 0.9em;
-  color: #666;
+  font-size: 0.7rem;
+  color: #6c757d;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  padding: 1px 4px;
+  border-radius: 3px;
+  margin: 1px 0;
+  word-break: break-all;
+}
+
+.client-mac {
+  display: block;
+  font-size: 0.6rem;
+  color: #6c757d;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  padding: 1px 3px;
+  border-radius: 3px;
+  margin: 1px 0;
+  word-break: break-all;
 }
 
 .clients-list {
@@ -487,8 +883,13 @@ mat-tree mat-tree-node.disabled:hover {
 }
 
 .sync-spinner {
-  margin-left: 1em;
-  margin-right: 1em;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 2;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  padding: 1px;
 }
 
 .mat-elevation-z8 {
@@ -561,9 +962,783 @@ mat-button-toggle-group {
 
 .clients-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 10px;
   padding: 0.5rem 1rem 1rem 1rem;
   width: 100%;
   box-sizing: border-box;
 }
+
+/* Estilo para hacer el backdrop no clickeable */
+::ng-deep .non-clickable-backdrop {
+  pointer-events: none !important;
+}
+
+/* Estados de los PCs - Colores exactos de los SVG */
+.status-off .client-card {
+  border-color: #b0b0b0cc;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+}
+
+.status-off .client-image {
+  filter: drop-shadow(0 2px 4px rgba(102, 102, 102, 0.3));
+}
+
+.status-off:hover .client-card {
+  border-color: #a0a0a0cc;
+  background: linear-gradient(135deg, #f8f9fa 0%, #dee2e6 100%);
+}
+
+.status-busy .client-card {
+  border-color: #ea332388;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
+}
+
+.status-busy .client-image {
+  filter: drop-shadow(0 2px 4px rgba(234, 51, 35, 0.3));
+}
+
+.status-busy:hover .client-card {
+  border-color: #d6338488;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffebeb 100%);
+}
+
+.status-disconnected .client-card {
+  border-color: #ff000088;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
+}
+
+.status-disconnected .client-image {
+  filter: drop-shadow(0 2px 4px rgba(255, 0, 0, 0.3));
+}
+
+.status-disconnected:hover .client-card {
+  border-color: #dc354588;
+  background: linear-gradient(135deg, #fff5f5 0%, #ffebeb 100%);
+}
+
+.status-initializing .client-card {
+  border-color: #75fbfd88;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e6f3ff 100%);
+}
+
+.status-initializing .client-image {
+  filter: drop-shadow(0 2px 4px rgba(117, 251, 253, 0.3));
+}
+
+.status-initializing:hover .client-card {
+  border-color: #17a2b888;
+  background: linear-gradient(135deg, #f0f9ff 0%, #d1ecf1 100%);
+}
+
+.status-og-live .client-card {
+  border-color: #ffff5588;
+  background: linear-gradient(135deg, #fffbf0 0%, #fff3cd 100%);
+}
+
+.status-og-live .client-image {
+  filter: drop-shadow(0 2px 4px rgba(255, 255, 85, 0.3));
+}
+
+.status-og-live:hover .client-card {
+  border-color: #ffc10788;
+  background: linear-gradient(135deg, #fffbf0 0%, #ffeaa7 100%);
+}
+
+.status-linux .client-card {
+  border-color: #ea33f788;
+  background: linear-gradient(135deg, #f8f0ff 0%, #f0e6ff 100%);
+}
+
+.status-linux .client-image {
+  filter: drop-shadow(0 2px 4px rgba(234, 51, 247, 0.3));
+}
+
+.status-linux:hover .client-card {
+  border-color: #6f42c188;
+  background: linear-gradient(135deg, #f8f0ff 0%, #e6d9ff 100%);
+}
+
+.status-linux-session .client-card {
+  border-color: #ea33f788;
+  background: linear-gradient(135deg, #f8f0ff 0%, #f0e6ff 100%);
+}
+
+.status-linux-session .client-image {
+  filter: drop-shadow(0 2px 4px rgba(234, 51, 247, 0.3));
+}
+
+.status-linux-session:hover .client-card {
+  border-color: #6f42c188;
+  background: linear-gradient(135deg, #f8f0ff 0%, #e6d9ff 100%);
+}
+
+.status-windows .client-card {
+  border-color: #0000f588;
+  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
+}
+
+.status-windows .client-image {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 245, 0.3));
+}
+
+.status-windows:hover .client-card {
+  border-color: #007bff88;
+  background: linear-gradient(135deg, #f0f8ff 0%, #cce7ff 100%);
+}
+
+.status-windows-session .client-card {
+  border-color: #0000f588;
+  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
+}
+
+.status-windows-session .client-image {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 245, 0.3));
+}
+
+.status-windows-session:hover .client-card {
+  border-color: #007bff88;
+  background: linear-gradient(135deg, #f0f8ff 0%, #cce7ff 100%);
+}
+
+.status-macos .client-card {
+  border-color: #f19e3988;
+  background: linear-gradient(135deg, #fff8f0 0%, #ffe6cc 100%);
+}
+
+.status-macos .client-image {
+  filter: drop-shadow(0 2px 4px rgba(241, 158, 57, 0.3));
+}
+
+.status-macos:hover .client-card {
+  border-color: #fd7e1488;
+  background: linear-gradient(135deg, #fff8f0 0%, #ffd280 100%);
+}
+
+/* Estilos para el checkbox */
+.client-card mat-checkbox {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  z-index: 2;
+}
+
+/* Responsive adjustments - manteniendo tamaño compacto */
+@media (max-width: 768px) {
+  .clients-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 8px;
+    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
+  }
+  
+  .client-card {
+    padding: 5px 3px;
+  }
+  
+  .cards-view .client-image {
+    width: 36px;
+    height: 36px;
+  }
+  
+  .client-name {
+    font-size: 0.75rem;
+  }
+  
+  .client-ip {
+    font-size: 0.6rem;
+  }
+  
+  .client-mac {
+    font-size: 0.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .clients-grid {
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 6px;
+    padding: 0.5rem;
+  }
+  
+  .client-card {
+    padding: 4px 2px;
+  }
+  
+  .cards-view .client-image {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+/* Gradiente solo en la celda de status (primera columna) */
+.status-off.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #f2f4f7 100%) !important;
+}
+.status-busy.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #ffeaea 100%) !important;
+}
+.status-disconnected.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #ffdede 100%) !important;
+}
+.status-initializing.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #e3fafd 100%) !important;
+}
+.status-og-live.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #fffbcf 100%) !important;
+}
+.status-linux.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #f7eafd 100%) !important;
+}
+.status-linux-session.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #f1e3fd 100%) !important;
+}
+.status-windows.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #e3eafd 100%) !important;
+}
+.status-windows-session.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #e0e7ff 100%) !important;
+}
+.status-macos.mat-row .mat-column-status {
+  background: linear-gradient(to right, #fff 20%, #fff2de 100%) !important;
+}
+
+/** Chip de firmware más bonito **/
+.firmware-chip {
+  display: inline-flex;
+  align-items: center;
+  background: #e0e0e0;
+  color: #333;
+  border-radius: 6px;
+  border: 1.5px solid #bdbdbd;
+  font-weight: 600;
+  font-size: 0.95em;
+  padding: 0 12px;
+  height: 28px;
+  box-shadow: none;
+  letter-spacing: 0.5px;
+}
+.firmware-chip mat-icon {
+  margin-left: 4px;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+/* Estadísticas */
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin: 1rem 0;
+  padding: 0 1rem;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card:hover::before {
+  transform: scaleX(1);
+}
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-size: 24px;
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover .stat-icon {
+  transform: scale(1.1);
+}
+
+.stat-icon.online {
+  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+}
+
+.stat-icon.offline {
+  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+}
+
+.stat-icon.busy {
+  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+}
+
+.stat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.stat-number {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: #2c3e50;
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: #6c757d;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Tabla mejorada */
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.table-info {
+  color: #6c757d;
+  font-size: 0.9rem;
+}
+
+.table-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.column-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.sort-button {
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+
+.sort-button:hover {
+  opacity: 1;
+}
+
+.sort-button.active {
+  opacity: 1;
+  color: #667eea;
+}
+
+/* Celdas mejoradas */
+.client-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.client-name {
+  font-weight: 500;
+  color: #212529;
+}
+
+.client-ip {
+  font-size: 0.85rem;
+  color: #212529;
+}
+
+.client-mac {
+  font-size: 0.75rem;
+  color: #6c757d;
+}
+
+.oglive-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.oglive-kernel {
+  font-size: 0.85rem;
+  color: #212529;
+}
+
+.oglive-date {
+  font-size: 0.7rem;
+  color: #6c757d;
+  font-style: italic;
+}
+
+/* Botones de acción */
+.action-buttons {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+}
+
+/* Filas seleccionadas */
+.selected-row {
+  background-color: rgba(102, 126, 234, 0.1) !important;
+}
+
+.mat-row:hover {
+  background-color: rgba(102, 126, 234, 0.05);
+  cursor: pointer;
+}
+
+/* Responsive para nuevas funcionalidades */
+@media (max-width: 768px) {
+  .stats-container {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.75rem;
+    padding: 0 0.5rem;
+  }
+  
+  .stat-card {
+    padding: 1rem;
+    gap: 0.75rem;
+  }
+  
+  .stat-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+  
+  .stat-number {
+    font-size: 1.5rem;
+  }
+  
+  .stat-label {
+    font-size: 0.75rem;
+  }
+  
+  .table-header {
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    gap: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-container {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+  }
+  
+  .stat-card {
+    padding: 0.75rem;
+  }
+  
+  .stat-icon {
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+  }
+  
+  .stat-number {
+    font-size: 1.25rem;
+  }
+  
+  .stat-label {
+    font-size: 0.7rem;
+  }
+}
+
+/* Animaciones */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.stats-container, .table-header {
+  animation: fadeIn 0.5s ease-out;
+}
+
+/* Separadores visuales */
+.tree-node:not(:last-child) {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  margin-bottom: 2px;
+}
+
+.tree-node:hover:not(:last-child) {
+  border-bottom-color: rgba(102, 126, 234, 0.2);
+}
+
+/* Dashboard de Estadísticas */
+.dashboard-stats {
+  margin: 1rem 0 1.5rem 0;
+  padding: 0 1rem;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  max-width: 100%;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  border: 1px solid #e9ecef;
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+}
+
+.stat-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+  border-color: #667eea;
+}
+
+.stat-card:hover::before {
+  opacity: 1;
+}
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+  font-size: 28px;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover .stat-icon {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+.stat-icon.online {
+  background: linear-gradient(135deg, #28a745, #20c997);
+  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
+}
+
+.stat-icon.offline {
+  background: linear-gradient(135deg, #dc3545, #c82333);
+  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
+}
+
+.stat-icon.busy {
+  background: linear-gradient(135deg, #ffc107, #e0a800);
+  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
+}
+
+.stat-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #2c3e50;
+  line-height: 1;
+  margin: 0;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: #6c757d;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0;
+}
+
+/* Responsive para el dashboard */
+@media (max-width: 1200px) {
+  .stats-grid {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 0.75rem;
+  }
+  
+  .stat-card {
+    padding: 1.25rem;
+  }
+  
+  .stat-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 24px;
+  }
+  
+  .stat-number {
+    font-size: 1.75rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .dashboard-stats {
+    margin: 0.75rem 0 1rem 0;
+    padding: 0 0.5rem;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+  }
+  
+  .stat-card {
+    padding: 1rem;
+    flex-direction: column;
+    text-align: center;
+    gap: 0.75rem;
+  }
+  
+  .stat-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 22px;
+  }
+  
+  .stat-number {
+    font-size: 1.5rem;
+  }
+  
+  .stat-label {
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Estilos para truncate en tabla */
+.truncate-cell {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.truncate-cell-wide {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.truncate-cell-medium {
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.truncate-cell-narrow {
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Para vista de tarjetas */
+.client-card .client-name {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+/* Responsive para truncate */
+@media (max-width: 1200px) {
+  .truncate-cell {
+    max-width: 120px;
+  }
+  
+  .truncate-cell-wide {
+    max-width: 150px;
+  }
+  
+  .truncate-cell-medium {
+    max-width: 110px;
+  }
+  
+  .truncate-cell-narrow {
+    max-width: 80px;
+  }
+}
+
+@media (max-width: 768px) {
+  .truncate-cell {
+    max-width: 100px;
+  }
+  
+  .truncate-cell-wide {
+    max-width: 120px;
+  }
+  
+  .truncate-cell-medium {
+    max-width: 90px;
+  }
+  
+  .truncate-cell-narrow {
+    max-width: 70px;
+  }
+}
+
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index bf30523..15345e3 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -1,3 +1,8 @@
+<app-modal-overlay 
+  [isVisible]="loading" 
+  message="Cargando...">
+</app-modal-overlay>
+
 <div class="groups-container">
   <!-- HEADER -->
   <div class="header-container">
@@ -96,8 +101,6 @@
               </button>
             </mat-form-field>
 
-            <mat-divider class="tree-mat-divider" style="padding-top: 10px;"></mat-divider>
-
             <!-- Funcionalidad actualmente deshabilitada-->
             <!-- <mat-form-field appearance="outline">
             <mat-select (selectionChange)="loadSelectedFilter($event.value)" placeholder="Cargar filtro" disabled>
@@ -120,48 +123,107 @@
 
         <!-- Tree -->
         <div class="tree-container" joyrideStep="treePanelStep" text="{{ 'treePanelStepText' | translate }}">
-          <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl">
-            <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
+          <div class="tree-header">
+            <h3 class="tree-title">
+              <mat-icon>account_tree</mat-icon>
+              {{ 'organizationalStructure' | translate }}
+            </h3>
+            <div class="tree-actions">
+              <button mat-icon-button (click)="expandAll()" matTooltip="{{ 'expandAll' | translate }}">
+                <mat-icon>unfold_more</mat-icon>
+              </button>
+              <button mat-icon-button (click)="collapseAll()" matTooltip="{{ 'collapseAll' | translate }}">
+                <mat-icon>unfold_less</mat-icon>
+              </button>
+            </div>
+          </div>
+
+          <mat-tree [dataSource]="treeDataSource" [treeControl]="treeControl" class="modern-tree">
+            <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id, 'tree-node': true}"
               *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding (click)="onNodeClick($event, node)">
-              <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
-                [ngClass]="{'disabled-toggle': !node.expandable}">
-                <mat-icon>{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
-              </button>
-              <mat-icon class="node-icon {{ node.type }}">
-                {{
-                node.type === 'organizational-unit' ? 'apartment'
-                : node.type === 'classrooms-group' ? 'meeting_room'
-                : node.type === 'classroom' ? 'school'
-                : node.type === 'clients-group' ? 'lan'
-                : node.type === 'client' ? 'computer'
-                : 'group'
-                }}
-              </mat-icon>
-              <span>{{ node.name }}</span>
-              <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)">
-                <mat-icon>more_vert</mat-icon>
-              </button>
+              
+              <div class="node-content">
+                <button mat-icon-button matTreeNodeToggle [disabled]="!node.expandable"
+                  [ngClass]="{'disabled-toggle': !node.expandable}" class="expand-button">
+                  <mat-icon class="expand-icon">{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}</mat-icon>
+                </button>
+                
+                <div class="node-info">
+                  <div class="node-main">
+                    <mat-icon class="node-icon {{ node.type }}" [matTooltip]="getNodeTypeTooltip(node.type)">
+                      {{
+                      node.type === 'organizational-unit' ? 'business'
+                      : node.type === 'classrooms-group' ? 'meeting_room'
+                      : node.type === 'classroom' ? 'school'
+                      : node.type === 'clients-group' ? 'dns'
+                      : node.type === 'client' ? 'computer'
+                      : 'folder'
+                      }}
+                    </mat-icon>
+                    <span class="node-name" [matTooltip]="node.name">{{ node.name }}</span>
+                  </div>
+                  
+                  <div class="node-details">
+                    <ng-container *ngIf="node.type === 'client'">
+                      <span class="node-ip">{{ node.ip }}</span>
+                    </ng-container>
+                    <ng-container *ngIf="node.children && node.children.length > 0">
+                      <span class="node-count">{{ node.children.length }} {{ getNodeCountLabel(node.children.length) }}</span>
+                    </ng-container>
+                  </div>
+                </div>
+                
+                <div class="node-actions">
+                  <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)" 
+                          class="menu-button" matTooltip="{{ 'moreActions' | translate }}">
+                    <mat-icon>more_vert</mat-icon>
+                  </button>
+                </div>
+              </div>
             </mat-tree-node>
-            <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id}"
+            
+            <mat-tree-node [ngClass]="{'selected-node': selectedNode?.id === node.id, 'tree-node': true}"
               *matTreeNodeDef="let node; when: isLeafNode" matTreeNodePadding (click)="onNodeClick($event, node)">
-              <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle"></button>
-              <mat-icon style="color: green;">
-                {{
-                node.type === 'organizational-unit' ? 'apartment'
-                : node.type === 'classrooms-group' ? 'meeting_room'
-                : node.type === 'classroom' ? 'school'
-                : node.type === 'clients-group' ? 'lan'
-                : node.type === 'client' ? 'computer'
-                : 'group'
-                }}
-              </mat-icon>
-              <span>{{ node.name }}</span>
-              <ng-container *ngIf="node.type === 'client'">
-                <span> - IP: {{ node.ip }}</span>
-              </ng-container>
-              <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)">
-                <mat-icon>more_vert</mat-icon>
-              </button>
+              
+              <div class="node-content">
+                <button mat-icon-button matTreeNodeToggle [disabled]="true" class="disabled-toggle expand-button">
+                  <mat-icon class="expand-icon">chevron_right</mat-icon>
+                </button>
+                
+                <div class="node-info">
+                  <div class="node-main">
+                    <mat-icon class="node-icon {{ node.type }}" [ngClass]="{'client-status': node.type === 'client'}" 
+                              [matTooltip]="getNodeTypeTooltip(node.type)">
+                      {{
+                      node.type === 'organizational-unit' ? 'business'
+                      : node.type === 'classrooms-group' ? 'meeting_room'
+                      : node.type === 'classroom' ? 'school'
+                      : node.type === 'clients-group' ? 'dns'
+                      : node.type === 'client' ? 'computer'
+                      : 'folder'
+                      }}
+                    </mat-icon>
+                    <span class="node-name" [matTooltip]="node.name">{{ node.name }}</span>
+                  </div>
+                  
+                  <div class="node-details">
+                    <ng-container *ngIf="node.type === 'client'">
+                      <span class="node-ip">{{ node.ip }}</span>
+                      <span class="node-mac">{{ node.mac }}</span>
+                      <span class="node-status" [ngClass]="'status-' + (node.status || 'off')">
+                        {{ getStatusLabel(node.status) }}
+                      </span>
+                    </ng-container>
+                  </div>
+                </div>
+                
+                <div class="node-actions">
+                  <button mat-icon-button [matMenuTriggerFor]="menuNode" (click)="onMenuClick($event, node)" 
+                          class="menu-button" matTooltip="{{ 'moreActions' | translate }}">
+                    <mat-icon>more_vert</mat-icon>
+                  </button>
+                </div>
+              </div>
             </mat-tree-node>
           </mat-tree>
         </div>
@@ -205,6 +267,10 @@
             <mat-icon>storage</mat-icon>
             <span>{{ 'partitions' | translate }}</span>
           </button>
+          <button mat-menu-item (click)="openOUPendingTasks($event, selectedNode)">
+            <mat-icon>pending_actions</mat-icon>
+            <span>{{ 'colaAcciones' | translate }}</span>
+          </button>
           <app-execute-command [clientData]="selectedNode?.clients || []" [buttonType]="'menu-item'"
             [buttonText]="'ejecutarComandos' | translate" [icon]="'terminal'"
             [disabled]="!((selectedNode?.clients ?? []).length > 0)" [runScriptContext]="selectedNode?.name || ''"
@@ -254,6 +320,45 @@
           text="{{ 'clientsViewStepText' | translate }}">
           <div *ngIf="hasClients; else noClientsTemplate">
 
+            <div class="stats-container" *ngIf="currentView === 'list'">
+              <div class="stat-card">
+                <div class="stat-icon">
+                  <mat-icon>computer</mat-icon>
+                </div>
+                <div class="stat-content">
+                  <div class="stat-number">{{ totalStats.total }}</div>
+                  <div class="stat-label">{{ 'totalClients' | translate }}</div>
+                </div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-icon offline">
+                  <mat-icon>wifi_off</mat-icon>
+                </div>
+                <div class="stat-content">
+                  <div class="stat-number">{{ getStatusCount('off') }}</div>
+                  <div class="stat-label">{{ 'offline' | translate }}</div>
+                </div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-icon online">
+                  <mat-icon>wifi</mat-icon>
+                </div>
+                <div class="stat-content">
+                  <div class="stat-number">{{ getStatusCount('og-live') + getStatusCount('linux') + getStatusCount('windows') }}</div>
+                  <div class="stat-label">{{ 'online' | translate }}</div>
+                </div>
+              </div>
+              <div class="stat-card">
+                <div class="stat-icon busy">
+                  <mat-icon>hourglass_empty</mat-icon>
+                </div>
+                <div class="stat-content">
+                  <div class="stat-number">{{ getStatusCount('busy') }}</div>
+                  <div class="stat-label">{{ 'busy' | translate }}</div>
+                </div>
+              </div>
+            </div>
+
             <!-- Cards view -->
             <div *ngIf="currentView === 'card'">
               <section class="cards-view">
@@ -262,7 +367,7 @@
                   [indeterminate]="selection.hasValue() && !isAllSelected()">
                 </mat-checkbox>
                 <div class="clients-grid">
-                  <div *ngFor="let client of arrayClients" class="client-item">
+                  <div *ngFor="let client of arrayClients" class="client-item" [ngClass]="'status-' + client.status">
                     <div class="client-card">
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
                         [checked]="selection.isSelected(client)">
@@ -271,9 +376,9 @@
                         alt="Client Icon" class="client-image" />
 
                       <div class="client-details">
-                        <span class="client-name">{{ client.name }}</span>
+                        <span class="client-name truncate-cell-wide" [matTooltip]="client.name">{{ client.name }}</span>
                         <span class="client-ip">{{ client.ip }}</span>
-                        <span class="client-ip">{{ client.mac }}</span>
+                        <span class="client-mac">{{ client.mac }}</span>
                         <div class="action-icons">
 
                           <app-execute-command [clientState]="client.status" [clientData]="[client]"
@@ -309,6 +414,10 @@
                               <mat-icon>list_alt</mat-icon>
                               <span>{{ 'procedimientosCliente' | translate }}</span>
                             </button>
+                            <button mat-menu-item (click)="openClientPendingTasks($event, client)">
+                              <mat-icon>pending_actions</mat-icon>
+                              <span>{{ 'colaAcciones' | translate }}</span>
+                            </button>
                             <button mat-menu-item (click)="onDeleteClick($event, client)" *ngIf="auth.userCategory !== 'ou-minimal'">
                               <mat-icon>delete</mat-icon>
                               <span>{{ 'delete' | translate }}</span>
@@ -327,10 +436,24 @@
               </div>
             </div>
 
-            <!-- List view -->
+            <!-- List view mejorada -->
             <div *ngIf="currentView === 'list'" class="list-view">
+              <div class="table-header">
+                <div class="table-info">
+                  <span>{{ 'showingResults' | translate: { from: getPaginationFrom(), to: getPaginationTo(), total: getPaginationTotal() } }}</span>
+                </div>
+                <div class="table-actions">
+                  <button mat-icon-button (click)="refreshClientData()" matTooltip="{{ 'refresh' | translate }}">
+                    <mat-icon>refresh</mat-icon>
+                  </button>
+                  <button mat-icon-button (click)="exportToCSV()" matTooltip="{{ 'exportCSV' | translate }}">
+                    <mat-icon>download</mat-icon>
+                  </button>
+                </div>
+              </div>
+
               <section class="clients-table" tabindex="0">
-                <table mat-table matSort [dataSource]="selectedClients">
+                <table mat-table [dataSource]="selectedClients" class="mat-elevation-z8">
                   <ng-container matColumnDef="select">
                     <th mat-header-cell *matHeaderCellDef>
                       <mat-checkbox (change)="$event ? toggleAllRows() : null"
@@ -345,7 +468,14 @@
                     </td>
                   </ng-container>
                   <ng-container matColumnDef="status">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> 
+                      <div class="column-header">
+                        <span>{{ 'status' | translate }}</span>
+                        <button mat-icon-button (click)="sortColumn('status')" class="sort-button">
+                          <mat-icon>{{ getSortIcon('status') }}</mat-icon>
+                        </button>
+                      </div>
+                    </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
                       <div class="client-status-container">
@@ -359,72 +489,101 @@
                   </ng-container>
 
                   <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> 
+                      <div class="column-header">
+                        <span>{{ 'name' | translate }}</span>
+                        <button mat-icon-button (click)="sortColumn('name')" class="sort-button">
+                          <mat-icon>{{ getSortIcon('name') }}</mat-icon>
+                        </button>
+                      </div>
+                    </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      <p>{{ client.name }}</p>
+                      <div class="client-cell">
+                        <span class="client-name truncate-cell-wide" [matTooltip]="client.name">{{ client.name }}</span>
+                      </div>
                     </td>
                   </ng-container>
                   <ng-container matColumnDef="ip">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header>IP </th>
+                    <th mat-header-cell *matHeaderCellDef>
+                      <div class="column-header">
+                        <span>IP</span>
+                        <button mat-icon-button (click)="sortColumn('ip')" class="sort-button">
+                          <mat-icon>{{ getSortIcon('ip') }}</mat-icon>
+                        </button>
+                      </div>
+                    </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      <div style="display: flex; flex-direction: column;">
-                        <span>{{ client.ip }}</span>
-                        <span style="font-size: 0.75rem; color: gray;">{{ client.mac }}</span>
+                      <div class="client-cell">
+                        <span class="client-ip">{{ client.ip }}</span>
+                        <span class="client-mac">{{ client.mac }}</span>
                       </div>
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="firmwareType">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'firmwareType' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> 
+                      <div class="column-header">
+                        <span>{{ 'firmwareType' | translate }}</span>
+                        <button mat-icon-button (click)="sortColumn('firmwareType')" class="sort-button">
+                          <mat-icon>{{ getSortIcon('firmwareType') }}</mat-icon>
+                        </button>
+                      </div>
+                    </th>
                     <td mat-cell *matCellDef="let client">
-                      <mat-chip *ngIf="client.firmwareType">
+                      <mat-chip *ngIf="client.firmwareType" class="firmware-chip">
                         {{ client.firmwareType }}
                       </mat-chip>
                     </td>
                   </ng-container>
 
                   <ng-container matColumnDef="oglive">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> OG Live </th>
+                    <th mat-header-cell *matHeaderCellDef> OG Live </th>
                     <td mat-cell *matCellDef="let client">
-                      <div style="display: flex; flex-direction: column;">
-                        <span>{{ client.ogLive?.kernel }} </span>
-                        <span style="font-size: 0.75rem; color: gray;"> {{ client.ogLive?.date | date }}</span>
+                      <div class="oglive-cell">
+                        <span class="oglive-kernel">{{ client.ogLive?.kernel }}</span>
+                        <span class="oglive-date">{{ client.ogLive?.date | date }}</span>
                       </div>
+                    </td>
                   </ng-container>
 
                   <ng-container matColumnDef="maintenace">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'maintenance' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> {{ 'maintenance' | translate }} </th>
                     <td mat-cell *matCellDef="let client"> {{ client.maintenance }} </td>
                   </ng-container>
                   <ng-container matColumnDef="subnet">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'subnet' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> {{ 'subnet' | translate }} </th>
                     <td mat-cell *matCellDef="let client"> {{ client.subnet }} </td>
                   </ng-container>
                   <ng-container matColumnDef="pxeTemplate">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'pxeTemplate' | translate }} </th>
-                    <td mat-cell *matCellDef="let client"> {{ client.pxeTemplate?.name }} </td>
+                    <th mat-header-cell *matHeaderCellDef> {{ 'pxeTemplate' | translate }} </th>
+                    <td mat-cell *matCellDef="let client" class="truncate-cell-medium" [matTooltip]="client.pxeTemplate?.name"> {{ client.pxeTemplate?.name }} </td>
                   </ng-container>
 
                   <ng-container matColumnDef="parentName">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'parent' | translate }} </th>
-                    <td mat-cell *matCellDef="let client"> {{ client.parentName }} </td>
+                    <th mat-header-cell *matHeaderCellDef> {{ 'parent' | translate }} </th>
+                    <td mat-cell *matCellDef="let client" class="truncate-cell-medium" [matTooltip]="client.parentName"> {{ client.parentName }} </td>
                   </ng-container>
 
                   <ng-container matColumnDef="actions">
-                    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'actions' | translate }} </th>
+                    <th mat-header-cell *matHeaderCellDef> {{ 'actions' | translate }} </th>
                     <td mat-cell *matCellDef="let client">
-                      <button
-                        [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                        mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary">
-                        <mat-icon>more_vert</mat-icon>
-                      </button>
-                      <app-execute-command [clientState]="client.status" [clientData]="[client]" [buttonType]="'icon'"
-                        [icon]="'terminal'"
-                        [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
-                        [runScriptContext]="getRunScriptContext([client])">
-                      </app-execute-command>
+                      <div class="action-buttons">
+                        <button
+                          [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                          mat-icon-button [matMenuTriggerFor]="clientMenu" color="primary" matTooltip="{{ 'moreActions' | translate }}">
+                          <mat-icon>more_vert</mat-icon>
+                        </button>
+                        <app-execute-command [clientState]="client.status" [clientData]="[client]" [buttonType]="'icon'"
+                          [icon]="'terminal'"
+                          [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"
+                          [runScriptContext]="getRunScriptContext([client])" matTooltip="{{ 'executeCommand' | translate }}">
+                        </app-execute-command>
+                        <button mat-icon-button color="primary" (click)="onShowClientDetail($event, client)" matTooltip="{{ 'viewDetails' | translate }}">
+                          <mat-icon>visibility</mat-icon>
+                        </button>
+                      </div>
                       <mat-menu #clientMenu="matMenu">
                         <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)" *ngIf="auth.userCategory !== 'ou-minimal'">
                           <mat-icon>edit</mat-icon>
@@ -442,6 +601,10 @@
                           <mat-icon>list_alt</mat-icon>
                           <span>{{ 'procedimientosCliente' | translate }}</span>
                         </button>
+                        <button mat-menu-item (click)="openClientPendingTasks($event, client)">
+                          <mat-icon>pending_actions</mat-icon>
+                          <span>{{ 'colaAcciones' | translate }}</span>
+                        </button>
                         <button mat-menu-item (click)="onDeleteClick($event, client)" *ngIf="auth.userCategory !== 'ou-minimal'">
                           <mat-icon>delete</mat-icon>
                           <span>{{ 'delete' | translate }}</span>
@@ -449,9 +612,11 @@
                       </mat-menu>
                     </td>
                   </ng-container>
-                  <tr mat-header-row style="background-color: #f3f3f3;"
-                    *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-                  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                  <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="mat-row" 
+                      [ngClass]="'status-' + row.status"
+                      [class.selected-row]="selectedClient?.uuid === row.uuid"
+                      (click)="selectClient(row)"></tr>
                 </table>
               </section>
               <mat-paginator class="list-paginator" [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
diff --git a/ogWebconsole/src/app/components/groups/groups.component.spec.ts b/ogWebconsole/src/app/components/groups/groups.component.spec.ts
index 7a3acc4..37150c7 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.spec.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.spec.ts
@@ -27,6 +27,7 @@ import { TreeNode } from './model/model';
 import { LoadingComponent } from '../../shared/loading/loading.component';
 import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
 import { ConfigService } from '@services/config.service';
+import { ModalOverlayComponent } from '../../shared/modal-overlay/modal-overlay.component';
 
 describe('GroupsComponent', () => {
     let component: GroupsComponent;
@@ -39,7 +40,7 @@ describe('GroupsComponent', () => {
         };
 
         await TestBed.configureTestingModule({
-            declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent],
+            declarations: [GroupsComponent, ExecuteCommandComponent, LoadingComponent, ModalOverlayComponent],
             imports: [
                 HttpClientTestingModule,
                 ToastrModule.forRoot(),
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index c301173..a0eea6c 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -15,7 +15,6 @@ import { ShowOrganizationalUnitComponent } from './shared/organizational-units/s
 import { LegendComponent } from './shared/legend/legend.component';
 import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
 import { ClassroomViewDialogComponent } from './shared/classroom-view/classroom-view-modal';
-import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { PageEvent } from '@angular/material/paginator';
 import { CreateMultipleClientComponent } from "./shared/clients/create-multiple-client/create-multiple-client.component";
@@ -31,6 +30,7 @@ import { PartitionTypeOrganizatorComponent } from './shared/partition-type-organ
 import { ClientTaskLogsComponent } from '../task-logs/client-task-logs/client-task-logs.component';
 import {ChangeParentComponent} from "./shared/change-parent/change-parent.component";
 import { AuthService } from '@services/auth.service';
+import { ClientPendingTasksComponent } from '../task-logs/client-pending-tasks/client-pending-tasks.component';
 
 enum NodeType {
   OrganizationalUnit = 'organizational-unit',
@@ -79,6 +79,29 @@ export class GroupsComponent implements OnInit, OnDestroy {
   arrayClients: any[] = [];
   filters: { [key: string]: string } = {};
   private clientFilterSubject = new Subject<string>();
+  loading = false;
+
+  // Nuevas propiedades para funcionalidades mejoradas
+  selectedClient: any = null;
+  sortBy: string = 'name';
+  sortDirection: 'asc' | 'desc' = 'asc';
+  currentSortColumn: string = 'name';
+
+  // Estadísticas totales
+  totalStats: {
+    total: number;
+    off: number;
+    online: number;
+    busy: number;
+  } = {
+    total: 0,
+    off: 0,
+    online: 0,
+    busy: 0
+  };
+
+  // Tipos de firmware disponibles
+  firmwareTypes: string[] = [];
 
   protected status = [
     { value: 'off', name: 'Apagado' },
@@ -95,16 +118,6 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
   displayedColumns: string[] = ['select', 'status', 'ip', 'firmwareType', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
 
-  private _sort!: MatSort;
-
-  @ViewChild(MatSort)
-  set matSort(ms: MatSort) {
-    this._sort = ms;
-    if (this.selectedClients) {
-      this.selectedClients.sort = this._sort;
-    }
-  }
-
   private subscriptions: Subscription = new Subscription();
 
   constructor(
@@ -404,8 +417,14 @@ export class GroupsComponent implements OnInit, OnDestroy {
   public fetchClientsForNode(node: any, selectedClientsBeforeEdit: string[] = []): void {
     const params = new HttpParams({ fromObject: this.filters });
 
+    // Agregar parámetros de ordenamiento al backend
+    let backendParams = { ...this.filters };
+    if (this.sortBy) {
+      backendParams['order[' + this.sortBy + ']'] = this.sortDirection;
+    }
+
     this.isLoadingClients = true;
-    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params }).subscribe({
+    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: backendParams }).subscribe({
       next: (response: any) => {
         this.selectedClients.data = response['hydra:member'];
         if (this.selectedNode) {
@@ -423,6 +442,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
             this.selection.select(client);
           }
         });
+        
+        // Calcular estadísticas después de cargar los clientes
+        this.calculateLocalStats();
       },
       error: () => {
         this.isLoadingClients = false;
@@ -438,25 +460,35 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
   addOU(event: MouseEvent, parent: TreeNode | null = null): void {
+    this.loading = true;
     event.stopPropagation();
     const dialogRef = this.dialog.open(ManageOrganizationalUnitComponent, {
       data: { parent },
       width: '900px',
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
     });
     dialogRef.afterClosed().subscribe((newUnit) => {
       if (newUnit) {
         this.refreshData(newUnit.uuid);
       }
+      this.loading = false;
     });
+   
   }
 
 
   addClient(event: MouseEvent, organizationalUnit: TreeNode | null = null): void {
+    this.loading = true;
     event.stopPropagation();
     const targetNode = organizationalUnit || this.selectedNode;
     const dialogRef = this.dialog.open(ManageClientComponent, {
       data: { organizationalUnit: targetNode },
       width: '900px',
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
     });
 
     dialogRef.afterClosed().subscribe((result) => {
@@ -469,17 +501,22 @@ export class GroupsComponent implements OnInit, OnDestroy {
           this.refreshData(parentNode.uuid);
         }
       }
+      this.loading = false;
     });
   }
 
 
   addMultipleClients(event: MouseEvent, organizationalUnit: TreeNode | null = null): void {
+    this.loading = true;
     event.stopPropagation();
     const targetNode = organizationalUnit || this.selectedNode;
 
     const dialogRef = this.dialog.open(CreateMultipleClientComponent, {
       data: { organizationalUnit: targetNode },
       width: '900px',
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
     });
     dialogRef.afterClosed().subscribe((result) => {
       if (result?.success) {
@@ -494,29 +531,33 @@ export class GroupsComponent implements OnInit, OnDestroy {
           console.error('No se encontró el nodo padre después de la creación masiva.');
         }
       }
+      this.loading = false;
     });
   }
 
 
   onEditNode(event: MouseEvent, node: TreeNode | null): void {
     event.stopPropagation();
+    this.loading = true;
     const uuid = node ? this.extractUuid(node['@id']) : null;
     if (!uuid) return;
 
     const dialogRef = node?.type !== NodeType.Client
-      ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
-      : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });
+      ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px', disableClose: true, hasBackdrop: true, backdropClass: 'non-clickable-backdrop' })
+      : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px', disableClose: true, hasBackdrop: true, backdropClass: 'non-clickable-backdrop' });
 
     dialogRef.afterClosed().subscribe((result) => {
       if (result?.success) {
         this.refreshData(node?.id);
       }
       this.menuTriggers.forEach(trigger => trigger.closeMenu());
+      this.loading = false;
     });
   }
 
   onDeleteClick(event: MouseEvent, entity: TreeNode | Client | null): void {
     event.stopPropagation();
+    this.loading = true;
     if (!entity) return;
 
     const uuid = entity['@id'] ? this.extractUuid(entity['@id']) : null;
@@ -533,6 +574,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
       if (result === true) {
         this.deleteEntityorClient(uuid, type);
       }
+      this.loading = false;
     });
   }
 
@@ -570,16 +612,18 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
   onEditClick(event: MouseEvent, type: string, uuid: string): void {
     event.stopPropagation();
+    this.loading = true;
     const selectedClientsBeforeEdit = this.selection.selected.map(client => client.uuid);
     const dialogRef = type !== NodeType.Client
-      ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px' })
-      : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px' });
+      ? this.dialog.open(ManageOrganizationalUnitComponent, { data: { uuid }, width: '900px', disableClose: true, hasBackdrop: true, backdropClass: 'non-clickable-backdrop' })
+      : this.dialog.open(ManageClientComponent, { data: { uuid }, width: '900px', disableClose: true, hasBackdrop: true, backdropClass: 'non-clickable-backdrop' });
 
     dialogRef.afterClosed().subscribe((result) => {
       if (result?.success) {
         this.refreshData(this.selectedNode?.id, selectedClientsBeforeEdit);
       }
       this.menuTriggers.forEach(trigger => trigger.closeMenu());
+      this.loading = false;
     });
   }
 
@@ -592,6 +636,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
           this.dialog.open(ClassroomViewDialogComponent, {
             width: '90vw',
             data: { clients: response['hydra:member'] },
+            disableClose: true,
+            hasBackdrop: true,
+            backdropClass: 'non-clickable-backdrop',
           });
         },
         (error) => {
@@ -603,35 +650,46 @@ export class GroupsComponent implements OnInit, OnDestroy {
 
 
   executeCommand(command: Command, selectedNode: TreeNode | null): void {
-
+    this.loading = true;
     if (!selectedNode) {
       this.toastr.error('No hay un nodo seleccionado.');
       return;
     } else {
       this.toastr.success(`Ejecutando comando: ${command.name} en ${selectedNode.name}`);
     }
+    this.loading = false;
   }
 
 
   onShowClientDetail(event: MouseEvent, client: Client): void {
     event.stopPropagation();
-    this.dialog.open(ClientDetailsComponent, {
+    this.loading = true;
+    const dialogRef = this.dialog.open(ClientDetailsComponent, {
       width: '70vw',
       height: '90vh',
       data: { clientData: client },
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
     })
+
+    dialogRef.afterClosed().subscribe((result) => {
+      this.loading = false;
+    });
   }
 
 
   onShowDetailsClick(event: MouseEvent, data: TreeNode | null): void {
     event.stopPropagation();
+    this.loading = true;
     if (data && data.type !== NodeType.Client) {
-      this.dialog.open(ShowOrganizationalUnitComponent, { data: { data }, width: '800px' });
+      this.dialog.open(ShowOrganizationalUnitComponent, { data: { data }, width: '800px', disableClose: true, hasBackdrop: true, backdropClass: 'non-clickable-backdrop' });
     } else {
       if (data) {
         this.router.navigate(['clients', this.extractUuid(data['@id'])], { state: { clientData: data } });
       }
     }
+    this.loading = false;
   }
 
 
@@ -873,6 +931,9 @@ export class GroupsComponent implements OnInit, OnDestroy {
     const dialogRef = this.dialog.open(ChangeParentComponent, {
       data: { clients: this.selection.selected },
       width: '700px',
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
     });
 
     dialogRef.afterClosed().subscribe((result) => {
@@ -883,11 +944,269 @@ export class GroupsComponent implements OnInit, OnDestroy {
   }
 
   openClientTaskLogs(event: MouseEvent, client: Client): void {
+    this.loading = true;
     event.stopPropagation();
 
-    this.dialog.open(ClientTaskLogsComponent, {
+    const dialogRef = this.dialog.open(ClientTaskLogsComponent, {
       width: '1200px',
-      data: { client }
+      data: { client },
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
     })
+
+    dialogRef.afterClosed().subscribe((result) => {
+      this.loading = false;
+    });
+  }
+
+  openClientPendingTasks(event: MouseEvent, client: Client): void {
+    this.loading = true;
+    event.stopPropagation();
+
+    const dialogRef = this.dialog.open(ClientPendingTasksComponent, {
+      width: '1200px',
+      data: { client },
+      disableClose: true,
+      hasBackdrop: true,
+      backdropClass: 'non-clickable-backdrop',
+    })
+
+    dialogRef.afterClosed().subscribe((result) => {
+      this.loading = false;
+    });
+  }
+
+  openOUPendingTasks(event: MouseEvent, node: any): void {
+    event.stopPropagation();
+    this.loading = true;
+
+    this.http.get<any>(`${this.baseUrl}/clients?organizationalUnit.id=${node.id}&page=1&itemsPerPage=10000`).subscribe({
+      next: (response) => {
+        const allClients = response['hydra:member'] || [];
+        
+        if (allClients.length === 0) {
+          this.toastr.warning('Esta unidad organizativa no tiene clientes');
+          return;
+        }
+
+        const ouClientData = {
+          name: node.name,
+          id: node.id,
+          uuid: node.uuid,
+          type: 'organizational-unit',
+          clients: allClients
+        };
+
+        const dialogRef = this.dialog.open(ClientPendingTasksComponent, {
+          width: '1200px',
+          data: { client: ouClientData, isOrganizationalUnit: true },
+          disableClose: true,
+          hasBackdrop: true,
+          backdropClass: 'non-clickable-backdrop',
+        });
+
+        dialogRef.afterClosed().subscribe((result) => {
+          this.loading = false;
+        });
+      },
+      error: (error) => {
+        console.error('Error al obtener los clientes de la unidad organizativa:', error);
+        this.toastr.error('Error al cargar los clientes de la unidad organizativa');
+        this.loading = false;
+      }
+    });
+  }
+
+  // Métodos para paginación
+  getPaginationFrom(): number {
+    return (this.page * this.itemsPerPage) + 1;
+  }
+
+  getPaginationTo(): number {
+    return Math.min((this.page + 1) * this.itemsPerPage, this.length);
+  }
+
+  getPaginationTotal(): number {
+    return this.length;
+  }
+
+  refreshClientData(): void {
+    this.fetchClientsForNode(this.selectedNode);
+    this.toastr.success('Datos actualizados', 'Éxito');
+  }
+
+  exportToCSV(): void {
+    const headers = ['Nombre', 'IP', 'MAC', 'Estado', 'Firmware', 'Subnet', 'Parent'];
+    const csvData = this.arrayClients.map(client => [
+      client.name,
+      client.ip || '',
+      client.mac || '',
+      client.status || '',
+      client.firmwareType || '',
+      client.subnet || '',
+      client.parentName || ''
+    ]);
+
+    const csvContent = [headers, ...csvData]
+      .map(row => row.map(cell => `"${cell}"`).join(','))
+      .join('\n');
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `clients_${new Date().toISOString().split('T')[0]}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    this.toastr.success('Archivo CSV exportado correctamente', 'Éxito');
+  }
+
+  private calculateLocalStats(): void {
+    const clients = this.arrayClients;
+    this.totalStats = {
+      total: clients.length,
+      off: clients.filter(client => client.status === 'off').length,
+      online: clients.filter(client => ['og-live', 'linux', 'windows', 'linux-session', 'windows-session'].includes(client.status)).length,
+      busy: clients.filter(client => client.status === 'busy').length
+    };
+
+    // Actualizar tipos de firmware disponibles
+    this.firmwareTypes = [...new Set(clients.map(client => client.firmwareType).filter(Boolean))];
+  }
+
+  // Métodos para funcionalidades mejoradas
+
+  selectClient(client: any): void {
+    this.selectedClient = client;
+  }
+
+  sortColumn(columnDef: string): void {
+    if (this.currentSortColumn === columnDef) {
+      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      this.currentSortColumn = columnDef;
+      this.sortDirection = 'asc';
+    }
+    this.sortBy = columnDef;
+    this.onSortChange();
+  }
+
+  getSortIcon(columnDef: string): string {
+    if (this.currentSortColumn !== columnDef) {
+      return 'unfold_more';
+    }
+    return this.sortDirection === 'asc' ? 'expand_less' : 'expand_more';
+  }
+
+  onSortChange(): void {
+    // Hacer nueva llamada al backend con el ordenamiento actualizado
+    this.fetchClientsForNode(this.selectedNode);
+  }
+
+  getStatusCount(status: string): number {
+    switch(status) {
+      case 'off':
+        return this.totalStats.off;
+      case 'online':
+        return this.totalStats.online;
+      case 'busy':
+        return this.totalStats.busy;
+      default:
+        return this.arrayClients.filter(client => client.status === status).length;
+    }
+  }
+
+  // Métodos para el árbol mejorado
+
+  expandAll(): void {
+    this.treeControl.expandAll();
+  }
+
+  collapseAll(): void {
+    this.treeControl.collapseAll();
+  }
+
+  getNodeTypeTooltip(nodeType: string): string {
+    switch (nodeType) {
+      case 'organizational-unit':
+        return 'Unidad Organizacional - Estructura principal de la organización';
+      case 'classrooms-group':
+        return 'Grupo de Aulas - Conjunto de aulas relacionadas';
+      case 'classroom':
+        return 'Aula - Espacio físico con equipos informáticos';
+      case 'clients-group':
+        return 'Grupo de Equipos - Conjunto de equipos informáticos';
+      case 'client':
+        return 'Equipo Informático - Computadora o dispositivo individual';
+      case 'group':
+        return 'Grupo - Agrupación lógica de elementos';
+      default:
+        return 'Elemento del árbol organizacional';
+    }
+  }
+
+  getNodeCountLabel(count: number): string {
+    if (count === 1) return 'elemento';
+    return 'elementos';
+  }
+
+  getStatusLabel(status: string): string {
+    const statusLabels: { [key: string]: string } = {
+      'off': 'Apagado',
+      'og-live': 'OG Live',
+      'linux': 'Linux',
+      'linux-session': 'Linux Session',
+      'windows': 'Windows',
+      'windows-session': 'Windows Session',
+      'busy': 'Ocupado',
+      'mac': 'Mac',
+      'disconnected': 'Desconectado',
+      'initializing': 'Inicializando'
+    };
+    return statusLabels[status] || status;
+  }
+
+  // Funciones para el dashboard de estadísticas
+  getTotalOrganizationalUnits(): number {
+    let total = 0;
+    const countOrganizationalUnits = (nodes: TreeNode[]) => {
+      nodes.forEach(node => {
+        if (node.type === 'organizational-unit') {
+          total += 1;
+        }
+        if (node.children) {
+          countOrganizationalUnits(node.children);
+        }
+      });
+    };
+    countOrganizationalUnits(this.originalTreeData);
+    return total;
+  }
+
+  getTotalClassrooms(): number {
+    let total = 0;
+    const countClassrooms = (nodes: TreeNode[]) => {
+      nodes.forEach(node => {
+        if (node.type === 'classroom') {
+          total += 1;
+        }
+        if (node.children) {
+          countClassrooms(node.children);
+        }
+      });
+    };
+    countClassrooms(this.originalTreeData);
+    return total;
+  }
+
+  // Función para actualizar estadísticas cuando cambian los datos
+  private updateDashboardStats(): void {
+    // Las estadísticas de equipos ya se calculan en calculateLocalStats()
+    // Solo necesitamos asegurar que se actualicen cuando cambian los datos
+    this.calculateLocalStats();
   }
 }
diff --git a/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts b/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts
index 1b7944a..a17d9b6 100644
--- a/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts
@@ -35,7 +35,7 @@ export class ClientViewComponent {
     { property: 'Fecha de creación', value: this.data.client.createdAt },
     { property: 'NTP', value: this.data.client.organizationalUnit?.networkSettings?.ntp || '' },
     { property: 'Modo p2p', value: this.data.client.organizationalUnit?.networkSettings?.p2pMode || '' },
-    { property: 'Tiempo p2p', value: this.data.client.organizationalUnit?.networkSettings?.p2pTime || '' },
+    ...(this.data.client.organizationalUnit?.networkSettings?.p2pMode === 'seeder' ? [{ property: 'Tiempo p2p (minutos)', value: this.data.client.organizationalUnit?.networkSettings?.p2pTime || '' }] : []),
     { property: 'IP multicast', value: this.data.client.organizationalUnit?.networkSettings?.mcastIp || '' },
     { property: 'Modo multicast', value: this.data.client.organizationalUnit?.networkSettings?.mcastMode || '' },
     { property: 'Puerto multicast', value: this.data.client.organizationalUnit?.networkSettings?.mcastPort || '' },
@@ -51,7 +51,7 @@ export class ClientViewComponent {
     { property: 'Router', value: this.data.client.organizationalUnit?.networkSettings?.router || '' },
     { property: 'NTP', value: this.data.client.organizationalUnit?.networkSettings?.ntp || '' },
     { property: 'Modo p2p', value: this.data.client.organizationalUnit?.networkSettings?.p2pMode || '' },
-    { property: 'Tiempo p2p', value: this.data.client.organizationalUnit?.networkSettings?.p2pTime || '' },
+    ...(this.data.client.organizationalUnit?.networkSettings?.p2pMode === 'seeder' ? [{ property: 'Tiempo p2p (minutos)', value: this.data.client.organizationalUnit?.networkSettings?.p2pTime || '' }] : []),
     { property: 'IP multicast', value: this.data.client.organizationalUnit?.networkSettings?.mcastIp || '' },
     { property: 'Modo multicast', value: this.data.client.organizationalUnit?.networkSettings?.mcastMode || '' },
     { property: 'Puerto multicast', value: this.data.client.organizationalUnit?.networkSettings?.mcastPort || '' },
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
index 697533b..ec3190c 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html
@@ -134,8 +134,8 @@
                     </mat-option>
                 </mat-select>
             </mat-form-field>
-            <mat-form-field class="form-field">
-                <mat-label>{{ 'p2pTimeLabel' | translate }}</mat-label>
+            <mat-form-field class="form-field" *ngIf="networkSettingsFormGroup.get('p2pMode')?.value === 'seeder'">
+                <mat-label>{{ 'p2pTimeLabel' | translate }} (minutos)</mat-label>
                 <input matInput formControlName="p2pTime" type="number">
             </mat-form-field>
             <mat-form-field class="form-field">
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
index 792db32..7d573b9 100644
--- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
+++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts
@@ -271,6 +271,13 @@ export class ManageOrganizationalUnitComponent implements OnInit {
   onSubmit() {
     if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) {
       const parentValue = this.generalFormGroup.value.parent;
+      
+      // Preparar networkSettings con lógica condicional para p2pTime
+      const networkSettings = { ...this.networkSettingsFormGroup.value };
+      if (networkSettings.p2pMode !== 'seeder') {
+        networkSettings.p2pTime = null;
+      }
+      
       const formData = {
         name: this.generalFormGroup.value.name,
         excludeParentChanges: this.generalFormGroup.value.excludeParentChanges,
@@ -279,7 +286,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
         comments: this.additionalInfoFormGroup.value.comments,
         remoteCalendar: this.generalFormGroup.value.remoteCalendar,
         type: this.generalFormGroup.value.type,
-        networkSettings: this.networkSettingsFormGroup.value,
+        networkSettings: networkSettings,
         location: this.classroomInfoFormGroup.value.location,
         projector: this.classroomInfoFormGroup.value.projector,
         board: this.classroomInfoFormGroup.value.board,