diff --git a/src/app/components/master/master.component.html b/src/app/components/master/master.component.html
index c4e74a3..f5a23bf 100644
--- a/src/app/components/master/master.component.html
+++ b/src/app/components/master/master.component.html
@@ -11,7 +11,7 @@
   </div>
 
   <!-- SIDEBAR -->
-  <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient p-2">
+  <app-sidebar class="sidebar position-fixed float-right col-2 col-md-2 vh-100 bg-primary-gradient px-1 pt-2">
   </app-sidebar>
 
 </div>
diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index 2c813ab..b57f6c7 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -1,92 +1,99 @@
-<div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
+<div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
 
   <!-- ENCABEZADO -->
-  <p class="h4 border-bottom border-white text-white mt-4 pb-2">
+  <p class="h4 border-bottom border-white text-white pb-2">
     Mi compra
     <i class="fa fa-shopping-cart" aria-hidden="true"></i>
   </p>
 
   <div class="overflow-scroll px-1 mb-2 w-100">
     <!-- PRODUCTOS CARRITO -->
-    <div
-      class="my-2 bg-white border-0 rounded-sm"
-      *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
-      <img class="w-100 m-auto rounded-sm shadow" src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
-      <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
-        <div class="col-12 p-0 pt-2 text-left my-auto">
-          <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
-        </div>
-        <div class="col-12 pr-1 text-right h6 my-auto ">
-          <p class="m-0">{{producto.PreVen | currency}}</p>
-        </div>
-      </div>
-
-      <!-- BOTONES -->
-      <div class="row m-0 d-flex justify-content-between">
+    <div class="row m-0">
+      <div
+        class="col p-0 my-1 bg-white border-0 rounded-sm"
+        *ngFor="let producto of productosCarrito">
+        <div class="row m-0">
+          <div class="col-6 pl-1 pr-0 my-auto">
+            <img
+              class="w-100 float-left rounded-sm shadow"
+              src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
+          </div>
+          <div class="col-6 px-1">
+            <!-- BOTONES -->
+            <div class="row m-0 d-flex justify-content-between">
 
-        <!-- SUMAR - RESTAR CANTIDAD -->
-        <div class="col-auto px-1 my-2">
-          <div class="btn-group-sm btn-group float-left my-auto" role="group">
-            <button
-              type="button"
-              class="btn btn-light btn-sm my-auto border shadow"
-              (click)="aumentarCantidad(producto)">
-              <i class="fa fa-plus" aria-hidden="true"></i>
-            </button>
-            <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow">
-              <small>{{producto.cantidad}}</small>
+              <!-- SUMAR - RESTAR CANTIDAD -->
+              <div class="col p-1">
+                <div class="btn-group-sm btn-group float-left" role="group">
+                  <button
+                    type="button"
+                    class="btn btn-light btn-sm border shadow"
+                    (click)="aumentarCantidad(producto)">
+                    <i class="fa fa-plus" aria-hidden="true"></i>
+                  </button>
+                  <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
+                    <small>{{producto.cantidad}}</small>
+                  </div>
+                  <button
+                    type="button"
+                    class="btn btn-light btn-sm border shadow"
+                    (click)="restarCantidad(producto)">
+                    <i class="fa fa-minus" aria-hidden="true"></i>
+                  </button>
+                </div>
+              </div>
+      
+              <!-- PERSONALIZAR -->
+              <div class="col p-1">
+                <button
+                  *ngIf="producto.tieneSinonimos"
+                  type="button"
+                  class="btn btn-light btn-sm float-left border shadow"
+                  (click)="personalizarPromo(producto, i)">
+                  <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
+                </button>
+              </div>
+      
+              <!-- BORRAR -->
+              <div class="col p-1">
+                <button
+                  type="button"
+                  class="btn btn-secondary btn-sm float-right shadow"
+                  (click)="deleteProducto(producto, i)">
+                  <i class="fa fa-trash" aria-hidden="true"></i>
+                </button>
+              </div>
             </div>
-            <button
-              type="button"
-              class="btn btn-light btn-sm my-auto border shadow"
-              (click)="restarCantidad(producto)">
-              <i class="fa fa-minus" aria-hidden="true"></i>
-            </button>
           </div>
         </div>
-
-        <!-- PERSONALIZAR -->
-        <div class="col-auto px-1 my-2">
-          <button
-            *ngIf="producto.tieneSinonimos"
-            type="button"
-            class="btn btn-light btn-sm my-auto float-left border shadow"
-            (click)="personalizarPromo(producto, i)">
-            <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
-          </button>
-        </div>
-
-        <!-- BORRAR -->
-        <div class="col-auto px-1 my-2">
-          <button
-            type="button"
-            class="btn btn-secondary btn-sm my-auto shadow"
-            (click)="deleteProducto(producto, i)">
-            <i class="fa fa-trash" aria-hidden="true"></i>
-          </button>
+        <div class="row m-0 shadow rounded-sm">
+          <div class="col px-2">
+            <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
+            <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
+          </div>          
         </div>
       </div>
     </div>
   </div>
 
   <!-- TOTAL -->
-  <div class="card rounded-top-sm mt-auto blue-gradient border-0">
-    <div class="card-body row">
-      <div class="col-12">
+  <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
+    <div class="card-body p-2 pt-3 row m-0">
+      <div class="col-12 p-0">
         <p
           class="h4 border-bottom border-secondary text-secondary pb-2">
           ({{getCantidadProductos()}}) artículos
         </p>
-        <p class="h3 text-secondary">Total</p>
-        <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
+        <p class="h4 text-secondary">Total</p>
+        <p class="h4 font-weight-bold">{{getTotal() | currency}}</p>
       </div>
-      <div class="col-12">
+      <div class="col-12 p-0">
         <button
           *ngIf="getCantidadProductos() > 0"
           type="button"
           class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
           routerLink="/confirmacion-carrito">
-          <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
+          <span class="font-weight-bold pr-1">Pagar</span>
           <i class="fa fa-check text-success" aria-hidden="true"></i>
         </button>
         <button
diff --git a/src/styles.scss b/src/styles.scss
index 04c4ee0..08319c2 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -53,7 +53,7 @@ body {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
-    width: 1em;
+    width: .75em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;