diff --git a/client/package-lock.json b/client/package-lock.json
index 44804e9..b2268d0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3417,6 +3417,16 @@
       "integrity": "sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clipboardy": {
       "version": "2.3.0",
       "resolved": "https://registry.npm.taobao.org/clipboardy/download/clipboardy-2.3.0.tgz?cache=0&sync_timestamp=1584603949505&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fclipboardy%2Fdownload%2Fclipboardy-2.3.0.tgz",
@@ -4436,6 +4446,11 @@
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
       "dev": true
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npm.taobao.org/depd/download/depd-1.1.2.tgz",
@@ -5990,6 +6005,14 @@
         "slash": "^2.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npm.taobao.org/graceful-fs/download/graceful-fs-4.2.4.tgz?cache=0&sync_timestamp=1588087063358&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fgraceful-fs%2Fdownload%2Fgraceful-fs-4.2.4.tgz",
@@ -9938,6 +9961,11 @@
         "ajv-keywords": "^3.4.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/select-hose/download/select-hose-2.0.0.tgz",
@@ -10964,6 +10992,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@@ -11474,6 +11507,14 @@
       "resolved": "https://registry.npmjs.org/vue-autosuggest/-/vue-autosuggest-2.2.0.tgz",
       "integrity": "sha512-cHgEakpoRUOaqXXEo8RcRrbSTM3eAaCu9b55ZXiKbaS6IUD8ewqffQrMy/A1DXqHSQbyEEGui4oAsCbRge29Jg=="
     },
+    "vue-clipboard2": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
+      "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.1.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 99d654e..d693d24 100644
--- a/client/package.json
+++ b/client/package.json
@@ -19,6 +19,7 @@
         "instantsearch.css": "7.1.0",
         "vue": "^2.6.11",
         "vue-autosuggest": "^2.2.0",
+        "vue-clipboard2": "^0.3.1",
         "vue-instantsearch": "^3.1.0",
         "vue-loading-skeleton": "^1.1.9",
         "vue-router": "^3.2.0",
diff --git a/client/src/App.vue b/client/src/App.vue
index a85471e..265356e 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,10 +1,39 @@
 <template>
     <div id="app">
-        <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
-            <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
+        <b-navbar>
+            <b-navbar-brand>
+                <router-link :to="{ name: 'Home' }" class="no-link">
+                    The Office Quotes
+                </router-link>
+            </b-navbar-brand>
+            <b-collapse id="nav-collapse" is-nav>
+                <b-navbar-nav>
+                    <b-nav-item href="#">
+                        <router-link :to="{ name: 'Home' }" class="no-link">
+                            Home
+                        </router-link>
+                    </b-nav-item>
+                    <b-nav-item href="#">
+                        <router-link :to="{ name: 'Home' }" class="no-link">
+                            About
+                        </router-link>
+                    </b-nav-item>
+                </b-navbar-nav>
+            </b-collapse>
+        </b-navbar>
+        <ais-instant-search
+            index-name="prod_THEOFFICEQUOTES"
+            :search-client="searchClient"
+            :insights-client="insightsClient"
+        >
+            <b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
                 <b-row class="my-3 pl-1">
                     <b-col lg="3" xl="2" md="12">
-                        <ais-search-box @keydown.native="showResults" ref="searchbox" placeholder="Search here…"/>
+                        <ais-search-box
+                            @keydown.native="showResults"
+                            ref="searchbox"
+                            placeholder="Search here…"
+                        />
                     </b-col>
                 </b-row>
                 <b-row>
@@ -17,62 +46,87 @@
                     <b-col md="0" lg="0" xl="2"></b-col>
                 </b-row>
             </b-container>
+            <ais-configure :clickAnalytics="true" />
         </ais-instant-search>
     </div>
 </template>
 
 <style lang="scss">
-    @import "assets/scss/_variables";
-    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
-    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@import "assets/scss/_variables";
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
 
