diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..4f317e9f2 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,17 @@
-
+
- Title here
+ Quote Generator App
+
- hello there
-
-
-
+
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..282b05056 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -491,3 +491,17 @@ const quotes = [
];
// call pickFromArray with the quotes array to check you get a random quote
+const quoteElement = document.querySelector("#quote");
+const authorElement = document.querySelector("#author");
+const newQuoteButton = document.querySelector("#new-quote");
+
+function displayRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+
+ quoteElement.innerText = `"${randomQuote.quote}"`;
+ authorElement.innerText = randomQuote.author;
+}
+
+displayRandomQuote();
+
+newQuoteButton.addEventListener("click", displayRandomQuote);
diff --git a/Sprint-3/quote-generator/style.css b/Sprint-3/quote-generator/style.css
index 63cedf2d2..aac21b0a3 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,45 @@
-/** Write your CSS in here **/
+body {
+ background-color: lavender;
+ height: 100vh;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: Arial, sans-serif;
+}
+
+#quote-box {
+ background-color: white;
+ width: 500px;
+ max-width: 80%;
+ padding: 40px;
+ border-radius: 20px;
+ text-align: center;
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+}
+
+#quote {
+ font-size: 24px;
+ font-style: italic;
+ color: #333;
+ margin-bottom: 20px;
+}
+
+#author {
+ font-size: 18px;
+ color: #777;
+ margin-bottom: 30px;
+}
+
+button {
+ background-color: lavender;
+ border: none;
+ padding: 12px 25px;
+ border-radius: 10px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: #d8b4fe;
+}