diff --git a/Sprint-3/quote-generator/Quote_generator_app.html b/Sprint-3/quote-generator/Quote_generator_app.html
new file mode 100644
index 000000000..ec39ba726
--- /dev/null
+++ b/Sprint-3/quote-generator/Quote_generator_app.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+ Quotes Generator
+
+
+
+
+
+
+
+
diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
deleted file mode 100644
index 30b434bcf..000000000
--- a/Sprint-3/quote-generator/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
- Title here
-
-
-
- hello there
-
-
-
-
-
diff --git a/Sprint-3/quote-generator/quotes.js b/Sprint-3/quote-generator/quotes.js
index 4a4d04b72..7bf071945 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,22 @@
+function setup() {
+ const quoteButton = document.getElementById("new-quote");
+ const quoteText = document.getElementById("quote");
+ const authorText = document.getElementById("author");
+
+ function showRandomQuote() {
+ const randomQuote = pickFromArray(quotes);
+ quoteText.textContent = `“${randomQuote.quote}”`;
+ authorText.textContent = `- ${randomQuote.author}`;
+ }
+
+ quoteButton.addEventListener("click", showRandomQuote);
+
+ showRandomQuote();
+}
+
+document.addEventListener("DOMContentLoaded", setup);
+
+
// 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..f19f8fbb1 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,43 @@
/** Write your CSS in here **/
+body {
+ font-family: Arial, sans-serif;
+ background-color: #605f5f;
+ margin: 0;
+ padding: 20px;
+}
+h1 {
+ color: #4DD0E1;
+ text-align: center;
+}
+
+#quote-box {
+ background-color: #222121;
+ border-radius: 10px;
+ padding: 20px;
+ max-width: 600px;
+ margin: 20px auto;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ height: 250px;
+ position: relative;
+}
+#quote {
+ font-size: 24px;
+ color: #ffffff;
+}
+#author {
+ font-size: 20px;
+ color: #cccccc;
+ text-align: right;
+}
+#new-quote {
+ background-color: #4DD0E1;
+ color: #000000;
+ border: none;
+ padding: 10px 20px;
+ font-size: 16px;
+ border-radius: 5px;
+ cursor: pointer;
+ position: absolute;
+ bottom: 20px;
+ left: 20px;
+}
\ No newline at end of file