diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index 6972bd27fd9..f445233cc53 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -4,8 +4,7 @@
 -->
 
 <template>
-	<section id="allowed_groups" class="videocalls section">
-		<h2>{{ t('spreed', 'Limit to groups') }}</h2>
+	<NcSettingsSection id="allowed_groups" :name="t('spreed', 'Limit to groups')">
 		<p class="settings-hint">
 			{{ t('spreed', 'When at least one group is selected, only people of the listed groups can be part of conversations.') }}
 		</p>
@@ -82,7 +81,7 @@
 		<p>
 			<em>{{ t('spreed', 'When a call has started, everyone with access to the conversation can join the call.') }}</em>
 		</p>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -95,6 +94,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 const startCallOptions = [
 	{ value: 0, label: t('spreed', 'Everyone') },
@@ -109,6 +109,7 @@ export default {
 	components: {
 		NcButton,
 		NcSelect,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/BotsSettings.vue b/src/components/AdminSettings/BotsSettings.vue
index bad1840b6f8..0c585b91cde 100644
--- a/src/components/AdminSettings/BotsSettings.vue
+++ b/src/components/AdminSettings/BotsSettings.vue
@@ -4,9 +4,10 @@
 -->
 
 <template>
-	<section id="bots_settings" class="bots-settings section">
-		<h2>{{ t('spreed', 'Bots settings') }}</h2>
-
+	<NcSettingsSection id="bots_settings"
+		class="bots-settings"
+		:name="t('spreed', 'Bots settings')"
+		doc-url="https://nextcloud-talk.readthedocs.io/en/latest/bot-list/">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="botsSettingsDescription" />
 
@@ -74,7 +75,7 @@
 			rel="noreferrer nofollow">
 			{{ t('spreed', 'Find more bots') }} ↗
 		</NcButton>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -88,6 +89,7 @@ import moment from '@nextcloud/moment'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import { BOT } from '../../constants.js'
 import { getAllBots } from '../../services/botsService.ts'
@@ -99,6 +101,7 @@ export default {
 		NcPopover,
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/Federation.vue b/src/components/AdminSettings/Federation.vue
index cf1ddfcee54..b6fb7398996 100644
--- a/src/components/AdminSettings/Federation.vue
+++ b/src/components/AdminSettings/Federation.vue
@@ -4,11 +4,11 @@
 -->
 
 <template>
-	<section id="federation_settings" class="federation section">
-		<h2>
-			{{ t('spreed', 'Federation') }}
-			<small>{{ t('spreed', 'Beta') }}</small>
-		</h2>
+	<NcSettingsSection id="federation_settings"
+		class="federation"
+		:name="t('spreed', 'Federation')"
+		doc-url="https://docs.nextcloud.com/server/latest/user_manual/en/talk/advanced_features.html#federated-conversation">
+		<!-- <small>{{ t('spreed', 'Beta') }}</small> -->
 
 		<NcCheckboxRadioSwitch :checked="isFederationEnabled"
 			:disabled="loading"
@@ -76,7 +76,7 @@
 				</NcButton>
 			</div>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -90,6 +90,7 @@ import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 const FEDERATION_ENABLED = loadState('spreed', 'federation_enabled', false)
 const FEDERATION_INCOMING_ENABLED = loadState('spreed', 'federation_incoming_enabled', true)
@@ -104,6 +105,7 @@ export default {
 		NcButton,
 		NcCheckboxRadioSwitch,
 		NcSelect,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index 751185fa020..2041871208f 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -4,9 +4,7 @@
 -->
 
 <template>
-	<section id="general_settings" class="videocalls section">
-		<h2>{{ t('spreed', 'General settings') }}</h2>
-
+	<NcSettingsSection id="general_settings" :name="t('spreed', 'General settings')">
 		<h3>{{ t('spreed', 'Default notification settings') }}</h3>
 
 		<NcSelect v-model="defaultGroupNotification"
@@ -36,7 +34,7 @@
 			@update:checked="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
 		</NcCheckboxRadioSwitch>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -45,6 +43,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 const defaultGroupNotificationOptions = [
 	{ value: 1, label: t('spreed', 'All messages') },
@@ -57,6 +56,7 @@ export default {
 	components: {
 		NcCheckboxRadioSwitch,
 		NcSelect,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
index 56a25216931..93b4f3f2a1d 100644
--- a/src/components/AdminSettings/HostedSignalingServer.vue
+++ b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -4,17 +4,12 @@
 -->
 
 <template>
-	<section v-if="showForm"
+	<NcSettingsSection v-if="showForm"
 		id="hosted_signaling_server"
-		class="hosted-signaling section">
-		<h2>
-			{{ t('spreed', 'Hosted high-performance backend') }}
-		</h2>
-
-		<p class="settings-hint">
-			{{ t('spreed', 'Our partner Struktur AG provides a service where a hosted signaling server can be requested. For this you only need to fill out the form below and your Nextcloud will request it. Once the server is set up for you the credentials will be filled automatically. This will overwrite the existing signaling server settings.') }}
-		</p>
-
+		class="hosted-signaling"
+		:name="t('spreed', 'Hosted high-performance backend')"
+		:description="t('spreed', 'Our partner Struktur AG provides a service where a hosted signaling server can be requested. For this you only need to fill out the form below and your Nextcloud will request it. Once the server is set up for you the credentials will be filled automatically. This will overwrite the existing signaling server settings.')"
+		doc-url="https://www.spreed.eu/nextcloud-talk-high-performance-backend/">
 		<template v-if="!trialAccount.status">
 			<NcTextField :value.sync="hostedHPBNextcloudUrl"
 				class="form__textfield"
@@ -115,7 +110,7 @@
 				{{ t('spreed', 'Delete the signaling server account') }}
 			</NcButton>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -127,6 +122,7 @@ import { generateOcsUrl } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 import { EventBus } from '../../services/EventBus.js'
@@ -138,6 +134,7 @@ export default {
 		NcButton,
 		NcSelect,
 		NcTextField,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/MatterbridgeIntegration.vue b/src/components/AdminSettings/MatterbridgeIntegration.vue
index 8533e61e075..3483f66de12 100644
--- a/src/components/AdminSettings/MatterbridgeIntegration.vue
+++ b/src/components/AdminSettings/MatterbridgeIntegration.vue
@@ -4,11 +4,11 @@
 -->
 
 <template>
-	<section id="matterbridge_settings" class="matterbridge section">
-		<h2>
-			{{ t('spreed', 'Matterbridge integration') }}
-			<small>{{ t('spreed', 'Beta') }}</small>
-		</h2>
+	<NcSettingsSection id="matterbridge_settings"
+		class="matterbridge"
+		:name="t('spreed', 'Matterbridge integration')"
+		doc-url="https://nextcloud-talk.readthedocs.io/en/latest/matterbridge/">
+		<!-- <small>{{ t('spreed', 'Beta') }}</small> -->
 
 		<template v-if="matterbridgeVersion">
 			<p class="settings-hint">
@@ -40,7 +40,7 @@
 				{{ installButtonText }}
 			</NcButton>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -50,6 +50,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import {
 	enableMatterbridgeApp,
@@ -63,6 +64,7 @@ export default {
 	components: {
 		NcButton,
 		NcCheckboxRadioSwitch,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/RecordingServers.vue b/src/components/AdminSettings/RecordingServers.vue
index 9649d38d9c1..cfce7209d5c 100644
--- a/src/components/AdminSettings/RecordingServers.vue
+++ b/src/components/AdminSettings/RecordingServers.vue
@@ -5,11 +5,10 @@
 -->
 
 <template>
-	<section id="recording_server" class="recording-servers section">
-		<h2>
-			{{ t('spreed', 'Recording backend') }}
-		</h2>
-
+	<NcSettingsSection id="recording_server"
+		class="recording-servers"
+		:name="t('spreed', 'Recording backend')"
+		doc-url="https://github.com/nextcloud/nextcloud-talk-recording/blob/main/docs/installation.md">
 		<NcNoteCard v-if="!showForm" type="warning">
 			{{ t('spreed', 'Recording backend configuration is only possible with a high-performance backend.') }}
 		</NcNoteCard>
@@ -75,7 +74,7 @@
 				</template>
 			</template>
 		</template>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -92,6 +91,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import RecordingServer from '../../components/AdminSettings/RecordingServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -115,6 +115,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcNoteCard,
 		NcPasswordField,
+		NcSettingsSection,
 		Plus,
 		RecordingServer,
 		TransitionWrapper,
diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
index f6c0dfc48a1..79a660d9886 100644
--- a/src/components/AdminSettings/SIPBridge.vue
+++ b/src/components/AdminSettings/SIPBridge.vue
@@ -4,9 +4,7 @@
 -->
 
 <template>
-	<div id="sip-bridge" class="sip-bridge section">
-		<h2>{{ t('spreed', 'SIP configuration') }}</h2>
-
+	<NcSettingsSection id="sip-bridge" class="sip-bridge" :name="t('spreed', 'SIP configuration')">
 		<NcNoteCard v-if="!showForm" type="warning">
 			{{ t('spreed', 'SIP configuration is only possible with a high-performance backend.') }}
 		</NcNoteCard>
@@ -75,7 +73,7 @@
 				{{ t('spreed', 'Save changes') }}
 			</NcButton>
 		</template>
-	</div>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -92,6 +90,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
 
 import { EventBus } from '../../services/EventBus.js'
@@ -108,6 +107,7 @@ export default {
 		NcSelect,
 		NcTextArea,
 		NcPasswordField,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index fa4a5ce66b8..42157f22c27 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -4,15 +4,11 @@
 -->
 
 <template>
-	<section id="signaling_server" class="signaling-servers section">
-		<h2>
-			{{ t('spreed', 'High-performance backend') }}
-		</h2>
-
-		<p class="settings-hint">
-			{{ t('spreed', 'An external signaling server should optionally be used for larger installations. Leave empty to use the internal signaling server.') }}
-		</p>
-
+	<NcSettingsSection id="signaling_server"
+		class="signaling-servers"
+		:name="t('spreed', 'High-performance backend')"
+		:description="t('spreed', 'An external signaling server should optionally be used for larger installations. Leave empty to use the internal signaling server.')"
+		doc-url="https://nextcloud.com/talk/">
 		<NcNoteCard v-if="!isCacheConfigured" type="warning">
 			{{ t('spreed', 'It is highly recommended to set up a distributed cache when using Nextcloud Talk together with a High Performance Back-end.') }}
 		</NcNoteCard>
@@ -63,7 +59,7 @@
 			:label="t('spreed', 'Shared secret')"
 			label-visible
 			@update:value="updateSecret" />
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -79,6 +75,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import SignalingServer from '../../components/AdminSettings/SignalingServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -94,6 +91,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcNoteCard,
 		NcPasswordField,
+		NcSettingsSection,
 		Plus,
 		SignalingServer,
 		TransitionWrapper,
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index 872b49e9368..64121cf76ec 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -4,15 +4,10 @@
 -->
 
 <template>
-	<section id="stun_server" class="videocalls section">
-		<h2>
-			{{ t('spreed', 'STUN servers') }}
-		</h2>
-
-		<p class="settings-hint">
-			{{ t('spreed', 'A STUN server is used to determine the public IP address of participants behind a router.') }}
-		</p>
-
+	<NcSettingsSection id="stun_server"
+		:name="t('spreed', 'STUN servers')"
+		:description="t('spreed', 'A STUN server is used to determine the public IP address of participants behind a router.')"
+		doc-url="https://nextcloud-talk.readthedocs.io/en/latest/TURN/">
 		<TransitionWrapper name="fade"
 			class="stun-servers"
 			tag="ul"
@@ -35,7 +30,7 @@
 			</template>
 			{{ t('spreed', 'Add a new STUN server') }}
 		</NcButton>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -48,6 +43,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import StunServer from '../../components/AdminSettings/StunServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -60,6 +56,7 @@ export default {
 		StunServer,
 		Plus,
 		TransitionWrapper,
+		NcSettingsSection,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 4fd09067888..c2c3c36f519 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -4,11 +4,7 @@
 -->
 
 <template>
-	<section id="turn_server" class="videocalls section">
-		<h2>
-			{{ t('spreed', 'TURN servers') }}
-		</h2>
-
+	<NcSettingsSection id="turn_server" :name="t('spreed', 'TURN servers')" doc-url="https://nextcloud-talk.readthedocs.io/en/latest/TURN/">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<p class="settings-hint" v-html="documentationHint" />
 
@@ -40,7 +36,7 @@
 			</template>
 			{{ t('spreed', 'Add a new TURN server') }}
 		</NcButton>
-	</section>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -53,6 +49,7 @@ import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 
 import TurnServer from '../../components/AdminSettings/TurnServer.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
@@ -62,6 +59,7 @@ export default {
 
 	components: {
 		NcButton,
+		NcSettingsSection,
 		TurnServer,
 		Plus,
 		TransitionWrapper,
diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue
index d80adcedb68..b7495350725 100644
--- a/src/components/AdminSettings/WebServerSetupChecks.vue
+++ b/src/components/AdminSettings/WebServerSetupChecks.vue
@@ -4,11 +4,7 @@
 -->
 
 <template>
-	<div id="web_server_setup_checks" class="section">
-		<h2>
-			{{ t('spreed', 'Web server setup checks') }}
-		</h2>
-
+	<NcSettingsSection id="web_server_setup_checks" :name="t('spreed', 'Web server setup checks')" doc-url="https://nextcloud-talk.readthedocs.io/en/latest/system-requirements/">
 		<NcNoteCard v-if="apacheWarning"
 			:type="apacheWarningType">
 			{{ apacheWarning }}
@@ -31,7 +27,7 @@
 				</NcButton>
 			</li>
 		</ul>
-	</div>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -44,6 +40,7 @@ import { generateFilePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { VIRTUAL_BACKGROUND } from '../../constants.js'
@@ -61,6 +58,7 @@ export default {
 		AlertCircle,
 		NcButton,
 		NcNoteCard,
+		NcSettingsSection,
 		Check,
 	},