diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index b046516de..b362a2455 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -43,7 +43,7 @@ export default {
 
 <style lang="scss" scoped>
    div.vue-component {
-      padding: 1.5em;
+      padding: 1.5em 0;
       margin: 2em 0;
       border: 2px dotted lightgrey;
       border-radius: 10px;
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index 5e3210536..62b6ed383 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -13,6 +13,18 @@ const getAccompanyingCourse = (id) => {
       });
 };
 
+/*
+* Endpoint 
+*/
+const getSocialIssues = () => {
+   const url = `/api/1.0/person/social-work/social-issue.json`;
+   return fetch(url)
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
 /*
 * Endpoint v.2 chill_api_single_accompanying_course__entity
 * method PATCH, patch AccompanyingCourse Instance
@@ -121,6 +133,7 @@ const postResource = (id, payload, method) => {
 
 export { 
    getAccompanyingCourse,
+   getSocialIssues,
    patchAccompanyingCourse,
    postParticipation,
    postRequestor,
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index fff321c27..126fbbf8c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -3,12 +3,18 @@
      <h3>{{ $t('social_issue.title') }}</h3>
      
      <div>
-        <label for="selectIssues">{{ $t('social_issue.label') }}</label>
+        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
         <VueMultiselect
             name="selectIssues"
             v-model="selected"
+            track-by="id"
+            label="text"
+            :placeholder="$t('social_issue.label')"
             :multiple="true"
+            :searchable="true"
             :close-on-select="false"
+            :allow-empty="true" 
+            :show-labels="false" 
             :options="options">
         </VueMultiselect>
      </div>
@@ -18,6 +24,7 @@
 
 <script>
 import VueMultiselect from 'vue-multiselect'
+import { getSocialIssues } from '../api'
 
 export default {
    name: "SocialIssue",
@@ -25,8 +32,22 @@ export default {
    data () {
       return {
          selected: null,
-         options: ['list', 'of', 'options']
+         options: []
       }
+   },
+   computed: {
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
+            console.log('socialIssues', socialIssues);
+            this.options = socialIssues.results; 
+            resolve();
+         })).catch(error => this.$store.commit('catchError', error));        
+      },
    }
 }
 </script>