diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
index 46b65c695eede..7b1063b6f2b25 100644
--- a/apps/files_sharing/src/components/SharingEntry.vue
+++ b/apps/files_sharing/src/components/SharingEntry.vue
@@ -29,139 +29,59 @@
 			:menu-position="'left'"
 			:url="share.shareWithAvatar" />
 
-		<component :is="share.shareWithLink ? 'a' : 'div'"
-			:title="tooltip"
-			:aria-label="tooltip"
-			:href="share.shareWithLink"
-			class="sharing-entry__desc">
-			<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{ share.shareWithDisplayNameUnique }})</span></span>
-			<p v-if="hasStatus">
-				<span>{{ share.status.icon || '' }}</span>
-				<span>{{ share.status.message || '' }}</span>
-			</p>
-		</component>
-		<NcActions menu-align="right"
-			class="sharing-entry__actions"
-			@close="onMenuClose">
-			<template v-if="share.canEdit">
-				<!-- edit permission -->
-				<NcActionCheckbox ref="canEdit"
-					:checked.sync="canEdit"
-					:value="permissionsEdit"
-					:disabled="saving || !canSetEdit">
-					{{ t('files_sharing', 'Allow editing') }}
-				</NcActionCheckbox>
-
-				<!-- create permission -->
-				<NcActionCheckbox v-if="isFolder"
-					ref="canCreate"
-					:checked.sync="canCreate"
-					:value="permissionsCreate"
-					:disabled="saving || !canSetCreate">
-					{{ t('files_sharing', 'Allow creating') }}
-				</NcActionCheckbox>
-
-				<!-- delete permission -->
-				<NcActionCheckbox v-if="isFolder"
-					ref="canDelete"
-					:checked.sync="canDelete"
-					:value="permissionsDelete"
-					:disabled="saving || !canSetDelete">
-					{{ t('files_sharing', 'Allow deleting') }}
-				</NcActionCheckbox>
-
-				<!-- reshare permission -->
-				<NcActionCheckbox v-if="config.isResharingAllowed"
-					ref="canReshare"
-					:checked.sync="canReshare"
-					:value="permissionsShare"
-					:disabled="saving || !canSetReshare">
-					{{ t('files_sharing', 'Allow resharing') }}
-				</NcActionCheckbox>
-
-				<NcActionCheckbox v-if="isSetDownloadButtonVisible"
-					ref="canDownload"
-					:checked.sync="canDownload"
-					:disabled="saving || !canSetDownload">
-					{{ allowDownloadText }}
-				</NcActionCheckbox>
-
-				<!-- expiration date -->
-				<NcActionCheckbox :checked.sync="hasExpirationDate"
-					:disabled="config.isDefaultInternalExpireDateEnforced || saving"
-					@uncheck="onExpirationDisable">
-					{{ config.isDefaultInternalExpireDateEnforced
-						? t('files_sharing', 'Expiration date enforced')
-						: t('files_sharing', 'Set expiration date') }}
-				</NcActionCheckbox>
-				<NcActionInput v-if="hasExpirationDate"
-					ref="expireDate"
-					:is-native-picker="true"
-					:hide-label="true"
-					:class="{ error: errors.expireDate}"
-					:disabled="saving"
-					:value="new Date(share.expireDate)"
-					type="date"
-					:min="dateTomorrow"
-					:max="dateMaxEnforced"
-					@input="onExpirationChange">
-					{{ t('files_sharing', 'Enter a date') }}
-				</NcActionInput>
-
-				<!-- note -->
-				<template v-if="canHaveNote">
-					<NcActionCheckbox :checked.sync="hasNote"
-						:disabled="saving"
-						@uncheck="queueUpdate('note')">
-						{{ t('files_sharing', 'Note to recipient') }}
-					</NcActionCheckbox>
-					<NcActionTextEditable v-if="hasNote"
-						ref="note"
-						:class="{ error: errors.note}"
-						:disabled="saving"
-						:value="share.newNote || share.note"
-						icon="icon-edit"
-						@update:value="onNoteChange"
-						@submit="onNoteSubmit" />
-				</template>
+		<div class="sharing-entry__summary" @click.prevent="toggleQuickShareSelect">
+			<component :is="share.shareWithLink ? 'a' : 'div'"
+				:title="tooltip"
+				:aria-label="tooltip"
+				:href="share.shareWithLink"
+				class="sharing-entry__desc">
+				<span>{{ title }}<span v-if="!isUnique" class="sharing-entry__desc-unique"> ({{
+					share.shareWithDisplayNameUnique }})</span></span>
+				<p v-if="hasStatus">
+					<span>{{ share.status.icon || '' }}</span>
+					<span>{{ share.status.message || '' }}</span>
+				</p>
+			</component>
+			<QuickShareSelect :options="options" :value.sync="selectedOption" :toggle="showDropdown" />
+		</div>
+		<NcButton class="sharing-entry__action"
+			:aria-label="t('files_sharing', 'Open Sharing Details')"
+			type="tertiary-no-background"
+			@click="openSharingDetails">
+			<template #icon>
+				<DotsHorizontalIcon :size="20" />
 			</template>
-
-			<NcActionButton v-if="share.canDelete"
-				icon="icon-close"
-				:disabled="saving"
-				@click.prevent="onDelete">
-				{{ t('files_sharing', 'Unshare') }}
-			</NcActionButton>
-		</NcActions>
+		</NcButton>
 	</li>
 </template>
 
 <script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable.js'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+
+import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
 import SharesMixin from '../mixins/SharesMixin.js'
