diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index 9331a86..ff5ac66 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -41,7 +41,7 @@ import { CreateOrganizationalUnitComponent } from './components/groups/organizat
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component';
-import { DeleteModalComponent } from './components/groups/delete-modal/delete-modal.component';
+import { DeleteModalComponent } from './shared/delete_modal/delete-modal/delete-modal.component';
 import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
 import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component';
 import { ClassroomViewComponent } from './components/groups/classroom-view/classroom-view.component';
diff --git a/ogWebconsole/src/app/components/admin/users/users/users.component.ts b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
index 8b3828e..0982957 100644
--- a/ogWebconsole/src/app/components/admin/users/users/users.component.ts
+++ b/ogWebconsole/src/app/components/admin/users/users/users.component.ts
@@ -5,6 +5,9 @@ import { DeleteUserModalComponent } from './delete-user-modal/delete-user-modal.
 import { MatDialog } from '@angular/material/dialog';
 import { AddUserModalComponent } from './add-user-modal/add-user-modal.component';
 import { EditUserModalComponent } from './edit-user-modal/edit-user-modal.component';
+import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
+import { HttpClient } from '@angular/common/http';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-users',
@@ -37,7 +40,9 @@ export class UsersComponent implements OnInit {
   ];
   displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
 
-  constructor(private userService: UserService, public dialog: MatDialog) {}
+  constructor(private userService: UserService, public dialog: MatDialog, 
+    private http: HttpClient,
+    private toastService: ToastrService) {}
 
   ngOnInit() {
     this.loadUsers();
@@ -69,15 +74,30 @@ export class UsersComponent implements OnInit {
     });
   }
 
