diff --git a/src/app/components/inicio/inicio.component.html b/src/app/components/inicio/inicio.component.html
index 60f5242..16182b7 100644
--- a/src/app/components/inicio/inicio.component.html
+++ b/src/app/components/inicio/inicio.component.html
@@ -8,12 +8,12 @@
       </div>
     </div>
 
-    <div class="row m-4 d-flex align-items-center disable-user-select">
+    <div class="row m-3 d-flex align-items-start disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
 
         <!-- PROMOCIONES -->
         <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
-          <div class="card-body text-left p-4">
+          <div class="card-body text-left px-4 py-2">
             <div class="row">
               <div class="col-7">
                 <p class="h3 card-title">Promociones</p>
@@ -24,21 +24,16 @@
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
-          <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
-            <ol class="carousel-indicators m-0">
-              <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
-              <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
-              <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
-            </ol>
+          <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
             <div class="carousel-inner">
               <div class="carousel-item active">
-                <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
+                <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
+                <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
               </div>
               <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/descarga.jpg" class="d-block w-50 m-auto rounded">
+                <img src="{{apiUrl}}/imagenes/cafe.jpg" class="d-block w-100 m-auto rounded">
               </div>
             </div>
           </div>
@@ -46,7 +41,7 @@
 
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
-          <div class="card-body text-left p-4">
+          <div class="card-body text-left px-4 py-2">
             <div class="row">
               <div class="col-5">
                 <p class="h3 card-title">Ordenar</p>
@@ -63,14 +58,14 @@
         </div>
       </div>
 
-      <div class="col-md-7 d-flex align-items-end flex-column">
+      <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
 
         <!-- CARGAR PRODUCTOS -->
         <ng-template #popTemplate>
           <app-popover 
             [popover]="popoverDirective"
-            [popoverContent]="'que onda'"
-            class="card bg-primary text-white rounded-sm border-0">
+            [popoverContent]="popoverContent"
+            class="fade-in text-white rounded-sm border-0">
           </app-popover>
         </ng-template>
         <div
@@ -78,10 +73,9 @@
           triggers=""
           [popover]="popTemplate"
           class="w-100"
-          #pop="bs-popover"
-          (click)="open()">
+          #pop="bs-popover">
           <div class="card bg-white border-0 shadow rounded mb-auto">
-            <div class="card-body text-left p-4">
+            <div class="card-body text-left px-4 py-2">
               <div class="row">
                 <div class="col-6">
                   <p class="h3 card-title">Cargar Productos</p>
@@ -95,11 +89,50 @@
                 barras o QR frente al scanner.
               </p>
             </div>
-            <div class="card bg-white border-0 w-75 mx-auto mb-4">
-              <img class="card-img-top d-block w-50 mx-auto rounded" src="{{apiUrl}}/imagenes/descarga.jpg">
-              <div class="card-body text-left p-2">
-                <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
-                <p class="m-0 card-text text-muted">COD. 12121222</p>
+            <div class="row m-4">
+              <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
+                <img
+                  *ngIf="!productoAcargar"
+                  class="card-img-top d-block w-100 mx-auto rounded-sm"
+                  src="{{apiUrl}}/imagenes/escanner.jpg">
+                <div *ngIf="productoAcargar">
+                  <img
+                    class="card-img-top d-block w-100 mx-auto rounded-sm"
+                    src="{{apiUrl}}/imagenes/cafe.jpg">
+  
+                  <div class="row justify-content-between m-3">
+                    <div class="col-auto text-left px-1">
+                      <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
+                      <p class="h6 mb-0"><small>{{productoAcargar.DetArt}}</small></p>
+                    </div>
+                    <div class="col-4 text-right my-auto">
+                      <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- BOTONES -->
+              <div
+                class="col-5 pr-0"
+                *ngIf="productoAcargar && tienePromo">
+                  <button
+                    type="button"
+                    class="btn btn-light btn-block shadow-sm"
+                    (click)="pop.show()">
+                    <span class="pr-2">Personalizar</span>
+                    <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
+                  </button>
+                  <button type="button" class="btn btn-light btn-block shadow-sm my-3">
+                    <span class="pr-2 font-weight-bold">Confirmar</span>
+                    <i class="fa fa-check text-success" aria-hidden="true"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-light btn-block shadow-sm"
+                    (click)="deshacerCarga()">
+                    <span class="pr-2">Deshacer</span>
+                    <i class="fa fa-undo text-warning" aria-hidden="true"></i>
+                  </button>
               </div>
             </div>
           </div>
@@ -108,7 +141,7 @@
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
-          <div class="card-body text-left p-4">
+          <div class="card-body text-left px-4 py-2">
             <div class="row">
               <div class="col-6">
                 <p class="h3 card-title">Buscar Productos</p>
diff --git a/src/app/components/inicio/inicio.component.ts b/src/app/components/inicio/inicio.component.ts
index 068c5d9..9012dfa 100644
--- a/src/app/components/inicio/inicio.component.ts
+++ b/src/app/components/inicio/inicio.component.ts
@@ -1,7 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { Router } from '@angular/router';
 import { PopoverDirective } from 'ngx-bootstrap';
 import { appSettings } from 'src/etc/AppSettings';
+import { Producto } from 'src/app/wrappers/producto';
+import { ProductoService } from 'src/app/services/producto.service';
+import { Router } from '@angular/router';
+import { Promocion } from 'src/app/wrappers/promocion';
 
 
 @Component({
@@ -12,14 +15,43 @@ import { appSettings } from 'src/etc/AppSettings';
 export class InicioComponent implements OnInit {
 
   @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
-  apiUrl : string = appSettings.apiUrl
+  private productoAcargar: Producto;
+  private tienePromo = false;
+
+  popoverContent: Promocion[] = []
+  apiUrl: string = appSettings.apiUrl
 
-  constructor(private router: Router) { }
+  constructor(
+    private router: Router,
+    private productoService: ProductoService) { }
 
   ngOnInit() {
+
+    this.productoAcargar = this.productoService.productoAcargar;
+    if (this.productoAcargar) {
+      var sector = this.productoAcargar.CodSec;
+      var codigo = this.productoAcargar.CodArt;
+      this.productoService.getPromocion(sector, codigo)
+        .subscribe((promociones: Promocion[]) => {
+
+          if (promociones.length === 0) {
+            //Si no tiene promociones la cargará al carrito despues de un tiempo
+            setTimeout(() => {
+              this.productoService.productos.push(this.productoAcargar);
+              this.productoAcargar = undefined;
+              this.tienePromo = false;
+            }, 2000)
+          } else {
+
+            this.popoverContent = promociones;
+            this.tienePromo = true;
+            this.popoverDirective.show();
+          }
+        }, error => { console.error(error); })
+    }
   }
 
-  open() {
+  showPopover() {
 
     this.popoverDirective.show();
   }
@@ -28,4 +60,11 @@ export class InicioComponent implements OnInit {
     this.router.navigate([pageUrl]);
   }
 
+  deshacerCarga() {
+
+    this.productoAcargar = undefined;
+    this.tienePromo = false;
+    this.popoverDirective.hide();
+  }
+
 }