diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index fd6f26e7..4737a90b 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -18,7 +18,7 @@
       "script": "dev-staging",
       "problemMatcher": ["$vite"],
       "group": {
-        "isDefault": true
+        "isDefault": false
       }
     }
   ]
diff --git a/package.json b/package.json
index 1002a97a..81401fcb 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "dev-staging": "vite --mode staging",
+    "dev-prod": "vite --mode prod",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "test:unit": "vitest",
diff --git a/src/components/CollectionDetailPage.vue b/src/components/CollectionDetailPage.vue
index ec116a5d..af0f5766 100644
--- a/src/components/CollectionDetailPage.vue
+++ b/src/components/CollectionDetailPage.vue
@@ -1,85 +1,125 @@
 <template>
   <i-layout-section>
-
     <template v-slot:header>
-
       <b-navbar v-if="$route.params.collection_uid" type="light" variant="light">
-
         <section>
-
           <span class="label small-caps">
-            <router-link v-bind:to="updateCurrentRoute({ name:'collections' })">&larr; {{$t("Collections")}}</router-link>
+            <router-link v-bind:to="updateCurrentRoute({ name: 'collections' })"
+              >&larr; {{ $t('Collections') }}</router-link
+            >
           </span>
 
-          <h3>{{collection.name}}</h3>
-          <p>{{collection.description}}</p>
-
+          <h3>{{ collection.name }}</h3>
+          <p>{{ collection.description }}</p>
         </section>
 
-
         <section class="ml-auto py-3 text-right">
-          <router-link :to="updateCurrentRoute({ name: 'compare', query: { left: `c:${$route.params.collection_uid}`} })" class="m-1">
-            <button type="button" class="btn btn-outline-info btn-sm"
-              @click="showConfirmDeleteModal()">{{ $t('compare_collection') }}
+          <router-link
+            :to="
+              updateCurrentRoute({
+                name: 'compare',
+                query: { left: `c:${$route.params.collection_uid}` }
+              })
+            "
+            class="m-1"
+          >
+            <button
+              type="button"
+              class="btn btn-outline-info btn-sm"
+              @click="showConfirmDeleteModal()"
+            >
+              {{ $t('compare_collection') }}
             </button>
           </router-link>
 
-          <b-dropdown class="m-1" size="sm" variant="outline-primary" :text="$t('edit_collection')"
-            right ref="edit_collection">
+          <b-dropdown
+            class="m-1"
+            size="sm"
+            variant="outline-primary"
+            :text="$t('edit_collection')"
+            right
+            ref="edit_collection"
+          >
             <div class="modal-edit pt-2 px-3 background-light">
               <label for="collectionName">Name</label>
-              <input type="text" name="collectionName" class="form-control mb-3"
+              <input
+                type="text"
+                name="collectionName"
+                class="form-control mb-3"
                 v-on:keyup.enter="save(collection)"
-                v-model="collection.name">
+                v-model="collection.name"
+              />
               <label for="collectionDesc">Description</label>
-              <textarea type="text" name="collectionDesc" class="form-control"
+              <textarea
+                type="text"
+                name="collectionDesc"
+                class="form-control"
                 v-on:keyup.enter="save(collection)"
-                v-model="collection.description" />
-              <button type="button" class="btn btn-outline-primary btn-sm form-control my-3"
-                v-on:click="save(collection)">{{ $t('update_collection') }}
+                v-model="collection.description"
+              />
+              <button
+                type="button"
+                class="btn btn-outline-primary btn-sm form-control my-3"
+                v-on:click="save(collection)"
+              >
+                {{ $t('update_collection') }}
               </button>
-              <button type="button" class="btn btn-outline-danger btn-sm form-control mb-3"
+              <button
+                type="button"
+                class="btn btn-outline-danger btn-sm form-control mb-3"
                 v-on:click.alt="remove(collection)"
-                v-on:click.exact="showConfirmDeleteModal()">
+                v-on:click.exact="showConfirmDeleteModal()"
+              >
                 {{ $t('delete_collection') }}
               </button>
             </div>
           </b-dropdown>
-
         </section>
 
         <Modal id="confirmDelete" :show="isConfirmDeleteModalVisible" @ok="remove(collection)">
-          {{this.$t('confirm_delete', [collection.name])}}
+          {{ this.$t('confirm_delete', [collection.name]) }}
         </Modal>
       </b-navbar>
 
       <b-navbar v-else type="light" variant="light">
-        <section class='pt-2 pb-1'>
-          <span class="label small-caps">{{$t('collections')}}</span>
-          <h3 class='mb-1'>{{ $t('all_collections_title') }}</h3>
-
+        <section class="pt-2 pb-1">
+          <span class="label small-caps">{{ $t('collections') }}</span>
+          <h3 class="mb-1">{{ $t('all_collections_title') }}</h3>
         </section>
       </b-navbar>
 
       <b-tabs pills class="mx-3">
         <template v-slot:tabs-end>
