diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index c1a31457d..69d8f5c40 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -62,7 +62,7 @@
                      </VueMultiselect>
                   </div>
                   <div v-if="relation && relation.title && relation.reverseTitle">
-                     <p class="text-center" v-if="reverse">
+                     <p class="text-start" v-if="reverse">
                         {{ $t('visgraph.relation_from_to_like', [
                            getPerson(modal.data.to).text,
                            getPerson(modal.data.from).text,
@@ -75,7 +75,7 @@
                            relation.reverseTitle.fr.toLowerCase(),
                         ])}}
                      </p>
-                     <p class="text-center" v-else>
+                     <p class="text-start" v-else>
                         {{ $t('visgraph.relation_from_to_like', [
                            getPerson(modal.data.from).text,
                            getPerson(modal.data.to).text,
@@ -102,7 +102,7 @@
             </div>
          </template>
          <template v-slot:footer>
-            <button class="btn" :class="modal.button.class" @click="modal.showModal = false">
+            <button class="btn" :class="modal.button.class" @click="submitRelationship">
                {{ $t(modal.button.text)}}</button>
          </template>
       </modal>
@@ -115,7 +115,7 @@ import vis from 'vis-network/dist/vis-network'
 import { mapState, mapGetters } from "vuex"
 import Modal from 'ChillMainAssets/vuejs/_components/Modal'
 import VueMultiselect from 'vue-multiselect'
-import { getRelationsList } from "./api";
+import { getRelationsList, postRelationship } from "./api";
 
 export default {
    name: "App",
@@ -192,7 +192,7 @@ export default {
             return this.relation
          },
          set(value) {
-            console.log('setter relation', value) // <=== InternalError: too much recursion
+            //console.log('setter relation', value) // <=== InternalError: too much recursion
             this.relation = value
          }
       },
@@ -202,7 +202,7 @@ export default {
             return this.reverse
          },
          set(value) {
-            console.log('setter reverse', value) // <=== InternalError: too much recursion
+            //console.log('setter reverse', value) // <=== InternalError: too much recursion
             this.reverse = value
          }
       },
@@ -299,6 +299,21 @@ export default {
       getPerson(idtext) {
          let person = this.persons.filter(p => p.id === idtext)
          return person[0]
+      },
+      submitRelationship() {
+         console.log('submitRelationship')
+         return postRelationship(
+            this.getPerson(this.modal.data.from),
+            this.getPerson(this.modal.data.to),
+            this.relation,
+            this.reverse
+         )
+         .then(response => new Promise(resolve =>{
+            console.log('', response)
+            modal.showModal = false
+            resolve()
+         }))
+         .catch()
       }
    }
 }
@@ -317,4 +332,7 @@ div#visgraph-legend {
    div.post-menu.legend {
    }
 }
+.modal-mask {
+   background-color: rgba(0, 0, 0, 0.25);
+}
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
index ed5d026aa..0c5d06bff 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
@@ -120,18 +120,21 @@ const getRelationsList = () => {
 
 /**
  * @function postRelationship
- * @param person
+ * @param fromPerson
+ * @param toPerson
+ * @param relation
+ * @param reverse
  * @returns {Promise<Response>}
  */
-const postRelationship = (person) => {
-    //console.log('postRelationship', person.id)
+const postRelationship = (fromPerson, toPerson, relation, reverse) => {
     return postFetch(
         `/api/1.0/relations/relationship.json`,
         {
-            from: { type: 'person', id: 0 },
-            to: { type: 'person', id: 0 },
-            relation: { type: 'relation', id: 0 },
-            reverse: bool
+            type: 'relationship',
+            fromPerson: { type: 'person', id: fromPerson._id },
+            toPerson: { type: 'person', id: toPerson._id },
+            relation: { type: 'relation', id: relation.id },
+            reverse: reverse
         }
     )
 }
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
index 6ccc196b6..cfba9b950 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/i18n.js
@@ -16,7 +16,7 @@ const visMessages = {
             delete_relationship_link: "Êtes-vous sûr ?",
             delete_confirmation_text: "Vous allez supprimer le lien entre ces 2 usagers.",
             reverse_relation: "Inverser la relation",
-            relation_from_to_like: "{0} est {2} de {1}",
+            relation_from_to_like: "{0}, {2} de {1}",
         },
         edit: 'Éditer',
         del: 'Supprimer',