diff --git a/assets/css/app.scss b/assets/css/app.scss
index 0ddb922..5a69a3e 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -525,7 +525,26 @@ section[role="main-content"]{
     }
   }
 
-
+  #biblio{
+    .router-link-active{
+      font-weight: 600;
+    }
+    ul.item-list{
+      margin:0;
+      padding:0;
+      li{
+        padding:0;
+        margin:0 0 1.5em 0;
+        h2{
+          margin:0;
+          @include title2black;
+        }
+        p{
+          margin:0;
+        }
+      }
+    }
+  }
 }
 
 footer[role="tools"]{
diff --git a/src/pages/Bibliographie.vue b/src/pages/Bibliographie.vue
index efa21d2..dd8545e 100644
--- a/src/pages/Bibliographie.vue
+++ b/src/pages/Bibliographie.vue
@@ -1,43 +1,114 @@
 <template>
-  <div
-    id="bibliographie"
-    class="full-width"
-  >
-    <h1>Bibliographie</h1>
-  </div>
+  <MainContentLayout id="biblio">
+    <template v-if="!content" #header>
+      <span>Loading ...</span>
+    </template>
+    <template #header>
+      <h1>
+        <router-link :to="{ name:'bibliographie'}">Bibliographie</router-link>
+      </h1>
+      <nav>
+        <ul>
+          <li>
+            <router-link
+              :to="{ name:'bibliographie', params: { type: 'expressions'}}"
+            >
+              Expressions
+            </router-link>
+          </li>
+          <li>
+            <router-link
+              :to="{ name:'bibliographie', params: { type: 'manifestations'}}"
+            >
+              Manifestations
+            </router-link>
+          </li>
+        </ul>
+      </nav>
+    </template>
+
+    <!-- default slot -->
+    <!-- expressions or manifestations list -->
+    <template v-if="!this.uuid">
+      <ul class="item-list">
+        <li v-for="item in content" :key="item.uuid">
+          <h2>
+            <router-link
+              :to="{ name:'bibliographieItem', params:{ type:type, uuid:item.uuid } }"
+            >
+              {{ item.authors }}
+            </router-link>
+          </h2>
+          <p class="date">{{ item.dates }}</p>
+          <p class="titles">{{ item.titles }}</p>
+        </li>
+      </ul>
+    </template>
+    <!-- or item -->
+    <template v-else>
+      <div class="biblio-item">
+        <h2>{{ content.authors }}</h2>
+        <p v-if="content.dates" class="date">{{ content.dates }}</p>
+        <p class="titles">{{ content.titles }}</p>
+        <ul vi-if="content.manifestations.length" class="item-list">
+          <li v-for="item in content.manifestations" :key="item.uuid">
+            <router-link
+              :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:item.uuid } }"
+              v-html="item.tei"
+            />
+          </li>
+        </ul>
+      </div>
+    </template>
+    <template #nav />
+  </MainContentLayout>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
 
 export default {
   name: 'Bibliographie',
+  components: {
+    MainContentLayout
+  },
   metaInfo: {
     title: 'Bibliographie'
   },
+  props: {
+    type: String,
+    uuid: String
+  },
   data: () => ({
-
+    content: Array
   }),
-  beforeCreate () {
-    // ?_format=json
-    REST.get(`${window.apipath}/bibliography/works`, {})
-      .then(({ data }) => {
-        console.log('Biblio 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()
-        // }
-      })
-      .catch((error) => {
-        console.warn('Issue with operum', error)
-        Promise.reject(error)
-      })
+  watch: {
+    $route (to, from) {
+      this.getContent()
+    }
+  },
+  created () {
+    // this.type = this.$route.params.type || 'expressions'
+    // this.uuid = this.$route.params.id || null
+    this.getContent()
+  },
+  methods: {
+    getContent () {
+      // ?_format=json
+      REST.get(`${window.apipath}/bibliography/${this.type}/${this.uuid || ''}`, {})
+        .then(({ data }) => {
+          console.log('Biblio REST: data', data)
+          if (data.content) {
+            this.content = data.content
+          }
+        })
+        .catch((error) => {
+          console.warn('Issue with bibliographie', error)
+          Promise.reject(error)
+        })
+    }
   }
 }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index da3b7c8..908a606 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -80,9 +80,20 @@ const routes = [
     component: Operum
   },
   {
-    name: 'bibliographie',
     path: '/bibliographie',
-    component: Bibliographie
+    redirect: '/bibliographie/expressions'
+  },
+  {
+    name: 'bibliographie',
+    path: '/bibliographie/:type',
+    component: Bibliographie,
+    props: true
+  },
+  {
+    name: 'bibliographieItem',
+    path: '/bibliographie/:type/:uuid',
+    component: Bibliographie,
+    props: true
   },
   {
     name: 'notfound',