diff --git a/apps/settings/js/federationsettingsview.js b/apps/settings/js/federationsettingsview.js
index e05cc9f20f4e8..f5c7af8637a5a 100644
--- a/apps/settings/js/federationsettingsview.js
+++ b/apps/settings/js/federationsettingsview.js
@@ -129,7 +129,8 @@
 				if (
 					field === 'avatar' ||
 					field === 'email' ||
-					field === 'displayname'
+					field === 'displayname' ||
+					field === 'twitter'
 				) {
 					return;
 				}
diff --git a/apps/settings/lib/Settings/Personal/PersonalInfo.php b/apps/settings/lib/Settings/Personal/PersonalInfo.php
index fbbee7b81bbba..472ce0e1a1288 100644
--- a/apps/settings/lib/Settings/Personal/PersonalInfo.php
+++ b/apps/settings/lib/Settings/Personal/PersonalInfo.php
@@ -173,6 +173,7 @@ public function getForm(): TemplateResponse {
 			'userId' => $uid,
 			'displayName' => $this->getProperty($account, IAccountManager::PROPERTY_DISPLAYNAME),
 			'emailMap' => $this->getEmailMap($account),
+			'twitter' => $this->getProperty($account, IAccountManager::PROPERTY_TWITTER),
 			'languageMap' => $this->getLanguageMap($user),
 			'profileEnabledGlobally' => $this->profileManager->isProfileEnabled(),
 			'profileEnabled' => $this->profileManager->isProfileEnabled($user),
@@ -213,6 +214,7 @@ private function isFairUseOfFreePushService(): bool {
 	 */
 	private function getProperty(IAccount $account, string $property): array {
 		$property = [
+			'name' => $account->getProperty($property)->getName(),
 			'value' => $account->getProperty($property)->getValue(),
 			'scope' => $account->getProperty($property)->getScope(),
 			'verified' => $account->getProperty($property)->getVerified(),
diff --git a/apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue b/apps/settings/src/components/PersonalInfo/BiographySection.vue
similarity index 54%
rename from apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue
rename to apps/settings/src/components/PersonalInfo/BiographySection.vue
index c8464f7b243f5..f55357ca0813c 100644
--- a/apps/settings/src/components/PersonalInfo/BiographySection/BiographySection.vue
+++ b/apps/settings/src/components/PersonalInfo/BiographySection.vue
@@ -1,9 +1,9 @@
 <!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
 	-
 	- @author Christopher Ng <chrng8@gmail.com>
 	-
-	- @license GNU AGPL version 3 or any later version
+	- @license AGPL-3.0-or-later
 	-
 	- This program is free software: you can redistribute it and/or modify
 	- it under the terms of the GNU Affero General Public License as
@@ -12,7 +12,7 @@
 	-
 	- 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
+	- 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
@@ -21,23 +21,16 @@
 -->
 
 <template>
-	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="biography"
-			:scope.sync="biography.scope" />
-
-		<Biography :biography.sync="biography.value"
-			:scope.sync="biography.scope" />
-	</section>
+	<AccountPropertySection :property="biography"
+		:placeholder="t('settings', 'Your biography')" />
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import Biography from './Biography'
-import HeaderBar from '../shared/HeaderBar'
+import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
 
 const { biography } = loadState('settings', 'personalInfoParameters', {})
 
@@ -45,25 +38,13 @@ export default {
 	name: 'BiographySection',
 
 	components: {
-		Biography,
-		HeaderBar,
+		AccountPropertySection,
 	},
 
 	data() {
 		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY,
-			biography,
+			biography: { ...biography, readable: NAME_READABLE_ENUM[biography.name] },
 		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-section {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue
new file mode 100644
index 0000000000000..b9fe0b2af1112
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/DisplayNameSection.vue
@@ -0,0 +1,59 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- 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>
+	<AccountPropertySection :property="displayName"
+		:placeholder="t('settings', 'Your full name')"
+		:empty-string-valid="false"
+		:on-success="onSuccess" />
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+import { emit } from '@nextcloud/event-bus'
+
+import AccountPropertySection from './shared/AccountPropertySection.vue'
+
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+
+const { displayName } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'DisplayNameSection',
+
+	components: {
+		AccountPropertySection,
+	},
+
+	data() {
+		return {
+			displayName: { ...displayName, readable: NAME_READABLE_ENUM[displayName.name] },
+		}
+	},
+
+	methods: {
+		onSuccess(value) {
+			emit('settings:display-name:updated', value)
+		},
+	}
+}
+</script>
diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
deleted file mode 100644
index 58252bfbd63ec..0000000000000
--- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayName.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
-	-
-	- @author Christopher Ng <chrng8@gmail.com>
-	-
-	- @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>
-	<div class="displayname">
-		<input id="displayname"
-			type="text"
-			:placeholder="t('settings', 'Your full name')"
-			:value="displayName"
-			autocapitalize="none"
-			autocomplete="on"
-			autocorrect="off"
-			@input="onDisplayNameChange">
-
-		<div class="displayname__actions-container">
-			<transition name="fade">
-				<span v-if="showCheckmarkIcon" class="icon-checkmark" />
-				<span v-else-if="showErrorIcon" class="icon-error" />
-			</transition>
-		</div>
-	</div>
-</template>
-
-<script>
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import debounce from 'debounce'
-
-import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
-import { validateStringInput } from '../../../utils/validate'
-import logger from '../../../logger'
-
-// TODO Global avatar updating on events (e.g. updating the displayname) is currently being handled by global js, investigate using https://github.com/nextcloud/nextcloud-event-bus for global avatar updating
-
-export default {
-	name: 'DisplayName',
-
-	props: {
-		displayName: {
-			type: String,
-			required: true,
-		},
-		scope: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			initialDisplayName: this.displayName,
-			localScope: this.scope,
-			showCheckmarkIcon: false,
-			showErrorIcon: false,
-		}
-	},
-
-	methods: {
-		onDisplayNameChange(e) {
-			this.$emit('update:display-name', e.target.value)
-			this.debounceDisplayNameChange(e.target.value.trim())
-		},
-
-		debounceDisplayNameChange: debounce(async function(displayName) {
-			if (validateStringInput(displayName)) {
-				await this.updatePrimaryDisplayName(displayName)
-			}
-		}, 500),
-
-		async updatePrimaryDisplayName(displayName) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.DISPLAYNAME, displayName)
-				this.handleResponse({
-					displayName,
-					status: responseData.ocs?.meta?.status,
-				})
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update full name'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ displayName, status, errorMessage, error }) {
-			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialDisplayName = displayName
-				emit('settings:display-name:updated', displayName)
-				this.showCheckmarkIcon = true
-				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
-			} else {
-				showError(errorMessage)
-				logger.error(errorMessage, error)
-				this.showErrorIcon = true
-				setTimeout(() => { this.showErrorIcon = false }, 2000)
-			}
-		},
-
-		onScopeChange(scope) {
-			this.$emit('update:scope', scope)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.displayname {
-	display: grid;
-	align-items: center;
-
-	input {
-		grid-area: 1 / 1;
-		width: 100%;
-		height: 34px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px;
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-		font-family: var(--font-face);
-		cursor: text;
-	}
-
-	.displayname__actions-container {
-		grid-area: 1 / 1;
-		justify-self: flex-end;
-		height: 30px;
-
-		display: flex;
-		gap: 0 2px;
-		margin-right: 5px;
-
-		.icon-checkmark,
-		.icon-error {
-			height: 30px !important;
-			min-height: 30px !important;
-			width: 30px !important;
-			min-width: 30px !important;
-			top: 0;
-			right: 0;
-			float: none;
-		}
-	}
-}
-
-.fade-enter,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 200ms ease-out;
-}
-
-.fade-leave-active {
-	transition: opacity 300ms ease-out;
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue b/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
deleted file mode 100644
index d808369e9fb8a..0000000000000
--- a/apps/settings/src/components/PersonalInfo/DisplayNameSection/DisplayNameSection.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
-	-
-	- @author Christopher Ng <chrng8@gmail.com>
-	-
-	- @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>
-	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="displayname"
-			:is-editable="displayNameChangeSupported"
-			:is-valid-section="isValidSection"
-			:scope.sync="displayName.scope" />
-
-		<template v-if="displayNameChangeSupported">
-			<DisplayName :display-name.sync="displayName.value"
-				:scope.sync="displayName.scope" />
-		</template>
-
-		<span v-else>
-			{{ displayName.value || t('settings', 'No full name set') }}
-		</span>
-	</section>
-</template>
-
-<script>
-import { loadState } from '@nextcloud/initial-state'
-
-import DisplayName from './DisplayName'
-import HeaderBar from '../shared/HeaderBar'
-
-import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
-import { validateStringInput } from '../../../utils/validate'
-
-const { displayName } = loadState('settings', 'personalInfoParameters', {})
-const { displayNameChangeSupported } = loadState('settings', 'accountParameters', {})
-
-export default {
-	name: 'DisplayNameSection',
-
-	components: {
-		DisplayName,
-		HeaderBar,
-	},
-
-	data() {
-		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME,
-			displayNameChangeSupported,
-			displayName,
-		}
-	},
-
-	computed: {
-		isValidSection() {
-			return validateStringInput(this.displayName.value)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-section {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
index 3463daa575588..02bdf171a506b 100644
--- a/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
+++ b/apps/settings/src/components/PersonalInfo/EmailSection/EmailSection.vue
@@ -22,8 +22,8 @@
 
 <template>
 	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="email"
+		<HeaderBar :readable="accountProperty"
+			name="email"
 			:handle-scope-change="savePrimaryEmailScope"
 			:is-editable="true"
 			:is-multi-value-supported="true"
diff --git a/apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue b/apps/settings/src/components/PersonalInfo/HeadlineSection.vue
similarity index 54%
rename from apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue
rename to apps/settings/src/components/PersonalInfo/HeadlineSection.vue
index 1a608d2fc0211..880d0db73f82e 100644
--- a/apps/settings/src/components/PersonalInfo/HeadlineSection/HeadlineSection.vue
+++ b/apps/settings/src/components/PersonalInfo/HeadlineSection.vue
@@ -1,9 +1,9 @@
 <!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
 	-
 	- @author Christopher Ng <chrng8@gmail.com>
 	-
-	- @license GNU AGPL version 3 or any later version
+	- @license AGPL-3.0-or-later
 	-
 	- This program is free software: you can redistribute it and/or modify
 	- it under the terms of the GNU Affero General Public License as
@@ -12,7 +12,7 @@
 	-
 	- 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
+	- 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
@@ -21,23 +21,16 @@
 -->
 
 <template>
-	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="headline"
-			:scope.sync="headline.scope" />
-
-		<Headline :headline.sync="headline.value"
-			:scope.sync="headline.scope" />
-	</section>
+	<AccountPropertySection :property="headline"
+		:placeholder="t('settings', 'Your headline')" />
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import Headline from './Headline'
-import HeaderBar from '../shared/HeaderBar'
+import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
 
 const { headline } = loadState('settings', 'personalInfoParameters', {})
 
@@ -45,25 +38,13 @@ export default {
 	name: 'HeadlineSection',
 
 	components: {
-		Headline,
-		HeaderBar,
+		AccountPropertySection,
 	},
 
 	data() {
 		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE,
-			headline,
+			headline: { ...headline, readable: NAME_READABLE_ENUM[headline.name] },
 		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-section {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/HeadlineSection/Headline.vue b/apps/settings/src/components/PersonalInfo/HeadlineSection/Headline.vue
deleted file mode 100644
index 4cb7d63b52277..0000000000000
--- a/apps/settings/src/components/PersonalInfo/HeadlineSection/Headline.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
-	-
-	- @author Christopher Ng <chrng8@gmail.com>
-	-
-	- @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>
-	<div class="headline">
-		<input id="headline"
-			type="text"
-			:placeholder="t('settings', 'Your headline')"
-			:value="headline"
-			autocapitalize="none"
-			autocomplete="on"
-			autocorrect="off"
-			@input="onHeadlineChange">
-
-		<div class="headline__actions-container">
-			<transition name="fade">
-				<span v-if="showCheckmarkIcon" class="icon-checkmark" />
-				<span v-else-if="showErrorIcon" class="icon-error" />
-			</transition>
-		</div>
-	</div>
-</template>
-
-<script>
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import debounce from 'debounce'
-
-import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
-import logger from '../../../logger'
-
-export default {
-	name: 'Headline',
-
-	props: {
-		headline: {
-			type: String,
-			required: true,
-		},
-		scope: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			initialHeadline: this.headline,
-			localScope: this.scope,
-			showCheckmarkIcon: false,
-			showErrorIcon: false,
-		}
-	},
-
-	methods: {
-		onHeadlineChange(e) {
-			this.$emit('update:headline', e.target.value)
-			this.debounceHeadlineChange(e.target.value.trim())
-		},
-
-		debounceHeadlineChange: debounce(async function(headline) {
-			await this.updatePrimaryHeadline(headline)
-		}, 500),
-
-		async updatePrimaryHeadline(headline) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.HEADLINE, headline)
-				this.handleResponse({
-					headline,
-					status: responseData.ocs?.meta?.status,
-				})
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update headline'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ headline, status, errorMessage, error }) {
-			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialHeadline = headline
-				emit('settings:headline:updated', headline)
-				this.showCheckmarkIcon = true
-				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
-			} else {
-				showError(errorMessage)
-				logger.error(errorMessage, error)
-				this.showErrorIcon = true
-				setTimeout(() => { this.showErrorIcon = false }, 2000)
-			}
-		},
-
-		onScopeChange(scope) {
-			this.$emit('update:scope', scope)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.headline {
-	display: grid;
-	align-items: center;
-
-	input {
-		grid-area: 1 / 1;
-		width: 100%;
-		height: 34px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px;
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-		font-family: var(--font-face);
-		cursor: text;
-	}
-
-	.headline__actions-container {
-		grid-area: 1 / 1;
-		justify-self: flex-end;
-		height: 30px;
-
-		display: flex;
-		gap: 0 2px;
-		margin-right: 5px;
-
-		.icon-checkmark,
-		.icon-error {
-			height: 30px !important;
-			min-height: 30px !important;
-			width: 30px !important;
-			min-width: 30px !important;
-			top: 0;
-			right: 0;
-			float: none;
-		}
-	}
-}
-
-.fade-enter,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 200ms ease-out;
-}
-
-.fade-leave-active {
-	transition: opacity 300ms ease-out;
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
index 90882b2386990..6d02b8b874efb 100644
--- a/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
+++ b/apps/settings/src/components/PersonalInfo/LanguageSection/LanguageSection.vue
@@ -22,8 +22,8 @@
 
 <template>
 	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="language" />
+		<HeaderBar :readable="accountProperty"
+			name="language" />
 
 		<template v-if="isEditable">
 			<Language :common-languages="commonLanguages"
diff --git a/apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue b/apps/settings/src/components/PersonalInfo/OrganisationSection.vue
similarity index 53%
rename from apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue
rename to apps/settings/src/components/PersonalInfo/OrganisationSection.vue
index b436b2edd0b06..96fa62bb2ef55 100644
--- a/apps/settings/src/components/PersonalInfo/OrganisationSection/OrganisationSection.vue
+++ b/apps/settings/src/components/PersonalInfo/OrganisationSection.vue
@@ -1,9 +1,9 @@
 <!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
 	-
 	- @author Christopher Ng <chrng8@gmail.com>
 	-
-	- @license GNU AGPL version 3 or any later version
+	- @license AGPL-3.0-or-later
 	-
 	- This program is free software: you can redistribute it and/or modify
 	- it under the terms of the GNU Affero General Public License as
@@ -12,7 +12,7 @@
 	-
 	- 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
+	- 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
@@ -21,23 +21,16 @@
 -->
 
 <template>
-	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="organisation"
-			:scope.sync="organisation.scope" />
-
-		<Organisation :organisation.sync="organisation.value"
-			:scope.sync="organisation.scope" />
-	</section>
+	<AccountPropertySection :property="organisation"
+		:placeholder="t('settings', 'Your organisation')" />
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import Organisation from './Organisation'
-import HeaderBar from '../shared/HeaderBar'
+import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
 
 const { organisation } = loadState('settings', 'personalInfoParameters', {})
 
@@ -45,25 +38,13 @@ export default {
 	name: 'OrganisationSection',
 
 	components: {
-		Organisation,
-		HeaderBar,
+		AccountPropertySection,
 	},
 
 	data() {
 		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION,
-			organisation,
+			organisation: { ...organisation, readable: NAME_READABLE_ENUM[organisation.name] },
 		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-section {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/OrganisationSection/Organisation.vue b/apps/settings/src/components/PersonalInfo/OrganisationSection/Organisation.vue
deleted file mode 100644
index 4f69d7b6b9ae3..0000000000000
--- a/apps/settings/src/components/PersonalInfo/OrganisationSection/Organisation.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
-	-
-	- @author Christopher Ng <chrng8@gmail.com>
-	-
-	- @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>
-	<div class="organisation">
-		<input id="organisation"
-			type="text"
-			:placeholder="t('settings', 'Your organisation')"
-			:value="organisation"
-			autocapitalize="none"
-			autocomplete="on"
-			autocorrect="off"
-			@input="onOrganisationChange">
-
-		<div class="organisation__actions-container">
-			<transition name="fade">
-				<span v-if="showCheckmarkIcon" class="icon-checkmark" />
-				<span v-else-if="showErrorIcon" class="icon-error" />
-			</transition>
-		</div>
-	</div>
-</template>
-
-<script>
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import debounce from 'debounce'
-
-import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
-import logger from '../../../logger'
-
-export default {
-	name: 'Organisation',
-
-	props: {
-		organisation: {
-			type: String,
-			required: true,
-		},
-		scope: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			initialOrganisation: this.organisation,
-			localScope: this.scope,
-			showCheckmarkIcon: false,
-			showErrorIcon: false,
-		}
-	},
-
-	methods: {
-		onOrganisationChange(e) {
-			this.$emit('update:organisation', e.target.value)
-			this.debounceOrganisationChange(e.target.value.trim())
-		},
-
-		debounceOrganisationChange: debounce(async function(organisation) {
-			await this.updatePrimaryOrganisation(organisation)
-		}, 500),
-
-		async updatePrimaryOrganisation(organisation) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.ORGANISATION, organisation)
-				this.handleResponse({
-					organisation,
-					status: responseData.ocs?.meta?.status,
-				})
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update organisation'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ organisation, status, errorMessage, error }) {
-			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialOrganisation = organisation
-				emit('settings:organisation:updated', organisation)
-				this.showCheckmarkIcon = true
-				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
-			} else {
-				showError(errorMessage)
-				logger.error(errorMessage, error)
-				this.showErrorIcon = true
-				setTimeout(() => { this.showErrorIcon = false }, 2000)
-			}
-		},
-
-		onScopeChange(scope) {
-			this.$emit('update:scope', scope)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.organisation {
-	display: grid;
-	align-items: center;
-
-	input {
-		grid-area: 1 / 1;
-		width: 100%;
-		height: 34px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px;
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-		font-family: var(--font-face);
-		cursor: text;
-	}
-
-	.organisation__actions-container {
-		grid-area: 1 / 1;
-		justify-self: flex-end;
-		height: 30px;
-
-		display: flex;
-		gap: 0 2px;
-		margin-right: 5px;
-
-		.icon-checkmark,
-		.icon-error {
-			height: 30px !important;
-			min-height: 30px !important;
-			width: 30px !important;
-			min-width: 30px !important;
-			top: 0;
-			right: 0;
-			float: none;
-		}
-	}
-}
-
-.fade-enter,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 200ms ease-out;
-}
-
-.fade-leave-active {
-	transition: opacity 300ms ease-out;
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
index 0196b3161a7e9..24c548803056e 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<section>
-		<HeaderBar :account-property="accountProperty" />
+		<HeaderBar :readable="accountProperty" />
 
 		<ProfileCheckbox :profile-enabled.sync="profileEnabled" />
 
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
index 16a46fee969b7..0ce6711a2f949 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -24,7 +24,7 @@
 	<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
 	<section id="profile-visibility"
 		:style="{ marginLeft }">
-		<HeaderBar :account-property="heading" />
+		<HeaderBar :readable="heading" />
 
 		<em :class="{ disabled }">
 			{{ t('settings', 'The more restrictive setting of either visibility or scope is respected on your Profile. For example, if visibility is set to "Show to everyone" and scope is set to "Private", "Private" is respected.') }}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
index 10b2e5cea811e..b8bea9cf11e37 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue
@@ -44,7 +44,6 @@ import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 
 import { saveProfileParameterVisibility } from '../../../service/ProfileService'
-import { validateStringInput } from '../../../utils/validate'
 import { VISIBILITY_PROPERTY_ENUM } from '../../../constants/ProfileConstants'
 import logger from '../../../logger'
 
@@ -112,7 +111,7 @@ export default {
 				const { name: visibility } = visibilityObject
 				this.$emit('update:visibility', visibility)
 
-				if (validateStringInput(visibility)) {
+				if (visibility !== '') {
 					await this.updateVisibility(visibility)
 				}
 			}
diff --git a/apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue b/apps/settings/src/components/PersonalInfo/RoleSection.vue
similarity index 55%
rename from apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue
rename to apps/settings/src/components/PersonalInfo/RoleSection.vue
index b3e95bc81536f..efb6a4000cc5f 100644
--- a/apps/settings/src/components/PersonalInfo/RoleSection/RoleSection.vue
+++ b/apps/settings/src/components/PersonalInfo/RoleSection.vue
@@ -1,9 +1,9 @@
 <!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
 	-
 	- @author Christopher Ng <chrng8@gmail.com>
 	-
-	- @license GNU AGPL version 3 or any later version
+	- @license AGPL-3.0-or-later
 	-
 	- This program is free software: you can redistribute it and/or modify
 	- it under the terms of the GNU Affero General Public License as
@@ -12,7 +12,7 @@
 	-
 	- 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
+	- 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
@@ -21,23 +21,16 @@
 -->
 
 <template>
-	<section>
-		<HeaderBar :account-property="accountProperty"
-			label-for="role"
-			:scope.sync="role.scope" />
-
-		<Role :role.sync="role.value"
-			:scope.sync="role.scope" />
-	</section>
+	<AccountPropertySection :property="role"
+		:placeholder="t('settings', 'Your role')" />
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 
-import Role from './Role'
-import HeaderBar from '../shared/HeaderBar'
+import AccountPropertySection from './shared/AccountPropertySection.vue'
 
-import { ACCOUNT_PROPERTY_READABLE_ENUM } from '../../../constants/AccountPropertyConstants'
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
 
 const { role } = loadState('settings', 'personalInfoParameters', {})
 
@@ -45,25 +38,13 @@ export default {
 	name: 'RoleSection',
 
 	components: {
-		Role,
-		HeaderBar,
+		AccountPropertySection,
 	},
 
 	data() {
 		return {
-			accountProperty: ACCOUNT_PROPERTY_READABLE_ENUM.ROLE,
-			role,
+			role: { ...role, readable: NAME_READABLE_ENUM[role.name] },
 		}
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-section {
-	padding: 10px 10px;
-
-	&::v-deep button:disabled {
-		cursor: default;
-	}
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/RoleSection/Role.vue b/apps/settings/src/components/PersonalInfo/RoleSection/Role.vue
deleted file mode 100644
index 4add0d04d0d11..0000000000000
--- a/apps/settings/src/components/PersonalInfo/RoleSection/Role.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
-	-
-	- @author Christopher Ng <chrng8@gmail.com>
-	-
-	- @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>
-	<div class="role">
-		<input id="role"
-			type="text"
-			:placeholder="t('settings', 'Your role')"
-			:value="role"
-			autocapitalize="none"
-			autocomplete="on"
-			autocorrect="off"
-			@input="onRoleChange">
-
-		<div class="role__actions-container">
-			<transition name="fade">
-				<span v-if="showCheckmarkIcon" class="icon-checkmark" />
-				<span v-else-if="showErrorIcon" class="icon-error" />
-			</transition>
-		</div>
-	</div>
-</template>
-
-<script>
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
-import debounce from 'debounce'
-
-import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
-import logger from '../../../logger'
-
-export default {
-	name: 'Role',
-
-	props: {
-		role: {
-			type: String,
-			required: true,
-		},
-		scope: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			initialRole: this.role,
-			localScope: this.scope,
-			showCheckmarkIcon: false,
-			showErrorIcon: false,
-		}
-	},
-
-	methods: {
-		onRoleChange(e) {
-			this.$emit('update:role', e.target.value)
-			this.debounceRoleChange(e.target.value.trim())
-		},
-
-		debounceRoleChange: debounce(async function(role) {
-			await this.updatePrimaryRole(role)
-		}, 500),
-
-		async updatePrimaryRole(role) {
-			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.ROLE, role)
-				this.handleResponse({
-					role,
-					status: responseData.ocs?.meta?.status,
-				})
-			} catch (e) {
-				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update role'),
-					error: e,
-				})
-			}
-		},
-
-		handleResponse({ role, status, errorMessage, error }) {
-			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialRole = role
-				emit('settings:role:updated', role)
-				this.showCheckmarkIcon = true
-				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
-			} else {
-				showError(errorMessage)
-				logger.error(errorMessage, error)
-				this.showErrorIcon = true
-				setTimeout(() => { this.showErrorIcon = false }, 2000)
-			}
-		},
-
-		onScopeChange(scope) {
-			this.$emit('update:scope', scope)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.role {
-	display: grid;
-	align-items: center;
-
-	input {
-		grid-area: 1 / 1;
-		width: 100%;
-		height: 34px;
-		margin: 3px 3px 3px 0;
-		padding: 7px 6px;
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border-dark);
-		border-radius: var(--border-radius);
-		background-color: var(--color-main-background);
-		font-family: var(--font-face);
-		cursor: text;
-	}
-
-	.role__actions-container {
-		grid-area: 1 / 1;
-		justify-self: flex-end;
-		height: 30px;
-
-		display: flex;
-		gap: 0 2px;
-		margin-right: 5px;
-
-		.icon-checkmark,
-		.icon-error {
-			height: 30px !important;
-			min-height: 30px !important;
-			width: 30px !important;
-			min-width: 30px !important;
-			top: 0;
-			right: 0;
-			float: none;
-		}
-	}
-}
-
-.fade-enter,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.fade-enter-active {
-	transition: opacity 200ms ease-out;
-}
-
-.fade-leave-active {
-	transition: opacity 300ms ease-out;
-}
-</style>
diff --git a/apps/settings/src/components/PersonalInfo/TwitterSection.vue b/apps/settings/src/components/PersonalInfo/TwitterSection.vue
new file mode 100644
index 0000000000000..a2cc6affc2cbe
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/TwitterSection.vue
@@ -0,0 +1,50 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- 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>
+	<AccountPropertySection :property="twitter"
+		:placeholder="t('settings', 'Your Twitter handle @…')" />
+</template>
+
+<script>
+import { loadState } from '@nextcloud/initial-state'
+
+import AccountPropertySection from './shared/AccountPropertySection.vue'
+
+import { NAME_READABLE_ENUM } from '../../constants/AccountPropertyConstants.js'
+
+const { twitter } = loadState('settings', 'personalInfoParameters', {})
+
+export default {
+	name: 'TwitterSection',
+
+	components: {
+		AccountPropertySection,
+	},
+
+	data() {
+		return {
+			twitter: { ...twitter, readable: NAME_READABLE_ENUM[twitter.name] },
+		}
+	},
+}
+</script>
diff --git a/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue b/apps/settings/src/components/PersonalInfo/shared/AccountProperty.vue
similarity index 58%
rename from apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue
rename to apps/settings/src/components/PersonalInfo/shared/AccountProperty.vue
index 48c2bf4ff775c..5f009f9a9b041 100644
--- a/apps/settings/src/components/PersonalInfo/BiographySection/Biography.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/AccountProperty.vue
@@ -1,9 +1,9 @@
 <!--
-	- @copyright 2021, Christopher Ng <chrng8@gmail.com>
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
 	-
 	- @author Christopher Ng <chrng8@gmail.com>
 	-
-	- @license GNU AGPL version 3 or any later version
+	- @license AGPL-3.0-or-later
 	-
 	- This program is free software: you can redistribute it and/or modify
 	- it under the terms of the GNU Affero General Public License as
@@ -12,7 +12,7 @@
 	-
 	- 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
+	- 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
@@ -21,17 +21,26 @@
 -->
 
 <template>
-	<div class="biography">
-		<textarea id="biography"
-			:placeholder="t('settings', 'Your biography')"
-			:value="biography"
+	<div class="property">
+		<textarea v-if="multiLineInput"
+			:placeholder="placeholder"
+			:value="value"
 			rows="8"
 			autocapitalize="none"
 			autocomplete="off"
 			autocorrect="off"
-			@input="onBiographyChange" />
+			@input="onPropertyChange" />
 
-		<div class="biography__actions-container">
+		<input v-else
+			type="text"
+			:placeholder="placeholder"
+			:value="value"
+			autocapitalize="none"
+			autocomplete="on"
+			autocorrect="off"
+			@input="onPropertyChange">
+
+		<div class="property__actions-container">
 			<transition name="fade">
 				<span v-if="showCheckmarkIcon" class="icon-checkmark" />
 				<span v-else-if="showErrorIcon" class="icon-error" />
@@ -41,19 +50,21 @@
 </template>
 
 <script>
-import { showError } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import debounce from 'debounce'
+import { showError } from '@nextcloud/dialogs'
 
-import { ACCOUNT_PROPERTY_ENUM } from '../../../constants/AccountPropertyConstants'
-import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
 import logger from '../../../logger'
+import { savePrimaryAccountProperty } from '../../../service/PersonalInfo/PersonalInfoService'
 
 export default {
-	name: 'Biography',
+	name: 'AccountProperty',
 
 	props: {
-		biography: {
+		name: {
+			type: String,
+			required: true,
+		},
+		value: {
 			type: String,
 			required: true,
 		},
@@ -61,11 +72,31 @@ export default {
 			type: String,
 			required: true,
 		},
+		readable: {
+			type: String,
+			required: true,
+		},
+		multiLineInput: {
+			type: Boolean,
+			default: false,
+		},
+		placeholder: {
+			type: String,
+			required: true,
+		},
+		emptyStringValid: {
+			type: Boolean,
+			default: true,
+		},
+		onSuccess: {
+			type: Function,
+			required: false,
+		},
 	},
 
 	data() {
 		return {
-			initialBiography: this.biography,
+			initialValue: this.value,
 			localScope: this.scope,
 			showCheckmarkIcon: false,
 			showErrorIcon: false,
@@ -73,35 +104,45 @@ export default {
 	},
 
 	methods: {
-		onBiographyChange(e) {
-			this.$emit('update:biography', e.target.value)
-			this.debounceBiographyChange(e.target.value.trim())
+		onPropertyChange(e) {
+			this.$emit('update:value', e.target.value)
+			this.debouncePropertyChange(e.target.value.trim())
 		},
 
-		debounceBiographyChange: debounce(async function(biography) {
-			await this.updatePrimaryBiography(biography)
+		debouncePropertyChange: debounce(async function(value) {
+			if (!emptyStringValid) {
+				if (value !== '') {
+					await this.updateProperty(value)
+				}
+			} else {
+					await this.updateProperty(value)
+			}
 		}, 500),
 
-		async updatePrimaryBiography(biography) {
+		async updateProperty(value) {
 			try {
-				const responseData = await savePrimaryAccountProperty(ACCOUNT_PROPERTY_ENUM.BIOGRAPHY, biography)
+				const responseData = await savePrimaryAccountProperty(
+					this.name,
+					value,
+				)
 				this.handleResponse({
-					biography,
+					value,
 					status: responseData.ocs?.meta?.status,
 				})
 			} catch (e) {
 				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update biography'),
+					errorMessage: t('settings', 'Unable to update {property}', { property: this.readable.toLocaleLowerCase() }),
 					error: e,
 				})
 			}
 		},
 
-		handleResponse({ biography, status, errorMessage, error }) {
+		handleResponse({ value, status, errorMessage, error }) {
 			if (status === 'ok') {
-				// Ensure that local state reflects server state
-				this.initialBiography = biography
-				emit('settings:biography:updated', biography)
+				this.initialValue = value
+				if (this.onSuccess) {
+					this.onSuccess(value)
+				}
 				this.showCheckmarkIcon = true
 				setTimeout(() => { this.showCheckmarkIcon = false }, 2000)
 			} else {
@@ -120,7 +161,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.biography {
+.property {
 	display: grid;
 	align-items: center;
 
@@ -145,16 +186,30 @@ export default {
 		}
 	}
 
-	.biography__actions-container {
+	input {
+		grid-area: 1 / 1;
+		width: 100%;
+		height: 34px;
+		margin: 3px 3px 3px 0;
+		padding: 7px 6px;
+		color: var(--color-main-text);
+		border: 1px solid var(--color-border-dark);
+		border-radius: var(--border-radius);
+		background-color: var(--color-main-background);
+		font-family: var(--font-face);
+		cursor: text;
+	}
+
+	.property__actions-container {
 		grid-area: 1 / 1;
 		justify-self: flex-end;
-		align-self: flex-end;
+		align-self: flex-end; // from biography
 		height: 30px;
 
 		display: flex;
 		gap: 0 2px;
 		margin-right: 5px;
-		margin-bottom: 5px;
+		margin-bottom: 5px; // from biography
 
 		.icon-checkmark,
 		.icon-error {
diff --git a/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
new file mode 100644
index 0000000000000..cf8d11ecaa651
--- /dev/null
+++ b/apps/settings/src/components/PersonalInfo/shared/AccountPropertySection.vue
@@ -0,0 +1,80 @@
+<!--
+	- @copyright 2022 Christopher Ng <chrng8@gmail.com>
+	-
+	- @author Christopher Ng <chrng8@gmail.com>
+	-
+	- @license AGPL-3.0-or-later
+	-
+	- 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>
+	<section>
+		<HeaderBar v-bind.sync="property" />
+
+		<AccountProperty v-bind.sync="property"
+			:placeholder="placeholder"
+			:multi-line-input="multiLineInput"
+			:empty-string-valid="emptyStringValid"
+			:on-success="onSuccess" />
+	</section>
+</template>
+
+<script>
+import AccountProperty from './AccountProperty.vue'
+import HeaderBar from '../shared/HeaderBar.vue'
+
+export default {
+	name: 'AccountPropertySection',
+
+	components: {
+		AccountProperty,
+		HeaderBar,
+	},
+
+	props: {
+		property: {
+			type: Object,
+			required: true,
+		},
+		placeholder: {
+			type: String,
+			required: true,
+		},
+		multiLineInput: {
+			type: Boolean,
+			default: false,
+		},
+		emptyStringValid: {
+			type: Boolean,
+			default: true,
+		},
+		onSuccess: {
+			type: Function,
+			required: false,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+section {
+	padding: 10px 10px;
+
+	&::v-deep button:disabled {
+		cursor: default;
+	}
+}
+</style>
diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
index e8d3c99682be6..30e6382448c1a 100644
--- a/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/FederationControl.vue
@@ -66,7 +66,7 @@ export default {
 	},
 
 	props: {
-		accountProperty: {
+		propertyReadable: {
 			type: String,
 			required: true,
 			validator: (value) => Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(value),
@@ -95,14 +95,14 @@ export default {
 
 	data() {
 		return {
-			accountPropertyLowerCase: this.accountProperty.toLocaleLowerCase(),
+			propertyReadableLowerCase: this.propertyReadable.toLocaleLowerCase(),
 			initialScope: this.scope,
 		}
 	},
 
 	computed: {
 		ariaLabel() {
-			return t('settings', 'Change scope level of {accountProperty}, current scope is {scope}', { accountProperty: this.accountPropertyLowerCase, scope: this.scopeDisplayNameLowerCase })
+			return t('settings', 'Change scope level of {propertyReadable}, current scope is {scope}', { propertyReadable: this.propertyReadableLowerCase, scope: this.scopeDisplayNameLowerCase })
 		},
 
 		scopeDisplayNameLowerCase() {
@@ -118,15 +118,15 @@ export default {
 		},
 
 		supportedScopes() {
-			if (lookupServerUploadEnabled && !UNPUBLISHED_READABLE_PROPERTIES.includes(this.accountProperty)) {
+			if (lookupServerUploadEnabled && !UNPUBLISHED_READABLE_PROPERTIES.includes(this.propertyReadable)) {
 				return [
-					...PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM[this.accountProperty],
+					...PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM[this.propertyReadable],
 					SCOPE_ENUM.FEDERATED,
 					SCOPE_ENUM.PUBLISHED,
 				]
 			}
 
-			return PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM[this.accountProperty]
+			return PROPERTY_READABLE_SUPPORTED_SCOPES_ENUM[this.propertyReadable]
 		},
 	},
 
@@ -143,14 +143,14 @@ export default {
 
 		async updatePrimaryScope(scope) {
 			try {
-				const responseData = await savePrimaryAccountPropertyScope(PROPERTY_READABLE_KEYS_ENUM[this.accountProperty], scope)
+				const responseData = await savePrimaryAccountPropertyScope(PROPERTY_READABLE_KEYS_ENUM[this.propertyReadable], scope)
 				this.handleResponse({
 					scope,
 					status: responseData.ocs?.meta?.status,
 				})
 			} catch (e) {
 				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update federation scope of the primary {accountProperty}', { accountProperty: this.accountPropertyLowerCase }),
+					errorMessage: t('settings', 'Unable to update federation scope of the primary {propertyReadable}', { propertyReadable: this.propertyReadableLowerCase }),
 					error: e,
 				})
 			}
@@ -165,7 +165,7 @@ export default {
 				})
 			} catch (e) {
 				this.handleResponse({
-					errorMessage: t('settings', 'Unable to update federation scope of additional {accountProperty}', { accountProperty: this.accountPropertyLowerCase }),
+					errorMessage: t('settings', 'Unable to update federation scope of additional {propertyReadable}', { propertyReadable: this.propertyReadableLowerCase }),
 					error: e,
 				})
 			}
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 65eb5a110a306..fdcf050775703 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -22,14 +22,14 @@
 
 <template>
 	<h3 :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
-		<label :for="labelFor">
+		<label :for="name">
 			<!-- Already translated as required by prop validator -->
-			{{ accountProperty }}
+			{{ propertyReadable }}
 		</label>
 
 		<template v-if="scope">
 			<FederationControl class="federation-control"
-				:account-property="accountProperty"
+				:property-readable="propertyReadable"
 				:scope.sync="localScope"
 				@update:scope="onScopeChange" />
 		</template>
@@ -64,7 +64,19 @@ export default {
 	},
 
 	props: {
-		accountProperty: {
+		name: {
+			type: String,
+			default: '',
+		},
+		value: {
+			type: String,
+			required: true,
+		},
+		scope: {
+			type: String,
+			default: null,
+		},
+		readable: {
 			type: String,
 			required: true,
 			validator: (value) => Object.values(ACCOUNT_PROPERTY_READABLE_ENUM).includes(value) || Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(value) || value === PROFILE_READABLE_ENUM.PROFILE_VISIBILITY,
@@ -79,15 +91,7 @@ export default {
 		},
 		isValidSection: {
 			type: Boolean,
-			default: false,
-		},
-		labelFor: {
-			type: String,
-			default: '',
-		},
-		scope: {
-			type: String,
-			default: null,
+			default: true,
 		},
 	},
 
@@ -99,11 +103,11 @@ export default {
 
 	computed: {
 		isProfileProperty() {
-			return this.accountProperty === ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED
+			return this.propertyReadable === ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED
 		},
 
 		isSettingProperty() {
-			return Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(this.accountProperty)
+			return Object.values(ACCOUNT_SETTING_PROPERTY_READABLE_ENUM).includes(this.propertyReadable)
 		},
 	},
 
diff --git a/apps/settings/src/constants/AccountPropertyConstants.js b/apps/settings/src/constants/AccountPropertyConstants.js
index 941e20a912acd..17debe27c5573 100644
--- a/apps/settings/src/constants/AccountPropertyConstants.js
+++ b/apps/settings/src/constants/AccountPropertyConstants.js
@@ -61,6 +61,22 @@ export const ACCOUNT_PROPERTY_READABLE_ENUM = Object.freeze({
 	WEBSITE: t('settings', 'Website'),
 })
 
+export const NAME_READABLE_ENUM = Object.freeze({
+	[ACCOUNT_PROPERTY_ENUM.ADDRESS]: ACCOUNT_PROPERTY_READABLE_ENUM.ADDRESS,
+	[ACCOUNT_PROPERTY_ENUM.AVATAR]: ACCOUNT_PROPERTY_READABLE_ENUM.AVATAR,
+	[ACCOUNT_PROPERTY_ENUM.BIOGRAPHY]: ACCOUNT_PROPERTY_READABLE_ENUM.BIOGRAPHY,
+	[ACCOUNT_PROPERTY_ENUM.DISPLAYNAME]: ACCOUNT_PROPERTY_READABLE_ENUM.DISPLAYNAME,
+	[ACCOUNT_PROPERTY_ENUM.EMAIL_COLLECTION]: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL_COLLECTION,
+	[ACCOUNT_PROPERTY_ENUM.EMAIL]: ACCOUNT_PROPERTY_READABLE_ENUM.EMAIL,
+	[ACCOUNT_PROPERTY_ENUM.HEADLINE]: ACCOUNT_PROPERTY_READABLE_ENUM.HEADLINE,
+	[ACCOUNT_PROPERTY_ENUM.ORGANISATION]: ACCOUNT_PROPERTY_READABLE_ENUM.ORGANISATION,
+	[ACCOUNT_PROPERTY_ENUM.PHONE]: ACCOUNT_PROPERTY_READABLE_ENUM.PHONE,
+	[ACCOUNT_PROPERTY_ENUM.PROFILE_ENABLED]: ACCOUNT_PROPERTY_READABLE_ENUM.PROFILE_ENABLED,
+	[ACCOUNT_PROPERTY_ENUM.ROLE]: ACCOUNT_PROPERTY_READABLE_ENUM.ROLE,
+	[ACCOUNT_PROPERTY_ENUM.TWITTER]: ACCOUNT_PROPERTY_READABLE_ENUM.TWITTER,
+	[ACCOUNT_PROPERTY_ENUM.WEBSITE]: ACCOUNT_PROPERTY_READABLE_ENUM.WEBSITE,
+})
+
 /** Enum of profile specific sections to human readable names */
 export const PROFILE_READABLE_ENUM = Object.freeze({
 	PROFILE_VISIBILITY: t('settings', 'Profile visibility'),
diff --git a/apps/settings/src/main-personal-info.js b/apps/settings/src/main-personal-info.js
index d3cfd3ec9ccac..1ebaae0fc8ea9 100644
--- a/apps/settings/src/main-personal-info.js
+++ b/apps/settings/src/main-personal-info.js
@@ -26,15 +26,16 @@ import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/styles/toast.scss'
 
-import DisplayNameSection from './components/PersonalInfo/DisplayNameSection/DisplayNameSection'
-import EmailSection from './components/PersonalInfo/EmailSection/EmailSection'
-import LanguageSection from './components/PersonalInfo/LanguageSection/LanguageSection'
-import ProfileSection from './components/PersonalInfo/ProfileSection/ProfileSection'
-import OrganisationSection from './components/PersonalInfo/OrganisationSection/OrganisationSection'
-import RoleSection from './components/PersonalInfo/RoleSection/RoleSection'
-import HeadlineSection from './components/PersonalInfo/HeadlineSection/HeadlineSection'
-import BiographySection from './components/PersonalInfo/BiographySection/BiographySection'
-import ProfileVisibilitySection from './components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection'
+import DisplayNameSection from './components/PersonalInfo/DisplayNameSection.vue'
+import EmailSection from './components/PersonalInfo/EmailSection/EmailSection.vue'
+import TwitterSection from './components/PersonalInfo/TwitterSection.vue'
+import LanguageSection from './components/PersonalInfo/LanguageSection/LanguageSection.vue'
+import ProfileSection from './components/PersonalInfo/ProfileSection/ProfileSection.vue'
+import OrganisationSection from './components/PersonalInfo/OrganisationSection.vue'
+import RoleSection from './components/PersonalInfo/RoleSection.vue'
+import HeadlineSection from './components/PersonalInfo/HeadlineSection.vue'
+import BiographySection from './components/PersonalInfo/BiographySection.vue'
+import ProfileVisibilitySection from './components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue'
 
 __webpack_nonce__ = btoa(getRequestToken())
 
@@ -48,10 +49,12 @@ Vue.mixin({
 
 const DisplayNameView = Vue.extend(DisplayNameSection)
 const EmailView = Vue.extend(EmailSection)
+const TwitterView = Vue.extend(TwitterSection)
 const LanguageView = Vue.extend(LanguageSection)
 
 new DisplayNameView().$mount('#vue-displayname-section')
 new EmailView().$mount('#vue-email-section')
+new TwitterView().$mount('#vue-twitter-section')
 new LanguageView().$mount('#vue-language-section')
 
 if (profileEnabledGlobally) {
diff --git a/apps/settings/src/utils/validate.js b/apps/settings/src/utils/validate.js
index 58d42863f4e93..83af1d94fbba7 100644
--- a/apps/settings/src/utils/validate.js
+++ b/apps/settings/src/utils/validate.js
@@ -28,18 +28,6 @@
 
 import { VALIDATE_EMAIL_REGEX } from '../constants/AccountPropertyConstants'
 
-/**
- * Validate the string input
- *
- * Generic validator just to check that input is not an empty string*
- *
- * @param {string} input the input
- * @return {boolean}
- */
-export function validateStringInput(input) {
-	return input !== ''
-}
-
 /**
  * Validate the email input
  *
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index 98009cc52be9d..973c98521f5ce 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -196,48 +196,7 @@
 			</form>
 		</div>
 		<div class="personal-settings-setting-box">
-			<form id="twitterform" class="section">
-				<h3>
-					<label for="twitter"><?php p($l->t('Twitter')); ?></label>
-					<a href="#" class="federation-menu" aria-label="<?php p($l->t('Change privacy level of Twitter profile')); ?>">
-						<span class="icon-federation-menu icon-password">
-							<span class="icon-triangle-s"></span>
-						</span>
-					</a>
-				</h3>
-				<?php if ($_['lookupServerUploadEnabled']) { ?>
-					<div class="verify <?php if ($_['twitter'] === '' || $_['twitterScope'] !== 'public') {
-						p('hidden');
-					} ?>">
-						<img id="verify-twitter" title="<?php p($_['twitterMessage']); ?>" data-status="<?php p($_['twitterVerification']) ?>" src="
-					<?php
-					switch ($_['twitterVerification']) {
-						case \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS:
-							p(image_path('core', 'actions/verifying.svg'));
-							break;
-						case \OC\Accounts\AccountManager::VERIFIED:
-							p(image_path('core', 'actions/verified.svg'));
-							break;
-						default:
-							p(image_path('core', 'actions/verify.svg'));
-					}
-					?>" <?php if ($_['twitterVerification'] === \OC\Accounts\AccountManager::VERIFICATION_IN_PROGRESS || $_['twitterVerification'] === \OC\Accounts\AccountManager::NOT_VERIFIED) {
-						print_unescaped(' class="verify-action"');
-					} ?>>
-						<div class="verification-dialog popovermenu bubble menu">
-							<div class="verification-dialog-content">
-								<p class="explainVerification"></p>
-								<p class="verificationCode"></p>
-								<p><?php p($l->t('It can take up to 24 hours before the account is displayed as verified.')); ?></p>
-							</div>
-						</div>
-					</div>
-				<?php } ?>
-				<input type="text" name="twitter" id="twitter" value="<?php p($_['twitter']); ?>" placeholder="<?php p($l->t('Twitter handle @…')); ?>" autocomplete="on" autocapitalize="none" autocorrect="off" />
-				<span class="icon-checkmark hidden"></span>
-				<span class="icon-error hidden"></span>
-				<input type="hidden" id="twitterscope" value="<?php p($_['twitterScope']) ?>">
-			</form>
+			<div id="vue-twitter-section"></div>
 		</div>
 		<?php if ($_['profileEnabledGlobally']) : ?>
 			<div class="personal-settings-setting-box">