-          <b-nav-item v-for="(tabItem, i) in tabs" :key="i" class="pl-2"
+          <b-nav-item
+            v-for="(tabItem, i) in tabs"
+            :key="i"
+            class="pl-2"
             :class="{ active: tabItem.name === tab.name }"
-            active-class='none'
-            :to="updateCurrentRoute({ query: { tab: tabItem.name }})">
-            <span v-html="tabItem.label"/>
+            active-class="none"
+            :to="updateCurrentRoute({ query: { tab: tabItem.name } })"
+          >
+            <span v-html="tabItem.label" />
           </b-nav-item>
         </template>
       </b-tabs>
 
-      <b-navbar type="light" variant="light"
-        class="px-0 py-0 border-bottom" v-if="tab.name !== TAB_RECOMMENDATIONS
-          && (tab.name !== TAB_OVERVIEW || $route.params.collection_uid)">
-
+      <b-navbar
+        type="light"
+        variant="light"
+        class="px-0 py-0 border-bottom"
+        v-if="
+          tab.name !== TAB_RECOMMENDATIONS &&
+          (tab.name !== TAB_OVERVIEW || $route.params.collection_uid)
+        "
+      >
         <b-navbar-nav v-if="$route.params.collection_uid">
           <li class="p-2 ml-3 form-inline">
             <form class="form-inline">
-              <button type="button" class="btn btn-outline-primary btn-sm" v-on:click='applyFilter()'>
+              <button
+                type="button"
+                class="btn btn-outline-primary btn-sm"
+                v-on:click="applyFilter()"
+              >
                 {{ $t('actions.addToCurrentFilters') }}
               </button>
             </form>
@@ -93,8 +133,13 @@
           </li>
         </b-navbar-nav>
         <b-navbar-nav class="ml-3">
-          <b-button @click="handleExportCollection" size="sm" variant="outline-primary" class="d-flex align-items-center">
-            <div>{{$t('label_export_csv')}}</div>
+          <b-button
+            @click="handleExportCollection"
+            size="sm"
+            variant="outline-primary"
+            class="d-flex align-items-center"
+          >
+            <div>{{ $t('label_export_csv') }}</div>
             <div class="dripicons-export ml-1"></div>
           </b-button>
           <info-button name="can-i-download-part-of-the-data" class="float-right ml-2" />
@@ -110,82 +155,90 @@
               :modelValue="displayStyle"
               @update:modelValue="displayStyle = $event"
               :options="displayStyleOptions"
-              type="button" />
+              type="button"
+            />
           </div>
         </b-navbar-nav>
-
       </b-navbar>
-
     </template>
 
     <div v-if="tab.name === TAB_ARTICLES" class="collection-group">
-
       <div v-if="fetching">
         <i-spinner class="text-center m-5 p-5" />
       </div>
 
       <b-container v-else-if="paginationTotalRows > 0" fluid>
         <b-row v-if="displayStyle === 'list'">
-          <b-col cols="12"
+          <b-col
+            cols="12"
             v-for="(article, index) in articles"
-            v-bind:key="`${index}-${article.uid}`">
-            <search-results-list-item
-              v-on:click="gotoArticle(article)"
-              v-model="articles[index]" />
+            v-bind:key="`${index}-${article.uid}`"
+          >
+            <search-results-list-item v-on:click="gotoArticle(article)" v-model="articles[index]" />
           </b-col>
         </b-row>
 
         <b-row class="pb-5" v-if="displayStyle === 'tiles'">
-          <b-col cols="6" sm="12" md="4" lg="3"
+          <b-col
+            cols="6"
+            sm="12"
+            md="4"
+            lg="3"
             v-for="(article, index) in articles"
-            v-bind:key="`${index}-${article.uid}`">
+            v-bind:key="`${index}-${article.uid}`"
+          >
             <!-- {{article}} -->
             <search-results-tiles-item
               v-if="article.type === 'ar'"
               v-on:click="gotoArticle(article)"
-              v-model="articles[index]" />
+              v-model="articles[index]"
+            />
             <search-results-image-item
               v-if="article.type !== 'ar'"
               v-bind:searchResult="article"
               v-on:click="gotoArticle(article)"
-              v-model="articles[index]" />
+              v-model="articles[index]"
+            />
           </b-col>
         </b-row>
       </b-container>
 
-      <div
-        v-else
-        class="p-4">
-        <p class="text-center pt-4"><b>{{ $t('no_articles_in_collection')}}</b></p>
-        <p class="text-center">{{ $t('no_articles_in_collection_long')}}</p>
+      <div v-else class="p-4">
+        <p class="text-center pt-4">
+          <b>{{ $t('no_articles_in_collection') }}</b>
+        </p>
+        <p class="text-center">{{ $t('no_articles_in_collection_long') }}</p>
       </div>
 
       <div class="my-5"></div>
