diff --git a/assets/css/home.css b/assets/css/home.css
index 229e5e5d..6a432dd6 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -6,53 +6,44 @@ section#hero-content {
   height: auto;
 }
 
-#carousel {
-  max-width: 70%;
-  min-height: 400px;
-  margin: 0 auto;
-}
-
-#carousel .slide img {
-  max-width: 100%;
-}
-
-#carousel .slide .container-main-image {
+.carousel-item {
+  height: 80vh;
+  min-height: 350px;
+  background: no-repeat center center scroll;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
   position: relative;
 }
 
-#carousel .slide .overlay {
+.carousel-caption {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.tns-outer {
-  position: relative;
+  top: 50%;
+  transform: translateY(-20%);
 }
 
-.tns-controls button {
-  background: none;
-  border: none;
-  outline: none;
-  color: white;
-  font-weight: 300;
+.carousel-caption h3,
+.carousel-caption p {
+  color: #fff;
+  display: inline-block;
+  text-shadow: none;
+  margin-bottom: 20px;
+}
+.carousel-caption h3 {
+  background: rgba(0, 0, 0, 0.8);
+  padding: 35px 43px;
   font-size: 4rem;
-}
-.tns-controls .left-arrow {
-  left: 10px;
-}
-
-.tns-controls .right-arrow {
-  right: 10px;
-}
-
-.tns-controls .left-arrow,
-.tns-controls .right-arrow {
-  position: absolute;
-  top: 45%;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.carousel-caption p {
+  background: #ccc;
+  opacity: 0.9;
+  color: black;
+  padding: 10px 20px;
+  font-size: 1.5rem;
+  font-weight: 300;
 }
 
 .intro-div {
@@ -92,3 +83,21 @@ section#hero-content {
 .centered .display-1{
   font-size: 5rem;
 }
+@media (min-width: 320px) and (max-width: 1280px) {
+.carousel-item {
+    height: 60vh;
+  }
+.carousel-caption {
+  top: 30%;
+  transform: translateY(-30%);
+}
+.carousel-caption h3 {
+  padding: 35px 43px;
+  font-size: 2rem;
+  font-weight: 600;
+}
+.carousel-caption p {
+  font-size: 1.2rem
+}
+  
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4c2d4185..de0bf425 100644
--- a/index.html
+++ b/index.html
@@ -108,59 +108,85 @@
 
         Arrows are pretty thick but that's what we get from font awesome free edition
       ::: -->
-      <div id="carousel">
-        <div class="slide">
-          <div class="container-main-image">
-            <img
-              src="https://source.unsplash.com/1600x900/?christmas"
-              alt="random unsplash image"
-            />
-            <div class="overlay"></div>
-            <div class="centered">
-              <h1 class="display-1">Welcome to Santafied 🎅</h1>
-            </div>
-          </div>
-        </div>
-        <div class="slide">
-          <div class="container-main-image">
-            <img
-              src="https://source.unsplash.com/1600x900/?christmas gift"
-              alt="random unsplash image"
-            />
-            <div class="overlay"></div>
-            <div class="centered">
-              <h1 class="display-1">Christmas Gifts 🎁</h1>
-            </div>
-          </div>
-        </div>
-        <div class="slide">
-          <div class="container-main-image">
-            <img
-              src="https://source.unsplash.com/1600x900/?christmas"
-              alt="random unsplash image"
-            />
-            <div class="overlay"></div>
-            <div class="centered">
-              <h1 class="display-1">Christmas Movies 📽️</h1>
-            </div>
-          </div>
-        </div>
-
-        <div class="slide">
-          <div class="container-main-image">
-            <img
-              src="https://source.unsplash.com/1600x900/?christmas food"
-              alt="random unsplash image"
-            />
-            <div class="overlay"></div>
-            <div class="centered">
-              <h1 class="display-1">Christmas Recipies 🍰</h1>
-            </div>
-          </div>
-
-          <p>slide 4</p>
-        </div>
-      </div>
+      <section id="hero-content">
+			<div>
+				<div id="carousel-indecator" class="carousel slide" data-ride="carousel">
+					<ol class="carousel-indicators">
+						<li data-target="#carousel-indecator" data-slide-to="0" class="active"></li>
+						<li data-target="#carousel-indecator" data-slide-to="1"></li>
+						<li data-target="#carousel-indecator" data-slide-to="2"></li>
+						<li data-target="#carousel-indecator" data-slide-to="3"></li>
+					</ol>
+					<div class="carousel-inner" role="listbox">
+						<!-- Slide One -->
+						<div class="carousel-item active">
+							<img
+								src="https://images.unsplash.com/photo-1482638591678-a11589a805f2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
+								alt=""
+							/>
+							<div class="carousel-caption">
+								<h3>Welcome to Santafied 🎅</h3>
+								<p>
+									Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
+									dolor.
+								</p>
+							</div>
+						</div>
+						<!-- Slide Two -->
+						<div class="carousel-item">
+							<img
+								src="https://images.unsplash.com/photo-1450198342040-c32e6d1ef2e4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
+								alt=""
+							/>
+							<div class="carousel-caption">
+								<h3>Christmas Gifts 🎁</h3>
+								<p>
+									Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
+									dolor.
+								</p>
+							</div>
+						</div>
+						<!-- Slide Three -->
+						<div class="carousel-item">
+							<img
+								src="https://images.unsplash.com/photo-1481223014211-199b3e8f0002?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=1080&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=80&w=1920"
+								alt=""
+							/>
+							<div class="carousel-caption">
+								<h3>Christmas Movies 📽️</h3>
+								<p>
+									Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
+									dolor.
+								</p>
+							</div>
+						</div>
+						<!-- Slide Four -->
+						<div class="carousel-item">
+							<img
+								src="https://images.unsplash.com/photo-1451408446993-f6a39d2e667e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=80"
+								alt=""
+							/>
+							<div class="carousel-caption">
+								<h3>Christmas Recipies 🍰</h3>
+								<p>
+									Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget cursus
+									dolor.
+								</p>
+							</div>
+						</div>
+					</div>
+					<a class="carousel-control-prev" href="#carousel-indecator" role="button" data-slide="prev">
+						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+						<span class="sr-only">Previous</span>
+					</a>
+					<a class="carousel-control-next" href="#carousel-indecator" role="button" data-slide="next">
+						<span class="carousel-control-next-icon" aria-hidden="true"></span>
+						<span class="sr-only">Next</span>
+					</a>
+				</div>
+			</div>
+		</section>
+  
     </section>
     <!-- Page content -->
     <section class="page-content">