diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..834cd0b2e 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,25 @@
   <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>
+    <header>
+      <h1>Quote Generator</h1>
+    </header> 
+    <main>
+      <section>
+      <p id="quote"></p>
+      <p id="author"></p>
+    <div></div>
+    </section>
+    </main>
+    <section>
+      <button type="button" id="new-quote">New quote</button>
+    </section>
+    
+    
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..661b13909 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,24 @@ const quotes = [
 ];
 
 // call pickFromArray with the quotes array to check you get a random quote
+
+// 1. get a button variable.
+// 2. listen to the event.
+// 3, when event happens produce a quote in one place <p>
+//4. when an event happens produce author of that quote in the other <p>
+const button = document.querySelector("#new-quote");
+const initialQuote = pickFromArray(quotes);
+const placeInitialQuote = document.querySelector("#quote");
+const placeInitialAuthor = document.querySelector("#author");
+placeInitialQuote.innerText = `${initialQuote.quote}`;
+placeInitialAuthor.innerText = `${initialQuote.author}`;
+
+function newQuoteEveryTime() {
+  const quote = pickFromArray(quotes);
+  const quotePlace = document.querySelector("#quote");
+  const authorPlace = document.querySelector("#author");
+  quotePlace.innerText = `${quote.quote}`;
+  authorPlace.innerText = `${quote.author}`;
+}
+
+button.addEventListener("click", newQuoteEveryTime);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..d7a3f66aa 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,46 @@
+h1 {
+    font-size: 24px;
+    text-align: center;
+    color: rgb(225, 71, 36);
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background: rgb(24, 25, 24);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    min-height: 100vh;
+}
+#quote {
+    max-width: 700px;
+    min-height: 160px;
+
+    text-align: center;
+    font-size: 24px;
+    color: rgb(225, 71, 36);
+}
+
+#author {
+    width: 700px;
+    text-align: right;
+    font-style: italic;
+    color: rgb(225, 71, 36);
+}
+
+#new-quote {
+    padding: 12px 30px;
+    font-size: 18px;
+    color: white;
+    background-color: rgb(225, 71, 36);
+
+    cursor: pointer;
+}
+
+ 
+
+
+
 /** Write your CSS in here **/
