diff --git a/TestTableFile.pdf b/TestTableFile.pdf
index 49ae49d..407c3d1 100644
Binary files a/TestTableFile.pdf and b/TestTableFile.pdf differ
diff --git a/src/main/java/com/foodieparty/fodieParty/RestauranteFoodiePartyApplication.java b/src/main/java/com/foodieparty/fodieParty/RestauranteFoodiePartyApplication.java
index 0ebeef4..2e7dcdd 100644
--- a/src/main/java/com/foodieparty/fodieParty/RestauranteFoodiePartyApplication.java
+++ b/src/main/java/com/foodieparty/fodieParty/RestauranteFoodiePartyApplication.java
@@ -45,20 +45,22 @@ public CommandLineRunner initData(
 			usuarioRepositorio.save(juan);
 			Usuario daniel = new Usuario("daniel", "lopez", "dlopez1591@gmail.com", passwordEncoder.encode("daniel123"), "123456");
 			usuarioRepositorio.save(daniel);
-			Bebida bebida1 = new Bebida("Agua","botellita de agua","urlImagen", TipoBebida.AGUA,40,100.0);
-			Bebida bebida2 = new Bebida("Birra","vaso de birra","urlImagen", TipoBebida.ALCOHOLICA,40,350.0);
+			Bebida bebida1 = new Bebida("Jugo","Jugo de naranja natural",
+					"https://firebasestorage.googleapis.com/v0/b/delicatezza-20007.appspot.com/o/42bb3965-1df3-47cf-a0d4-cb436a9601a2.jpg?alt=media", TipoBebida.AGUA,40,100.0);
+			Bebida bebida2 = new Bebida("Birra","vaso de birra ipa",
+					"https://firebasestorage.googleapis.com/v0/b/delicatezza-20007.appspot.com/o/9b789c94-465b-48c5-b9d3-7fb22d24c3f0.jpg?alt=media", TipoBebida.ALCOHOLICA,40,350.0);
 			bebidaRepositorio.save(bebida1);
 			bebidaRepositorio.save(bebida2);
-			Comida comida1 = new Comida("Panchito","ia tu sabe", TipoComida.PRINCIPAL,250.0,"urlImagen",true);
-			Comida comida2 = new Comida("Burguer","con doble soque", TipoComida.PRINCIPAL,450.0,"urlImagen",true);
+			Comida comida1 = new Comida("Panchito","Panchito con adereso y papitas", TipoComida.PRINCIPAL,250.0,
+					"https://firebasestorage.googleapis.com/v0/b/delicatezza-20007.appspot.com/o/dead24cf-2065-4e92-9ba4-27ed2b9c42e7.jpg?alt=media",true);
+			Comida comida2 = new Comida("Burguer","Hamburguesa Doble Queso", TipoComida.PRINCIPAL,450.0,
+					"https://firebasestorage.googleapis.com/v0/b/delicatezza-20007.appspot.com/o/0e97cb9c-4252-4875-9143-658e39d91ff3.jpg?alt=media",true);
 			comidaRepositorio.save(comida1);
 			comidaRepositorio.save(comida2);
-
 			Comida postre1 = new Comida ("Helado","bochita",TipoComida.POSTRE,500.0,
 					"https://firebasestorage.googleapis.com/v0/b/delicatezza-20007.appspot.com/o/6f171418-8f6d-46e5-b15a-d677df87f102.jpg?alt=media",true);
 			Comida postre2 = new Comida ("Flan","un flansito",TipoComida.POSTRE,800.0,
 					"https://firebasestorage.googleapis.com/v0/b/delicatezza-20007.appspot.com/o/caa98a39-ea5a-4173-b514-c3c1b66fb500.jpg?alt=media",true);
-
 			comidaRepositorio.save(postre1);
 			comidaRepositorio.save(postre2);
 
diff --git a/src/main/resources/static/web/assets/scripts/menu.js b/src/main/resources/static/web/assets/scripts/menu.js
index 6f6932d..551cabf 100644
--- a/src/main/resources/static/web/assets/scripts/menu.js
+++ b/src/main/resources/static/web/assets/scripts/menu.js
@@ -8,8 +8,22 @@ createApp({
        postre: undefined,
        bebidas: undefined,
        cantidadSolicitada: 1,
-       comidaEnMesa: undefined,
-       listitaPedido: undefined,
+       comidaEnMesa: {
+        "id": 1,
+       "nombre": "Panchito",
+       "description": "ia tu sabe",
+       "tipoComida": "PRINCIPAL",
+       "precio": 250.0,
+       "imagen": "urlImagen",
+       "disponibilidad": true},
+       listitaPedido: [],
+       listaComidasId: [],
+       listaBebidasId: [],
+       tipoRetiro: undefined,
+        direccion: undefined,
+        total: 0,
+        number: undefined,
+        cvv: undefined
       }
     },
     created(){
@@ -42,24 +56,78 @@ createApp({
         console.log("comida en mesa: ",this.comidaEnMesa.nombre,
                     " | id de la comida",this.comidaEnMesa.id)
       },
-      añadirAlCarrito(idComida,cantidadSolicitada){
-        console.log("idComida: ",idComida," | cantidad Solicitada: ", cantidadSolicitada)
-        let miniPedido = [ idComida , cantidadSolicitada]
-        this.listitaPedido = this.listitaPedido + "," + miniPedido
 
-        if(this.listitaPedido.length==0){
-          this.listitaPedido = miniPedido
-        }else{
-          console.log(this.listitaPedido)
-        }
-
-        /* agregar a lista this.equis ++ array con productos?? */
-        
-        /* sweet con temporisador */
+      agregarComidas(idComida, cantidadSolicitada){
+        //console.log("idComida: ",idComida," | cantidad Solicitada: ", cantidadSolicitada)
+        let miniPedido = [idComida, cantidadSolicitada]
+        //console.log(miniPedido)
+        this.listaComidasId.push(miniPedido)
+        //console.log(this.listitaPedido)
+        this.total += this.comidaEnMesa.precio * cantidadSolicitada
+        this.listitaPedido.push(this.comidaEnMesa)
+        return this.listaComidasId
+      },
 
-      }
+      agregarBebidas(idBebida, cantidadSolicitada){
+        //console.log("idComida: ",idBebida," | cantidad Solicitada: ", cantidadSolicitada)
+        let miniPedido = [idBebida, cantidadSolicitada]
+        //console.log(miniPedido)
+        this.listaBebidasId.push(miniPedido)
+        //console.log(this.listaBebidasId)
+        this.total += this.comidaEnMesa.precio * cantidadSolicitada
+        this.listitaPedido.push(this.comidaEnMesa)
+        return this.listaBebidasId
+      },
 
+      crearPedido(){
+        console.log(this.total)
+        console.log(this.listaComidasId,this.listaBebidasId)
+       axios.post("/api/crear/pedido/usuario",{"tipoRetiro":this.tipoRetiro,"direccion":this.direccion,"listaComidasId":this.listaComidasId,"listaBebidasId":this.listaBebidasId})
+        .then(
+          axios.post("https://mindhub-brother-homebanking-production.up.railway.app/api/card/payment",{
+            "cardNumber":this.number,
+            "cardCvv":this.cvv,
+            "operationAmount":this.total,
+            "operationDescription":"Delicatezza payment"
+        }))
+        .then(
+          Swal.fire({
+            position: 'midle',
+            icon: 'success',
+            color: 'var(--bs-highlight-bg)',
+            background: '#000000c1',
+            text: 'Pedido realizado con exito',
+            showConfirmButton: true,
+            confirmButtonText: 'ir a mis pedidos',
+            })
+            .then((result) => {
+              if (result.isConfirmed) {
+                window.location.href = '/web/pedidos.html';
+              }
+            })
+          )
+        .catch(error => {
+            console.log(error)
+            this.error = error.response.data.message; 
+            console.log(error.response.data)
+            Swal.fire({
+                icon: 'error',
+                title: 'Oops...',
+                text: error.response.data
+                
+              })
+        });
+      },
     }
   }).mount('#app')
 
