diff --git a/client/src/components/Characters.vue b/client/src/components/Characters.vue
index 70ed02d..9273c72 100644
--- a/client/src/components/Characters.vue
+++ b/client/src/components/Characters.vue
@@ -1,9 +1,21 @@
 <template>
-    <li>
-        <em v-for="character in characters" :key="character.name">
-            {{ character.name }}
-        </em>
-    </li>
+    <b-card v-if="ready">
+        <b-list-group>
+            <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
+                <b-row align-v="start" align-content="start">
+                    <b-col cols="5" md="4" lg="4" xl="3">
+                        <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
+                    </b-col>
+                    <b-col>
+                        <h4>
+                            {{ character.name || character_id }}
+                        </h4>
+                        <p class="pl-3">{{ character.summary }}</p>
+                    </b-col>
+                </b-row>
+            </b-list-group-item>
+        </b-list-group>
+    </b-card>
 </template>
 <style scoped>
 </style>
@@ -13,10 +25,16 @@ import {types} from "@/mutation_types";
 
 export default {
     created() {
-        console.log('preload character')
-        this.$store.dispatch(types.PRELOAD_CHARACTER);
+        this.$store.dispatch(types.PRELOAD_CHARACTER)
+            .then(() => {
+                // recompute computed properties since Vuex won't do it
+                this.$forceUpdate();
+            });
     },
     computed: {
+        ready() {
+            return this.$store.state.preloaded;
+        },
         characters() {
             return this.$store.state.characters;
         }
diff --git a/client/src/store.js b/client/src/store.js
index 301270c..e3e59c6 100644
--- a/client/src/store.js
+++ b/client/src/store.js
@@ -110,12 +110,19 @@ export default new Vuex.Store({
                 })
         },
         [types.PRELOAD_CHARACTER]({commit}) {
-            const path = `${process.env.VUE_APP_API_URL}/api/characters/`;
-            axios.get(path)
-                .then((res) => {
-                    for (const [character_id, character_data] of Object.entries(res.data))
-                        commit(types.MERGE_CHARACTER, {id: character_id, data: character_data})
-                })
+            return new Promise((resolve, reject) => {
+                const path = `${process.env.VUE_APP_API_URL}/api/characters/`;
+                axios.get(path)
+                    .then((res) => {
+                        for (const [character_id, character_data] of Object.entries(res.data))
+                            commit(types.MERGE_CHARACTER, {id: character_id, characterData: character_data})
+                        resolve();
+                    })
+                    .catch((error) => {
+                        console.error(error);
+                        reject()
+                    })
+            })
         },
         [types.FETCH_CHARACTER]({commit}, character_id) {
             return new Promise((resolve, reject) => {
diff --git a/server/api.py b/server/api.py
index c101beb..c36e4d8 100644
--- a/server/api.py
+++ b/server/api.py
@@ -97,7 +97,10 @@ def api_quote_neighbors():
 
 @current_app.route('/api/characters/')
 def api_character_list():
-    return jsonify(list(character_data.keys()))
+    _data = copy.deepcopy(character_data)
+    for key in _data.keys():
+        del _data[key]['quotes']
+    return jsonify(_data)
 
 
 @current_app.route('/api/character/<character>/')