diff --git a/src/app/components/inicio/inicio.component.html b/src/app/components/inicio/inicio.component.html
index a93a09d..340fa33 100644
--- a/src/app/components/inicio/inicio.component.html
+++ b/src/app/components/inicio/inicio.component.html
@@ -27,13 +27,13 @@
           <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
             <div class="carousel-inner">
               <div class="carousel-item active">
-                <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
+                <img src="{{apiUrl}}/imagenes/testImg.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
+                <img src="{{apiUrl}}/imagenes/testImg.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
+                <img src="{{apiUrl}}/imagenes/testImg.jpg" class="d-block w-100 m-auto rounded">
               </div>
             </div>
           </div>
@@ -62,11 +62,13 @@
 
         <!-- CARGAR PRODUCTOS -->
         <ng-template #popTemplate>
-          <app-popover 
+          <app-popover-promos
+            *ngIf="productoAcargar && !productoEsPromo"
             [popover]="popoverDirective"
             [popoverContent]="popoverContent"
+            (promoSeleccionada)="promoSeleccionada($event)"
             class="fade-in text-white rounded-sm border-0">
-          </app-popover>
+          </app-popover-promos>
         </ng-template>
         <div
           placement="left"
@@ -91,14 +93,17 @@
             </div>
             <div class="row m-4">
               <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
+                <!-- IMAGEN DE ESCANER -->
                 <img
                   *ngIf="!productoAcargar"
                   class="card-img-top d-block w-100 mx-auto rounded-sm"
                   src="{{apiUrl}}/imagenes/escanner.jpg">
-                <div *ngIf="productoAcargar">
+
+                <!-- PRODUCTO A CARGAR -->
+                <div class="fade-in m-0" *ngIf="productoAcargar && !productoEsPromo">
                   <img
                     class="card-img-top d-block w-100 mx-auto rounded-sm"
-                    src="{{apiUrl}}/imagenes/cafe.jpg">
+                    src="{{apiUrl}}/imagenes/testImg.jpg">
   
                   <div class="row justify-content-between m-3">
                     <div class="col-auto text-left px-1">
@@ -110,6 +115,28 @@
                     </div>
                   </div>
                 </div>
+
+                <!-- PROMO A CARGAR -->
+                <div class="fade-in m-0" *ngIf="promoAcargar && productoEsPromo">
+                  <img
+                    class="card-img-top d-block w-100 mx-auto rounded-sm"
+                    src="{{apiUrl}}/imagenes/testImg.jpg">
+  
+                  <div class="row justify-content-between m-3">
+                    <div class="col-12 text-left px-1">
+                      <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
+                      <p
+                        class="h6 mb-0"
+                        *ngFor="let producto of promoAcargar.productos">
+                        {{producto.DetArt}}
+                    </p>
+                    </div>
+                    <div class="col-12 text-right mt-2 align-self-end">
+                      <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
+                    </div>
+                  </div>
+                </div>
+
               </div>
               <!-- BOTONES -->
               <div