diff --git a/index.html b/index.html
index 8f6b1ac..6d60832 100644
--- a/index.html
+++ b/index.html
@@ -77,6 +77,87 @@
   }
 </style>
 
+<style>
+
+  .padd2 {
+    padding-top: 120px;
+    padding-bottom: 40px;
+  }
+
+  /* Float four columns side by side */
+  .column {
+    float: left;
+    width: 50%;
+    padding: 0 50px;
+    margin-bottom: 50px;
+  }
+
+  /* Remove extra left and right margins, due to padding */
+  .row {
+    padding: 0 100px;
+  }
+
+  /* Clear floats after the columns */
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  @media (min-width: 600px) and (max-width: 1000px) {
+    .row {
+      padding: 0 20px;
+    }
+    .column {
+    float: left;
+    width: 50%;
+    padding: 0 10px;
+    margin-bottom: 50px;
+  }
+  }
+
+  /* Responsive columns */
+  @media screen and (max-width: 600px) {
+    .column {
+      width: 100%;
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    .row {
+      padding: 0 0px;
+    }
+  }
+
+  /* Add your CSS styles here */
+.slideshow-container2 {
+    position: relative;
+}
+
+.mySlides2 {
+    display: none;
+}
+
+/* Style for previous and next buttons */
+.prev, .next {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 16px;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+}
+
+.prev {
+    left: 0;
+}
+
+.next {
+    right: 0;
+}
+</style>
+
 </head>
 
 <body>
@@ -196,7 +277,26 @@ <h1 class="text-3xl sm:text-5xl lg:text-5xl font-bold mb-7 sm:mb-12 leading-snug
             </div> -->
         </div>
         <div class="lg:w-1/3">
-          <img src="./resources/image9.png" class="w-full mx-auto" alt="" />
+          <!-- <img src="./resources/image9.png" class="w-full mx-auto" alt="" /> -->
+          <!-- <div id="custom-component-container"></div> -->
+          <div class="bg-black padd2">
+            <div class="slideshow-container2">
+          
+              <div class="mySlides2 mx-auto" style="display: block;">
+                   <img src="./resources/image9.png" class="w-full mx-auto" alt="" />
+              </div>
+            
+              <div class="mySlides2 mx-auto">
+                  <img src="./resources/image146.png" class="w-full mx-auto" alt="" /> 
+              </div>
+            
+              <div class="mySlides2 mx-auto">
+                  <img src="./resources/unsplash_W1B2LpQOBxA.png" class="w-full mx-auto" alt="" />    
+              </div>
+          
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </section>
@@ -791,6 +891,43 @@ <h1 class="text-7xl font-bold">$99</h1>
 
   </main>
   <script type="module" src="/app.js"></script>
+
+  <script>
+    // function loadSlideshow() {
+    // Use the Fetch API to load the external component
+    fetch('slidecomponent.html')
+        .then(response => response.text())
+        .then(data => {
+            const container = document.getElementById('custom-component-container');
+            container.innerHTML = data;
+            showSlides();
+        })
+        .catch(error => console.error('Error loading the component: ', error));
+      // }
+      //   loadSlideshow();
+</script>
+
+<script>
+  let slideIndex2 = 1;
+  showSlides2();
+  
+  function showSlides2() {
+    let i;
+    let slides2 = document.getElementsByClassName("mySlides2");
+    for (i = 0; i < slides2.length; i++) {
+      slides2[i].style.display = "none";  
+    }
+    slideIndex2++;
+    if (slideIndex2 > slides2.length) {
+      slideIndex2 = 1;  // Reset slideIndex to 1 when it exceeds the number of slides
+    }
+    slides2[slideIndex2 - 1].style.display = "block";  
+    setTimeout(showSlides2, 3000); // Change slide every 3 seconds (adjust the timing as needed)
+  }
+  
+  // Start the automatic slideshow immediately
+  showSlides2();
+  </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/resources/image146.png b/resources/image146.png
new file mode 100644
index 0000000..fb13456
Binary files /dev/null and b/resources/image146.png differ
diff --git a/resources/unsplash_W1B2LpQOBxA.png b/resources/unsplash_W1B2LpQOBxA.png
new file mode 100644
index 0000000..23f9120
Binary files /dev/null and b/resources/unsplash_W1B2LpQOBxA.png differ