-      <div v-if="!fetching && paginationTotalRows > paginationPerPage" class="fixed-pagination-footer p-1 m-0">
+      <div
+        v-if="!fetching && paginationTotalRows > paginationPerPage"
+        class="fixed-pagination-footer p-1 m-0"
+      >
         <pagination
           size="sm"
           v-bind:perPage="paginationPerPage"
           v-bind:currentPage="paginationCurrentPage"
           v-bind:totalRows="paginationTotalRows"
           v-on:change="onInputPagination"
-          class="float-left small-caps" />
+          class="float-left small-caps"
+        />
       </div>
     </div>
 
-
-
-
     <div v-else-if="tab.name === TAB_OVERVIEW" class="p-3">
-
       <div class="mx-3">
-        <div class="tb-title label small-caps font-weight-bold">{{$t('label.year.optionsTitle')}}</div>
-        <div class="small">{{$t('label.year.optionsDescription')}}</div>
+        <div class="tb-title label small-caps font-weight-bold">
+          {{ $t('label.year.optionsTitle') }}
+        </div>
+        <div class="small">{{ $t('label.year.optionsDescription') }}</div>
       </div>
 
       <timeline
-            :class="{'loading': isTimelineLoading}"
-            :domain="[startYear, endYear]"
-            :values="timevalues">
+        :class="{ loading: isTimelineLoading }"
+        :domain="[startYear, endYear]"
+        :values="timevalues"
+      >
         <template v-slot="tooltipScope">
           <div v-if="tooltipScope.tooltip.item">
             {{ $d(tooltipScope.tooltip.item.t ?? 0, 'year') }} &middot;
@@ -201,13 +254,11 @@
               class=""
               :label="facet.type"
               :buckets="facet.buckets"
-              :facet-type="facet.type"/>
-        </b-col>
-      </b-row>
+              :facet-type="facet.type"
+            />
+          </b-col>
+        </b-row>
       </b-container>
-
-
-
     </div>
 
     <div v-else-if="tab.name === TAB_RECOMMENDATIONS" class="collection-recommendations h-100">
@@ -216,7 +267,8 @@
         :display-style="displayStyle"
         :collection="collection"
         :collection-recommenders-settings="recommendersSettings"
-        @settings-updated="handleRecommendersSettingsUpdated">
+        @settings-updated="handleRecommendersSettingsUpdated"
+      >
         <template v-slot:additional-navbar>
           <b-navbar-nav class="ml-auto">
             <li class="p-2 form-inline">
@@ -226,7 +278,8 @@
                   :modelValue="displayStyle"
                   @update:modelValue="displayStyle = $event"
                   :options="displayStyleOptions"
-                  type="button" />
+                  type="button"
+                />
               </form>
             </li>
           </b-navbar-nav>
@@ -239,42 +292,41 @@
 <script>
 import { mapStores } from 'pinia'
 import { protobuf } from 'impresso-jscommons'
-import Collection from '@/models/Collection';
-import SearchResultsListItem from '@/components/modules/SearchResultsListItem.vue';
-import SearchResultsTilesItem from '@/components/modules/SearchResultsTilesItem.vue';
-import SearchResultsImageItem from '@/components/modules/SearchResultsImageItem.vue';
-import Article from '@/models/Article';
-import Pagination from '@/components/modules/Pagination.vue';
-import SearchQuery from '@/models/SearchQuery';
-import Facet from '@/models/Facet';
-import Timeline from '@/components/modules/Timeline.vue';
-import StackedBarsPanel from '@/components/modules/vis/StackedBarsPanel.vue';
+import Collection from '@/models/Collection'
+import SearchResultsListItem from '@/components/modules/SearchResultsListItem.vue'
+import SearchResultsTilesItem from '@/components/modules/SearchResultsTilesItem.vue'
+import SearchResultsImageItem from '@/components/modules/SearchResultsImageItem.vue'
+import Article from '@/models/Article'
+import Pagination from '@/components/modules/Pagination.vue'
+import SearchQuery from '@/models/SearchQuery'
+import Facet from '@/models/Facet'
+import Timeline from '@/components/modules/Timeline.vue'
+import StackedBarsPanel from '@/components/modules/vis/StackedBarsPanel.vue'
 import { mapFilters } from '@/logic/queryParams'
 import { containsFilter } from '@/logic/filters'
 import CollectionRecommendationsPanel from '@/components/modules/collections/CollectionRecommendationsPanel.vue'
-import InfoButton from '@/components/base/InfoButton.vue';
-import { getQueryParameter } from '../router/util';
-import { exporter as exporterService,
+import InfoButton from '@/components/base/InfoButton.vue'
+import { getQueryParameter } from '../router/util'
+import {
+  exporter as exporterService,
   collections as collectionsService,
   searchFacets as searchFacetsService,
   collectionsItems as collectionsItemsService
-} from '@/services';
-import RadioGroup from '@/components/layout/RadioGroup.vue';
+} from '@/services'
+import RadioGroup from '@/components/layout/RadioGroup.vue'
 import Modal from '@/components/base/Modal.vue'
 import { useCollectionsStore } from '@/stores/collections'
 import { useSettingsStore } from '@/stores/settings'
