diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
index 0047bc87f..839b6dd06 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/CalendarUserSelector.vue
@@ -4,29 +4,23 @@
     <VueMultiselect
         name="field"
         id="calendarUserSelector"
-        v-model="values"
+        v-model="value"
         track-by="id"
         label="value"
         :custom-label="transName"
         :placeholder="$t('select_user')"
         :multiple="true"
         :close-on-select="false"
-        :allow-empty="true" 
-        :options="users">
-      <template slot="selection" slot-scope="{ values, search, isOpen }">
-        <span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} options selected</span>
-      </template>
+        :allow-empty="true"
+        :model-value="value"
+        @update:model-value="updateUsers"
+        :options="options">
     </VueMultiselect>
-    <div>
-      <ul>
-
-      </ul>
-    </div>
-  </div>  
+  </div>
 </template>
 <script>
 
-import { getUniqueUserCalendarRanges } from './js/api'
+import { fetchCalendarRanges } from './js/api'
 import VueMultiselect from 'vue-multiselect';
 
 export default {
@@ -34,30 +28,57 @@ export default {
   components: { VueMultiselect },
   data() {
     return {
-      errorMsg: {},
-      userCalendarRanges: [],
-      values: [],
-      // selectedValues: []
-    }
-  },
-  computed: {
-    users() {
-      return this.userCalendarRanges;
+      errorMsg: [],
+      value: [],
+      options: []
     }
   },
   methods: {
     init() {
-      this.userCalendarRanges = getUniqueUserCalendarRanges();
+      this.getUniqueUserCalendarRanges()
+    },
+    getUniqueUserCalendarRanges() {
+      fetchCalendarRanges().then(calendarRanges => new Promise((resolve, reject) => {
+          let users = [];
+          calendarRanges.results.forEach(i => {
+            if (!(users.some(j => i.user.id === j.id))){
+              users.push({
+                id: i.user.id,
+                username: i.user.username
+              })
+            }
+          });
+          this.options = users;
+          resolve()
+      }))
+      .catch((error) => {
+        this.errorMsg.push(error.message);
+      });
     },
     transName(value) {
       return `${value.username}`;
     },
-    // selectUser(value) {
-    //   this.selectedValues.push(value);
-    // }
+    updateUsers(value) {
+      console.log(value)
+    }
   },
   mounted() {
     this.init();
   }
 }
 </script>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="scss">
+   span.multiselect__tag {
+      background: var(--bs-chill-orange);
+   }
+   span.multiselect__option--highlight {
+      &::after {
+         background: var(--bs-chill-green);
+      }
+      &.multiselect__option--selected::after {
+         background: var(--bs-chill-red);
+      }
+   }
+</style>
diff --git a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js
index 839933f29..19780a86e 100644
--- a/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js
+++ b/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/_components/CalendarUserSelector/js/api.js
@@ -12,14 +12,6 @@ const fetchCalendarRanges = () => {
       });
 };
 
-const getUniqueUserCalendarRanges = () => { //TODO build the array with fetchCalendarRanges
-   return [
-      {userId: 1, username: 'blop'},
-      {userId: 2, username: 'blup'}
-   ];
-}
-
 export {
-   fetchCalendarRanges,
-   getUniqueUserCalendarRanges
+   fetchCalendarRanges
 };