diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..8961e2624 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -3,12 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>"Image carousel"</title>
+    <link rel="stylesheet" href="style.css" />
     <script defer src="slideshow.js"></script>
   </head>
   <body>
+    <h1>Image carousel</h1>
     <img id="carousel-img" src="./assets/cute-cat-a.png" alt="cat-pic" />
     <button type="button" id="backward-btn">Backwards</button>
     <button type="button" id="forward-btn">Forward</button>
+    <button type="button" id="auto-forward-btn">Auto Forward</button>
+    <button type="button" id="stop-btn">Stop</button>
+    <button type="button" id="auto-backward-btn">Auto Backward</button>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..8fff42dff 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,57 @@
 const images = [
-    "./assets/cute-cat-a.png",
-    "./assets/cute-cat-b.jpg",
-    "./assets/cute-cat-c.jpg",
-];
+  "./assets/cute-cat-a.png",
+  "./assets/cute-cat-b.jpg",
+  "./assets/cute-cat-c.jpg",
+  "https://images.unsplash.com/photo-1518717758536-85ae29035b6d?auto=format&fit=crop&w=800&q=80",
+]
 
 
-// Write your code here
\ No newline at end of file
+let currentIndex = 0;
+const carouselImg = document.getElementById("carousel-img");
+
+function showNextImage() {
+  currentIndex++;
+  if (currentIndex >= images.length) {
+    currentIndex = 0; // wrap to start
+  }
+  carouselImg.src = images[currentIndex];
+}
+ document.getElementById("forward-btn").addEventListener("click",function(){
+    showNextImage()
+
+ })
+ function showPreviousImage() {
+  currentIndex--;
+  if (currentIndex < 0) {
+    currentIndex = images.length - 1;  // assign the last index to currentIndex
+  }
+  carouselImg.src = images[currentIndex];
+}
+ document.getElementById("backward-btn").addEventListener("click",function(){
+    showPreviousImage()
+
+ })
+ let autoForwardIntervalId;
+ let autoBackwardIntervalId // declared once globally or at the top of your JS file
+
+function startAutoForward() {
+  clearInterval(autoForwardIntervalId);
+  autoForwardIntervalId = setInterval(showNextImage, 2000);
+}
+document.getElementById("auto-forward-btn").addEventListener("click", function() {
+  startAutoForward();
+});
+function setAutoBackwards(){
+  clearInterval(autoBackwardIntervalId);
+  autoBackwardIntervalId = setInterval(showPreviousImage,2000);
+}
+document.getElementById("auto-backward-btn").addEventListener("click", function() {
+  setAutoBackwards();
+});
+function stopSlideshow() {
+  clearInterval(autoForwardIntervalId);
+  clearInterval(autoBackwardIntervalId);
+}
+document.getElementById("stop-btn").addEventListener("click", function() {
+  stopSlideshow();
+});
\ No newline at end of file
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
index 63cedf2d2..e8909c34c 100644
--- a/Sprint-3/slideshow/style.css
+++ b/Sprint-3/slideshow/style.css
@@ -1 +1,66 @@
 /** Write your CSS in here **/
+/* Center everything and add some spacing */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f4f8;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px 20px;
+}
+
+/* Style the carousel image */
+#carousel-img {
+  width: 350px;
+  height: 230px;
+  object-fit: contain;
+  border: 4px solid #4a90e2;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+  margin-bottom: 25px;
+  background-color: white;
+}
+
+/* Style all buttons uniformly */
+h1 {
+  font-size: 2rem;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+  font-family: 'Arial', sans-serif;
+}
+button {
+  background-color: #a9457c;
+  color: white;
+  border: none;
+  padding: 12px 20px;
+  margin: 5px 8px;
+  font-size: 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  box-shadow: 0 3px 6px rgba(74,144,226,0.5);
+}
+
+/* Hover effect on buttons */
+button:hover {
+  background-color: #357ABD;
+}
+
+/* Optional: Add focus outline for accessibility */
+button:focus {
+  outline: 2px solid #357ABD;
+  outline-offset: 2px;
+}
+
+/* Responsive tweak: smaller on narrow screens */
+@media (max-width: 400px) {
+  #carousel-img {
+    width: 90vw;
+    height: auto;
+  }
+  button {
+    width: 100%;
+    margin: 8px 0;
+  }
+}
