diff --git a/app/index.html b/app/index.html
index f734cb1..42b10c1 100644
--- a/app/index.html
+++ b/app/index.html
@@ -73,6 +73,45 @@
             <div class="header-content-inner">
                 <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee</p>
                 <hr>
+                
+                <div class="container">
+                  <div class="row">
+                    <div class="col-md-10">
+                      <div class="carousel slide multi-item-carousel" id="theCarousel">
+                        <div class="carousel-inner"  id="furnitures" ng-controller="ngrCtrl">
+                          <div class="item active">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/2.jpg" class="img-responsive"></a></div>
+                          </div>
+                          <div class="item">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/5.jpg" class="img-responsive"></a></div>
+                          </div>
+                          <div class="item">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/12.jpg" class="img-responsive"></a></div>
+                          </div>
+                          <div class="item">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/13.jpg" class="img-responsive"></a></div>
+                          </div>
+                          <div class="item">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/14.jpg" class="img-responsive"></a></div>
+                          </div>
+                          <div class="item">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/17.jpg" class="img-responsive"></a></div>
+                          </div>
+                          <!-- add  more items here -->
+                          <!-- Example item start:  -->
+
+                          <div class="item">
+                            <div class="col-xs-2"><a href="#1"><img src="/img/27.jpg" class="img-responsive"></a></div>
+                          </div>
+
+                          <!--  Example item end -->
+                        </div>
+                        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
+                        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <div class="container">
                     <div class="row">
                         <div class="col-md-12" >
@@ -89,20 +128,6 @@
         </div>
     </header>
 
-    <section class="bg-primary" id="about">
-        <div class="container">
-            <div class="row">
-                <div class="col-md-12" >
-                   <div class="row" id="furnitures" ng-controller="ngrCtrl">
-                       <!--<div ng-repeat="toto in collection">{{ collection[$index].titre }}-->
-                    <items ng-repeat="furnitures in collection"></items>
-
-                   </div>
-                </div>
-            </div>
-        </div>
-        
-    </section>
       
       
 
diff --git a/app/scripts/main.js b/app/scripts/main.js
index 461be2f..8f42d14 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -61,4 +61,28 @@ monarchLiving.directive('items', function(){
 monarchLiving.controller('ngrCtrl', function($scope){
     $scope.collection = ['img/2.jpg', 'img/5.jpg', 'img/9.jpg','img/12.jpg', 'img/13.jpg', 'img/20.jpg', 'img/27.jpg', 'img/8.jpg', 'img/14.jpg', 'img/17.jpg', 'img/19.jpg', 'img/24.jpg'];
        
+});
+
+// Instantiate the Bootstrap carousel
+$('.multi-item-carousel').carousel({
+  interval: 4000
+});
+
+// for every slide in carousel, copy the next slide's item in the slide.
+// Do the same for the next, next item.
+$('.multi-item-carousel .item').each(function(){
+  var next = $(this).next();
+  if (!next.length) {
+    next = $(this).siblings(':first');
+  }
+  next.children(':first-child').clone().appendTo($(this));
+  
+  for (var i=0;i<4;i++) {
+    next=next.next();
+    if (!next.length) {
+      next = $(this).siblings(':first');
+    }
+
+    next.children(':first-child').clone().appendTo($(this));
+  }
 });
\ No newline at end of file
diff --git a/app/templates/items.html b/app/templates/items.html
index d0c483f..eacdf0a 100644
--- a/app/templates/items.html
+++ b/app/templates/items.html
@@ -1,6 +1,11 @@
-              <div class="col-sm-2 col-md-2">
+              <!--<div class="col-sm-2 col-md-2">
                 <a href="#" class="thumbnail">
                   <img ng-src="{{furnitures}}" alt="...">
 
                 </a>
-              </div>
\ No newline at end of file
+              </div>-->
+
+
+                <div class="item active">
+                    <div class="col-xs-2"><a href="#1"><img ng-src="{{furnitures}}" class="img-responsive"></a></div>
+                </div>
\ No newline at end of file