diff --git a/src/App.vue b/src/App.vue
index 462eccb03..0f385d1ff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -69,14 +69,16 @@ svg {
 }
 
 
-ul.nav.nav-pills .nav-link{
-    background-color: transparent;
-    font-variant: small-caps;
-    margin-bottom: -1px;
-    border: 1px solid transparent;
-    
-    color: #dee2e6;
-    &.active {
+ul.nav.nav-pills .nav-item{
+    .nav-link {
+      background-color: transparent;
+      font-variant: small-caps;
+      margin-bottom: -1px;
+      border: 1px solid transparent;
+
+      color: #a8b3bd;
+    }
+    &.active .nav-link{
       color: black;
       border-color: #dee2e6;
       border-bottom-color: #f8f9fa;
diff --git a/src/components/IssuePage.vue b/src/components/IssuePage.vue
index fe0122c1e..31d86c75b 100644
--- a/src/components/IssuePage.vue
+++ b/src/components/IssuePage.vue
@@ -1,8 +1,19 @@
 <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" />
         <table-of-contents
-          v-bind:toc="toc"
+          v-show="tabIndex === 0"
+          v-bind:tableOfContents="tableOfContents"
           v-bind:pageUid="pageUid"
           v-bind:articleUid="articleUid"
           v-on:click="loadArticlePage" />
@@ -21,13 +32,12 @@
             </b-navbar-nav>
           </b-navbar>
         </div>
-            <open-seadragon-viewer
-              v-show="mode === 'image'"
-              v-bind:handler="handler">
-            </open-seadragon-viewer>
-            <issue-viewer-text
-              v-bind:article_uid="articleUid"
-              v-if="articleUid && mode === 'text'" />
+        <open-seadragon-viewer
+          v-show="mode === 'image'"
+          v-bind:handler="handler" />
+        <issue-viewer-text
+          v-bind:article_uid="articleUid"
+          v-if="articleUid && mode === 'text'" />
       </i-layout-section>
       <i-layout-section width="120px" class="border-left">
         <thumbnail-slider
@@ -54,6 +64,7 @@ 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 {
@@ -62,9 +73,11 @@ export default {
     bounds: {},
     tab: {},
     issue: new Issue(),
-    toc: {},
+    tableOfContents: {},
+    tableOfImages: {},
     isLoaded: false,
     isDragging: false,
+    tabIndex: 0,
   }),
   computed: {
     page() {
@@ -89,43 +102,30 @@ export default {
       return this.$route.params.page_uid;
     },
     articleUid() {
-      return this.$route.params.article_uid || this.firstArticleFromCurrentPage;
+      return this.$route.params.article_uid || this.firstArticleFromCurrentPage.uid;
+    },
+    imageUid() {
+      return this.$route.params.article_uid || this.firstImageFromCurrentPage.uid;
     },
     firstArticleFromCurrentPage() {
-      if (this.toc.pages) {
-        for (let i = 0; i < this.toc.pages.length; i += 1) {
-          if (this.toc.pages[i].uid === this.pageUid) {
-            return this.toc.pages[i].articles[0].uid;
+      if (this.tableOfContents.pages) {
+        for (let i = 0; i < this.tableOfContents.pages.length; i += 1) {
+          if (this.tableOfContents.pages[i].uid === this.pageUid) {
+            return this.tableOfContents.pages[i].articles[0];
           }
         }
       }
       return false;
     },
-    newspaperTableData() {
-      return [{
-        acronym: this.issue.newspaper.acronym,
-        startYear: this.issue.newspaper.startYear,
-        endYear: this.issue.newspaper.endYear,
-        deltaYear: this.$n(this.issue.newspaper.deltaYear),
-        countIssues: this.$n(this.issue.newspaper.countIssues),
-        countPages: this.$n(this.issue.newspaper.countPages),
-        countArticles: this.$n(this.issue.newspaper.countArticles),
-      }];
-    },
-    tabs() {
-      return [
-        {
-          label: this.$t('tabs.toc'),
-          name: 'toc',
-          active: true,
-        },
-        {
-          label: this.$t('tabs.overview'),
-          name: 'overview',
-          active: false,
-          disabled: true,
-        },
-      ];
+    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: {
@@ -174,6 +174,7 @@ export default {
     IssueViewerText,
     ThumbnailSlider,
     TableOfContents,
+    TableOfImages,
     Icon,
   },
   watch: {
@@ -280,8 +281,12 @@ export default {
           });
         });
 
-        this.$store.dispatch('issue/LOAD_TOC', issueUid).then((toc) => {
-          this.toc = toc;
+        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;
         });
       },
     },
@@ -350,7 +355,8 @@ div.overlay-region{
     "label_display": "Display as",
     "tabs": {
         "overview": "Overview",
-        "toc": "Table of Contents",
+        "table_of_contents": "Table of Contents",
+        "table_of_images": "Images",
         "search": "Search"
     }
   },
@@ -358,7 +364,8 @@ div.overlay-region{
     "label_display": "Toon als",
     "tabs": {
         "overview": "Overzicht",
-        "toc": "Inhoudsopgave",
+        "table_of_contents": "Inhoudsopgave",
+        "table_of_images": "Afbeeldingen",
         "search": "Zoek"
     }
   }
diff --git a/src/components/NewspapersDetailPage.vue b/src/components/NewspapersDetailPage.vue
index 721c66ea7..37728bc44 100644
--- a/src/components/NewspapersDetailPage.vue
+++ b/src/components/NewspapersDetailPage.vue
@@ -64,6 +64,9 @@
       <div v-else>
         <div class="p-4">
           <b-row>
+            {{firstIssue[0].date.substring(0, firstIssue[0].date.indexOf("-"))}}
+            <br>
+            {{issues[issues.length-1].date.substring(0, issues[issues.length-1].date.indexOf("-"))}}
             <b-col
               sm="12" md="4" lg="3"
               v-for="(issue, i) in issues"
@@ -170,6 +173,21 @@ export default {
       this.total = response.total;
       return response.data;
     },
+    async getFirstIssue({
+      page = 1,
+    } = {}) {
+      const response = await this.$store.dispatch('newspapers/LOAD_ISSUES', {
+        page,
+        orderBy: this.orderBy,
+        limit: 1,
+        filters: [{
+          type: 'newspaper',
+          q: this.$route.params.newspaper_uid,
+          context: 'include',
+        }],
+      });
+      return response.data;
+    },
 
     async getNewspaper() {
       return this.$store.dispatch('newspapers/LOAD_DETAIL', this.$route.params.newspaper_uid);
@@ -180,6 +198,7 @@ export default {
       immediate: true,
       async handler() {
         this.issues = await this.getIssues();
+        this.firstIssue = await this.getFirstIssue();
         this.newspaper = await this.getNewspaper();
       },
     },
diff --git a/src/components/SearchFacets.vue b/src/components/SearchFacets.vue
index 1da9518c1..4b19fbce2 100644
--- a/src/components/SearchFacets.vue
+++ b/src/components/SearchFacets.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div id="search-facets">
-    <div class="m-2 p-2 border-top border-tertiary">
+    <div class="border-top mx-3 py-2 mb-2">
       <!--  timeline title -->
       <base-title-bar>{{$t(`label.timeline.${groupByLabel}`)}}
         <div slot="options">
@@ -10,10 +10,10 @@
         </div>
         <div slot="description">
           <span v-if="daterangeFilters.length">
-            {{$t(`label.timelineDescription.filtered`)}}
+            {{$t(`label.timelineDescription.${groupByLabel}.filtered`)}}
           </span>
           <span v-else>
-              {{$t(`label.timelineDescription.description`)}}
+              {{$t(`label.timelineDescription.${groupByLabel}.description`)}}
           </span>
         </div>
       </base-title-bar>
@@ -38,7 +38,7 @@
       </timeline>
 
       <div v-for="(filter, index) in daterangeFilters" :key="index" class="bg-light border p-2 mt-2">
-        <filter-monitor :filter="filter" type="daterange" />
+        <filter-monitor :store="store" :filter="filter" type="daterange" />
       </div>
       <div v-if="!daterangeFilters.length">
         <b-button size="sm" variant="outline-primary" @click="addDaterangeFilter">
@@ -66,8 +66,9 @@
         </div>
       </div>
     </div>
-    <div v-for="(facet, index) in facets" class="border-top m-2 p-2">
+    <div v-for="(facet, index) in facets" class="border-top mx-3 py-2 mb-2">
       <filter-facet :facet="facet"
+        :store="store"
         @submit-buckets="submitBuckets"
         @update-filter="updateFilter"
         @reset-filter="resetFilter"/>
@@ -111,6 +112,10 @@ const fillYears = (initialValues = []) => {
 
 export default {
   props: {
+    store: {
+      type: String,
+      default: 'search',
+    },
     startYear: {
       type: Number,
       default: 1737,
@@ -130,8 +135,14 @@ export default {
     facetsOrder: ['language', 'newspaper', 'topic'],
   }),
   computed: {
+    currentStore() {
+      if (this.store === 'searchImages') {
+        return this.$store.state.searchImages;
+      }
+      return this.$store.state.search;
+    },
     daterangeFilters() {
-      return this.$store.state.search.search.filters.filter(d => d.type === 'daterange');
+      return this.currentStore.search.filters.filter(d => d.type === 'daterange');
     },
     daterangeIncluded() {
       return this.daterangeFilters.filter(d => d.context === 'include');
@@ -210,12 +221,12 @@ export default {
     },
     groupByLabel: {
       get() {
-        return this.$t(`groupBy.${this.$store.state.search.groupBy}`);
+        return this.$t(`groupBy.${this.currentStore.groupBy}`);
       },
     },
     values: {
       get() {
-        const facet = this.$store.state.search.facets.find(d => d.type === 'year');
+        const facet = this.currentStore.facets.find(d => d.type === 'year');
         if (!facet) {
           return [];
         }
@@ -231,7 +242,7 @@ export default {
     },
     facets: {
       get() {
-        return this.$store.state.search.facets
+        return this.currentStore.facets
           .filter(d => d.type !== 'year')
           .sort((a, b) => {
             const indexA = this.facetsOrder.indexOf(a.type);
@@ -266,11 +277,11 @@ export default {
       // create new daterangefilter if theres none
       if (!this.daterangeIncluded.length) {
         const dr = new Daterange({
-          start: new Date(`${this.startYear}-01-01`),
-          end: new Date(`${this.endYear}-12-31`),
+          start: this.startDaterange,
+          end: this.endDaterange,
         });
 
-        this.$store.commit('search/ADD_FILTER', {
+        this.$store.commit(`${this.store}/ADD_FILTER`, {
           type: 'daterange',
           q: dr.getValue(),
         });
@@ -387,11 +398,18 @@ export default {
     "en": {
       "label": {
         "timeline": {
-          "articles": "publication date"
+          "articles": "publication date",
+          "images": "publication date"
         },
         "timelineDescription": {
-          "articles": "Number of articles per year",
-          "description": "Number of articles per year"
+          "articles": {
+            "description": "Number of articles per year",
+            "filtered": "Number of articles per year (filtered)"
+          },
+          "images": {
+            "description": "Number of images extracted per year",
+            "filtered": "Number of images per year (filtered)"
+          }
         },
         "daterange": {
           "pick": "add filter ...",
@@ -401,7 +419,8 @@ export default {
         }
       },
       "groupBy": {
-        "articles": "articles"
+        "articles": "articles",
+        "images": "images"
       }
     }
   }
diff --git a/src/components/SearchImagesPage.vue b/src/components/SearchImagesPage.vue
new file mode 100644
index 000000000..2e9f14c90
--- /dev/null
+++ b/src/components/SearchImagesPage.vue
@@ -0,0 +1,375 @@
+<template lang="html">
+  <i-layout id="SearchPage">
+    <i-layout-section width="400px" class="border-right">
+      <!--  header -->
+      <div slot="header" class="border-bottom bg-light">
+        <b-tabs pills class="border-bottom mx-2 pt-2">
+          <template slot="tabs">
+            <b-nav-item class="pl-2"
+              active-class='none'
+              :to="{ name:'search'}">
+                <span v-html="$t('tabs.text')"/>
+              </b-nav-item>
+            <b-nav-item
+              class="active"
+              active-class='none'
+              :to="{ name:'searchImages'}">
+                <span v-html="$t('tabs.images')"/>
+            </b-nav-item>
+          </template>
+        </b-tabs>
+        <div class="py-3 px-3">
+          <search-pills store="searchImages" v-on:remove="onRemoveFilter"/>
+        </div>
+      </div>
+      <!--  body -->
+      <div class="pt-3">
+        <b-form-group class="px-3 py-1">
+          <b-form-checkbox v-model="isFront" switch v-bind:value="true">
+            {{$t('label_isFront')}}
+          </b-form-checkbox>
+        </b-form-group>
+        <search-facets store="searchImages" @submit-facet="onFacet" @update-filter="onUpdateFilter" @reset-filter="onResetFilter"/>
+      </div>
+    </i-layout-section>
+    <i-layout-section>
+      <div slot="header">
+      <b-navbar variant="tertiary" v-if="selectedItems.length > 0">
+        <div class="flex-grow-1">
+          <span class="small-caps">
+            {{ $tc('items_selected', selectedItems.length) }}
+          </span>
+          <b-button variant="danger" class="ml-2" size="sm" v-on:click="onClearSelection()">
+            {{ $t('clear_selection') }}
+          </b-button>
+          <collection-add-to
+            :items="selectedItems"
+            :text="$tc('add_n_to_collection', selectedItems.length)"
+            class="addbulk bg-white float-right" />
+        </div>
+      </b-navbar>
+
+      <b-navbar type="light" variant="light" class="border-bottom px-0 py-0">
+
+        <b-navbar-nav class="px-3 pt-1 pb-3 border-right" style="flex:1">
+          <ellipsis v-bind:initialHeight="88">
+            <search-result-summary
+              @onSummary="onSummary"
+              group-by="images"
+              :queryComponents="queryComponents"
+              :totalRows="paginationTotalRows" />
+          </ellipsis>
+        </b-navbar-nav>
+
+        <b-navbar-nav class="p-3 pt-4 border-right">
+          <label class="mr-1">{{$t("label_order")}}
+            <i-dropdown v-model="orderBy" v-bind:options="orderByOptions" size="sm" variant="outline-primary" class="pl-1"></i-dropdown>
+          </label>
+        </b-navbar-nav>
+
+        <b-navbar-nav v-if="isLoggedIn" class="pl-4">
+          <b-form-checkbox
+            v-b-tooltip.hover.topleft.html.o100.d500 v-bind:title="$t('select_all')"
+            v-bind:indeterminate="this.allIndeterminate"
+            v-bind:checked.native="this.allSelected"
+            v-on:change="toggleSelectAll">
+          </b-form-checkbox>
+        </b-navbar-nav>
+
+      </b-navbar>
+    </div>
+    <!--  body -->
+      <div class="p-1">
+        <b-container fluid>
+          <b-row class="pb-5">
+            <b-col cols="6" sm="12" md="6" lg="4" v-for="(searchResult, index) in searchResults" v-bind:key="searchResult.uid">
+              <search-results-image-item
+              v-bind:searchResult="searchResult"
+              v-bind:checkbox=true
+              v-on:toggleSelected="toggleSelected(searchResult)"
+              v-bind:checked="isChecked(searchResult)"
+              v-on:click="onClickResult(searchResult)"
+              />
+            </b-col>
+          </b-row>
+        </b-container>
+        <div class="fixed-pagination-footer p-1 m-0">
+          <pagination
+            v-bind:perPage="paginationPerPage"
+            v-bind:currentPage="paginationCurrentPage"
+            v-bind:totalRows="paginationTotalRows"
+            v-on:change="onInputPagination"
+            class="float-left small-caps"
+            />
+
+        </div>
+      </div>
+
+    </i-layout-section>
+  </i-layout>
+</template>
+
+<script>
+import Autocomplete from './Autocomplete';
+import SearchResultsImageItem from './modules/SearchResultsImageItem';
+import CollectionAddTo from './modules/CollectionAddTo';
+import Pagination from './modules/Pagination';
+import SearchFacets from './SearchFacets';
+import SearchResultsSummary from './modules/SearchResultsSummary';
+import Ellipsis from './modules/Ellipsis';
+import SearchPills from './SearchPills';
+
+
+export default {
+  components: {
+    Autocomplete,
+    SearchResultsImageItem,
+    CollectionAddTo,
+    Pagination,
+    SearchFacets,
+    'search-result-summary': SearchResultsSummary,
+    Ellipsis,
+    SearchPills,
+  },
+  data: () => ({
+    selectedItems: [],
+    allIndeterminate: false,
+    allSelected: false,
+  }),
+  mounted() {
+    // testing URL
+    // fetch('https://impresso-project.ch/api/images/')
+    //   .then(response => response.text())
+    //   .then((data) => {
+    //     this.searchResults = JSON.parse(data).data;
+    //   });
+    // if (this.uuid !== undefined) {
+    //   this.$store.commit('searchImages/LOAD_SEARCH', this.uuid);
+    //   console.log('search');
+    // }
+    this.search();
+  },
+  computed: {
+    isFront: {
+      get() {
+        return this.getBooleanFilter({ type: 'isFront' });
+      },
+      set(val) {
+        this.toggleBooleanFilter({ type: 'isFront' }, val);
+      },
+    },
+    searchResults: {
+      get() {
+        return this.$store.getters['searchImages/results'];
+      },
+    },
+    queryComponents: {
+      get() {
+        return this.$store.state.searchImages.queryComponents;
+      },
+    },
+    orderByOptions: {
+      get() {
+        return [
+          {
+            value: '-date',
+            text: `${this.$t('sort_date')} ${this.$t('sort_desc')}`,
+          },
+          {
+            value: 'date',
+            text: `${this.$t('sort_date')} ${this.$t('sort_asc')}`,
+          },
+        ];
+      },
+    },
+    orderBy: {
+      get() {
+        return this.$store.state.searchImages.orderBy;
+      },
+      set(val) {
+        this.$store.commit('searchImages/UPDATE_SEARCH_ORDER_BY', val);
+        this.search(1);
+      },
+    },
+    paginationPerPage: {
+      get() {
+        return this.$store.state.searchImages.paginationPerPage;
+      },
+    },
+    paginationCurrentPage: {
+      get() {
+        return this.$store.state.searchImages.paginationCurrentPage;
+      },
+    },
+    paginationTotalRows: {
+      get() {
+        return this.$store.state.searchImages.paginationTotalRows;
+      },
+    },
+  },
+  methods: {
+    search(page) {
+      if (page !== undefined) {
+        this.$store.commit('searchImages/UPDATE_PAGINATION_CURRENT_PAGE', parseInt(page, 10));
+      }
+      this.$store.dispatch('searchImages/PUSH_SEARCH_PARAMS');
+    },
+    reset() {
+      this.$store.commit('searchImages/CLEAR');
+      this.search(); // we do a search so we display all results in the corpus
+    },
+    isLoggedIn() {
+      return this.$store.state.user.userData;
+    },
+    getBooleanFilter(filter) {
+      return !!this.$store.state.searchImages.search.getFilter(filter);
+    },
+    toggleBooleanFilter(filter, value = true) {
+      if (!value) {
+        this.$store.commit('searchImages/REMOVE_FILTER', filter);
+      } else {
+        this.$store.commit('searchImages/ADD_FILTER', filter);
+      }
+      this.search(1);
+    },
+    onSummary(msg) {
+      this.inputDescription = msg
+        .replace(/<(?:.|\n)*?>/gm, '') // strip html tags
+        .replace('Found', this.$t('Based on search query with'));
+    },
+    onSuggestion(suggestion) {
+      this.$store.commit('searchImages/ADD_FILTER', suggestion);
+      this.search(1);
+    },
+    onFacet(facet) {
+      console.log('@onFacet', facet);
+      this.$store.commit('searchImages/ADD_FILTER', facet);
+      this.search(1);
+    },
+    onResetFilter(type) {
+      this.$store.commit('searchImages/RESET_FILTER', type);
+      this.search(1);
+    },
+    onUpdateFilter(filter) {
+      this.$store.commit('searchImages/UPDATE_FILTER', filter);
+      this.search(1);
+    },
+    onRemoveFilter(filter) {
+      this.$store.commit('searchImages/REMOVE_FILTER', filter);
+      this.search(1);
+    },
+    updateselectAll() {
+      let count = 0;
+      this.searchResults.forEach((item) => {
+        if (this.itemSelected(item)) {
+          count += 1;
+        }
+      });
+      if (count === 0) {
+        this.allSelected = false;
+        this.allIndeterminate = false;
+      } else if (count < this.searchResults.length) {
+        this.allSelected = false;
+        this.allIndeterminate = true;
+      } else {
+        this.allSelected = true;
+        this.allIndeterminate = false;
+      }
+      // console.log('selected items : ', this.selectedItems);
+    },
+    itemSelected(item) {
+      return this.selectedItems.findIndex(c => (c.uid === item.uid)) !== -1;
+    },
+    addSelectedItem(item) {
+      if (!this.itemSelected(item)) {
+        this.selectedItems.push(item);
+      }
+    },
+    removeSelectedItem(item) {
+      if (this.itemSelected(item)) {
+        const idx = this.selectedItems.findIndex(c => (c.uid === item.uid));
+        this.selectedItems.splice(idx, 1);
+      }
+    },
+    toggleSelected(item) {
+      if (!this.itemSelected(item)) {
+        this.selectedItems.push(item);
+      } else {
+        const idx = this.selectedItems.findIndex(c => (c.uid === item.uid));
+        this.selectedItems.splice(idx, 1);
+      }
+    },
+    toggleSelectAll(checked) {
+      if (checked) {
+        this.searchResults.forEach((item) => {
+          this.addSelectedItem(item);
+        });
+      } else {
+        this.searchResults.forEach((item) => {
+          this.removeSelectedItem(item);
+        });
+      }
+    },
+    isChecked(item) {
+      return (this.selectedItems.findIndex(c => (c.uid === item.uid)) !== -1);
+    },
+    onInputPagination(page = 1) {
+      this.search(page);
+    },
+    onClearSelection() {
+      this.selectedItems = [];
+    },
+    onClickResult(searchResult) {
+      this.$router.push({
+        name: 'article',
+        params: {
+          issue_uid: searchResult.issue.uid,
+          page_number: searchResult.pages[0].num,
+          page_uid: searchResult.pages[0].uid,
+          article_uid: searchResult.uid,
+        },
+      });
+    },
+  },
+  watch: {
+    searchResults() {
+      this.updateselectAll();
+    },
+    selectedItems() {
+      this.updateselectAll();
+    },
+    '$route.query': {
+      handler(val) {
+        console.log('@$route.query changed', val);
+        this.$store.dispatch('searchImages/PULL_SEARCH_PARAMS', val);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+</style>
+
+<i18n>
+  {
+    "en": {
+      "tabs": {
+        "text": "search articles",
+        "images": "search images"
+      },
+      "label_order": "Order By",
+      "label_isFront": "Frontpage",
+      "sort_asc": "Ascending",
+      "sort_desc": "Descending",
+      "sort_date": "Date",
+      "sort_relevance": "Relevance",
+      "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",
+      "select_all": "Select all items on this page"
+    }
+  }
+</i18n>
diff --git a/src/components/SearchPage.vue b/src/components/SearchPage.vue
index c82ef3d1f..7c96dfe7c 100644
--- a/src/components/SearchPage.vue
+++ b/src/components/SearchPage.vue
@@ -3,12 +3,16 @@
   <i-layout-section width="400px" class="border-right border-tertiary">
     <!--  header -->
     <div slot="header" class="border-bottom border-tertiary bg-light">
-      <!-- <b-tabs pills class="border-bottom border-tertiary">
+      <b-tabs pills class="border-bottom mx-2 pt-2">
         <template slot="tabs">
-          <b-nav-item :to="{ name:'search'}"  ><span v-html="$t('tabs.text')"/></b-nav-item>
-          <b-nav-item :to="{ name:'newspaper'}" exact><span v-html="$t('tabs.images')"/></b-nav-item>
+          <b-nav-item class="pl-2 active"
+            active-class='none'
+            :to="{ name:'search'}"><span v-html="$t('tabs.text')"/></b-nav-item>
+          <b-nav-item
+            active-class='none'
+            :to="{ name:'searchImages'}"><span v-html="$t('tabs.images')"/></b-nav-item>
         </template>
-      </b-tabs> -->
+      </b-tabs>
       <div class="py-3 px-3">
         <search-pills v-on:remove="onRemoveFilter"/>
         <autocomplete v-on:submit="onSuggestion" />
@@ -16,20 +20,14 @@
     </div>
 
     <!--  body -->
-    <div class="pt-2">
+    <div class="pt-3">
 
-      <b-form-group class="px-3 py-1">
-        <b-form-checkbox v-model="hasTextContents" switch v-bind:value="true"
-        v-bind:unchecked-value="false">
-          {{$t('label_hasTextContents')}}
-        </b-form-checkbox>
+      <b-form-group class="mx-3">
         <b-form-checkbox v-model="isFront" switch v-bind:value="true">
           {{$t('label_isFront')}}
         </b-form-checkbox>
       </b-form-group>
 
-
-
       <!-- <search-filters v-on:remove-filter="search(1)" v-on:submit-filter="search(1)" /> -->
       <search-facets @submit-facet="onFacet" @update-filter="onUpdateFilter" @reset-filter="onResetFilter"/>
     </div>
@@ -90,9 +88,10 @@
       <b-navbar-nav class="px-3 pt-1 pb-3 border-right" style="flex:1">
         <ellipsis v-bind:initialHeight="88">
           <search-result-summary
-            v-on:onSummary="onSummary"
-            v-bind:queryComponents="queryComponents"
-            v-bind:totalRows="paginationTotalRows" />
+            @onSummary="onSummary"
+            :group-by="groupBy"
+            :queryComponents="queryComponents"
+            :totalRows="paginationTotalRows" />
         </ellipsis>
       </b-navbar-nav>
       <b-navbar-nav class="ml-auto p-3" v-if="isLoggedIn">
diff --git a/src/components/SearchPills.vue b/src/components/SearchPills.vue
index a5b5cbe77..c787b6080 100644
--- a/src/components/SearchPills.vue
+++ b/src/components/SearchPills.vue
@@ -52,7 +52,7 @@
 
       <div class="p-2 pb-1 sp-contents">
         <div class="description">{{ $t(`label.${filter.type}.title`) }}</div>
-        <filter-monitor checkbox :filter="filter" :type="filter.type" :operators="['AND', 'OR']" />
+        <filter-monitor :store="store" checkbox :filter="filter" :type="filter.type" :operators="['AND', 'OR']" />
 
 
         <b-form-group :label="filter.type" v-if="filter.type === 'string'">
@@ -92,11 +92,24 @@ import NewspaperListItem from './modules/NewspaperListItem';
 import FilterMonitor from './modules/FilterMonitor';
 
 export default {
+  props: {
+    store: {
+      type: String,
+      default: 'search',
+    },
+  },
   computed: {
+    currentStore() {
+      console.log('currentStore', this.store);
+      if (this.store === 'searchImages') {
+        return this.$store.state.searchImages;
+      }
+      return this.$store.state.search;
+    },
     pills: {
       get() {
         // exclude boolean filters
-        return this.$store.state.search.search.filters
+        return this.currentStore.search.filters
           .filter(d => ['hasTextContents', 'isFront'].indexOf(d.type) === -1);
           // .sort((a, b) => (a.type > b.type ? 1 : -1));
       },
diff --git a/src/components/modules/FilterDateRange.vue b/src/components/modules/FilterDateRange.vue
index 1c19935af..5bebadd3f 100644
--- a/src/components/modules/FilterDateRange.vue
+++ b/src/components/modules/FilterDateRange.vue
@@ -62,10 +62,12 @@ export default {
           });
         }
       }
+      if (!item) {
+        return;
+      }
       item.uid = item.getValue();
-      if (item && item.uid !== this.daterange.uid) {
+      if (item.uid !== this.daterange.uid) {
         item.checked = this.daterange.checked;
-
         console.log('updateDaterange emit "change" \n', this.daterange.uid, '\nto:\n', item.getValue());
         this.$emit('change', {
           item,
diff --git a/src/components/modules/FilterFacet.vue b/src/components/modules/FilterFacet.vue
index 9399c9166..d56b18391 100644
--- a/src/components/modules/FilterFacet.vue
+++ b/src/components/modules/FilterFacet.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="mb-4">
+  <div>
     <base-title-bar>
       {{$t(`label.${facet.type}.title`)}}
       <div slot="options">
@@ -19,27 +19,35 @@
             </b-button>
           </span>
           <span v-else>
-            {{$t(`label.${facet.type}.description`)}}
+            <span v-if="isLoadingResults">
+              {{ $t('loading') }}
+            </span>
+            <span v-if="!isLoadingResults && !this.facet.buckets.length">
+              {{$t(`label.${facet.type}.empty`)}}
+            </span>
+            <span v-else>
+              {{$t(`label.${facet.type}.description`)}}
+            </span>
           </span>
         </span>
       </div>
     </base-title-bar>
     <div v-for="(filter, index) in included" :key="index" class="bg-light border p-2">
-      <filter-monitor v-if='index === included.length - 1' :filter="filter" :type="facet.type" :operators="facet.operators"
+      <filter-monitor v-if='index === included.length - 1' :store="store" :filter="filter" :type="facet.type" :operators="facet.operators"
         :items-to-add="selectedItems"
         @filter-applied="clearSelectedItems"/>
-      <filter-monitor v-else :filter="filter" :type="facet.type" :operators="facet.operators" />
+      <filter-monitor v-else :filter="filter" :store="store" :type="facet.type" :operators="facet.operators" />
     </div>
     <div v-for="(filter, index) in excluded" :key="index" class="bg-light border p-2">
-      <filter-monitor :filter="filter" :type="facet.type" :operators="facet.operators" />
+      <filter-monitor :store="store" :filter="filter" :type="facet.type" :operators="facet.operators" />
     </div>
 
 
     <filter-facet-bucket v-for="bucket in unfiltered" :key="bucket.val"
+      :loading="isLoadingResults"
       :bucket="bucket"
       :type="facet.type"
       @toggle-bucket="toggleBucket"/>
-    </div>
   </div>
 </template>
 
@@ -56,16 +64,33 @@ export default {
     selectedItems: [],
     operators: ['or', 'and'],
   }),
-  props: ['facet'],
+  props: {
+    store: {
+      type: String,
+      default: 'search',
+    },
+    facet: {
+      type: Object,
+    },
+  },
   computed: {
+    currentStore() {
+      if (this.store === 'searchImages') {
+        return this.$store.state.searchImages;
+      }
+      return this.$store.state.search;
+    },
+    isLoadingResults() {
+      return this.currentStore.isLoadingResults;
+    },
     filtered() {
-      return this.$store.state.search.search.filtersIndex[this.facet.type];
+      return this.currentStore.search.filtersIndex[this.facet.type];
     },
     included() {
       if (!this.filtered) {
         return [];
       }
-      const included = this.$store.state.search.search
+      const included = this.currentStore.search
         .filtersIndex[this.facet.type]
         .filter(d => d.context !== 'exclude');
       // enrich included filter with matching buckets.
@@ -161,7 +186,18 @@ export default {
         "filtered": "results are filtered when:",
         "selected": "filter results if <b>one of {count} selected</b> topic applies",
         "description": "check one or more topics to filter results",
-        "clear": "reset"
+        "apply": "apply",
+        "clear": "reset",
+        "empty": "There is no topic available"
+      },
+      "collection": {
+        "title": "filter by collection",
+        "filtered": "results are filtered when:",
+        "selected": "filter results if <b>one of {count} selected</b> collection applies",
+        "description": "check one or more collection to filter results",
+        "apply": "apply",
+        "clear": "reset",
+        "empty": "... you haven't saved any result item in your collection"
       },
       "newspaper": {
         "title": "filter by newspaper titles",
@@ -169,7 +205,8 @@ export default {
         "selected": "filter results if they appear in <b>one of {count} selected</b> newspapers",
         "description": "check one or more newspaper to filter results",
         "clear": "reset",
-        "apply": "apply"
+        "apply": "apply",
+        "empty": "(no results)"
       },
       "language": {
         "title": "filter by language of articles",
@@ -177,7 +214,8 @@ export default {
         "selected": "filter results if they are written in <b>one of {count} selected</b> languages",
         "description": "check one or more language to filter results",
         "apply": "apply",
-        "clear": "reset"
+        "clear": "reset",
+        "empty": "(no results)"
       }
     }
   }
diff --git a/src/components/modules/FilterFacetBucket.vue b/src/components/modules/FilterFacetBucket.vue
index 9777d5c4e..fa0bd9eaa 100644
--- a/src/components/modules/FilterFacetBucket.vue
+++ b/src/components/modules/FilterFacetBucket.vue
@@ -4,7 +4,15 @@
       <span v-if="type === 'topic'" v-html="bucket.item.htmlExcerpt"></span>
       <span v-if="type === 'newspaper'">{{ bucket.item.name }}</span>
       <span v-if="type === 'language'">{{ $t(`languages.${bucket.val}`) }}</span>
-      <span>({{$n(bucket.count)}})</span>
+      <span v-if="type === 'collection'">
+        <span v-if="bucket.item.name">
+          <b>{{ bucket.item.name }}</b> @{{ bucket.item.creator.username }}<br/>
+          {{ $t('dates.lastModifiedDate') }} {{ $d(bucket.item.lastModifiedDate, 'short') }}
+        </span>
+        <span v-else>{{ bucket.item.uid }}</span>
+      </span>
+
+      <span>({{ $t('numbers.results', { results: $n(bucket.count) }) }})</span>
     </b-form-checkbox>
     <!-- <b-dropdown v-if="isChecked" size="sm" variant="outline-primary">
       <template slot="button-content">{{ selectedOperator }}</template>
@@ -25,7 +33,18 @@ export default {
   model: {
     prop: 'bucket',
   },
-  props: ['bucket', 'type'],
+  props: {
+    bucket: {
+      type: Object,
+    },
+    type: {
+      type: String,
+    },
+    isLoadingResults: {
+      type: Boolean,
+      deafult: true,
+    },
+  },
   computed: {
     isChecked: {
       get() {
diff --git a/src/components/modules/FilterMonitor.vue b/src/components/modules/FilterMonitor.vue
index e0e4db528..69d9cdf24 100644
--- a/src/components/modules/FilterMonitor.vue
+++ b/src/components/modules/FilterMonitor.vue
@@ -51,10 +51,7 @@
       <b-form-checkbox v-model="item.checked" @change="toggleFilterItem($event, item)">
         <span v-if="type === 'topic'" v-html="item.htmlExcerpt"></span>
         <span v-if="type === 'newspaper'">{{ item.name }}</span>
-        <span v-if="type === 'collection'">
-          <b>{{ item.name }}</b> @{{ item.creator.username }}
-          <br/>{{ item.countItems }} items &mdash; {{ $d(item.lastModifiedDate, 'long') }}
-        </span>
+        <collection-item v-if="type === 'collection'" :item="item" />
         <div v-if="type === 'daterange'">
           <filter-daterange :daterange="item" @change="updateFilterItem($event.item, $event.uid)"></filter-daterange>
         </div>
@@ -67,7 +64,8 @@
         <span v-if="type === 'topic'" v-html="item.htmlExcerpt"></span>
         <span v-if="type === 'newspaper'">{{ item.name }}</span>
         <span v-if="type === 'language'">{{ $t(`languages.${item.uid}`) }}</span>
-        <span v-if="item.count">({{ $n(item.count)}})</span>
+        <collection-item v-if="type === 'collection'" :item="item" />
+        <span v-if="item.count">({{ $t('numbers.results', { results: $n(item.count) }) }})</span>
       </div>
     </div>
 
@@ -88,10 +86,15 @@
 
 <script>
 import FilterDaterange from './FilterDateRange';
+import CollectionItem from './lists/CollectionItem';
 
 export default {
   props: {
     type: String, // being topic, newspaper, collection, language ...
+    store: {
+      type: String,
+      default: 'search',
+    },
     operators: {
       type: Array,
       default: () => ['OR'],
@@ -128,8 +131,8 @@ export default {
     applyFilter() {
       this.updateFilter({});
       this.$emit('filter-applied');
-      this.$store.commit('search/UPDATE_PAGINATION_CURRENT_PAGE', 1);
-      this.$store.dispatch('search/PUSH_SEARCH_PARAMS');
+      this.$store.commit(`${this.store}/UPDATE_PAGINATION_CURRENT_PAGE`, 1);
+      this.$store.dispatch(`${this.store}/PUSH_SEARCH_PARAMS`);
     },
     updateFilter({ op, context }) {
       console.log('methods.updateFilter: op:', op, context);
@@ -143,13 +146,13 @@ export default {
       }, []);
 
       if (!q.length) {
-        this.$store.commit('search/REMOVE_FILTER', this.filter);
+        this.$store.commit(`${this.store}/REMOVE_FILTER`, this.filter);
         this.$emit('filter-removed');
         return;
       }
 
       // commit the update
-      this.$store.commit('search/UPDATE_FILTER', {
+      this.$store.commit(`${this.store}/UPDATE_FILTER`, {
         filter: this.filter,
         q,
         op,
@@ -169,7 +172,7 @@ export default {
       this.updateFilterItem(item);
     },
     updateFilterItem(item, uid) {
-      this.$store.commit('search/UPDATE_FILTER_ITEM', {
+      this.$store.commit(`${this.store}/UPDATE_FILTER_ITEM`, {
         filter: this.filter,
         item,
         uid,
@@ -178,6 +181,7 @@ export default {
   },
   components: {
     FilterDaterange,
+    CollectionItem,
   },
 };
 </script>
diff --git a/src/components/modules/SearchResultsImageItem.vue b/src/components/modules/SearchResultsImageItem.vue
new file mode 100644
index 000000000..1f62db159
--- /dev/null
+++ b/src/components/modules/SearchResultsImageItem.vue
@@ -0,0 +1,84 @@
+<template lang="html">
+  <div class="tile my-3 border">
+    <div
+      class="thumbnail bg-light clearfix"
+      :style="`background-image: url(${searchResult.regions[0].iiifFragment})`">
+      <div v-if="isLoggedIn() && checkbox" class="float-right pt-1 pl-1">
+        <b-checkbox
+          class="m-0 select-item"
+          v-bind:checked.native="checked"
+          v-on:change="toggleSelected" />
+      </div>
+    </div>
+    <a href="#" v-on:click.prevent="click" class="titleblock article-meta p-2 border-top">
+      <h2>{{searchResult.uid}}</h2>
+      <div v-show="searchResult.newspaper.name != ''" class="small-caps">
+        {{searchResult.newspaper.name}}
+      </div>
+      <div class="small-caps">
+        {{$d(new Date(searchResult.date), 'short')}}
+        (p. <span>{{searchResult.pages.map(page => page.num).join('; ')}}</span>)
+      </div>
+    </a>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+  }),
+  model: {
+    prop: 'image',
+  },
+  props: ['searchResult', 'checkbox', 'checked'],
+  methods: {
+    click() {
+      this.$emit('click');
+    },
+    toggleSelected() {
+      this.$emit('toggleSelected');
+    },
+    isLoggedIn() {
+      return this.$store.state.user.userData;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "impresso-theme/src/scss/variables.sass";
+
+.tile {
+  div.overlay-region{
+    background: $clr-accent-secondary;
+    opacity: 0.25;
+  }
+  &:hover {
+    transition: 0.2s;
+    border-color: black !important;
+  }
+  .titleblock {
+    display:block;
+    &:hover {
+      text-decoration: none;
+      border-color: black !important;
+    }
+  }
+  .thumbnail {
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+      height: 20em;
+      height: 30vh;
+      input[type="checkbox"] {
+          width: 0;
+      }
+  }
+  h2 {
+    font-size: 1em;
+    font-weight: 500;
+  }
+  overflow: hidden;
+}
+
+</style>
diff --git a/src/components/modules/SearchResultsListItem.vue b/src/components/modules/SearchResultsListItem.vue
index 4a80fe862..dc68e3b75 100644
--- a/src/components/modules/SearchResultsListItem.vue
+++ b/src/components/modules/SearchResultsListItem.vue
@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-media class="py-3 border-bottom">
+  <b-media class="py-3 border-bottom overflow-hidden">
     <div class="thumbnail bg-light border" slot="aside" >
       <open-seadragon-viewer
         v-bind:handler="handler">
diff --git a/src/components/modules/SearchResultsSummary.vue b/src/components/modules/SearchResultsSummary.vue
index 759a8ca73..f0bb9d3d1 100644
--- a/src/components/modules/SearchResultsSummary.vue
+++ b/src/components/modules/SearchResultsSummary.vue
@@ -11,7 +11,7 @@ export default {
     isOnFront: false,
     message: '',
   }),
-  props: ['queryComponents', 'totalRows'],
+  props: ['queryComponents', 'totalRows', 'groupBy'],
   methods: {
     getSections(type) {
       // regroup querycomponents based on include / exclude
@@ -89,6 +89,23 @@ export default {
       }).join('; ');
     },
 
+    getCollections() {
+      // console.log('getNewspapers', this.queryComponents);
+      const mapper = (d) => {
+        let results = [];
+        if (d.items) {
+          results = d.items.map(item => `<strong>"${item.name}"</strong>`);
+        } else {
+          results = d.q.map(item => `<strong>"${item}"</strong>`);
+        }
+        return results.join(`<span class="operator">${this.$t('op.or')}</span>`);
+      };
+
+      return this.getFormattedSection({
+        type: 'collection',
+        mapper,
+      }).join('; ');
+    },
     getTopics() {
       const mapper = d => d.items
         .map(item => `<span class="item">"${item.getHtmlExcerpt()}"</span>`)
@@ -135,15 +152,21 @@ export default {
     queryComponents: {
       immediate: true,
       handler() {
-        this.message = this.$t('message', {
-          count: this.$n(this.totalRows),
-          front: this.isFront(),
-          ranges: this.getDateranges(),
-          newspapers: this.getNewspapers(),
-          terms: this.getStrings(),
-          topics: this.getTopics(),
-        });
-        this.$emit('onSummary', this.message);
+        if (!this.queryComponents.length) {
+          this.message = this.$t(`browse.${this.groupBy}`, { count: this.$n(this.totalRows) });
+        } else {
+          this.message = this.$t('message', {
+            groupByLabel: this.$t(`groupBy.${this.groupBy}`),
+            count: this.$n(this.totalRows),
+            front: this.isFront(),
+            ranges: this.getDateranges(),
+            newspapers: this.getNewspapers(),
+            collections: this.getCollections(),
+            terms: this.getStrings(),
+            topics: this.getTopics(),
+          });
+          this.$emit('onSummary', this.message);
+        }
       },
     },
   },
@@ -170,7 +193,8 @@ export default {
         "newspaper": "of"
       },
       "string": "containing",
-      "daterange": "published"
+      "daterange": "published",
+      "collection": "saved in"
     },
     "exclude": {
       "topic": "without topic",
@@ -180,10 +204,11 @@ export default {
       "pubof": {
         "newspaper": "not published in"
       },
-      "daterange": "not published"
+      "daterange": "not published",
+      "collection": "not yet saved in"
     },
     "isFront": "appearing on the <em>front page</em>",
-    "message": "Found <span class='number'>{count}</span> articles {front} {newspapers} {ranges} {terms} {topics}",
+    "message": "Found <span class='number'>{count}</span> {groupByLabel} {front} {newspapers} {ranges} {collections} {terms} {topics}",
     "daterange": "from <span class='date'>{start}</span> to <span class='date'>{end}</span>"
   },
   "fr": {
diff --git a/src/components/modules/SearchResultsTilesItem.vue b/src/components/modules/SearchResultsTilesItem.vue
index 694b1c29a..d83f3e6bf 100644
--- a/src/components/modules/SearchResultsTilesItem.vue
+++ b/src/components/modules/SearchResultsTilesItem.vue
@@ -145,6 +145,7 @@ export default {
     font-size: 1em;
     font-weight: 500;
   }
+  overflow: hidden;
 }
 
 </style>
diff --git a/src/components/modules/TableOfContents.vue b/src/components/modules/TableOfContents.vue
index e40602897..026cbd44e 100644
--- a/src/components/modules/TableOfContents.vue
+++ b/src/components/modules/TableOfContents.vue
@@ -1,6 +1,6 @@
 <template lang="html">
   <div id="TableOfContents" ref="TableOfContents">
-    <div v-for="page in toc.pages" class="mb-5">
+    <div v-for="page in tableOfContents.pages" class="mb-5">
       <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}">
@@ -24,7 +24,7 @@ import Issue from '@/models/Issue';
 
 export default {
   props: {
-    toc: {
+    tableOfContents: {
       default: new Issue(),
     },
     pageUid: {
@@ -42,11 +42,13 @@ export default {
       });
     },
     scrollToActiveArticle() {
-      const elm = this.$refs[`article-${this.articleUid}`][0];
-      const parent = this.$refs.TableOfContents.parentNode;
-      if (parent.scrollTop > elm.offsetTop ||
-        (elm.offsetTop - parent.scrollTop) > parent.offsetHeight) {
-        parent.scrollTo({ top: elm.offsetTop, behavior: 'smooth' });
+      if (this.articleUid !== '') {
+        const elm = this.$refs[`article-${this.articleUid}`][0];
+        const parent = this.$refs.TableOfContents.parentNode;
+        if (parent.scrollTop > elm.offsetTop ||
+          (elm.offsetTop - parent.scrollTop) > parent.offsetHeight) {
+          parent.scrollTo({ top: elm.offsetTop - 50, behavior: 'smooth' });
+        }
       }
     },
   },
@@ -63,7 +65,7 @@ export default {
     articleUid() {
       this.scrollToActiveArticle();
     },
-    toc: {
+    tableOfContents: {
       handler() {
         window.setTimeout(() => {
           this.scrollToActiveArticle();
diff --git a/src/components/modules/TableOfImages.vue b/src/components/modules/TableOfImages.vue
new file mode 100644
index 000000000..99c53c324
--- /dev/null
+++ b/src/components/modules/TableOfImages.vue
@@ -0,0 +1,100 @@
+<template lang="html">
+  <div id="TableOfImages" ref="TableOfImages">
+    <div v-for="page in tableOfContents.pages" class="mb-5">
+      <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" v-for="article in page.articles" v-bind:class="{active: article.uid === articleUid}">
+            <a href="#" class="d-block" v-on:click.prevent="onClick(article, page)">
+              <div class="image p-3">
+                <b-img v-bind:src="article.regions[0].iiifFragment" fluid-grow />
+              </div>
+            </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import Issue from '@/models/Issue';
+
+export default {
+  props: {
+    tableOfContents: {
+      default: new Issue(),
+    },
+    pageUid: {
+      default: '',
+    },
+    articleUid: {
+      default: '',
+    },
+  },
+  methods: {
+    onClick(article, page) {
+      this.$emit('click', {
+        article,
+        page,
+      });
+    },
+    scrollToActiveArticle() {
+      if (this.articleUid !== '') {
+        const elm = this.$refs[`article-${this.articleUid}`][0];
+        const parent = this.$refs.TableOfImages.parentNode;
+        if (parent.scrollTop > elm.offsetTop ||
+          (elm.offsetTop - parent.scrollTop) > parent.offsetHeight) {
+          parent.scrollTo({ top: elm.offsetTop - 50, behavior: 'smooth' });
+        }
+      }
+    },
+  },
+  filters: {
+    substring: (val, count = 10) => {
+      val = val.trim();
+      if (val.length >= count - 3) {
+        return `${val.substring(0, count)}...`;
+      }
+      return val;
+    },
+  },
+  watch: {
+    pageUid() {
+      this.scrollToActiveArticle();
+    },
+    tableOfContents: {
+      handler() {
+        window.setTimeout(() => {
+          this.scrollToActiveArticle();
+        }, 500);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "impresso-theme/src/scss/variables.sass";
+
+#TableOfImages{
+  .pagenumber {
+    font-size: 1.4em;
+    color: lighten($clr-primary, 75);
+  }
+
+  ul.page {
+    list-style: none;
+    font-size: smaller;
+    margin-bottom: 0;
+    .article{
+      a {
+      }
+      &.active{
+        a {
+          background: lighten($clr-primary, 88);
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/modules/ThumbnailSlider.vue b/src/components/modules/ThumbnailSlider.vue
index 0177c2dcd..9e53a932b 100644
--- a/src/components/modules/ThumbnailSlider.vue
+++ b/src/components/modules/ThumbnailSlider.vue
@@ -54,8 +54,12 @@ export default {
     ThumbnailSliderItem,
   },
   watch: {
-    page() {
-      this.scrollToActivePage();
+    page: {
+      handler(val, oldval) {
+        if (oldval instanceof Page) {
+          this.scrollToActivePage();
+        }
+      },
     },
     issue: {
       handler() {
diff --git a/src/components/modules/lists/CollectionItem.vue b/src/components/modules/lists/CollectionItem.vue
new file mode 100644
index 000000000..b33c58a2a
--- /dev/null
+++ b/src/components/modules/lists/CollectionItem.vue
@@ -0,0 +1,19 @@
+<template lang="html">
+  <div>
+    <span v-if="item.name">
+      <b>{{ item.name }}</b> @{{ item.creator.username }}<br/>
+      {{ $t('dates.lastModifiedDate') }} {{ $d(item.lastModifiedDate, 'short') }}
+    </span>
+    <span v-else>{{ item.uid }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: {
+      type: Object,
+    },
+  },
+};
+</script>
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index a02a2de02..09e7dbdcd 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -18,6 +18,23 @@ export default {
         item: 'from <b>{start}</b> to <b>{end}</b>',
       },
     },
+    groupBy: {
+      images: 'images',
+      articles: 'articles',
+    },
+    browse: {
+      images: 'Search in <span class="number">{count}</span> published images',
+      articles: 'Search in <span class="number">{count}</span> published articles',
+    },
+    numbers: {
+      results: '{results} results',
+      collection: {
+        countItems: '{countItems} saved items',
+      },
+    },
+    dates: {
+      lastModifiedDate: 'last modified',
+    },
   },
   nl: {
     language: 'Taal',
diff --git a/src/models/Article.js b/src/models/Article.js
index df91b7894..73ad740dd 100644
--- a/src/models/Article.js
+++ b/src/models/Article.js
@@ -28,7 +28,7 @@ import Tag from './Tag';
  * @param {Array} tags Array of Tag objects
  * @param {Interger} time Unix timestamp of the article
  * @param {String} title Title of the article
- * @param {String} type type of article 'ad' = advertisement, 'ar' = article
+ * @param {String} type type of article 'ad' = advertisement, 'ar' = article, 'image' = image
  * @param {String} uid Unique identifier for the article
  * @param {Number} year Year of the article
  */
diff --git a/src/models/SearchQuery.js b/src/models/SearchQuery.js
index a5a6cffe0..c7fe9ac90 100644
--- a/src/models/SearchQuery.js
+++ b/src/models/SearchQuery.js
@@ -17,7 +17,7 @@ export default class SearchQuery {
   constructor({
     filters = [
       // { type: 'isFront' },
-      { type: 'hasTextContents' },
+      // { type: 'hasTextContents' },
     ],
   } = {}) {
     this.uuid = uuid.v4();
diff --git a/src/router/index.js b/src/router/index.js
index 068a353e8..f66ff75c9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,7 @@ import * as services from '@/services';
 import Vue from 'vue';
 import Router from 'vue-router';
 import HomePage from '../components/HomePage';
+import SearchImagesPage from '../components/SearchImagesPage';
 import SearchPage from '../components/SearchPage';
 import IssuePage from '../components/IssuePage';
 import UserLoginPage from '../components/UserLoginPage';
@@ -42,6 +43,14 @@ const router = new Router({
       requiresAuth: true,
     },
   },
+  {
+    path: '/search/images',
+    name: 'searchImages',
+    component: SearchImagesPage,
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/user/login',
     name: 'login',
diff --git a/src/services/index.js b/src/services/index.js
index a642b8ee3..39764a409 100644
--- a/src/services/index.js
+++ b/src/services/index.js
@@ -66,6 +66,7 @@ app.service('logs').on('created', (payload) => {
 // repeat this line for every service in our backend
 export const suggestions = app.service('suggestions');
 export const articles = app.service('articles');
+export const images = app.service('images');
 export const issues = app.service('issues');
 export const issuesTimeline = app.service('issues-timelines');
 export const pages = app.service('pages');
diff --git a/src/store/Issue.js b/src/store/Issue.js
index c52b6c702..62799e945 100644
--- a/src/store/Issue.js
+++ b/src/store/Issue.js
@@ -69,7 +69,7 @@ export default {
         });
       });
     },
-    LOAD_TOC(context, uid) {
+    LOAD_TABLE_OF_CONTENTS(context, uid) {
       return new Promise((resolve, reject) => {
         const q = {
           query: {
@@ -121,5 +121,52 @@ export default {
           });
       });
     },
+    LOAD_TABLE_OF_IMAGES(context, uid) {
+      return new Promise((resolve, reject) => {
+        const query = {
+          filters: [{
+            type: 'issue',
+            q: uid,
+          }],
+          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;
+            }
+
+            return 0;
+          });
+          resolve(issue);
+        }, (error) => {
+          reject(error);
+        });
+      });
+    },
   },
 };
diff --git a/src/store/Search.js b/src/store/Search.js
index 560dfe162..0264d18fe 100644
--- a/src/store/Search.js
+++ b/src/store/Search.js
@@ -13,10 +13,30 @@ import router from '../router';
 export default {
   namespaced: true,
   state: {
-    search: new SearchQuery(),
+    search: new SearchQuery({
+      filters: [{ type: 'hasTextContents' }],
+    }),
     searches: [],
     results: [],
-    facets: [],
+    facets: [
+      new Facet({
+        type: 'year',
+      }),
+      new Facet({
+        type: 'language',
+      }),
+      new Facet({
+        type: 'newspaper',
+      }),
+      new Facet({
+        type: 'topic',
+        operators: ['OR', 'AND'],
+      }),
+      new Facet({
+        type: 'collection',
+      }),
+    ],
+    facetTypes: ['year', 'newspaper', 'language', 'topic', 'collection'], // this also sets the order of the filters
     orderBy: '-relevance', // relevance, -relevance, date, -date
     groupBy: 'articles', // issues, pages, articles, sentences
     displayStyle: 'list',
@@ -24,8 +44,8 @@ export default {
     paginationCurrentPage: 1,
     paginationTotalRows: 0,
     queryComponents: [],
-    facetTypes: ['year', 'newspaper', 'language', 'topic'], // this also sets the order of the filters
     filterFacetYearExpanded: false,
+    isLoadingResults: false,
   },
   getters: {
     getSearches(state) {
@@ -135,6 +155,17 @@ export default {
     ADD_FACET(state, facet) {
       state.facets.push(facet);
     },
+    UPDATE_IS_LOADING(state, isLoadingResults) {
+      state.isLoadingResults = Boolean(isLoadingResults);
+    },
+    UPDATE_FACET_BUCKETS(state, { type, buckets }) {
+      const facet = state.facets.find(d => d.type === type);
+      if (facet) {
+        facet.buckets = buckets;
+      } else {
+        console.error('Could not find any `facet` having type:', type);
+      }
+    },
     UPDATE_FILTER_IS_FRONT(state, value) {
       state.search.isFront = value;
     },
@@ -217,6 +248,7 @@ export default {
       });
     },
     SEARCH(context) {
+      context.commit('UPDATE_IS_LOADING', true);
       const search = new Promise(
         (resolve, reject) => {
           const query = {
@@ -232,13 +264,11 @@ export default {
             query,
           }).then(
             (res) => {
-              context.commit('CLEAR_FACETS');
-
+              context.commit('UPDATE_IS_LOADING', false);
               context.commit('UPDATE_RESULTS', res.data.map(result => new Article(result)));
-
               // add language facet/filter
               if (res.info.facets && res.info.facets.language) {
-                const facet = new Facet({
+                context.commit('UPDATE_FACET_BUCKETS', {
                   type: 'language',
                   buckets: res.info.facets.language.buckets.map(bucket => ({
                     ...bucket,
@@ -248,13 +278,11 @@ export default {
                     },
                   })),
                 });
-
-                context.commit('ADD_FACET', facet);
               }
 
               // add topic facet/filter
               if (res.info.facets && res.info.facets.topic) {
-                const facet = new Facet({
+                context.commit('UPDATE_FACET_BUCKETS', {
                   type: 'topic',
                   operators: ['OR', 'AND'],
                   buckets: res.info.facets.topic.buckets.map(bucket => ({
@@ -265,26 +293,22 @@ export default {
                     }),
                   })),
                 });
-                // enrich current fitler, if any, with one of the topics.
-                context.commit('ADD_FACET', facet);
               }
 
               // add newspaper facet/filter
               if (res.info.facets && res.info.facets.newspaper) {
-                const facet = new Facet({
+                context.commit('UPDATE_FACET_BUCKETS', {
                   type: 'newspaper',
                   buckets: res.info.facets.newspaper.buckets.map(bucket => ({
                     ...bucket,
                     item: new Newspaper(bucket.item),
                   })),
                 });
-
-                context.commit('ADD_FACET', facet);
               }
 
               // add collection facet/filter
               if (res.info.facets && res.info.facets.collection) {
-                const facet = new Facet({
+                context.commit('UPDATE_FACET_BUCKETS', {
                   type: 'collection',
                   buckets: res.info.facets.collection.buckets.map(bucket => ({
                     ...bucket,
@@ -294,12 +318,10 @@ export default {
                     }),
                   })),
                 });
-
-                context.commit('ADD_FACET', facet);
               }
 
               if (res.info.facets && res.info.facets.year) {
-                const facet = new Facet({
+                context.commit('UPDATE_FACET_BUCKETS', {
                   type: 'year',
                   buckets: res.info.facets.year.buckets.map((bucket) => {
                     if (bucket instanceof Bucket) {
@@ -309,8 +331,8 @@ export default {
                     return new Bucket(bucket);
                   }).sort((a, b) => parseInt(a.val, 10) - parseInt(b.val, 10)),
                 });
-                context.commit('ADD_FACET', facet);
               }
+
               context.commit('UPDATE_PAGINATION_TOTAL_ROWS', {
                 paginationTotalRows: res.total,
               });
@@ -318,6 +340,7 @@ export default {
               resolve(res);
             },
             (err) => {
+              context.commit('UPDATE_IS_LOADING', false);
               reject(err);
             },
           );
diff --git a/src/store/SearchImages.js b/src/store/SearchImages.js
new file mode 100644
index 000000000..ab120248d
--- /dev/null
+++ b/src/store/SearchImages.js
@@ -0,0 +1,283 @@
+import * as services from '@/services';
+import Article from '@/models/Article';
+import QueryComponent from '@/models/QueryComponent';
+import SearchQuery from '@/models/SearchQuery';
+import Newspaper from '@/models/Newspaper';
+import Bucket from '@/models/Bucket';
+// import Collection from '@/models/Collection';
+import Facet from '@/models/Facet';
+// import FilterFactory from '@/models/FilterFactory';
+import router from '../router';
+
+export default {
+  namespaced: true,
+  state: {
+    search: new SearchQuery(),
+    imageSearches: [],
+    results: [],
+    facets: [],
+    orderBy: '-date', // relevance, -relevance, date, -date
+    groupBy: 'images', // issues, pages, articles, sentences
+    displayStyle: 'images',
+    paginationPerPage: 12,
+    paginationCurrentPage: 1,
+    paginationTotalRows: 0,
+    queryComponents: [],
+    facetTypes: ['year', 'newspaper'], // this also sets the order of the filters
+    filterFacetYearExpanded: false,
+  },
+  getters: {
+    getSearches(state) {
+      return state.imageSearches;
+    },
+    getSearchesReversed(state) {
+      return state.imageSearches.slice().reverse();
+    },
+    getSearch(state) {
+      return state.search instanceof SearchQuery ?
+        state.search : new SearchQuery(state.search);
+    },
+    results(state) {
+      return state.results.map((result) => {
+        if (result instanceof Article) {
+          return result;
+        }
+
+        return new Article(result);
+      });
+    },
+    facets(state) {
+      return state.facets;
+    },
+  },
+  mutations: {
+    // general settings
+    UPDATE_SEARCH_QUERY_FILTERS(state, filters) {
+      state.search.updateFilters(filters);
+      console.log('commit->UPDATE_SEARCH_QUERY_FILTERS, after:', state.search.filters);
+    },
+    UPDATE_SEARCH_ORDER_BY(state, orderBy) {
+      state.orderBy = orderBy;
+    },
+    UPDATE_SEARCH_GROUP_BY(state, groupBy) {
+      state.groupBy = groupBy;
+    },
+    UPDATE_SEARCH_DISPLAY_STYLE(state, displayStyle) {
+      state.displayStyle = displayStyle;
+    },
+    UPDATE_PAGINATION_PER_PAGE(state, paginationPerPage) {
+      state.paginationPerPage = parseInt(paginationPerPage, 10);
+    },
+    // pagination
+    UPDATE_PAGINATION_CURRENT_PAGE(state, page) {
+      state.paginationCurrentPage = parseInt(page, 10);
+    },
+    UPDATE_PAGINATION_TOTAL_ROWS(state, payload) {
+      state.paginationTotalRows = payload.paginationTotalRows;
+    },
+    UPDATE_QUERY_COMPONENTS(state, queryComponents) {
+      console.log('#->UPDATE_QUERY_COMPONENTS, queryComponents:', queryComponents);
+      state.search.enrichFilters(queryComponents);
+      state.queryComponents = queryComponents.map(d => new QueryComponent(d));
+    },
+    UPDATE_FILTER_FACET_YEAR_EXPANDED(state, expanded) {
+      state.filterFacetYearExpanded = expanded;
+    },
+    ADD_FILTER(state, filter) {
+      console.log('#->ADD_FILTER', filter);
+      state.search.addFilter(filter);
+    },
+    REMOVE_FILTER(state, filter) {
+      state.search.removeFilter(filter);
+    },
+    RESET_FILTER(state, type) {
+      state.search.resetFilter(type);
+    },
+    UPDATE_FILTER(state, { filter, q, op, context }) {
+      state.search.updateFilter({ filter, q, op, context });
+    },
+    UPDATE_FILTER_ITEM(state, { filter, item, uid }) {
+      state.search.updateFilterItem({ filter, item, uid });
+    },
+    STORE_SEARCH(state) {
+      state.imageSearches.push(state.search);
+      state.search = new SearchQuery(state.search);
+    },
+    CLEAR(state) {
+      state.search = new SearchQuery();
+      state.results = [];
+      state.facets = [];
+      state.paginationCurrentPage = 1;
+      state.paginationTotalRows = 0;
+    },
+    LOAD_SEARCH(state, id) {
+      if (state.imageSearches.length) {
+        // load last search
+        let searchData = state.imageSearches[state.imageSearches.length - 1];
+
+        // or if id is set then load search with specifici uuid
+        if (id) {
+          searchData = state.imageSearches.find(search => search.uuid === id);
+        }
+
+        state.search = new SearchQuery(searchData);
+      }
+    },
+    CLEAR_RESULTS(state) {
+      state.results = [];
+    },
+    UPDATE_RESULTS(state, results) {
+      state.results = results;
+    },
+    CLEAR_FACETS(state) {
+      state.facets = [];
+    },
+    ADD_FACET(state, facet) {
+      state.facets.push(facet);
+    },
+    UPDATE_FILTER_IS_FRONT(state, value) {
+      state.search.isFront = value;
+    },
+    // UPDATE_FILTER_HAS_TEXT_CONTENTS(state, value) {
+    //   state.search.hasTextContents = value;
+    // },
+  },
+  actions: {
+    /**
+     * Print search params to current URL
+     * @param {[type]} context [description]
+     */
+    PUSH_SEARCH_PARAMS(context) {
+      const query = {
+        f: JSON.stringify(context.state.search.getFilters()),
+        p: context.state.paginationCurrentPage,
+        o: context.state.orderBy,
+      };
+      router.push({ name: 'searchImages', query });
+    },
+    PULL_SEARCH_PARAMS(context, query) {
+      if (query.o && ['date', '-date'].indexOf(query.o) !== -1) {
+        context.commit('UPDATE_SEARCH_ORDER_BY', query.o);
+      }
+      if (query.p && !isNaN(query.p)) {
+        context.commit('UPDATE_PAGINATION_CURRENT_PAGE', parseInt(query.p, 10));
+      }
+
+      // parse filters here.
+      try {
+        context.commit('UPDATE_SEARCH_QUERY_FILTERS', JSON.parse(query.f));
+      } catch (err) {
+        console.log(err);
+      }
+      context.dispatch('SEARCH');
+    },
+    ADD_OR_REPLACE_FILTER(context, filter) {
+      console.log('ADD_OR_REPLACE_FILTER', 'deprecated', filter);
+    },
+    CREATE_COLLECTION_FROM_QUERY(context, collectionUid) {
+      return new Promise((resolve) => {
+        services.search.create({}, {
+          query: {
+            collection_uid: collectionUid,
+            group_by: 'articles',
+            filters: context.getters.getSearch.getFilters(),
+          },
+        }).then(res => resolve(res));
+      });
+    },
+    EXPORT_FROM_QUERY(context, payload) {
+      // console.log(context, services.exporter.methods.create);
+      return new Promise((resolve) => {
+        services.exporter.create({
+          description: payload.description,
+        }, {
+          query: {
+            group_by: 'articles',
+            filters: context.getters.getSearch.getFilters(),
+            format: 'csv',
+          },
+        }).then(res => resolve(res));
+      });
+    },
+    SEARCH(context) {
+      const search = new Promise(
+        (resolve, reject) => {
+          const query = {
+            filters: context.getters.getSearch.getFilters(),
+            facets: context.state.facetTypes,
+            group_by: context.state.groupBy,
+            page: context.state.paginationCurrentPage,
+            limit: context.state.paginationPerPage,
+            order_by: context.state.orderBy,
+          };
+          console.log('->action:SEARCH', query);
+          services.images.find({
+            query,
+          }).then(
+            (res) => {
+              console.log('SEARCH res:', res);
+              context.commit('CLEAR_FACETS');
+
+              context.commit('UPDATE_RESULTS', res.data.map(result => new Article(result)));
+
+              if (res.info.facets && res.info.facets.year) {
+                const facet = new Facet({
+                  type: 'year',
+                  buckets: res.info.facets.year.buckets.map((bucket) => {
+                    if (bucket instanceof Bucket) {
+                      return bucket;
+                    }
+
+                    return new Bucket(bucket);
+                  }).sort((a, b) => parseInt(a.val, 10) - parseInt(b.val, 10)),
+                });
+                context.commit('ADD_FACET', facet);
+              }
+
+              // add newspaper facet/filter
+              if (res.info.facets && res.info.facets.newspaper) {
+                const facet = new Facet({
+                  type: 'newspaper',
+                  buckets: res.info.facets.newspaper.buckets.map(bucket => ({
+                    ...bucket,
+                    item: new Newspaper(bucket.item),
+                  })),
+                });
+
+                context.commit('ADD_FACET', facet);
+              }
+
+              // add collection facet/filter
+              // if (res.info.facets && res.info.facets.collection) {
+              //   const facet = new Facet({
+              //     type: 'collection',
+              //     buckets: res.info.facets.collection.buckets.map(bucket => ({
+              //       ...bucket,
+              //       item: new Collection({
+              //         ...bucket.item,
+              //         uid: bucket.val,
+              //       }),
+              //     })),
+              //   });
+              //
+              //   context.commit('ADD_FACET', facet);
+              // }
+
+
+              context.commit('UPDATE_PAGINATION_TOTAL_ROWS', {
+                paginationTotalRows: res.total,
+              });
+              context.commit('UPDATE_QUERY_COMPONENTS', res.info.queryComponents);
+              resolve(res);
+            },
+            (err) => {
+              reject(err);
+            },
+          );
+        },
+      );
+
+      return search;
+    },
+  },
+};
diff --git a/src/store/index.js b/src/store/index.js
index cb43d3363..3988634a5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,6 +6,7 @@ import settings from './Settings';
 import collections from './Collections';
 import user from './User';
 import search from './Search';
+import searchImages from './SearchImages';
 import autocomplete from './Autocomplete';
 import issue from './Issue';
 import newspapers from './Newspapers';
@@ -23,6 +24,7 @@ export default new Vuex.Store({
     articles,
     settings,
     search,
+    searchImages,
     autocomplete,
     user,
     issue,