-
+    /* sweet con temporisador */
+ /*    Swal.fire({
+      position: 'midle',
+      icon: 'success',
+      color: 'var(--bs-highlight-bg)',
+      background: '#000000c1',
+      text: 'agregaste un producto a tu carrito',
+      showConfirmButton: false,
+      timer: 2000
+  }) */
\ No newline at end of file
diff --git a/src/main/resources/static/web/assets/styles/reserva.css b/src/main/resources/static/web/assets/styles/reserva.css
index 9afb72e..f41aa60 100644
--- a/src/main/resources/static/web/assets/styles/reserva.css
+++ b/src/main/resources/static/web/assets/styles/reserva.css
@@ -742,7 +742,11 @@ nav .material-symbols-outlined{
 .formula2{
     max-width: 60%;
 }
-
+.active-1{
+    color: rgba(236, 217, 45, 0.861) !important;
+    box-shadow: rgba(236, 217, 45, 0.861) -1px -4px 43px;
+    border: 1px solid rgba(236, 217, 45, 0.861);
+}
 
 
 @media (max-width: 650px) {
diff --git a/src/main/resources/static/web/index.html b/src/main/resources/static/web/index.html
index f4be7ba..851e8bc 100644
--- a/src/main/resources/static/web/index.html
+++ b/src/main/resources/static/web/index.html
@@ -49,7 +49,7 @@
                                     <a class="nav-link" href="./menu.html"><i class="bi bi-egg-fried"></i>Menu</a>
                                 </li>
                                 <li class="nav-item button" type="button">
-                                    <a class="nav-link" href="#"><i class="bi bi-check2-circle"></i> Reserva</a>
+                                    <a class="nav-link" href="./reserva.html"><i class="bi bi-check2-circle"></i> Reserva</a>
                                 </li>
                                 <button type="button" class="nav-item button " data-bs-toggle="modal"
                                     data-bs-target="#staticBackdrop">
diff --git a/src/main/resources/static/web/menu.html b/src/main/resources/static/web/menu.html
index 474dbc3..ea012eb 100644
--- a/src/main/resources/static/web/menu.html
+++ b/src/main/resources/static/web/menu.html
@@ -56,16 +56,16 @@
                 <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                   <ul class="navbar-nav gap-3">
                     <li class="nav-item button" type="button">
-                      <a class="nav-link " href="/index.html"><i class="bi bi-house"></i> Inicio</a>
+                      <a class="nav-link " href="./index.html"><i class="bi bi-house"></i> Inicio</a>
                     </li>
                     <li class="nav-item button" type="button">
                       <a class="nav-link active active-1" href="#"><i class="bi bi-egg-fried"></i>Menu</a>
                     </li>
                     <li class="nav-item button" type="button">
-                      <a class="nav-link" href="#"><i class="bi bi-check2-circle"></i> Reserva</a>
+                      <a class="nav-link" href="./reserva.html"><i class="bi bi-check2-circle"></i> Reserva</a>
                     </li>
                     <li class="nav-item button" type="button">
-                      <a class="nav-link" href="/pedidos.html"><i class="bi bi-check2-circle"></i> Pedidos</a>
+                      <a class="nav-link" href="./pedidos.html"><i class="bi bi-check2-circle"></i> Pedidos</a>
                     </li>
                     <button type="button" class="nav-item button " data-bs-toggle="modal"
                       data-bs-target="#staticBackdrop">
@@ -94,27 +94,20 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Carrito de Compras</h1>
                 <div class="modal-body">
                   pum babe
                   <ul>
-                    <li class="item-carrito d-flex justify-content-between">
-                      <div>blablabla</div>
-                      <div>$ 3333</div>
-                    </li>
-                    <li class="item-carrito d-flex justify-content-between">
-                      <div>blablabla</div>
-                      <div>$ 3333</div>
-                    </li>
-                    <li class="item-carrito d-flex justify-content-between">
-                      <div>blablabla</div>
-                      <div>$ 3333</div>
+                    <li v-for="item of listitaPedido" class="item-carrito d-flex justify-content-between">
+                      <div>{{item.nombre}}</div>
+                      <div>$ {{item.precio}} c/u</div>
                     </li>
                   </ul>
                 </div>
                 <div class="total-carrito d-flex justify-content-end me-2 mb-3">
-                  El total de tu compra es: $ 33333
+                  El total de tu compra es: $ {{total}}
                 </div>
                 <div class="modal-footer">
                   <button type="button" class="btn btn-outline-warning btn-comida" data-bs-dismiss="modal">Seguir
                     comprando</button>
-                  <button type="button" class="btn btn-outline-warning btn-comida">Abonar</button>
+                  <button type="button" class="btn btn-outline-warning btn-comida" data-bs-toggle="modal"
+                    data-bs-target="#crearPedido">Crear Pedido</button>
                 </div>
               </div>
             </div>
@@ -126,34 +119,138 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Carrito de Compras</h1>
           </button>
 
           <!-- cantidad comida modal -->
-      <!-- Modal -->
-      <div class="modal fade" id="agregar" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
-      aria-labelledby="staticBackdropLabel" aria-hidden="true">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h1 class="modal-title fs-5" id="exampleModalLabel">
-              Tu Producto <span class="material-symbols-outlined">fastfood</span></h1>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-          </div>
-          <div class="modal-body">
-            <label class="cantidadDeComida">Indica la cantidad: <br>
-              <input v-model="cantidadSolicitada" id="numero" type="number" min="1" pattern="^[0-9]+"
-                placeholder=" Cantidad que desea">
-            </label>
-            <div>
-              resumen: <p v-if="comidaEnMesa!='undefined'">{{comidaEnMesa}}</p>
+          <!-- Modal -->
+          <div class="modal fade" id="agregarComida" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+            aria-labelledby="staticBackdropLabel" aria-hidden="true">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h1 class="modal-title fs-5" id="exampleModalLabel">
+                    Tu Producto <span class="material-symbols-outlined">fastfood</span></h1>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                  <label class="cantidadDeComida">Indica la cantidad: <br>
+                    <input v-model="cantidadSolicitada" id="numero" type="number" min="1" pattern="^[0-9]+"
+                      placeholder=" Cantidad que desea">
+                  </label>
+                  <div>
+                    <h5>Resumen del producto por Unidad:</h5>
+                    <p> Nombre: {{comidaEnMesa.nombre}}</p>
+                    <p> Descripcion: {{comidaEnMesa.description}}</p>
+                     <p> Precio: {{comidaEnMesa.precio}}</p>
+                    </div>
+
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
+                  <button type="button" class="btn btn-outline-warning" data-bs-dismiss="modal"
+                    @click="agregarComidas(comidaEnMesa.id, cantidadSolicitada)">Aceptar</button>
+                </div>
+              </div>
             </div>
+          </div>
+          <!-- cantidad comida modal -->
+          <!-- Modal -->
+          <div class="modal fade" id="agregarBebida" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
+            aria-labelledby="staticBackdropLabel" aria-hidden="true">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h1 class="modal-title fs-5" id="exampleModalLabel">
+                    Tu Producto <span class="material-symbols-outlined">fastfood</span></h1>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                  <label class="cantidadDeComida">Indica la cantidad: <br>
+                    <input v-model="cantidadSolicitada" id="numero" type="number" min="1" pattern="^[0-9]+"
+                      placeholder=" Cantidad que desea">
+                  </label>
+                  <div>
+                    <h5>Resumen del producto por Unidad:</h5>
+                    <p> Nombre: {{comidaEnMesa.nombre}}</p>
+                    <p v-if="comidaEnMesa.tipoComida"> Descripcion: {{comidaEnMesa.description}}</p>
+                    <p v-if="comidaEnMesa.tipoBebida"> Descripcion: {{comidaEnMesa.descripcion}}</p> 
+                    <p> Precio: {{comidaEnMesa.precio}}</p>
+                  </div>
 
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
+                  <button type="button" class="btn btn-outline-warning" data-bs-dismiss="modal"
+                    @click=" agregarBebidas(comidaEnMesa.id, cantidadSolicitada)">Aceptar</button>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
-            <button type="button" class="btn btn-outline-warning"
-              @click="añadirAlCarrito(comidaEnMesa.id,cantidadSolicitada)">Aceptar</button>
+
+          <!-- Modal carrito-->
+          <div class="modal fade modal-carrito" id="crearPedido" tabindex="-1" aria-labelledby="exampleModalLabel"
+            aria-hidden="true">
+            <div class="modal-dialog fondo-modal">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h1 class="modal-title fs-5" id="exampleModalLabel">Realizar Pedido</h1>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                  <form @submit.prevent>
+                    <p>
+                      Tipo de retiro:
+                    </p>
+                    <p>
+                    <div class="form-check">
+                      <input v-model="tipoRetiro" value="LOCAL" class="form-check-input" type="radio"
+                        name="flexRadioDefault" id="flexRadioDefault1" checked>
+                      <label class="form-check-label" for="flexRadioDefault1">
+                        LOCAL
+                      </label>
+                    </div>
+                    <div class="form-check">
+                      <input v-model="tipoRetiro" value="DOMICILIO" class="form-check-input" type="radio"
+                        name="flexRadioDefault" id="flexRadioDefault2">
+                      <label class="form-check-label" for="flexRadioDefault2">
+                        DOMICILIO
+                      </label>
+                    </div>
+                    <div class="form-check">
+                      <input v-model="tipoRetiro" value="RETIRO" class="form-check-input" type="radio"
+                        name="flexRadioDefault" id="flexRadioDefault1">
+                      <label class="form-check-label" for="flexRadioDefault1">
+                        RETIRO
+                      </label>
+                    </div>
+                    </p>
+                    <div class="user-box">
+                      Direccion
+                      <input v-model="direccion" required="" name="" type="text">
+                    </div>
+
+                    <div class="mb-2 space2">
+                      Numero de tarjeta:
+                       <input type="text" v-model="number">
+                    </div>
+                    
+                    <div class="mb-2 space2" >
+                      Numero de cvv:
+                       <input type="text" v-model="cvv" >
+                    </div>
+
+                  </form>
+                </div>
+                <div class="total-carrito d-flex justify-content-end me-2 mb-3">
+                  El total de tu compra es: $ {{total}}
+                </div>
+                <div class="modal-footer">
+                  <button type="button" class="btn btn-outline-warning btn-comida" data-bs-dismiss="modal">
+                    Cancelar
+                  </button>
+                  <button type="button" class="btn btn-outline-warning btn-comida" @click="crearPedido">Crear Pedido
+                  </button>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </div>
 
           <!-- Navbar content -->
           <div class=" navbarcito d-flex flex-wrap justify-content-center">
@@ -196,7 +293,7 @@ <h5 class="card-title">{{comida.nombre}}</h5>
                         <h6 class="precio">Precio ${{comida.precio}}</h6>
                       </div>
                       <div><button type="button" class="btn btn-outline-warning btn-comida" data-bs-toggle="modal"
-                          data-bs-target="#agregar" v-on:click="alertAgregar(comida)">Agregar</button>
+                          data-bs-target="#agregarComida" v-on:click="alertAgregar(comida)">Agregar</button>
                       </div>
                     </div>
                   </div>
@@ -205,26 +302,28 @@ <h6 class="precio">Precio ${{comida.precio}}</h6>
             </div>
           </article>
 
-          <!-- guarnicion -->
+         
+
+          <!-- bebidas -->
 
-          <article id="guarnicion" class="seccionComida d-flex justify-content-center flex-column align-items-center">
+          <article id="bebidas" class="seccionComida d-flex justify-content-center flex-column align-items-center">
             <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" data-aos="fade-down-right">
-              Guarniciones</h2>
-            <div class="card mb-3" v-for="comida of guarnicion">
+              Bebidas</h2>
+            <div class="card mb-3" v-for="bebida of bebidas">
               <div class="row g-0">
                 <div class="col-md-4">
-                  <img :src="comida.imagen" class="img-comida img-fluid rounded-start" :alt="comida.nombre">
+                  <img :src="bebida.imagen" class="img-comida img-fluid rounded-start" :alt="bebida.nombre">
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
-                    <h5 class="card-title">{{comida.nombre}}</h5>
-                    <p class="card-text">{{comida.description}}</p>
+                    <h5 class="card-title">{{bebida.nombre}}</h5>
+                    <p class="card-text">{{bebida.descripcion}}</p>
                     <div class="d-flex justify-content-between">
                       <div>
-                        <h6 class="precio">Precio ${{comida.precio}}</h6>
+                        <h6 class="precio">Precio ${{bebida.precio}}</h6>
                       </div>
                       <div><button type="button" class="btn btn-outline-warning btn-comida" data-bs-toggle="modal"
-                          data-bs-target="#agregar" v-on:click="alertAgregar(comida)">Agregar</button>
+                          data-bs-target="#agregarBebida" v-on:click="alertAgregar(bebida)">Agregar</button>
                       </div>
                     </div>
                   </div>
@@ -233,26 +332,26 @@ <h6 class="precio">Precio ${{comida.precio}}</h6>
             </div>
           </article>
 
-           <!-- bebidas -->
+          <!-- postre -->
 
-           <article id="bebidas" class="seccionComida d-flex justify-content-center flex-column align-items-center">
+          <article id="postres" class="seccionComida d-flex justify-content-center flex-column align-items-center">
             <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" data-aos="fade-down-right">
-              Bebidas</h2>
-            <div class="card mb-3" v-for="bebida of bebidas">
+              Postres</h2>
+            <div class="card mb-3" v-for="comida of postre">
               <div class="row g-0">
                 <div class="col-md-4">
-                  <img :src="bebida.imagen" class="img-comida img-fluid rounded-start" :alt="bebida.nombre">
+                  <img :src="comida.imagen" class="img-comida img-fluid rounded-start" :alt="comida.nombre">
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
-                    <h5 class="card-title">{{bebida.nombre}}</h5>
-                    <p class="card-text">{{bebida.descripcion}}</p>
+                    <h5 class="card-title">{{comida.nombre}}</h5>
+                    <p class="card-text">{{comida.description}}</p>
                     <div class="d-flex justify-content-between">
                       <div>
-                        <h6 class="precio">Precio ${{bebida.precio}}</h6>
+                        <h6 class="precio">Precio ${{comida.precio}}</h6>
                       </div>
                       <div><button type="button" class="btn btn-outline-warning btn-comida" data-bs-toggle="modal"
-                          data-bs-target="#agregar" v-on:click="alertAgregar(bebida)">Agregar</button>
+                          data-bs-target="#agregarComida" v-on:click="alertAgregar(comida)">Agregar</button>
                       </div>
                     </div>
                   </div>
@@ -260,13 +359,13 @@ <h6 class="precio">Precio ${{bebida.precio}}</h6>
               </div>
             </div>
           </article>
-          
-          <!-- postre -->
 
-          <article id="postres" class="seccionComida d-flex justify-content-center flex-column align-items-center">
+           <!-- guarnicion -->
+
+           <article id="guarnicion" class="seccionComida d-flex justify-content-center flex-column align-items-center">
             <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" data-aos="fade-down-right">
-              Postres</h2>
-            <div class="card mb-3" v-for="comida of postre">
+              Guarniciones</h2>
+            <div class="card mb-3" v-for="comida of guarnicion">
               <div class="row g-0">
                 <div class="col-md-4">
                   <img :src="comida.imagen" class="img-comida img-fluid rounded-start" :alt="comida.nombre">
@@ -280,7 +379,7 @@ <h5 class="card-title">{{comida.nombre}}</h5>
                         <h6 class="precio">Precio ${{comida.precio}}</h6>
                       </div>
                       <div><button type="button" class="btn btn-outline-warning btn-comida" data-bs-toggle="modal"
-                          data-bs-target="#agregar" v-on:click="alertAgregar(comida)">Agregar</button>
+                          data-bs-target="#agregarComida" v-on:click="alertAgregar(comida)">Agregar</button>
                       </div>
                     </div>
                   </div>
@@ -288,7 +387,6 @@ <h6 class="precio">Precio ${{comida.precio}}</h6>
               </div>
             </div>
           </article>
-         
 
         </main>
 
@@ -329,49 +427,52 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Equipo de Desarrollo</h1>
                   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
-                  <a href="https://github.com/dlopez1591/Delicatezza" target="_blank"><img src="/assets/imgs/github.png"
+                  <a href="https://github.com/dlopez1591/Delicatezza" target="_blank">
+                    <img src="./assets/imgs/github.png"
                       alt=""></a>
                   <p> | Cohort FS041 Full Stack JAVA </p>
                   <div class="d-flex ">
-                    <a href="https://fdmarzialetti@gmail.com" target="_blank"><img src="/assets/imgs/gmail.png"
+                    <a href="https://fdmarzialetti@gmail.com" target="_blank">
+                      <img src="./assets/imgs/gmail.png"
                         alt=""></a> <a href="https://github.com/fdmarzialetti" target="_blank"><img
-                        src="/assets/imgs/github.png" alt=""></a> <a
+                        src="./assets/imgs/github.png" alt=""></a> <a
                       href="https://www.linkedin.com/in/fernando-daniel-marzialetti-b46b73201/" target="_blank"><img
-                        src="/assets/imgs/linkedin.png" alt=""></a>
+                        src="./assets/imgs/linkedin.png" alt=""></a>
                     <p>| Fernando Marzialetti</p>
                   </div>
 
                   <div class="d-flex ">
-                    <a href="https://matiasloiza10@gmail.com"><img src="/assets/imgs/gmail.png" alt=""
+                    <a href="https://matiasloiza10@gmail.com">
+                      <img src="./assets/imgs/gmail.png" alt=""
                         target="_blank"></a> <a href="https://github.com/matias9809" target="_blank"><img
-                        src="/assets/imgs/github.png" alt=""></a> <a
+                        src="./assets/imgs/github.png" alt=""></a> <a
                       href="https://www.linkedin.com/in/matias-loiza-79a313178/" target="_blank"><img
-                        src="/assets/imgs/linkedin.png" alt=""></a>
+                        src="./assets/imgs/linkedin.png" alt=""></a>
                     <p>| Matias Loiza</p>
 
                   </div>
                   <div class="d-flex ">
-                    <a href="https://joaquinfleitas71@gmail.com" target="_blank"><img src="/assets/imgs/gmail.png"
+                    <a href="https://joaquinfleitas71@gmail.com" target="_blank"><img src="./assets/imgs/gmail.png"
                         alt=""></a> <a href="https://github.com/joaquinfleitas" target="_blank"><img
-                        src="/assets/imgs/github.png" alt="" target="_blank"></a> <a
+                        src="./assets/imgs/github.png" alt="" target="_blank"></a> <a
                       href="https://www.linkedin.com/in/joaquin-fleitas-7b0222174/" target="_blank"><img
-                        src="/assets/imgs/linkedin.png" alt=""></a>
+                        src="./assets/imgs/linkedin.png" alt=""></a>
                     <p>| Joaquin Alain Fleitas</p>
                   </div>
                   <div class="d-flex ">
-                    <a href="dlopez1591@gmail.com" target="_blank"><img src="/assets/imgs/gmail.png" alt=""
+                    <a href="dlopez1591@gmail.com" target="_blank"><img src="./assets/imgs/gmail.png" alt=""
                         target="_blank"></a> <a href="https://github.com/dlopez1591" target="_blank"><img
-                        src="/assets/imgs/github.png" alt=""></a> <a
+                        src="./assets/imgs/github.png" alt=""></a> <a
                       href="https://www.linkedin.com/in/daniel-lopezayala/" target="_blank"><img
-                        src="/assets/imgs/linkedin.png" alt=""></a>
+                        src="./assets/imgs/linkedin.png" alt=""></a>
                     <p>| Daniel Lopez</p>
                   </div>
                   <div class="d-flex ">
-                    <a href="https://yasminledesma9@gmail.com" target="_blank"><img src="/assets/imgs/gmail.png"
+                    <a href="https://yasminledesma9@gmail.com" target="_blank"><img src="./assets/imgs/gmail.png"
                         alt=""></a> <a href="https://github.com/YasminLedesma" target="_blank"><img
-                        src="/assets/imgs/github.png" alt=""></a> <a
+                        src="./assets/imgs/github.png" alt=""></a> <a
                       href="https://www.linkedin.com/in/yasm%C3%ADn-ledesma-b3b5a7238/" target="_blank"><img
-                        src="/assets/imgs/linkedin.png" alt=""></a>
+                        src="./assets/imgs/linkedin.png" alt=""></a>
                     <p>| Yasmin Ledesma</p>
                   </div>
                 </div>
diff --git a/src/main/resources/static/web/pedidos.html b/src/main/resources/static/web/pedidos.html
index 393aae4..0cd57e9 100644
--- a/src/main/resources/static/web/pedidos.html
+++ b/src/main/resources/static/web/pedidos.html
@@ -20,7 +20,7 @@
 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/assets/styles/menu.css">
+    <link rel="stylesheet" href="./assets/styles/menu.css">
 </head>
 
 <body>
@@ -44,13 +44,13 @@
                     <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                         <ul class="navbar-nav gap-3">
                             <li class="nav-item button" type="button">
-                                <a class="nav-link " href="/index.html"><i class="bi bi-house"></i> Inicio</a>
+                                <a class="nav-link " href="./index.html"><i class="bi bi-house"></i> Inicio</a>
                             </li>
                             <li class="nav-item button" type="button">
-                                <a class="nav-link" href="/menu.html"><i class="bi bi-egg-fried"></i>Menu</a>
+                                <a class="nav-link" href="./menu.html"><i class="bi bi-egg-fried"></i>Menu</a>
                             </li>
                             <li class="nav-item button" type="button">
-                                <a class="nav-link" href="#"><i class="bi bi-check2-circle"></i> Reserva</a>
+                                <a class="nav-link" href="./reserva.html"><i class="bi bi-check2-circle"></i> Reserva</a>
                             </li>
                             <li class="nav-item button" type="button">
                                 <a class="nav-link active active-1" href="#"><i class="bi bi-check2-circle"></i> Pedidos</a>
@@ -154,48 +154,48 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Equipo de Desarrollo</h1>
                         </div>
                         <div class="modal-body">
                             <a href="https://github.com/dlopez1591/Delicatezza" target="_blank"><img
-                                    src="/assets/imgs/github.png" alt=""></a> | Cohort FS041 Full Stack JAVA </p>
+                                    src="./assets/imgs/github.png" alt=""></a> | Cohort FS041 Full Stack JAVA </p>
                             <div class="d-flex ">
                                 <a href="https://fdmarzialetti@gmail.com" target="_blank"><img
-                                        src="/assets/imgs/gmail.png" alt=""></a> <a
+                                        src="./assets/imgs/gmail.png" alt=""></a> <a
                                     href="https://github.com/fdmarzialetti" target="_blank"><img
-                                        src="/assets/imgs/github.png" alt=""></a> <a
+                                        src="./assets/imgs/github.png" alt=""></a> <a
                                     href="https://www.linkedin.com/in/fernando-daniel-marzialetti-b46b73201/"
-                                    target="_blank"><img src="/assets/imgs/linkedin.png" alt=""></a>
+                                    target="_blank"><img src="./assets/imgs/linkedin.png" alt=""></a>
                                 <p>| Fernando Marzialetti</p>
                             </div>
                             <div class="d-flex ">
-                                <a href="https://matiasloiza10@gmail.com"><img src="/assets/imgs/gmail.png" alt=""
+                                <a href="https://matiasloiza10@gmail.com"><img src="./assets/imgs/gmail.png" alt=""
                                         target="_blank"></a> <a href="https://github.com/matias9809"
-                                    target="_blank"><img src="/assets/imgs/github.png" alt=""></a> <a
+                                    target="_blank"><img src="./assets/imgs/github.png" alt=""></a> <a
                                     href="https://www.linkedin.com/in/matias-loiza-79a313178/" target="_blank"><img
-                                        src="/assets/imgs/linkedin.png" alt=""></a>
+                                        src="./assets/imgs/linkedin.png" alt=""></a>
                                 <p>| Matias Loiza</p>
                             </div>
                             <div class="d-flex ">
                                 <a href="https://joaquinfleitas71@gmail.com" target="_blank"><img
-                                        src="/assets/imgs/gmail.png" alt=""></a> <a
+                                        src="./assets/imgs/gmail.png" alt=""></a> <a
                                     href="https://github.com/joaquinfleitas" target="_blank"><img
-                                        src="/assets/imgs/github.png" alt="" target="_blank"></a> <a
+                                        src="./assets/imgs/github.png" alt="" target="_blank"></a> <a
                                     href="https://www.linkedin.com/in/joaquin-fleitas-7b0222174/" target="_blank"><img
-                                        src="/assets/imgs/linkedin.png" alt=""></a>
+                                        src="./assets/imgs/linkedin.png" alt=""></a>
                                 <p>| Joaquin Alain Fleitas</p>
                             </div>
                             <div class="d-flex ">
-                                <a href="dlopez1591@gmail.com" target="_blank"><img src="/assets/imgs/gmail.png" alt=""
+                                <a href="dlopez1591@gmail.com" target="_blank"><img src="./assets/imgs/gmail.png" alt=""
                                         target="_blank"></a> <a href="https://github.com/dlopez1591"
-                                    target="_blank"><img src="/assets/imgs/github.png" alt=""></a> <a
+                                    target="_blank"><img src="./assets/imgs/github.png" alt=""></a> <a
                                     href="https://www.linkedin.com/in/daniel-lopezayala/" target="_blank"><img
-                                        src="/assets/imgs/linkedin.png" alt=""></a>
+                                        src="./assets/imgs/linkedin.png" alt=""></a>
                                 <p>| Daniel Lopez</p>
                             </div>
                             <div class="d-flex ">
                                 <a href="https://yasminledesma9@gmail.com" target="_blank"><img
-                                        src="/assets/imgs/gmail.png" alt=""></a> <a
+                                        src="./assets/imgs/gmail.png" alt=""></a> <a
                                     href="https://github.com/YasminLedesma" target="_blank"><img
-                                        src="/assets/imgs/github.png" alt=""></a> <a
+                                        src="./assets/imgs/github.png" alt=""></a> <a
                                     href="https://www.linkedin.com/in/yasm%C3%ADn-ledesma-b3b5a7238/"
-                                    target="_blank"><img src="/assets/imgs/linkedin.png" alt=""></a>
+                                    target="_blank"><img src="./assets/imgs/linkedin.png" alt=""></a>
                                 <p>| Yasmin Ledesma</p>
                             </div>
                         </div>
@@ -220,7 +220,7 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Equipo de Desarrollo</h1>
     <!-- VUE  -->
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <!-- script index -->
-    <script src="/asstets/scripts/menu.js"></script>
+    <script src="./asstets/scripts/menu.js"></script>
     <!-- sweet alert  -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <!-- AOS -->
diff --git a/src/main/resources/static/web/reserva.html b/src/main/resources/static/web/reserva.html
index 0002625..931d0c7 100644
--- a/src/main/resources/static/web/reserva.html
+++ b/src/main/resources/static/web/reserva.html
@@ -60,15 +60,16 @@
                     <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                         <ul class="navbar-nav gap-3">
                             <li class="nav-item button" type="button">
-                                <a class="nav-link " href="#"><i class="bi bi-house"></i> Inicio</a>
+                                <a class="nav-link " href="./index.html"><i class="bi bi-house"></i> Inicio</a>
                             </li>
                             <li class="nav-item button" type="button">
-
                                 <a class="nav-link" href="./menu.html"><i class="bi bi-egg-fried"></i>Menu</a>
-
                             </li>
                             <li class="nav-item button" type="button">
-                                <a class="nav-link" href="#"><i class="bi bi-check2-circle"></i> Reserva</a>
+                                <a class="nav-link" href="./pedidos.html"><i class="bi bi-check2-circle"></i> Pedidos</a>
+                            </li>
+                            <li class="nav-item button" type="button">
+                                <a class="nav-link active active-1" href="#"><i class="bi bi-check2-circle"></i> Reserva</a>
                             </li>
                         </ul>
                     </div>