diff --git a/public/css/styles.css b/public/css/styles.css
index 32ddc57..a208921 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,3 +1,9 @@
+:root {
+  --light: #e6daa6;
+  --dark: #0c024d;
+  --lightgrey: #d3d3d3;
+  --darkgrey: #a9a9a9;
+}
 * {
   margin: 0;
   padding: 0;
@@ -11,8 +17,8 @@
 body {
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 16px;
-  background-color: light_dark(#e6daa6, #0c024d);
-  color: light_dark(#0c024d, #e6daa6);
+  background-color: light_dark(var(--light), var(--dark));
+  color: light_dark(var(--dark), var(--light));
   margin: 2rem auto;
 }
 .header {
@@ -27,7 +33,7 @@ body {
   width: 80px;
   height: 80px;
   border-radius: 50%;
-  box-shadow: 1px 3px 5px light_dark(lightgrey, darkgrey);
+  box-shadow: 1px 3px 5px light_dark(var(--lightgrey), var(--darkgrey));
 }
 .hdr-h1 {
   font-size: 2rem;
@@ -37,10 +43,38 @@ body {
   width: 90%;
   margin: 2rem auto;
 }
-.quotes {
-  border: 1px solid lightgrey;
+.search {
+  margin: auto;
+  padding: 8px;
+  background-color: light_dark(var(--lightgrey), var(--darkgrey));
+  border: 1px solid var(--lightgrey);
   border-radius: 14px;
-  box-shadow: 1px 3px 5px light_dark(#d6d6a3, darkgrey);
+  margin-bottom: 0.6rem;
+}
+.search h2 {
+  text-align: center;
+  padding: 0 8px;
+}
+.search fieldset {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+}
+.text-input {
+  padding: 0.4rem 1.2rem;
+  background-color: light_dark(var(--darkgrey), var(--lightgrey));
+  border-radius: 14px;
+  color: light_dark(var(--light), var(--dark));
+  border: 1px solid light_dark(var(--dark), var(--light));
+}
+#filter-count {
+  padding: 0.2rem;
+}
+.quotes {
+  border: 1px solid var(--lightgrey);
+  border-radius: 14px;
+  box-shadow: 1px 3px 5px light_dark(#d6d6a3, var(--darkgrey));
   padding: 1rem;
   columns: 300px;
   column-gap: auto;
@@ -51,9 +85,9 @@ body {
   background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
   background-attachment: fixed;
   color: beige;
-  border: 1px solid lightgrey;
+  border: 1px solid var(--lightgrey);
   border-radius: 14px;
-  box-shadow: 1px 3px 5px light_dark(lightgrey, darkgrey);
+  box-shadow: 1px 3px 5px light_dark(var(--lightgrey), var(--darkgrey));
   margin: 12px;
   padding: 1rem;
   max-width: 340px;
diff --git a/public/index.html b/public/index.html
index 40057c1..ec7d1fe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
   <title>fyrfli's favourite quotes</title>
   <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="css/styles.css">
+  <!-- <script defer src="js/app.js"></script> -->
 </head>
 
 <body>
@@ -18,8 +19,17 @@
   </header>
 
   <main class="container">
-    <article class="debug"></article>
+    <article class="search">
+      <form action="javascript:void(0);" method="post" id="live-search" class="styled">
+        <fieldset>
+          <h2>search for a quote</h2>
+          <input type="text" name="search" id="filter" class="text-input" placeholder="start typing..." onkeyup="liveSearch()">
+          <span id="filter-count"></span>
+        </fieldset>
+      </form>
+    </article>
     <article class="quotes"></article>
+    <article class="debug"></article>
   </main>
 
   <footer class="footer">
diff --git a/public/js/app.js b/public/js/app.js
deleted file mode 100644
index 5cb4b9d..0000000
--- a/public/js/app.js
+++ /dev/null
@@ -1,33 +0,0 @@
-'use strict';
-// Full year for footer
-const todayDate = new Date();
-jsyear.innerText = todayDate.getFullYear();
-
-const quoteDisplay = document.querySelector(".quote");
-let numQuotes;
-let randomNum;
-let intervalID;
-let iteratorID = 0;
-let currQuote;
-
-fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
-  .then((response) => {
-    return response.json();
-  })
-  .then((data) => {
-    currQuote = getQuote(data);
-    for (let i = 0; i < 50; i++) {
-      quoteDisplay.innerText = currQuote;
-      intervalID = setInterval(() => {
-        currQuote = getQuote(data);
-        quoteDisplay.innerText = currQuote;
-      }, 12000);
-    }
-  });
-
-
-function getQuote(data) {
-  let noQuotes = Object.entries(data).length;
-  let randNo = Math.floor(Math.random() * noQuotes);
-  return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
-}
diff --git a/public/js/layout.js b/public/js/layout.js
index b4a03a6..12fcd95 100644
--- a/public/js/layout.js
+++ b/public/js/layout.js
@@ -21,3 +21,36 @@ fetch("https://cdn.fyrfli.link/FavouriteQuotes.json")
       i++;
     }
   });
+
+function liveSearch() {
+  let j;
+  let input = document.getElementById('filter').value.toLowerCase();
+  let item = document.getElementsByClassName('quote');
+  
+  for (j = 0; j < item.length; j++) {
+    if (!item[j].innerText.toLowerCase().includes(input)) {
+      item[j].style.display = "none";
+    }
+    else {
+      item[j].style.display = "inline-block"
+    }
+  }
+}
+
+
+// The working funtion for live search from https://jupiter.fyrfli.net/js-play/jsplay.html
+//   - this is for reference only
+// function search_items() {
+//     let input = document.getElementById('filter').value.toLowerCase();
+//     let x = document.getElementsByClassName('item');
+
+//     for (i = 0; i < x.length; i++) {
+//         if (!x[i].innerHTML.toLowerCase().includes(input)) {
+//             x[i].style.display = "none";
+//         }
+//         else {
+//             x[i].style.display = "list-item";
+//         }
+//     }
+// }
+