-import { Navigation } from '@/plugins/Navigation';
-
+import { Navigation } from '@/plugins/Navigation'
 
 const QueryParameters = Object.freeze({
   RecommendersSettings: 'rs',
   PaginationCurrentPage: 'p'
 })
 
-
-const TAB_ARTICLES = 'articles';
-const TAB_OVERVIEW = 'overview';
-const TAB_RECOMMENDATIONS = 'recommendations';
+const TAB_ARTICLES = 'articles'
+const TAB_OVERVIEW = 'overview'
+const TAB_RECOMMENDATIONS = 'recommendations'
 
 export default {
   data: () => ({
@@ -290,8 +342,18 @@ export default {
     TAB_RECOMMENDATIONS,
     timevalues: [],
     facets: [],
-    facetTypes: ['newspaper', 'country', 'type', 'language', 'person', 'location', 'topic', 'partner', 'accessRight'],
-    isConfirmDeleteModalVisible: false,
+    facetTypes: [
+      'newspaper',
+      'country',
+      'type',
+      'language',
+      'person',
+      'location',
+      'topic',
+      'partner',
+      'accessRight'
+    ],
+    isConfirmDeleteModalVisible: false
   }),
   components: {
     SearchResultsListItem,
@@ -303,7 +365,7 @@ export default {
     CollectionRecommendationsPanel,
     InfoButton,
     RadioGroup,
-    Modal,
+    Modal
   },
   computed: {
     ...mapStores(useCollectionsStore, useSettingsStore),
@@ -312,38 +374,38 @@ export default {
     },
     displayStyleOptions() {
       return [
-        {value: 'list', text: this.$t('display_button_list')},
-        {value: 'tiles', text: this.$t('display_button_tiles')}
+        { value: 'list', text: this.$t('display_button_list') },
+        { value: 'tiles', text: this.$t('display_button_tiles') }
       ]
     },
     collectionUid() {
-      return this.$route.params.collection_uid;
+      return this.$route.params.collection_uid
     },
     paginationCurrentPage() {
-      return parseInt(this.$route.query[QueryParameters.PaginationCurrentPage], 10) || 1;
+      return parseInt(this.$route.query[QueryParameters.PaginationCurrentPage], 10) || 1
     },
     startYear() {
-      return window.impressoDocumentsYearSpan.firstYear;
+      return window.impressoDocumentsYearSpan.firstYear
     },
     endYear() {
-      return window.impressoDocumentsYearSpan.lastYear;
+      return window.impressoDocumentsYearSpan.lastYear
     },
     filters: mapFilters(),
     searchPageLink() {
       if (!this.collection) {
-        return { name: 'search' };
+        return { name: 'search' }
       }
       return {
         name: 'search',
         query: SearchQuery.serialize({
-          filters: [{ type: 'collection', q: this.collection.uid }],
-        }),
-      };
+          filters: [{ type: 'collection', q: this.collection.uid }]
+        })
+      }
     },
     collections: {
       get() {
         return this.collectionsStore.collections
-      },
+      }
     },
     displayStyle: {
       get() {
@@ -355,24 +417,24 @@ export default {
       },
       set(displayStyle) {
         this.settingsStore.updateSearchDisplayStyle(displayStyle)
-      },
+      }
     },
     tabs() {
       const mainTabs = [
         {
           label: this.$t('tabs.overview'),
-          name: TAB_OVERVIEW,
+          name: TAB_OVERVIEW
         },
         {
           label: this.$tc('tabs.articles', this.paginationTotalRows, {
-            count: this.$n(this.paginationTotalRows),
+            count: this.$n(this.paginationTotalRows)
           }),
-          name: TAB_ARTICLES,
+          name: TAB_ARTICLES
         }
       ]
       const recommendationsTab = {
         label: this.$t('tabs.recommendations'),
-        name: TAB_RECOMMENDATIONS,
+        name: TAB_RECOMMENDATIONS
       }
       return this.$route.params.collection_uid != null
         ? mainTabs.concat([recommendationsTab])
@@ -398,47 +460,52 @@ export default {
       immediate: true,
       async handler({ query, params }) {
         // set active tab
-        const tabIdx = this.tabs.findIndex(d => d.name === query.tab);
-        this.tab = tabIdx !== -1 ? this.tabs[tabIdx] : this.tabs[0];
+        const tabIdx = this.tabs.findIndex(d => d.name === query.tab)
+        this.tab = tabIdx !== -1 ? this.tabs[tabIdx] : this.tabs[0]
         // load collection
         if (params.collection_uid) {
-          this.fetching = true;
+          this.fetching = true
           this.collection = await collectionsService
             .get(this.collectionUid)
-            .then((collection) => new Collection(collection));
-          this.fetching = false;
+            .then(collection => new Collection(collection))
+          this.fetching = false
         }
-        this.loadCollectionItems();
+        this.loadCollectionItems()
         if (this.tab.name === TAB_OVERVIEW) {
-          this.loadTimeline();
+          this.loadTimeline()
           this.facets = []
           for (const type of this.facetTypes) {
             this.facets.push(await this.loadFacets(type))
           }
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     showConfirmDeleteModal() {
-      this.isConfirmDeleteModalVisible = true;
+      this.isConfirmDeleteModalVisible = true
     },
     hideConfirmDeleteModal() {
-      this.isConfirmDeleteModalVisible = false;
+      this.isConfirmDeleteModalVisible = false
     },
     handleExportCollection() {
-      exporterService.create({
-        description: this.collectionUid,
-      }, {
-        query: {
-          group_by: 'articles',
-          filters: [{
-            type: 'collection',
-            q: [this.collectionUid]
-          }],
-          format: 'csv',
+      exporterService.create(
+        {
+          description: this.collectionUid
         },
-      })
+        {
+          query: {
+            group_by: 'articles',
+            filters: [
+              {
+                type: 'collection',
+                q: [this.collectionUid]
+              }
+            ],
+            format: 'csv'
+          }
+        }
+      )
     },
     handleRecommendersSettingsUpdated(settings) {
       this.recommendersSettings = settings
@@ -450,43 +517,49 @@ export default {
           ...this.$route.query,
           ...route.query
         }
-      };
+      }
     },
     loadCollectionItems() {
-      this.fetching = true;
+      this.fetching = true
       const query = {
         resolve: 'item',
         page: this.paginationCurrentPage,
-        limit: this.paginationPerPage,
+        limit: this.paginationPerPage
         // TODO Uncomment the following line when service is ready
         // order_by: context.state.orderBy,
       }
       if (this.collectionUid) {
         query.collection_uids = [this.collectionUid]
       }
-      return collectionsItemsService
-        .find({ query })
-        .then(({ data, total }) => {
-          this.paginationTotalRows = total
-          this.fetching = false
-          this.articles = data.map(({ item }) => {
-            if (item instanceof Article) {
-              return item;
-            }
-            return new Article(item);
-          })
+      return collectionsItemsService.find({ query }).then(({ data, total }) => {
+        this.paginationTotalRows = total
+        this.fetching = false
+        this.articles = data.map(({ item }) => {
+          if (item instanceof Article) {
+            return item
+          }
+          return new Article(item)
         })
+      })
     },
     gotoArticle(article) {
+      if (
+        article?.issue == null ||
+        [null, '', undefined].includes(article?.issue?.uid) ||
+        [null, '', undefined].includes(article?.uid)
+      ) {
+        console.error('No issue to go to page')
+        return
+      }
       this.$router.push({
         name: 'article',
         params: {
           issue_uid: article.issue.uid,
           page_number: article.pages[0]?.num,
           page_uid: article.pages[0]?.uid,
-          article_uid: article.uid,
-        },
-      });
+          article_uid: article.uid
+        }
+      })
     },
     remove(collection) {
       this.collectionsStore
@@ -496,83 +569,88 @@ export default {
     },
     save(collection) {
       if (collection.uid) {
-        this.collectionsStore.editCollection({
-          uid: collection.uid,
-          name: collection.name,
-          description: collection.description,
-        }).then((res) => {
-          const idx = this.collections.findIndex(c => c.uid === res.uid);
-          if (idx >= 0 && this.collections[idx]) {
-            this.collections[idx].name = res.name;
-            this.collections[idx].description = res.description;
-          }
-        });
+        this.collectionsStore
+          .editCollection({
+            uid: collection.uid,
+            name: collection.name,
+            description: collection.description
+          })
+          .then(res => {
+            const idx = this.collections.findIndex(c => c.uid === res.uid)
+            if (idx >= 0 && this.collections[idx]) {
+              this.collections[idx].name = res.name
+              this.collections[idx].description = res.description
+            }
+          })
       } else {
-        this.collectionsStore.addCollection({
-          name: collection.name,
-          description: collection.description,
-        }).then((res) => {
-          this.fetch().then(() => {
-            this.select(new Collection(res.data)); // select the newly created item
-          });
-        });
+        this.collectionsStore
+          .addCollection({
+            name: collection.name,
+            description: collection.description
+          })
+          .then(res => {
+            this.fetch().then(() => {
+              this.select(new Collection(res.data)) // select the newly created item
+            })
+          })
       }
-      this.$refs.edit_collection.hide(true);
+      this.$refs.edit_collection.hide(true)
     },
     sortBy(data, field) {
       data.sort((a, b) => {
         if (a[field] < b[field]) {
-          return 1;
+          return 1
         } else if (a[field] > b[field]) {
-          return -1;
+          return -1
         }
-        return 0;
-      });
-      return data;
+        return 0
+      })
+      return data
     },
     onInputPagination(p = 1) {
       this.$navigation.updateQueryParametersWithHistory({
-        [QueryParameters.PaginationCurrentPage]: p,
-      });
+        [QueryParameters.PaginationCurrentPage]: p
+      })
     },
     applyFilter() {
       const newFilter = {
         type: 'collection',
-        q: this.collection.uid,
+        q: this.collection.uid
       }
-      this.filters = this.filters
-        .filter(f => !containsFilter(newFilter)(f))
-        .concat([newFilter]);
+      this.filters = this.filters.filter(f => !containsFilter(newFilter)(f)).concat([newFilter])
     },
     loadTimeline() {
-      this.isTimelineLoading = true;
-      return this.collectionsStore.loadTimeline(this.$route.params.collection_uid)
-        .then((values) => {
-          this.timevalues = values;
-          this.isTimelineLoading = false;
-        });
+      this.isTimelineLoading = true
+      return this.collectionsStore.loadTimeline(this.$route.params.collection_uid).then(values => {
+        this.timevalues = values
+        this.isTimelineLoading = false
+      })
     },
     loadFacets(type) {
-      return searchFacetsService.get(type, {
-        query: {
-          filters: [{
-            type: 'collection',
-            q: this.collectionUid,
-          }],
-          // group_by: 'articles',
-        }
-      }).then((type) => new Facet(type));
-    },
-  },
-};
+      return searchFacetsService
+        .get(type, {
+          query: {
+            filters: [
+              {
+                type: 'collection',
+                q: this.collectionUid
+              }
+            ]
+            // group_by: 'articles',
+          }
+        })
+        .then(type => new Facet(type))
+    }
+  }
+}
 </script>
 
 <style lang="scss">
 .modal-edit {
   min-width: 400px;
 }
