diff --git a/assets/img/header-image-2.jpg b/assets/img/header-image-2.jpg
new file mode 100644
index 00000000..11131952
Binary files /dev/null and b/assets/img/header-image-2.jpg differ
diff --git a/assets/img/header-image-3.jpg b/assets/img/header-image-3.jpg
new file mode 100644
index 00000000..b24c71b6
Binary files /dev/null and b/assets/img/header-image-3.jpg differ
diff --git a/index.html b/index.html
index 282af802..e88b1af8 100755
--- a/index.html
+++ b/index.html
@@ -4,19 +4,79 @@
 ---
 
 <!-- Header -->
-<div class="page-header header-filter" data-parallax="true"
-  style="background-image: url('assets/img/header-image.webp')">
-  <div class="container">
-    <div class="title text-left">
-      <h1>St. Anthony's College</h1>
-      <p style="font-family: 'Roboto'; font-size: 20px; font-weight: 400;">
-        Since 1854
-      </p>
+
+
+
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+  <ol class="carousel-indicators">
+    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+  </ol>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <div class="page-header header-filter" style="background-image: url('./assets/img/header-image.webp');">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 ml-auto mr-auto">
+              <div class="title text-left">
+                <h1>LUX DE COELO</h1>
+                <p style="font-family: 'Roboto'; font-size: 20px; font-weight: 400;">
+                  Since 1854
+                </p>
+              </div>
+              <a href="{{ site.baseurl }}/history" class="btn btn-primary btn-sm">OUR HISTORY</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <div class="page-header header-filter" style="background-image: url('./assets/img/header-image-2.jpg');">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 ml-auto mr-auto">
+              <div class="title text-left">
+                <h1>168<sup>th</sup> College Day</h1>
+                <p style="font-family: 'Roboto'; font-size: 20px; font-weight: 400;">
+                  Since 1854
+                </p>
+              </div>
+              <a href="{{ site.baseurl }}/history" class="btn btn-primary btn-sm">OUR HISTORY</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <div class="page-header header-filter" style="background-image: url('./assets/img/header-image-3.jpg');">
+        <div class="container">
+          <div class="row">
+            <div class="col-md-12 ml-auto mr-auto text-right">
+              <div class="title">
+                <h1>Hill Country Battle Of The Blues<br> SACK vs TCK</h1>
+                <p style="font-family: 'Roboto'; font-size: 20px; font-weight: 400;">
+                  Since 1854
+                </p>
+              </div>
+              <a href="{{ site.baseurl }}/history" class="btn btn-primary btn-sm float-end">OUR HISTORY</a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    <a href="{{ site.baseurl }}/history" class="btn btn-primary btn-sm">OUR HISTORY</a>
   </div>
+  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="sr-only">Next</span>
+  </a>
 </div>
-<!-- End of Header -->
+
+<!-- //Header -->
 
 <!-- Resource Section -->
 <div id="resource-section">
@@ -64,10 +124,10 @@ <h4 class="card-title">Nam aliquam bibendum ullamcorper. Praesent tempor</h4>
             <button type="button" class="btn btn-class btn-sm">SEE MORE</button>
           </div>
         </div>
-        End of News section -->
+        //News section -->
 
       <!-- Quick Access section -->
-      <div class="section pt-0">
+      <div class="section pt-0 ">
         <h2 class="section-name"> Quick Access </h2>
         <div class="d-flex justify-content-center">
           <div class="row" style="width: 71rem;">
@@ -115,7 +175,7 @@ <h4 class="card-title mt-2">Google Classroom</h4>
           </div>
         </div>
       </div>
-      <!-- End of Quick Access section -->
+      <!-- //Quick Access section -->
 
       <!-- Calendar section-->
       <!--Temporary-->
@@ -139,7 +199,7 @@ <h4 class="card-title mt-2">Google Classroom</h4>
         <h2 class="section-name">What’s happening this week?</h2>
         <div id='calendar'></div>
       </div>
-      <!-- End of Calendar section-->
+      <!-- //Calendar section-->
     </div>
     <!-- Contact section-->
     <div class="contact-section">
@@ -150,7 +210,7 @@ <h2 class="section-name">
         </a>
       </h2>
     </div>
-    <!-- End of Contact section-->
+    <!-- //Contact section-->
   </div>
 </div>
-<!-- End of Resource Section -->
+<!-- //Resource Section -->
\ No newline at end of file