diff --git a/src/app/components/inicio/inicio.component.ts b/src/app/components/inicio/inicio.component.ts
index 96be6b9..91ea6ae 100644
--- a/src/app/components/inicio/inicio.component.ts
+++ b/src/app/components/inicio/inicio.component.ts
@@ -5,6 +5,7 @@ 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';
+import { Sinonimo } from 'src/app/wrappers/sinonimo';
 
 @Component({
   selector: 'app-inicio',
@@ -16,10 +17,10 @@ export class InicioComponent implements OnInit {
   @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
   private productoAcargar: Producto;
   private promoAcargar: Promocion;
-  private sinonimoAcargar: Producto;
+  private sinonimoAcargar: Sinonimo;
 
   promociones: Promocion[] = [];
-  sinonimos: Producto[] = [];
+  sinonimos: Sinonimo[] = [];
   apiUrl: string = appSettings.apiUrl
 
   constructor(
@@ -90,13 +91,16 @@ export class InicioComponent implements OnInit {
       var sector = this.promoAcargar.sector;
       var codigo = this.promoAcargar.codigo;
       this.productoService.getPromocionSinonimos(sector, codigo)
-        .subscribe((res: Producto[]) => {
+        .subscribe((res: Sinonimo[]) => {
           res.forEach(resSinonimo => {
-            this.promoAcargar.productos.forEach(producto => {
-              if (producto.id === resSinonimo.id) {
-                resSinonimo.esPadre = true;
-              }
-            });
+            resSinonimo.productos.forEach(productoSinonimo => {
+              this.promoAcargar.productos.forEach(productoPromo => {
+                if (productoPromo.id === productoSinonimo.id) {
+                  productoSinonimo.esPadre = true;
+                }
+              });
+
+            })
           })
           this.sinonimos = res;
           this.showPopover();
@@ -104,8 +108,9 @@ export class InicioComponent implements OnInit {
     }
   }
 
-  sinonimoSeleccionado($event: Producto) {
+  sinonimoSeleccionado($event: Sinonimo) {
 
+    console.log($event);
     this.sinonimoAcargar = $event;
   }
 
diff --git a/src/app/components/popover-sinonimos/popover-sinonimos.component.html b/src/app/components/popover-sinonimos/popover-sinonimos.component.html
index 42a0a71..b158ad0 100644
--- a/src/app/components/popover-sinonimos/popover-sinonimos.component.html
+++ b/src/app/components/popover-sinonimos/popover-sinonimos.component.html
@@ -8,32 +8,49 @@
     </div>
   </div>
 
-  <div class="row m-0">
-    <div class="col text-left">
-      <p class="h5 card-title">
-        Elija una opción
-      </p>
-    </div>
-  </div>
-
   <div class="row m-0 overflow-scroll popover-size pr-2 my-2">
     <div class="col">
-      <div class="row" *ngFor="let sinonimo of popoverContent">
-        <div class="col pl-4 h6">
-          <div class="custom-control custom-radio">
-            <input
-              type="radio"
-              [id]="sinonimo.id"
-              name="sinonimoOpciones"
-              class="custom-control-input"
-              (click)="setSinonimo(sinonimo)"
-              [checked]="sinonimo.esPadre">
-            <label
-              class="font-weight-normal custom-control-label"
-              [for]="sinonimo.id">
-              {{sinonimo.DetArt}}
-            </label>
+      <div class="row mb-2" *ngFor="let sinonimo of popoverContent">
+        <div class="col">
+
+          <div class="row m-0">
+            <div class="col text-left">
+              <p class="h5 card-title">
+                Elija una opción
+              </p>
+            </div>
           </div>
+
+          <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos">
+            <div class="col-8 pl-4 h6 m-0">
+              <div class="custom-control custom-radio">
+                <input
+                  type="radio"
+                  [id]="producto.id"
+                  [checked]="producto.esPadre"
+                  name="sinonimoOpciones"
+                  class="custom-control-input"
+                  (click)="setSinonimo(sinonimo)">
+                <label class="font-weight-normal custom-control-label" [for]="producto.id">
+                  {{producto.DetArt}}
+                </label>
+              </div>
+            </div>
+            <div class="col-auto">
+              <div class="btn-group-sm btn-group float-left my-auto" role="group">
+                <button type="button" class="btn btn-light btn-sm my-auto border">
+                  <i class="fa fa-plus" aria-hidden="true"></i>
+                </button>
+                <div class="bg-white border border-white px-3 my-auto text-dark h5">
+                  <small>{{producto.cantidad}}</small>
+                </div>
+                <button type="button" class="btn btn-light btn-sm my-auto border">
+                  <i class="fa fa-minus" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
     </div>
@@ -48,4 +65,4 @@
     </div>
   </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/popover-sinonimos/popover-sinonimos.component.ts b/src/app/components/popover-sinonimos/popover-sinonimos.component.ts
index 4f4b09a..78dadb6 100644
--- a/src/app/components/popover-sinonimos/popover-sinonimos.component.ts
+++ b/src/app/components/popover-sinonimos/popover-sinonimos.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 import { PopoverDirective } from 'ngx-bootstrap';
 import { Producto } from 'src/app/wrappers/producto';
+import { Sinonimo } from 'src/app/wrappers/sinonimo';
 
 @Component({
   selector: 'app-popover-sinonimos',
@@ -11,9 +12,9 @@ export class PopoverSinonimosComponent implements OnInit {
 
   //Directiva del popover, para poder cerrarlo desde este componente
   @Input() popover: PopoverDirective;
-  @Input() popoverContent: Producto[];
-  @Output() sinonimoSeleccionado = new EventEmitter<Producto>();
-  sinonimo: Producto;
+  @Input() popoverContent: Sinonimo[];
+  @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>();
+  sinonimo: Sinonimo;
 
   constructor() { }
 
@@ -21,7 +22,7 @@ export class PopoverSinonimosComponent implements OnInit {
 
     //Seteo en la variable a emitir el sinonimo que sea padre
     this.popoverContent.forEach(sinonimo => {
-      this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
+      // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined;
     })
   }
 
@@ -31,7 +32,7 @@ export class PopoverSinonimosComponent implements OnInit {
     this.popover.hide();
   }
 
-  setSinonimo(sinonimo: Producto) {
+  setSinonimo(sinonimo: Sinonimo) {
 
     this.sinonimo = sinonimo;
   }
diff --git a/src/app/wrappers/sinonimo.ts b/src/app/wrappers/sinonimo.ts
new file mode 100644
index 0000000..2c93f4e
--- /dev/null
+++ b/src/app/wrappers/sinonimo.ts
@@ -0,0 +1,8 @@
+import { Producto } from './producto';
+
+export interface Sinonimo {
+
+  ID_SIN: number,
+  descripcion: string,
+  productos: Producto[],
+}
diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss
index 7e18cd3..364fbb4 100644
--- a/src/assets/scss/animation.scss
+++ b/src/assets/scss/animation.scss
@@ -83,9 +83,8 @@
 }
 
 .fade-left {
-  
-  -webkit-animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-  animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 @-webkit-keyframes fadeleft {
@@ -121,3 +120,38 @@
     opacity: 1;
   }
 }
+
+.fade-bottom {
+  -webkit-animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+  animation: fade-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+}
+
+@-webkit-keyframes fade-top {
+  0% {
+    -webkit-transform: scaleY(0.4);
+    transform: scaleY(0.4);
+    -webkit-transform-origin: 100% 0%;
+    transform-origin: 100% 0%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transform-origin: 100% 0%;
+    transform-origin: 100% 0%;
+  }
+}
+
+@keyframes fade-top {
+  0% {
+    -webkit-transform: scaleY(0.4);
+    transform: scaleY(0.4);
+    -webkit-transform-origin: 100% 0%;
+    transform-origin: 100% 0%;
+  }
+  100% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    -webkit-transform-origin: 100% 0%;
+    transform-origin: 100% 0%;
+  }
+}