diff --git a/frontend/src/app/components/agregar-res/agregar-res.component.html b/frontend/src/app/components/agregar-res/agregar-res.component.html
index 187ef67..ee4c720 100644
--- a/frontend/src/app/components/agregar-res/agregar-res.component.html
+++ b/frontend/src/app/components/agregar-res/agregar-res.component.html
@@ -1,12 +1,33 @@
-<table *ngIf="restaurante">
-  <tr>
+<table class="table" *ngIf="restaurante" border="1">
+  <thead>
+  <tr >
     <td>id</td><td>nombre</td><td>creacion</td><td>modificacion</td>
   </tr>
-  <tr  *ngFor="let r of restaurante.data">
+  </thead>
+  <tbody>
+  <tr *ngFor="let r of restaurante.data">
     <td>{{r.id}}</td>
     <td>{{r.nombre}}</td>
     <td>{{r['created_at']}}</td>
     <td>{{r['updated_at']}}</td>
-  </tr>
-</table>
+
+  </tr>
+  </tbody>
+
+</table>
+<div>
+
+  <p>
+    nombre:<input type="text" [(ngModel)]="agre.nombre">
+  </p>
+  <p><button (click)="agregarRes()">agregar</button></p>
+  <p><button (click)="eliminarRes('6205091c-f172-424e-908c-f3c4bde39a9b')">elimiminar</button></p>
+  <p><button (click)="modificarRes('59323ad5-b0e5-45a2-8a2b-696f275ef209')">modificar</button></p>
+
+</div>
+
+
+
+
+
 
diff --git a/frontend/src/app/components/agregar-res/agregar-res.component.ts b/frontend/src/app/components/agregar-res/agregar-res.component.ts
index 3232bf5..1dc1a6f 100644
--- a/frontend/src/app/components/agregar-res/agregar-res.component.ts
+++ b/frontend/src/app/components/agregar-res/agregar-res.component.ts
@@ -10,6 +10,11 @@ export class AgregarResComponent implements OnInit {
 
   restaurante: any;
 
+  agre={
+     nombre:null
+
+  }
+
   constructor(private restaurantServ : RestaurantesService) { }
 
   ngOnInit(): void {
@@ -19,6 +24,22 @@ export class AgregarResComponent implements OnInit {
   recuperartodos(){
     this.restaurantServ.mostrarTodosRes().subscribe(result => this.restaurante = result);
   }
+  agregarRes(){
+    this.restaurantServ.agregar(this.agre).subscribe(this.recuperartodos)
+  }
+  eliminarRes(id:any){
+    console.log(id);
+    this.restaurantServ.eliminar(id).subscribe()
+
+  }
+  modificarRes(id:any){
+    console.log(id,this.agre)
+
+    this.restaurantServ.modificar(id,this.agre).subscribe();
+  }
+
+
+
   hayregistro(){
     return true;
   }
diff --git a/frontend/src/app/restaurantes.service.ts b/frontend/src/app/restaurantes.service.ts
index e0b53fa..ee5276e 100644
--- a/frontend/src/app/restaurantes.service.ts
+++ b/frontend/src/app/restaurantes.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import {HttpClient} from "@angular/common/http";
+import {HttpClient, HttpHeaders} from "@angular/common/http";
 
 @Injectable({
   providedIn: 'root'
@@ -14,4 +14,22 @@ export class RestaurantesService {
   mostrarTodosRes(){
     return this.http.get(`${this.url}/restaurantes`);
   }
+
+  agregar(AgreRestaurant:any){
+    const headers: HttpHeaders = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.post(`${this.url}/restaurantes`, JSON.stringify(AgreRestaurant),{ headers: headers });
+  }
+  eliminar(codigo:any){
+    return this.http.delete(`${this.url}/restaurantes/${codigo}`);
+  }
+  modificar(codigo:any,ModificarRes:any){
+    const headers: HttpHeaders = new HttpHeaders({
+      'Content-Type': 'application/json'
+    });
+    return this.http.put(`${this.url}/restaurantes/${codigo}`, JSON.stringify(ModificarRes),{ headers: headers });
+  }
+
+
 }