-    body { background-color: $grey-0; font-family: 'Roboto', sans-serif; }
+body {
+    background-color: $grey-0;
+    font-family: "Roboto", sans-serif;
+}
 
-    .ais-SearchBox-form {
-        border: none;
-    }
-
-    .ais-SearchBox-input {
-        color: $grey-8;
-        background-color: $grey-6;
-        border-color: transparent;
-        border-radius: 1px;
-    }
-
-    .ais-SearchBox-submitIcon, .ais-SearchBox-resetIcon {
-        > path { fill: $grey-9; }
-    }
-
-    .ais-SearchBox-input::placeholder {
-        color: white;
+.navbar {
+    background-color: $grey-2;
+}
+
+.navbar-brand {
+    font-family: "Poppins", sans-serif;
+    font-size: 1.4em;
+    color: $grey-11 !important;
+}
+
+.nav-link {
+    color: $grey-9 !important;
+}
+
+.ais-SearchBox-form {
+    border: none;
+}
+
+.ais-SearchBox-input {
+    color: $grey-8;
+    background-color: $grey-6;
+    border-color: transparent;
+    border-radius: 1px;
+}
+
+.ais-SearchBox-submitIcon,
+.ais-SearchBox-resetIcon {
+    > path {
+        fill: $grey-9;
     }
+}
 
+.ais-SearchBox-input::placeholder {
+    color: white;
+}
 </style>
 
 <script>
-import algoliasearch from 'algoliasearch/lite';
-import SeasonList from './components/SeasonList.vue';
-import 'instantsearch.css/themes/algolia-min.css';
+import algoliasearch from "algoliasearch/lite";
+import SeasonList from "./components/SeasonList.vue";
+import "instantsearch.css/themes/algolia-min.css";
 
 export default {
-  name: 'App',
-  components: {
-    SeasonList,
-  },
-  data() {
-    return {
-      searchClient: algoliasearch(
-        process.env.VUE_APP_ALGOLIA_APP_ID,
-        process.env.VUE_APP_ALGOLIA_API_KEY,
-      ),
-    };
-  },
-  methods: {
-    showResults() {
-      if (this.$refs.searchbox.currentRefinement !== '' && this.$route.path !== '/search_results') {
-        this.$router.push({ name: 'SearchResults' });
-      }
+    name: "App",
+    components: {
+        SeasonList,
+    },
+    data() {
+        return {
+            searchClient: algoliasearch(
+                process.env.VUE_APP_ALGOLIA_APP_ID,
+                process.env.VUE_APP_ALGOLIA_API_KEY
+            ),
+            insightsClient: window.aa,
+        };
+    },
+    methods: {
+        showResults() {
+            if (
+                this.$refs.searchbox.currentRefinement !== "" &&
+                this.$route.path !== "/search_results"
+            ) {
+                this.$router.push({name: "SearchResults"});
+            }
+        },
     },
-  },
 };
 </script>
diff --git a/client/src/components/Character.vue b/client/src/components/Character.vue
index 2586dea..2b432f2 100644
--- a/client/src/components/Character.vue
+++ b/client/src/components/Character.vue
@@ -3,20 +3,28 @@
         <b-breadcrumb :items="breadcrumbs"></b-breadcrumb>
         <b-card>
             <h4 v-if="character">{{ this.$route.params.character }}</h4>
-            <Skeleton v-else style="max-width: 30%;"></Skeleton>
+            <Skeleton v-else style="max-width: 30%"></Skeleton>
         </b-card>
     </div>
 </template>
 
 <style lang="scss" scoped>
 @import "../assets/scss/_variables";
-.card-body h4, .breadcrumb-item.active {
+
+.card-body h4,
+.breadcrumb-item.active {
     text-transform: capitalize;
 }
 
 .skeleton {
     min-height: 24px;
 }
+a {
+    color: #1296ff;
+    &:hover {
+        color: #007fe0;
+    }
+}
 
 .breadcrumb-item + .breadcrumb-item::before {
     color: $grey-10;
@@ -25,6 +33,7 @@
 .breadcrumb {
     background-color: $grey-3;
     border-radius: 0;
+
     .breadcrumb-item {
         color: $grey-10;
     }
@@ -35,32 +44,35 @@
 import Skeleton from './Skeleton.vue';
 
 export default {
-  data() {
-    return {
-      character: null,
-    };
-  },
-  components: {
-    Skeleton,
-  },
-  computed: {
-    breadcrumbs() {
-      return [
-        {
-          text: 'Home',
-          to: { name: 'Home' },
-        },
-        {
-          text: 'Characters',
-          to: { name: 'Home' },
-        },
-        {
-          text: this.character !== null ? this.character.name : this.$route.params.character,
-          active: true,
-        },
-      ];
+    data() {
+        return {
+            character: null,
+        };
     },
-  },
-  methods: {},
+    components: {
+        Skeleton,
+    },
+    computed: {
+        breadcrumbs() {
+            return [
+                {
+                    text: 'Home',
+                    to: {name: 'Home'},
+                },
+                {
+                    text: 'Characters',
+                    to: {name: 'Home'},
+                },
+                {
+                    text:
+                        this.character !== null
+                            ? this.character.name
+                            : this.$route.params.character,
+                    active: true,
+                },
+            ];
+        },
+    },
+    methods: {},
 };
 </script>
diff --git a/client/src/components/CharacterList.vue b/client/src/components/CharacterList.vue
index b6ffae3..6e090c8 100644
--- a/client/src/components/CharacterList.vue
+++ b/client/src/components/CharacterList.vue
@@ -1,72 +1,85 @@
 <template>
-    <div class="pt-2" v-if="characters" :fluid=true>
-        <b-button squared class="mx-2 my-1 character-button" size="sm"
-                  v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
-                  :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
-                  :to="{ name: 'Character', params: { character: character.id } }"
+    <div class="pt-2" v-if="characters" :fluid="true">
+        <b-button
+            squared
+            class="mx-2 my-1 character-button"
+            size="sm"
+            v-for="character in characters"
+            :key="character.name"
+            :id="`character-${character.id}`"
+            :title="`${character.appearances} Quote${
+        character.appearances > 1 ? 's' : ''
+      }`"
+            :to="{ name: 'Character', params: { character: character.id } }"
         >
             {{ character.name }}
-            <b-badge class="ml-1">{{ character.appearances}}</b-badge>
+            <b-badge class="ml-1">{{ character.appearances }}</b-badge>
         </b-button>
     </div>
 </template>
 
 <style lang="scss">
-    @import "../assets/scss/_variables";
+@import "../assets/scss/_variables";
 
-    .btn {
+.btn {
+    box-shadow: none;
+
+    &:focus {
         box-shadow: none;
-        &:focus { box-shadow: none; }
     }
+}
 
-    .character-button {
-        color: $grey-10;
-        background-color: $grey-4;
-        border-color: $grey-3;
-        .badge {
-            color: lighten($grey-11, 8%);
-        }
+.character-button {
+    color: $grey-10;
+    background-color: $grey-4;
+    border-color: $grey-3;
+
+    .badge {
+        color: lighten($grey-11, 8%);
     }
+}
 
-    .character-button {
-        &:focus {
-            background-color: $grey-6 !important;
-            border-color: $grey-4 !important;
-
-            &:active { box-shadow: none !important;}
-        }
-
-        &:hover {
-            background-color: $grey-4 !important;
-            border-color: $grey-3 !important;
-        }
+.character-button {
+    &:focus {
+        background-color: $grey-6 !important;
+        border-color: $grey-4 !important;
 
         &:active {
-            background-color: $grey-3 !important;
-            border-color: $grey-3 !important;
+            box-shadow: none !important;
         }
     }
 
-    .character-button > .badge {
-        background-color: $grey-7;
+    &:hover {
+        background-color: $grey-4 !important;
+        border-color: $grey-3 !important;
     }
 
-    /*.btn-dark {*/
-    /*    &:not(:disabled), &:not {*/
-    /*        */
-    /*    }*/
-    /*}*/
+    &:active {
+        background-color: $grey-3 !important;
+        border-color: $grey-3 !important;
+    }
+}
 
-    /*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
-    /*    color: #ffffff;*/
-    /*    background-color: #1d2124;*/
-    /*    border-color: #171a1d;*/
-    /*}*/
+.character-button > .badge {
+    background-color: $grey-7;
+}
+
+/*.btn-dark {*/
+/*    &:not(:disabled), &:not {*/
+/*        */
+/*    }*/
+/*}*/
+
+/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
+/*    color: #ffffff;*/
+/*    background-color: #1d2124;*/
+/*    border-color: #171a1d;*/
+/*}*/
 </style>
 
 <script>
 export default {
-  name: 'CharacterList',
-  props: ['characters'],
+    name: "CharacterList",
+    props: ["characters"],
 };
 </script>
diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index 9f6c32f..cfd729b 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -1,21 +1,39 @@
 <template>
     <div>
-        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
-        - ${episode != null ? episode.title : ''}`" class="mb-4">
-            <span v-if="episode">
-                {{ episode.description }}
-            </span>
-            <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
+        <b-card
+            :title="`Season ${this.$route.params.season} Episode ${
+        this.$route.params.episode
+      } \
+        - ${episode != null ? episode.title : ''}`"
+            class="mb-4"
+        >
+      <span v-if="episode">
+        {{ episode.description }}
+      </span>
+            <CharacterList
+                v-if="episode && episode.characters"
+                :characters="episode.characters"
+            ></CharacterList>
         </b-card>
         <div v-if="episode != null">
-            <b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
-                    class="mb-1" body-class="p-0">
+            <b-card
+                v-for="(scene, sceneIndex) in episode.scenes"
+                :key="`scene-${sceneIndex}`"
+                class="mb-1"
+                body-class="p-0"
+            >
                 <b-card-text class="my-2">
-                    <QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
-                    <span v-if="scene.deleted" class="mt-n2 mb-4 text-muted deleted-scene pl-2"
-                          :footer="`Deleted Scene ${scene.deleted}`">
-                                  Deleted Scene {{ scene.deleted }}
-                              </span>
+                    <QuoteList
+                        :quotes="scene.quotes"
+                        :sceneIndex="sceneIndex"
+                    ></QuoteList>
+                    <span
+                        v-if="scene.deleted"
+                        class="mt-n2 mb-4 text-muted deleted-scene pl-2"
+                        :footer="`Deleted Scene ${scene.deleted}`"
+                    >
+            Deleted Scene {{ scene.deleted }}
+          </span>
                 </b-card-text>
             </b-card>
         </div>
@@ -24,7 +42,7 @@
 
 <style lang="scss">
 .card-title {
-    font-family: 'Montserrat', sans-serif;
+    font-family: "Montserrat", sans-serif;
     font-weight: 600;
 }
 
@@ -35,49 +53,50 @@
 </style>
 
 <script>
-import axios from 'axios';
-import QuoteList from './QuoteList.vue';
-import CharacterList from './CharacterList.vue';
+import axios from "axios";
+import QuoteList from "./QuoteList.vue";
+import CharacterList from "./CharacterList.vue";
 
 export default {
-  name: 'Episode',
-  components: {
-    QuoteList,
-    CharacterList,
-  },
-  data() {
-    return {
-      episode: null,
-    };
-  },
-  methods: {
-    getEpisode() {
-      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/episode/\
+    name: "Episode",
+    components: {
+        QuoteList,
+        CharacterList,
+    },
+    data() {
+        return {
+            episode: null,
+        };
+    },
+    methods: {
+        getEpisode() {
+            const path = `${process.env.VUE_APP_API_URL}/api/episode/\
 ${this.$route.params.season}/${this.$route.params.episode}/`;
-      axios.get(path)
-        .then((res) => {
-          this.episode = res.data;
-          // Scroll
-          if (this.$route.hash) {
-            this.$nextTick(() => {
-              const section = document.getElementById(this.$route.hash.substring(1));
-              this.$scrollTo(section, 500, { easing: 'ease-in' });
-            });
-          }
-        })
-        .catch((error) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        });
+            axios
+                .get(path)
+                .then((res) => {
+                    this.episode = res.data;
+                    // Scroll
+                    if (this.$route.hash) {
+                        this.$nextTick(() => {
+                            const section = document.getElementById(this.$route.hash.substring(1));
+                            this.$scrollTo(section, 500, {easing: "ease-in"});
+                        });
+                    }
+                })
+                .catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+        },
     },
-  },
-  created() {
-    this.getEpisode();
-  },
-  watch: {
-    $route() {
-      this.getEpisode();
+    created() {
+        this.getEpisode();
+    },
+    watch: {
+        $route() {
+            this.getEpisode();
+        },
     },
-  },
 };
 </script>
diff --git a/client/src/components/Home.vue b/client/src/components/Home.vue
index 948d470..ce53609 100644
--- a/client/src/components/Home.vue
+++ b/client/src/components/Home.vue
@@ -1,8 +1,9 @@
 <template>
     <b-card title="The Office Quotes">
         <b-card-text>
-            A Vue.js application serving you {{ stats.totals.quote }} quotes from your favorite show - The Office.
-            <br>
+            A Vue.js application serving you {{ stats.totals.quote }} quotes from your
+            favorite show - The Office.
+            <br/>
             Click on a Season and Episode on the left-hand sidebar to view quotes.
             Search for quotes with the instant searchbox.
         </b-card-text>
@@ -10,41 +11,42 @@
 </template>
 
 <style lang="scss">
-    @import "../assets/scss/_variables";
+@import "../assets/scss/_variables";
 
-    .card {
-        color: $grey-9;
-        background-color: $grey-2;
-        border-bottom: 1px solid $grey-1;
-        border-radius: 0;
-    }
+.card {
+    color: $grey-9;
+    background-color: $grey-2;
+    border-bottom: 1px solid $grey-1;
+    border-radius: 0;
+}
 </style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
-  name: 'Home',
-  data() {
-    return {
-      stats: null,
-    };
-  },
-  methods: {
-    getStats() {
-      const path = `${process.env.VUE_APP_BASE_APP_URL}/api/stats/`;
-      axios.get(path)
-        .then((res) => {
-          this.stats = res.data;
-        })
-        .catch((error) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        });
+    name: "Home",
+    data() {
+        return {
+            stats: null,
+        };
+    },
+    methods: {
+        getStats() {
+            const path = `${process.env.VUE_APP_API_URL}/api/stats/`;
+            axios
+                .get(path)
+                .then((res) => {
+                    this.stats = res.data;
+                })
+                .catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+        },
+    },
+    created() {
+        this.getStats();
     },
-  },
-  created() {
-    this.getStats();
-  },
 };
 </script>
diff --git a/client/src/components/SearchResult.vue b/client/src/components/SearchResult.vue
index 73d4d44..c8f691c 100644
--- a/client/src/components/SearchResult.vue
+++ b/client/src/components/SearchResult.vue
@@ -1,9 +1,19 @@
 <template>
-    <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
+        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" class="secondary" :key="`quote-a-${index}`">
+                <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>
@@ -12,10 +22,20 @@
                     </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>
+                    <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" class="secondary" :key="`quote-b-${index}`">
+                <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>
@@ -26,14 +46,27 @@
             </table>
             <table v-else class="quote-list px-3 py-1 w-100">
                 <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>
+                    <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>
             </table>
-            <router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
-                         :to="{ name: 'Episode', params: { season: item.season, episode: item.episode_rel },
-                         hash: `#${item.section_rel - 1}-${item.quote_rel - 1}` }">
-                Season {{ item.season }} Episode {{ item.episode_rel }} Scene {{ item.section_rel }}
+            <router-link
+                v-if="expanded"
+                class="no-link search-result-link w-100 text-muted mb-2 ml-2"
+                :to="{
+          name: 'Episode',
+          params: { season: item.season, episode: item.episode_rel },
+          hash: `#${item.section_rel - 1}-${item.quote_rel - 1}`,
+        }"
+            >
+                Season {{ item.season }} Episode {{ item.episode_rel }} Scene
+                {{ item.section_rel }}
             </router-link>
         </b-card-text>
     </b-card>
@@ -73,57 +106,58 @@
     font-weight: 600;
     vertical-align: text-top;
     text-align: right;
-    font-family: 'Montserrat', sans-serif;
+    font-family: "Montserrat", sans-serif;
 }
 </style>
 
 <script>
-import axios from 'axios';
+import axios from "axios";
 
 export default {
-  props: ['item'],
-  data() {
-    return {
-      expanded: false,
-      fetching: false,
-      above: null,
-      below: null,
-    };
-  },
-  computed: {
-    fetched() {
-      return this.above !== null || this.below !== null;
+    props: ["item"],
+    data() {
+        return {
+            expanded: false,
+            fetching: false,
+            above: null,
+            below: null,
+        };
     },
-  },
-  methods: {
-    toggleExpansion() {
-      this.expanded = !this.expanded;
-      // if first time expanding, fetch quotes
-      if (!this.fetchQuotes()) {
-        this.hasExpanded = true;
-        this.fetchQuotes();
-      }
+    computed: {
+        fetched() {
+            return this.above !== null || this.below !== null;
+        },
     },
-    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=\
+    methods: {
+        toggleExpansion() {
+            this.expanded = !this.expanded;
+            // if first time expanding, fetch quotes
+            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_API_URL}/api/quote_surround?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) => {
-          // eslint-disable-next-line no-console
-          console.error(error);
-        });
+            axios
+                .get(path)
+                .then((res) => {
+                    this.above = res.data.above;
+                    this.below = res.data.below;
+                })
+                .catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+                });
+        },
     },
-  },
 };
 </script>
