diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index ac8f3ebc26ed7..23d8fa9cbbfbf 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -56,8 +56,7 @@ input {
 .personal-settings-setting-box {
 	.section {
 		padding: 10px 30px;
-
-		h3 {
+		.headerbar-label {
 			margin-bottom: 0;
 		}
 
diff --git a/apps/settings/js/federationsettingsview.js b/apps/settings/js/federationsettingsview.js
index a4a1a31223efc..50b8bd84c593c 100644
--- a/apps/settings/js/federationsettingsview.js
+++ b/apps/settings/js/federationsettingsview.js
@@ -82,7 +82,7 @@
 			];
 
 			_.each(this._inputFields, function(field) {
-				var $icon = self.$('#' + field + 'form h3 > .federation-menu');
+				var $icon = self.$('#' + field + 'form .headerbar-label > .federation-menu');
 				var excludedScopes = []
 
 				if (fieldsWithV2Private.indexOf(field) === -1) {
@@ -245,7 +245,7 @@
 		},
 
 		_setFieldScopeIcon: function(field, scope) {
-			var $icon = this.$('#' + field + 'form > h3 .icon-federation-menu');
+			var $icon = this.$('#' + field + 'form > .headerbar-label .icon-federation-menu');
 
 			$icon.removeClass('icon-phone');
 			$icon.removeClass('icon-password');
diff --git a/apps/settings/src/components/PersonalInfo/DetailsSection.vue b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
index 7d11e50d3bcab..03e3f58f725a0 100644
--- a/apps/settings/src/components/PersonalInfo/DetailsSection.vue
+++ b/apps/settings/src/components/PersonalInfo/DetailsSection.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<section>
-		<HeaderBar :readable="t('settings', 'Details')" />
+		<HeaderBar :is-heading="true" :readable="t('settings', 'Details')" />
 
 		<div class="details">
 			<div class="details__groups">
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
index eab49f11f4908..7ccb284ff97be 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 :readable="heading" />
+		<HeaderBar :is-heading="true" :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/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 541b46fb59163..e7bc669c9cb0f 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -21,8 +21,12 @@
 -->
 
 <template>
-	<h3 :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
-		<label :for="inputId">
+	<component :is="isHeading ? `h3` : `div`" class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
+		<span v-if="isHeading">
+			<!-- Already translated as required by prop validator -->
+			{{ readable }}
+		</span>
+		<label v-else :for="inputId">
 			<!-- Already translated as required by prop validator -->
 			{{ readable }}
 		</label>
@@ -45,7 +49,7 @@
 				{{ t('settings', 'Add') }}
 			</NcButton>
 		</template>
-	</h3>
+	</component>
 </template>
 
 <script>
@@ -93,6 +97,10 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		isHeading: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	data() {
@@ -124,7 +132,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	h3 {
+	.headerbar-label {
+		font-weight: normal;
 		display: inline-flex;
 		width: 100%;
 		margin: 12px 0 0 0;