diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..9d155d9e1 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <link rel="stylesheet" href="style.css" />
+    <title>Quote generator app</title>
     <script defer src="quotes.js"></script>
   </head>
   <body>
-    <h1>hello there</h1>
-    <p id="quote"></p>
-    <p id="author"></p>
-    <button type="button" id="new-quote">New quote</button>
+    <div class="container">
+      <h1>Quote Generator</h1>
+      <p id="quote"></p>
+      <p id="author"></p>
+
+      <label>
+        <input type="checkbox" id="auto-play-toggle" />
+        Auto-play every 5 seconds
+      </label>
+      <p id="auto-play-status">Auto-play: OFF</p>
+
+      <button type="button" id="new-quote">New quote</button>
+    </div>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..6ea319b5a 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,45 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+// DOM elements
+const quoteP = document.getElementById("quote");
+const authorP = document.getElementById("author");
+const newQuoteBtn = document.getElementById("new-quote");
+const autoPlayToggle = document.getElementById("auto-play-toggle");
+const autoPlayStatus = document.getElementById("auto-play-status");
+
+let autoPlayIntervalId = null;
+
+function getRandomQuote() {
+const index = Math.floor(Math.random() * quotes.length);
+return quotes[index];
+}
+
+function displayQuote(quoteObj) {
+quoteP.textContent = quoteObj.quote;
+authorP.textContent = quoteObj.author;
+}
+
+function showNewQuote() {
+const quote = getRandomQuote();
+displayQuote(quote);
+}
+
+newQuoteBtn.addEventListener("click", showNewQuote);
+
+autoPlayToggle.addEventListener("change", (e) => {
+if (e.target.checked) {
+autoPlayStatus.textContent = "Auto-play: ON";
+autoPlayIntervalId = setInterval(showNewQuote, 5000); // 5 seconds for testing
+} else {
+autoPlayStatus.textContent = "Auto-play: OFF";
+clearInterval(autoPlayIntervalId);
+autoPlayIntervalId = null;
+}
+});
+
+// Display an initial quote based on predictable test index
+window.addEventListener("load", () => {
+const initialQuote = getRandomQuote();
+displayQuote(initialQuote);
+});
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..309fd9322 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,90 @@
 /** Write your CSS in here **/
+/* Base styles and variables */
+:root {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --accent-color: #f39c12;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Georgia', serif;
+  background-color: var(--accent-color);
+  transition: background-color 0.6s ease-in-out;
+  color: var(--text-color);
+}
+
+/* Center the quote box */
+.container {
+  max-width: 800px;
+  margin: 100px auto;
+  background: white;
+  padding: 60px;
+  text-align: center;
+  border-radius: 4px;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+  transition: color 0.5s ease-in-out;
+  color: var(--text-color);
+}
+
+/* Quote text */
+#quote {
+  font-size: 2rem;
+  color: var(--accent-color);
+  margin-bottom: 30px;
+  position: relative;
+  transition: color 0.5s ease-in-out;
+}
+
+/* Quotation mark style */
+#quote::before {
+  content: "“";
+  font-size: 4rem;
+  position: absolute;
+  left: -40px;
+  top: -10px;
+  color: var(--accent-color);
+  transition: color 0.5s ease-in-out;
+}
+
+/* Author text */
+#author {
+  font-size: 1.2rem;
+  color: var(--accent-color);
+  text-align: right;
+  margin-top: 20px;
+  font-style: italic;
+  transition: color 0.5s ease-in-out;
+}
+
+/* Button styling */
+button {
+  background-color: var(--accent-color);
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  font-size: 1rem;
+  border-radius: 3px;
+  cursor: pointer;
+  margin-top: 30px;
+  transition: background-color 0.5s ease-in-out;
+}
+
+button:hover {
+  filter: brightness(90%);
+}
+
+#auto-play-status {
+  font-weight: bold;
+  margin-top: 10px;
+  color: var(--accent-color);
+  transition: color 0.4s;
+}
+
+label {
+  display: inline-block;
+  margin-top: 20px;
+  font-size: 1rem;
+  color: var(--text-color);
+}
