diff --git a/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
new file mode 100644
index 0000000..1651a98
--- /dev/null
+++ b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.html
@@ -0,0 +1,59 @@
+<!-- FILTRO CATEGORIAS -->
+  <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
+  <div class="row mx-0 h-94 justify-content-center align-items-center">
+    <div class="col-auto btn-effect h-5 cat-btn">
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="h-100 d-block mx-auto rotate-90-neg"
+        src="assets/img/ir-color.svg"
+        (mousedown)="scrollY(templateCategorias, -100)"
+        (mouseup)="mouseup()"
+        (mouseleave)="mouseup()">
+    </div>
+    <!-- CATEGORIAS -->
+    <div
+      #templateCategorias
+      class="col-12 px-0 mx-0 box-categorias border border-primary py-1
+            border-left-0 rounded-right scroll-y cat-box"
+      (scroll)="scrollEvent($event)">
+      <div
+        class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
+        [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive }"
+        (click)="selectCategoria(-1, 0)">
+        <img
+          draggable="false"
+          ondragstart="return false;"
+          (contextmenu)="false"
+          class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
+          src="assets/img/logo-spot.svg">
+        <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
+      </div>
+      <div
+        class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
+        [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected }"
+        (click)="selectCategoria(i, categoria.id)"
+        *ngFor="let categoria of categorias; let i = index;">
+        <img
+          draggable="false"
+          ondragstart="return false;"
+          (contextmenu)="false"
+          class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
+          src="{{urlImagenes}}{{categoria.path_imagen}}"
+          onerror="this.src='assets/img/image-not-found.jpg'">
+        <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
+      </div>
+    </div>
+    <div class="col-auto btn-effect h-5 cat-btn">
+      <img
+        draggable="false"
+        ondragstart="return false;"
+        (contextmenu)="false"
+        class="h-100 d-block mx-auto rotate-90"
+        src="assets/img/ir-color.svg"
+        (mousedown)="scrollY(templateCategorias, 100)"
+        (mouseup)="mouseup()"
+        (mouseleave)="mouseup()">
+    </div>
+  </div>
diff --git a/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
new file mode 100644
index 0000000..a65def2
--- /dev/null
+++ b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.scss
@@ -0,0 +1,54 @@
+$primary: #aa006b;
+
+.box-categorias {
+  height: calc(100% - 100px) !important;
+}
+
+.active {
+  transition: 0.3s;
+  background-color: white;
+  border-bottom: 3px solid $primary !important;
+  border-top: 3px solid $primary !important;
+  border-left: 3px solid $primary !important;
+  border-right: 3px solid $primary !important;
+}
+
+.border-bottom-effect {
+  border: none;
+  position: relative;
+  &:hover {
+    border: none;
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    width: 0px;
+    height: 3px;
+    left: 50%;
+    bottom: 0;
+    background-color: $primary;
+    transition: all ease-in-out 0.2s;
+  }
+  &:hover::after {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.cat-content.media-pantalla {
+  margin: 0.5rem 0.7rem !important;
+  height: 76% !important;
+}
+
+.cat-box.media-pantalla {
+  height: calc(100% - 85px) !important;
+}
+
+.cat-btn.media-pantalla {
+  height: 7% !important;
+}
+
+#content.media-pantalla,
+#boxCarrito.media-pantalla {
+  max-height: 60% !important;
+}
diff --git a/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.spec.ts b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.spec.ts
new file mode 100644
index 0000000..0376829
--- /dev/null
+++ b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FiltroCategoriasComponent } from './filtro-categorias.component';
+
+describe('FiltroCategoriasComponent', () => {
+  let component: FiltroCategoriasComponent;
+  let fixture: ComponentFixture<FiltroCategoriasComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FiltroCategoriasComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FiltroCategoriasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
new file mode 100644
index 0000000..5de594e
--- /dev/null
+++ b/src/app/modules/seleccion-articulos/filtro-categorias/filtro-categorias.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnInit, Input, HostListener, Output, EventEmitter } from '@angular/core';
+import { ICategoria } from 'src/app/interfaces/ICategoria';
+import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+import { CategoriaService } from 'src/app/services/categoria/categoria.service';
+import { APP_SETTINGS } from 'src/etc/AppSettings';
+
+@Component({
+  selector: 'app-filtro-categorias',
+  templateUrl: './filtro-categorias.component.html',
+  styleUrls: ['./filtro-categorias.component.scss']
+})
+export class FiltroCategoriasComponent implements OnInit {
+  @Output() getProductos = new EventEmitter<any>();
+  @Output() setProductos = new EventEmitter<any>();
+  @Output() filterItems = new EventEmitter<any>();
+  categorias: ICategoria[] = [];
+  timeoutHandler: any;
+  categoriaActive = null;
+  allActive = true;
+  queMostrar = 'todos';
+  urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
+
+  constructor(
+    private categoriaService: CategoriaService,
+    private inactiveScreen: InactiveScreenService,
+  ) { }
+
+  ngOnInit() { }
+
+  getCategorias() {
+    this.categoriaService.getAll()
+      .subscribe((categorias: ICategoria[]) => {
+        switch (this.queMostrar) {
+          case 'todos':
+            this.categorias = categorias;
+            this.categoriaActive = 0;
+            break;
+          case 'promociones':
+            this.categorias = categorias;
+            this.categoriaActive = 19;
+            break;
+          case 'ordenar':
+            this.categorias = categorias.filter((categoria: ICategoria) => {
+              return categoria.ES_PEDIDO;
+            });
+            this.categoriaActive = 4;
+            break;
+          default:
+            this.categorias = categorias;
+            this.categoriaActive = 0;
+            break;
+        }
+        !localStorage.getItem('articulos') ?
+          this.getProductos.emit() :
+          this.setProductos.emit();
+      });
+  }
+
+  selectCategoria(index: number, idCategoria?: number) {
+    if (this.categoriaActive === idCategoria) return;
+    this.categoriaActive = idCategoria;
+    this.allActive = idCategoria === 0 ? true : false;
+    this.categorias.forEach((categoria, i) => {
+      categoria.selected = index === i ? true : false;
+    });
+    this.filterItems.emit();
+  }
+
+  @HostListener('scroll', ['$event'])
+  scrollEvent(event: Event) {
+    clearTimeout(this.inactiveScreen.timerReposo);
+    this.inactiveScreen.startTimeOutInactividad();
+  }
+
+  mouseup() {
+    if (!this.timeoutHandler) return;
+    clearInterval(this.timeoutHandler);
+  }
+
+  scrollY(el: HTMLElement, value) {
+    el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
+    this.timeoutHandler = setInterval(() => {
+      el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
+    }, 500);
+  }
+}
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 66fc31e..725df46 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -15,70 +15,13 @@
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
-          <!-- FILTRO CATEGORIAS -->
-          <div class="col-5 col-sm-3 col-xl-2 h-100">
-            <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
-            <div class="row mx-0 h-94 justify-content-center align-items-center">
-              <div class="col-auto btn-effect h-5 cat-btn">
-                <img
-                  draggable="false"
-                  ondragstart="return false;"
-                  (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90-neg"
-                  src="assets/img/ir-color.svg"
-                  (mousedown)="scrollY(templateCategorias, -100)"
-                  (mouseup)="mouseup()"
-                  (mouseleave)="mouseup()">
-              </div>
-              <!-- CATEGORIAS -->
-              <div
-                #templateCategorias
-                class="col-12 px-0 mx-0 box-categorias border border-primary py-1
-                      border-left-0 rounded-right scroll-y cat-box"
-                (scroll)="scrollEvent($event)">
-                <div
-                  class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
-                  [ngClass]="{ 'active rounded shadow px-2': allActive, 'border-bottom-effect': !allActive,
-                            'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
-                  (click)="selectCategoria(-1, 0)">
-                  <img
-                    draggable="false"
-                    ondragstart="return false;"
-                    (contextmenu)="false"
-                    class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
-                    src="assets/img/logo-spot.svg">
-                  <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
-                </div>
-                <div
-                  class="row mx-2 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
-                  [ngClass]="{ 'active rounded shadow px-2': categoria.selected, 'border-bottom-effect': !categoria.selected,
-                            'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
-                  (click)="selectCategoria(i, categoria.id)"
-                  *ngFor="let categoria of categorias; let i = index;">
-                  <img
-                    draggable="false"
-                    ondragstart="return false;"
-                    (contextmenu)="false"
-                    class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
-                    [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
-                    src="{{urlImagenes}}{{categoria.path_imagen}}"
-                    onerror="this.src='assets/img/image-not-found.jpg'">
-                  <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
-                </div>
-              </div>
-              <div class="col-auto btn-effect h-5 cat-btn">
-                <img
-                  draggable="false"
-                  ondragstart="return false;"
-                  (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90"
-                  src="assets/img/ir-color.svg"
-                  (mousedown)="scrollY(templateCategorias, 100)"
-                  (mouseup)="mouseup()"
-                  (mouseleave)="mouseup()">
-              </div>
-            </div>
-          </div>
+          <app-filtro-categorias
+            class="col-5 col-sm-3 col-xl-2 h-100"
+            #filtroCategorias
+            (getProductos)="getProductos()"
+            (setProductos)="setProductos()"
+            (filterItems)="filterItems()">
+          </app-filtro-categorias>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
index d4b2ecb..8b9126a 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
@@ -1,62 +1,4 @@
-$primary: #aa006b;
-
-.box-categorias {
-  height: calc(100% - 100px) !important;
-}
-
-.active {
-  transition: 0.3s;
-  background-color: white;
-  border-bottom: 3px solid $primary !important;
-  border-top: 3px solid $primary !important;
-  border-left: 3px solid $primary !important;
-  border-right: 3px solid $primary !important;
-}
-
-.border-bottom-effect {
-  border: none;
-  position: relative;
-  &:hover {
-    border: none;
-  }
-  &::after {
-    content: "";
-    position: absolute;
-    width: 0px;
-    height: 3px;
-    left: 50%;
-    bottom: 0;
-    background-color: $primary;
-    transition: all ease-in-out 0.2s;
-  }
-  &:hover::after {
-    width: 100%;
-    left: 0;
-  }
-}
-
-.card {
-  border: none;
-}
-
-.line-height-sm {
-  line-height: 1.2;
-}
-
 #content.media-pantalla,
 #boxCarrito.media-pantalla {
   max-height: 60% !important;
 }
-
-.cat-content.media-pantalla {
-  margin: 0.5rem 0.7rem !important;
-  height: 76% !important;
-}
-
-.cat-box.media-pantalla {
-  height: calc(100% - 85px) !important;
-}
-
-.cat-btn.media-pantalla {
-  height: 7% !important;
-}
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index 8dfcd3e..beedf7b 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, AfterViewInit } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
@@ -11,6 +11,7 @@ import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive
 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
 import { trigger, state, style, transition, animate } from '@angular/animations';
+import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 
 @Component({
   selector: 'app-seleccion-articulos',
@@ -29,21 +30,18 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
     ])
   ]
 })
