diff --git a/apps/settings/src/components/PersonalInfo/AvatarSection.vue b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
index ed6cd2c423c..1137d4e1767 100644
--- a/apps/settings/src/components/PersonalInfo/AvatarSection.vue
+++ b/apps/settings/src/components/PersonalInfo/AvatarSection.vue
@@ -22,9 +22,6 @@
 
 <template>
 	<section id="vue-avatar-section">
-		<h3 class="hidden-visually">
-			{{ t('settings', 'Your profile information') }}
-		</h3>
 		<HeaderBar :is-heading="true"
 			:readable="avatar.readable"
 			:scope.sync="avatar.scope" />
@@ -275,6 +272,7 @@ export default {
 <style lang="scss" scoped>
 section {
 	grid-row: 1/3;
+	padding: 10px 10px;
 }
 .avatar {
 	&__container {
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index b149d8405f4..18ae30e1dd5 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -21,11 +21,11 @@
 -->
 
 <template>
-	<component :is="isHeading ? `h3` : `div`" class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
-		<span v-if="isHeading">
+	<div class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
+		<h3 v-if="isHeading">
 			<!-- Already translated as required by prop validator -->
 			{{ readable }}
-		</span>
+		</h3>
 		<label v-else :for="inputId">
 			<!-- Already translated as required by prop validator -->
 			{{ readable }}
@@ -49,7 +49,7 @@
 				{{ t('settings', 'Add') }}
 			</NcButton>
 		</template>
-	</component>
+	</div>
 </template>
 
 <script>