diff --git a/Sprint-3/slideshow/index.html b/Sprint-3/slideshow/index.html
index 50f2eb1c0..aefad8e08 100644
--- a/Sprint-3/slideshow/index.html
+++ b/Sprint-3/slideshow/index.html
@@ -3,12 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Image carousel</title>
     <script defer src="slideshow.js"></script>
   </head>
   <body>
+
+    <h1>Image Carousel. Level 1 Demo.</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>
+
+    <div class="buttons">
+      <button type="button" id="auto-backward">Auto Backwards</button>
+      <button type="button" id="backward-btn">Backwards</button>
+      <button type="button" id="stop">Stop</button>
+      <button type="button" id="forward-btn">Forward</button>
+      <button type="button" id="auto-forward">Auto Forward</button>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/slideshow/slideshow.js b/Sprint-3/slideshow/slideshow.js
index 063ceefb5..67fd110c0 100644
--- a/Sprint-3/slideshow/slideshow.js
+++ b/Sprint-3/slideshow/slideshow.js
@@ -5,4 +5,90 @@ const images = [
 ];
 
 
-// Write your code here
\ No newline at end of file
+// Write your code here
+let currentIndex = 0;
+let autoTimer = null;
+const image = document.querySelector("#carousel-img");
+
+
+// Displays the image at the given index from the images array by updating the src of the image element.
+function showImage(index) {
+  image.src = images[index];
+}
+
+
+// Increments the currentIndex by 1 to move forward in the image list.
+// If it's the last image, it wraps back to the first using modular arithmetic (%).
+function moveImageForward() {
+    currentIndex = (currentIndex + 1) % images.length;
+    showImage(currentIndex);
+}
+
+
+// Decrements the currentIndex to go back to the previous image.
+// If it's the first image, it wraps around to the last one using modular arithmetic to stay within bounds.
+function moveImageBackward() {
+    currentIndex = (currentIndex - 1 + images.length) % images.length;
+    showImage(currentIndex);
+}
+
+
+// This function will be used to automatically move forward through the images.
+// You can implement a timer or interval here to call moveImageForward() repeatedly.
+function autoForward() {
+    autoTimer = setInterval(moveImageForward, 2000);
+    disableAutoButtons(); 
+};
+
+
+// This function will be used to automatically move backward through the images.
+// You can implement a timer or interval here to call moveImageBackward() repeatedly.
+function autoBackward() {
+    autoTimer = setInterval(moveImageBackward, 2000);
+    disableAutoButtons();
+};
+
+function stopButton() {
+    clearInterval(autoTimer);
+    autoTimer = null;
+    enableAutoButtons();
+};
+
+function disableAutoButtons() {
+  document.querySelector("#auto-forward").disabled = true;
+  document.querySelector("#auto-backward").disabled = true;
+}
+
+function enableAutoButtons() {
+  document.querySelector("#auto-forward").disabled = false;
+  document.querySelector("#auto-backward").disabled = false;
+}
+
+function setup() {
+
+    document.querySelector("#backward-btn").addEventListener("click", ( ) => {
+        moveImageBackward()
+    });
+
+    document.querySelector("#stop").addEventListener("click", ( ) => {
+        stopButton()
+    });
+
+    document.querySelector("#forward-btn").addEventListener("click", ( ) => {
+        moveImageForward()
+    });
+
+    document.querySelector("#auto-backward").addEventListener("click", ( ) => {
+        autoBackward()
+    });
+
+    document.querySelector("#auto-forward").addEventListener("click", ( ) => {
+        autoForward()
+    });
+
+    // Show first image on load
+    showImage(currentIndex);
+
+};
+
+setup();
\ No newline at end of file
diff --git a/Sprint-3/slideshow/style.css b/Sprint-3/slideshow/style.css
index 63cedf2d2..816a8266e 100644
--- a/Sprint-3/slideshow/style.css
+++ b/Sprint-3/slideshow/style.css
@@ -1 +1,27 @@
 /** Write your CSS in here **/
+body {
+  font-family: Arial, sans-serif;
+  text-align: center;
+  margin-top: 40px;
+}
+
+#carousel-img {
+  width: 400px;            
+  height: 300px;             
+  object-fit: cover;          
+  border: 3px solid #ccc;
+  margin: 20px 0;
+  border-radius: 8px;        
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+button {
+  font-size: 16px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
\ No newline at end of file
