diff --git a/src/app/interfaces/ISinonimo.ts b/src/app/interfaces/ISinonimo.ts
index bcee75e..e533170 100644
--- a/src/app/interfaces/ISinonimo.ts
+++ b/src/app/interfaces/ISinonimo.ts
@@ -6,5 +6,6 @@ export interface ISinonimo {
   productos: IArticulo[];
   productoPadre?: number;
   cantidad?: number;
+  cantidadRestante?: number;
   selected?: boolean;
 }
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index 34fb15e..0b0a0d5 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -117,8 +117,10 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
-          Object.keys(gruposArticulos).forEach(key => {
+          Object.keys(gruposArticulos).forEach((key, i) => {
             sinonimos.push({ productos: gruposArticulos[key] });
+            sinonimos[i].cantidad = articulo.productos[i].cantidad;
+            sinonimos[i].cantidadRestante = articulo.productos[i].cantidad;
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
diff --git a/src/app/shared/sinonimo/sinonimo.component.html b/src/app/shared/sinonimo/sinonimo.component.html
index 72241b1..3f68537 100644
--- a/src/app/shared/sinonimo/sinonimo.component.html
+++ b/src/app/shared/sinonimo/sinonimo.component.html
@@ -7,8 +7,8 @@
       (click)="close()"
       class="btn-effect icon-30 mt-2 mr-2 position-absolute right-0 top-0 z-index"
       src="assets/img/icono-cancelar-blanco.svg">
-    <p class="col-7 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
-    <div class="col-5 pt-4 pr-0 text-right">
+    <p class="col-12 h4 px-0 align-self-center">{{ articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase() }}</p>
+    <!-- <div class="col-5 pt-4 pr-0 text-right">
       <p *ngFor="let s of sinonimos; let i = index">
         <span
           class="btn-effect"
@@ -17,26 +17,42 @@
           <i class="far fa-hand-point-left"></i>
         </span>
       </p>
-    </div>
+    </div> -->
   </div>
 
   <div class="modal-body lista-sinonimos scroll-y-visible my-2 mr-2">
-    <div *ngFor="let s of sinonimos; let i = index">
-      <div [id]="i"></div>
-      <hr [hidden]="i === 0" class="bg-white">
-      <div *ngFor="let articulo of s.productos">
-        <div class="custom-control custom-checkbox">
-          <input
-            type="checkbox"
-            class="custom-control-input"
-            [(ngModel)]="articulo.seleccionado"
-            (click)="selectSinonimo(i, articulo)"
-            [id]="articulo.id">
-          <label
-            class="custom-control-label"
-            [for]="articulo.id">
-            {{articulo.DET_LAR.toUpperCase()}}
-          </label>
+    <div class="row mx-0 mb-2"  *ngFor="let articulo of sinonimos[currentIndex].productos">
+      <div class="col-7 p-0 my-auto h6 text-right">
+        <p class="m-0 font-weight-normal">
+          {{articulo.MKT_DESC ? articulo.MKT_DESC.toUpperCase() : articulo.DetArt.toUpperCase()}}
+        </p>
+      </div>
+      <div class="col-5 pr-0">
+        <div class="row mx-0 justify-content-between bg-white badge-pill">
+          <!-- BOTON MENOS -->
+          <div class="col-auto px-0 my-auto">
+            <img
+              draggable="false"
+              ondragstart="return false;"
+              (contextmenu)="false"
+              class="d-block ml-auto py-2 icon-15 btn-effect"
+              src="assets/img/menos.svg"
+              (click)="restarCantidadSinonimo(articulo, currentIndex)">
+          </div>
+          <!-- CANTIDAD -->
+          <div class="col px-0 my-auto text-primary text-center">
+            <p><small>{{articulo.cantidad}}</small></p>
+          </div>
+          <!-- BOTON MAS -->
+          <div class="col-auto px-0 my-auto">
+            <img
+              draggable="false"
+              ondragstart="return false;"
+              (contextmenu)="false"
+              class="d-block ml-auto py-2 icon-15 btn-effect"
+              src="assets/img/mas.svg"
+              (click)="sumarCantidadSinonimo(articulo, currentIndex)">
+          </div>
         </div>
       </div>
     </div>
@@ -44,8 +60,33 @@
 
   <div class="modal-footer">
     <div
+      *ngIf="currentIndex != 0 && sinonimos.length > 1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect mr-auto"
+      (click)="currentIndex = currentIndex-1">
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30 flip"
+        src="assets/img/ir-color.svg">
+      VOLVER
+    </div>
+    <div
+      *ngIf="currentIndex == 0 && currentIndex != sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary btn-effect ml-auto"
+      (click)="currentIndex = currentIndex+1">
+      SIGUIENTE
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="icon-30"
+        src="assets/img/ir-color.svg">
+    </div>
+    <div
       [ngClass]="validate()"
-      class="d-inline-block py-1 bg-white badge-pill text-primary"
+      *ngIf="currentIndex == sinonimos.length-1"
+      class="d-inline-block py-1 bg-white badge-pill text-primary ml-auto"
       (click)="continue()">
       CONTINUAR
       <img
diff --git a/src/app/shared/sinonimo/sinonimo.component.scss b/src/app/shared/sinonimo/sinonimo.component.scss
index 3f6f0b6..381db94 100644
--- a/src/app/shared/sinonimo/sinonimo.component.scss
+++ b/src/app/shared/sinonimo/sinonimo.component.scss
@@ -1,4 +1,4 @@
 .lista-sinonimos {
-  min-height: auto;
+  min-height: 35vh;
   max-height: 35vh;
 }
diff --git a/src/app/shared/sinonimo/sinonimo.component.ts b/src/app/shared/sinonimo/sinonimo.component.ts
index b6407fe..8bb49c6 100644
--- a/src/app/shared/sinonimo/sinonimo.component.ts
+++ b/src/app/shared/sinonimo/sinonimo.component.ts
@@ -18,6 +18,7 @@ export class SinonimoComponent implements OnInit {
   articulosSelected: IArticulo[] = [];
   articulo: IArticulo;
   isSinonimoSelected = false;
+  currentIndex = 0;
 
   constructor(
     private modalRef: BsModalRef,
@@ -27,7 +28,13 @@ export class SinonimoComponent implements OnInit {
     this.articulosSelected.length = this.sinonimos.length;
   }
 
-  ngOnInit() { }
+  ngOnInit() {
+    for (const s of this.sinonimos) {
+      for (const a of s.productos) {
+        a.cantidad = 0;
+      }
+    }
+  }
 
   selectSinonimo(index: number, articulo: IArticulo) {
     for (const a of this.sinonimos[index].productos) {
@@ -73,6 +80,19 @@ export class SinonimoComponent implements OnInit {
       }, err => console.error(err));
   }
 
+  sumarCantidadSinonimo(articulo: IArticulo, i: number) {
+    if (this.sinonimos[i].cantidadRestante === 0) return;
+    articulo.cantidad++;
+    this.sinonimos[i].cantidadRestante--;
+  }
+
+  restarCantidadSinonimo(articulo: IArticulo, i: number) {
+    if (this.sinonimos[i].cantidadRestante === this.sinonimos[i].cantidad) return;
+    if (articulo.cantidad === 0) return;
+    articulo.cantidad--;
+    this.sinonimos[i].cantidadRestante++;
+  }
+
   scrollTo(index: number) {
     const el = document.getElementById(index.toString());
     el.scrollIntoView({ behavior: 'smooth' });
diff --git a/src/styles.scss b/src/styles.scss
index 8755eb6..6bbe9e0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -102,3 +102,8 @@ p {
 .z-index {
   z-index: 1000;
 }
+
+.flip {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
\ No newline at end of file