diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..6f2515a64 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -1,14 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
+<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>
     <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>
-  </body>
-</html>
+    <div id="button-bar"/>
+ </body>
+ </html>
\ No newline at end of file
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..cea6893f5 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -1,8 +1,103 @@
 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",
 ];
 
+const buttons = [
+  {
+    type: "button",
+    id: "auto-backward",
+    text: "Auto Back",
+  },
+  {
+    type: "button",
+    id: "backward-btn", // updated to match test
+    text: "Back",
+  },
+  {
+    type: "button",
+    id: "stop",
+    text: "Stop",
+  },
+  {
+    type: "button",
+    id: "forward-btn", // updated to match test
+    text: "Forward",
+  },
+  {
+    type: "button",
+    id: "auto-forward",
+    text: "Auto Forward",
+  },
+];
+
+const buttonBar = document.getElementById("button-bar");
+const imageElement = document.getElementById("carousel-img");
+
+let index = 0;
+let intervalId = null;
+
+// Set initial image
+imageElement.src = images[index];
+
+// Create buttons and add event listeners
+buttons.forEach((item) => {
+  const button = document.createElement("button");
+  button.type = item.type;
+  button.id = item.id;
+  button.textContent = item.text;
+  button.addEventListener("click", () => actButton(item.id));
+  buttonBar.appendChild(button);
+});
+
+function actButton(id) {
+  switch (id) {
+    case "auto-backward":
+      clearInterval(intervalId);
+      disableAutoButtons();
+      intervalId = setInterval(backward, 2000);
+      break;
+
+    case "backward-btn":
+      backward();
+      break;
+
+    case "stop":
+      clearInterval(intervalId);
+      enableAutoButtons();
+      break;
+
+    case "forward-btn":
+      forward();
+      break;
+
+    case "auto-forward":
+      clearInterval(intervalId);
+      disableAutoButtons();
+      intervalId = setInterval(() => {
+        forward();
+      }, 2000);
+      break;
+  }
+}
+
+function disableAutoButtons() {
+  document.getElementById("auto-forward").disabled = true;
+  document.getElementById("auto-backward").disabled = true;
+}
+
+function enableAutoButtons() {
+  document.getElementById("auto-forward").disabled = false;
+  document.getElementById("auto-backward").disabled = false;
+}
+
+function backward() {
+  index = index === 0 ? images.length - 1 : index - 1;
+  imageElement.src = images[index];
+}
 
-// Write your code here
\ No newline at end of file
+function forward() {
+  index = (index + 1) % images.length;
+  imageElement.src = images[index];
+}
\ No newline at end of file
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
index 63cedf2d2..9bfe03cba 100644
--- a/Sprint-3/slideshow/style.css
+++ b/Sprint-3/slideshow/style.css
@@ -1 +1,28 @@
 /** Write your CSS in here **/
+body {
+    object-fit: contain;
+    display: block;
+}
+
+#carousel-img {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    display: block;
+    margin: 20px auto;
+    border-radius: 10px;
+    object-fit: contain;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+#button-bar {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+button {
+    color: blue;
+}
\ No newline at end of file
