diff --git a/ogWebconsole/src/app/app.component.css b/ogWebconsole/src/app/app.component.css
index aac26c0..ee894d6 100644
--- a/ogWebconsole/src/app/app.component.css
+++ b/ogWebconsole/src/app/app.component.css
@@ -2,6 +2,7 @@
   height: 100%;
 }
 
+
 .content {
   padding: 16px;
 }
diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index ae1361b..3b27cb0 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -11,8 +11,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { CustomInterceptor } from './services/custom.interceptor';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import {MatToolbarModule} from '@angular/material/toolbar'; 
-import {MatIconModule} from '@angular/material/icon'; 
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -46,6 +46,12 @@ import { ClassroomViewComponent } from './components/groups/classroom-view/class
 
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {MatAutocomplete} from "@angular/material/autocomplete";
+import {MatChip, MatChipListbox, MatChipOption, MatChipSet} from "@angular/material/chips";
+import { ClientViewComponent } from './components/groups/client-view/client-view.component';
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {MatTooltip} from "@angular/material/tooltip";
+import { DeleteGroupsModalComponent } from './components/groups/delete-groups-modal/delete-groups-modal.component';
 
 @NgModule({ declarations: [
         AppComponent,
@@ -70,7 +76,9 @@ import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
         DeleteModalComponent,
         EditOrganizationalUnitComponent,
         EditClientComponent,
-        ClassroomViewComponent
+        ClassroomViewComponent,
+        ClientViewComponent,
+        DeleteGroupsModalComponent
     ],
     bootstrap: [AppComponent],
   imports: [BrowserModule,
@@ -92,7 +100,7 @@ import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
     MatSelectModule,
     MatDividerModule,
     MatStepperModule,
-    MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem],
+    MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip],
     providers: [
         {
             provide: HTTP_INTERCEPTORS,
diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
index b701ae8..ea072ec 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
@@ -1,7 +1,9 @@
 .classroom {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  height: 57vh;
+  overflow-y: auto;
 }
 
 .classroom-group {
@@ -9,12 +11,11 @@
   background-color: #fafafa;
 }
 
-.organizational-unit-name {
-  font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 10px;
+mat-card-title {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
 }
-
 .client-row {
   display: flex;
   justify-content: center;
@@ -27,18 +28,20 @@
 }
 
 .client-box {
-  width: 100px;
-  height: 100px;
+  width: 100%;
+  height: auto;
   background-color: lightblue;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid #000;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   cursor: pointer;
 }
 
+.client-box:hover {
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+  scale: 1.1;
+  transition: 0.3s ease-in-out;
+}
+
 .client-box p {
   margin: 0;
 }
diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html
index 382e3b1..5243026 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html
@@ -1,12 +1,26 @@
 <div class="classroom">
   <mat-card *ngFor="let group of groupedClients" class="classroom-group">
-    <p class="organizational-unit-name">Disposición {{ group.organizationalUnitName }}</p>
+    <mat-card-title>Clientes dentro de: {{ group.organizationalUnitName }}</mat-card-title>
     <div *ngFor="let row of group.clientRows" class="client-row">
       <div class="client-container" *ngFor="let client of row">
         <div class="client-box" (click)="handleClientClick(client)">
-          <p>{{ client.name }}</p>
+          <mat-card appearance="outlined">
+            <mat-card-header>
+              <mat-card-title>{{ client.name }}</mat-card-title>
+            </mat-card-header>
+            <mat-card-content>
+              <mat-list role="list">
+                <mat-list-item>
+                  <mat-chip>{{ client.ip }}</mat-chip>
+                </mat-list-item>
+                <mat-list-item>
+                  <mat-chip>{{ client.mac }}</mat-chip>
+                </mat-list-item>
+              </mat-list>
+            </mat-card-content>
+          </mat-card>
         </div>
       </div>
     </div>
   </mat-card>
-</div>
\ No newline at end of file
+</div>
diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts
index 48f799b..0549a65 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts
@@ -1,6 +1,12 @@
 // src/app/classroom-view/classroom-view.component.ts
 
 import { Component, Input, OnInit } from '@angular/core';
+import {
+  ChangePasswordModalComponent
+} from "../../pages/admin/users/users/change-password-modal/change-password-modal.component";
+import {MatDialog} from "@angular/material/dialog";
+import {CreateClientComponent} from "../clients/create-client/create-client.component";
+import {ClientViewComponent} from "../client-view/client-view.component";
 
 interface GroupedClients {
   organizationalUnitName: string;
@@ -12,19 +18,19 @@ interface GroupedClients {
   templateUrl: './classroom-view.component.html',
   styleUrls: ['./classroom-view.component.css']
 })
-export class ClassroomViewComponent implements OnInit {  
+export class ClassroomViewComponent implements OnInit {
   @Input() clients: any[] = [];
   @Input() pcInTable: number = 3;
   groupedClients: GroupedClients[] = [];
 
-  constructor() {}
+  constructor(public dialog: MatDialog) {}
 
   ngOnInit(): void {
     this.groupClientsByOrganizationalUnit();
   }
 
   ngOnChanges(): void {
-    this.groupClientsByOrganizationalUnit(); 
+    this.groupClientsByOrganizationalUnit();
   }
 
   groupClientsByOrganizationalUnit(): void {
@@ -53,5 +59,6 @@ export class ClassroomViewComponent implements OnInit {
 
   handleClientClick(client: any): void {
     console.log('Client clicked:', client);
+    const dialogRef = this.dialog.open(ClientViewComponent, { data: { client }, width: '700px', height:'700px'});
   }
 }
diff --git a/ogWebconsole/src/app/components/groups/client-view/client-view.component.css b/ogWebconsole/src/app/components/groups/client-view/client-view.component.css
new file mode 100644
index 0000000..0ce046b
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/client-view/client-view.component.css
@@ -0,0 +1,41 @@
+.mat-dialog-content {
+  padding: 20px;
+}
+
+.button-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 20px;
+  padding: 20px;
+}
+
+.button-encender {
+  background-color: #3f51b5; /* Azul */
+  color: white;
+}
+
+.button-apagar {
+  background-color: #e91e63; /* Rosa */
+  color: white;
+}
+
+.button-resetear {
+  background-color: #f44336; /* Rojo */
+  color: white;
+}
+
+.button-otros-1 {
+  background-color: #4caf50; /* Verde */
+  color: white;
+}
+
+.button-otros-2 {
+  background-color: #ff9800; /* Naranja */
+  color: white;
+}
+
+.button-otros-3 {
+  background-color: #9c27b0; /* Púrpura */
+  color: white;
+}
diff --git a/ogWebconsole/src/app/components/groups/client-view/client-view.component.html b/ogWebconsole/src/app/components/groups/client-view/client-view.component.html
new file mode 100644
index 0000000..3e02ffa
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/client-view/client-view.component.html
@@ -0,0 +1,40 @@
+<h1 mat-dialog-title>Propiedades cliente</h1>
+<div mat-dialog-content>
+  <mat-tab-group dynamicHeight>
+    <mat-tab label="Datos generales">
+      <mat-list role="list">
+        <mat-list-item role="listitem"><strong>Nombre:</strong> {{ data.client.name }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>IP:</strong> {{ data.client.ip }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>MAC:</strong> {{data.client.mac }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Nº de serie:</strong> {{data.client.serialNumber }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Netiface:</strong> {{data.client.netiface }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Fecha de creación:</strong> {{data.client.createdAt | date }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Creado por:</strong> {{data.client.createdBy }}</mat-list-item>
+      </mat-list>
+    </mat-tab>
+    <mat-tab label="Propiedades de red">
+      <mat-list role="list">
+        <mat-list-item role="listitem"><strong>Menu:</strong> {{ data.client.menu }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Perfil hardware:</strong> {{ data.client.hardwareProfile }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>OGlive:</strong> {{data.client.mac }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Autoexec:</strong> {{data.client.serialNumber }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Repositorio:</strong> {{data.client.netiface }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Validacion:</strong> {{data.client.netiface }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Página login:</strong> {{data.client.netiface }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Página validacion:</strong> {{data.client.netiface }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Fecha de creación:</strong> {{data.client.createdAt | date }}</mat-list-item>
+        <mat-list-item role="listitem"><strong>Creado por:</strong> {{data.client.createdBy }}</mat-list-item>
+      </mat-list>
+    </mat-tab>
+    <mat-tab label="Acciones">
+      <div class="button-column">
+        <button mat-flat-button color="primary" class="button-encender">Encender</button>
+        <button mat-flat-button color="accent" class="button-apagar">Apagar</button>
+        <button mat-flat-button color="warn" class="button-resetear">Resetear</button>
+        <button mat-flat-button class="button-otros-1">Otras acciones 1</button>
+        <button mat-flat-button class="button-otros-2">Otras acciones 2</button>
+        <button mat-flat-button class="button-otros-3">Otras acciones 3</button>
+      </div>
+    </mat-tab>
+  </mat-tab-group>
+</div>
diff --git a/ogWebconsole/src/app/components/groups/client-view/client-view.component.spec.ts b/ogWebconsole/src/app/components/groups/client-view/client-view.component.spec.ts
new file mode 100644
index 0000000..4ec9b84
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/client-view/client-view.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientViewComponent } from './client-view.component';
+
+describe('ClientViewComponent', () => {
+  let component: ClientViewComponent;
+  let fixture: ComponentFixture<ClientViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ClientViewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ClientViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts b/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts
new file mode 100644
index 0000000..f31c7d3
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/client-view/client-view.component.ts
@@ -0,0 +1,14 @@
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
+
+@Component({
+  selector: 'app-client-view',
+  templateUrl: './client-view.component.html',
+  styleUrl: './client-view.component.css'
+})
+export class ClientViewComponent {
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
+  ) {
+  }
+}
diff --git a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.css b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.css
index 40124bd..ceac8f6 100644
--- a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.css
+++ b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.css
@@ -1,39 +1,48 @@
 h1 {
-    text-align: center;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    color: #3f51b5;
-    margin-bottom: 20px;
-  }
-  
-  .network-form {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-  }
-  
-  .form-field {
-    width: 100%;
-    margin-top: 10px;
-  }
-  
-  .mat-dialog-content {
-    padding: 20px;
-  }
-  
-  .mat-dialog-actions {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px 20px;
-  }
-  
-  button {
-    text-transform: none;
-    font-size: 16px;
-    font-weight: 500;
-  }
-  
-  .mat-slide-toggle {
-    margin-top: 20px;
-  }
-  
\ No newline at end of file
+  text-align: center;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  color: #3f51b5;
+  margin-bottom: 20px;
+}
+
+.network-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-field {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.mat-dialog-content {
+  padding: 50px;
+}
+
+.mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 20px;
+}
+
+button {
+  text-transform: none;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.mat-slide-toggle {
+  margin-top: 20px;
+}
+
+mat-option .unit-name {
+  display: block;
+}
+
+mat-option .unit-path {
+  display: block;
+  font-size: 0.8em;
+  color: gray;
+}
diff --git a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html
index 6061f94..8044bc3 100644
--- a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html
+++ b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html
@@ -1,10 +1,13 @@
 <h1 mat-dialog-title>Añadir Cliente</h1>
-<div mat-dialog-content>
+<div class="mat-dialog-content">
   <form [formGroup]="clientForm" class="client-form">
     <mat-form-field class="form-field">
       <mat-label>Padre</mat-label>
       <mat-select formControlName="organizationalUnit">
-        <mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">{{ unit.name }}</mat-option>
+        <mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">
+          <div class="unit-name">{{ unit.name }}</div>
+          <div class="unit-path">{{ unit.path }}</div>
+        </mat-option>
       </mat-select>
     </mat-form-field>
     <mat-form-field class="form-field">
@@ -17,26 +20,26 @@
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Interfaz de Red</mat-label>
+      <mat-hint>Ejemplo: eth0</mat-hint>
       <input matInput formControlName="netiface">
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Controlador de Red</mat-label>
+      <mat-hint>Ejemplo: e1000e</mat-hint>
       <input matInput formControlName="netDriver">
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>MAC</mat-label>
+      <mat-hint>Ejemplo: 00:11:22:33:44:55</mat-hint>
       <input matInput formControlName="mac" >
       <mat-error>Formato de MAC inválido. Ejemplo válido: 00:11:22:33:44:55</mat-error>
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Dirección IP</mat-label>
+      <mat-hint>Ejemplo: 127.0.0.1</mat-hint>
       <input matInput formControlName="ip">
       <mat-error>Formato de dirección IP inválido. Ejemplo válido: 127.0.0.1</mat-error>
     </mat-form-field>
-    <mat-form-field class="form-field">
-      <mat-label>Estado</mat-label>
-      <input matInput formControlName="status">
-    </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Menú URL</mat-label>
       <input matInput formControlName="menu" type="url">
@@ -44,7 +47,9 @@
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Perfil de Hardware</mat-label>
-      <input matInput formControlName="hardwareProfile" type="url">
+      <mat-select formControlName="hardwareProfile">
+        <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.name }} </mat-option>
+      </mat-select>
       <mat-error>Formato de URL inválido.</mat-error>
     </mat-form-field>
   </form>
diff --git a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts
index 857c62e..78bfea9 100644
--- a/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts
+++ b/ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts
@@ -1,7 +1,8 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MatSnackBar} from "@angular/material/snack-bar";
 
 @Component({
   selector: 'app-create-client',
@@ -11,31 +12,36 @@ import { MatDialogRef } from '@angular/material/dialog';
 export class CreateClientComponent implements OnInit {
   clientForm!: FormGroup;
   parentUnits: any[] = []; // Array to store parent units fetched from API
+  hardwareProfiles: any[] = []; // Array to store hardware profiles fetched from API
+  private errorForm: boolean = false;
 
   constructor(
     private fb: FormBuilder,
     private dialogRef: MatDialogRef<CreateClientComponent>,
-    private http: HttpClient 
-  ) { }
+    private http: HttpClient,
+    private snackBar: MatSnackBar,
+    @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
+  ) {
+  }
 
   ngOnInit(): void {
     this.loadParentUnits(); // Load parent units when component initializes
+    this.loadHardwareProfiles(); // Load hardware profiles when component initializes
     this.clientForm = this.fb.group({
-      organizationalUnit: [''],
+      organizationalUnit: [this.data.organizationalUnit ? this.data.organizationalUnit['@id'] : null, Validators.required],
       name: ['', Validators.required],
-      serialNumber: [''],
-      netiface: "eth0",
-      netDriver: "e1000e",
-      mac: "00:11:22:33:44:55",
-      ip: "127.0.0.1",
-      status: "test",
-      menu: null,
-      hardwareProfile: null,
+      serialNumber: ['', Validators.required],
+      netiface: null,
+      netDriver: null,
+      mac: ['', Validators.required],
+      ip: ['', Validators.required],
+      menu: [this.data.organizationalUnit && this.data.organizationalUnit.menu ? this.data.organizationalUnit.menu['@id'] : null],
+      hardwareProfile: [this.data.organizationalUnit && this.data.organizationalUnit.hardwareProfile ? this.data.organizationalUnit.hardwareProfile['@id'] : null],
     });
   }
 
   loadParentUnits() {
-    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
+    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
 
     this.http.get<any>(url).subscribe(
       response => {
@@ -47,15 +53,31 @@ export class CreateClientComponent implements OnInit {
     );
   }
 
+  loadHardwareProfiles() {
+    const url = 'http://127.0.0.1:8080/hardware-profiles';
+
+    this.http.get<any>(url).subscribe(
+      response => {
+        this.hardwareProfiles = response['hydra:member'];
+      },
+      error => {
+        console.error('Error fetching hardware profiles:', error);
+      }
+    );
+  }
+
   onSubmit() {
     if (this.clientForm.valid) {
+      this.errorForm = false
       const formData = this.clientForm.value;
       this.http.post('http://127.0.0.1:8080/clients', formData).subscribe(
         response => {
           this.dialogRef.close(response);
-        },
+          this.openSnackBar(false, 'Cliente creado exitosamente');        },
         error => {
           console.error('Error during POST:', error);
+          this.errorForm = true
+          this.openSnackBar(true, 'Error al crear el cliente: ' + error.error['hydra:description']);
         }
       );
     }
@@ -64,4 +86,10 @@ export class CreateClientComponent implements OnInit {
   onNoClick(): void {
     this.dialogRef.close();
   }
+
+  openSnackBar(isError: boolean, message: string) {
+    this.snackBar.open(message, 'Cerrar', {
+      panelClass: isError ? ['snackbar-error'] : ['snackbar-success']
+    });
+  }
 }
diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css
index 40124bd..39cb26a 100644
--- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css
+++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.css
@@ -1,39 +1,38 @@
 h1 {
-    text-align: center;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    color: #3f51b5;
-    margin-bottom: 20px;
-  }
-  
-  .network-form {
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
-  }
-  
-  .form-field {
-    width: 100%;
-    margin-top: 10px;
-  }
-  
-  .mat-dialog-content {
-    padding: 20px;
-  }
-  
-  .mat-dialog-actions {
-    display: flex;
-    justify-content: flex-end;
-    padding: 10px 20px;
-  }
-  
-  button {
-    text-transform: none;
-    font-size: 16px;
-    font-weight: 500;
-  }
-  
-  .mat-slide-toggle {
-    margin-top: 20px;
-  }
-  
\ No newline at end of file
+  text-align: center;
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  color: #3f51b5;
+  margin-bottom: 20px;
+}
+
+.network-form {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.form-field {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.mat-dialog-content {
+  padding: 50px;
+}
+
+.mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px 20px;
+}
+
+button {
+  text-transform: none;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.mat-slide-toggle {
+  margin-top: 20px;
+}
diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html
index 6a520fd..022cd3c 100644
--- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html
+++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html
@@ -1,5 +1,5 @@
 <h1 mat-dialog-title>Editar Cliente</h1>
-<div mat-dialog-content>
+<div class="mat-dialog-content">
   <form [formGroup]="clientForm" class="client-form">
     <mat-form-field class="form-field">
       <mat-label>Padre</mat-label>
@@ -11,6 +11,40 @@
       <mat-label>Nombre</mat-label>
       <input matInput formControlName="name" >
     </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Número de Serie</mat-label>
+      <input matInput formControlName="serialNumber" >
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Interfaz de Red</mat-label>
+      <input matInput formControlName="netiface">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Controlador de Red</mat-label>
+      <input matInput formControlName="netDriver">
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>MAC</mat-label>
+      <input matInput formControlName="mac" >
+      <mat-error>Formato de MAC inválido. Ejemplo válido: 00:11:22:33:44:55</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Dirección IP</mat-label>
+      <input matInput formControlName="ip">
+      <mat-error>Formato de dirección IP inválido. Ejemplo válido: 127.0.0.1</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Menú URL</mat-label>
+      <input matInput formControlName="menu" type="url">
+      <mat-error>Formato de URL inválido.</mat-error>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+      <mat-label>Perfil de Hardware</mat-label>
+      <mat-select formControlName="hardwareProfile">
+        <mat-option *ngFor="let unit of hardwareProfiles" [value]="unit['@id']">{{ unit.name }} </mat-option>
+      </mat-select>
+      <mat-error>Formato de URL inválido.</mat-error>
+    </mat-form-field>
   </form>
 </div>
 <div mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts
index 60d38d3..584fe69 100644
--- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts
+++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts
@@ -12,6 +12,7 @@ import { CreateClientComponent } from '../create-client/create-client.component'
 export class EditClientComponent {
   clientForm!: FormGroup;
   parentUnits: any[] = []; // Array to store parent units fetched from API
+  hardwareProfiles: any[] = []; // Array to store hardware profiles fetched from API
   isEditMode: boolean; // Flag to check if it's edit mode
 
   constructor(
@@ -19,7 +20,6 @@ export class EditClientComponent {
     private dialogRef: MatDialogRef<CreateClientComponent>,
     private http: HttpClient,
     @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
-
   ) {
     this.isEditMode = !!data?.uuid; // Check if uuid is passed to determine edit mode
     if (this.isEditMode) {
@@ -29,22 +29,22 @@ export class EditClientComponent {
 
   ngOnInit(): void {
     this.loadParentUnits(); // Load parent units when component initializes
+    this.loadHardwareProfiles(); // Load hardware profiles when component initializes
     this.clientForm = this.fb.group({
-      organizationalUnit: [''],
+      organizationalUnit: [null,Validators.required],
       name: ['', Validators.required],
-      serialNumber: [''],
-      netiface: "eth0",
-      netDriver: "e1000e",
-      mac: "00:11:22:33:44:55",
-      ip: "127.0.0.1",
-      status: "test",
+      serialNumber: null,
+      netiface: null,
+      netDriver: null,
+      mac: null,
+      ip: null,
       menu: null,
       hardwareProfile: null,
     });
   }
 
   loadParentUnits() {
-    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
+    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
 
     this.http.get<any>(url).subscribe(
       response => {
@@ -56,6 +56,19 @@ export class EditClientComponent {
     );
   }
 
+  loadHardwareProfiles() {
+    const url = 'http://127.0.0.1:8080/hardware-profiles';
+
+    this.http.get<any>(url).subscribe(
+      response => {
+        this.hardwareProfiles = response['hydra:member'];
+      },
+      error => {
+        console.error('Error fetching hardware profiles:', error);
+      }
+    );
+  }
+
   loadData(uuid: string) {
     const url = `http://127.0.0.1:8080/clients/${uuid}`;
 
@@ -63,7 +76,13 @@ export class EditClientComponent {
       data => {
         this.clientForm.patchValue({
           name: data.name,
-          organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : ''
+          ip: data.ip,
+          mac: data.mac,
+          netiface: data.netiface,
+          netDriver: data.netDriver,
+          serialNumber: data.serialNumber,
+          hardwareProfile: data.hardwareProfile ? data.hardwareProfile['@id'] : null,
+          organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : null
         });
       });
   }
diff --git a/ogWebconsole/src/app/components/groups/data.service.ts b/ogWebconsole/src/app/components/groups/data.service.ts
index 4b56083..2b9ace5 100644
--- a/ogWebconsole/src/app/components/groups/data.service.ts
+++ b/ogWebconsole/src/app/components/groups/data.service.ts
@@ -9,24 +9,16 @@ import { UnidadOrganizativa } from './model';
 })
 export class DataService {
 
-  private apiUrl = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
+  private apiUrl = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=1000';
   private clientsUrl = 'http://127.0.0.1:8080/clients?page=1&itemsPerPage=30';
 
   constructor(private http: HttpClient) {}
 
-  getUnidadesOrganizativas(): Observable<UnidadOrganizativa[]> {
-    return this.http.get<any>(this.apiUrl).pipe(
+  getOrganizationalUnits(): Observable<UnidadOrganizativa[]> {
+    return this.http.get<any>(`${this.apiUrl}&type=organizational-unit`).pipe(
       map(response => {
         if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
           return response['hydra:member']
-            .filter((unidad: any) => unidad.type === 'organizational-unit')
-            .map((unidad: any) => ({
-              id: unidad.id,
-              nombre: unidad.name,
-              uuid: unidad.uuid,
-              type: unidad.type,
-              aulas: []
-            }));
         } else {
           throw new Error('Unexpected response format');
         }
@@ -38,11 +30,11 @@ export class DataService {
     );
   }
 
-  getChildren(uuid: string): Observable<any[]> {
-    return this.http.get<any>(`${this.apiUrl}&parent=${uuid}`).pipe(
+  getChildren(id: string): Observable<any[]> {
+    return this.http.get<any>(`${this.apiUrl}&parent.id=${id}`).pipe(
       map(response => {
         if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
-          return response['hydra:member'].filter((element: any) => element.parent && element.parent['@id'] === `/organizational-units/${uuid}`);
+          return response['hydra:member']
         } else {
           throw new Error('Unexpected response format');
         }
@@ -54,11 +46,11 @@ export class DataService {
     );
   }
 
-  getClients(uuid: string): Observable<any[]> {
-    return this.http.get<any>(this.clientsUrl).pipe(
+  getClients(id: string): Observable<any[]> {
+    return this.http.get<any>(`${this.clientsUrl}&organizationalUnit.id=${id}`).pipe(
       map(response => {
         if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
-          return response['hydra:member'].filter((client: any) => client.organizationalUnit && client.organizationalUnit['@id'] === `/organizational-units/${uuid}`);
+          return response['hydra:member']
         } else {
           throw new Error('Unexpected response format');
         }
@@ -82,6 +74,16 @@ export class DataService {
     );
   }
 
+  changeParent(uuid: string): Observable<void> {
+    const url = `http://127.0.0.1:8080/organizational-units/${uuid}/change-parent`;
+    // @ts-ignore
+    return this.http.post<void>(url).pipe(
+      catchError(error => {
+        console.error('Error deleting element', error);
+        return throwError(error);
+      })
+    );
+  }
 
 
 }
diff --git a/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.css b/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.spec.ts b/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.spec.ts
new file mode 100644
index 0000000..9f88c39
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteGroupsModalComponent } from './delete-groups-modal.component';
+
+describe('DeleteGroupsModalComponent', () => {
+  let component: DeleteGroupsModalComponent;
+  let fixture: ComponentFixture<DeleteGroupsModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeleteGroupsModalComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DeleteGroupsModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.ts b/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.ts
new file mode 100644
index 0000000..524987f
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/delete-groups-modal/delete-groups-modal.component.ts
@@ -0,0 +1,30 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-delete-confirm-dialog',
+  template: `
+    <h1 mat-dialog-title>Eliminar</h1>
+    <div mat-dialog-content>
+      <p>¿Quiere borrar los clientes situados en  {{data.name}} o quiere resituarlos en el nivel superior?</p>
+    </div>
+    <div mat-dialog-actions>
+      <button mat-button (click)="deleteClick()">Borrar todos los clientes</button>
+      <button mat-button (click)="changeClick()">Resituar </button>
+    </div>
+  `
+})
+export class DeleteGroupsModalComponent {
+  constructor(
+    public dialogRef: MatDialogRef<DeleteGroupsModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { name: string }
+  ) {}
+
+  deleteClick(): void {
+    this.dialogRef.close('delete');
+  }
+
+  changeClick(): void {
+    this.dialogRef.close('change');
+  }
+}
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 8696ff5..bf6b4bd 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -8,13 +8,24 @@
   margin: 10px;
 }
 
+.header-container {
+  height: 100px;
+}
+
 .unidad-card, .elements-card {
   flex: 1 1 45%;
   background-color: #fafafa;
-  max-height: 300px; 
+  max-height: 400px;
+}
+
+.element-content {
   overflow-y: auto;
 }
 
+.title {
+  margin-left: 10px;
+}
+
 .details-card, .classroom-view {
   flex: 1 1 25%;
 }
@@ -60,6 +71,10 @@ button {
   width: 100%;
 }
 
+.item-content mat-icon {
+  margin-right: 10px;
+}
+
 .clickable-item:hover {
   cursor: pointer;
 }
@@ -71,6 +86,7 @@ button {
 .actions {
   display: flex;
   margin-left: auto;
+  align-self: center;
 }
 
 .actions mat-icon {
@@ -81,4 +97,16 @@ button {
 
 .actions mat-icon:hover {
   color: #212121;
-}
\ No newline at end of file
+}
+
+.empty-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+mat-spinner {
+  margin: 0 auto;
+  align-self: center;
+}
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index d97103a..d655b26 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -1,24 +1,41 @@
-<h2>Crear</h2>
-<div class="groups-button-row">
-  <button mat-flat-button color="primary" (click)="addOU()">Nueva Unidad Organizativa</button>
-  <button mat-flat-button color="primary" (click)="addClient()">Nuevo Cliente</button>
+<div class="header-container">
+  <h2 class="title">Administrar grupos</h2>
+  <div class="groups-button-row">
+    <button mat-flat-button color="primary" (click)="addOU()">Nueva Unidad Organizativa</button>
+    <button mat-flat-button color="primary" (click)="addClient()">Nuevo Cliente</button>
+  </div>
 </div>
-<mat-divider></mat-divider>
-<h2>Grupos</h2>
 <div class="groupLists-container">
   <mat-card class="card unidad-card">
     <mat-card-title>Unidad organizativa</mat-card-title>
     <mat-card-content>
-      <mat-list role="list">
-        <mat-list-item *ngFor="let unidad of unidadesOrganizativas"
-          [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
+      <mat-list >
+        <mat-list-item *ngFor="let unidad of organizationalUnits"
+          [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
           <div class="item-content">
-            <span (click)="onSelectUnidad(unidad)">
-              <mat-icon>apartment</mat-icon>
-              {{ unidad.nombre }}
-            </span>
+            <mat-icon>apartment</mat-icon>
+            {{ unidad.name }}
             <span class="actions">
-              <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid)">edit</mat-icon>
+              <mat-icon
+                class="edit-icon"
+                (click)="onEditClick(unidad.type, unidad.uuid)"
+                #tooltip="matTooltip"
+                matTooltip="Editar unidad organizativa"
+                matTooltipHideDelay="0">edit
+              </mat-icon>
+              <mat-icon
+                class="edit-icon"
+                (click)="addOU(unidad)"
+                #tooltip="matTooltip"
+                matTooltip="Crear unidad organizativa interna"
+                matTooltipHideDelay="0">add_home_work
+              </mat-icon>
+              <mat-icon
+                class="edit-icon" (click)="addClient(unidad)"
+                #tooltip="matTooltip"
+                matTooltip="Crear cliente en esta unidad organizativa"
+                matTooltipHideDelay="0">devices
+              </mat-icon>
             </span>
           </div>
         </mat-list-item>
@@ -29,7 +46,7 @@
   <mat-card class="card elements-card">
     <mat-card-title>
       <div class="title-with-breadcrumb">
-        <span>Elementos</span>
+        <span>Elementos internos</span>
         <mat-card-subtitle>
           <ng-container *ngFor="let crumb of breadcrumb; let i = index">
             <a (click)="navigateToBreadcrumb(i)">{{ crumb }}</a>
@@ -38,19 +55,28 @@
         </mat-card-subtitle>
       </div>
     </mat-card-title>
-    <mat-card-content>
-      <mat-list role="list">
-        <mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}">
+    <mat-card-content class="element-content">
+      <mat-spinner *ngIf="loading"></mat-spinner>
+      <mat-list>
+        <div *ngIf="children.length === 0" class="empty-list">
+          <mat-icon>info</mat-icon>
+          <span>No hay elementos internos</span>
+        </div>
+        <mat-list-item *ngFor="let child of children" [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" (click)="onSelectChild(child)">
           <div class="item-content">
-            <span (click)="onSelectChild(child)">
-              <ng-container [ngSwitch]="getIcon(child.type)">
-                <!-- Iconos aquí -->
-              </ng-container>
-              {{ child.name || child.nombre }}
-            </span>
+            <mat-icon [ngSwitch]="child.type">
+              <ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
+              <ng-container *ngSwitchCase="'classrooms-group'">groups</ng-container>
+              <ng-container *ngSwitchCase="'classroom'">school</ng-container>
+              <ng-container *ngSwitchCase="'client'">computer</ng-container>
+              <ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
+              <ng-container *ngSwitchDefault>help_outline</ng-container>
+            </mat-icon>
+            {{child.name}}
             <span class="actions">
               <mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid)">edit</mat-icon>
-              <mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid, child.name || child.nombre, child.type)">delete</mat-icon>
+              <mat-icon class="edit-icon" (click)="addClient(child)">devices</mat-icon>
+              <mat-icon class="delete-icon" (click)="onDeleteClick($event, child.uuid, child.name, child.type)">delete</mat-icon>
             </span>
           </div>
         </mat-list-item>
@@ -58,19 +84,5 @@
     </mat-card-content>
   </mat-card>
 
-  <mat-card class="card details-card">
-    <mat-card-title>Detalles del elemento</mat-card-title>
-    <mat-card-content *ngIf="selectedDetail">
-      <p><strong>Nombre:</strong> {{ selectedDetail.name || selectedDetail.nombre }}</p>
-      <p><strong>Tipo:</strong> {{ selectedDetail.type }}</p>
-      <p><strong>ID:</strong> {{ selectedDetail.id }}</p>
-      <p *ngIf="selectedDetail.uuid"><strong>UUID:</strong> {{ selectedDetail.uuid }}</p>
-      <!-- Aquí puedes agregar más detalles específicos del elemento -->
-    </mat-card-content>
-    <mat-card-content *ngIf="!selectedDetail">
-      <p>Selecciona un elemento para ver sus detalles.</p>
-    </mat-card-content>
-  </mat-card>
-
-  <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="3"></app-classroom-view>
-</div>
\ No newline at end of file
+  <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view>
+</div>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index ce0b6f5..e34873a 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -7,6 +7,7 @@ import { DeleteModalComponent } from './delete-modal/delete-modal.component';
 import { CreateClientComponent } from './clients/create-client/create-client.component';
 import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component';
 import { EditClientComponent } from './clients/edit-client/edit-client.component';
+import {DeleteGroupsModalComponent} from "./delete-groups-modal/delete-groups-modal.component";
 
 @Component({
   selector: 'app-groups',
@@ -14,21 +15,19 @@ import { EditClientComponent } from './clients/edit-client/edit-client.component
   styleUrls: ['./groups.component.css']
 })
 export class GroupsComponent implements OnInit {
-  unidadesOrganizativas: UnidadOrganizativa[] = [];
+  organizationalUnits: UnidadOrganizativa[] = [];
   selectedUnidad: UnidadOrganizativa | null = null;
   selectedDetail: any | null = null;  // Nueva variable para el detalle del elemento seleccionado
   children: any[] = [];
   breadcrumb: string[] = [];
   clientsData: any[] = [];  // Nueva variable para almacenar los datos de clients
-
-
-
   breadcrumbData: any[] = [];  // Almacenar datos de breadcrumb para navegar
+  loading:boolean = false;
 constructor(private dataService: DataService, public dialog: MatDialog) {}
 
   ngOnInit(): void {
-    this.dataService.getUnidadesOrganizativas().subscribe(
-      data => this.unidadesOrganizativas = data,
+    this.dataService.getOrganizationalUnits().subscribe(
+      data => this.organizationalUnits = data,
       error => console.error('Error fetching unidades organizativas', error)
     );
   }
@@ -36,17 +35,17 @@ constructor(private dataService: DataService, public dialog: MatDialog) {}
   onSelectUnidad(unidad: UnidadOrganizativa): void {
     this.selectedUnidad = unidad;
     this.selectedDetail = unidad;  // Mostrar detalles de la unidad seleccionada
-    this.breadcrumb = [unidad.nombre];
+    this.breadcrumb = [unidad.name];
     this.breadcrumbData = [unidad];
-    this.loadChildrenAndClients(unidad.uuid);
+    this.loadChildrenAndClients(unidad.id);
   }
 
   onSelectChild(child: any): void {
     this.selectedDetail = child;  // Mostrar detalles del niño seleccionado
     if (child.type !== 'client' && child.uuid && child.id) {
-      this.breadcrumb.push(child.name || child.nombre);
+      this.breadcrumb.push(child.name || child.name);
       this.breadcrumbData.push(child);
-      this.loadChildrenAndClients(child.uuid);
+      this.loadChildrenAndClients(child.id);
     }
   }
 
@@ -57,25 +56,25 @@ constructor(private dataService: DataService, public dialog: MatDialog) {}
     if (target.type === 'client') {
       this.selectedDetail = target;
     } else {
-      this.loadChildrenAndClients(target.uuid);
+      this.loadChildrenAndClients(target.id);
     }
   }
 
-  loadChildrenAndClients(uuid: string): void {
-    this.dataService.getChildren(uuid).subscribe(
+  loadChildrenAndClients(id: string): void {
+    this.loading = true
+    this.dataService.getChildren(id).subscribe(
       childrenData => {
         console.log('Children data:', childrenData);
-        this.dataService.getClients(uuid).subscribe(
+        this.dataService.getClients(id).subscribe(
           clientsData => {
             this.clientsData = clientsData;  // Almacenar clientsData para pasarlo al componente hijo
             const newChildren = [...childrenData, ...clientsData];
-  
+
             if (newChildren.length > 0) {
               this.children = newChildren;
             } else {
               this.children = []; // Limpiar card2 cuando no hay elementos
-              this.breadcrumb.pop(); // Revertir breadcrumb solo si no hay elementos
-  
+
               // Si deseas que la unidad organizativa se limpie completamente, descomenta la línea siguiente:
               // this.selectedUnidad = null;
             }
@@ -92,79 +91,97 @@ constructor(private dataService: DataService, public dialog: MatDialog) {}
         this.children = []; // Limpiar card2 en caso de error
       }
     );
+    this.loading = false
   }
-  
-  addOU(): void {
-    const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
+
+  addOU(parent:any = null): void {
+  console.log('Parent:', parent);
+    const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent, { data: { parent }, width: '700px'});
     dialogRef.afterClosed().subscribe(() => {
-      this.dataService.getUnidadesOrganizativas().subscribe(
-        data => this.unidadesOrganizativas = data,
+      this.dataService.getOrganizationalUnits().subscribe(
+        data => this.organizationalUnits = data,
         error => console.error('Error fetching unidades organizativas', error)
       );
     });
   }
 
-  addClient(): void {
-    const dialogRef = this.dialog.open(CreateClientComponent);
+  addClient(organizationalUnit:any = null): void {
+    const dialogRef = this.dialog.open(CreateClientComponent, { data: { organizationalUnit }, width: '700px'});
 
     // Subscribirse al evento unitAdded del componente de creación después de cerrar el diálogo
     dialogRef.afterClosed().subscribe(() => {
-      this.dataService.getUnidadesOrganizativas().subscribe(
-        data => this.unidadesOrganizativas = data,
+      this.dataService.getOrganizationalUnits().subscribe(
+        data => this.organizationalUnits = data,
         error => console.error('Error fetching unidades organizativas', error)
       );
     });
   }
+  onDeleteClick(event: MouseEvent, uuid: string, name: string, type: string): void {
+    event.stopPropagation();
+    if (type === 'client') {
+      const dialogRef = this.dialog.open(DeleteModalComponent, {
+        width: '400px',
+        data: { name }
+      });
 
-  getIcon(type: string): string {
-    switch(type) {
-      case 'organizational-unit':
-        return 'apartment';
-      case 'classroom-group':
-        return 'classrooms-group-icon';
-      case 'classroom':
-        return 'classroom-icon';
-      case 'client':
-        return 'client-icon';
-      case 'clients-group':
-        return 'clients-group-icon';
-      default:
-        return '';
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          this.dataService.deleteElement(uuid, type).subscribe(
+            () => {
+              this.loadChildrenAndClients(this.selectedUnidad?.id || '');
+
+              this.dataService.getOrganizationalUnits().subscribe(
+                data => this.organizationalUnits = data,
+                error => console.error('Error fetching unidades organizativas', error)
+              );
+
+            },
+            error => console.error('Error deleting element', error)
+          );
+        }
+      });
+    } else {
+      const dialogDeleteGroupRef = this.dialog.open(DeleteGroupsModalComponent, {
+        width: '400px',
+        data: { name }
+      });
+
+      dialogDeleteGroupRef.afterClosed().subscribe(result => {
+        if (result && result === 'delete') {
+          this.dataService.deleteElement(uuid, type).subscribe(
+            () => {
+              this.loadChildrenAndClients(this.selectedUnidad?.id || '');
+              this.dataService.getOrganizationalUnits().subscribe(
+                data => this.organizationalUnits = data,
+                error => console.error('Error fetching unidades organizativas', error)
+              );
+            },
+            error => console.error('Error deleting element', error)
+          );
+        } else if (result && result === 'change') {
+          this.dataService.changeParent(uuid).subscribe(
+            () => {
+              this.loadChildrenAndClients(this.selectedUnidad?.id || '');
+              this.dataService.getOrganizationalUnits().subscribe(
+                data => this.organizationalUnits = data,
+                error => console.error('Error fetching unidades organizativas', error)
+              );
+            },
+            error => console.error('Error deleting element', error)
+          );
+        }
+      });
     }
   }
 
-  onDeleteClick(uuid: string, name: string, type: string): void {
-    const dialogRef = this.dialog.open(DeleteModalComponent, {
-      width: '250px',
-      data: { name }
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      if (result) {
-        this.dataService.deleteElement(uuid, type).subscribe(
-          () => {
-            this.loadChildrenAndClients(this.selectedUnidad?.uuid || '');
-            
-            this.dataService.getUnidadesOrganizativas().subscribe(
-              data => this.unidadesOrganizativas = data,
-              error => console.error('Error fetching unidades organizativas', error)
-            );
-            
-          },
-          error => console.error('Error deleting element', error)
-        );
-      }
-    });
-  }
-
   onEditClick(type: any, uuid: string): void {
     console.log('Tipo del elemento a editar:', type);
     console.log('UUID del elemento a editar:', uuid);
     if (type != "client") {
-      const dialogRef = this.dialog.open(EditOrganizationalUnitComponent);
+      const dialogRef = this.dialog.open(EditOrganizationalUnitComponent, { data: { uuid }, width: '700px'});
     } else {
       console.log('Editar cliente');
-      const dialogRef = this.dialog.open(EditClientComponent);
+      const dialogRef = this.dialog.open(EditClientComponent, { data: { uuid }, width: '700px' } );
     }
   }
 }
diff --git a/ogWebconsole/src/app/components/groups/model.ts b/ogWebconsole/src/app/components/groups/model.ts
index f90b50d..b37b389 100644
--- a/ogWebconsole/src/app/components/groups/model.ts
+++ b/ogWebconsole/src/app/components/groups/model.ts
@@ -9,11 +9,11 @@ export interface Aula {
 }
 
 export interface UnidadOrganizativa {
-  id: number;
-  nombre: string;
+  id: string;
+  name: string;
   uuid: string;
   type: string;
-  aulas: Aula[];
+  parent: UnidadOrganizativa[];
 }
 
 export interface OrganizationalUnit {
@@ -50,4 +50,4 @@ export interface ClientCollection {
     "@id": string;
     "@type": string;
   };
-}
\ No newline at end of file
+}
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html
index 2c4fafa..9143c20 100644
--- a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html
+++ b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html
@@ -9,7 +9,9 @@
         <mat-form-field class="form-field">
           <mat-label>Tipo</mat-label>
           <mat-select formControlName="type" required>
-            <mat-option *ngFor="let type of types" [value]="type">{{ type }}</mat-option>
+            <mat-option *ngFor="let type of types" [value]="type">
+              {{ typeTranslations[type] }}
+            </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field class="form-field">
@@ -17,8 +19,9 @@
           <input matInput formControlName="name" required>
         </mat-form-field>
         <mat-form-field class="form-field">
-          <mat-label>Padre</mat-label>
+          <mat-label>Unidad organizativa padre</mat-label>
           <mat-select formControlName="parent">
+            <mat-option>--</mat-option>
             <mat-option *ngFor="let unit of parentUnits" [value]="unit['@id']">{{ unit.name }}</mat-option>
           </mat-select>
         </mat-form-field>
@@ -46,10 +49,6 @@
           <mat-label>Aforo</mat-label>
           <input matInput formControlName="capacity" type="number">
         </mat-form-field>
-        <mat-form-field class="form-field">
-          <mat-label>Foto (URL) (string de prueba)</mat-label>
-          <input matInput formControlName="photo">
-        </mat-form-field>
         <div>
           <button mat-button matStepperPrevious>Atrás</button>
           <button mat-button matStepperNext>Siguiente</button>
@@ -128,7 +127,6 @@
           <mat-label>Perfil de Hardware</mat-label>
           <input matInput formControlName="hardwareProfile" type="url">
         </mat-form-field>
-        <mat-slide-toggle formControlName="validation">Validación</mat-slide-toggle>
         <div>
           <button mat-button matStepperPrevious>Atrás</button>
           <button mat-button (click)="onSubmit()" [disabled]="!networkSettingsFormGroup.valid">Añadir</button>
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
index 43229eb..c5ce903 100644
--- a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
+++ b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {Component, OnInit, Output, EventEmitter, Inject} from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatDialogRef } from '@angular/material/dialog';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 @Component({
@@ -13,20 +13,27 @@ export class CreateOrganizationalUnitComponent implements OnInit {
   generalFormGroup: FormGroup;
   additionalInfoFormGroup: FormGroup;
   networkSettingsFormGroup: FormGroup;
-  classroomInfoFormGroup: FormGroup; 
+  classroomInfoFormGroup: FormGroup;
   types: string[] = ['organizational-unit', 'classrooms-group', 'classroom', 'clients-group'];
-  parentUnits: any[] = []; 
+  typeTranslations: { [key: string]: string } = {
+    'organizational-unit': 'Unidad organizativa',
+    'classrooms-group': 'Grupo de aulas',
+    'classroom': 'Aula',
+    'clients-group': 'Grupo de clientes'
+  };
+  parentUnits: any[] = [];
 
-  @Output() unitAdded = new EventEmitter(); 
+  @Output() unitAdded = new EventEmitter();
 
   constructor(
     private _formBuilder: FormBuilder,
     private dialogRef: MatDialogRef<CreateOrganizationalUnitComponent>,
-    private http: HttpClient 
+    private http: HttpClient,
+    @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
   ) {
     this.generalFormGroup = this._formBuilder.group({
       name: ['', Validators.required],
-      parent: [''],
+      parent: [this.data.parent ? this.data.parent['@id'] : null],
       description: [''],
       type: ['', Validators.required]
     });
@@ -53,17 +60,16 @@ export class CreateOrganizationalUnitComponent implements OnInit {
       location: [''],
       projector: [false],
       board: [false],
-      capacity: [0, Validators.min(0)],
-      photo: ['', Validators.pattern('https?://.+')] 
+      capacity: [0, Validators.min(0)]
     });
   }
 
   ngOnInit() {
-    this.loadParentUnits(); 
+    this.loadParentUnits();
   }
 
   loadParentUnits() {
-    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
+    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
 
     this.http.get<any>(url).subscribe(
       response => {
@@ -106,11 +112,8 @@ export class CreateOrganizationalUnitComponent implements OnInit {
         if (classroomInfoFormValues.capacity !== undefined) {
           formData.capacity = classroomInfoFormValues.capacity;
         }
-        if (classroomInfoFormValues.photo !== undefined) {
-          formData.photo = classroomInfoFormValues.photo;
-        }
       }
-      
+
       console.log('POST data:', formData);
       const postUrl = 'http://127.0.0.1:8080/organizational-units';
       const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
@@ -119,7 +122,7 @@ export class CreateOrganizationalUnitComponent implements OnInit {
         response => {
           console.log('POST successful:', response);
           this.unitAdded.emit();
-          this.dialogRef.close(); 
+          this.dialogRef.close();
         },
         error => {
           console.error('Error al realizar POST:', error);
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
index 6c86f66..6e2de73 100644
--- a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
+++ b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
@@ -66,7 +66,7 @@ export class EditOrganizationalUnitComponent implements OnInit {
   }
 
   loadParentUnits() {
-    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
+    const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
 
     this.http.get<any>(url).subscribe(
       response => {
@@ -93,20 +93,20 @@ export class EditOrganizationalUnitComponent implements OnInit {
           comments: data.comments
         });
         this.networkSettingsFormGroup.patchValue({
-          proxy: data.proxy,
-          dns: data.dns,
-          netmask: data.netmask,
-          router: data.router,
-          ntp: data.ntp,
-          p2pMode: data.p2pMode,
-          p2pTime: data.p2pTime,
-          mcastIp: data.mcastIp,
-          mcastSpeed: data.mcastSpeed,
-          mcastPort: data.mcastPort,
-          mcastMode: data.mcastMode,
-          menu: data.menu,
-          hardwareProfile: data.hardwareProfile,
-          validation: data.validation
+          proxy: data.networkSettings.proxy,
+          dns: data.networkSettings.dns,
+          netmask: data.networkSettings.netmask,
+          router: data.networkSettings.router,
+          ntp: data.networkSettings.ntp,
+          p2pMode: data.networkSettings.p2pMode,
+          p2pTime: data.networkSettings.p2pTime,
+          mcastIp: data.networkSettings.mcastIp,
+          mcastSpeed: data.networkSettings.mcastSpeed,
+          mcastPort: data.networkSettings.mcastPort,
+          mcastMode: data.networkSettings.mcastMode,
+          menu: data.networkSettings.menu,
+          hardwareProfile: data.networkSettings.hardwareProfile,
+          validation: data.networkSettings.validation
         });
       },
       error => {
diff --git a/ogWebconsole/src/app/components/layout/header/header.component.css b/ogWebconsole/src/app/components/layout/header/header.component.css
index 6c84df7..6e944a1 100644
--- a/ogWebconsole/src/app/components/layout/header/header.component.css
+++ b/ogWebconsole/src/app/components/layout/header/header.component.css
@@ -1,10 +1,15 @@
 
 mat-toolbar {
-    height: 50px;
+    height: 60px;
     background-color: #3f51b5;
     color: white;
 }
 
+.admin-button,
+.user-button{
+  background-color: #e0e0e0;
+}
+
 .navbar-button-row {
     display: flex;
     justify-content: end;
@@ -16,6 +21,5 @@ button[mat-flat-button] {
 }
 
 .navbar-tittle{
-    padding-left: 20px;
     cursor: pointer;
 }
diff --git a/ogWebconsole/src/app/components/layout/header/header.component.html b/ogWebconsole/src/app/components/layout/header/header.component.html
index 6a54ed5..cb93cff 100644
--- a/ogWebconsole/src/app/components/layout/header/header.component.html
+++ b/ogWebconsole/src/app/components/layout/header/header.component.html
@@ -1,7 +1,8 @@
 <mat-toolbar>
     <span class="navbar-tittle" routerLink="/dashboard">Opengnsys webconsole</span>
     <div class="navbar-button-row">
-      <button mat-button [matMenuTriggerFor]="menu">Administracion</button>
+      <button class="admin-button" *ngIf="isSuperAdmin" mat-button [matMenuTriggerFor]="menu">Administracion</button>
+      <button class="user-button" mat-button *ngIf="!isSuperAdmin" (click)="editUser()">Editar usuario</button>
       <mat-menu #menu="matMenu">
         <button mat-menu-item routerLink="/users">Usuarios</button>
         <button mat-menu-item routerLink="/user-groups">Roles</button>
diff --git a/ogWebconsole/src/app/components/layout/header/header.component.ts b/ogWebconsole/src/app/components/layout/header/header.component.ts
index 15faf81..cac4d85 100644
--- a/ogWebconsole/src/app/components/layout/header/header.component.ts
+++ b/ogWebconsole/src/app/components/layout/header/header.component.ts
@@ -1,5 +1,9 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import {jwtDecode} from 'jwt-decode';
+import {
+  ChangePasswordModalComponent
+} from "../../pages/admin/users/users/change-password-modal/change-password-modal.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
   selector: 'app-header',
@@ -7,14 +11,44 @@ import {jwtDecode} from 'jwt-decode';
   styleUrls: ['./header.component.css'],
 })
 export class HeaderComponent implements OnInit {
+  isSuperAdmin: boolean = false;
+
   @Output() toggleSidebar = new EventEmitter<void>();
+  private decodedToken: any;
+  private username: any;
 
   onToggleSidebar() {
     this.toggleSidebar.emit();
   }
 
-  constructor() { }
+  constructor(public dialog: MatDialog) {}
 
   ngOnInit(): void {
+    const token = localStorage.getItem('loginToken');
+    if (token) {
+      try {
+        this.decodedToken = jwtDecode(token);
+        this.isSuperAdmin = this.decodedToken.roles.includes('ROLE_SUPER_ADMIN');
+        localStorage.setItem('isSuperAdmin', String(this.isSuperAdmin));
+        console.log('isSuperAdmin:', this.isSuperAdmin);
+        this.username = this.decodedToken.username;
+      } catch (error) {
+        console.error('Error decoding JWT:', error);
+      }
+    }
+  }
+
+  ngDoCheck(): void {
+    this.isSuperAdmin = localStorage.getItem('isSuperAdmin') === 'true';
+  }
+
+  editUser() {
+    const dialogRef = this.dialog.open(ChangePasswordModalComponent, {
+      data: { user: this.decodedToken.username, uuid: this.decodedToken.uuid },
+      width: '400px',
+    });
+    /* dialogRef.componentInstance.userEdited.subscribe(() => {
+      console.log("User edited successfully!")
+    }); */
   }
 }
diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
index 0b7bd3a..60e093c 100644
--- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css
@@ -1,7 +1,10 @@
+.header {
+  height: 10vh;
+}
 
 .container {
   width: auto;
-  height: 100%;
+  height: calc(100vh - 60px);
 }
 
 .content {
diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
index f5e4d99..d9d7a08 100644
--- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
+++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html
@@ -1,4 +1,4 @@
-<app-header (toggleSidebar)="toggleSidebar()"></app-header>
+<app-header class="header" (toggleSidebar)="toggleSidebar()"></app-header>
 
 <mat-drawer-container class="container" >
   <mat-drawer class="sidebar" mode="side" opened>
diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
index f20f424..a58bde4 100644
--- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
+++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
@@ -21,6 +21,7 @@ mat-icon {
 
 .user-logged{
   align-items: center;
+  height: 70px;
   gap: 2rem;
   padding:1rem;
   font-size: medium;
@@ -35,3 +36,4 @@ mat-icon {
 .admin-link {
   margin-top: auto;
 }
+
diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
index 9f6c4b1..a93961e 100644
--- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
+++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
@@ -22,20 +22,12 @@ export class SidebarComponent {
       try {
         this.decodedToken = jwtDecode(token);
         this.isSuperAdmin = this.decodedToken.roles.includes('ROLE_SUPER_ADMIN');
+        localStorage.setItem('isSuperAdmin', String(this.isSuperAdmin));
+        console.log('isSuperAdmin:', this.isSuperAdmin);
         this.username = this.decodedToken.username;
       } catch (error) {
         console.error('Error decoding JWT:', error);
       }
     }
   }
-
-  editUser(user: any) {
-    // Implementar la lógica de edición
-    const dialogRef = this.dialog.open(ChangePasswordModalComponent, {
-      data: { user: this.decodedToken.username, uuid: this.decodedToken.uuid },
-    });
-    /* dialogRef.componentInstance.userEdited.subscribe(() => {
-      console.log("User edited successfully!")
-    }); */
-  }
 }
diff --git a/ogWebconsole/src/app/components/login/login.component.css b/ogWebconsole/src/app/components/login/login.component.css
index f2cb166..13f586d 100644
--- a/ogWebconsole/src/app/components/login/login.component.css
+++ b/ogWebconsole/src/app/components/login/login.component.css
@@ -30,36 +30,19 @@
     margin: 0 auto 20px;
 }
 
-.login input {
-    font-family: "Asap", sans-serif;
-    display: block;
-    border-radius: 5px;
-    font-size: 16px;
-    background: rgba(230, 230, 230);
+.button-row {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 20px;
+}
+
+.button-row button {
+  width: 100%;
+}
+
+mat-form-field {
     width: 100%;
-    padding: 10px;
-    margin: 15px -10px;
-    text-align: center;
-}
-
-.login button {
-    font-family: "Asap", sans-serif;
-    cursor: pointer;
-    color: #fff;
-    font-size: 16px;
-    text-transform: uppercase;
-    width: 80px;
-    border: 0;
-    padding: 10px 0;
-    margin-top: 10px;
-    margin-left: -5px;
-    border-radius: 5px;
-    background-color: #3f51b5;
-    transition: background-color 300ms;
-}
-
-.login button:hover {
-    background-color: #0271da;
 }
 
 .invalid {
@@ -71,7 +54,6 @@
     margin-top: 10px;
 }
 
-
 @keyframes rotate360 {
     from {
       transform: rotate(0deg);
@@ -80,7 +62,7 @@
       transform: rotate(360deg);
     }
   }
-  
+
   .rotating {
     animation: rotate360 0.6s cubic-bezier(.42,0,1,1) infinite;
-  }
\ No newline at end of file
+  }
diff --git a/ogWebconsole/src/app/components/login/login.component.html b/ogWebconsole/src/app/components/login/login.component.html
index f6a58a1..2ff21d5 100644
--- a/ogWebconsole/src/app/components/login/login.component.html
+++ b/ogWebconsole/src/app/components/login/login.component.html
@@ -1,11 +1,28 @@
 <div>
     <form class="login" (ngSubmit)="onLogin()" #loginForm="ngForm">
-        <img src="assets/images/logo.png" alt="Opengnsys" 
+        <img src="assets/images/logo.png" alt="Opengnsys"
              class="login-logo" [class.rotating]="isLoading">
         <h2>Opengnsys</h2>
-        <input [(ngModel)]="loginObj.username" type="text" id="username" name="username" placeholder="usuario" required #usernameInput="ngModel" [ngClass]="{'invalid': !usernameInput.valid && usernameInput.touched}">
-        <input [(ngModel)]="loginObj.password" type="password" id="password" name="password" placeholder="contraseña" required #passwordInput="ngModel" [ngClass]="{'invalid': !passwordInput.valid && passwordInput.touched}">
-        <button type="submit">Login</button>
+        <mat-form-field>
+          <mat-label>Introducte tu usuario</mat-label>
+          <input matInput [(ngModel)]="loginObj.username" name="username" required #usernameInput="ngModel" [ngClass]="{'invalid': !usernameInput.valid && usernameInput.touched}" />
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>Introduce tu contraseña</mat-label>
+          <input matInput [type]="hide() ? 'password' : 'text'" required [(ngModel)]="loginObj.password" name="password"/>
+          <button
+            mat-icon-button
+            matSuffix
+            (click)="clickEvent($event)"
+            [attr.aria-label]="'Ocultar contraseña'"
+            [attr.aria-pressed]="hide()"
+          >
+            <mat-icon>{{hide() ? 'visibility_off' : 'visibility'}}</mat-icon>
+          </button>
+        </mat-form-field>
+        <div class="button-row">
+          <button mat-flat-button color="primary" type="submit" [disabled]="!loginObj.username || !loginObj.password">Iniciar sesión</button>
+        </div>
         <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
     </form>
 </div>
diff --git a/ogWebconsole/src/app/components/login/login.component.ts b/ogWebconsole/src/app/components/login/login.component.ts
index 6bddb56..a4d7a8e 100644
--- a/ogWebconsole/src/app/components/login/login.component.ts
+++ b/ogWebconsole/src/app/components/login/login.component.ts
@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component } from '@angular/core';
+import {Component, signal} from '@angular/core';
 import { Router } from '@angular/router';
 
 @Component({
@@ -13,13 +13,13 @@ export class LoginComponent {
       "password": ""
     };
     errorMessage: string = '';
-    isLoading: boolean = false; 
+    isLoading: boolean = false;
 
     constructor(private http: HttpClient, private router: Router) { }
-    
+
     onLogin() {
         this.errorMessage = '';
-        this.isLoading = true; 
+        this.isLoading = true;
 
         if (!this.loginObj.username || !this.loginObj.password) {
             if (!this.loginObj.username) {
@@ -34,7 +34,7 @@ export class LoginComponent {
                 document.getElementById('password')?.classList.remove('invalid');
             }
 
-            this.isLoading = false; 
+            this.isLoading = false;
             return;
         }
 
@@ -49,7 +49,7 @@ export class LoginComponent {
                 this.isLoading = false;
             },
             error: (err) => {
-                this.isLoading = false;  
+                this.isLoading = false;
                 if (err.status === 401) {
                     this.errorMessage = 'Usuario o contraseña incorrectos';
                 } else {
@@ -61,4 +61,10 @@ export class LoginComponent {
             }
         });
     }
+
+  hide = signal(true);
+  clickEvent(event: MouseEvent) {
+    this.hide.set(!this.hide());
+    event.stopPropagation();
+  }
 }
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.css b/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.css
index dbd8ba9..8aefe41 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.css
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.css
@@ -1,15 +1,19 @@
 .user-form .form-field {
     display: block;
-    margin-bottom: 10px; 
-  }
-  
-  .checkbox-group label {
-    display: block;
-    margin-bottom: 8px;
-  }
-  
-  .error-message {
-    color: red;
-    margin-top: 10px;
-  }
-  
+    margin-bottom: 10px;
+}
+
+.checkbox-group label {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.error-message {
+  color: red;
+  margin-top: 10px;
+}
+
+mat-spinner {
+  margin: 0 auto;
+  align-self: center;
+}
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.html b/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.html
index 3fb4682..3c2549c 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.html
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.html
@@ -1,33 +1,33 @@
 <h1 mat-dialog-title>Editar Usuario</h1>
 <div mat-dialog-content>
   <form [formGroup]="userForm" class="user-form">
-    <mat-form-field class="form-field">
-      <mat-label>Nombre de usuario</mat-label>
-      <input matInput formControlName="username">
-    </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Contraseña actual</mat-label>
-      <input matInput formControlName="currentPassword" type="password">
+      <input matInput formControlName="currentPassword" type="currentPassword">
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Nueva contraseña</mat-label>
-      <input matInput formControlName="password" type="password">
+      <input matInput formControlName="newPassword" type="password">
     </mat-form-field>
     <mat-form-field class="form-field">
       <mat-label>Repite la contraseña</mat-label>
-      <input matInput formControlName="confirmPassword" type="password">
+      <input matInput formControlName="repeatNewPassword" type="password">
     </mat-form-field>
 
+    @if (loading){
+      <mat-spinner></mat-spinner>
+    }
+
     @if (passwordMismatch) {
       <div class="error-message">Las contraseñas no coinciden</div>
     }
 
     @if (updateError) {
-      <div class="error-message">Error, inténtelo de nuevo</div>
+      <div class="error-message">{{resetPasswordError}}</div>
     }
   </form>
 </div>
 <div mat-dialog-actions>
   <button mat-button (click)="onNoClick()">Cancelar</button>
-  <button mat-button (click)="onSubmit()">Editar</button>
+  <button mat-button (click)="onSubmit()" [disabled]="loading">Editar</button>
 </div>
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.ts
index ce88d4c..49b8864 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.ts
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/change-password-modal/change-password-modal.component.ts
@@ -14,6 +14,8 @@ export class ChangePasswordModalComponent {
   userForm: FormGroup;
   passwordMismatch: boolean = false;
   updateError: boolean = false;
+  loading: boolean = false;
+  resetPasswordError: string = '';
 
   constructor(
     public dialogRef: MatDialogRef<EditUserModalComponent>,
@@ -22,9 +24,9 @@ export class ChangePasswordModalComponent {
     private userService: UserService
   ) {
     this.userForm = this.fb.group({
-      username: [this.data.user, Validators.required],
-      password: ['', Validators.required],
-      confirmPassword: ['', Validators.required]
+      currentPassword: ['', Validators.required],
+      newPassword: ['', Validators.required],
+      repeatNewPassword: ['', Validators.required]
     }, { validators: this.passwordMatchValidator });
   }
 
@@ -40,34 +42,36 @@ export class ChangePasswordModalComponent {
     if (this.userForm.valid) {
       this.passwordMismatch = false;
       this.updateError = false;
+      this.loading = true
 
       const userPayload = {
-        username: this.userForm.value.username,
-        allowedOrganizationalUnits: [],
-        password: this.userForm.value.password,
-        enabled: true,
-        userGroups: []
+        currentPassword: this.userForm.value.currentPassword,
+        newPassword: this.userForm.value.newPassword,
+        repeatNewPassword: this.userForm.value.repeatNewPassword
       };
       console.log("THIS IS THE USER PAYLOAD: ", userPayload);
-      this.userService.updateUser(this.data.uuid, userPayload).subscribe(
+      this.userService.changePassword(this.data.uuid, userPayload).subscribe(
         response => {
           console.log('User updated successfully:', response);
           this.userEdited.emit();
           this.dialogRef.close(this.userForm.value);
         },
         error => {
-          console.error('Error updating user:', error);
+          console.error('Error updating user:', error.error['hydra:description']);
+          this.resetPasswordError = error.error['hydra:description']
           this.updateError = true;
+          this.loading = false
         }
       );
     } else {
       console.error('Form is invalid');
       this.passwordMismatch = this.userForm.hasError('mismatch');
       this.updateError = true;
+      this.loading = false
     }
   }
 
   private passwordMatchValidator(form: FormGroup): { [key: string]: boolean } | null {
-    return form.get('password')?.value === form.get('confirmPassword')?.value ? null : { mismatch: true };
+    return form.get('newPassword')?.value === form.get('repeatNewPassword')?.value ? null : { mismatch: true };
   }
 }
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html
index cd61e77..447eb5d 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.html
@@ -9,9 +9,9 @@
       <mat-label>Contraseña</mat-label>
       <input matInput formControlName="password" type="password">
     </mat-form-field>
-    <mat-form-field appearance="fill">
+    <mat-form-field class="form-field">
       <mat-label>Rol</mat-label>
-      <mat-select formControlName="role">
+      <mat-select multiple formControlName="userGroups">
         <mat-option *ngFor="let group of userGroups" [value]="group['@id']">
           {{ group.name }}
         </mat-option>
@@ -20,13 +20,13 @@
 
     <mat-form-field class="form-field">
       <mat-label>Unidad organiativa</mat-label>
-      <mat-select multiple formControlName="organizationalUnit">
+      <mat-select multiple formControlName="allowedOrganizationalUnits">
         <mat-option *ngFor="let unit of organizationalUnits" [value]="unit['@id']">
           {{unit.name}}
         </mat-option>
       </mat-select>
     </mat-form-field>
-    
+
   </form>
 </div>
 <div mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts
index 3b7fdb5..3a18cf1 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/edit-user-modal/edit-user-modal.component.ts
@@ -3,12 +3,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { UserService } from '../users.service';
 
-interface UserGroup {
-  '@id': string;
-  name: string;
-  role: string[];
-}
-
 @Component({
   selector: 'app-edit-user-modal',
   templateUrl: './edit-user-modal.component.html',
@@ -16,7 +10,7 @@ interface UserGroup {
 })
 export class EditUserModalComponent implements OnInit {@Output() userEdited = new EventEmitter<void>();
   userForm: FormGroup;
-  userGroups: UserGroup[] = [];
+  userGroups: any[] = [];
   organizationalUnits: any[] = [];
 
   constructor(
@@ -26,11 +20,12 @@ export class EditUserModalComponent implements OnInit {@Output() userEdited = ne
     private userService: UserService // Inyecta el servicio
   ) {
     this.userForm = this.fb.group({
-      username: [this.data],
+      username: [this.data.user.username],
       password: [''],
-      role: this.data.user.allowedOrganizationalUnits,
-      organizationalUnit: [[this.data.user.allowedOrganizationalUnits], Validators.required]
+      userGroups: [this.data.user.userGroups.map((group: { '@id': any; }) => group['@id'])],
+      allowedOrganizationalUnits: [this.data.user.allowedOrganizationalUnits.map((unit: { '@id': any; }) => unit['@id'])]
     });
+    console.log(this.userForm.value)
   }
 
   ngOnInit(): void {
@@ -47,25 +42,25 @@ export class EditUserModalComponent implements OnInit {@Output() userEdited = ne
   }
 
   onSubmit(): void {
+    console.log(this.userForm.value);
+    const userPayload = {
+      username: this.userForm.value.username,
+      allowedOrganizationalUnits: this.userForm.value.allowedOrganizationalUnits,
+      password: this.userForm.value.password,
+      enabled: true,
+      userGroups: this.userForm.value.userGroups
+    };
 
-      const userPayload = {
-        username: this.userForm.value.username,
-        allowedOrganizationalUnits: [],
-        password: this.userForm.value.password,
-        enabled: true,
-        userGroups: [this.userForm.value.role ]
-      };
-
-      this.userService.updateUser(this.data.user.uuid, userPayload).subscribe(
-        response => {
-          console.log('User added successfully:', response);
-          this.userEdited.emit();
-          this.dialogRef.close(this.userForm.value);
-        },
-        error => {
-          console.error('Error adding user:', error);
-          // Agregar alguna lógica para manejar el error en la interfaz de usuario
-        }
-      );
+    this.userService.updateUser(this.data.user.uuid, userPayload).subscribe(
+      response => {
+        console.log('User added successfully:', response);
+        this.userEdited.emit();
+        this.dialogRef.close(this.userForm.value);
+      },
+      error => {
+        console.error('Error adding user:', error);
+        // Agregar alguna lógica para manejar el error en la interfaz de usuario
+      }
+    );
   }
 }
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts b/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts
index 078193a..35bbdf8 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/users.component.ts
@@ -62,7 +62,8 @@ export class UsersComponent implements OnInit {
   editUser(user: any) {
     // Implementar la lógica de edición
     const dialogRef = this.dialog.open(EditUserModalComponent, {
-      data: { user: user }
+      data: { user: user },
+      width: '400px'
     });
     dialogRef.componentInstance.userEdited.subscribe(() => {
       this.loadUsers();
@@ -71,7 +72,7 @@ export class UsersComponent implements OnInit {
 
   deleteUser(user: any) {
     const dialogRef = this.dialog.open(DeleteUserModalComponent, {
-      data: user
+      data: user,
     });
 
     dialogRef.afterClosed().subscribe(result => {
diff --git a/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts b/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts
index e64f772..3e0811a 100644
--- a/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts
+++ b/ogWebconsole/src/app/components/pages/admin/users/users/users.service.ts
@@ -10,6 +10,12 @@ interface UserPayload {
   allowedOrganizationalUnits: any[];
 }
 
+interface ChangePasswordPayload {
+  currentPassword: string;
+  newPassword: string;
+  repeatNewPassword: string;
+}
+
 interface UserGroup {
   '@id': string;
   name: string;
@@ -38,6 +44,13 @@ export class UserService {
     return this.http.put(`${this.apiUrl}/users/${userId}`, userPayload, { headers });
   }
 
+  changePassword(userId: number, userPayload: ChangePasswordPayload): Observable<any> {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/ld+json',
+    });
+    return this.http.put(`${this.apiUrl}/users/${userId}/reset-password`, userPayload, { headers });
+  }
+
   getUserGroups(): Observable<{ 'hydra:member': UserGroup[] }> {
     return this.http.get<{ 'hydra:member': UserGroup[] }>(`${this.apiUrl}/user-groups`);
   }
@@ -48,6 +61,6 @@ export class UserService {
 
   getOrganizationalUnits(): Observable<any> {
     return this.http.get<any>(`${this.apiUrl}/organizational-units?page=1&itemsPerPage=30`);
-    
+
   }
 }