diff --git a/client/src/components/SearchResult.vue b/client/src/components/SearchResult.vue
index 70907be..19c300f 100644
--- a/client/src/components/SearchResult.vue
+++ b/client/src/components/SearchResult.vue
@@ -1,22 +1,30 @@
 <template>
-    <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1" v-on:click="toggleExpansion()">
+    <b-card class="mb-1" body-class="p-0 expandable-result" footer-class="my-1"
+            v-on:mouseover="hover" v-on:click="toggleExpansion" :class="[expanded ? 'expanded' : '']">
         <b-card-text class="mu-2 py-1 mb-1">
             <table v-if="expanded" class="quote-list px-3 py-1 w-100">
-                <tr v-for="(quote, index) in above" :key="`quote-a-${index}`">
-                    <td class="quote-speaker my-3 pl-3">{{ quote.speaker }}</td>
-                    <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
+                <tr v-for="(quote, index) in above" class="secondary" :key="`quote-a-${index}`">
+                    <td class="quote-speaker my-3 pl-3">
+                        <div>{{ quote.speaker }}</div>
+                    </td>
+                    <td class="quote-text w-100 pr-3">
+                        <div>{{ quote.text }}</div>
+                    </td>
                 </tr>
                 <tr>
                     <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td>
                     <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
                 </tr>
-                <tr v-for="(quote, index) in below" :key="`quote-b-${index}`">
-                    <td class="quote-speaker my-3 pl-3">{{ quote.speaker }}</td>
-                    <td class="quote-text w-100 pr-3">{{ quote.text }}</td>
+                <tr v-for="(quote, index) in below" class="secondary" :key="`quote-b-${index}`">
+                    <td class="quote-speaker my-3 pl-3">
+                        <div>{{ quote.speaker }}</div>
+                    </td>
+                    <td class="quote-text w-100 pr-3">
+                        <div>{{ quote.text }}</div>
+                    </td>
                 </tr>
             </table>
             <table v-else class="quote-list px-3 py-1 w-100">
-                <tr v-for="(quote, index) in above" :key="`quote-a-${index}`">
                 <tr>
                     <td class="quote-speaker my-3 pl-3" v-html="item._highlightResult.speaker.value"></td>
                     <td class="quote-text w-100 pr-3" v-html="item._highlightResult.text.value"></td>
@@ -31,39 +39,41 @@
 </template>
 
 <style lang="scss">
-    @import "../assets/scss/_variables";
+@import "../assets/scss/_variables";
 
-    .expandable-result {
-        cursor: pointer;
+.expandable-result {
+    cursor: pointer;
+}
+
+.collapse {
+    display: block;
+}
+
+.search-result-link {
+    white-space: nowrap;
+    font-size: 0.75em !important;
+}
+
+.quote-list > tr {
+    white-space: nowrap;
+
+    &:hover {
+        background-color: $grey-4;
     }
+}
 
-    .collapse {
-        display: block;
-    }
+.quote-text {
+    white-space: normal;
+}
 
-    .search-result-link {
-        white-space: nowrap;
-        font-size: 0.75em !important;
-    }
-
-    .quote-list > tr {
-        white-space: nowrap;
-
-        &:hover { background-color: $grey-4; }
-    }
-
-    .quote-text {
-        white-space: normal;
-    }
-
-    .quote-speaker {
-        min-width: 75px;
-        padding-right: 1em;
-        font-weight: 600;
-        vertical-align: text-top;
-        text-align: right;
-        font-family: 'Montserrat', sans-serif;
-    }
+.quote-speaker {
+    min-width: 75px;
+    padding-right: 1em;
+    font-weight: 600;
+    vertical-align: text-top;
+    text-align: right;
+    font-family: 'Montserrat', sans-serif;
+}
 </style>
 
 <script>
@@ -74,20 +84,32 @@ export default {
   data() {
     return {
       expanded: false,
-      hasExpanded: false,
+      fetching: false,
       above: null,
       below: null,
     };
   },
+  computed: {
+    fetched() {
+      return this.above !== null || this.below !== null;
+    },
+  },
   methods: {
     toggleExpansion() {
       this.expanded = !this.expanded;
       // if first time expanding, fetch quotes
-      if (!this.hasExpanded && this.expanded) {
+      if (!this.fetchQuotes()) {
         this.hasExpanded = true;
         this.fetchQuotes();
       }
     },
+    hover() {
+      if (!this.fetched && !this.fetching) {
+        this.fetching = true;
+        this.fetchQuotes();
+        this.fetching = false;
+      }
+    },
     fetchQuotes() {
       const path = `${process.env.VUE_APP_BASE_APP_URL}/api/quote_surround?season=\
 ${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;