diff --git a/src/app/app.component.html b/src/app/app.component.html
index 5fc2806..5ccade1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <app-navigation></app-navigation>
 
 <main role="main">
-  <app-jumbotron title="Welcome to our store" description="Browse our collection of license plates below"></app-jumbotron>
+  <app-carousel></app-carousel>
 
   <div class="container">
     <div class="row" >
diff --git a/src/app/carousel/carousel.component.html b/src/app/carousel/carousel.component.html
index c237b01..89783b2 100644
--- a/src/app/carousel/carousel.component.html
+++ b/src/app/carousel/carousel.component.html
@@ -1,20 +1,16 @@
 <div class="carousel slide">
   <div class="carousel-inner">
-    <div class="carousel-item active">
-      <!--<app-jumbotron title="Welcome to our store" description="Browse our collection of license plates below"></app-jumbotron> -->
-    </div>
-    <div class="carousel-item">
-      <!--<app-jumbotron title="We have 20,000 plates" description="From all 50 US states, all years available"></app-jumbotron> -->
-    </div>
-    <div class="carousel-item">
-      <!--<app-jumbotron title="Browse our collection" description="Use the search box to find the plate you're looking for"></app-jumbotron> -->
+    <div [ngSwitch]="slide" class="carousel-item active">
+      <app-jumbotron *ngSwitchCase="0" title="Welcome to our store" description="Browse our collection of license plates below"></app-jumbotron>
+      <app-jumbotron *ngSwitchCase="1" title="We have 20,000 plates" description="From all 50 US states, all years available"></app-jumbotron>
+      <app-jumbotron *ngSwitchCase="2" title="Browse our collection" description="Use the search box to find the plate you're looking for"></app-jumbotron>
     </div>
   </div>
-  <a class="carousel-control-prev" role="button">
+  <a class="carousel-control-prev" role="button" (click)="previousSlide()">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="carousel-control-next" role="button">
+  <a class="carousel-control-next" role="button" (click)="nextSlide()">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
diff --git a/src/app/carousel/carousel.component.ts b/src/app/carousel/carousel.component.ts
index 5e8cf41..408e272 100644
--- a/src/app/carousel/carousel.component.ts
+++ b/src/app/carousel/carousel.component.ts
@@ -1,15 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-carousel',
   templateUrl: './carousel.component.html',
   styleUrls: ['./carousel.component.css']
 })
-export class CarouselComponent implements OnInit {
+export class CarouselComponent {
 
-  constructor() { }
+  slide = 0;
 
-  ngOnInit() {
+  constructor() {
+    setInterval(() => this.nextSlide(), 5000);
   }
 
+  nextSlide() {
+    this.slide = (this.slide + 1) % 3 ;
+  }
+
+  previousSlide() {
+     this.slide = (this.slide === 0 ? 2 : this.slide -1);
+  }
 }