diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index f5db187b9..f86c68576 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
@@ -472,15 +472,25 @@ export default {
 
             case 'create':
                return postRelationship(this.modal.data)
-               .then(relationship => new Promise(resolve => {
-                  //console.log('post relationship response', relationship)
-                  this.$store.dispatch('addLinkFromRelationship', relationship)
-                  this.modal.showModal = false
-                  this.resetForm()
-                  this.forceUpdateComponent()
-                  resolve()
-               }))
-               .catch()
+                  .then(relationship => new Promise(resolve => {
+                     //console.log('post relationship response', relationship)
+                     this.$store.dispatch('addLinkFromRelationship', relationship)
+                     this.modal.showModal = false
+                     this.resetForm()
+                     this.forceUpdateComponent()
+                     resolve()
+                  }))
+                  .catch( error => {
+                     if (error.name === 'ValidationException') {
+                        for (let v of error.violations) {
+                           this.$toast.open({message: v });
+                           console.log(v)
+                        }
+                     } else {
+                        this.$toast.open({message: 'An error occurred'});
+                     }
+                  }
+               )
 
             case 'edit':
                return patchRelationship(this.modal.data)
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
index 448ff6633..01c335436 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/api.js
@@ -1,50 +1,5 @@
-import { splitId } from './vis-network'
-
-/**
- * @function makeFetch
- * @param method
- * @param url
- * @param body
- * @returns {Promise<Response>}
- */
-const makeFetch = (method, url, body) => {
-    return fetch(url, {
-        method: method,
-        headers: {
-            'Content-Type': 'application/json;charset=utf-8'
-        },
-        body: (body !== null) ? JSON.stringify(body) : null
-    })
-    .then(response => {
-
-        if (response.ok) {
-            return response.json();
-        }
-
-        if (response.status === 422) {
-            return response.json().then(violations => {
-                throw ValidationException(violations)
-            });
-        }
-
-        throw {
-            msg: 'Error while updating AccompanyingPeriod Course.',
-            sta: response.status,
-            txt: response.statusText,
-            err: new Error(),
-            body: response.body
-        };
-    });
-}
-
-/**
- * @param violations
- * @constructor
- */
-const ValidationException = (violations) => {
-    this.violations = violations
-    this.name = 'ValidationException'
-}
+import { splitId } from './vis-network';
+import {makeFetch} from 'ChillMainAssets/lib/api/apiMethods.js';
 
 /**
  * @function getFetch
@@ -136,7 +91,7 @@ const getRelationsList = () => {
  * @returns {Promise<Response>}
  */
 const postRelationship = (relationship) => {
-    //console.log(relationship)
+    //console.log(relationship);
     return postFetch(
         `/api/1.0/relations/relationship.json`,
         {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js
index 5e8989e49..a64afd4a1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/index.js
@@ -3,8 +3,10 @@ import { store } from "./store.js"
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
 import { visMessages } from './i18n'
 import App from './App.vue'
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
 
-import './vis-network'
+import './vis-network';
 
 const i18n = _createI18n(visMessages)
 const container = document.getElementById('relationship-graph')
@@ -25,5 +27,11 @@ const app = createApp({
 })
 .use(store)
 .use(i18n)
+.use(VueToast, {
+    position: "bottom-right",
+    type: "error",
+    duration: 5000,
+    dismissible: true
+ })
 .component('app', App)
 .mount('#relationship-graph')