diff --git a/client/src/main.js b/client/src/main.js
index 2f5fcbd..d2ca680 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,19 +1,29 @@
-import 'bootstrap/dist/css/bootstrap.css';
-import Vue from 'vue';
-import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
-import InstantSearch from 'vue-instantsearch';
-import VueScrollTo from 'vue-scrollto';
-import App from './App.vue';
-import router from './router';
+import "bootstrap/dist/css/bootstrap.css";
+import Vue from "vue";
+import {BootstrapVue, BootstrapVueIcons} from "bootstrap-vue";
+import InstantSearch from "vue-instantsearch";
+import VueClipboard from 'vue-clipboard2'
+import VueScrollTo from "vue-scrollto";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
 
 Vue.use(VueScrollTo);
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);
 Vue.use(InstantSearch);
+Vue.use(VueClipboard)
 
 Vue.config.productionTip = false;
 
+router.beforeEach((to, from, next) => {
+    // eslint-disable-next-line no-constant-condition
+    if (from.name !== null && to.name === "Character" && false) next(false);
+    else next();
+});
+
 new Vue({
-  router,
-  render: (h) => h(App),
-}).$mount('#app');
+    router,
+    store,
+    render: (h) => h(App),
+}).$mount("#app");
diff --git a/client/src/store.js b/client/src/store.js
new file mode 100644
index 0000000..b228841
--- /dev/null
+++ b/client/src/store.js
@@ -0,0 +1,12 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    state: {
+        episodeCount: [6, 22, 23, 14, 26, 24, 24, 24, 23]
+    },
+    mutations: {},
+    actions: {},
+});