diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a9f5ee4..dbd4fff 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -6,6 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
+import { CarouselModule } from 'ngx-bootstrap/carousel';
 //#endregion
 
 //#region Keyboard
@@ -59,7 +60,8 @@ import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.
     PopoverModule.forRoot(),
     BrowserAnimationsModule,
     MatKeyboardModule,
-    MatButtonModule
+    MatButtonModule,
+    CarouselModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 6537546..85c125f 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -18,26 +18,24 @@
         <!-- INFO DE BIENVENIDA -->
         <div class="row my-auto h-50 w-100">
           <div class="col-3 col-lg-4 offset-lg-1 h-100 my-auto">
-
-            <div id="carouselExampleSlidesOnly" class="carousel slide h-100" data-ride="carousel">
-              <div class="carousel-inner h-100">
-                <div class="carousel-item active h-100">
-                  <img
-                    src="{{apiUrl}}/imagenes/coca1.jpg"
-                    class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
-                </div>                
-                <div class="carousel-item h-100">
-                  <img
-                    src="{{apiUrl}}/imagenes/coca2.jpg"
-                    class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
-                </div>                
-                <div class="carousel-item h-100">
-                  <img
-                    src="{{apiUrl}}/imagenes/coca3.jpg"
-                    class="d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
-                </div>                
-              </div>
-            </div>
+            <!-- CAROUSEL -->
+            <carousel [showIndicators]="false" [interval]="1500">
+              <slide class="h-100">
+                <img
+                  src="{{apiUrl}}/imagenes/coca1.jpg"
+                  class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
+              </slide>
+              <slide class="h-100">
+                <img
+                  src="{{apiUrl}}/imagenes/coca2.jpg"
+                  class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
+              </slide>
+              <slide class="h-100">
+                <img
+                  src="{{apiUrl}}/imagenes/coca3.jpg"
+                  class="fade-in d-block rounded-sm shadow mw-100 h-100 w-auto mx-auto">
+              </slide>
+            </carousel>
 
           </div>
           <div class="col-9 col-lg-7 text-center text-white my-auto">
diff --git a/src/app/components/inicio/inicio.component.html b/src/app/components/inicio/inicio.component.html
index 307be7a..5bcf370 100644
--- a/src/app/components/inicio/inicio.component.html
+++ b/src/app/components/inicio/inicio.component.html
@@ -26,22 +26,29 @@
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
-          <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
-            <div class="carousel-inner">
-              <div class="carousel-item active">
-                <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
-              </div>
-              <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
-              </div>
-              <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
-              </div>
-              <div class="carousel-item">
-                <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
-              </div>
-            </div>
-          </div>
+          <!-- CAROUSEL -->
+          <carousel [showIndicators]="false" [interval]="1500">
+            <slide class="h-100">
+              <img
+                src="{{apiUrl}}/imagenes/beldent.jpg"
+                class="fade-in d-block w-75 m-auto rounded">
+            </slide>
+            <slide class="h-100">
+              <img
+                src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg"
+                class="fade-in d-block w-75 m-auto rounded">
+            </slide>
+            <slide class="h-100">
+              <img
+                src="{{apiUrl}}/imagenes/Surtido bagley.jpg"
+                class="fade-in d-block w-75 m-auto rounded">
+            </slide>
+            <slide class="h-100">
+              <img
+                src="{{apiUrl}}/imagenes/yogurisimo.jpg"
+                class="fade-in d-block w-75 m-auto rounded">
+            </slide>
+          </carousel>
         </div>
 
         <!-- ORDENAR -->
diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index 71bbd8f..b29dddb 100644
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -33,7 +33,7 @@
               (click)="aumentarCantidad(producto)">
               <i class="fa fa-plus" aria-hidden="true"></i>
             </button>
-            <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
+            <div class="bg-white border border-white px-2 my-auto text-dark h5 shadow">
               <small>{{producto.cantidad}}</small>
             </div>
             <button
diff --git a/src/assets/scss/bootstrap-override.scss b/src/assets/scss/bootstrap-override.scss
index c80ffae..2734ee5 100644
--- a/src/assets/scss/bootstrap-override.scss
+++ b/src/assets/scss/bootstrap-override.scss
@@ -68,4 +68,15 @@ $theme-colors: (
   }
 }
 
+.carousel-control {
+  visibility: hidden !important;
+}
+
+.carousel,  .carousel-inner, .item {
+  height: 100% !important;
+  &:focus{
+    outline: none !important;
+  }
+}
+
 @import "../../../node_modules/bootstrap/scss/bootstrap";