-.collection-recommendation{
-  overflow:hidden;
+.collection-recommendation {
+  overflow: hidden;
 }
 .loading {
   opacity: 0.5;
diff --git a/src/components/modules/lists/ArticleItem.vue b/src/components/modules/lists/ArticleItem.vue
index 532d374f..7ff163aa 100644
--- a/src/components/modules/lists/ArticleItem.vue
+++ b/src/components/modules/lists/ArticleItem.vue
@@ -13,28 +13,37 @@
       </div>
     </slot>
     <div v-if="showMeta" class="article-meta">
-      <router-link :to="{ name: 'newspaper', params: { newspaper_uid: item?.newspaper?.uid } }"
-        class="article-newspaper">
+      <router-link
+        :to="{ name: 'newspaper', params: { newspaper_uid: item?.newspaper?.uid } }"
+        class="article-newspaper"
+      >
         {{ item.newspaper.name }}
       </router-link>
       <item-selector :uid="item?.newspaper?.uid" :item="item?.newspaper" type="newspaper" /> &nbsp;
       <span data-testid="article-date">{{ item.date ? $d(item.date, 'long') : '' }}</span>
       <span data-testid="article-pages-count"> – {{ pages }}</span>
-      <div data-testid="article-access-rights">
+      <div data-testid="article-access-rights" v-if="item.dataProvider != null">
         {{ $t(`buckets.accessRight.${item.accessRight}`) }} &mdash; {{ $t('providedBy') }}
-        <ItemSelector :uid="item.dataProvider" :label="$t(`buckets.dataProvider.${item.dataProvider}`)"
-          :item="{ uid: item.dataProvider }" type="partner" />
+        <ItemSelector
+          :uid="item.dataProvider"
+          :label="$t(`buckets.dataProvider.${item.dataProvider}`)"
+          :item="{ uid: item.dataProvider }"
+          type="partner"
+        />
       </div>
     </div>
 
-    <div v-if="showExcerpt && !item?.matches?.length && item.type !== 'image'" class="article-excerpt mt-2">
+    <div
+      v-if="showExcerpt && !item?.matches?.length && item.type !== 'image'"
+      class="article-excerpt mt-2"
+    >
       <span class="article-excerpt">{{ item.excerpt }}</span>
       <b-badge v-if="showSize || showType" variant="light" class="mr-1 pt-1">
         <span v-if="showType && item.type">{{ $t(`buckets.type.${item.type}`) }} | </span>
         <span v-if="showSize">
           <span v-if="item.size > 1200">{{
             $t('readingTime', { min: parseInt(item.size / 1200) })
-            }}</span>
+          }}</span>
           <span v-else>{{ $t('reducedReadingTime') }}</span>
         </span>
       </b-badge>
