diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index 96063fe7..d142c50a 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/js/src/components/Event/OrganizerPickerWrapper.vue
@@ -77,12 +77,12 @@
                       </div>
                       <div class="media-content" v-if="actor.name">
                         <p class="is-4">{{ actor.name }}</p>
-                        <p class="is-6 has-text-grey">
-                          {{ `@${actor.preferredUsername}` }}
+                        <p class="is-6 has-text-grey-dark">
+                          {{ `@${usernameWithDomain(actor)}` }}
                         </p>
                       </div>
                       <div class="media-content" v-else>
-                        {{ `@${actor.preferredUsername}` }}
+                        {{ `@${usernameWithDomain(actor)}` }}
                       </div>
                     </div>
                   </b-checkbox>
@@ -167,6 +167,8 @@ export default class OrganizerPickerWrapper extends Vue {
 
   isComponentModalActive = false;
 
+  usernameWithDomain = usernameWithDomain;
+
   @Prop({ type: Array, required: false, default: () => [] })
   contacts!: IActor[];
   members: Paginate<IMember> = { elements: [], total: 0 };