diff --git a/app/app.vue b/app/app.vue
index 46d842c..4122eba 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -43,7 +43,7 @@ const headings = [
 
           <!-- Logo/Brand -->
           <div class="flex">
-            <img :src="logoSrc" alt="The Office Logo" class="mr-6 h-full max-w-[225px] py-4" />
+            <img :src="logoSrc" alt="The Office Logo" class="mr-6 h-full max-w-[225px] py-4" >
           </div>
         </div>
 
diff --git a/app/components/common/Breadcrumb.vue b/app/components/common/Breadcrumb.vue
index 642122a..6782af3 100644
--- a/app/components/common/Breadcrumb.vue
+++ b/app/components/common/Breadcrumb.vue
@@ -25,7 +25,7 @@ const props = defineProps<
         <BreadcrumbSeparator v-if="index !== 0" />
         <BreadcrumbItem>
           <BreadcrumbLink class="text-gray-600" as-child>
-            <NuxtLink :to="item.to" v-if="index !== lastIndex">
+            <NuxtLink v-if="index !== lastIndex" :to="item.to">
               {{ item.text }}
             </NuxtLink>
             <span v-else>{{ item.text }}</span>
diff --git a/app/components/common/Skeleton.vue b/app/components/common/Skeleton.vue
index 8b2f0ee..f7c8fdf 100644
--- a/app/components/common/Skeleton.vue
+++ b/app/components/common/Skeleton.vue
@@ -8,6 +8,49 @@
   </div>
 </template>
 
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    innerStyle: {
+      type: Object,
+      default: null,
+    },
+    innerClass: {
+      type: String,
+      default: '',
+    },
+    animated: {
+      type: Boolean,
+      default: true,
+    },
+    borderRadius: {
+      type: String,
+      default: '',
+    },
+    primaryColor: {
+      type: String,
+      default: '',
+    },
+    secondaryColor: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    style() {
+      return {
+        '--primary-color': this.primaryColor,
+        '--secondary-color': this.secondaryColor,
+        '--border-radius': this.borderRadius,
+      };
+    },
+  },
+});
+</script>
+
 <style lang="scss">
 @use '@/scss/_variables.scss' as *;
 
@@ -69,46 +112,3 @@
   }
 }
 </style>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    innerStyle: {
-      type: Object,
-      default: null,
-    },
-    innerClass: {
-      type: String,
-      default: '',
-    },
-    animated: {
-      type: Boolean,
-      default: true,
-    },
-    borderRadius: {
-      type: String,
-      default: '',
-    },
-    primaryColor: {
-      type: String,
-      default: '',
-    },
-    secondaryColor: {
-      type: String,
-      default: '',
-    },
-  },
-
-  computed: {
-    style() {
-      return {
-        '--primary-color': this.primaryColor,
-        '--secondary-color': this.secondaryColor,
-        '--border-radius': this.borderRadius,
-      };
-    },
-  },
-});
-</script>
diff --git a/app/components/features/DynamicSpeaker.vue b/app/components/features/DynamicSpeaker.vue
index 9992167..5df43d9 100644
--- a/app/components/features/DynamicSpeaker.vue
+++ b/app/components/features/DynamicSpeaker.vue
@@ -1,10 +1,10 @@
 <template>
   <span>
     <template v-for="(constituent, index) in texts">
-      <NuxtLink class="speaker-link" v-if="constituent.route" :key="index" :to="constituent.route">
+      <NuxtLink v-if="constituent.route" :key="index" class="speaker-link" :to="constituent.route">
         {{ constituent.text }}
       </NuxtLink>
-      <span class="speaker-bg" v-else :key="'plain-' + index">{{ constituent }}</span>
+      <span v-else :key="'plain-' + index" class="speaker-bg">{{ constituent }}</span>
     </template>
   </span>
 </template>
