diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..33a804f9f 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -3,13 +3,17 @@
   <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>
+    <h1>Quote Generator</h1>
+    <div class="quote-box"> 
+    <blockquote id="quote" class="quote-text"></blockquote>
+    <cite id="author" class="quote-author"></cite>
+    </div>
+    <button type="button" id="new-quote" class="quote-button">New quote</button>
+  </div>
   </body>
 </html>
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..9e7b483f3 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,15 @@
+function getRandomQuote() {
+  const randomQuote = Math.floor(Math.random() * quotes.length);
+  return quotes[randomQuote];
+}
+function showQuote() {
+  const quote = pickFromArray(quotes);
+  document.getElementById("quote").innerText = `"${quote.quote}"`;
+  document.getElementById("author").innerText = `- ${quote.author}`;
+}
+window.onload = showQuote;
+document.getElementById("new-quote").addEventListener("click", showQuote);
+
 // DO NOT EDIT BELOW HERE
 
 // pickFromArray is a function which will return one item, at
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..535d2d2ab 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,52 @@
-/** Write your CSS in here **/
+h1 {
+  font-family: Georgia, "Times New Roman", Times, serif;
+  font-size: 58px;
+  color: #0b013d;
+  text-align: center;
+}
+
+body {
+  background-color: #6396d9;
+  font-family: Georgia, "Times New Roman", Times, serif;
+  text-align: center;
+  padding: 40px;
+}
+
+.container {
+  width: 60%;
+  margin: auto;
+}
+
+.quote-box {
+  background: rgb(242, 242, 243);
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+  margin: 20px 0;
+}
+
+.quote-text {
+  font-size: 28px;
+  font-weight: bold;
+  color: #2e1717;
+}
+
+.quote-author {
+  font-size: 24px;
+  color: #191919;
+  margin-top: 10px;
+}
+
+.quote-button {
+  background: #f4efef;
+  color: rgb(19, 8, 80);
+  margin-top: 20px;
+  padding: 10px 18px;
+  border-radius: 8px;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.quote-button:hover {
+  background: #bbbfc2;
+}