@@ -47,7 +56,12 @@
       <div v-if="item.locations?.length" data-testid="article-locations">
         <b-badge variant="light" class="mr-1 small-caps bg-medium">locations</b-badge>
         <span class="small" v-for="(location, idx) in item.locations" v-bind:key="idx">
-          <item-selector :uid="location.uid" :label="location.name" :item="location" type="location" />
+          <item-selector
+            :uid="location.uid"
+            :label="location.name"
+            :item="location"
+            type="location"
+          />
           <span v-if="idx !== item.locations.length - 1">, </span>
         </span>
       </div>
@@ -59,19 +73,34 @@
         </span>
       </div>
     </div>
-    <div v-if="showTopics" class="small article-extras article-topics my-2" data-testid="article-topics">
+    <div
+      v-if="showTopics"
+      class="small article-extras article-topics my-2"
+      data-testid="article-topics"
+    >
       <b-badge variant="light" class="mr-1 small-caps bg-medium">topics</b-badge>
       <b-row v-if="item.topics.length">
         <b-col lg="6" xl="4" class="my-1" v-for="(rel, idx) in item.topics" v-bind:key="idx">
-          <viz-bar show-border show-percent :percent="rel.relevance * 100" :uid="rel.topic.uid" :item="rel.topic"
-            type="topic" />
+          <viz-bar
+            show-border
+            show-percent
+            :percent="rel.relevance * 100"
+            :uid="rel.topic.uid"
+            :item="rel.topic"
+            type="topic"
+          />
         </b-col>
       </b-row>
     </div>
     <div v-if="showMatches">
       <ul v-if="item.matches.length" class="article-matches d-flex flex-wrap mt-1 p-0">
