diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 7ed646394..c559bd9a6 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -109,6 +109,10 @@
 				<property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
 					:is-last-property="true" :property="{}" class="property--addressbooks property--last" />
 
+				<!-- Groups always visible -->
+				<property-groups :prop-model="groupsModel" :value.sync="groups" :contact="contact"
+					:is-read-only="isReadOnly" class="property--groups property--last" />
+
 				<!-- new property select -->
 				<add-new-prop v-if="!isReadOnly" :contact="contact" />
 			</section>
@@ -175,13 +179,13 @@ export default {
 		/**
 		 * Warning messages
 		 *
-		 * @returns {Object|Boolean}
+		 * @returns {Object|boolean}
 		 */
 		warning() {
 			if (!this.contact.dav) {
 				return {
 					icon: 'icon-error-white header-icon--pulse',
-					msg: t('contacts', 'This contact is not yet synced. Edit it to trigger a change.')
+					msg: t('contacts', 'This contact is not yet synced. Edit it to save it to the server.')
 				}
 			} else if (this.isReadOnly) {
 				return {
@@ -195,7 +199,7 @@ export default {
 		/**
 		 * Conflict message
 		 *
-		 * @returns {String|Boolean}
+		 * @returns {string|boolean}
 		 */
 		conflict() {
 			if (this.contact.conflict) {
@@ -283,6 +287,39 @@ export default {
 			}
 		},
 
+		/**
+		 * Fake model to use the propertyGroups component
+		 *
+		 * @returns {Object}
+		 */
+		groupsModel() {
+			return {
+				readableName: t('contacts', 'Groups'),
+				icon: 'icon-contacts'
+			}
+		},
+
+		/**
+		 * Usable groups object linked to the local contact
+		 *
+		 * @param {string[]} data An array of groups
+		 * @returns {Array}
+		 */
+		groups: {
+			get: function() {
+				return this.contact.groups
+			},
+			set: function(data) {
+				let property = this.contact.vCard.getFirstProperty('categories')
+				if (!property) {
+					// Ical.js store comma separated by an Array of array of string
+					property = this.contact.vCard.addPropertyWithValue('categories', [data])
+				}
+				property.setValues(data)
+				this.updateContact()
+			}
+		},
+
 		/**
 		 * Store getters filtered and mapped to usable object
 		 *
diff --git a/src/components/ContactDetails/ContactDetailsAddNewProp.vue b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
index 448b52466..74baa7a03 100644
--- a/src/components/ContactDetails/ContactDetailsAddNewProp.vue
+++ b/src/components/ContactDetails/ContactDetailsAddNewProp.vue
@@ -56,17 +56,42 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * List of properties that the contact already have
+		 *
+		 * @returns {string[]}
+		 */
+		usedProperties() {
+			return this.contact.jCal[1].map(prop => prop[0])
+		},
+
+		/**
+		 * List of every properties you are allowed to add
+		 * on this contact
+		 *
+		 * @returns {Object[]}
+		 */
 		availableProperties() {
-			return Object.keys(rfcProps.properties).map(key => {
-				return {
-					id: key,
-					name: rfcProps.properties[key].readableName
-				}
-			}).sort((a, b) => a.name.localeCompare(b.name))
+			return Object.keys(rfcProps.properties)
+				// only allow to add multiple properties OR props that are not yet in the contact
+				.filter(prop => prop.multiple || this.usedProperties.indexOf(prop) === -1)
+				// usable array of objects
+				.map(key => {
+					return {
+						id: key,
+						name: rfcProps.properties[key].readableName
+					}
+				}).sort((a, b) => a.name.localeCompare(b.name))
 		}
 	},
 
 	methods: {
+		/**
+		 * Add a new prop to the contact
+		 *
+		 * @param {Object} data destructuring object
+		 * @param {string} data.id the id of the property. e.g fn
+		 */
 		addProp({ id }) {
 			let defaultData = rfcProps.properties[id].defaultValue
 			let property = this.contact.vCard.addPropertyWithValue(id, defaultData ? defaultData.value : '')
diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index c142c82f6..c98264b6c 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -57,6 +57,11 @@ export default {
 		}
 	},
 	methods: {
+		/**
+		 * Handler to store a new photo on the current contact
+		 *
+		 * @param {Object} event the event object containing the image
+		 */
 		processFile(event) {
 			if (event.target.files) {
 				let file = event.target.files[0]
@@ -73,10 +78,18 @@ export default {
 				reader.readAsDataURL(file)
 			}
 		},
+
+		/**
+		 * Toggle the full image preview
+		 */
 		toggleSize() {
 			// maximise or minimise avatar photo
 			this.maximizeAvatar = !this.maximizeAvatar
 		},
+
+		/**
+		 * Remove the contact's picture
+		 */
 		removePhoto() {
 			this.contact.vCard.removeProperty('photo')
 			this.maximizeAvatar = !this.maximizeAvatar
diff --git a/src/components/ContactDetails/ContactDetailsProperty.vue b/src/components/ContactDetails/ContactDetailsProperty.vue
index 4191ef16e..129a4dd27 100644
--- a/src/components/ContactDetails/ContactDetailsProperty.vue
+++ b/src/components/ContactDetails/ContactDetailsProperty.vue
@@ -38,7 +38,6 @@ import Contact from 'Models/contact'
 import PropertyText from 'Components/Properties/PropertyText'
 import PropertyMultipleText from 'Components/Properties/PropertyMultipleText'
 import PropertyDateTime from 'Components/Properties/PropertyDateTime'
-import propertyGroups from 'Components/Properties/PropertyGroups'
 import PropertySelect from 'Components/Properties/PropertySelect'
 
 export default {
@@ -68,11 +67,6 @@ export default {
 	computed: {
 		// dynamically load component based on property type
 		componentInstance() {
-			// groups
-			if (this.propName === 'categories') {
-				return propertyGroups
-			}
-
 			// dynamic matching
 			if (this.property.isMultiValue && this.propType === 'text') {
 				return PropertyMultipleText
@@ -119,7 +113,7 @@ export default {
 		/**
 		 * Return the type of the prop e.g. FN
 		 *
-		 * @returns {String}
+		 * @returns {string}
 		 */
 		propName() {
 			return this.property.name
@@ -128,7 +122,7 @@ export default {
 		 * Return the type or property
 		 *
 		 * @see src/models/rfcProps
-		 * @returns {String}
+		 * @returns {string}
 		 */
 		propType() {
 			// if we have a force type set, use it!
@@ -153,7 +147,7 @@ export default {
 		 * but make sure to include the selected one
 		 * in the final list
 		 *
-		 * @returns {Array<Object>}
+		 * @returns {Object[]}
 		 */
 		sortedModelOptions() {
 			if (this.propModel.options) {
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index 8bda16a74..4453390b8 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -58,7 +58,7 @@ export default {
 		/**
 		 * Is this matching the current search ?
 		 *
-		 * @returns {Boolean}
+		 * @returns {boolean}
 		 */
 		matchSearch() {
 			if (this.searchQuery !== '') {
@@ -69,7 +69,7 @@ export default {
 
 		/**
 		 * avatar color based on server toRgb method and the displayName
-		 * @returns {String} the color in css format
+		 * @returns {string} the color in css format
 		 */
 		colorAvatar() {
 			try {
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 15677320c..0ee7f23c9 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -23,15 +23,18 @@
 <template>
 	<div v-if="propModel" class="grid-span-2 property">
 
+		<!-- NO title if first element for groups -->
+
 		<div class="property__row">
 			<div class="property__label">{{ propModel.readableName }}</div>
 
 			<!-- multiselect taggable groups with a limit to 3 groups shown -->
 			<multiselect v-model="localValue" :options="groups" :placeholder="t('contacts', 'Add contact in group')"
-				:limit="3" :multiple="true" :taggable="true"
-				:close-on-select="false" :readonly="isReadOnly" tag-placeholder="create"
-				class="property__value" @input="updateValue" @tag="validateGroup"
-				@select="addContactToGroup" @remove="removeContactToGroup">
+				:multiple="true" :taggable="true" :close-on-select="false"
+				:readonly="isReadOnly" :tag-width="60"
+				tag-placeholder="create" class="property__value"
+				@input="updateValue" @tag="validateGroup" @select="addContactToGroup"
+				@remove="removeContactToGroup">
 
 				<!-- show how many groups are hidden and add tooltip -->
 				<span v-tooltip.auto="formatGroupsTitle" slot="limit" class="multiselect__limit">+{{ localValue.length - 3 }}</span>
@@ -98,7 +101,7 @@ export default {
 		/**
 		 * Debounce and send update event to parent
 		 */
-		updateValue: debounce(function(e) {
+		updateValue: debounce(function() {
 			// https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
 			this.$emit('update:value', this.localValue)
 		}, 500),
@@ -106,19 +109,20 @@ export default {
 		/**
 		 * Dispatch contact addition to group
 		 *
-		 * @param {String} groupName the group name
+		 * @param {string} groupName the group name
 		 */
-		addContactToGroup(groupName) {
-			this.$store.dispatch('addContactToGroup', {
+		async addContactToGroup(groupName) {
+			await this.$store.dispatch('addContactToGroup', {
 				contact: this.contact,
 				groupName
 			})
+			this.updateValue()
 		},
 
 		/**
 		 * Dispatch contact removal from group
 		 *
-		 * @param {String} groupName the group name
+		 * @param {string} groupName the group name
 		 */
 		removeContactToGroup(groupName) {
 			this.$store.dispatch('removeContactToGroup', {
@@ -130,8 +134,8 @@ export default {
 		/**
 		 * Validate groupname and dispatch creation
 		 *
-		 * @param {String} groupName the group name
-		 * @returns {Boolean}
+		 * @param {string} groupName the group name
+		 * @returns {boolean}
 		 */
 		validateGroup(groupName) {
 			// Only allow characters without vcard special chars
diff --git a/src/components/Settings/SettingsAddressbookShare.vue b/src/components/Settings/SettingsAddressbookShare.vue
index 10350fea0..0095ae020 100644
--- a/src/components/Settings/SettingsAddressbookShare.vue
+++ b/src/components/Settings/SettingsAddressbookShare.vue
@@ -91,7 +91,7 @@ export default {
 		 * @param {string} data.user the userId
 		 * @param {string} data.displayName the displayName
 		 * @param {string} data.uri the sharing principalScheme uri
-		 * @param {Boolean} data.isGroup is this a group ?
+		 * @param {boolean} data.isGroup is this a group ?
 		 */
 		shareAddressbook({ user, displayName, uri, isGroup }) {
 			let addressbook = this.addressbook
@@ -101,7 +101,7 @@ export default {
 		/**
 		 * Use the cdav client call to find matches to the query from the existing Users & Groups
 		 *
-		 * @param {String} query
+		 * @param {string} query
 		 */
 		findSharee: debounce(async function(query) {
 			this.isLoading = true
diff --git a/src/models/contact.js b/src/models/contact.js
index c2a5bfcc0..b9185d53f 100644
--- a/src/models/contact.js
+++ b/src/models/contact.js
@@ -166,6 +166,7 @@ export default class Contact {
 		let groupsProp = this.vCard.getFirstProperty('categories')
 		if (groupsProp) {
 			return groupsProp.getValues()
+				.filter(group => group !== '')
 		}
 		return []
 	}
@@ -332,7 +333,7 @@ export default class Contact {
 	 *
 	 * @readonly
 	 * @memberof Contact
-	 * @returns {String[]}
+	 * @returns {string[]}
 	 */
 	get searchData() {
 		return this.jCal[1].map(x => x[0] + ':' + x[3])
diff --git a/src/models/rfcProps.js b/src/models/rfcProps.js
index 3f7efe534..3a21b2501 100644
--- a/src/models/rfcProps.js
+++ b/src/models/rfcProps.js
@@ -88,9 +88,6 @@ const properties = {
 			{ id: 'OTHER', name: t('contacts', 'Other') }
 		]
 	},
-	categories: {
-		readableName: t('contacts', 'Groups')
-	},
 	bday: {
 		readableName: t('contacts', 'Birthday'),
 		icon: 'icon-calendar-dark',
diff --git a/src/store/addressbooks.js b/src/store/addressbooks.js
index 86720f1bc..ca9655776 100644
--- a/src/store/addressbooks.js
+++ b/src/store/addressbooks.js
@@ -128,7 +128,7 @@ const mutations = {
 	 * @param {Object} context the store mutations
 	 * @param {Object} data destructuring object
 	 * @param {Object} data.addressbook the addressbook to rename
-	 * @param {String} data.newName the new name of the addressbook
+	 * @param {string} data.newName the new name of the addressbook
 	 */
 	renameAddressbook(context, { addressbook, newName }) {
 		addressbook = state.addressbooks.find(search => search.id === addressbook.id)
@@ -188,7 +188,7 @@ const mutations = {
 	 * @param {string} data.user the userId
 	 * @param {string} data.displayName the displayName
 	 * @param {string} data.uri the sharing principalScheme uri
-	 * @param {Boolean} data.isGroup is this a group ?
+	 * @param {boolean} data.isGroup is this a group ?
 	 */
 	shareAddressbook(state, { addressbook, user, displayName, uri, isGroup }) {
 		addressbook = state.addressbooks.find(search => search.id === addressbook.id)
@@ -242,10 +242,11 @@ const actions = {
 	 * Retrieve and commit addressbooks
 	 *
 	 * @param {Object} context the store mutations
-	 * @returns {Promise<Array>} the addressbooks
+	 * @returns {Object[]} the addressbooks
 	 */
 	async getAddressbooks(context) {
-		let addressbooks = await client.addressBookHomes[0].findAllAddressBooks()
+		let addressbooks = await client.addressBookHomes[0]
+			.findAllAddressBooks()
 			.then(addressbooks => {
 				return addressbooks.map(addressbook => {
 					// formatting addressbooks
@@ -268,7 +269,8 @@ const actions = {
 	 * @returns {Promise}
 	 */
 	async appendAddressbook(context, addressbook) {
-		return client.addressBookHomes[0].createAddressBookCollection(addressbook.displayName)
+		return client.addressBookHomes[0]
+			.createAddressBookCollection(addressbook.displayName)
 			.then((response) => {
 				addressbook = mapDavCollectionToAddressbook(response)
 				context.commit('addAddressbook', addressbook)
@@ -283,7 +285,8 @@ const actions = {
 	 * @returns {Promise}
 	 */
 	async deleteAddressbook(context, addressbook) {
-		return addressbook.dav.delete()
+		return addressbook.dav
+			.delete()
 			.then((response) => {
 				// delete all the contacts from the store that belong to this addressbook
 				Object.values(addressbook.contacts)
@@ -302,7 +305,8 @@ const actions = {
 	 */
 	async toggleAddressbookEnabled(context, addressbook) {
 		addressbook.dav.enabled = !addressbook.enabled
-		return addressbook.dav.update()
+		return addressbook.dav
+			.update()
 			.then((response) => {
 				context.commit('toggleAddressbookEnabled', addressbook)
 				if (addressbook.enabled && Object.values(addressbook.contacts).length === 0) {
@@ -317,12 +321,13 @@ const actions = {
 	 * Rename a Addressbook
 	 * @param {Object} context the store mutations Current context
 	 * @param {Object} data.addressbook the addressbook to rename
-	 * @param {String} data.newName the new name of the addressbook
+	 * @param {string} data.newName the new name of the addressbook
 	 * @returns {Promise}
 	 */
 	async renameAddressbook(context, { addressbook, newName }) {
 		addressbook.dav.displayname = newName
-		return addressbook.dav.update()
+		return addressbook.dav
+			.update()
 			.then((response) => context.commit('renameAddressbook', { addressbook, newName }))
 			.catch((error) => { throw error })
 	},
@@ -336,7 +341,8 @@ const actions = {
 	 * @returns {Promise}
 	 */
 	async getContactsFromAddressBook(context, { addressbook }) {
-		return addressbook.dav.findAllAndFilterBySimpleProperties(['EMAIL', 'UID', 'CATEGORIES', 'FN', 'ORG', 'N'])
+		return addressbook.dav
+			.findAllAndFilterBySimpleProperties(['EMAIL', 'UID', 'CATEGORIES', 'FN', 'ORG', 'N'])
 			.then((response) => {
 				// We don't want to lose the url information
 				// so we need to parse one by one
@@ -428,7 +434,7 @@ const actions = {
 	 * @param {Object} data destructuring object
 	 * @param {Object} data.addressbook the addressbook
 	 * @param {string} data.uri the sharee uri
-	 * @param {Boolean} data.writeable the sharee permission
+	 * @param {boolean} data.writeable the sharee permission
 	 */
 	async toggleShareeWritable(context, { addressbook, uri, writeable }) {
 		try {
@@ -447,7 +453,7 @@ const actions = {
 	 * @param {string} data.user the userId
 	 * @param {string} data.displayName the displayName
 	 * @param {string} data.uri the sharing principalScheme uri
-	 * @param {Boolean} data.isGroup is this a group ?
+	 * @param {boolean} data.isGroup is this a group ?
 	 */
 	async shareAddressbook(context, { addressbook, user, displayName, uri, isGroup }) {
 		// Share addressbook with entered group or user
diff --git a/src/store/contacts.js b/src/store/contacts.js
index cc06753d8..8aaa20796 100644
--- a/src/store/contacts.js
+++ b/src/store/contacts.js
@@ -245,7 +245,7 @@ const actions = {
 	 * @param {Object} context the store mutations
 	 * @param {Object} data destructuring object
 	 * @param {Contact} data.contact the contact to delete
-	 * @param {Boolean} [data.dav=true] trigger a dav deletion
+	 * @param {boolean} [data.dav=true] trigger a dav deletion
 	 */
 	async deleteContact(context, { contact, dav = true }) {
 		// only local delete if the contact doesn't exists on the server
diff --git a/src/store/groups.js b/src/store/groups.js
index 1f92b5dd2..e6cfd4e18 100644
--- a/src/store/groups.js
+++ b/src/store/groups.js
@@ -80,7 +80,7 @@ const mutations = {
 	 *
 	 * @param {Object} state the store data
 	 * @param {Object} data destructuring object
-	 * @param {String} data.groupName the name of the group
+	 * @param {string} data.groupName the name of the group
 	 * @param {Contact} data.contact the contact
 	 */
 	removeContactToGroup(state, { groupName, contact }) {
@@ -103,7 +103,7 @@ const actions = {
 	 *
 	 * @param {Object} context the store mutations
 	 * @param {Object} data destructuring object
-	 * @param {String} data.groupName the name of the group
+	 * @param {string} data.groupName the name of the group
 	 * @param {Contact} data.contact the contact
 	 */
 	addContactToGroup(context, { groupName, contact }) {
@@ -115,7 +115,7 @@ const actions = {
 	 *
 	 * @param {Object} context the store mutations
 	 * @param {Object} data destructuring object
-	 * @param {String} data.groupName the name of the group
+	 * @param {string} data.groupName the name of the group
 	 * @param {Contact} data.contact the contact
 	 */
 	removeContactToGroup(context, { groupName, contact }) {
diff --git a/src/store/importState.js b/src/store/importState.js
index 871fa15bb..98bb39a8f 100644
--- a/src/store/importState.js
+++ b/src/store/importState.js
@@ -53,7 +53,7 @@ const mutations = {
 	 * Set the total number of contacts
 	 *
 	 * @param {Object} state the store data
-	 * @param {String} total the total number of contacts to import
+	 * @param {string} total the total number of contacts to import
 	 */
 	setTotal(state, total) {
 		state.importState.total = total
@@ -63,7 +63,7 @@ const mutations = {
 	 * Set the address book name
 	 *
 	 * @param {Object} state the store data
-	 * @param {String} addressbook the name of the address book to import into
+	 * @param {string} addressbook the name of the address book to import into
 	 */
 	setAddressbook(state, addressbook) {
 		state.importState.addressbook = addressbook
@@ -73,7 +73,7 @@ const mutations = {
 	 * Change stage to the indicated one
 	 *
 	 * @param {Object} state the store data
-	 * @param {String} stage the name of the stage ('default', 'importing', 'parsing')
+	 * @param {string} stage the name of the stage ('default', 'importing', 'parsing')
 	 */
 	changeStage(state, stage) {
 		state.importState.stage = stage
@@ -118,7 +118,7 @@ const actions = {
 	 * Set the total number of contacts
 	 *
 	 * @param {Object} context the store mutations
-	 * @param {String} total the total number of contacts to import
+	 * @param {string} total the total number of contacts to import
 	 */
 	setTotal(context, total) {
 		context.commit('setTotal', total)
@@ -128,7 +128,7 @@ const actions = {
 	 * Set the address book name
 	 *
 	 * @param {Object} context the store mutations
-	 * @param {String} addressbook the name of the address book to import into
+	 * @param {string} addressbook the name of the address book to import into
 	 */
 	setAddressbook(context, addressbook) {
 		context.commit('setAddressbook', addressbook)
@@ -139,7 +139,7 @@ const actions = {
 	 * and reset if the parsing starts
 	 *
 	 * @param {Object} context the store mutations
-	 * @param {String} stage the name of the stage ('default', 'importing', 'parsing')
+	 * @param {string} stage the name of the stage ('default', 'importing', 'parsing')
 	 */
 	changeStage(context, stage) {
 		context.commit('changeStage', stage)