diff --git a/src/js/script.js b/src/js/script.js
index 43a680df1..7791b2571 100644
--- a/src/js/script.js
+++ b/src/js/script.js
@@ -4027,32 +4027,36 @@ function hideCustomMode2Popup() {
 async function showQuoteSearchPopup() {
   if($("#quoteSearchPopupWrapper").hasClass("hidden")){
     let quotes = await Misc.getQuotes(config.language);
-    let table = $("#quoteSearchPopup .searchResultTable");
-    let numberOfSearchResults = 0;
-    table.find("tbody").empty();
     $("#quoteSearchPopup input").val("");
-    for(let i = 0 ;i < 5; i++){
-      let quote = quotes.quotes[i];
-      table.find("tbody").append(`
-      <tr class="searchResult" id=${quote.id}>
-              <td class="alignRight"><div class="fixedHeight">${quote.id}</div></td>
-              <td class="alignRight"><div class="fixedHeight">${quote.length}</div></td>
-              <td>
-                <div class="fixedHeight">${quote.text}</div>
-              </td>
-              <td>
-              <div class="fixedHeight">${quote.source}</div>
-              </td>
-              <td><i class="fas fa-chevron-right"></i></td>
-            </tr>
-      `)
-    }
-    quotes.groups.forEach(group =>{
-      group.forEach(quote =>{
-        numberOfSearchResults++;
-      })
+    let oldResults = document.getElementById("quoteSearchResults");
+    oldResults.remove();
+    $("#quoteSearchPopup").append('<div class="quoteSearchResults" id="quoteSearchResults"></div>');
+    let resultsList = $("#quoteSearchResults");
+    let resultsShown = 0;
+    quotes.quotes.forEach(quote =>{
+      let lengthDesc;
+      if(quote.length < 101){
+        lengthDesc = "short";
+      } else if (quote.length < 301){
+        lengthDesc = "medium";
+      } else if (quote.length < 601){
+        lengthDesc = "long";
+      } else {
+        lengthDesc = "thicc";
+      }
+      if(resultsShown++ < 200){
+        resultsList.append(`
+        <div class="searchResult" id="${quote.id}">
+          <div class="text">${quote.text}</div>
+          <div class="id"><div class="sub">id</div>${quote.id}</div>
+          <div class="length"><div class="sub">length</div>${lengthDesc}</div>
+          <div class="source"><div class="sub">source</div>${quote.source}</div>
+          <div class="resultChevron"><i class="fas fa-chevron-right"></i></div>
+        </div>
+        `)
+      }
     })
-    document.getElementById("extraResults").innerHTML = (numberOfSearchResults - 5) + " more results";
+    document.getElementById("extraResults").innerHTML = resultsShown + " results";
     $("#quoteSearchPopupWrapper")
       .stop(true, true)
       .css("opacity", 0)
@@ -4314,7 +4318,6 @@ $("#quoteSearchPopup .searchBox").keydown((e) => {
     searchText = searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
     let reg = new RegExp(searchText, "i");
     let found = [];
-    let numberOfSearchResults = 0;
     quotes.quotes.forEach(quote =>{
       let quoteText = quote["text"];
       let quoteSource = quote["source"];
@@ -4322,72 +4325,42 @@ $("#quoteSearchPopup .searchBox").keydown((e) => {
       let test1 = reg.test(quoteText);
       let test2 = reg.test(quoteSource);
       let test3 = reg.test(quoteId);
-      
       if (test1 || test2 || test3){
         found.push(quote);
-        numberOfSearchResults++
       }
     })
-    let table = $("#quoteSearchPopup .searchResultTable");
-    table.find("tbody").empty();
-    for( let i=0; i<5; i++){
-      if(found[i] === undefined) continue;
-      // if(found[i].text.length > 100){
-      //   found[i].text = found[i].text.substring(0, 100) + "...";
-      // }
-      // if(found[i].source.length > 50){
-      //   found[i].source = found[i].source.substring(0, 50) + "...";
-      // }
-      table.find("tbody").append(`
-      <tr class="searchResult" id=${found[i].id}>
-              <td class="alignRight"><div class="fixedHeight">${found[i].id}</div></td>
-              <td class="alignRight"><div class="fixedHeight">${found[i].length}</div></td>
-              <td>
-                <div class="fixedHeight">${found[i].text}</div>
-              </td>
-              <td>
-              <div class="fixedHeight">${found[i].source}</div>
-              </td>
-              <td><i class="fas fa-chevron-right"></i></td>
-            </tr>
-      `)
-    }
-    if(numberOfSearchResults > 5){
-      $("#extraResults").css("opacity", "1");
-      document.getElementById("extraResults").innerHTML = (numberOfSearchResults - 5) + " more results";
-    }else if (numberOfSearchResults < 5){
-      $("#extraResults").css("opacity", "1");
-      document.getElementById("extraResults").innerHTML = "No other results";
-      for (let i = 0; i < 5 - numberOfSearchResults; i++){
-        table.find("tbody").append(`
-          <tr class="fillerResult" id="">
-              <td class="alignRight"><div class="fixedHeight">-</div></td>
-              <td class="alignRight"><div class="fixedHeight">-</div></td>
-              <td>
-                <div class="fixedHeight">-</div>
-              </td>
-              <td>
-              <div class="fixedHeight">-</div>
-              </td>
-              <td></td>
-            </tr>
-      `)
+    let oldResults = document.getElementById("quoteSearchResults");
+    oldResults.remove();
+    $("#quoteSearchPopup").append('<div class="quoteSearchResults" id="quoteSearchResults"></div>');
+    let resultsList = $("#quoteSearchResults");
+    let resultListLength = 0;
+    found.forEach(quote =>{
+      let lengthDesc;
+      if(quote.length < 101){
+        lengthDesc = "short";
+      } else if (quote.length < 301){
+        lengthDesc = "medium";
+      } else if (quote.length < 601){
+        lengthDesc = "long";
+      } else {
+        lengthDesc = "thicc";
       }
-    } 
-    if (numberOfSearchResults == 0){
-      $("#extraResults").css("opacity", "1");
-      document.getElementById("extraResults").innerHTML = "No search results";
-    }
+      if (resultListLength++ < 200){
+        resultsList.append(`
+        <div class="searchResult" id="${quote.id}">
+          <div class="text">${quote.text}</div>
+          <div class="id"><div class="sub">id</div>${quote.id}</div>
+          <div class="length"><div class="sub">length</div>${lengthDesc}</div>
+          <div class="source"><div class="sub">source</div>${quote.source}</div>
+          <div class="resultChevron"><i class="fas fa-chevron-right"></i></div>
+        </div>
+        `)
+      }
+    })
+    document.getElementById("extraResults").innerHTML = resultListLength + " results";
   }, 0.1) //arbitrarily v. small time as it's only to allow text to input before searching
 });
 //sets quote id to searched quote clicked
-$("#quoteSearchResults").click((e) => {
-  if($(e.target).hasClass("quoteSearchButton")){
-    document.getElementById("inputNumber").value = e.target.getAttribute("id");
-    applyMode2Popup();
-  }
-})
-
 $("#quoteSearchPopupWrapper").click((e) => {
   if ($(e.target).attr("id") === "quoteSearchPopupWrapper") {
     hideQuoteSearchPopup();
@@ -4398,23 +4371,9 @@ $("#customMode2Popup .button").click(() => {
   applyMode2Popup();
 });
 
-$("#quoteSearchPopup .button").click(() => {
-  if(!isNaN(document.getElementById("searchBox").value)){
-    applyQuoteSearchPopup();
-  } else {
-    let results = document.getElementsByClassName("searchResult");
-    if(results.length > 0){
-      selectedQuoteId = parseInt(results[0].getAttribute("id"));
-      applyQuoteSearchPopup(selectedQuoteId);
-    }
-  }
-});
-
-$(document).on("click", "#quoteSearchPopup .searchResultTable tbody tr", (e) => {
-  if($(e.currentTarget).hasClass("searchResult")){
-    selectedQuoteId = parseInt($(e.currentTarget).attr("id"));
-    applyQuoteSearchPopup(selectedQuoteId);
-  }
+$(document).on("click", "#quoteSearchResults .searchResult", (e) => {
+  selectedQuoteId = parseInt($(e.currentTarget).attr("id"));
+  applyQuoteSearchPopup(selectedQuoteId);
 });
 
 $("#quoteSearchPopup input").keypress((e) => {
diff --git a/src/sass/style.scss b/src/sass/style.scss
index a0149b4a1..497e1ff31 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -139,6 +139,10 @@ html {
   background: var(--main-color);
 }
 
+::-webkit-scrollbar-corner{
+  background: var(--subcolour);
+}
+
 a {
   color: var(--sub-color);
   transition: 0.25s;
@@ -623,6 +627,8 @@ a:hover {
     display: grid;
     gap: 1rem;
     width: 1000px;
+    height: 80vh;
+    grid-template-rows: auto auto auto 1fr;
 
     #extraResults{
       text-align: center;
@@ -633,100 +639,75 @@ a:hover {
       color: var(--sub-color);
     }
 
-    .searchResult{
-      height: 2rem;
-      font-size: 0.8rem;
-    }
-    .quoteSearchResults{
+    
+    #quoteSearchResults{
       display: grid;
-      gap: 0.3rem;
-    }
+      gap: 0.5rem;
+      height: auto;
+      overflow: scroll;
 
-    .searchResultTable {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-      user-select: none;
-
-      .alignRight{
-        text-align: right;
-      }
-
-      tr td:first-child {
-        text-align: center;
-      }
-
-      td {
-        padding: 0.5rem 0.5rem;
-        .fixedHeight{
-          height: 2rem;
-          overflow: hidden;
-          display: grid;
+      .searchResult{
+        display: grid;
+        grid-template-columns: 1fr 1fr 3fr 0fr;
+        grid-auto-rows: auto;
+        width: 100%;
+        gap: 1rem;
+        Transition: 0.25s;
+        padding: 1rem;
+        box-sizing:border-box;
+        user-select: none;
+        cursor: pointer;
+        .text{
+          grid-column-start: 1;
+          grid-column-end: 4;
+          grid-row-start: 1;
+          grid-row-end: 2;
+          overflow:visible;
+          color: var(--text-color);
+        }
+        .id{
+          grid-column-start: 1;
+          grid-column-end: 2;
+          grid-row-start: 2;
+          grid-row-end: 3;
+          font-size: 0.8rem;
+          color: var(--sub-color);
+        }
+        .length{
+          grid-column-start: 2;
+          grid-column-end: 3;
+          grid-row-start: 2;
+          grid-row-end: 3;
+          font-size: 0.8rem;
+          color: var(--sub-color);
+        }
+        .source{
+          grid-column-start: 3;
+          grid-column-end: 4;
+          grid-row-start: 2;
+          grid-row-end: 3;
+          font-size: 0.8rem;
+          color: var(--sub-color);
+        }
+        .resultChevron{
+          grid-column-start: 4;
+          grid-column-end: 5;
+          grid-row-start: 1;
+          grid-row-end: 3;
+          display: flex;
           align-items: center;
-        }
-        &.me {
-          color: var(--main-color);
-          font-weight: 900;
-        }
-      }
-
-      thead {
-        color: var(--sub-color);
-        font-size: 0.75rem;
-
-        td {
-          padding: 0.5rem;
-          background: var(--bg-color);
-          position: -webkit-sticky;
-          position: sticky;
-          top: 0;
-          z-index: 99;
-        }
-      }
-
-      tbody {
-        color: var(--text-color);
-        .fillerResult td{
+          justify-items:center;
           color: var(--sub-color);
+          font-size:2rem;
         }
-        td{
-          transition: 0.25s;
-          height: 3rem;
-        }
-        tr td:nth-child(3),
-        tr td:nth-child(4){
-          font-size: .75rem;
-        }
-        tr td:nth-child(5){
-          color: var(--sub-color);
-        }
-        .searchResult:hover td{
-          background: rgba(0, 0, 0, 0.1);
+        .sub{
+          opacity: 0.5;
         }
       }
-
-      tfoot {
-        td {
-          padding: 0.5rem;
-          position: -webkit-sticky;
-          position: sticky;
-          bottom: 0;
-          background: var(--bg-color);
-          color: var(--sub-color);
-          z-index: 4;
-        }
+      .searchResult:hover{
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
       }
-
-      tr {
-        td:first-child {
-          padding-left: 1rem;
-        }
-        td:last-child {
-          padding-right: 1rem;
-        }
-      }
-
-      
     }
   }
 }
diff --git a/static/index.html b/static/index.html
index 58caa784c..2c8b2e6e5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -152,26 +152,10 @@
       <div id="quoteSearchPopup" mode="">
         <div class="title">Quote Search</div>
         <input id="searchBox" class="searchBox" type="text" maxLength="200" autocomplete="off"/>
-        <table class="searchResultTable">
-          <thead>
-            <tr>
-              <td class="alignRight" width="5%">#</td>
-              <td class="alignRight" width="10%">length</td>
-              <td>
-                text
-              </td>
-              <td  width="30%">
-                source
-              </td>
-              <td width="1%"></td>
-            </tr>
-          </thead>
-          <tbody id="searchResultList">
-            
-          </tbody>
-        </table>
-        <div id="extraResults" class="quoteSearchResults">No search results</div>
-        <div class="button">ok</div>
+        <div id="extraResults">No search results</div>
+        <div id="quoteSearchResults" class="quoteSearchResults">
+
+        </div>
       </div>
     </div>
     <div id="tagsWrapper" class="hidden">