-export class SeleccionArticulosComponent implements OnInit, OnDestroy {
+export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
   showSpinner = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
-  queMostrar = 'todos';
-  categoriaActive = null;
-  categorias: ICategoria[] = [];
   searchTerm = '';
   ordenandoByVendidos = true;
-  allActive = true;
   modalRef: BsModalRef;
   total = 0;
+  @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
 
   constructor(
     public articuloService: ArticuloService,
@@ -53,8 +51,10 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     private inactiveScreen: InactiveScreenService,
   ) { }
 
-  ngOnInit() {
-    this.getCategorias();
+  ngOnInit() { }
+
+  ngAfterViewInit(): void {
+    this.filtroCategorias.getCategorias();
     this.mediaPantalla();
   }
 
@@ -64,41 +64,12 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     }
   }
 
-  getCategorias() {
-    this.categoriaService.getAll()
-      .subscribe((categorias: ICategoria[]) => {
-        switch (this.queMostrar) {
-          case 'todos':
-            this.categorias = categorias;
-            this.categoriaActive = 0;
-            break;
-          case 'promociones':
-            this.categorias = categorias;
-            this.categoriaActive = 19;
-            break;
-          case 'ordenar':
-            this.categorias = categorias.filter((categoria: ICategoria) => {
-              return categoria.ES_PEDIDO;
-            });
-            this.categoriaActive = 4;
-            break;
-          default:
-            this.categorias = categorias;
-            this.categoriaActive = 0;
-            break;
-        }
-        !localStorage.getItem('articulos') ?
-          this.getProductos() :
-          this.setProductos();
-      });
-  }
-
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
-        if (this.queMostrar === 'ordenar') {
-          this.categorias.forEach((categoria: ICategoria) => {
+        if (this.filtroCategorias.queMostrar === 'ordenar') {
+          this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
@@ -119,12 +90,12 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
   }
 
   filterItems() {
-    if (this.categoriaActive === 0) {
+    if (this.filtroCategorias.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
-      return x.categoria_selfservice === this.categoriaActive;
+      return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
     });
     this.ordenar();
   }
@@ -137,16 +108,6 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
     }
   }
 
-  selectCategoria(index: number, idCategoria?: number) {
-    if (this.categoriaActive === idCategoria) return;
-    this.categoriaActive = idCategoria;
-    this.allActive = idCategoria === 0 ? true : false;
-    this.categorias.forEach((categoria, i) => {
-      categoria.selected = index === i ? true : false;
-    });
-    this.filterItems();
-  }
-
   selectArticulo(articulo: IArticulo) {
     this.getByID(articulo.id);
   }
@@ -239,7 +200,9 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy {
 
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
-      $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla');
+      $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria')
+        .addClass('media-pantalla')
+        .addBack('media-pantalla');
     }
   }
 }
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
index 894822c..f6139ed 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
@@ -11,6 +11,7 @@ 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';
+import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/arti
     SinonimoComponent,
     ConfirmacionComponent,
     ArticuloCantidadComponent,
+    FiltroCategoriasComponent,
   ],
   imports: [
     CommonModule,
diff --git a/src/scss/styles-bootstrap.scss b/src/scss/styles-bootstrap.scss
index fb055f8..ffec04b 100644
--- a/src/scss/styles-bootstrap.scss
+++ b/src/scss/styles-bootstrap.scss
@@ -66,4 +66,8 @@ $border-radius-sm: 0.5rem;
   margin-bottom: 50px !important;
 }
 
+.card {
+  border: none !important;
+}
+
 @import "node_modules/bootstrap/scss/bootstrap";