-        <li class="p-1 mb-2 mr-2 me-2 rounded" v-for="(match, i) in item.matches" v-bind:key="i" v-html="match.fragment"
-          v-show="match.fragment.trim().length > 0" />
+        <li
+          class="p-1 mb-2 mr-2 me-2 rounded"
+          v-for="(match, i) in item.matches"
+          v-bind:key="i"
+          v-html="match.fragment"
+          v-show="match.fragment.trim().length > 0"
+        />
       </ul>
     </div>
     <slot name="footer"></slot>
@@ -87,7 +116,7 @@ export default {
   props: {
     item: {
       type: Object,
-      required: true,
+      required: true
     },
     showExcerpt: Boolean,
     showMatches: Boolean,
@@ -99,30 +128,32 @@ export default {
     showType: Boolean,
     showEntities: Boolean,
     showTopics: Boolean,
-    asReference: Boolean,
+    asReference: Boolean
   },
   computed: {
     pages() {
-      return this.$tc('pp', this.item.nbPages, { pages: this.item.pages?.map(d => d.num)?.join(',') })
+      return this.$tc('pp', this.item.nbPages, {
+        pages: this.item.pages?.map(d => d.num)?.join(',')
+      })
     },
     routerLinkUrl() {
       const issueUid = this.item.issue ? this.item.issue.uid : this.item?.uid?.match(/(^.+)-i/)?.[1]
       return {
         name: 'issue-viewer',
         params: {
-          issue_uid: issueUid,
+          issue_uid: issueUid
         },
         query: {
           ...this.$route.query,
           articleId: this.item.uid ? getShortArticleId(this.item.uid) : undefined,
-          p: this.item.pages?.[0]?.num,
-        },
+          p: this.item.pages?.[0]?.num
+        }
       }
     },
     routerLinkParams() {
       const params = {
         article_uid: this.item.uid,
-        page_uid: this.item.pages[0]?.uid,
+        page_uid: this.item.pages[0]?.uid
       }
       if (this.item.issue) {
         params.issue_uid = this.item.issue.uid
@@ -130,20 +161,20 @@ export default {
         params.issue_uid = this.item.uid.match(/(^.+)-i/)[1]
       }
       return params
-    },
+    }
   },
   methods: {
     onClick() {
       this.$emit('click:title', {
         name: 'article',
-        params: this.routerLinkParams,
+        params: this.routerLinkParams
       })
-    },
+    }
   },
   components: {
     ItemSelector,
-    VizBar,
-  },
+    VizBar
+  }
 }
 </script>
 
@@ -164,7 +195,6 @@ export default {
 }
 
 .ArticleItem.reference {
-
   h2,
   .article-meta {
     font-size: inherit;
@@ -190,7 +220,7 @@ export default {
   }
 }
 
-.ArticleItem .article-topics>div {
+.ArticleItem .article-topics > div {
   columns: 4 270px;
 
   div {
diff --git a/src/components/modules/lists/ImageItem.vue b/src/components/modules/lists/ImageItem.vue
index 92edf172..0fe2c089 100644
--- a/src/components/modules/lists/ImageItem.vue
+++ b/src/components/modules/lists/ImageItem.vue
@@ -1,16 +1,18 @@
 <template lang="html">
   <div class="image-item" @click="gotoPage">
-    <img-authentified v-if="shouldForwardAuthentication"
+    <img-authentified
+      v-if="shouldForwardAuthentication"
       :height="height"
       class="image"
       :src="srcCORSFriendly"
       :headers="headers"
     >
       <template v-slot:loading>
-        <LoadingIndicator/>
+        <LoadingIndicator />
       </template>
     </img-authentified>
-    <img v-else-if="hasValidSrc"
+    <img
+      v-else-if="hasValidSrc"
       :height="height"
       class="image"
       :class="imageClass"
@@ -21,11 +23,15 @@
     <div v-if="showMeta">
       <p v-if="hasTitle" class="item-title p-2 m-0">{{ item.title }}</p>
       <div class="p-2 articles-meta">
-        <router-link :to="{ name: 'newspaper', params: { newspaper_uid: item?.newspaper?.uid ?? 'na' }}" class="article-newspaper">
-          {{ item?.newspaper?.name}}
+        <router-link
+          :to="{ name: 'newspaper', params: { newspaper_uid: item?.newspaper?.uid ?? 'na' } }"
+          class="article-newspaper"
+        >
+          {{ item?.newspaper?.name }}
         </router-link>
-        <item-selector :uid="item?.newspaper?.uid" :item="item?.newspaper" type="newspaper"/> &nbsp;
-        <span class="date">{{ $d(item?.date ?? 0, "long") }}</span>
+        <item-selector :uid="item?.newspaper?.uid" :item="item?.newspaper" type="newspaper" />
+        &nbsp;
+        <span class="date">{{ $d(item?.date ?? 0, 'long') }}</span>
         <span> – {{ pages }}</span>
       </div>
     </div>
@@ -34,10 +40,10 @@
 </template>
 
 <script>
-import ItemSelector from '@/components/modules/ItemSelector.vue';
-import ImgAuthentified from '@/components/base/ImgAuthentified.vue';
-import LoadingIndicator from '@/components/modules/LoadingIndicator.vue';
-import { image } from 'd3';
+import ItemSelector from '@/components/modules/ItemSelector.vue'
+import ImgAuthentified from '@/components/base/ImgAuthentified.vue'
+import LoadingIndicator from '@/components/modules/LoadingIndicator.vue'
+import { image } from 'd3'
 
 export default {
   props: {
@@ -57,75 +63,84 @@ export default {
         'img-fluid': this.fluidGrow,
         'w-100': this.fluidGrow,
         'mx-auto': this.center,
-        'd-block': this.center,
-      };
+        'd-block': this.center
+      }
     },
     pages() {
       return this.$tc('pp', this.item?.nbPages ?? 0, {
-        pages: this.item?.pages?.map(d => d.num).join(',') ?? '',
-      });
+        pages: this.item?.pages?.map(d => d.num).join(',') ?? ''
+      })
     },
     hasTitle() {
-      if(!this.item) {
-        return false;
+      if (!this.item) {
+        return false
       }
-      return typeof this.item.title === 'string' && this.item.title.length > 0;
+      return typeof this.item.title === 'string' && this.item.title.length > 0
     },
     hasValidSrc() {
-      if(!this.item) {
-        return false;
+      if (!this.item) {
+        return false
       }
-      return Array.isArray(this.item.regions) && this.item.regions.length > 0;
+      return Array.isArray(this.item.regions) && this.item.regions.length > 0
     },
     srcCORSFriendly() {
-      if (import.meta.env.NODE_ENV === 'production' && this.hasValidSrc && this.item.regions[0].iiifFragment.indexOf(import.meta.env.VITE_BASE_URL) === 0) {
+      if (
+        import.meta.env.NODE_ENV === 'production' &&
+        this.hasValidSrc &&
+        this.item.regions[0].iiifFragment.indexOf(import.meta.env.VITE_BASE_URL) === 0
+      ) {
         return this.src.replace(import.meta.env.VITE_BASE_URL, window.location.origin)
       } else if (import.meta.env.NODE_ENV !== 'production') {
-        console.debug('[ImageItem] Cannot test srcCORSFriendly in development mode :( for item:', this.item.uid)
+        console.debug(
+          '[ImageItem] Cannot test srcCORSFriendly in development mode :( for item:',
+          this.item.uid
+        )
       }
       return this.src
     },
     src() {
-      return this.hasValidSrc
-        ? this.item.regions[0].iiifFragment
-        : null;
+      return this.hasValidSrc ? this.item.regions[0].iiifFragment : null
     },
     shouldForwardAuthentication() {
       if (this.hasValidSrc) {
         return this.item.regions[0].iiifFragment.indexOf(import.meta.env.VITE_BASE_URL) === 0
       }
       return false
-    },
+    }
   },
   methods: {
     gotoPage() {
+      if (this.item == null) {
+        console.error('No item to go to page')
+        return
+      }
       const params = {
         issue_uid: this.item.issue?.uid || this.item.uid.match(/(^.+)-i/)[1],
-        page_uid: this.item.pages[0]?.uid,
-      };
-      console.info('gotoPage', params, this.item.article);
+        page_uid: this.item.pages[0]?.uid
+      }
+      console.info('gotoPage', params, this.item.article)
       if (this.item.article) {
         this.$router.push({
           name: 'article',
           params: {
             ...params,
-            article_uid: this.item.article.uid,
-          },
-        });
+            article_uid: this.item.article.uid
+          }
+        })
       } else {
         this.$router.push({
           name: 'page',
-          params,
-        });
+          params
+        })
       }
-    },
+    }
   },
   components: {
     ItemSelector,
     ImgAuthentified,
-    LoadingIndicator,
-  },
-};
+    LoadingIndicator
+  }
+}
 </script>
 
 <style lang="scss">
@@ -138,10 +153,10 @@ export default {
     text-transform: lowercase;
     font-variant: small-caps;
   }
-  .articles-meta{
+  .articles-meta {
     font-size: 14px;
   }
-  .item-title{
+  .item-title {
     background: #eff0f0;
   }
   figcaption {