diff --git a/apps/profile/lib/Controller/ProfilePageController.php b/apps/profile/lib/Controller/ProfilePageController.php
index 0a5ec251e38ce..69ed0652a4306 100644
--- a/apps/profile/lib/Controller/ProfilePageController.php
+++ b/apps/profile/lib/Controller/ProfilePageController.php
@@ -104,6 +104,7 @@ public function index(string $targetUserId): TemplateResponse {
 
 		$this->eventDispatcher->dispatchTyped(new BeforeTemplateRenderedEvent($targetUserId));
 
+		Util::addStyle('profile', 'main');
 		Util::addScript('profile', 'main');
 
 		return new TemplateResponse(
diff --git a/apps/profile/src/components/ProfileSection.spec.ts b/apps/profile/src/components/ProfileSection.spec.ts
new file mode 100644
index 0000000000000..67ca9617fccdb
--- /dev/null
+++ b/apps/profile/src/components/ProfileSection.spec.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { render } from '@testing-library/vue'
+import { expect, test, vi } from 'vitest'
+import ProfileSection from './ProfileSection.vue'
+
+window.customElements.define('test-element', class extends HTMLElement {
+	user?: string
+	callback?: (user?: string) => void
+
+	connectedCallback() {
+		this.callback?.(this.user)
+	}
+})
+
+test('can render section component', async () => {
+	const callback = vi.fn()
+	const result = render(ProfileSection, {
+		props: {
+			userId: 'testuser',
+			section: {
+				id: 'test-section',
+				order: 1,
+				tagName: 'test-element',
+				params: {
+					callback,
+				},
+			},
+		},
+	})
+
+	// this basically covers everything we need to test:
+	// 1. The custom element is rendered
+	// 2. The custom params are passed to the custom element
+	// 3. The user id is passed to the custom element
+	expect(result.baseElement.querySelector('test-element')).toBeTruthy()
+	expect(callback).toHaveBeenCalledWith('testuser')
+})
diff --git a/apps/profile/src/components/ProfileSection.vue b/apps/profile/src/components/ProfileSection.vue
new file mode 100644
index 0000000000000..12c8f7f1ac885
--- /dev/null
+++ b/apps/profile/src/components/ProfileSection.vue
@@ -0,0 +1,28 @@
+<!--
+  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { IProfileSection } from '../services/ProfileSections.ts'
+
+defineProps<{
+	section: IProfileSection
+	userId: string | undefined
+}>()
+</script>
+
+<template>
+	<div :class="$style.profileSection">
+		<component
+			:is="section.tagName"
+			v-bind.prop="section.params"
+			:user.prop="userId" />
+	</div>
+</template>
+
+<style module>
+.profileSection {
+	margin-top: 2rem;
+}
+</style>
diff --git a/apps/profile/src/main.ts b/apps/profile/src/main.ts
index 594719deb8186..c10f2b34b987c 100644
--- a/apps/profile/src/main.ts
+++ b/apps/profile/src/main.ts
@@ -1,26 +1,16 @@
-/**
+/*
  * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getCSPNonce } from '@nextcloud/auth'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import ProfileApp from './views/ProfileApp.vue'
 import ProfileSections from './services/ProfileSections.js'
 
-__webpack_nonce__ = getCSPNonce()
+import 'vite/modulepreload-polyfill'
 
-if (!window.OCA) {
-	window.OCA = {}
-}
+window.OCA.Profile ??= {}
+window.OCA.Profile.ProfileSections = new ProfileSections()
 
-if (!window.OCA.Core) {
-	window.OCA.Core = {}
-}
-Object.assign(window.OCA.Core, { ProfileSections: new ProfileSections() })
-
-const View = Vue.extend(ProfileApp)
-
-window.addEventListener('DOMContentLoaded', () => {
-	new View().$mount('#content')
-})
+const app = createApp(ProfileApp)
+app.mount('#content')
diff --git a/apps/profile/src/services/ProfileSections.spec.ts b/apps/profile/src/services/ProfileSections.spec.ts
new file mode 100644
index 0000000000000..4db3a12237f21
--- /dev/null
+++ b/apps/profile/src/services/ProfileSections.spec.ts
@@ -0,0 +1,41 @@
+/*
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { IProfileSection } from './ProfileSections.ts'
+
+import { expect, test, vi } from 'vitest'
+import ProfileSections from './ProfileSections.ts'
+
+test('register profile section', () => {
+	const profileSection: IProfileSection = {
+		id: 'test-section',
+		order: 1,
+		tagName: 'test-element',
+	}
+
+	const sections = new ProfileSections()
+	sections.registerSection(profileSection)
+
+	expect(sections.getSections()).toHaveLength(1)
+	expect(sections.getSections()[0]).toBe(profileSection)
+})
+
+test('register profile section twice', () => {
+	const profileSection: IProfileSection = {
+		id: 'test-section',
+		order: 1,
+		tagName: 'test-element',
+	}
+
+	const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+	const sections = new ProfileSections()
+	sections.registerSection(profileSection)
+	sections.registerSection(profileSection)
+
+	expect(spy).toHaveBeenCalled()
+	expect(sections.getSections()).toHaveLength(1)
+	expect(sections.getSections()[0]).toBe(profileSection)
+})
diff --git a/apps/profile/src/services/ProfileSections.ts b/apps/profile/src/services/ProfileSections.ts
index 73f96bbf01e37..50ff1f779ccd3 100644
--- a/apps/profile/src/services/ProfileSections.ts
+++ b/apps/profile/src/services/ProfileSections.ts
@@ -1,23 +1,52 @@
 /**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { logger } from './logger.ts'
+
+export interface IProfileSection {
+	/**
+	 * Unique identifier for the section
+	 */
+	id: string
+	/**
+	 * The order in which the section should appear
+	 */
+	order: number
+	/**
+	 * The custom element tag name to be used for this section
+	 *
+	 * The custom element must have been registered beforehand,
+	 * and must have the a `user` property of type `string | undefined`.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Web_components
+	 */
+	tagName: string
+	/**
+	 * Static parameters to be passed to the custom web component
+	 */
+	params?: Record<string, unknown>
+}
+
 export default class ProfileSections {
-	_sections
+	#sections: Map<string, IProfileSection>
 
 	constructor() {
-		this._sections = []
+		this.#sections = new Map()
 	}
 
 	/**
 	 * @param section To be called to mount the section to the profile page
 	 */
-	registerSection(section) {
-		this._sections.push(section)
+	registerSection(section: IProfileSection) {
+		if (this.#sections.has(section.id)) {
+			logger.warn(`Profile section with id '${section.id}' is already registered.`)
+		}
+		this.#sections.set(section.id, section)
 	}
 
 	getSections() {
-		return this._sections
+		return [...this.#sections.values()]
 	}
 }
diff --git a/apps/profile/src/services/logger.spec.ts b/apps/profile/src/services/logger.spec.ts
new file mode 100644
index 0000000000000..5964ba5e68d9a
--- /dev/null
+++ b/apps/profile/src/services/logger.spec.ts
@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, test, vi } from 'vitest'
+import { logger } from './logger.ts'
+
+test('logger', () => {
+	const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+	logger.warn('This is a warning message')
+
+	expect(console.warn).toHaveBeenCalled()
+	expect(spy.mock.calls[0]![0]).toContain('profile')
+})
diff --git a/apps/profile/src/services/logger.ts b/apps/profile/src/services/logger.ts
new file mode 100644
index 0000000000000..a7ef8ecc5ca28
--- /dev/null
+++ b/apps/profile/src/services/logger.ts
@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { getLoggerBuilder } from '@nextcloud/logger'
+
+export const logger = getLoggerBuilder()
+	.setApp('profile')
+	.detectLogLevel()
+	.build()
diff --git a/apps/profile/src/views/ProfileApp.vue b/apps/profile/src/views/ProfileApp.vue
index fdfc16ff92ceb..c71364c929b9c 100644
--- a/apps/profile/src/views/ProfileApp.vue
+++ b/apps/profile/src/views/ProfileApp.vue
@@ -3,6 +3,111 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import type { IProfileSection } from '../services/ProfileSections.ts'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { showError } from '@nextcloud/dialogs'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
+import { translate as t } from '@nextcloud/l10n'
+import { generateUrl } from '@nextcloud/router'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref } from 'vue'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcContent from '@nextcloud/vue/components/NcContent'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcRichText from '@nextcloud/vue/components/NcRichText'
+import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
+import MapMarkerIcon from 'vue-material-design-icons/MapMarker.vue'
+import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
+import ProfileSection from '../components/ProfileSection.vue'
+
+interface IProfileAction {
+	target: string
+	icon: string
+	id: string
+	title: string
+}
+
+interface IStatus {
+	icon: string
+	message: string
+	userId: string
+}
+
+const profileParameters = loadState('profile', 'profileParameters', {
+	userId: undefined as string | undefined,
+	displayname: undefined as string | undefined,
+	address: undefined as string | undefined,
+	organisation: undefined as string | undefined,
+	role: undefined as string | undefined,
+	headline: undefined as string | undefined,
+	biography: undefined as string | undefined,
+	actions: [] as IProfileAction[],
+	isUserAvatarVisible: false,
+	pronouns: undefined as string | undefined,
+})
+
+const userStatus = ref(loadState<Partial<IStatus>>('profile', 'status', {}))
+const sections = ref<IProfileSection[]>([])
+const sortedSections = computed(() => [...sections.value].sort((a, b) => b.order - a.order))
+onBeforeMount(() => {
+	sections.value = window.OCA.Profile.ProfileSections.getSections()
+})
+
+const isCurrentUser = getCurrentUser()?.uid === profileParameters.userId
+
+const primaryAction = profileParameters.actions[0]
+const otherActions = profileParameters.actions.slice(1)
+
+const settingsUrl = generateUrl('/settings/user')
+const emptyProfileMessage = isCurrentUser
+	? t('profile', 'You have not added any info yet')
+	: t('profile', '{user} has not added any info yet', { user: (profileParameters.displayname || profileParameters.userId || '') })
+
+onMounted(() => {
+	// Set the user's displayname or userId in the page title and preserve the default title of "Nextcloud" at the end
+	document.title = `${profileParameters.displayname || profileParameters.userId} - ${document.title}`
+	subscribe('user_status:status.updated', handleStatusUpdate)
+})
+
+onBeforeUnmount(() => {
+	unsubscribe('user_status:status.updated', handleStatusUpdate)
+})
+
+/**
+ * Update the user status
+ *
+ * @param status - The new status
+ */
+function handleStatusUpdate(status: IStatus) {
+	if (isCurrentUser && status.userId === profileParameters.userId) {
+		userStatus.value = status
+	}
+}
+
+/**
+ * Open the user status modal by simulating a click on the hidden status menu item in the avatar menu
+ */
+function openStatusModal() {
+	// Changing the user status is only enabled if you are the current user
+	if (!isCurrentUser) {
+		return
+	}
+
+	const statusMenuItem = document.querySelector<HTMLButtonElement>('.user-status-menu-item')
+	if (statusMenuItem) {
+		statusMenuItem.click()
+	} else {
+		showError(t('profile', 'Error opening the user status modal, try hard refreshing the page'))
+	}
+}
+</script>
+
 <template>
 	<NcContent app-name="profile">
 		<NcAppContent>
@@ -10,9 +115,9 @@
 				<div class="profile__header__container">
 					<div class="profile__header__container__placeholder" />
 					<div class="profile__header__container__displayname">
-						<h2>{{ displayname || userId }}</h2>
-						<span v-if="pronouns">·</span>
-						<span v-if="pronouns" class="profile__header__container__pronouns">{{ pronouns }}</span>
+						<h2>{{ profileParameters.displayname || profileParameters.userId }}</h2>
+						<span v-if="profileParameters.pronouns">·</span>
+						<span v-if="profileParameters.pronouns" class="profile__header__container__pronouns">{{ profileParameters.pronouns }}</span>
 						<NcButton
 							v-if="isCurrentUser"
 							variant="primary"
@@ -24,11 +129,11 @@
 						</NcButton>
 					</div>
 					<NcButton
-						v-if="status.icon || status.message"
+						v-if="userStatus.icon || userStatus.message"
 						:disabled="!isCurrentUser"
 						:variant="isCurrentUser ? 'tertiary' : 'tertiary-no-background'"
 						@click="openStatusModal">
-						{{ status.icon }} {{ status.message }}
+						{{ userStatus.icon }} {{ userStatus.message }}
 					</NcButton>
 				</div>
 			</div>
@@ -39,12 +144,12 @@
 						<NcAvatar
 							class="avatar"
 							:class="{ interactive: isCurrentUser }"
-							:user="userId"
+							:user="profileParameters.userId"
 							:size="180"
 							:disable-menu="true"
 							:disable-tooltip="true"
-							:is-no-user="!isUserAvatarVisible"
-							@click.native.prevent.stop="openStatusModal" />
+							:is-no-user="!profileParameters.isUserAvatarVisible"
+							@click.prevent.stop="openStatusModal" />
 
 						<div class="user-actions">
 							<!-- When a tel: URL is opened with target="_blank", a blank new tab is opened which is inconsistent with the handling of other URLs so we set target="_self" for the phone action -->
@@ -79,33 +184,31 @@
 					</div>
 
 					<div class="profile__blocks">
-						<div v-if="organisation || role || address" class="profile__blocks-details">
-							<div v-if="organisation || role" class="detail">
-								<p>{{ organisation }} <span v-if="organisation && role">•</span> {{ role }}</p>
+						<div v-if="profileParameters.organisation || profileParameters.role || profileParameters.address" class="profile__blocks-details">
+							<div v-if="profileParameters.organisation || profileParameters.role" class="detail">
+								<p>{{ profileParameters.organisation }} <span v-if="profileParameters.organisation && profileParameters.role">•</span> {{ profileParameters.role }}</p>
 							</div>
-							<div v-if="address" class="detail">
+							<div v-if="profileParameters.address" class="detail">
 								<p>
 									<MapMarkerIcon
 										class="map-icon"
 										:size="16" />
-									{{ address }}
+									{{ profileParameters.address }}
 								</p>
 							</div>
 						</div>
-						<template v-if="headline || biography || sections.length > 0">
-							<h3 v-if="headline" class="profile__blocks-headline">
-								{{ headline }}
+						<template v-if="profileParameters.headline || profileParameters.biography || sections.length > 0">
+							<h3 v-if="profileParameters.headline" class="profile__blocks-headline">
+								{{ profileParameters.headline }}
 							</h3>
-							<NcRichText v-if="biography" :text="biography" use-extended-markdown />
+							<NcRichText v-if="profileParameters.biography" :text="profileParameters.biography" use-extended-markdown />
 
 							<!-- additional entries, use it with cautious -->
-							<div
-								v-for="(section, index) in sections"
-								:ref="'section-' + index"
-								:key="index"
-								class="profile__additionalContent">
-								<component :is="section($refs['section-' + index], userId)" :user-id="userId" />
-							</div>
+							<ProfileSection
+								v-for="section in sortedSections"
+								:key="section.id"
+								:section="section"
+								:user-id="profileParameters.userId" />
 						</template>
 						<NcEmptyContent
 							v-else
@@ -123,149 +226,6 @@
 	</NcContent>
 </template>
 
-<script lang="ts">
-import { getCurrentUser } from '@nextcloud/auth'
-import { showError } from '@nextcloud/dialogs'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
-import { translate as t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
-import { defineComponent } from 'vue'
-import NcActionLink from '@nextcloud/vue/components/NcActionLink'
-import NcActions from '@nextcloud/vue/components/NcActions'
-import NcAppContent from '@nextcloud/vue/components/NcAppContent'
-import NcAvatar from '@nextcloud/vue/components/NcAvatar'
-import NcButton from '@nextcloud/vue/components/NcButton'
-import NcContent from '@nextcloud/vue/components/NcContent'
-import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
-import NcRichText from '@nextcloud/vue/components/NcRichText'
-import AccountIcon from 'vue-material-design-icons/AccountOutline.vue'
-import MapMarkerIcon from 'vue-material-design-icons/MapMarker.vue'
-import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
-
-interface IProfileAction {
-	target: string
-	icon: string
-	id: string
-	title: string
-}
-
-interface IStatus {
-	icon: string
-	message: string
-	userId: string
-}
-
-export default defineComponent({
-	name: 'ProfileApp',
-
-	components: {
-		AccountIcon,
-		MapMarkerIcon,
-		NcActionLink,
-		NcActions,
-		NcAppContent,
-		NcAvatar,
-		NcButton,
-		NcContent,
-		NcEmptyContent,
-		NcRichText,
-		PencilIcon,
-	},
-
-	setup() {
-		return {
-			t,
-		}
-	},
-
-	data() {
-		const profileParameters = loadState('profile', 'profileParameters', {
-			userId: null as string | null,
-			displayname: null as string | null,
-			address: null as string | null,
-			organisation: null as string | null,
-			role: null as string | null,
-			headline: null as string | null,
-			biography: null as string | null,
-			actions: [] as IProfileAction[],
-			isUserAvatarVisible: false,
-			pronouns: null as string | null,
-		})
-
-		return {
-			...profileParameters,
-			status: loadState<Partial<IStatus>>('profile', 'status', {}),
-			sections: window.OCA.Core.ProfileSections.getSections(),
-		}
-	},
-
-	computed: {
-		isCurrentUser() {
-			return getCurrentUser()?.uid === this.userId
-		},
-
-		allActions() {
-			return this.actions
-		},
-
-		primaryAction() {
-			if (this.allActions.length) {
-				return this.allActions[0]
-			}
-			return null
-		},
-
-		otherActions() {
-			if (this.allActions.length > 1) {
-				return this.allActions.slice(1)
-			}
-			return []
-		},
-
-		settingsUrl() {
-			return generateUrl('/settings/user')
-		},
-
-		emptyProfileMessage() {
-			return this.isCurrentUser
-				? t('profile', 'You have not added any info yet')
-				: t('profile', '{user} has not added any info yet', { user: (this.displayname || this.userId || '') })
-		},
-	},
-
-	mounted() {
-		// Set the user's displayname or userId in the page title and preserve the default title of "Nextcloud" at the end
-		document.title = `${this.displayname || this.userId} - ${document.title}`
-		subscribe('user_status:status.updated', this.handleStatusUpdate)
-	},
-
-	beforeDestroy() {
-		unsubscribe('user_status:status.updated', this.handleStatusUpdate)
-	},
-
-	methods: {
-		handleStatusUpdate(status: IStatus) {
-			if (this.isCurrentUser && status.userId === this.userId) {
-				this.status = status
-			}
-		},
-
-		openStatusModal() {
-			const statusMenuItem = document.querySelector<HTMLButtonElement>('.user-status-menu-item')
-			// Changing the user status is only enabled if you are the current user
-			if (this.isCurrentUser) {
-				if (statusMenuItem) {
-					statusMenuItem.click()
-				} else {
-					showError(t('profile', 'Error opening the user status modal, try hard refreshing the page'))
-				}
-			}
-		},
-	},
-})
-</script>
-
 <style lang="scss" scoped>
 $profile-max-width: 1024px;
 $content-max-width: 640px;
diff --git a/build/frontend-legacy/webpack.modules.cjs b/build/frontend-legacy/webpack.modules.cjs
index cdc0f8e58b932..f78e08b9cd0dd 100644
--- a/build/frontend-legacy/webpack.modules.cjs
+++ b/build/frontend-legacy/webpack.modules.cjs
@@ -54,9 +54,6 @@ module.exports = {
 		'personal-settings': path.join(__dirname, 'apps/files_sharing/src', 'personal-settings.js'),
 		'public-nickname-handler': path.join(__dirname, 'apps/files_sharing/src', 'public-nickname-handler.ts'),
 	},
-	profile: {
-		main: path.join(__dirname, 'apps/profile/src', 'main.ts'),
-	},
 	settings: {
 		apps: path.join(__dirname, 'apps/settings/src', 'apps.js'),
 		'legacy-admin': path.join(__dirname, 'apps/settings/src', 'admin.js'),
diff --git a/build/frontend-legacy/apps/profile b/build/frontend/apps/profile
similarity index 100%
rename from build/frontend-legacy/apps/profile
rename to build/frontend/apps/profile
diff --git a/build/frontend/vite.config.ts b/build/frontend/vite.config.ts
index 198081027a1ed..13d86faf3af8b 100644
--- a/build/frontend/vite.config.ts
+++ b/build/frontend/vite.config.ts
@@ -29,6 +29,9 @@ const modules = {
 	oauth2: {
 		'settings-admin': resolve(import.meta.dirname, 'apps/oauth2/src', 'settings-admin.ts'),
 	},
+	profile: {
+		main: resolve(import.meta.dirname, 'apps/profile/src', 'main.ts'),
+	},
 	sharebymail: {
 		'admin-settings': resolve(import.meta.dirname, 'apps/sharebymail/src', 'settings-admin.ts'),
 	},