diff --git a/layouts/default.vue b/layouts/default.vue
index 8e78d1eef03df0624ff8b5e8c87d34052b761528..e4697c1341ac39b59c7f48d32eb57391cf3e3dee 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -11,12 +11,17 @@ export default {
     return {
       breadcrumb: [],
       menus : [
+          {
+            title: 'Toile de confiance',
+            items : [
+              {path: '/inout',title: 'Entrées et sorties'},
+              {path: '/membres',title: 'Membres'}
+          ]},
           {
           title: 'En Développement',
           items : [
               {path: '/chartjs',title: 'ChartJS'},
-              {path: '/membres',title: 'Membres'}
-          ]}
+          ]},
       ]
     }
   },
diff --git a/pages/index.vue b/pages/index.vue
index 354fa884e0fdbef6352463b3068c40eadb3388be..f37e317ca7b61bb23826731b43f849314f123d12 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,25 +1,11 @@
 <template>
 <main class="container">
-  <h2 class="display-2 text-center mb-5">Page d'accueil</h2>
-  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" class="d-block mx-auto" />
-  <div class="row text-center" v-if="!$apollo.queries.newMembers.loading">
-    <div class="col-lg-6">
-      <div>
-        <h2 class="h4">Bienvenue à</h2>
-        <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
-      </div>
-    </div>
-    <div class="col-lg-6">
-      <h2 class="h4">Au revoir à</h2>
-      <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
-    </div>
-  </div>
+  <h2 class="text-center mb-5 font-weight-light">Bienvenue</h2>
+
 </main>
 </template>
 
 <script>
-import gql from 'graphql-tag'
-
 export default {
   data() {
     // Variables locales
@@ -30,56 +16,7 @@ export default {
           text: 'Accueil',
           active: true
         }
-      ],
-      today : Math.round(Date.now() /1000)
-    }
-  },
-  // Fonctions locales
-  methods: {
-
-  },
-  apollo: {
-    newMembers : {
-      query: gql`query LastEvents($start: Int64, $end: Int64) {
-        membersCount(start: $start, end: $end) {
-          idList {
-            id {
-              pubkey
-              uid
-              status
-              hash
-              limitDate
-              received_certifications {
-                limit
-              }
-            }
-            inOut
-          }
-        }
-      } `,
-      variables(){return {start:this.today-86400*2,end:this.today}},
-      update (data) {
-        let result = {'entrees':[],'sorties':[]}
-
-        for (let i = 0; i < data.membersCount.length; i++) {
-          let member = data.membersCount[i].idList[0]
-          member.id.inOut = member.inOut
-
-          if (member.inOut || member.id.status=='MEMBER') {
-            if (result['entrees'].filter(function(e) { return e.hash === member.id.hash; }).length == 0) {
-              result['entrees'].push(member.id)
-            }
-          } else {
-            result['sorties'].push(member.id)
-          }
-        }
-
-        for (let list in result) {
-          result[list].sort((a, b) => (a.uid.toLowerCase() > b.uid.toLowerCase()) ? 1 : -1)
-        }
-        
-        return result
-      }
+      ]
     }
   },
   mounted () {
diff --git a/pages/inout.vue b/pages/inout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..63ed00b0eed18fc99c5ac42c23aa14c9a818a1a9
--- /dev/null
+++ b/pages/inout.vue
@@ -0,0 +1,94 @@
+<template>
+<main class="container">
+  <h2 class="text-center mb-5 font-weight-light">Entrées et sorties de la toile de confiance des 2 derniers jours</h2>
+  <NavigationLoader :isLoading="$apollo.queries.newMembers.loading" class="d-block mx-auto" />
+  <div class="row text-center" v-if="!$apollo.queries.newMembers.loading">
+    <div class="col-lg-6">
+      <div>
+        <h2 class="h4 text-success">Bienvenue à</h2>
+        <MemberList :members="newMembers['entrees']" :displayPubkey="false" :displayHead="false" />
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <h2 class="h4 text-danger">Au revoir à</h2>
+      <MemberList :members="newMembers['sorties']" :displayPubkey="false" :displayHead="false" />
+    </div>
+  </div>
+</main>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+
+export default {
+  data() {
+    // Variables locales
+    return {
+      // Fil d'ariane
+      breadcrumb: [
+        {
+          text: 'Accueil',
+          to: '/'
+        },
+        {
+          text: 'Entrées et sorties',
+          active: true
+        }
+      ],
+      today : Math.round(Date.now() /1000)
+    }
+  },
+  // Fonctions locales
+  methods: {
+
+  },
+  apollo: {
+    newMembers : {
+      query: gql`query LastEvents($start: Int64, $end: Int64) {
+        membersCount(start: $start, end: $end) {
+          idList {
+            id {
+              pubkey
+              uid
+              status
+              hash
+              limitDate
+              received_certifications {
+                limit
+              }
+            }
+            inOut
+          }
+        }
+      } `,
+      variables(){return {start:this.today-86400*2,end:this.today}},
+      update (data) {
+        let result = {'entrees':[],'sorties':[]}
+
+        for (let i = 0; i < data.membersCount.length; i++) {
+          let member = data.membersCount[i].idList[0]
+          member.id.inOut = member.inOut
+
+          if (member.inOut || member.id.status=='MEMBER') {
+            if (result['entrees'].filter(function(e) { return e.hash === member.id.hash; }).length == 0) {
+              result['entrees'].push(member.id)
+            }
+          } else {
+            result['sorties'].push(member.id)
+          }
+        }
+
+        for (let list in result) {
+          result[list].sort((a, b) => (a.uid.toLowerCase() > b.uid.toLowerCase()) ? 1 : -1)
+        }
+        
+        return result
+      }
+    }
+  },
+  mounted () {
+    // Mise à jour du fil d'ariane au chargement
+    $nuxt.$emit('changeRoute',this.breadcrumb)
+  }
+}
+</script>
\ No newline at end of file