diff --git a/src/main/resources/static/web/assets/styles/menu.css b/src/main/resources/static/web/assets/styles/menu.css
index 6a905e3..0004ef0 100644
--- a/src/main/resources/static/web/assets/styles/menu.css
+++ b/src/main/resources/static/web/assets/styles/menu.css
@@ -462,12 +462,13 @@ footer{
     -webkit-mask-image: linear-gradient(to right , transparent 0%, black 10%, black 50%,transparent 100%);
 
 .card-body{
-
+    height: 100%;
 }
 
 .img-comida {
     width: 100%;
     height: 100%;
+    min-height: 15em!important;
     border-radius: 0;
     -webkit-mask-image: linear-gradient(to left, transparent 0%, black 10%, black 50%,transparent 100%);
 }
@@ -484,6 +485,7 @@ footer{
 /* navbar */
 .nav-link {
 
+
     text-transform: uppercase;
 
 
diff --git a/src/main/resources/static/web/menu.html b/src/main/resources/static/web/menu.html
index 61ebb12..8568a90 100644
--- a/src/main/resources/static/web/menu.html
+++ b/src/main/resources/static/web/menu.html
@@ -328,8 +328,12 @@ <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" da
                 </div>
                 <div class="col-md-8">
                   <div class="card-body d-flex flex-column justify-content-between h-100">
-                    <h5 class="card-title">{{comida.nombre}}</h5>
-                    <p class="card-text">{{comida.description}}</p>
+                    
+                    <div class="d-flex flex-column">
+                      <h5 class="card-title">{{comida.nombre}}</h5>
+                      <p class="card-text mb-2">{{comida.description}}</p>
+                    </div>
+                    
                     <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-4">
                       <div>
                         <h6 class="precio m-0">Precio:<span class="h4 ms-2">{{formatCurrency(comida.precio)}}</span></h6>
@@ -358,8 +362,10 @@ <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" da
                 </div>
                 <div class="col-md-8">
                   <div class="card-body d-flex flex-column justify-content-between h-100">
-                    <h5 class="card-title">{{comida.nombre}}</h5>
-                    <p class="card-text">{{comida.description}}</p>
+                    <div class="d-flex flex-column">
+                      <h5 class="card-title">{{comida.nombre}}</h5>
+                      <p class="card-text mb-2">{{comida.description}}</p>
+                    </div>
                     <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-4">
                       <div>
                         <h6 class="precio m-0">Precio:<span class="h4 ms-2">{{formatCurrency(comida.precio)}}</span></h6>
@@ -375,7 +381,6 @@ <h6 class="precio m-0">Precio:<span class="h4 ms-2">{{formatCurrency(comida.prec
           </article>
 
           <!-- bebidas -->
-
           <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">
               Bebidas</h2>
@@ -386,14 +391,16 @@ <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" da
                 </div>
                 <div class="col-md-8">
                   <div class="card-body d-flex flex-column justify-content-between h-100">
-                    <h5 class="card-title">{{bebida.nombre}}</h5>
-                    <p class="card-text">{{bebida.descripcion}}</p>
+                    <div class="d-flex flex-column">
+                      <h5 class="card-title">{{bebida.nombre}}</h5>
+                      <p class="card-text mb-2">{{bebida.descripcion}}</p>
+                    </div>
                     <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-4">
                       <div>
                         <h6 class="precio m-0">Precio:<span class="h4 ms-2">{{formatCurrency(bebida.precio)}}</span></h6>
                       </div>
                       <div><button type="button" class="btn btn-outline-warning btn-comida" data-bs-toggle="modal"
-                          data-bs-target="#agregarComida" v-on:click="alertAgregar(comida)">Agregar</button>
+                          data-bs-target="#agregarBebida" v-on:click="alertAgregar(bebida)">Agregar</button>
                       </div>
                     </div>
                   </div>
@@ -402,7 +409,6 @@ <h6 class="precio m-0">Precio:<span class="h4 ms-2">{{formatCurrency(bebida.prec
             </div>
           </article>
 
-
           <!-- postre -->
 
           <article id="postres" class="seccionComida d-flex justify-content-center flex-column align-items-center">
@@ -416,8 +422,10 @@ <h2 class=" d-flex justify-content-center t-stroke" style="color: #ffbc00db;" da
                 </div>
                 <div class="col-md-8">
                   <div class="card-body d-flex flex-column justify-content-between h-100">
-                    <h5 class="card-title">{{comida.nombre}}</h5>
-                    <p class="card-text">{{comida.description}}</p>
+                    <div class="d-flex flex-column">
+                      <h5 class="card-title">{{comida.nombre}}</h5>
+                      <p class="card-text mb-2">{{comida.description}}</p>
+                    </div>
                     <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center gap-4">
                       <div>
                         <h6 class="precio m-0">Precio:<span class="h4 ms-2">{{formatCurrency(comida.precio)}}</span></h6>