+import ShareDropDown from '../mixins/ShareDropdown.js'
 
 export default {
 	name: 'SharingEntry',
 
 	components: {
-		NcActions,
-		NcActionButton,
-		NcActionCheckbox,
-		NcActionInput,
-		NcActionTextEditable,
+		NcButton,
 		NcAvatar,
+		DotsHorizontalIcon,
+		NcSelect,
+		QuickShareSelect,
 	},
 
-	mixins: [SharesMixin],
+	mixins: [SharesMixin, ShareDropDown],
 
 	data() {
 		return {
+			showDropdown: false,
 			permissionsEdit: OC.PERMISSION_UPDATE,
 			permissionsCreate: OC.PERMISSION_CREATE,
 			permissionsDelete: OC.PERMISSION_DELETE,
@@ -456,6 +376,12 @@ export default {
 		onMenuClose() {
 			this.onNoteSubmit()
 		},
+		openSharingDetails() {
+			this.$emit('open-sharing-details')
+		},
+		toggleQuickShareSelect() {
+			this.showDropdown = !this.showDropdown
+		},
 	},
 }
 </script>
@@ -465,21 +391,34 @@ export default {
 	display: flex;
 	align-items: center;
 	height: 44px;
+
 	&__desc {
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
-		padding: 8px;
+		padding-bottom: 0;
 		line-height: 1.2em;
+
 		p {
 			color: var(--color-text-maxcontrast);
 		}
+
 		&-unique {
 			color: var(--color-text-maxcontrast);
 		}
 	}
+
 	&__actions {
 		margin-left: auto;
 	}
+
+	&__summary {
+		padding: 8px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		width: 100%;
+	}
+
 }
 </style>
diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index 06c9cb708510f..ffe73a3da8854 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -25,13 +25,17 @@
 		<NcAvatar :is-no-user="true"
 			:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
 			class="sharing-entry__avatar" />
-		<div class="sharing-entry__desc">
+		<div class="sharing-entry__desc" @click.prevent="toggleQuickShareSelect">
 			<span class="sharing-entry__title" :title="title">
 				{{ title }}
 			</span>
 			<p v-if="subtitle">
 				{{ subtitle }}
 			</p>
+			<QuickShareSelect v-if="share"
+				:options="options"
+				:value.sync="selectedOption"
+				:toggle="showDropdown" />
 		</div>
 
 		<!-- clipboard -->
@@ -292,11 +296,14 @@ import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEdi
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
+import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
+
 import ExternalShareAction from './ExternalShareAction.vue'
 import SharePermissionsEditor from './SharePermissionsEditor.vue'
 import GeneratePassword from '../utils/GeneratePassword.js'
 import Share from '../models/Share.js'
 import SharesMixin from '../mixins/SharesMixin.js'
+import ShareDropDown from '../mixins/ShareDropdown.js'
 
 export default {
 	name: 'SharingEntryLink',
@@ -313,9 +320,10 @@ export default {
 		NcAvatar,
 		ExternalShareAction,
 		SharePermissionsEditor,
+		QuickShareSelect,
 	},
 
-	mixins: [SharesMixin],
+	mixins: [SharesMixin, ShareDropDown],
 
 	props: {
 		canReshare: {
@@ -330,6 +338,7 @@ export default {
 
 	data() {
 		return {
+			showDropdown: false,
 			copySuccess: true,
 			copied: false,
 
@@ -671,7 +680,7 @@ export default {
 		 * accordingly
 		 *
 		 * @param {Share} share the new share
-		 * @param {boolean} [update=false] do we update the current share ?
+		 * @param {boolean} [update] do we update the current share ?
 		 */
 		async pushNewLinkShare(share, update) {
 			try {
@@ -870,6 +879,10 @@ export default {
 			// YET. We can safely delete the share :)
 			this.$emit('remove:share', this.share)
 		},
+
+		toggleQuickShareSelect() {
+			this.showDropdown = !this.showDropdown
+		},
 	},
 }
 </script>
@@ -879,6 +892,7 @@ export default {
 	display: flex;
 	align-items: center;
 	min-height: 44px;
+
 	&__desc {
 		display: flex;
 		flex-direction: column;
diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
new file mode 100644
index 0000000000000..93cc76508c6af
--- /dev/null
+++ b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue
@@ -0,0 +1,117 @@
+<template>
+	<div :class="{ 'active': showDropdown, 'share-select': true }">
+		<span class="trigger-text" @click="toggleDropdown">
+			{{ selectedOption }}
+			<DropdownIcon :size="15" />
+		</span>
+		<div v-if="showDropdown" class="share-select-dropdown-container">
+			<div v-for="option in options"
+				:key="option"
+				:class="{ 'dropdown-item': true, 'selected': option === value }"
+				@click="selectOption(option)">
+				{{ option }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import DropdownIcon from 'vue-material-design-icons/TriangleSmallDown.vue'
+
+export default {
+	components: {
+		DropdownIcon,
+	},
+	props: {
+		options: {
+			type: Array,
+			required: true,
+		},
+		value: {
+			type: String,
+			required: true,
+		},
+		toggle: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			showDropdown: this.toggle,
+		}
+	},
+	computed: {
+		selectedOption() {
+			return this.value
+		},
+	},
+	watch: {
+		toggle(toggleValue) {
+			this.showDropdown = toggleValue
+		},
+	},
+	methods: {
+		toggleDropdown() {
+			this.showDropdown = !this.showDropdown
+		},
+		selectOption(option) {
+			this.$emit('update:value', option)
+			this.showDropdown = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.share-select {
+	position: relative;
+	cursor: pointer;
+
+	.trigger-text {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		font-size: 12.5px;
+		gap: 2px;
+		color: var(--color-primary-element);
+	}
+
+	.share-select-dropdown-container {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		// width: 100%;
+		background-color: #ffffff;
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		padding: 4px 0;
+		z-index: 1;
+
+		.dropdown-item {
+			padding: 8px;
+			font-size: 12px;
+
+			&:hover {
+				background-color: #f2f2f2;
+			}
+
+			&.selected {
+				background-color: #f0f0f0;
+			}
+		}
+	}
+
+	/* Optional: Add a transition effect for smoother dropdown animation */
+	.share-select-dropdown-container {
+		max-height: 0;
+		overflow: hidden;
+		transition: max-height 0.3s ease;
+	}
+
+	&.active .share-select-dropdown-container {
+		max-height: 200px;
+		/* Adjust the value to your desired height */
+	}
+}
+</style>
diff --git a/apps/files_sharing/src/components/SharingEntrySimple.vue b/apps/files_sharing/src/components/SharingEntrySimple.vue
index daff947fe803b..5e858de990b44 100644
--- a/apps/files_sharing/src/components/SharingEntrySimple.vue
+++ b/apps/files_sharing/src/components/SharingEntrySimple.vue
@@ -29,8 +29,8 @@
 				{{ subtitle }}
 			</p>
 		</div>
-		<NcActions ref="actionsComponent"
-			v-if="$slots['default']"
+		<NcActions v-if="$slots['default']"
+			ref="actionsComponent"
 			class="sharing-entry__actions"
 			menu-align="right"
 			:aria-expanded="ariaExpandedValue">
diff --git a/apps/files_sharing/src/components/SharingInput.vue b/apps/files_sharing/src/components/SharingInput.vue
index 8b740c1bac3b4..fe296f531b356 100644
--- a/apps/files_sharing/src/components/SharingInput.vue
+++ b/apps/files_sharing/src/components/SharingInput.vue
@@ -24,6 +24,7 @@
 	<div class="sharing-search">
 		<label for="sharing-search-input">{{ t('files_sharing', 'Search for share recipients') }}</label>
 		<NcSelect ref="select"
+			v-model="value"
 			input-id="sharing-search-input"
 			class="sharing-search__input"
 			:disabled="!canReshare"
@@ -33,10 +34,9 @@
 			:clear-search-on-blur="() => false"
 			:user-select="true"
 			:options="options"
-			v-model="value"
 			@open="handleOpen"
 			@search="asyncFind"
-			@option:selected="addShare">
+			@option:selected="openSharingDetails">
 			<template #no-options="{ search }">
 				{{ search ? noResultText : t('files_sharing', 'No recommendations. Start typing.') }}
 			</template>
@@ -176,7 +176,7 @@ export default {
 		 * Get suggestions
 		 *
 		 * @param {string} search the search query
-		 * @param {boolean} [lookup=false] search on lookup server
+		 * @param {boolean} [lookup] search on lookup server
 		 */
 		async getSuggestions(search, lookup = false) {
 			this.loading = true
@@ -538,6 +538,14 @@ export default {
 				this.loading = false
 			}
 		},
+		openSharingDetails(value) {
+			const openShareDetailsEventData = {
+				fileInfo: this.fileInfo,
+				share: null,
+				shareRequestValue: value,
+			}
+			this.$emit('open-sharing-details', openShareDetailsEventData)
+		},
 	},
 }
 </script>
diff --git a/apps/files_sharing/src/mixins/ShareRequests.js b/apps/files_sharing/src/mixins/ShareRequests.js
index e1d246b740016..72c180f50b660 100644
--- a/apps/files_sharing/src/mixins/ShareRequests.js
+++ b/apps/files_sharing/src/mixins/ShareRequests.js
@@ -42,13 +42,13 @@ export default {
 		 * @param {string} data.path  path to the file/folder which should be shared
 		 * @param {number} data.shareType  0 = user; 1 = group; 3 = public link; 6 = federated cloud share
 		 * @param {string} data.shareWith  user/group id with which the file should be shared (optional for shareType > 1)
-		 * @param {boolean} [data.publicUpload=false]  allow public upload to a public shared folder
+		 * @param {boolean} [data.publicUpload]  allow public upload to a public shared folder
 		 * @param {string} [data.password]  password to protect public link Share with
-		 * @param {number} [data.permissions=31]  1 = read; 2 = update; 4 = create; 8 = delete; 16 = share; 31 = all (default: 31, for public shares: 1)
-		 * @param {boolean} [data.sendPasswordByTalk=false] send the password via a talk conversation
-		 * @param {string} [data.expireDate=''] expire the shareautomatically after
-		 * @param {string} [data.label=''] custom label
-		 * @param {string} [data.attributes=null] Share attributes encoded as json
+		 * @param {number} [data.permissions]  1 = read; 2 = update; 4 = create; 8 = delete; 16 = share; 31 = all (default: 31, for public shares: 1)
+		 * @param {boolean} [data.sendPasswordByTalk] send the password via a talk conversation
+		 * @param {string} [data.expireDate] expire the shareautomatically after
+		 * @param {string} [data.label] custom label
+		 * @param {string} [data.attributes] Share attributes encoded as json
 		 * @return {Share} the new share
 		 * @throws {Error}
 		 */
@@ -66,7 +66,7 @@ export default {
 				const errorMessage = error?.response?.data?.ocs?.meta?.message
 				OC.Notification.showTemporary(
 					errorMessage ? t('files_sharing', 'Error creating the share: {errorMessage}', { errorMessage }) : t('files_sharing', 'Error creating the share'),
-					{ type: 'error' }
+					{ type: 'error' },
 				)
 				throw error
 			}
@@ -91,7 +91,7 @@ export default {
 				const errorMessage = error?.response?.data?.ocs?.meta?.message
 				OC.Notification.showTemporary(
 					errorMessage ? t('files_sharing', 'Error deleting the share: {errorMessage}', { errorMessage }) : t('files_sharing', 'Error deleting the share'),
-					{ type: 'error' }
+					{ type: 'error' },
 				)
 				throw error
 			}
@@ -118,7 +118,7 @@ export default {
 					const errorMessage = error?.response?.data?.ocs?.meta?.message
 					OC.Notification.showTemporary(
 						errorMessage ? t('files_sharing', 'Error updating the share: {errorMessage}', { errorMessage }) : t('files_sharing', 'Error updating the share'),
-						{ type: 'error' }
+						{ type: 'error' },
 					)
 				}
 				const message = error.response.data.ocs.meta.message
diff --git a/apps/files_sharing/src/views/SharingDetailsTab.vue b/apps/files_sharing/src/views/SharingDetailsTab.vue
new file mode 100644
index 0000000000000..c5f6321fd0a3c
--- /dev/null
+++ b/apps/files_sharing/src/views/SharingDetailsTab.vue
@@ -0,0 +1,565 @@
+<template>
+	<div class="sharingTabDetailsView">
+		<div class="sharingTabDetailsView__header">
+			<span>
+				<NcAvatar v-if="useUserAvatar"
+					class="sharing-entry__avatar"
+					:is-no-user="userAvatar.shareType !== SHARE_TYPES.SHARE_TYPE_USER"
+					:user="userAvatar.shareWith"
+					:display-name="userAvatar.shareWithDisplayName"
+					:menu-position="'left'"
+					:url="userAvatar.shareWithAvatar" />
+				<ShareIcon v-else :size="32" />
+			</span>
+			<span>
+				<h1>{{ title }}</h1>
+			</span>
+		</div>
+		<div class="sharingTabDetailsView__quick-permissions">
+			<div>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="bundledPermissions.READ_ONLY.toString()"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'View only') }}
+					<template #icon>
+						<ViewIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="bundledPermissions.UPLOAD_AND_UPDATE.toString()"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'Allow upload and editing') }}
+					<template #icon>
+						<EditIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch v-if="allowsFileDrop"
+					:button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="bundledPermissions.FILE_DROP.toString()"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'File drop') }}
+					<small>{{ t('files_sharing', 'Upload only') }}</small>
+					<template #icon>
+						<UploadIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+				<NcCheckboxRadioSwitch :button-variant="true"
+					:checked.sync="sharingPermission"
+					:value="'-1'"
+					name="sharing_permission_radio"
+					type="radio"
+					button-variant-grouped="vertical">
+					{{ t('files_sharing', 'Custom permissions') }}
+					<small>{{ t('files_sharing', 'Create, read & update') }}</small>
+					<template #icon>
+						<DotsHorizontalIcon :size="20" />
+					</template>
+				</NcCheckboxRadioSwitch>
+			</div>
+		</div>
+		<div class="sharingTabDetailsView__advanced-control">
+			<NcButton type="tertiary"
+				alignment="end-reverse"
+				@click="advancedSectionAccordionExpanded = !advancedSectionAccordionExpanded">
+				Advanced settings
+				<template #icon>
+					<MenuDownIcon />
+				</template>
+			</NcButton>
+		</div>
+		<div v-if="advancedSectionAccordionExpanded" class="sharingTabDetailsView__advanced">
+			<section>
+				<label>{{ t('file_sharing', 'Note to recipient') }}</label>
+				<textarea :model="noteToRecipient" />
+				<NcCheckboxRadioSwitch :checked.sync="setPassword">
+					{{ t('file_sharing', 'Set password') }}
+				</NcCheckboxRadioSwitch>
+				<NcInputField v-if="setPassword"
+					type="password"
+					:value="password"
+					:label="t('file_sharing', 'Password')" />
+
+				<NcCheckboxRadioSwitch :checked.sync="hasExpirationDate">
+					{{ t('file_sharing', 'Set expiration date') }}
+				</NcCheckboxRadioSwitch>
+				<NcDatetimePicker v-if="hasExpirationDate"
+					v-model="expirationDate"
+					type="datetime"
+					:placeholder="t('file_sharing', 'Expiration date')"
+					confirm />
+				<NcCheckboxRadioSwitch :checked.sync="hideDownload">
+					{{ t('file_sharing', 'Hide download') }}
+				</NcCheckboxRadioSwitch>
+				<NcInputField :value="shareLabel" :label-visible="true" :label="t('file_sharing', 'Share label')" />
+				<span style="display: none;"><label /></span>
+
+				<NcCheckboxRadioSwitch :checked.sync="setCustomPermissions">
+					{{ t('file_sharing', 'Custom permissions') }}
+				</NcCheckboxRadioSwitch>
+				<section v-if="setCustomPermissions" class="custom-permissions-group">
+					<NcCheckboxRadioSwitch :checked.sync="permissionsRead">
+						{{ t('file_sharing', 'Read') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch v-if="isFolder" :checked.sync="permissionsCreate">
+						{{ t('file_sharing', 'Create') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="permissionsEdit">
+						{{ t('file_sharing', 'Update') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="permissionsShare">
+						{{ t('file_sharing', 'Share') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch :checked.sync="permissionsDelete">
+						{{ t('file_sharing', 'Delete') }}
+					</NcCheckboxRadioSwitch>
+				</section>
+			</section>
+		</div>
+
+		<div class="sharingTabDetailsView__footer">
+			<NcButton v-if="share"
+				aria-label="Delete link"
+				:disabled="false"
+				:readonly="false"
+				type="tertiary-no-background"
+				@click.prevent="removeShare">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
+				{{ t('files_sharing', 'Delete share') }}
+			</NcButton>
+			<div class="button-group">
+				<NcButton @click="$emit('close-sharing-details')">
+					{{ t('file_sharing', 'Cancel') }}
+				</NcButton>
+				<NcButton type="primary" @click="shareAndCopyLink">
+					{{ shareButtonText }}
+				</NcButton>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import ShareIcon from 'vue-material-design-icons/ShareVariant.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import EditIcon from 'vue-material-design-icons/Pencil.vue'
+import ViewIcon from 'vue-material-design-icons/Eye.vue'
+import UploadIcon from 'vue-material-design-icons/Upload.vue'
+import MenuDownIcon from 'vue-material-design-icons/MenuDown.vue'
+import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
+
+import Config from '../services/ConfigService.js'
+import GeneratePassword from '../utils/GeneratePassword.js'
+import Share from '../models/Share.js'
+import ShareRequests from '../mixins/ShareRequests.js'
+import ShareTypes from '../mixins/ShareTypes.js'
+import SharesMixin from '../mixins/SharesMixin.js'
+
+import {
+	ATOMIC_PERMISSIONS,
+	BUNDLED_PERMISSIONS,
+	hasPermissions,
+	permissionsSetIsValid,
+	togglePermissions,
+	canTogglePermissions,
+} from '../lib/SharePermissionsToolBox.js'
+
+export default {
+	name: 'SharingDetailsTab',
+	components: {
+		NcAvatar,
+		NcButton,
+		NcInputField,
+		NcDatetimePicker,
+		NcCheckboxRadioSwitch,
+		ShareIcon,
+		CloseIcon,
+		EditIcon,
+		ViewIcon,
+		UploadIcon,
+		MenuDownIcon,
+		DotsHorizontalIcon,
+	},
+	mixins: [ShareTypes, ShareRequests, SharesMixin],
+	props: {
+		shareRequestValue: {
+			type: Object,
+			required: false,
+		},
+		fileInfo: {
+			type: Object,
+			required: true,
+		},
+		share: {
+			type: Object,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			setPassword: false,
+			password: '',
+			noteToRecipient: '',
+			sharingPermission: BUNDLED_PERMISSIONS.UPLOAD_AND_UPDATE.toString(),
+			hasExpirationDate: false,
+			expirationDate: '',
+			hideDownload: false,
+			shareLabel: '',
+			setCustomPermissions: false,
+			advancedSectionAccordionExpanded: false,
+			permissionsEdit: false,
+			permissionsCreate: false,
+			permissionsDelete: false,
+			permissionsRead: false,
+			permissionsShare: false,
+			atomicPermissions: ATOMIC_PERMISSIONS,
+			bundledPermissions: BUNDLED_PERMISSIONS,
+		}
+	},
+
+	computed: {
+		title() {
+			let title = t('files_sharing', 'Share with ')
+			if (this.share) {
+				title = title + this.share.shareWithDisplayName
+				if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GROUP) {
+					title += ` (${t('files_sharing', 'group')})`
+				} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_ROOM) {
+					title += ` (${t('files_sharing', 'conversation')})`
+				} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE) {
+					title += ` (${t('files_sharing', 'remote')})`
+				} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_REMOTE_GROUP) {
+					title += ` (${t('files_sharing', 'remote group')})`
+				} else if (this.share.type === this.SHARE_TYPES.SHARE_TYPE_GUEST) {
+					title += ` (${t('files_sharing', 'guest')})`
+				}
+
+			} else {
+				title = title + this.shareRequestValue.displayName
+
+			}
+
+			return title
+		},
+		useUserAvatar() {
+			const shareType = this.shareRequestValue ? this.shareRequestValue.shareType : this.share.shareType
+			return shareType === this.SHARE_TYPES.SHARE_TYPE_USER
+		},
+		userAvatar() {
+			const avatar = {}
+			if (this.share) {
+				avatar.shareType = this.share.type
+				avatar.shareWith = this.share.shareWith
+				avatar.shareWithDisplayName = this.share.shareWithDisplayName
+				avatar.shareWithAvatar = this.share.shareWithAvatar
+			} else {
+				avatar.shareType = this.shareRequestValue.shareType
+				avatar.shareWith = this.shareRequestValue.shareWith
+				avatar.shareWithDisplayName = this.shareRequestValue.shareWithDisplayName
+				avatar.shareWithAvatar = this.shareRequestValue.shareWithAvatar
+			}
+
+			return avatar
+
+		},
+		isFolder() {
+			return this.fileInfo.type === 'dir'
+		},
+		allowsFileDrop() {
+			if (this.isFolder) {
+				const shareType = this.shareRequestValue ? this.shareRequestValue.shareType : this.share.shareType
+				if (shareType === this.SHARE_TYPES.SHARE_TYPE_LINK || shareType === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
+					return true
+				}
+			}
+			return false
+		},
+		shareButtonText() {
+			if (this.share) {
+				t('file_sharing', 'Update and copy link')
+			}
+
+			return t('file_sharing', 'Share & copy link')
+		},
+	},
+	watch: {
+		sharePermissions() {
+			this.switchToCustomPermissions()
+		},
+
+	},
+	mounted() {
+		this.initPermissions()
+		if (this.shareRequestValue) {
+			console.log('shareRequestValue', this.shareRequestValue)
+			console.dir(this.shareRequestValue)
+		}
+
+		console.dir(this.fileInfo.sharePermissions)
+
+		console.log(this.fileInfo.sharePermissions & OC.getCapabilities().files_sharing.default_permissions)
+		console.log('Default permissions', OC.getCapabilities().files_sharing.default_permissions)
+	},
+
+	methods: {
+		updatePermissions({
+			isEditChecked = this.canEdit,
+			isCreateChecked = this.canCreate,
+			isDeleteChecked = this.canDelete,
+			isReshareChecked = this.canReshare,
+			isDownloadChecked = this.canDownload,
+		} = {}) {
+			// calc permissions if checked
+			const permissions = 0
+				| (this.hasRead ? this.permissionsRead : 0)
+				| (isCreateChecked ? this.permissionsCreate : 0)
+				| (isDeleteChecked ? this.permissionsDelete : 0)
+				| (isEditChecked ? this.permissionsEdit : 0)
+				| (isReshareChecked ? this.permissionsShare : 0)
+
+			if (this.share) {
+				this.share.permissions = permissions
+				if (this.share.hasDownloadPermission !== isDownloadChecked) {
+					this.share.hasDownloadPermission = isDownloadChecked
+				}
+			} else {
+				this.fileInfo.sharePermissions = permissions
+			}
+		},
+		shareAndCopyLink() {
+			if (this.share) {
+				this.updatePermissions()
+				this.queueUpdate('permissions', 'attributes')
+			} else {
+				this.addShare(this.shareRequestValue, this.fileInfo, new Config())
+			}
+		},
+		switchToCustomPermissions() {
+			if (parseInt(this.sharingPermission) === -1) {
+				this.advancedSectionAccordionExpanded = true
+				this.setCustomPermissions = true
+			}
+		},
+		initPermissions() {
+			if (this.share) {
+				this.sharingPermission = this.share.permissions.toString()
+			}
+
+		},
+		/**
+		 * Process the new share request
+		 *
+		 * @param {object} value the multiselect option
+		 * @param {object} fileInfo file data
+		 * @param {Config} config instance configs
+		 */
+		async addShare(value, fileInfo, config) {
+			// Clear the displayed selection
+			this.value = null
+
+			// handle externalResults from OCA.Sharing.ShareSearch
+			if (value.handler) {
+				const share = await value.handler(this)
+				this.$emit('add:share', new Share(share))
+				return true
+			}
+
+			// this.loading = true // Are we adding loaders the new share flow?
+			console.debug('Adding a new share from the input for', value)
+			try {
+				let password = null
+
+				if (config.enforcePasswordForPublicLink
+					&& value.shareType === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
+					password = await GeneratePassword()
+				}
+
+				const path = (fileInfo.path + '/' + fileInfo.name).replace('//', '/')
+				const share = await this.createShare({
+					path,
+					shareType: value.shareType,
+					shareWith: value.shareWith,
+					password,
+					permissions: fileInfo.sharePermissions & OC.getCapabilities().files_sharing.default_permissions,
+					attributes: JSON.stringify(fileInfo.shareAttributes),
+				})
+
+				// If we had a password, we need to show it to the user as it was generated
+				if (password) {
+					share.newPassword = password
+					// Wait for the newly added share
+					const component = await new Promise(resolve => {
+						this.$emit('add:share', share, resolve)
+					})
+
+					// open the menu on the
+					// freshly created share component
+					component.open = true
+				} else {
+					// Else we just add it normally
+					this.$emit('add:share', share)
+				}
+			} catch (error) {
+				console.error('Error while adding new share', error)
+			} finally {
+				// this.loading = false // No loader here yet
+			}
+		},
+		async removeShare() {
+			this.$emit('close-sharing-details')
+			await this.onDelete()
+			this.share = null
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.sharingTabDetailsView {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 96%;
+	margin: 0 auto;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		margin: 0.2em;
+
+		span {
+			display: flex;
+			align-items: center;
+
+			h1 {
+				font-size: 14px;
+				padding-left: 0.3em;
+			}
+
+		}
+	}
+
+	&__quick-permissions {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 0.2em;
+		width: 100%;
+		margin: 0 auto;
+		border-radius: 0;
+
+		div {
+			width: 100%;
+
+			span {
+				width: 100%;
+
+				span:nth-child(1) {
+					align-items: center;
+					justify-content: center;
+					color: var(--color-primary-element);
+					padding: 0.1em;
+				}
+
+				::v-deep label {
+
+					span {
+						display: flex;
+						flex-direction: column;
+					}
+				}
+			}
+
+		}
+	}
+
+	&__advanced-control {
+		width: 100%;
+
+		button {
+			margin-top: 0.5em;
+		}
+
+	}
+
+	&__advanced {
+		width: 100%;
+		margin-bottom: 0.5em;
+		text-align: left;
+		padding-left: 0;
+
+		section {
+
+			textarea,
+			div.mx-datepicker {
+				width: 100%;
+			}
+
+			/*
+              The following style is applied out of the component's scope
+              to remove padding from the label.checkbox-radio-switch__label,
+              which is used to group radio checkbox items. The use of ::v-deep
+              ensures that the padding is modified without being affected by
+              the component's scoping.
+              Without this achieving left alignment for the checkboxes would not
+              be possible.
+            */
+			span {
+				::v-deep label {
+					padding-left: 0 !important;
+					background-color: initial !important;
+					border: none !important;
+				}
+			}
+
+			section.custom-permissions-group {
+				padding-left: 1.5em;
+			}
+		}
+	}
+
+	&__footer {
+		width: 100%;
+		display: flex;
+		position: sticky;
+		bottom: 0;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: flex-start;
+
+		>button:first-child {
+			color: rgb(223, 7, 7);
+		}
+
+		.button-group {
+			display: flex;
+			justify-content: space-between;
+			width: 100%;
+			margin-top: 16px;
+
+			button {
+				margin-left: 16px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/apps/files_sharing/src/views/SharingList.vue b/apps/files_sharing/src/views/SharingList.vue
index 05dc87d9b0760..eabcf77b6c848 100644
--- a/apps/files_sharing/src/views/SharingList.vue
+++ b/apps/files_sharing/src/views/SharingList.vue
@@ -27,7 +27,8 @@
 			:file-info="fileInfo"
 			:share="share"
 			:is-unique="isUnique(share)"
-			@remove:share="removeShare" />
+			@remove:share="removeShare"
+			@open-sharing-details="onOpenSharingDetails(share)" />
 	</ul>
 </template>
 
@@ -83,6 +84,13 @@ export default {
 			// eslint-disable-next-line vue/no-mutating-props
 			this.shares.splice(index, 1)
 		},
+		onOpenSharingDetails(share) {
+			const openShareDetailsEventData = {
+				fileInfo: this.fileInfo,
+				share,
+			}
+			this.$emit('open-sharing-details', openShareDetailsEventData)
+		},
 	},
 }
 </script>
diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index bfaf8a766eed4..9947f0d159555 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -29,7 +29,7 @@
 		</div>
 
 		<!-- shares content -->
-		<div v-else class="sharingTab__content">
+		<div v-if="!showSharingDetailsView" class="sharingTab__content">
 			<!-- shared with me information -->
 			<SharingEntrySimple v-if="isSharedWithMe" v-bind="sharedWithMe" class="sharing-entry__reshare">
 				<template #avatar>
@@ -46,7 +46,7 @@
 				:link-shares="linkShares"
 				:reshare="reshare"
 				:shares="shares"
-				@add:share="addShare" />
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- link shares list -->
 			<SharingLinkList v-if="!loading"
@@ -59,7 +59,8 @@
 			<SharingList v-if="!loading"
 				ref="shareList"
 				:shares="shares"
-				:file-info="fileInfo" />
+				:file-info="fileInfo"
+				@open-sharing-details="toggleShareDetailsView" />
 
 			<!-- inherited shares -->
 			<SharingInherited v-if="canReshare && !loading" :file-info="fileInfo" />
@@ -74,6 +75,15 @@
 				:name="fileInfo.name" />
 		</div>
 
+		<!-- share details -->
+		<div v-else>
+			<SharingDetailsTab :share-request-value="shareDetailsData.shareRequestValue"
+				:file-info="shareDetailsData.fileInfo"
+				:share="shareDetailsData.share"
+				@close-sharing-details="toggleShareDetailsView"
+				@add:share="addShare" />
+		</div>
+
 		<!-- additional entries, use it with cautious -->
 		<div v-for="(section, index) in sections"
 			:ref="'section-' + index"
@@ -102,6 +112,7 @@ import SharingInput from '../components/SharingInput.vue'
 import SharingInherited from './SharingInherited.vue'
 import SharingLinkList from './SharingLinkList.vue'
 import SharingList from './SharingList.vue'
+import SharingDetailsTab from './SharingDetailsTab.vue'
 
 export default {
 	name: 'SharingTab',
@@ -115,6 +126,7 @@ export default {
 		SharingInput,
 		SharingLinkList,
 		SharingList,
+		SharingDetailsTab,
 	},
 
 	mixins: [ShareTypes],
@@ -137,6 +149,8 @@ export default {
 
 			sections: OCA.Sharing.ShareTabSections.getSections(),
 			projectsEnabled: loadState('core', 'projects_enabled', false),
+			showSharingDetailsView: false,
+			shareDetailsData: {},
 		}
 	},
 
@@ -307,7 +321,7 @@ export default {
 						'Shared with you by {owner}',
 						{ owner: this.fileInfo.shareOwner },
 						undefined,
-						{ escape: false }
+						{ escape: false },
 					),
 					user: this.fileInfo.shareOwnerId,
 				}
@@ -321,7 +335,7 @@ export default {
 		 * @param {Share} share the share to add to the array
 		 * @param {Function} [resolve] a function to run after the share is added and its component initialized
 		 */
-		addShare(share, resolve = () => {}) {
+		addShare(share, resolve = () => { }) {
 			// only catching share type MAIL as link shares are added differently
 			// meaning: not from the ShareInput
 			if (share.type === this.SHARE_TYPES.SHARE_TYPE_EMAIL) {
@@ -355,6 +369,18 @@ export default {
 				}
 			})
 		},
+
+		toggleShareDetailsView(eventData) {
+			if (eventData) {
+				// If no share request value, set to null
+				// Implies existing share
+				if (!eventData.shareRequestValue) {
+					eventData.shareRequestValue = null
+				}
+				this.shareDetailsData = eventData
+			}
+			this.showSharingDetailsView = !this.showSharingDetailsView
+		},
 	},
 }
 </script>
@@ -368,6 +394,7 @@ export default {
 	&__content {
 		padding: 0 6px;
 	}
+
 	&__additionalContent {
 		margin: 44px 0;
 	}
diff --git a/apps/settings/src/components/UserList/UserRow.vue b/apps/settings/src/components/UserList/UserRow.vue
new file mode 100644
index 0000000000000..797156f18822a
--- /dev/null
+++ b/apps/settings/src/components/UserList/UserRow.vue
@@ -0,0 +1,689 @@
+<!--
+  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  - @author Gary Kim <gary@garykim.dev>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<!-- Obfuscated user: Logged in user does not have permissions to see all of the data -->
+	<div v-if="Object.keys(user).length ===1" :data-id="user.id" class="row">
+		<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
+			class="avatar">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				:src="generateAvatar(user.id, isDarkTheme)"
+				alt=""
+				height="32"
+				width="32">
+		</div>
+		<div class="name">
+			{{ user.id }}
+		</div>
+		<div class="obfuscated">
+			{{ t('settings','You do not have permissions to see the details of this user') }}
+		</div>
+	</div>
+
+	<!-- User full data -->
+	<UserRowSimple v-else-if="!editing"
+		:editing.sync="editing"
+		:feedback-message="feedbackMessage"
+		:groups="groups"
+		:languages="languages"
+		:loading="loading"
+		:opened-menu.sync="openedMenu"
+		:settings="settings"
+		:show-config="showConfig"
+		:sub-admins-groups="subAdminsGroups"
+		:user-actions="userActions"
+		:user="user"
+		:is-dark-theme="isDarkTheme"
+		:class="{'row--menu-opened': openedMenu}" />
+	<div v-else
+		:class="{
+			'disabled': loading.delete || loading.disable,
+			'row--menu-opened': openedMenu
+		}"
+		:data-id="user.id"
+		class="row row--editable">
+		<div :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}"
+			class="avatar">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				:src="generateAvatar(user.id, isDarkTheme)"
+				alt=""
+				height="32"
+				width="32">
+		</div>
+		<!-- dirty hack to ellipsis on two lines -->
+		<div v-if="user.backendCapabilities.setDisplayName" class="displayName">
+			<form :class="{'icon-loading-small': loading.displayName}"
+				class="displayName"
+				@submit.prevent="updateDisplayName">
+				<input :id="'displayName'+user.id+rand"
+					ref="displayName"
+					:disabled="loading.displayName||loading.all"
+					:value="user.displayname"
+					autocapitalize="off"
+					autocomplete="off"
+					autocorrect="off"
+					spellcheck="false"
+					type="text">
+				<input class="icon-confirm"
+					type="submit"
+					value="">
+			</form>
+		</div>
+		<div v-else class="name">
+			{{ user.id }}
+			<div class="displayName subtitle">
+				<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+					{{ user.displayname }}
+				</div>
+			</div>
+		</div>
+		<form v-if="settings.canChangePassword && user.backendCapabilities.setPassword"
+			:class="{'icon-loading-small': loading.password}"
+			class="password"
+			@submit.prevent="updatePassword">
+			<input :id="'password'+user.id+rand"
+				ref="password"
+				:disabled="loading.password || loading.all"
+				:minlength="minPasswordLength"
+				maxlength="469"
+				:placeholder="t('settings', 'Add new password')"
+				autocapitalize="off"
+				autocomplete="new-password"
+				autocorrect="off"
+				required
+				spellcheck="false"
+				type="password"
+				value="">
+			<input class="icon-confirm" type="submit" value="">
+		</form>
+		<div v-else />
+		<form :class="{'icon-loading-small': loading.mailAddress}"
+			class="mailAddress"
+			@submit.prevent="updateEmail">
+			<input :id="'mailAddress'+user.id+rand"
+				ref="mailAddress"
+				:disabled="loading.mailAddress||loading.all"
+				:placeholder="t('settings', 'Add new email address')"
+				:value="user.email"
+				autocapitalize="off"
+				autocomplete="new-password"
+				autocorrect="off"
+				spellcheck="false"
+				type="email">
+			<input class="icon-confirm" type="submit" value="">
+		</form>
+		<div :class="{'icon-loading-small': loading.groups}" class="groups">
+			<NcMultiselect :close-on-select="false"
+				:disabled="loading.groups||loading.all"
+				:limit="2"
+				:multiple="true"
+				:options="availableGroups"
+				:placeholder="t('settings', 'Add user to group')"
+				:tag-width="60"
+				:taggable="settings.isAdmin"
+				:value="userGroups"
+				class="multiselect-vue"
+				label="name"
+				tag-placeholder="create"
+				track-by="id"
+				@remove="removeUserGroup"
+				@select="addUserGroup"
+				@tag="createGroup">
+				<span slot="noResult">{{ t('settings', 'No results') }}</span>
+			</NcMultiselect>
+		</div>
+		<div v-if="subAdminsGroups.length>0 && settings.isAdmin"
+			:class="{'icon-loading-small': loading.subadmins}"
+			class="subadmins">
+			<NcMultiselect :close-on-select="false"
+				:disabled="loading.subadmins||loading.all"
+				:limit="2"
+				:multiple="true"
+				:options="subAdminsGroups"
+				:placeholder="t('settings', 'Set user as admin for')"
+				:tag-width="60"
+				:value="userSubAdminsGroups"
+				class="multiselect-vue"
+				label="name"
+				track-by="id"
+				@remove="removeUserSubAdmin"
+				@select="addUserSubAdmin">
+				<span slot="noResult">{{ t('settings', 'No results') }}</span>
+			</NcMultiselect>
+		</div>
+		<div :title="usedSpace"
+			:class="{'icon-loading-small': loading.quota}"
+			class="quota">
+			<NcMultiselect :allow-empty="false"
+				:disabled="loading.quota||loading.all"
+				:options="quotaOptions"
+				:placeholder="t('settings', 'Select user quota')"
+				:taggable="true"
+				:value="userQuota"
+				class="multiselect-vue"
+				label="label"
+				tag-placeholder="create"
+				track-by="id"
+				@input="setUserQuota"
+				@tag="validateQuota" />
+		</div>
+		<div v-if="showConfig.showLanguages"
+			:class="{'icon-loading-small': loading.languages}"
+			class="languages">
+			<NcMultiselect :allow-empty="false"
+				:disabled="loading.languages||loading.all"
+				:options="languages"
+				:placeholder="t('settings', 'No language set')"
+				:value="userLanguage"
+				class="multiselect-vue"
+				group-label="label"
+				group-values="languages"
+				label="name"
+				track-by="code"
+				@input="setUserLanguage" />
+		</div>
+
+		<!-- don't show this on edit mode -->
+		<div v-if="showConfig.showStoragePath || showConfig.showUserBackend"
+			class="storageLocation" />
+		<div v-if="showConfig.showLastLogin" />
+
+		<div class="userActions">
+			<div v-if="!loading.all"
+				class="toggleUserActions">
+				<NcActions>
+					<NcActionButton icon="icon-checkmark"
+						:title="t('settings', 'Done')"
+						:aria-label="t('settings', 'Done')"
+						@click="editing = false" />
+				</NcActions>
+				<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
+					<button class="icon-more"
+						@click.prevent="toggleMenu" />
+					<div :class="{ 'open': openedMenu }" class="popovermenu">
+						<NcPopoverMenu :menu="userActions" />
+					</div>
+				</div>
+			</div>
+			<div :style="{opacity: feedbackMessage !== '' ? 1 : 0}"
+				class="feedback">
+				<div class="icon-checkmark" />
+				{{ feedbackMessage }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+
+import {
+	NcPopoverMenu,
+	NcMultiselect,
+	NcActions,
+	NcActionButton,
+} from '@nextcloud/vue'
+import UserRowSimple from './UserRowSimple'
+import UserRowMixin from '../../mixins/UserRowMixin'
+
+export default {
+	name: 'UserRow',
+	components: {
+		UserRowSimple,
+		NcPopoverMenu,
+		NcActions,
+		NcActionButton,
+		NcMultiselect,
+	},
+	directives: {
+		ClickOutside,
+	},
+	mixins: [UserRowMixin],
+	props: {
+		user: {
+			type: Object,
+			required: true,
+		},
+		settings: {
+			type: Object,
+			default: () => ({}),
+		},
+		groups: {
+			type: Array,
+			default: () => [],
+		},
+		subAdminsGroups: {
+			type: Array,
+			default: () => [],
+		},
+		quotaOptions: {
+			type: Array,
+			default: () => [],
+		},
+		showConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+		languages: {
+			type: Array,
+			required: true,
+		},
+		externalActions: {
+			type: Array,
+			default: () => [],
+		},
+		isDarkTheme: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			rand: parseInt(Math.random() * 1000),
+			openedMenu: false,
+			feedbackMessage: '',
+			editing: false,
+			loading: {
+				all: false,
+				displayName: false,
+				password: false,
+				mailAddress: false,
+				groups: false,
+				subadmins: false,
+				quota: false,
+				delete: false,
+				disable: false,
+				languages: false,
+				wipe: false,
+			},
+		}
+	},
+	computed: {
+		/* USER POPOVERMENU ACTIONS */
+		userActions() {
+			const actions = [
+				{
+					icon: 'icon-delete',
+					text: t('settings', 'Delete user'),
+					action: this.deleteUser,
+				},
+				{
+					icon: 'icon-delete',
+					text: t('settings', 'Wipe all devices'),
+					action: this.wipeUserDevices,
+				},
+				{
+					icon: this.user.enabled ? 'icon-close' : 'icon-add',
+					text: this.user.enabled ? t('settings', 'Disable user') : t('settings', 'Enable user'),
+					action: this.enableDisableUser,
+				},
+			]
+			if (this.user.email !== null && this.user.email !== '') {
+				actions.push({
+					icon: 'icon-mail',
+					text: t('settings', 'Resend welcome email'),
+					action: this.sendWelcomeMail,
+				})
+			}
+			return actions.concat(this.externalActions)
+		},
+	},
+
+	methods: {
+		/* MENU HANDLING */
+		toggleMenu() {
+			this.openedMenu = !this.openedMenu
+		},
+		hideMenu() {
+			this.openedMenu = false
+		},
+
+		wipeUserDevices() {
+			const userid = this.user.id
+			OC.dialogs.confirmDestructive(
+				t('settings', 'In case of lost device or exiting the organization, this can remotely wipe the Nextcloud data from all devices associated with {userid}. Only works if the devices are connected to the internet.', { userid }),
+				t('settings', 'Remote wipe of devices'),
+				{
+					type: OC.dialogs.YES_NO_BUTTONS,
+					confirm: t('settings', 'Wipe {userid}\'s devices', { userid }),
+					confirmClasses: 'error',
+					cancel: t('settings', 'Cancel'),
+				},
+				(result) => {
+					if (result) {
+						this.loading.wipe = true
+						this.loading.all = true
+						this.$store.dispatch('wipeUserDevices', userid)
+							.then(() => {
+								this.loading.wipe = false
+								this.loading.all = false
+							})
+					}
+				},
+				true
+			)
+		},
+
+		deleteUser() {
+			const userid = this.user.id
+			OC.dialogs.confirmDestructive(
+				t('settings', 'Fully delete {userid}\'s account including all their personal files, app data, etc.', { userid }),
+				t('settings', 'Account deletion'),
+				{
+					type: OC.dialogs.YES_NO_BUTTONS,
+					confirm: t('settings', 'Delete {userid}\'s account', { userid }),
+					confirmClasses: 'error',
+					cancel: t('settings', 'Cancel'),
+				},
+				(result) => {
+					if (result) {
+						this.loading.delete = true
+						this.loading.all = true
+						return this.$store.dispatch('deleteUser', userid)
+							.then(() => {
+								this.loading.delete = false
+								this.loading.all = false
+							})
+					}
+				},
+				true
+			)
+		},
+
+		enableDisableUser() {
+			this.loading.delete = true
+			this.loading.all = true
+			const userid = this.user.id
+			const enabled = !this.user.enabled
+			return this.$store.dispatch('enableDisableUser', {
+				userid,
+				enabled,
+			})
+				.then(() => {
+					this.loading.delete = false
+					this.loading.all = false
+				})
+		},
+
+		/**
+		 * Set user displayName
+		 *
+		 * @param {string} displayName The display name
+		 */
+		updateDisplayName() {
+			const displayName = this.$refs.displayName.value
+			this.loading.displayName = true
+			this.$store.dispatch('setUserData', {
+				userid: this.user.id,
+				key: 'displayname',
+				value: displayName,
+			}).then(() => {
+				this.loading.displayName = false
+				this.$refs.displayName.value = displayName
+			})
+		},
+
+		/**
+		 * Set user password
+		 *
+		 * @param {string} password The email address
+		 */
+		updatePassword() {
+			const password = this.$refs.password.value
+			this.loading.password = true
+			this.$store.dispatch('setUserData', {
+				userid: this.user.id,
+				key: 'password',
+				value: password,
+			}).then(() => {
+				this.loading.password = false
+				this.$refs.password.value = '' // empty & show placeholder
+			})
+		},
+
+		/**
+		 * Set user mailAddress
+		 *
+		 * @param {string} mailAddress The email address
+		 */
+		updateEmail() {
+			const mailAddress = this.$refs.mailAddress.value
+			this.loading.mailAddress = true
+			this.$store.dispatch('setUserData', {
+				userid: this.user.id,
+				key: 'email',
+				value: mailAddress,
+			}).then(() => {
+				this.loading.mailAddress = false
+				this.$refs.mailAddress.value = mailAddress
+			})
+		},
+
+		/**
+		 * Create a new group and add user to it
+		 *
+		 * @param {string} gid Group id
+		 */
+		async createGroup(gid) {
+			this.loading = { groups: true, subadmins: true }
+			try {
+				await this.$store.dispatch('addGroup', gid)
+				const userid = this.user.id
+				await this.$store.dispatch('addUserGroup', { userid, gid })
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading = { groups: false, subadmins: false }
+			}
+			return this.$store.getters.getGroups[this.groups.length]
+		},
+
+		/**
+		 * Add user to group
+		 *
+		 * @param {object} group Group object
+		 */
+		async addUserGroup(group) {
+			if (group.canAdd === false) {
+				return false
+			}
+			this.loading.groups = true
+			const userid = this.user.id
+			const gid = group.id
+			try {
+				await this.$store.dispatch('addUserGroup', { userid, gid })
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.groups = false
+			}
+		},
+
+		/**
+		 * Remove user from group
+		 *
+		 * @param {object} group Group object
+		 */
+		async removeUserGroup(group) {
+			if (group.canRemove === false) {
+				return false
+			}
+
+			this.loading.groups = true
+			const userid = this.user.id
+			const gid = group.id
+
+			try {
+				await this.$store.dispatch('removeUserGroup', {
+					userid,
+					gid,
+				})
+				this.loading.groups = false
+				// remove user from current list if current list is the removed group
+				if (this.$route.params.selectedGroup === gid) {
+					this.$store.commit('deleteUser', userid)
+				}
+			} catch {
+				this.loading.groups = false
+			}
+		},
+
+		/**
+		 * Add user to group
+		 *
+		 * @param {object} group Group object
+		 */
+		async addUserSubAdmin(group) {
+			this.loading.subadmins = true
+			const userid = this.user.id
+			const gid = group.id
+
+			try {
+				await this.$store.dispatch('addUserSubAdmin', {
+					userid,
+					gid,
+				})
+				this.loading.subadmins = false
+			} catch (error) {
+				console.error(error)
+			}
+		},
+
+		/**
+		 * Remove user from group
+		 *
+		 * @param {object} group Group object
+		 */
+		async removeUserSubAdmin(group) {
+			this.loading.subadmins = true
+			const userid = this.user.id
+			const gid = group.id
+
+			try {
+				await this.$store.dispatch('removeUserSubAdmin', {
+					userid,
+					gid,
+				})
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.subadmins = false
+			}
+		},
+
+		/**
+		 * Dispatch quota set request
+		 *
+		 * @param {string | object} quota Quota in readable format '5 GB' or Object {id: '5 GB', label: '5GB'}
+		 * @return {string}
+		 */
+		async setUserQuota(quota = 'none') {
+			this.loading.quota = true
+			// ensure we only send the preset id
+			quota = quota.id ? quota.id : quota
+
+			try {
+				await this.$store.dispatch('setUserData', {
+					userid: this.user.id,
+					key: 'quota',
+					value: quota,
+				})
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.quota = false
+			}
+			return quota
+		},
+
+		/**
+		 * Validate quota string to make sure it's a valid human file size
+		 *
+		 * @param {string} quota Quota in readable format '5 GB'
+		 * @return {Promise|boolean}
+		 */
+		validateQuota(quota) {
+			// only used for new presets sent through @Tag
+			const validQuota = OC.Util.computerFileSize(quota)
+			if (validQuota !== null && validQuota >= 0) {
+				// unify format output
+				return this.setUserQuota(OC.Util.humanFileSize(OC.Util.computerFileSize(quota)))
+			}
+			// if no valid do not change
+			return false
+		},
+
+		/**
+		 * Dispatch language set request
+		 *
+		 * @param {object} lang language object {code:'en', name:'English'}
+		 * @return {object}
+		 */
+		async setUserLanguage(lang) {
+			this.loading.languages = true
+			// ensure we only send the preset id
+			try {
+				await this.$store.dispatch('setUserData', {
+					userid: this.user.id,
+					key: 'language',
+					value: lang.code,
+				})
+			} catch (error) {
+				console.error(error)
+			} finally {
+				this.loading.languages = false
+			}
+			return lang
+		},
+
+		/**
+		 * Dispatch new welcome mail request
+		 */
+		sendWelcomeMail() {
+			this.loading.all = true
+			this.$store.dispatch('sendWelcomeMail', this.user.id)
+				.then(success => {
+					if (success) {
+						// Show feedback to indicate the success
+						this.feedbackMessage = t('setting', 'Welcome mail sent!')
+						setTimeout(() => {
+							this.feedbackMessage = ''
+						}, 2000)
+					}
+					this.loading.all = false
+				})
+		},
+
+	},
+}
+</script>
+<style scoped lang="scss">
+	// Force menu to be above other rows
+	.row--menu-opened {
+		z-index: 1 !important;
+	}
+	.row::v-deep .multiselect__single {
+		z-index: auto !important;
+	}
+</style>
diff --git a/apps/settings/src/components/UserList/UserRowSimple.vue b/apps/settings/src/components/UserList/UserRowSimple.vue
new file mode 100644
index 0000000000000..eddc16a64a5cd
--- /dev/null
+++ b/apps/settings/src/components/UserList/UserRowSimple.vue
@@ -0,0 +1,205 @@
+<template>
+	<div class="row"
+		:class="{'disabled': loading.delete || loading.disable}"
+		:data-id="user.id">
+		<div class="avatar" :class="{'icon-loading-small': loading.delete || loading.disable || loading.wipe}">
+			<img v-if="!loading.delete && !loading.disable && !loading.wipe"
+				alt=""
+				width="32"
+				height="32"
+				:src="generateAvatar(user.id, isDarkTheme)">
+		</div>
+		<!-- dirty hack to ellipsis on two lines -->
+		<div class="name">
+			<div class="displayName subtitle">
+				<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+					<strong>
+						{{ user.displayname }}
+					</strong>
+				</div>
+			</div>
+			{{ user.id }}
+		</div>
+		<div />
+		<div class="mailAddress">
+			<div :title="user.email !== null && user.email.length > 20 ? user.email : ''" class="cellText">
+				{{ user.email }}
+			</div>
+		</div>
+		<div class="groups">
+			{{ userGroupsLabels }}
+		</div>
+		<div v-if="subAdminsGroups.length > 0 && settings.isAdmin" class="subAdminsGroups">
+			{{ userSubAdminsGroupsLabels }}
+		</div>
+		<div class="userQuota">
+			<div class="quota">
+				{{ userQuota }} ({{ usedSpace }})
+				<progress class="quota-user-progress"
+					:class="{'warn': usedQuota > 80}"
+					:value="usedQuota"
+					max="100" />
+			</div>
+		</div>
+		<div v-if="showConfig.showLanguages" class="languages">
+			{{ userLanguage.name }}
+		</div>
+		<div v-if="showConfig.showUserBackend || showConfig.showStoragePath" class="userBackend">
+			<div v-if="showConfig.showUserBackend" class="userBackend">
+				{{ user.backend }}
+			</div>
+			<div v-if="showConfig.showStoragePath" :title="user.storageLocation" class="storageLocation subtitle">
+				{{ user.storageLocation }}
+			</div>
+		</div>
+		<div v-if="showConfig.showLastLogin" :title="userLastLoginTooltip" class="lastLogin">
+			{{ userLastLogin }}
+		</div>
+
+		<div class="userActions">
+			<div v-if="canEdit && !loading.all" class="toggleUserActions">
+				<NcActions>
+					<NcActionButton icon="icon-rename"
+						:title="t('settings', 'Edit User')"
+						:aria-label="t('settings', 'Edit User')"
+						@click="toggleEdit" />
+				</NcActions>
+				<div class="userPopoverMenuWrapper">
+					<button v-click-outside="hideMenu"
+						class="icon-more"
+						:aria-label="t('settings', 'Toggle user actions menu')"
+						@click.prevent="toggleMenu" />
+					<div class="popovermenu" :class="{ 'open': openedMenu }" :aria-expanded="openedMenu">
+						<NcPopoverMenu :menu="userActions" />
+					</div>
+				</div>
+			</div>
+			<div class="feedback" :style="{opacity: feedbackMessage !== '' ? 1 : 0}">
+				<div class="icon-checkmark" />
+				{{ feedbackMessage }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
+import ClickOutside from 'vue-click-outside'
+import { getCurrentUser } from '@nextcloud/auth'
+import UserRowMixin from '../../mixins/UserRowMixin'
+export default {
+	name: 'UserRowSimple',
+	components: {
+		NcPopoverMenu,
+		NcActionButton,
+		NcActions,
+	},
+	directives: {
+		ClickOutside,
+	},
+	mixins: [UserRowMixin],
+	props: {
+		user: {
+			type: Object,
+			required: true,
+		},
+		loading: {
+			type: Object,
+			required: true,
+		},
+		showConfig: {
+			type: Object,
+			required: true,
+		},
+		userActions: {
+			type: Array,
+			required: true,
+		},
+		openedMenu: {
+			type: Boolean,
+			required: true,
+		},
+		feedbackMessage: {
+			type: String,
+			required: true,
+		},
+		subAdminsGroups: {
+			type: Array,
+			required: true,
+		},
+		settings: {
+			type: Object,
+			required: true,
+		},
+		isDarkTheme: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		userGroupsLabels() {
+			return this.userGroups
+				.map(group => group.name)
+				.join(', ')
+		},
+		userSubAdminsGroupsLabels() {
+			return this.userSubAdminsGroups
+				.map(group => group.name)
+				.join(', ')
+		},
+		usedSpace() {
+			if (this.user.quota.used) {
+				return t('settings', '{size} used', { size: OC.Util.humanFileSize(this.user.quota.used) })
+			}
+			return t('settings', '{size} used', { size: OC.Util.humanFileSize(0) })
+		},
+		canEdit() {
+			return getCurrentUser().uid !== this.user.id || this.settings.isAdmin
+		},
+		userQuota() {
+			let quota = this.user.quota.quota
+
+			if (quota === 'default') {
+				quota = this.settings.defaultQuota
+				if (quota !== 'none') {
+					// convert to numeric value to match what the server would usually return
+					quota = OC.Util.computerFileSize(quota)
+				}
+			}
+
+			// when the default quota is unlimited, the server returns -3 here, map it to "none"
+			if (quota === 'none' || quota === -3) {
+				return t('settings', 'Unlimited')
+			} else if (quota >= 0) {
+				return OC.Util.humanFileSize(quota)
+			}
+			return OC.Util.humanFileSize(0)
+		},
+	},
+	methods: {
+		toggleMenu() {
+			this.$emit('update:openedMenu', !this.openedMenu)
+		},
+		hideMenu() {
+			this.$emit('update:openedMenu', false)
+		},
+		toggleEdit() {
+			this.$emit('update:editing', true)
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+	.cellText {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+}
+	.icon-more {
+		background-color: var(--color-main-background);
+		border: 0;
+	}
+</style>