diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c24db42..3cd004d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -18,7 +18,8 @@ import { InicioComponent } from './components/inicio/inicio.component';
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
-import { PopoverComponent } from './components/popover/popover.component';
+import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
+import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 //#endregion
 
 @NgModule({
@@ -32,7 +33,8 @@ import { PopoverComponent } from './components/popover/popover.component';
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
-    PopoverComponent
+    PopoverPromosComponent,
+    PopoverSinonimosComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/inicio/inicio.component.ts b/src/app/components/inicio/inicio.component.ts
index 7156f97..d4a9956 100644
--- a/src/app/components/inicio/inicio.component.ts
+++ b/src/app/components/inicio/inicio.component.ts
@@ -16,6 +16,7 @@ export class InicioComponent implements OnInit {
 
   @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
   private productoAcargar: Producto;
+  private promoAcargar: Promocion;
   private tienePromo = false;
   private productoEsPromo = false;
 
@@ -58,13 +59,26 @@ export class InicioComponent implements OnInit {
   }
 
   private goPage(pageUrl) {
+
     this.router.navigate([pageUrl]);
   }
 
   deshacerCarga() {
-
-    this.productoAcargar = undefined;
-    this.tienePromo = false;
+    if(this.productoEsPromo) {
+      this.promoAcargar = undefined;  
+      this.productoEsPromo = false;
+      this.popoverDirective.show();
+    }else{
+      this.productoAcargar = undefined;
+      this.tienePromo = false;
+      this.popoverDirective.hide();
+    }
+  }
+  
+  promoSeleccionada($event : Promocion){
+    
+    this.productoEsPromo = true;
+    this.promoAcargar = $event;
     this.popoverDirective.hide();
   }
 
diff --git a/src/app/components/popover-promos/popover-promos.component.html b/src/app/components/popover-promos/popover-promos.component.html
new file mode 100644
index 0000000..0440807
--- /dev/null
+++ b/src/app/components/popover-promos/popover-promos.component.html
@@ -0,0 +1,51 @@
+<div class="card-body">
+  <div class="row">
+    <div class="col text-left">
+      <p class="h5 card-title">
+        Este producto forma parte<br>
+        de Combos y Promociones
+      </p>
+    </div>
+  </div>
+
+  <div class="overflow-scroll popover-size pr-2">
+    <div
+      class="row my-2"
+      *ngFor="let promo of popoverContent">
+      <div class="col text-dark">
+        <div
+          class="bg-white card-effect rounded-sm p-2 px-3"
+          (click)="seleccionarPromo(promo)">
+          <div class="row justify-content-between">
+            <div class="col-auto text-left">
+              <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
+              <p
+                class="h6 mb-0"
+                *ngFor="let producto of promo.productos">
+                {{producto.DetArt}}
+              </p>              
+            </div>
+            <div class="col-auto text-right align-self-end">
+              <p class="h4 font-weight-bold mb-0">
+                {{calcularPrecioDePromo(promo.productos) | currency}}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-3 justify-content-end">
+    <div class="col-auto">
+      <button
+        type="button"
+        class="btn btn-sm btn-light shadow"
+        (click)="hide()">
+        <span class="pr-2">No, gracias</span>
+        <i class="fa fa-times text-danger" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/components/popover-promos/popover-promos.component.scss b/src/app/components/popover-promos/popover-promos.component.scss
new file mode 100644
index 0000000..fe0f606
--- /dev/null
+++ b/src/app/components/popover-promos/popover-promos.component.scss
@@ -0,0 +1,4 @@
+.popover-size {
+  max-height: 57vh !important;
+  min-height: 40vh !important;
+}
diff --git a/src/app/components/popover-promos/popover-promos.component.spec.ts b/src/app/components/popover-promos/popover-promos.component.spec.ts
new file mode 100644
index 0000000..f5e520a
--- /dev/null
+++ b/src/app/components/popover-promos/popover-promos.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PopoverPromosComponent } from './popover-promos.component';
+
+describe('PopoverPromosComponent', () => {
+  let component: PopoverPromosComponent;
+  let fixture: ComponentFixture<PopoverPromosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PopoverPromosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopoverPromosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/popover-promos/popover-promos.component.ts b/src/app/components/popover-promos/popover-promos.component.ts
new file mode 100644
index 0000000..3ab00ce
--- /dev/null
+++ b/src/app/components/popover-promos/popover-promos.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
+import { Promocion } from 'src/app/wrappers/promocion';
+import { Producto } from 'src/app/wrappers/producto';
+
+@Component({
+  selector: 'app-popover-promos',
+  templateUrl: './popover-promos.component.html',
+  styleUrls: ['./popover-promos.component.scss']
+})
+export class PopoverPromosComponent implements OnInit {
+
+  @Input() popover: PopoverDirective;
+  @Input() popoverContent: Promocion[];
+  @Output() promoSeleccionada = new EventEmitter<Promocion>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  hide() {
+    this.popover.hide();
+  }
+
+  seleccionarPromo(promo: Promocion) {
+
+    this.promoSeleccionada.emit(promo);
+  }
+
+  calcularPrecioDePromo(productos: Producto[]) {
+
+    var precio = 0;
+    for (let i = 0; i < productos.length; i++) {
+      precio += productos[i].PreVen;
+    }
+    return precio;
+  }
+
+}
diff --git a/src/app/components/popover/popover.component.html b/src/app/components/popover/popover.component.html
deleted file mode 100644
index 3222193..0000000
--- a/src/app/components/popover/popover.component.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<div class="card-body">
-  <div class="row">
-    <div class="col text-left">
-      <p class="h5 card-title">
-        Este producto forma parte<br>
-        de Combos y Promociones
-      </p>
-    </div>
-  </div>
-
-  <div class="overflow-scroll popover-size pr-2">
-    <div
-      class="row my-2"
-      *ngFor="let promo of popoverContent">
-      <div class="col text-dark">
-        <div class="bg-white rounded-sm p-2 px-3">
-          <div class="row justify-content-between">
-            <div class="col-auto text-left">
-              <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
-              <p
-                class="h6 mb-0"
-                *ngFor="let producto of promo.productos">
-                {{producto.DetArt}}
-              </p>              
-            </div>
-            <div class="col-auto text-right align-self-end">
-              <p class="h4 font-weight-bold mb-0">{{28 | currency}}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row mt-3 justify-content-end">
-    <div class="col-auto">
-      <button
-        type="button"
-        class="btn btn-sm btn-light shadow"
-        (click)="hide()">
-        <span class="pr-2">No, gracias</span>
-        <i class="fa fa-times text-danger" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-
-</div>
diff --git a/src/app/components/popover/popover.component.scss b/src/app/components/popover/popover.component.scss
deleted file mode 100644
index 7c05f44..0000000
--- a/src/app/components/popover/popover.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.popover-size {
-  max-height: 430px !important;
-  min-height: 200px !important;
-}
diff --git a/src/app/components/popover/popover.component.spec.ts b/src/app/components/popover/popover.component.spec.ts
deleted file mode 100644
index c5392f6..0000000
--- a/src/app/components/popover/popover.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PopoverComponent } from './popover.component';
-
-describe('PopoverComponent', () => {
-  let component: PopoverComponent;
-  let fixture: ComponentFixture<PopoverComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PopoverComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PopoverComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/app/components/popover/popover.component.ts b/src/app/components/popover/popover.component.ts
deleted file mode 100644
index f509b4a..0000000
--- a/src/app/components/popover/popover.component.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { PopoverDirective } from 'ngx-bootstrap/popover';
-import { Promocion } from 'src/app/wrappers/promocion';
-
-@Component({
-  selector: 'app-popover',
-  templateUrl: './popover.component.html',
-  styleUrls: ['./popover.component.scss']
-})
-export class PopoverComponent implements OnInit {
-
-  @Input() popover: PopoverDirective;
-  @Input() popoverContent: Promocion[];
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  hide() {
-    this.popover.hide();
-  }
-
-}
diff --git a/src/assets/scss/bootstrap-override.scss b/src/assets/scss/bootstrap-override.scss
index 4a0a28b..e4d132f 100644
--- a/src/assets/scss/bootstrap-override.scss
+++ b/src/assets/scss/bootstrap-override.scss
@@ -10,9 +10,9 @@ $theme-colors: (
 );
 
 .popover {
-  transform: translate3d(-464px, 0, -34px) !important;
-  min-width: 200px !important;
-  max-width: 525px !important;
+  transform: translate3d(-480px, 0, -34px) !important;
+  min-width: 30vh !important;
+  max-width: 50vh !important;
   border: none !important;
   border-radius: 1.5rem !important;
   padding: 0 !important;