diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html
index ae2b2a6..6113e0a 100644
--- a/src/app/modules/carrito/carrito.component.html
+++ b/src/app/modules/carrito/carrito.component.html
@@ -46,37 +46,12 @@
             <!-- CANTIDAD -->
             <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
               <p class="h-40"><small>CANT</small></p>
-              <div class="row mx-0 justify-content-between bg-primary 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-20 btn-effect"
-                    src="assets/img/menos-blanco.svg"
-                    (click)="substractCant(articulo)">
-                </div>
-                <!-- CANTIDAD -->
-                <div class="col px-0 py-2 my-auto text-white">
-                  <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-20 btn-effect"
-                    src="assets/img/mas-blanco.svg"
-                    (click)="addCant(articulo)">
-                </div>
-              </div>
+              <articulo-cantidad [articulo]="articulo"></articulo-cantidad>
             </div>
             <!-- PRECIO -->
             <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
               <p class="h-40"><small>PRECIO</small></p>
-              <div class="py-2 badge-pill bg-dark text-white">
+              <div class="py-1 badge-pill bg-dark text-white">
                 <p><small>{{articulo.PreVen | currency}}</small></p>
               </div>
             </div>
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 48512f2..09d43b3 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -189,32 +189,7 @@
                 <p class="d-block mt-auto text-center text-primary text-truncate">
                   <small>{{articulo.DetArt}}</small>
                 </p>
-                <div class="row mx-0 justify-content-between bg-primary 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-blanco.svg"
-                      (click)="substractCant(articulo)">
-                  </div>
-                  <!-- CANTIDAD -->
-                  <div class="col px-0 my-auto text-white 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-blanco.svg"
-                      (click)="addCant(articulo)">
-                  </div>
-                </div>
+                <articulo-cantidad [articulo]="articulo"></articulo-cantidad>
               </div>
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
index 26e6983..894822c 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
@@ -10,6 +10,7 @@ import { SharedModule } from '../shared/shared.module';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
 import { FormsModule } from '@angular/forms';
 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
+import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.
     HeaderPublicidadComponent,
     PromocionComponent,
     SinonimoComponent,
-    ConfirmacionComponent
+    ConfirmacionComponent,
+    ArticuloCantidadComponent,
   ],
   imports: [
     CommonModule,
@@ -27,7 +29,7 @@ import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.
     CarouselModule.forRoot(),
     SharedModule
   ],
-  exports: [HeaderPublicidadComponent],
+  exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
   entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
 })
 export class SeleccionArticulosModule { }
diff --git a/src/app/shared/articulo-cantidad/articulo-cantidad.component.html b/src/app/shared/articulo-cantidad/articulo-cantidad.component.html
new file mode 100644
index 0000000..8cd1a0e
--- /dev/null
+++ b/src/app/shared/articulo-cantidad/articulo-cantidad.component.html
@@ -0,0 +1,26 @@
+<div class="row mx-0 justify-content-between bg-primary 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-blanco.svg"
+      (click)="substractCant(articulo)">
+  </div>
+  <!-- CANTIDAD -->
+  <div class="col px-0 my-auto text-white 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-blanco.svg"
+      (click)="addCant(articulo)">
+  </div>
+</div>
diff --git a/src/app/shared/articulo-cantidad/articulo-cantidad.component.scss b/src/app/shared/articulo-cantidad/articulo-cantidad.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts b/src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
new file mode 100644
index 0000000..3536c6f
--- /dev/null
+++ b/src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ArticuloCantidadComponent } from './articulo-cantidad.component';
+
+describe('ArticuloCantidadComponent', () => {
+  let component: ArticuloCantidadComponent;
+  let fixture: ComponentFixture<ArticuloCantidadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ArticuloCantidadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArticuloCantidadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/articulo-cantidad/articulo-cantidad.component.ts b/src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
new file mode 100644
index 0000000..feb4130
--- /dev/null
+++ b/src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { IArticulo } from 'src/app/interfaces/IArticulo';
+import { ArticuloService } from 'src/app/services/articulo/articulo.service';
+
+@Component({
+  selector: 'articulo-cantidad',
+  templateUrl: './articulo-cantidad.component.html',
+  styleUrls: ['./articulo-cantidad.component.scss']
+})
+export class ArticuloCantidadComponent implements OnInit {
+  @Input() articulo: IArticulo;
+
+  constructor(private articuloService: ArticuloService) { }
+
+  ngOnInit() { }
+
+  substractCant(articulo: IArticulo) {
+    this.articuloService.substractCant(articulo);
+  }
+
+  addCant(articulo: IArticulo) {
+    this.articuloService.addCant(articulo);
+  }
+
+}