diff --git a/app/components/features/QuoteList.vue b/app/components/features/QuoteList.vue
index 554cc3b..1ab88d7 100644
--- a/app/components/features/QuoteList.vue
+++ b/app/components/features/QuoteList.vue
@@ -25,6 +25,7 @@
           {{ quote.speaker }}
         </NuxtLink>
       </td>
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <td class="quote-text w-100 pr-3" v-html="transform(quote.text)" />
       <td class="px-1 pl-2">
         <a :href="quote_link(index)" class="no-link" @click="copy(index)">
@@ -35,6 +36,44 @@
   </table>
 </template>
 
+<script lang="ts">
+// import { defineComponent } from 'vue';
+
+// import DynamicSpeaker from '@/components/features/DynamicSpeaker.vue';
+
+// export default defineComponent({
+//   components: {
+//     DynamicSpeaker,
+//   },
+
+//   props: {
+//     sceneIndex: {
+//       required: true,
+//       type: Number,
+//     },
+//     quotes: {
+//       required: true,
+//       type: Array,
+//     },
+//   },
+
+//   methods: {
+//     transform(quoteText) {
+//       if (quoteText.includes('[')) {
+//         return quoteText.replace(/\[([^\]]+)]/g, ' <i>[$1]</i> ');
+//       }
+//       return quoteText;
+//     },
+//     quote_link(quoteIndex) {
+//       return `/${this.$route.params.season}/${this.$route.params.episode}#${this.sceneIndex}-${quoteIndex}`;
+//     },
+//     copy(quoteIndex) {
+//       this.$copyText(import.meta.env.VUE_APP_BASE_URL + this.quote_link(quoteIndex));
+//     },
+//   },
+// });
+</script>
+
 <style lang="scss">
 @use '@/scss/_variables.scss' as *;
 
@@ -51,41 +90,3 @@
   }
 }
 </style>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import DynamicSpeaker from '@/components/features/DynamicSpeaker.vue';
-
-export default defineComponent({
-  components: {
-    DynamicSpeaker,
-  },
-
-  props: {
-    sceneIndex: {
-      required: true,
-      type: Number,
-    },
-    quotes: {
-      required: true,
-      type: Array,
-    },
-  },
-
-  methods: {
-    transform(quoteText) {
-      if (quoteText.includes('[')) {
-        return quoteText.replace(/\[([^\]]+)]/g, ' <i>[$1]</i> ');
-      }
-      return quoteText;
-    },
-    quote_link(quoteIndex) {
-      return `/${this.$route.params.season}/${this.$route.params.episode}#${this.sceneIndex}-${quoteIndex}`;
-    },
-    copy(quoteIndex) {
-      this.$copyText(import.meta.env.VUE_APP_BASE_URL + this.quote_link(quoteIndex));
-    },
-  },
-});
-</script>
diff --git a/app/components/features/SearchResult.vue b/app/components/features/SearchResult.vue
index 8e5544a..3c8f1c9 100644
--- a/app/components/features/SearchResult.vue
+++ b/app/components/features/SearchResult.vue
@@ -1,5 +1,5 @@
 <template>
-  <BCard
+  <!-- <BCard
     class="mb-1"
     body-class="p-0 expandable-result"
     footer-class="my-1"
@@ -50,9 +50,72 @@
         {{ item.section_rel }}
       </NuxtLink>
     </BCardText>
-  </BCard>
+  </BCard> -->
+  <div>SearchResult</div>
 </template>
 
+<script setup lang="ts">
+// import { defineComponent } from 'vue';
+
+// export default defineComponent({
+//   props: ['item'],
+
+//   data() {
+//     return {
+//       expanded: false,
+//       fetching: false,
+//       above: null,
+//       below: null,
+//       timeoutID: null,
+//     };
+//   },
+
+//   computed: {
+//     fetched() {
+//       return this.above !== null || this.below !== null;
+//     },
+//   },
+
+//   methods: {
+//     toggleExpansion() {
+//       this.expanded = !this.expanded;
+//       // if first time expanding, fetch quotes
+//       if (!this.fetchQuotes()) {
+//         this.hasExpanded = true;
+//         // this.fetchQuotes();
+//       }
+//     },
+//     hoverFetch() {
+//       if (!this.fetched && !this.fetching) {
+//         this.fetching = true;
+//         this.fetchQuotes();
+//         this.fetching = false;
+//       }
+//     },
+//     hoverOn() {
+//       // Schedule a fetching event
+//       // this.timeoutID = setTimeout(this.hoverFetch, 300);
+//     },
+//     hoverOff() {
+//       // Hover is off. Unschedule event if it has not already fetched.
+//       if (this.timeoutID !== null) clearTimeout(this.timeoutID);
+//     },
+//     fetchQuotes() {
+//       const path = `/api/surrounding?season=${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;
+//       axios
+//         .get(path)
+//         .then((res) => {
+//           this.above = res.data.above;
+//           this.below = res.data.below;
+//         })
+//         .catch((error) => {
+//           console.error(error);
+//         });
+//     },
+//   },
+// });
+</script>
+
 <style lang="scss">
 @use '@/scss/_variables.scss' as *;
 
