diff --git a/src/App.vue b/src/App.vue
index 41b5e9e..4587216 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,14 +2,16 @@
     <div id="app">
         <b-navbar>
             <b-navbar-brand>
-                <router-link :to="{ name: 'Home' }" class="no-link">The Office Quotes</router-link>
-                <b-badge style="font-size: 0.80rem;" class="mx-2" v-if="showBreakpointMarker" variant="dark">
-                        <span id="marker-xs" class="d-sm-none">XS</span>
-                        <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
-                        <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
-                        <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
-                        <span id="marker-xl" class="d-none d-xl-block">XL</span>
-                    </b-badge>
+                <router-link :to="{ name: 'Home' }" class="no-link">
+                    The Office Quotes
+                </router-link>
+                <b-badge v-if="showBreakpointMarker" style="font-size: 0.80rem;" class="mx-2" variant="dark">
+                    <span id="marker-xs" class="d-sm-none">XS</span>
+                    <span id="marker-sm" class="d-none d-sm-block d-md-none">SM</span>
+                    <span id="marker-md" class="d-none d-md-block d-lg-none">MD</span>
+                    <span id="marker-lg" class="d-none d-lg-block d-xl-none">LG</span>
+                    <span id="marker-xl" class="d-none d-xl-block">XL</span>
+                </b-badge>
             </b-navbar-brand>
             <b-collapse id="nav-collapse" is-nav>
                 <b-navbar-nav>
@@ -23,29 +25,39 @@
                             About
                         </router-link>
                     </b-nav-item>
+                    <b-nav-item href="#">
+                        <router-link :to="{ name: 'Characters' }" class="no-link">
+                            Characters
+                        </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">
+        <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" cols="12">
                     <b-col lg="3" xl="2" md="12">
-                        <ais-search-box @keydown.native="showResults" ref="searchbox" placeholder="Search here…"/>
-                        <Skeleton secondary_color="#3e3e3e" border_radius="1px" primary_color="#4A4A4A"
-                                  :inner_style="{ 'min-height': '35.6px' }"></Skeleton>
+                        <ais-search-box ref="searchbox" placeholder="Search here…" @keydown.native="showResults" />
+                        <Skeleton
+                            secondary_color="#3e3e3e" border_radius="1px"
+                            primary_color="#4A4A4A"
+                            :inner_style="{ 'min-height': '35.6px' }"
+                        />
                     </b-col>
                 </b-row>
                 <b-row align-h="start" cols="12">
                     <b-col lg="3" xl="2" md="12">
-                        <SeasonList></SeasonList>
+                        <SeasonList />
                     </b-col>
                     <b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">
-                        <router-view/>
+                        <router-view />
                     </b-col>
                 </b-row>
             </b-container>
-            <ais-configure :clickAnalytics="true"/>
+            <ais-configure :click-analytics="true" />
         </ais-instant-search>
     </div>
 </template>
@@ -119,16 +131,16 @@ export default {
             insightsClient: window.aa,
         };
     },
+    computed: {
+        showBreakpointMarker() {
+            return process.env.NODE_ENV === 'development';
+        }
+    },
     methods: {
         showResults() {
             if (this.$refs.searchbox.currentRefinement !== "" && this.$route.path !== "/search_results")
                 this.$router.push({name: "SearchResults"});
         },
-    },
-    computed: {
-        showBreakpointMarker() {
-            return process.env.NODE_ENV === 'development';
-        }
     }
 };
 </script>
diff --git a/src/store.js b/src/store.js
index e67c41b..630bbe1 100644
--- a/src/store.js
+++ b/src/store.js
@@ -167,6 +167,17 @@ export default new Vuex.Store({
         },
         getCharacter: (state) => (character_id) => {
             return state.characters[character_id];
+        },
+        getSortedCharacters: (state) => () => {
+            let keys =  Object.keys(state.characters);
+            console.log(keys)
+            keys.sort((a, b) => {
+                const a_count = state.characters[a].appearances;
+                const b_count = state.characters[b].appearances
+                if (a_count < b_count) return 1;
+                else return -1;
+            })
+            return keys;
         }
     }
 });