diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..e30beaab2 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,20 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <title>Quote generator app</title>
     <script defer src="quotes.js"></script>
+    <link rel="stylesheet" href="style.css">
   </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">
+      <p id="quote"></p>
+      <p id="author"></p>
+      <button type="button" id="new-quote">New quote</button>
+    </div>
+    <label class="toggle">
+      <span>Auto play</span>
+      <input type="checkbox" id="autoplay">
+      <span class="slider"></span>
+    </label>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..eb39082ba 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,47 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+const quoteParagraph = document.getElementById('quote');
+const authorParagraph = document.getElementById('author');
+const btn = document.getElementById('new-quote');
+
+let lastIndex = -1;
+
+function displayQuotes() {
+
+  let randomIndex;
+
+  do {
+    randomIndex = Math.floor(Math.random() * quotes.length);
+  } while (randomIndex === lastIndex);
+  
+  lastIndex = randomIndex;
+
+  quoteParagraph.textContent = quotes[randomIndex].quote;
+  authorParagraph.textContent = quotes[randomIndex].author;
+}
+
+displayQuotes();
+
+btn.addEventListener('click', displayQuotes)
+
+
+
+const checkAutoPlay = document.getElementById('autoplay');
+
+let intervalId;
+
+checkAutoPlay.addEventListener('change', e => {
+
+  if (e.target.checked) {
+
+    intervalId = setInterval(() => {
+      displayQuotes()
+    }, 5000);
+
+  } else {
+    clearInterval(intervalId);
+  }
+});
+
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..eee3e0faa 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,111 @@
-/** Write your CSS in here **/
+/** stylng **/
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    background: #f79a00;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    width: 900px;
+    height: 360px;
+    background: #ffffff;
+    padding: 50px 50px;
+    position: relative;
+}
+
+#quote {
+    font-size: 26px;
+    color: #f79a00;
+    max-width: 700px;
+}
+
+#quote::before {
+    content: "❝";
+    font-size: 60px;
+    margin-right: 5px;
+}
+
+#author {
+    position: absolute;
+    right: 70px;
+    bottom: 100px;
+    font-size: 22px;
+    color: #f79a00;
+}
+
+#author::before {
+    content: "- ";
+}
+
+#new-quote {
+    position: absolute;
+    right: 70px;
+    bottom: 40px;
+    padding: 14px 24px;
+    border: none;
+    background: #f79a00;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+#new-quote:hover {
+    background: #e38700;
+}
+
+/* auto play checkbox style */
+
+.toggle {
+    position: absolute;
+    bottom: 50px;
+    left: 100px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.toggle input {
+    display: none;
+}
+
+.slider {
+    width: 50px;
+    height: 26px;
+    background: #d9d9d9;
+    border-radius: 20px;
+    position: relative;
+    transition: 0.3s;
+}
+
+.slider::before {
+    content: "";
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: #f79a00;
+    border-radius: 50%;
+    top: 3px;
+    left: 3px;
+    transition: 0.3s;
+}
+
+/* when checked */
+.toggle input:checked+.slider {
+    background: #ffffff;
+}
+
+.toggle input:checked+.slider::before {
+    transform: translateX(24px);
+}
\ No newline at end of file
