diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.html b/src/app/modules/seleccion-productos/seleccion-productos.component.html
index a97ef69..4e83e60 100644
--- a/src/app/modules/seleccion-productos/seleccion-productos.component.html
+++ b/src/app/modules/seleccion-productos/seleccion-productos.component.html
@@ -23,38 +23,50 @@
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 align-items-center">
               <div class="col-12 h-5">
-                <img
-                  draggable="false"
-                  ondragstart="return false;"
-                  (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90-neg"
-                  src="assets/img/ir-color.svg"
+                <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)="scroll(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
               </div>
               <div #elem class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
-                <div
-                  class="row mx-4 mb-2 h-32 justify-content-center tab"
+                <div class="row mx-4 mb-2 h-32 justify-content-center tab"
                   [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
-                  (click)="selectCategoria(i)"
-                  *ngFor="let categoria of categorias; let i = index;">
+                  (click)="selectCategoria(i)" *ngFor="let categoria of categorias; let i = index;">
                   <img class="col-12 h-50 align-self-end" src="assets/img/ir-color.svg">
-                  <small
-                    class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
+                  <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
                   </small>
                 </div>
               </div>
               <div class="col-12 h-5">
-                <img
-                  draggable="false"
-                  ondragstart="return false;"
-                  (contextmenu)="false"
-                  class="h-100 d-block mx-auto rotate-90"
-                  src="assets/img/ir-color.svg"
-                  (mousedown)="scroll(elem, 80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
+                <img draggable="false" ondragstart="return false;" (contextmenu)="false"
+                  class="h-100 d-block mx-auto rotate-90" src="assets/img/ir-color.svg" (mousedown)="scroll(elem, 80)"
+                  (mouseup)="mouseup()" (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
-          <div class="col-md-9 col-xl-10 bg-danger">
+          <!-- LISTA DE ARTICULOS -->
+          <div class="col-md-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
+            <div class="row row-cols-2 row-cols-sm-3 row-cols-xl-4 h-100">
+              <!-- ARTICULO -->
+              <div class="col px-2 py-4 h-50" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
+                <div class="card h-100">
+                  <img src="assets/img/ir-color.svg" class="card-img-top h-55">
+                  <div class="row mx-0 py-1 h-45 justify-content-center">
+                    <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
+                    <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
+                    <div class="col-12 px-1 align-self-end btn-effect h-auto">
+                      <div class="row mx-0 justify-content-between bg-primary badge-pill">
+                        <div class="col px-0 align-self-center text-white text-right">
+                          {{55 | currency}}
+                        </div>
+                        <div class="col-5 px-0">
+                          <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -64,4 +76,4 @@
     </div>
   </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/seleccion-productos/seleccion-productos.component.scss b/src/app/modules/seleccion-productos/seleccion-productos.component.scss
index 47a3ae8..9726227 100644
--- a/src/app/modules/seleccion-productos/seleccion-productos.component.scss
+++ b/src/app/modules/seleccion-productos/seleccion-productos.component.scss
@@ -27,7 +27,7 @@ $primary: #aa006b;
     height: 3px;
     left: 50%;
     bottom: 0;
-    background-color:  $primary;
+    background-color: $primary;
     transition: all ease-in-out 0.2s;
   }
   &:hover::after {
@@ -35,3 +35,7 @@ $primary: #aa006b;
     left: 0;
   }
 }
+
+.card {
+  border: none;
+}