diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.html b/src/app/modules/seleccion-productos/seleccion-productos.component.html
index 69026d1..228977b 100644
--- a/src/app/modules/seleccion-productos/seleccion-productos.component.html
+++ b/src/app/modules/seleccion-productos/seleccion-productos.component.html
@@ -29,7 +29,7 @@
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
-                  (mousedown)="scroll(templateCategorias, -80)"
+                  (mousedown)="scrollY(templateCategorias, -80)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
@@ -55,7 +55,7 @@
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
-                  (mousedown)="scroll(templateCategorias, 80)"
+                  (mousedown)="scrollY(templateCategorias, 80)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
@@ -92,9 +92,9 @@
     <div class="row mx-0 h-20 justify-content-center">
       <div class="col-11 h-100 px-0 border border-primary rounded">
         <div class="row mx-0 h-15 border-bottom border-primary">
-          <p class="col align-self-center"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
+          <p class="col align-self-center text-truncate"><small>PRODUCTOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
-        <div class="row h-85 mx-auto">
+        <div class="row h-85 mx-0 justify-content-between">
           <div class="col-auto h-20 align-self-center">
             <img
               draggable="false"
@@ -102,20 +102,20 @@
               (contextmenu)="false"
               class="img-ir rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
-              (mousedown)="scroll(templateCarrito, -80)"
+              (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
-          <div class="col h-100">
-            <div #templateCarrito class="row h-100 mx-0 scroll-x">
+          <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100">
+            <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x">
               <div
-                class="col-12 col-md-3 col-xl-2 p-2 h-100"
+                class="col-10 col-sm-4 col-lg-2 col-xl-auto px-2 px-xl-4 h-auto align-self-center border-right border-primary"
                 (click)="selectCategoria(i)"
-                *ngFor="let categoria of [{},{},{},{},{},{},{}]; let i = index;">
+                *ngFor="let categoria of [{},{},{},{},{},{},{},{},{},{},{},{},{},{}]; let i = index;">
                 <img
-                  class="h-55 mx-auto"
+                  class="d-block h-55 mx-auto"
                   src="assets/img/ir-color.svg">
-                <p class="mt-1 text-center text-primary"><small>{{'lala'}}</small></p>
+                <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
               </div>
             </div>
           </div>
@@ -126,7 +126,7 @@
               (contextmenu)="false"
               class="img-ir"
               src="assets/img/ir-fondo-color.svg"
-              (mousedown)="scroll(templateCarrito, -80)"
+              (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
@@ -135,4 +135,4 @@
     </div>
   </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.ts b/src/app/modules/seleccion-productos/seleccion-productos.component.ts
index 27703f4..5cb27d7 100644
--- a/src/app/modules/seleccion-productos/seleccion-productos.component.ts
+++ b/src/app/modules/seleccion-productos/seleccion-productos.component.ts
@@ -1,22 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: 'app-seleccion-productos',
-  templateUrl: './seleccion-productos.component.html',
-  styleUrls: ['./seleccion-productos.component.scss']
+  selector: "app-seleccion-productos",
+  templateUrl: "./seleccion-productos.component.html",
+  styleUrls: ["./seleccion-productos.component.scss"]
 })
 export class SeleccionProductosComponent implements OnInit {
   timeoutHandler: any;
   categorias = [
     { id: 1, selected: false },
     { id: 2, selected: false },
-    { id: 3, selected: false },
+    { id: 3, selected: false }
   ];
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
   selectCategoria(index: number) {
     this.categorias.forEach((categoria, i) => {
@@ -29,11 +28,17 @@ export class SeleccionProductosComponent implements OnInit {
     clearInterval(this.timeoutHandler);
   }
 
-  scroll(el: HTMLElement, value) {
-    el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
+  scrollY(el: HTMLElement, value) {
+    el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
-      el.scroll({ behavior: 'smooth', top: (value + el.scrollTop) });
+      el.scroll({ behavior: "smooth", top: value + el.scrollTop });
     }, 500);
   }
 
+  scrollX(el: HTMLElement, value) {
+    el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
+    this.timeoutHandler = setInterval(() => {
+      el.scroll({ behavior: "smooth", left: value + el.scrollLeft });
+    }, 500);
+  }
 }