-  deleteUser(user: any) {
-    const dialogRef = this.dialog.open(DeleteUserModalComponent, {
-      data: user,
+  deleteUser(user: any): void {
+    const dialogRef = this.dialog.open(DeleteModalComponent, {
+      width: '300px',
+      data: { name: user.name }
     });
-
+  
     dialogRef.afterClosed().subscribe(result => {
       if (result) {
-        this.loadUsers();
+        const apiUrl = `http://127.0.0.1:8080/users/${user.uuid}`;
+  
+        this.http.delete(apiUrl).subscribe({
+          next: () => {
+            console.log('User deleted successfully');
+            this.toastService.success('User deleted successfully');
+            this.loadUsers();
+          },
+          error: (error) => {
+            console.error('Error deleting user:', error);
+          }
+        });
+      } else {
+        console.log('User deletion cancelled');
       }
     });
   }
+  
 }
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index b3596bc..bf73852 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -3,7 +3,7 @@ import { DataService } from './data.service';
 import { ClientCollection, UnidadOrganizativa } from './model';
 import { MatDialog } from '@angular/material/dialog';
 import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
-import { DeleteModalComponent } from './delete-modal/delete-modal.component';
+import { DeleteModalComponent } from '../../shared/delete_modal/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';
diff --git a/ogWebconsole/src/app/components/ogboot/images/images.component.ts b/ogWebconsole/src/app/components/ogboot/images/images.component.ts
index dd0de7f..0d75bc0 100644
--- a/ogWebconsole/src/app/components/ogboot/images/images.component.ts
+++ b/ogWebconsole/src/app/components/ogboot/images/images.component.ts
@@ -9,6 +9,7 @@ import {PageEvent} from "@angular/material/paginator";
 import {ToastrService} from "ngx-toastr";
 import { DatePipe } from "@angular/common";
 import { DeleteImageComponent } from './delete-image/delete-image/delete-image.component';
+import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
 
 @Component({
   selector: 'app-images',
@@ -152,7 +153,7 @@ export class ImagesComponent implements OnInit {
   }
 
   deleteImage(image: any): void {
-    const dialogRef = this.dialog.open(DeleteImageComponent, {
+    const dialogRef = this.dialog.open(DeleteModalComponent, {
       width: '300px',
       data: { name: image.name } 
     });
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css
new file mode 100644
index 0000000..4525d20
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css
@@ -0,0 +1,4 @@
+.full-width {
+    width: 100%;
+  }
+  
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html
new file mode 100644
index 0000000..c3ff12a
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html
@@ -0,0 +1,27 @@
+<h2 mat-dialog-title>Añadir configuración de red</h2>
+<mat-dialog-content>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Nombre</mat-label>
+    <input matInput [(ngModel)]="name" placeholder="Nombre de la subred">
+  </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Netmask</mat-label>
+    <input matInput [(ngModel)]="netmask" placeholder="Netmask">
+  </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Dirección IP</mat-label>
+    <input matInput [(ngModel)]="ipAddress" placeholder="Dirección IP">
+  </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Next Server</mat-label>
+    <input matInput [(ngModel)]="nextServer" placeholder="Next Server">
+  </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Boot File Name</mat-label>
+    <input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name">
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">Cancelar</button>
+  <button mat-button (click)="addNetworkConfig()" cdkFocusInitial>Añadir</button>
+</mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts
new file mode 100644
index 0000000..b7559cf
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateSubnetComponent } from './create-subnet.component';
+
+describe('CreateSubnetComponent', () => {
+  let component: CreateSubnetComponent;
+  let fixture: ComponentFixture<CreateSubnetComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateSubnetComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateSubnetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts
new file mode 100644
index 0000000..8853c6f
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts
@@ -0,0 +1,55 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-create-subnet',
+  templateUrl: './create-subnet.component.html',
+  styleUrls: ['./create-subnet.component.css']
+})
+export class CreateSubnetComponent implements OnInit {
+  name: string = '';
+  netmask: string = '';
+  ipAddress: string = '';
+  nextServer: string = '';
+  bootFileName: string = '';
+
+  constructor(
+    private toastService: ToastrService,
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<CreateSubnetComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit(): void {
+    
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  addNetworkConfig(): void {
+    const payload = {
+      name: this.name,
+      netmask: this.netmask,
+      ipAddress: this.ipAddress,
+      nextServer: this.nextServer,
+      bootFileName: this.bootFileName
+    };
+
+    this.http.post('http://127.0.0.1:8080/subnets', payload)
+      .subscribe({
+        next: (response) => {
+          console.log('Success:', response);
+          this.toastService.success('Configuración de red añadida exitosamente');
+          this.dialogRef.close(); 
+        },
+        error: (error) => {
+          console.error('Error:', error);
+          this.toastService.error('Error al añadir la configuración de red');
+        }
+      });
+  }
+}
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css
new file mode 100644
index 0000000..1ae51cc
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css
@@ -0,0 +1,109 @@
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100px;
+    padding: 10px;
+}
+
+.title {
+    font-size: 24px;
+}
+
+.images-button-row {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+
+button {
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+
+.divider {
+    margin: 20px 0;
+}
+
+.lists-container {
+    padding: 16px;
+}
+
+.imagesLists-container {
+    flex: 1;
+}
+
+.card.unidad-card {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.image-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    border-bottom: 1px solid rgba(122, 122, 122, 0.555);
+}
+
+.image-container h4 {
+    margin: 0;
+    flex: 1;
+}
+
+.mat-icon-button {
+    margin-left: 16px;
+    align-self: center;
+}
+
+.mat-menu {
+    min-width: 160px;
+}
+
+ .image-name{
+    cursor: pointer;
+ }
+
+table {
+  width: 100%;
+  margin-top: 50px;
+}
+
+.header-container {
+  margin-top: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-container h1 {
+  margin: 0;
+}
+
+.mat-elevation-z8 {
+  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+}
+
+.paginator-container {
+  display: flex;
+  justify-content: end;
+  margin-bottom: 30px;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
+  margin-left: 8px;
+}
+
+.example-button-row {
+  display: table-cell;
+  max-width: 600px;
+}
+
+.example-button-row .mat-mdc-button-base {
+  margin: 8px 8px 8px 0;
+}
+
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
new file mode 100644
index 0000000..3a60696
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
@@ -0,0 +1,79 @@
+<mat-accordion class="example-headers-align">
+    <mat-expansion-panel hideToggle>
+      <mat-expansion-panel-header>
+        <mat-panel-title> Información de Subnets </mat-panel-title>
+        <mat-panel-description>
+          <mat-icon [style.color]="getIcon().color">{{ getIcon().name }}</mat-icon>
+        </mat-panel-description>
+      </mat-expansion-panel-header>
+      <p *ngIf="alertMessage">Subnets sincronizadas: {{ alertMessage }}</p>
+      <p *ngIf="alertMessage">Número de subnets en base de datos: {{ length }}</p>
+  
+      <div class="example-button-row">
+        <button mat-flat-button color="primary" (click)="syncSubnets()"> Sincronizar Subnets</button>
+      </div>
+    </mat-expansion-panel>
+  </mat-accordion>
+  
+  <div class="header-container">
+    <h2 class="title" i18n="@@subnetsTitle">Administrar Subnets</h2>
+    <div class="subnets-button-row">
+      <button mat-flat-button color="primary" (click)="addSubnet()">Añadir Subnet</button>
+    </div>
+  </div>
+  <mat-divider class="divider"></mat-divider>
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
+      <td mat-cell *matCellDef="let subnet">
+        
+        <!-- Mostrar otros campos normalmente -->
+        <ng-container *ngIf="column.columnDef === 'name'">
+          {{ subnet.name }}
+        </ng-container>
+  
+        <ng-container *ngIf="column.columnDef === 'netmask'">
+          {{ subnet.netmask }}
+        </ng-container>
+  
+        <ng-container *ngIf="column.columnDef === 'ipAddress'">
+          {{ subnet.ipAddress }}
+        </ng-container>
+  
+        <ng-container *ngIf="column.columnDef === 'nextServer'">
+          {{ subnet.nextServer }}
+        </ng-container>
+  
+        <ng-container *ngIf="column.columnDef === 'bootFileName'">
+          {{ subnet.bootFileName }}
+        </ng-container>
+  
+      </td>
+    </ng-container>
+  
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions">Acciones</th>
+      <td mat-cell *matCellDef="let subnet">
+        <button mat-icon-button color="primary" (click)="editSubnet(subnet)" i18n="@@editSubnet"> <mat-icon>edit</mat-icon></button>
+        <button mat-icon-button color="warn" (click)="deleteSubnet(subnet)"><mat-icon>delete</mat-icon></button>
+        <!-- <button mat-icon-button [matMenuTriggerFor]="menu">
+          <mat-icon>menu</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+          <button mat-menu-item (click)="deleteSubnet(subnet)">Eliminar</button>
+        </mat-menu> -->
+      </td>
+    </ng-container>
+  
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  </table>
+  <div class="paginator-container">
+    <mat-paginator [length]="length"
+                   [pageSize]="itemsPerPage"
+                   [pageIndex]="page"
+                   [pageSizeOptions]="pageSizeOptions"
+                   (page)="onPageChange($event)">
+    </mat-paginator>
+  </div>
+  
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts
new file mode 100644
index 0000000..39d8757
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OgDhcpSubnetsComponent } from './og-dhcp-subnets.component';
+
+describe('OgDhcpSubnetsComponent', () => {
+  let component: OgDhcpSubnetsComponent;
+  let fixture: ComponentFixture<OgDhcpSubnetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OgDhcpSubnetsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OgDhcpSubnetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts
new file mode 100644
index 0000000..99fff32
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts
@@ -0,0 +1,126 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { CreateSubnetComponent } from './create-subnet/create-subnet/create-subnet.component';
+import { MatDialog } from '@angular/material/dialog';
+import { HttpClient } from '@angular/common/http';
+import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
+import { ToastrService } from 'ngx-toastr';
+
+export interface Subnet {
+  '@id': string;
+  '@type': string;
+  name: string;
+  netmask: string;
+  ipAddress: string;
+  nextServer: string;
+  bootFileName: string;
+  createdAt: string;
+  createdBy: string;
+  uuid: string;
+  id: number;
+}
+
+@Component({
+  selector: 'app-og-dhcp-subnets',
+  templateUrl: './og-dhcp-subnets.component.html',
+  styleUrls: ['./og-dhcp-subnets.component.css']
+})
+export class OgDhcpSubnetsComponent  {
+
+  displayedColumns: string[] = ['name', 'netmask', 'ipAddress', 'nextServer', 'bootFileName', 'actions'];
+  dataSource = new MatTableDataSource<Subnet>([]);
+  length = 0;
+  itemsPerPage: number = 10;
+  page = 0;
+  pageSizeOptions: number[] = [5, 10, 20];
+  alertMessage: string | null = null;
+
+  @ViewChild(MatPaginator) paginator: MatPaginator | undefined;
+  
+  columns = [
+    { columnDef: 'name', header: 'Name', cell: (subnet: Subnet) => subnet.name },
+    { columnDef: 'netmask', header: 'Netmask', cell: (subnet: Subnet) => subnet.netmask },
+    { columnDef: 'ipAddress', header: 'IP Address', cell: (subnet: Subnet) => subnet.ipAddress },
+    { columnDef: 'nextServer', header: 'Next Server', cell: (subnet: Subnet) => subnet.nextServer },
+    { columnDef: 'bootFileName', header: 'Boot File Name', cell: (subnet: Subnet) => subnet.bootFileName },
+  ];
+
+  constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService) {}
+
+  ngOnInit() {
+    this.loadSubnets();
+  }
+
+  loadSubnets() {
+    this.http.get<any>(`http://127.0.0.1:8080/subnets?page=1&itemsPerPage=${this.itemsPerPage}`).subscribe({
+      next: (response) => {
+        this.dataSource.data = response['hydra:member'];
+        this.length = response['hydra:totalItems'];
+      },
+      error: error => {
+        console.error('Error al cargar plantillas PXE:', error);
+      }
+    });
+
+    if (this.paginator) {
+      this.dataSource.paginator = this.paginator;
+    }
+  }
+
+  syncSubnets() {
+    console.log('Sincronizando subnets...');
+  }
+
+  addSubnet() {
+    console.log('Añadiendo nueva subnet...');
+    const dialogRef = this.dialog.open(CreateSubnetComponent, {
+      width: '400px'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+    });
+  }
+
+  editSubnet(subnet: Subnet) {
+    console.log('Editando subnet:', subnet);
+  }
+
+  deleteSubnet(subnet: Subnet): void {
+    console.log(subnet);
+    const dialogRef = this.dialog.open(DeleteModalComponent, {
+      width: '300px',
+      data: { name: subnet.name }
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        const apiUrl = `http://127.0.0.1:8080${subnet['@id']}`;
+        
+        this.http.delete(apiUrl).subscribe({
+          next: () => {
+            console.log('Subnet deleted successfully');
+            this.dataSource.data = this.dataSource.data.filter(s => s !== subnet);
+            this.length = this.dataSource.data.length;
+            this.toastService.success('Subnet deleted successfully');
+          },
+          error: (error) => {
+            console.error('Error deleting subnet:', error);
+          }
+        });
+      } else {
+        console.log('Subnet deletion cancelled');
+      }
+    });
+  }
+
+  onPageChange(event: any) {
+    this.page = event.pageIndex;
+    this.itemsPerPage = event.pageSize;
+  }
+
+  getIcon() {
+    return { name: 'info', color: 'blue' };
+  }
+}
diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.css b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html
new file mode 100644
index 0000000..d680125
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.html
@@ -0,0 +1 @@
+<p>ogdhcp works!</p>
diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts
new file mode 100644
index 0000000..0ab958d
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OgdhcpComponent } from './ogdhcp.component';
+
+describe('OgdhcpComponent', () => {
+  let component: OgdhcpComponent;
+  let fixture: ComponentFixture<OgdhcpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [OgdhcpComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OgdhcpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts
new file mode 100644
index 0000000..a8ee1b5
--- /dev/null
+++ b/ogWebconsole/src/app/components/ogdhcp/ogdhcp.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-ogdhcp',
+  templateUrl: './ogdhcp.component.html',
+  styleUrl: './ogdhcp.component.css'
+})
+export class OgdhcpComponent {
+
+}
diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css
new file mode 100644
index 0000000..470356d
--- /dev/null
+++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.css
@@ -0,0 +1,29 @@
+mat-dialog-content {
+    font-size: 16px;
+    margin-bottom: 20px;
+    color: #555; /* Color de texto más suave */
+  }
+  
+  mat-dialog-actions {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end; /* Alineación a la derecha */
+  }
+  
+  button[mat-button] {
+    margin-left: 8px; /* Espacio entre los botones */
+  }
+  
+  button[mat-button]:first-child {
+    color: #757575; /* Color para el botón de cancelar */
+  }
+  
+  button[mat-raised-button] {
+    box-shadow: none;
+  }
+  
+  strong {
+    font-weight: bold;
+    color: #000; /* Color de texto más fuerte para el nombre del elemento */
+  }
+  
\ No newline at end of file
diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html
new file mode 100644
index 0000000..bd1b25f
--- /dev/null
+++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.html
@@ -0,0 +1,10 @@
+<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
+<div mat-dialog-content>
+  <p i18n="@@deleteConfirmationMessage">
+    ¿Estás seguro que deseas eliminar <strong>{{ data.name }}</strong>?
+  </p>
+</div>
+<div mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
+  <button mat-raised-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
+</div>
diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts
new file mode 100644
index 0000000..30f4266
--- /dev/null
+++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteModalComponent } from './delete-modal.component';
+
+describe('DeleteModalComponent', () => {
+  let component: DeleteModalComponent;
+  let fixture: ComponentFixture<DeleteModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeleteModalComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeleteModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts
new file mode 100644
index 0000000..d3cf678
--- /dev/null
+++ b/ogWebconsole/src/app/shared/delete_modal/delete-modal/delete-modal.component.ts
@@ -0,0 +1,22 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-delete-modal',
+  templateUrl: './delete-modal.component.html',
+  styleUrl: './delete-modal.component.css'
+})
+export class DeleteModalComponent {
+  constructor(
+    public dialogRef: MatDialogRef<DeleteModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { name: string }
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close(false);
+  }
+
+  onYesClick(): void {
+    this.dialogRef.close(true);
+  }
+}
diff --git a/ogWebconsole/tsconfig.json b/ogWebconsole/tsconfig.json
index f37b67f..4b332f9 100644
--- a/ogWebconsole/tsconfig.json
+++ b/ogWebconsole/tsconfig.json
@@ -1,4 +1,3 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {