diff --git a/src/components/Content/CorpusItem.vue b/src/components/Content/CorpusItem.vue
index 41b2e71..70f7ba0 100644
--- a/src/components/Content/CorpusItem.vue
+++ b/src/components/Content/CorpusItem.vue
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'CorpusItems',
+  name: 'CorpusItem',
   props: {
     item: {
       type: Object,
diff --git a/src/components/Content/NominumItem.vue b/src/components/Content/NominumItem.vue
new file mode 100644
index 0000000..55e351b
--- /dev/null
+++ b/src/components/Content/NominumItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <article class="nominum item">
+    <header>
+      <h1>
+        <a
+          :href="item.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+          v-html="item.title"
+        />
+      </h1>
+    </header>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'NominumItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data: () => ({
+
+  }),
+  methods: {
+    onclick () {
+      console.log('clicked on nominum item', this.item)
+      this.$router.push({
+        name: `nominumItem`,
+        query: { id: this.item.uuid }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/Content/OperumItem.vue b/src/components/Content/OperumItem.vue
new file mode 100644
index 0000000..7197dc8
--- /dev/null
+++ b/src/components/Content/OperumItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <article class="operum item">
+    <header>
+      <h1>
+        <a
+          :href="item.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+          v-html="item.title"
+        />
+      </h1>
+    </header>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'OperumItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data: () => ({
+
+  }),
+  methods: {
+    onclick () {
+      console.log('clicked on Operum item', this.item)
+      this.$router.push({
+        name: `operuumItem`,
+        query: { id: this.item.uuid }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/pages/Nominum.vue b/src/pages/Nominum.vue
index 33ab434..1326b52 100644
--- a/src/pages/Nominum.vue
+++ b/src/pages/Nominum.vue
@@ -5,15 +5,26 @@
   >
     <h1>Nominum</h1>
     <span v-if="!items.length">Loading ...</span>
+    <div v-else class="item-list">
+      <ul>
+        <li v-for="item in items" v-bind:key="item.url">
+          <NominumItem :item="item" />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import NominumItem from '../components/Content/NominumItem'
 
 export default {
   name: 'Nominum',
+  components: {
+    NominumItem
+  },
   data: () => ({
     items: []
 
@@ -24,15 +35,9 @@ export default {
     REST.get(`/indexNominum`, {})
       .then(({ data }) => {
         console.log('nominum REST: data', data)
-        // if(data.length){
-        //   commit('setItems',data)
-        //   // console.log('items.length', this.items.length);
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.loaded()
-        // }else{
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.complete()
-        // }
+        if (data.content.length) {
+          this.items = data.content
+        }
       })
       .catch((error) => {
         console.warn('Issue with nominum', error)
diff --git a/src/pages/Operum.vue b/src/pages/Operum.vue
index a992e19..2fc00bd 100644
--- a/src/pages/Operum.vue
+++ b/src/pages/Operum.vue
@@ -5,15 +5,26 @@
   >
     <h1>Operum</h1>
     <span v-if="!items.length">Loading ...</span>
+    <div v-else class="item-list">
+      <ul>
+        <li v-for="item in items" v-bind:key="item.url">
+          <OperumItem :item="item" />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import OperumItem from '../components/Content/OperumItem'
 
 export default {
   name: 'Operum',
+  components: {
+    OperumItem
+  },
   data: () => ({
     items: []
 
@@ -24,15 +35,9 @@ export default {
     REST.get(`/indexOperum`, {})
       .then(({ data }) => {
         console.log('operum REST: data', data)
-        // if(data.length){
-        //   commit('setItems',data)
-        //   // console.log('items.length', this.items.length);
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.loaded()
-        // }else{
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.complete()
-        // }
+        if (data.content.length) {
+          this.items = data.content
+        }
       })
       .catch((error) => {
         console.warn('Issue with operum', error)
diff --git a/src/router/index.js b/src/router/index.js
index 7e257da..8b3c09b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,8 +4,10 @@ import Router from 'vue-router'
 import Home from 'pages/Home'
 import Corpus from 'pages/Corpus'
 import Nominum from 'pages/Nominum'
+import NominumItem from 'components/Content/NominumItem'
 import Locorum from 'pages/Locorum'
 import Operum from 'pages/Operum'
+import OperumItem from 'components/Content/OperumItem'
 import Bibliographie from 'pages/Bibliographie'
 
 Vue.use(Router)
@@ -26,6 +28,11 @@ const routes = [
     path: '/nominum',
     component: Nominum
   },
+  {
+    name: 'nominumItem',
+    path: '/nominum/:id',
+    component: NominumItem
+  },
   {
     name: 'locorum',
     path: '/locorum',
@@ -36,6 +43,11 @@ const routes = [
     path: '/operum',
     component: Operum
   },
+  {
+    name: 'operumItem',
+    path: '/operum/:id',
+    component: OperumItem
+  },
   {
     name: 'bibliographie',
     path: '/bibliographie',