diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 5c44bc78c..85e8f31fb 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -96,7 +96,7 @@ export default {
       this.suggestion = false;
       this.selected = false;
       this.showSuggestions = false;
-      this.query = '';
+      this.q = '';
     },
     select(suggestion) {
       this.selected = suggestion;
diff --git a/src/components/IssuePage.vue b/src/components/IssuePage.vue
index 31d86c75b..86395394c 100644
--- a/src/components/IssuePage.vue
+++ b/src/components/IssuePage.vue
@@ -1,18 +1,15 @@
 <template lang='html'>
     <i-layout id="IssuePage">
       <i-layout-section width="300px" class="border-right">
-        <b-tabs v-model="tabIndex" slot="header" class="mt-2">
-          <b-tab v-bind:title="$t('tabs.table_of_contents')" active />
-          <b-tab v-bind:title="$t('tabs.table_of_images')" />
-        </b-tabs>
-        <table-of-images
-          v-show="tabIndex === 1"
-          v-bind:tableOfContents="tableOfImages"
-          v-bind:pageUid="pageUid"
-          v-bind:articleUid="imageUid"
-          v-on:click="loadArticlePage" />
+        <div slot="header" class="border-bottom border-tertiary bg-light">
+          <b-tabs pills class="border-bottom mx-2 pt-2">
+            <template slot="tabs">
+              <b-nav-item class="pl-2 active"
+                active-class='none'>{{$t('table_of_contents')}}</b-nav-item>
+            </template>
+          </b-tabs>
+        </div>
         <table-of-contents
-          v-show="tabIndex === 0"
           v-bind:tableOfContents="tableOfContents"
           v-bind:pageUid="pageUid"
           v-bind:articleUid="articleUid"
@@ -64,20 +61,16 @@ import IssueViewerText from './modules/IssueViewerText';
 import OpenSeadragonViewer from './modules/OpenSeadragonViewer';
 import BaseTabs from './base/BaseTabs';
 import TableOfContents from './modules/TableOfContents';
-import TableOfImages from './modules/TableOfImages';
 import ThumbnailSlider from './modules/ThumbnailSlider';
 
 export default {
   data: () => ({
     handler: new Vue(),
     bounds: {},
-    tab: {},
     issue: new Issue(),
     tableOfContents: {},
-    tableOfImages: {},
     isLoaded: false,
     isDragging: false,
-    tabIndex: 0,
   }),
   computed: {
     page() {
@@ -104,9 +97,6 @@ export default {
     articleUid() {
       return this.$route.params.article_uid || this.firstArticleFromCurrentPage.uid;
     },
-    imageUid() {
-      return this.$route.params.article_uid || this.firstImageFromCurrentPage.uid;
-    },
     firstArticleFromCurrentPage() {
       if (this.tableOfContents.pages) {
         for (let i = 0; i < this.tableOfContents.pages.length; i += 1) {
@@ -117,16 +107,6 @@ export default {
       }
       return false;
     },
-    firstImageFromCurrentPage() {
-      if (this.tableOfImages.pages) {
-        for (let i = 0; i < this.tableOfImages.pages.length; i += 1) {
-          if (this.tableOfImages.pages[i].uid === this.pageUid) {
-            return this.tableOfImages.pages[i].articles[0];
-          }
-        }
-      }
-      return false;
-    },
   },
   methods: {
     loadArticle(article) {
@@ -174,7 +154,6 @@ export default {
     IssueViewerText,
     ThumbnailSlider,
     TableOfContents,
-    TableOfImages,
     Icon,
   },
   watch: {
@@ -284,10 +263,6 @@ export default {
         this.$store.dispatch('issue/LOAD_TABLE_OF_CONTENTS', issueUid).then((tableOfContents) => {
           this.tableOfContents = tableOfContents;
         });
-
-        this.$store.dispatch('issue/LOAD_TABLE_OF_IMAGES', issueUid).then((tableOfImages) => {
-          this.tableOfImages = tableOfImages;
-        });
       },
     },
     '$route.params.page_uid': {
@@ -353,21 +328,11 @@ div.overlay-region{
 {
   "en": {
     "label_display": "Display as",
-    "tabs": {
-        "overview": "Overview",
-        "table_of_contents": "Table of Contents",
-        "table_of_images": "Images",
-        "search": "Search"
-    }
+    "table_of_contents": "Table of Contents"
   },
   "nl": {
     "label_display": "Toon als",
-    "tabs": {
-        "overview": "Overzicht",
-        "table_of_contents": "Inhoudsopgave",
-        "table_of_images": "Afbeeldingen",
-        "search": "Zoek"
-    }
+    "table_of_contents": "Inhoudsopgave"
   }
 }
 </i18n>
diff --git a/src/components/SearchPage.vue b/src/components/SearchPage.vue
index 7c96dfe7c..5b13d7874 100644
--- a/src/components/SearchPage.vue
+++ b/src/components/SearchPage.vue
@@ -97,17 +97,37 @@
       <b-navbar-nav class="ml-auto p-3" v-if="isLoggedIn">
         <b-dropdown v-bind:text="$t('query_actions')" size="sm" variant="outline-primary" class="bg-white">
           <b-dropdown-item
+            v-if="selectedItems.length > 0"
+            class="p-2 small-caps"
+            v-b-modal.nameSelectionCollection>
+            <span class="dripicons-checklist pr-1"></span>
+            {{$tc('add_n_to_collection', selectedItems.length)}}
+          </b-dropdown-item>
+          <b-dropdown-item
+            class="p-2 small-caps"
             v-b-modal.nameCollection>
-            <span class="dripicons-archive pr-3"></span>
+            <span class="dripicons-archive pr-1"></span>
             {{$t("query_add_to_collection")}}
           </b-dropdown-item>
-          <b-dropdown-item v-on:click="exportQueryCsv">
-            <span class="dripicons-export pr-3"></span>
+          <b-dropdown-item v-on:click="exportQueryCsv"
+            class="p-2 small-caps">
+            <span class="dripicons-export pr-1"></span>
             {{$t("query_export_csv")}}
           </b-dropdown-item>
         </b-dropdown>
       </b-navbar-nav>
     </b-navbar>
+
+
+    <b-modal hide-footer scrollable
+      body-class="m-0 p-0"
+      id="nameSelectionCollection"
+      ref="nameSelectionCollection"
+      v-on:shown="nameSelectedCollectionOnShown()"
+      v-bind:title="$tc('add_n_to_collection', selectedItems.length)">
+      <collection-add-to-list :items="selectedItems" />
+    </b-modal>
+
     <b-modal
       id="nameCollection"
       ref="nameCollection"
@@ -179,6 +199,7 @@ import SearchResultsListItem from './modules/SearchResultsListItem';
 import SearchResultsTilesItem from './modules/SearchResultsTilesItem';
 import SearchResultsSummary from './modules/SearchResultsSummary';
 import CollectionAddTo from './modules/CollectionAddTo';
+import CollectionAddToList from './modules/CollectionAddToList';
 import Ellipsis from './modules/Ellipsis';
 import SearchPills from './SearchPills';
 // const uuid = require('uuid');
@@ -319,6 +340,9 @@ export default {
     },
   },
   methods: {
+    nameSelectedCollectionOnShown() {
+      return this.$store.dispatch('collections/LOAD_COLLECTIONS');
+    },
     getBooleanFilter(filter) {
       return !!this.$store.state.search.search.getFilter(filter);
     },
@@ -491,6 +515,7 @@ export default {
     'search-facets': SearchFacets,
     'search-result-summary': SearchResultsSummary,
     CollectionAddTo,
+    CollectionAddToList,
     Ellipsis,
     SearchPills,
   },
@@ -578,7 +603,7 @@ div.overlay-region{
     "select_all": "Select all items on this page",
     "items_selected": "One item selected | {count} items selected",
     "Clear Selection": "Clear Selection",
-    "add_n_to_collection": "Add item to collection | Add {count} items to collection",
+    "add_n_to_collection": "Add selected item to my collection | Add {count} selected items to my collection",
     "query_actions": "Save / Export",
     "query_add_to_collection": "Create Collection from Search Results",
     "Collection_Name" : "Collection Name",
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 6700cd583..0521343f5 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -398,6 +398,10 @@ $clr-grey-800: #c6ccd2;
 .pt-1px {
     padding-top: 1px;
 }
+.custom-control-input {
+  width: 0;
+  height: 0;
+}
 .custom-radio > .custom-control-label::before {
     border: inherit;
     outline: inherit;
diff --git a/src/components/modules/CollectionAddTo.vue b/src/components/modules/CollectionAddTo.vue
index 32815ff53..a8627d833 100644
--- a/src/components/modules/CollectionAddTo.vue
+++ b/src/components/modules/CollectionAddTo.vue
@@ -3,241 +3,29 @@
       size="sm" variant="outline-secondary"
       v-on:show="fetch"
       v-bind:text="text">
-    <div class="collection-add-to">
-      <div class="header bg-light p-2 border-bottom">
-        <div class="input-group w-100">
-          <input type="text"
-            class="form-control"
-            v-bind:placeholder="$t('placeholder')"
-            v-on:input="onInput"
-            v-on:keyup.enter="addCollection(inputString.trim())"
-            v-model="inputString"
-            />
-            <div class="input-group-append">
-              <b-button
-                size="sm"
-                variant="outline-primary"
-                class="float-right"
-                v-bind:disabled="isDisabled == 0"
-                v-on:click="addCollection(inputString.trim())"
-                >
-                {{$t('create_new')}}
-              </b-button>
-            </div>
-        </div>
-      </div>
-      <b-container fluid class="inputList p-0">
-        <ul>
-          <li v-for="collection in filteredCollections" class="form-check">
-            <input
-              class="form-check-input"
-              type="checkbox"
-              v-bind:id="collection.uid"
-              v-bind:checked="isActive(collection)"
-              />
-            <span class="checkmark dripicons-checkmark" />
-            <label
-              class="form-check-label py-2 pr-2"
-              v-on:click="toggleActive(collection, $event)"
-              for="collection.uid">
-              <span>{{collection.name}}</span>
-
-              <!-- <span class="description text-muted small-caps">
-                &mdash;
-                {{collection.countEntities}} {{$t('items')}}
-              </span> -->
-              &middot;
-              <span
-                class="description text-muted small-caps"
-                :title="$t('last_edited')">{{$d(collection.lastEditedDate, 'compact')}}</span>
-            </label>
-          </li>
-        </ul>
-      </b-container>
-    </div>
+    <collection-add-to-list :item="item" :items="items" />
   </b-dropdown>
 </template>
 
 <script>
+import CollectionAddToList from './CollectionAddToList';
+
 export default {
   data: () => ({
     show: false,
-    isDisabled: false,
-    inputString: '',
   }),
   props: {
+    text: String,
     item: Object,
     items: Array,
-    text: String,
   },
-  computed: {
-    filteredCollections() {
-      return this.collections.filter((collection) => {
-        const searchRegex = new RegExp(this.inputString, 'i');
-        return searchRegex.test(collection.name) ||
-          searchRegex.test(collection.description);
-      });
-    },
-    collections: {
-      get() {
-        return this.$store.getters['collections/collections'];
-      },
-    },
+  components: {
+    CollectionAddToList,
   },
   methods: {
     fetch() {
       return this.$store.dispatch('collections/LOAD_COLLECTIONS');
     },
-    onInput() {
-      const len = this.inputString.trim().length;
-      this.isDisabled = (len >= 3 && len <= 50);
-    },
-    isActive(needle) {
-      if (this.items) {
-        let matches = 0;
-        this.items.forEach((item) => {
-          if (item.collections
-            && item.collections.find(collection => needle.uid === collection.uid)) matches += 1;
-        });
-        const el = document.querySelector(`.addbulk #${needle.uid}`);
-        if (el) el.indeterminate = false;
-        if (matches === 0) return false;
-        else if (matches === this.items.length) return true;
-        if (el) el.indeterminate = true;
-      }
-      if (!this.item || !this.item.collections) {
-        return false;
-      }
-      return this.item.collections.find(collection => needle.uid === collection.uid);
-    },
-    toggleActive(collection) {
-      const items = this.items ? this.items : [this.item];
-      const id0 = items[0].collections.findIndex(c => (c.uid === collection.uid));
-
-      items.forEach((item) => {
-        if (id0 !== -1) {
-          this.$store.dispatch('collections/REMOVE_COLLECTION_ITEM', {
-            collection,
-            item,
-          }).then(() => {
-            const idx = item.collections.findIndex(c => (c.uid === collection.uid));
-            item.collections.splice(idx, 1);
-            this.$forceUpdate();
-          });
-        } else {
-          this.$store.dispatch('collections/ADD_COLLECTION_ITEM', {
-            collection,
-            item,
-            contentType: 'article',
-          }).then(() => {
-            item.collections.push(collection);
-            this.$forceUpdate();
-          });
-        }
-      });
-    },
-    addCollection(collectionName) {
-      if (!this.isDisabled) {
-        return;
-      }
-      this.$store.dispatch('collections/ADD_COLLECTION', {
-        name: collectionName,
-      }).then((collection) => {
-        this.toggleActive(collection);
-        this.inputString = '';
-        this.fetch();
-      });
-    },
-    isLoggedIn() {
-      return this.$store.state.user.userData;
-    },
-  },
-  mounted() {
   },
 };
 </script>
-
-<style scoped lang="scss">
-@import "impresso-theme/src/scss/variables.sass";
-
-.collection-add-to {
-  min-width: 400px;
-  input {
-    font-style: italic;
-    &:focus {
-    }
-  }
-  .inputList {
-    max-height: 50vh;
-    overflow: scroll;
-    ul {
-      overflow-y: auto;
-      height: 100%;
-      list-style: none;
-      padding: 0;
-      margin-bottom: -1px;
-      li {
-        padding: 0;
-        input {
-          display: none;
-        }
-        .checkmark {
-          display: none;
-          position: absolute;
-          pointer-events: none;
-          height: 1em;
-          margin: auto;
-          top: 0;
-          bottom: 0;
-          left: 0.75em;
-        }
-        input:checked ~ .checkmark {
-          display: block;
-        }
-        input:indeterminate ~ label {
-          background: rgba($clr-accent-secondary, 0.25);
-        }
-        input:checked ~ label {
-          background: rgba($clr-accent-secondary, 0.5);
-        }
-        label {
-          display: block;
-          cursor: pointer;
-          border-bottom: 1px solid $clr-bg-secondary;
-          padding-left: 3em;
-          &.loading {
-            background: $clr-accent-secondary;
-          }
-          &:hover {
-            background: $clr-accent-secondary;
-          }
-          div, span {
-            pointer-events: none;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
-
-<i18n>
-{
-  "en": {
-    "placeholder": "filter or create new collection",
-    "create_new": "Create New",
-    "manage_collections": "Manage my Collections",
-    "created": "Created:",
-    "last_edited": "Last edited",
-    "items": "items"
-  },
-  "de": {
-    "placeholder": "Filtern oder neue Sammlung erstellen",
-    "create_new": "Sammlung erstellen",
-    "manage_collections": "Sammlungen verwalten",
-    "created": "Erstellt:",
-    "last_edited": "Zuletzt bearbeitet",
-    "items": " Artikel"
-  }
-}
-</i18n>
diff --git a/src/components/modules/CollectionAddToList.vue b/src/components/modules/CollectionAddToList.vue
new file mode 100644
index 000000000..a50d72e90
--- /dev/null
+++ b/src/components/modules/CollectionAddToList.vue
@@ -0,0 +1,235 @@
+<template lang="html">
+    <div class="collection-add-to">
+      <div class="header bg-light p-2 border-bottom">
+        <div class="input-group w-100">
+          <input type="text"
+            class="form-control"
+            v-bind:placeholder="$t('placeholder')"
+            v-on:input="onInput"
+            v-on:keyup.enter="addCollection(inputString.trim())"
+            v-model="inputString"
+            />
+            <div class="input-group-append">
+              <b-button
+                size="sm"
+                variant="outline-primary"
+                class="float-right"
+                v-bind:disabled="isDisabled == 0"
+                v-on:click="addCollection(inputString.trim())"
+                >
+                {{$t('create_new')}}
+              </b-button>
+            </div>
+        </div>
+      </div>
+      <b-container fluid class="inputList p-0">
+        <ul>
+          <li v-for="collection in filteredCollections" class="form-check">
+            <input
+              class="form-check-input"
+              type="checkbox"
+              v-bind:id="collection.uid"
+              v-bind:checked="isActive(collection)"
+              />
+            <span class="checkmark dripicons-checkmark" />
+            <label
+              class="form-check-label py-2 pr-2"
+              v-on:click="toggleActive(collection, $event)"
+              for="collection.uid">
+              <span>{{collection.name}}</span>
+
+              <!-- <span class="description text-muted small-caps">
+                &mdash;
+                {{collection.countEntities}} {{$t('items')}}
+              </span> -->
+              &middot;
+              <span
+                class="description text-muted small-caps"
+                :title="$t('last_edited')">{{$d(collection.lastEditedDate, 'compact')}}</span>
+            </label>
+          </li>
+        </ul>
+      </b-container>
+    </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    show: false,
+    isDisabled: false,
+    inputString: '',
+  }),
+  props: {
+    item: Object,
+    items: Array,
+  },
+  computed: {
+    filteredCollections() {
+      return this.collections.filter((collection) => {
+        const searchRegex = new RegExp(this.inputString, 'i');
+        return searchRegex.test(collection.name) ||
+          searchRegex.test(collection.description);
+      });
+    },
+    collections: {
+      get() {
+        return this.$store.getters['collections/collections'];
+      },
+    },
+  },
+  methods: {
+    fetch() {
+      return this.$store.dispatch('collections/LOAD_COLLECTIONS');
+    },
+    onInput() {
+      const len = this.inputString.trim().length;
+      this.isDisabled = (len >= 3 && len <= 50);
+    },
+    isActive(needle) {
+      if (this.items) {
+        let matches = 0;
+        this.items.forEach((item) => {
+          if (item.collections
+            && item.collections.find(collection => needle.uid === collection.uid)) matches += 1;
+        });
+        const el = document.querySelector(`.addbulk #${needle.uid}`);
+        if (el) el.indeterminate = false;
+        if (matches === 0) return false;
+        else if (matches === this.items.length) return true;
+        if (el) el.indeterminate = true;
+      }
+      if (!this.item || !this.item.collections) {
+        return false;
+      }
+      return this.item.collections.find(collection => needle.uid === collection.uid);
+    },
+    toggleActive(collection) {
+      const items = this.items ? this.items : [this.item];
+      const id0 = items[0].collections.findIndex(c => (c.uid === collection.uid));
+
+      items.forEach((item) => {
+        if (id0 !== -1) {
+          this.$store.dispatch('collections/REMOVE_COLLECTION_ITEM', {
+            collection,
+            item,
+          }).then(() => {
+            const idx = item.collections.findIndex(c => (c.uid === collection.uid));
+            item.collections.splice(idx, 1);
+            this.$forceUpdate();
+          });
+        } else {
+          this.$store.dispatch('collections/ADD_COLLECTION_ITEM', {
+            collection,
+            item,
+            contentType: 'article',
+          }).then(() => {
+            item.collections.push(collection);
+            this.$forceUpdate();
+          });
+        }
+      });
+    },
+    addCollection(collectionName) {
+      if (!this.isDisabled) {
+        return;
+      }
+      this.$store.dispatch('collections/ADD_COLLECTION', {
+        name: collectionName,
+      }).then((collection) => {
+        this.toggleActive(collection);
+        this.inputString = '';
+        this.fetch();
+      });
+    },
+    isLoggedIn() {
+      return this.$store.state.user.userData;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "impresso-theme/src/scss/variables.sass";
+
+.collection-add-to {
+  min-width: 400px;
+  input {
+    font-style: italic;
+    &:focus {
+    }
+  }
+  .inputList {
+    max-height: 50vh;
+    overflow: scroll;
+    ul {
+      overflow-y: auto;
+      height: 100%;
+      list-style: none;
+      padding: 0;
+      margin-bottom: -1px;
+      li {
+        padding: 0;
+        input {
+          display: none;
+        }
+        .checkmark {
+          display: none;
+          position: absolute;
+          pointer-events: none;
+          height: 1em;
+          margin: auto;
+          top: 0;
+          bottom: 0;
+          left: 0.75em;
+        }
+        input:checked ~ .checkmark {
+          display: block;
+        }
+        input:indeterminate ~ label {
+          background: rgba($clr-accent-secondary, 0.25);
+        }
+        input:checked ~ label {
+          background: rgba($clr-accent-secondary, 0.5);
+        }
+        label {
+          display: block;
+          cursor: pointer;
+          border-bottom: 1px solid $clr-bg-secondary;
+          padding-left: 3em;
+          &.loading {
+            background: $clr-accent-secondary;
+          }
+          &:hover {
+            background: $clr-accent-secondary;
+          }
+          div, span {
+            pointer-events: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+
+<i18n>
+{
+  "en": {
+    "placeholder": "filter or create new collection",
+    "create_new": "Create New",
+    "manage_collections": "Manage my Collections",
+    "created": "Created:",
+    "last_edited": "Last edited",
+    "items": "items"
+  },
+  "de": {
+    "placeholder": "Filtern oder neue Sammlung erstellen",
+    "create_new": "Sammlung erstellen",
+    "manage_collections": "Sammlungen verwalten",
+    "created": "Erstellt:",
+    "last_edited": "Zuletzt bearbeitet",
+    "items": " Artikel"
+  }
+}
+</i18n>
diff --git a/src/components/modules/TableOfContents.vue b/src/components/modules/TableOfContents.vue
index 026cbd44e..96fa7eeae 100644
--- a/src/components/modules/TableOfContents.vue
+++ b/src/components/modules/TableOfContents.vue
@@ -1,20 +1,32 @@
 <template lang="html">
   <div id="TableOfContents" ref="TableOfContents">
-    <div v-for="page in tableOfContents.pages" class="mb-5">
+    <div v-for="page in tableOfContents.pages" class="mb-5 page">
       <span class="p-3 d-block text-bold pagenumber">{{$t('page')}} {{page.num}}</span>
-      <ul class="list-unstyled page border-bottom border-top" v-bind:class="{active: page.uid === pageUid}">
-        <li :ref="`article-${article.uid}`" class="article border-bottom" v-for="article in page.articles" v-bind:class="{active: article.uid === articleUid}">
-            <a href="#" v-on:click.prevent="onClick(article, page)" class="p-3">
-              <div class="info">
-                <span class="d-block title" v-html="article.title || $t('no_title')"></span>
-                <span class="excerpt">{{article.excerpt | substring(100)}}</span>
-              </div>
-              <div class="page">
-                {{page.num}}
-              </div>
-            </a>
-        </li>
-      </ul>
+        <b-media
+          :ref="`article-${article.uid}`"
+          class="border-bottom article"
+          v-for="article in page.articles"
+          v-bind:class="{active: article.uid === articleUid}">
+          <a
+            class="p-3"
+            href="#"
+            v-on:click.prevent="onClick(article, page)">
+          <div
+            v-if="article.images.length"
+            class="mr-3 images">
+            <b-img
+            fluid-grow
+            class="mb-1 image"
+              v-for="image in article.images"
+              v-bind:src="image.regions[0].iiifFragment" />
+          </div>
+          <span
+            class="title"
+            v-html="article.title" />
+          <span
+            class="excerpt">{{article.excerpt | substring(100)}}</span>
+          </a>
+        </b-media>
     </div>
   </div>
 </template>
@@ -80,43 +92,35 @@ export default {
 @import "impresso-theme/src/scss/variables.sass";
 
 #TableOfContents{
-  .pagenumber {
-    font-size: 1.4em;
-    color: lighten($clr-primary, 75);
-  }
-
-  ul.page {
-    list-style: none;
+  .page{
     font-size: smaller;
-    margin-bottom: 0;
-    .article {
-      a{
-        text-decoration: none;
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-        .info{
-          flex: auto;
-          .title{
-            font-size: 1.2em;
-            font-weight: bold;
-          }
-          .excerpt{
-            color: lighten($clr-primary, 25);
-          }
-        }
-        .page{
-          flex: min-content;
-          font-size: 1.2em;
+    .pagenumber{
+      text-align: center;
+    }
+
+    .article{
+      &.active{
+        a{
+          background: lighten($clr-primary, 88);
           font-weight: bold;
-          color: lighten($clr-primary, 75);
         }
       }
-      &.active{
-        a {
-          background: lighten($clr-primary, 88);
+      a{
+        text-decoration: none;
+        display: block;
+        .title{
           font-weight: bold;
         }
+        .excerpt{
+          color: lighten($clr-primary, 25);
+        }
+        .images{
+          width:80px;
+          float:left;
+          .image{
+
+          }
+        }
       }
     }
   }
diff --git a/src/store/Issue.js b/src/store/Issue.js
index 62799e945..3afa123c3 100644
--- a/src/store/Issue.js
+++ b/src/store/Issue.js
@@ -70,7 +70,7 @@ export default {
       });
     },
     LOAD_TABLE_OF_CONTENTS(context, uid) {
-      return new Promise((resolve, reject) => {
+      const tocPromise = new Promise((resolve, reject) => {
         const q = {
           query: {
             filters: [{
@@ -120,9 +120,8 @@ export default {
             reject(error);
           });
       });
-    },
-    LOAD_TABLE_OF_IMAGES(context, uid) {
-      return new Promise((resolve, reject) => {
+
+      const toiPromise = new Promise((resolve, reject) => {
         const query = {
           filters: [{
             type: 'issue',
@@ -131,41 +130,19 @@ export default {
           limit: 500,
         };
 
-        services.images.find({ query }).then((response) => {
-          const issue = new Issue();
-          const articles = response.data.map(image => new Article({
-            ...image,
-          }));
-
-          articles.forEach((article) => {
-            article.pages.forEach((p1) => {
-              const page = issue.pages.find(p2 => p1.uid === p2.uid);
-              if (!page) {
-                issue.pages.push(new Page({
-                  ...p1,
-                  articles: [article],
-                }));
-              } else {
-                page.articles.push(article);
-              }
-            });
-          });
-
-          // sort by page number
-          issue.pages.sort((pageA, pageB) => {
-            if (pageA.num < pageB.num) {
-              return -1;
-            }
-            if (pageA.num > pageB.num) {
-              return 1;
-            }
+        services.images.find({ query }).then(resolve, reject);
+      });
 
-            return 0;
-          });
-          resolve(issue);
-        }, (error) => {
-          reject(error);
-        });
+      return Promise.all([tocPromise, toiPromise]).then((values) => {
+        // merge the table of images into the table of articles
+        for (let i = 0; i < values[0].pages.length; i += 1) {
+          for (let j = 0; j < values[0].pages[i].articles.length; j += 1) {
+            values[0].pages[i].articles[j].images =
+              values[1].data.filter(image => image.article === values[0].pages[i].articles[j].uid)
+              .map(image => new Article(image));
+          }
+        }
+        return values[0];
       });
     },
   },