diff --git a/Sprint-3/quote-generator/index.html b/Sprint-3/quote-generator/index.html
index 30b434bcf..765d1ce2e 100644
--- a/Sprint-3/quote-generator/index.html
+++ b/Sprint-3/quote-generator/index.html
@@ -1,15 +1,19 @@
-
+
- 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..a1bc07641 100644
--- a/Sprint-3/quote-generator/quotes.js
+++ b/Sprint-3/quote-generator/quotes.js
@@ -1,3 +1,10 @@
+function main() {
+ document.querySelector("#quote").innerText = pickFromArray(quotes).quote;
+ document.querySelector("#author").innerText = pickFromArray(quotes).author;
+}
+
+document.getElementById("new-quote").addEventListener("click", main);
+
// 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..2da4a63b9 100644
--- a/Sprint-3/quote-generator/style.css
+++ b/Sprint-3/quote-generator/style.css
@@ -1 +1,43 @@
-/** Write your CSS in here **/
+body {
+ background-color: orange;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+}
+.container {
+ background-color: white;
+ width: 60%;
+ padding: 50px 50px;
+}
+#quote {
+ text-align: center;
+ color: orange;
+ font-size: 28px;
+}
+#quote::before {
+ content: open-quote;
+}
+#quote::after {
+ content: close-quote;
+}
+#author {
+ color: orange;
+ text-align: right;
+ font-size: 20px;
+}
+#author::before {
+ content: "- ";
+}
+#new-quote {
+ display: flex;
+ justify-content: end;
+}
+button {
+ background-color: orange;
+ color: white;
+ border: none;
+ font-size: 18px;
+ padding: 15px;
+ cursor: pointer;
+}