diff --git a/lib/Settings/AdminSettings.php b/lib/Settings/AdminSettings.php
index f3f77cd8dd..3a684050d7 100644
--- a/lib/Settings/AdminSettings.php
+++ b/lib/Settings/AdminSettings.php
@@ -13,6 +13,7 @@
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\AppFramework\Services\IInitialState;
 use OCP\Settings\ISettings;
+use OCP\Util;
 
 class AdminSettings implements ISettings {
 	public function __construct(
@@ -26,6 +27,9 @@ public function __construct(
 	public function getForm() {
 		$this->initialState->provideInitialState('allowSocialSync', $this->socialApiService->syncAllowedByAdmin());
 		$this->initialState->provideInitialState('ocmInvitesConfig', $this->federatedInvitesService->getOcmInvitesConfig());
+
+		Util::addScript(Application::APP_ID, 'contacts-admin-settings');
+		Util::addStyle(Application::APP_ID, 'contacts-admin-settings');
 		return new TemplateResponse(Application::APP_ID, 'settings/admin');
 	}
 
diff --git a/src/admin-settings.js b/src/admin-settings.js
index a58d711302..8cd39a133b 100644
--- a/src/admin-settings.js
+++ b/src/admin-settings.js
@@ -5,14 +5,6 @@
 
 import { createApp } from 'vue'
 import AdminSettings from './components/AdminSettings.vue'
-import LegacyGlobalMixin from './mixins/LegacyGlobalMixin.js'
 
-import 'vite/modulepreload-polyfill'
-
-document.addEventListener('DOMContentLoaded', main)
-
-function main() {
-	const app = createApp(AdminSettings)
-	app.mixin(LegacyGlobalMixin)
-	app.mount('#contacts-settings')
-}
+const app = createApp(AdminSettings)
+app.mount('#contacts-settings')
diff --git a/src/components/AdminSettings.vue b/src/components/AdminSettings.vue
index 67ab6be409..188e0583da 100644
--- a/src/components/AdminSettings.vue
+++ b/src/components/AdminSettings.vue
@@ -4,38 +4,37 @@
 -->
 
 <template>
-	<div id="contacts" class="section">
-		<h2>{{ t('contacts', 'Contacts') }}</h2>
+	<NcSettingsSection :name="t('contacts', 'Contacts')">
 		<p>
-			<input
+			<NcCheckboxRadioSwitch
 				id="allow-social-sync"
 				v-model="allowSocialSync"
-				type="checkbox"
-				class="checkbox"
-				@change="updateSocialSetting('allowSocialSync')">
-			<label for="allow-social-sync">{{ t('contacts', 'Allow updating avatars from social media') }}</label>
+				type="switch"
+				@update:model-value="updateSocialSetting('allowSocialSync')">
+				{{ t('contacts', 'Allow updating avatars from social media') }}
+			</NcCheckboxRadioSwitch>
 		</p>
 
 		<h3>{{ t('contacts', 'External invitations') }}</h3>
 		<p>
-			<input
+			<NcCheckboxRadioSwitch
 				id="ocm-invites-optional-mail"
 				v-model="ocmInvitesConfig.optionalMail"
-				type="checkbox"
-				class="checkbox"
-				@change="updateOcmSetting(ocmInviteConfigKeys.optionalMail, ocmInvitesConfig.optionalMail)">
-			<label for="ocm-invites-optional-mail">{{ t('contacts', 'Allow creating invites without an email address (link-only)') }}</label>
+				type="switch"
+				@update:model-value="updateOcmSetting(ocmInviteConfigKeys.optionalMail, ocmInvitesConfig.optionalMail)">
+				{{ t('contacts', 'Allow creating invites without an email address (link-only)') }}
+			</NcCheckboxRadioSwitch>
 		</p>
 		<p>
-			<input
+			<NcCheckboxRadioSwitch
 				id="ocm-invites-encoded-copy-button"
 				v-model="ocmInvitesConfig.encodedCopyButton"
-				type="checkbox"
-				class="checkbox"
-				@change="updateOcmSetting(ocmInviteConfigKeys.encodedCopyButton, ocmInvitesConfig.encodedCopyButton)">
-			<label for="ocm-invites-encoded-copy-button">{{ t('contacts', 'Show the "Copy encoded invite" button on invite details') }}</label>
+				type="switch"
+				@update:model-value="updateOcmSetting(ocmInviteConfigKeys.encodedCopyButton, ocmInvitesConfig.encodedCopyButton)">
+				{{ t('contacts', 'Show the "Copy encoded invite" button on invite details') }}
+			</NcCheckboxRadioSwitch>
 		</p>
-	</div>
+	</NcSettingsSection>
 </template>
 
 <script>
@@ -43,10 +42,19 @@ import axios from '@nextcloud/axios'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
+import { NcCheckboxRadioSwitch, NcSettingsSection } from '@nextcloud/vue'
+import LegacyGlobalMixin from '../mixins/LegacyGlobalMixin.js'
 import { OCM_INVITES_CONFIG_KEYS } from '../models/constants.ts'
 
 export default {
 	name: 'AdminSettings',
+	components: {
+		NcCheckboxRadioSwitch,
+		NcSettingsSection,
+	},
+
+	mixins: [LegacyGlobalMixin],
+
 	data() {
 		return {
 			allowSocialSync: loadState('contacts', 'allowSocialSync', true),
diff --git a/templates/settings/admin.php b/templates/settings/admin.php
index c35fa86d51..6d6309eb4f 100644
--- a/templates/settings/admin.php
+++ b/templates/settings/admin.php
@@ -5,10 +5,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-// TODO: uncomment once there are custom styles in the admin settings entrypoint
-// style('contacts', 'contacts-index');
-// style('contacts', 'contacts-admin-settings');
-script('contacts', 'contacts-admin-settings');
 ?>
 
 <div id="contacts-settings"></div>