diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index c10ef5122..b08421e2e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -1,5 +1,8 @@
 <template>
    <div id="visgraph"></div>
+   <!--
+   <button class="btn btn-outline-primary" @click="refreshNetwork">refresh</button>
+   -->
 </template>
 
 <script>
@@ -14,8 +17,9 @@ export default {
       }
    },
    computed: {
-      ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds']),
+      //not used ...mapState(['persons', 'households', 'courses', 'relationships', 'householdLoadingIds', 'courseLoadedIds']),
       ...mapGetters(['nodes', 'edges']),
+
       visgraph_data() {
          console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
          return {
@@ -24,12 +28,12 @@ export default {
          }
       },
       refreshNetwork() {  // B
-         console.log('refresh network')
-         window.network.setData(this.visgraph_data)
+         console.log('--- refresh network')
+         window.network.setData(this.visgraph_data) // <-- Error: [vuex] do not mutate vuex store state outside mutation handlers.
       }
    },
    mounted() {
-      console.log('mounted: init graph')
+      console.log('=== mounted: init graph')
       this.initGraph()
    },
    methods: {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
index 50aafc04b..957e01fbc 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
@@ -78,14 +78,14 @@ const getHouseholdByPerson = (person) => {
 }
 
 /**
- * @function getCourseByPerson
+ * @function getCoursesByPerson
  * @param person
  * @returns {Promise<Response>}
  */
-const getCourseByPerson = (person) => {
-    //console.log('getCourseByPerson', person.id)
+const getCoursesByPerson = (person) => {
+    //console.log('getCoursesByPerson', person._id)
     return getFetch(
-        `/api/1.0/person/accompanying-course/by-person/${person.id}.json`)
+        `/api/1.0/person/accompanying-course/by-person/${person._id}.json`)
 }
 
 /**
@@ -119,7 +119,7 @@ const postRelationship = (person) => {
 
 export {
     getHouseholdByPerson,
-    getCourseByPerson,
+    getCoursesByPerson,
     getRelationship,
     postRelationship
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
index 950f5533c..77a01af4a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
@@ -3,7 +3,8 @@
 const visMessages = {
     fr: {
         visgraph: {
-
+            'Course': 'Parcours',
+            'Household': 'Ménage',
         }
     }
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
index 43046cdbb..288bc1f94 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/store.js
@@ -1,5 +1,6 @@
 import { createStore } from 'vuex'
-import { getHouseholdByPerson, getCourseByPerson, getRelationship } from './api'
+import { getHouseholdByPerson, getCoursesByPerson, getRelationship } from './api'
+import { adapt2vis } from './vis-network'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -11,53 +12,66 @@ const store = createStore({
         courses: [],
         relationships: [],
         householdLoadingIds: [],
+        courseLoadedIds: []
     },
     getters: {
         nodes(state) {
-            let nodes = [];
+            let nodes = []
             state.persons.forEach(p => {
                 nodes.push(p)
             })
             state.households.forEach(h => {
                 nodes.push(h)
             })
+            state.courses.forEach(c => {
+                nodes.push(c)
+            })
             return nodes
         },
         edges(state) {
-            return []
+            let edges = []
+            state.relationships.forEach(r => {
+                edges.push(r)
+            })
+            return edges
         },
         isHouseholdLoading: (state) => (household_id) => {
-            return state.householdLoadingIds.includes(household_id);
+            return state.householdLoadingIds.includes(household_id)
+        },
+        isCourseLoaded: (state) => (course_id) => {
+            return state.courseLoadedIds.includes(course_id)
         },
     },
     mutations: {
         addPerson(state, person) {
-            console.log('addPerson', person.id)
-            person.label = person.text // vis need label
-            person.id = `person_${person.id}` // vis need unique id
-            state.persons.push(person)
+            console.log('+ addPerson', person.id)
+            state.persons.push(adapt2vis(person))
         },
         addHousehold(state, household) {
-            console.log('addHousehold', household.id)
-            household.label = `Ménage n° ${household.id}` // vis need label
-            household.id = `household_${household.id}` // vis need unique id
-            state.households.push(household)
+            console.log('+ addHousehold', household.id)
+            state.households.push(adapt2vis(household))
         },
         addCourse(state, course) {
-           console.log('addCourse', course.id)
-           state.courses.push(course)
+           console.log('+ addCourse', course.id)
+           state.courses.push(adapt2vis(course))
         },
         addRelationship(state, relationship) {
-           console.log('addRelationship', relationship.id)
+           console.log('+ addRelationship', relationship)
            state.relationships.push(relationship)
         },
         markHouseholdLoading(state, id) {
-            console.log('..loading', id)
+            console.log('..loading household', id)
             state.householdLoadingIds.push(id)
         },
         unmarkHouseholdLoading(state, id) {
             state.householdLoadingIds = state.householdLoadingIds.filter(i => i !== id)
-        }
+        },
+        markCourseLoaded(state, id) {
+            state.courseLoadedIds.push(id)
+        },
+        unmarkCourseLoaded(state, id) {
+            state.courseLoadedIds = state.courseLoadedIds.filter(i => i !== id)
+        },
     },
     actions: {
         addPerson({ commit, dispatch }, person) {
@@ -66,7 +80,7 @@ const store = createStore({
         },
         fetchInfoForPerson({ dispatch }, person) {
             dispatch('fetchHouseholdForPerson', person)
-            //dispatch('fetchCourseByPerson', person)
+            dispatch('fetchCoursesByPerson', person)
             //dispatch('fetchRelationship', person)
         },
 
@@ -74,35 +88,73 @@ const store = createStore({
          *  Fetch person current household if it is not already loading
          *  check first isHouseholdLoading to fetch household once
          */
-        fetchHouseholdForPerson({ commit, getters }, person) {
-            console.log('isHouseholdLoading', getters.isHouseholdLoading(person.current_household_id))
+        fetchHouseholdForPerson({ commit, getters, dispatch }, person) {
+            console.log('  isHouseholdLoading ?', getters.isHouseholdLoading(person.current_household_id))
             if (! getters.isHouseholdLoading(person.current_household_id)) {
                 commit('markHouseholdLoading', person.current_household_id)
                 getHouseholdByPerson(person)
                     .then(household => new Promise(resolve => {
                         //console.log('getHouseholdByPerson', household)
                         commit('addHousehold', household)
+                        dispatch('addLinkFromPersonsToHousehold', household)
                         resolve()
                         })
                     ).catch( () => {
                         commit('unmarkHouseholdLoading', person.current_household_id)
-                });
+                })
             }
         },
+        addLinkFromPersonsToHousehold({ commit }, household) {
+            const members = household.members.filter(v => household.current_members_id.includes(v.id))
+            members.forEach(m => {
+                //console.log('-> addLink from person', m.person.id, 'to household', m.person.current_household_id)
+                commit('addRelationship', {
+                    from: `${m.person.type}_${m.person.id}`,
+                    to: `household_${m.person.current_household_id}`,
+                    id: `p${m.person.id}-h${m.person.current_household_id}`
+                })
+            })
+
+        },
 
         /**
          *  Fetch person current AccompanyingCourses
          */
-        fetchCourseByPerson({ commit, getters }, person) {
-            console.log('fetchCourseByPerson', person)
-            getCourseByPerson(person)
-                .then(course => new Promise(resolve => {
-                    console.log('getCourseByPerson', course)
-                    commit('addCourse', course)
+        fetchCoursesByPerson({ dispatch }, person) {
+            //console.log('fetchCoursesByPerson', person)
+            getCoursesByPerson(person)
+                .then(courses => new Promise(resolve => {
+                    console.log('fetch courses', courses.length)
+                    dispatch('addCourse', courses)
                     resolve()
                 }))
-            ;
+
         },
+        addCourse({ commit, getters, dispatch }, courses) {
+            //console.log('addCourse', courses)
+            let currentCourses = courses.filter(c => c.closingDate === null)
+            currentCourses.forEach(course => {
+                console.log('  isCourseLoaded ?', getters.isCourseLoaded(course.id))
+                if (! getters.isCourseLoaded(course.id)) {
+                    //console.log('course', course.id)
+                    commit('markCourseLoaded', course.id)
+                    commit('addCourse', course)
+                    dispatch('addLinkFromPersonsToCourse', course)
+                }
+            })
+        },
+        addLinkFromPersonsToCourse({ commit }, course) {
+            let currentParticipations = course.participations.filter(p => p.endDate === null)
+            console.log('  participations', currentParticipations.length)
+            currentParticipations.forEach(p => {
+                commit('addRelationship', {
+                    from: `${p.person.type}_${p.person.id}`,
+                    to: `${course.id}`,
+                    id: `p${p.person.id}-c`+ course.id.split('_')[2]
+                })
+            })
+        },
+
 
         /**
          *  Fetch Relationship
@@ -115,10 +167,10 @@ const store = createStore({
                     commit('addRelationship', relationship)
                     resolve()
                 }))
-            ;
+
         },
 
     }
-});
+})
 
 export { store }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
index f8e2a6724..f90b8a917 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
@@ -1,3 +1,5 @@
+import { visMessages } from './i18n'
+
 /*
  * Vis-network initial data/configuration script
  * Notes:
@@ -29,8 +31,40 @@ window.options = {
     },
     nodes: {
         physics: true
+    },
+    edges: {
+        physics: true
     }
 };
 
 window.network = {};
 
+/*
+*   Adapt entity to graph (id, label)
+*   we rename id in _id
+*   and add properties needed by vis
+*/
+const adapt2vis = (entity) => {
+    switch (entity.type) {
+        case 'person':
+            entity._id = entity.id
+            entity.label = entity.text
+            entity.id = `person_${entity.id}`
+            break
+        case 'household':
+            entity._id = entity.id
+            entity.label = `${visMessages.fr.visgraph.Household} n° ${entity.id}`
+            entity.id = `household_${entity.id}`
+            break
+        case 'accompanying_period':
+            entity._id = entity.id
+            entity.label = `${visMessages.fr.visgraph.Course} n° ${entity.id}`
+            entity.id = `accompanying_period_${entity.id}`
+            break
+    }
+    return entity
+}
+
+export {
+    adapt2vis
+}