@@ -90,67 +153,3 @@
   font-family: 'Montserrat', sans-serif;
 }
 </style>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import axios from 'axios';
-
-export default defineComponent({
-  props: ['item'],
-
-  data() {
-    return {
-      expanded: false,
-      fetching: false,
-      above: null,
-      below: null,
-      timeoutID: null,
-    };
-  },
-
-  computed: {
-    fetched() {
-      return this.above !== null || this.below !== null;
-    },
-  },
-
-  methods: {
-    toggleExpansion() {
-      this.expanded = !this.expanded;
-      // if first time expanding, fetch quotes
-      if (!this.fetchQuotes()) {
-        this.hasExpanded = true;
-        // this.fetchQuotes();
-      }
-    },
-    hoverFetch() {
-      if (!this.fetched && !this.fetching) {
-        this.fetching = true;
-        this.fetchQuotes();
-        this.fetching = false;
-      }
-    },
-    hoverOn() {
-      // Schedule a fetching event
-      // this.timeoutID = setTimeout(this.hoverFetch, 300);
-    },
-    hoverOff() {
-      // Hover is off. Unschedule event if it has not already fetched.
-      if (this.timeoutID !== null) clearTimeout(this.timeoutID);
-    },
-    fetchQuotes() {
-      const path = `/api/surrounding?season=${this.item.season}&episode=${this.item.episode_rel}&scene=${this.item.section_rel}&quote=${this.item.quote_rel}`;
-      axios
-        .get(path)
-        .then((res) => {
-          this.above = res.data.above;
-          this.below = res.data.below;
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-    },
-  },
-});
-</script>
diff --git a/app/components/layout/SearchBar.vue b/app/components/layout/SearchBar.vue
index 48de0ff..3fb6665 100644
--- a/app/components/layout/SearchBar.vue
+++ b/app/components/layout/SearchBar.vue
@@ -12,7 +12,7 @@ const searchQuery = ref('');
       type="text"
       placeholder="Quotes, characters, episodes..."
       class="w-72 rounded-lg border border-gray-400 py-2 pr-4 pl-10 outline-none focus:border-transparent focus:ring-2 focus:ring-blue-500"
-    />
+    >
     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
       <SearchIcon class="size-5 text-gray-500" />
     </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 05e8ebf..575ed6e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,5 +1,4 @@
-<template>
-  <!-- <BCard>
+<!-- <BCard>
     <template v-if="ready">
       <h4>The Office Quotes</h4>
       <BCardText>
@@ -24,12 +23,13 @@
       <Skeleton style="width: 60%" />
     </BCardText>
   </BCard> -->
+
+<template>
+  <div>
+    <h1>About</h1>
+  </div>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Skeleton from '@/components/common/Skeleton.vue';
-
+<script setup lang="ts">
 // export default defineComponent({
 //   name: 'HomeComponent',
 
diff --git a/app/pages/search/index.vue b/app/pages/search/index.vue
index 626f565..512ac28 100644
--- a/app/pages/search/index.vue
+++ b/app/pages/search/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <ais-hits>
-      <template v-slot="{ items }">
+      <template #default="{ items }">
         <div>
           <SearchResult v-for="item in items" :key="item.objectID" :item="item" />
         </div>