diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index 287f590736..b48e25995e 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -4,236 +4,234 @@
 -->
 <template>
 	<form id="account-form" @submit.prevent="onSubmit">
-		<NcRadioGroup
-			v-model="mode"
-			:label="t('mail', 'Mail server configuration mode')"
-			hide-label>
-			<NcRadioGroupButton :label="t('mail', 'Auto')" value="auto" :disabled="loading" />
-			<NcRadioGroupButton :label="t('mail', 'Manual')" value="manual" :disabled="loading" />
-		</NcRadioGroup>
-		<div v-show="mode === 'auto'" class="account-form__panel">
-			<NcInputField
-				id="auto-name"
-				v-model="accountName"
-				:label="t('mail', 'Name')"
-				type="text"
-				:placeholder="t('mail', 'Name')"
-				:disabled="loading"
-				autofocus />
-			<NcInputField
-				id="auto-address"
-				v-model="emailAddress"
-				:label="t('mail', 'Mail address')"
-				:disabled="loading"
-				:placeholder="t('mail', 'name@example.org')"
-				required
-				type="email"
-				@change="clearFeedback" />
-			<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
-				{{ t('mail', 'Please enter an email of the format name@example.com') }}
-			</p>
-			<NcPasswordField
-				id="auto-password"
-				v-model="autoConfig.password"
-				:disabled="loading"
-				type="password"
-				:label="t('mail', 'Password')"
-				:required="!hasPasswordAlternatives"
-				@change="clearFeedback" />
-			<NcCheckboxRadioSwitch
-				id="auto-classification-enabled"
-				v-model="classificationEnabled"
-				:disabled="loading">
-				{{ t('mail', 'Enable mark as important classification') }}
-			</NcCheckboxRadioSwitch>
-		</div>
-		<div v-show="mode === 'manual'" class="account-form__panel">
-			<NcInputField
-				id="man-name"
-				v-model="accountName"
-				:label="t('mail', 'Name')"
-				type="text"
-				:placeholder="t('mail', 'Name')"
-				:disabled="loading" />
-			<NcInputField
-				id="man-address"
-				v-model="emailAddress"
-				:label="t('mail', 'Mail address')"
-				type="email"
-				:placeholder="t('mail', 'name@example.org')"
-				:disabled="loading"
-				required
-				@change="clearFeedback" />
-			<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
-				{{ t('mail', 'Please enter an email of the format name@example.com') }}
-			</p>
-
-			<h4>{{ t('mail', 'IMAP Settings') }}</h4>
-			<NcInputField
-				id="man-imap-host"
-				v-model="manualConfig.imapHost"
-				:label="t('mail', 'IMAP Host')"
-				type="text"
-				:placeholder="t('mail', 'IMAP Host')"
-				:disabled="loading"
-				required
-				@change="syncCredentials" />
-			<h4 class="account-form__heading--required">
-				{{ t('mail', 'IMAP Security') }}
-			</h4>
-			<div class="flex-row">
-				<NcCheckboxRadioSwitch
-					id="man-imap-sec-none"
-					:button-variant="true"
-					:model-value="manualConfig.imapSslMode"
-					type="radio"
-					name="man-imap-sec"
+		<Tabs
+			:options="{ useUrlFragment: false, defaultTabHash: settingsPage ? 'manual' : 'auto' }"
+			cache-lifetime="0"
+			@changed="onModeChanged">
+			<Tab id="auto" key="auto" :name="t('mail', 'Auto')">
+				<NcInputField
+					id="auto-name"
+					v-model="accountName"
+					:label="t('mail', 'Name')"
+					type="text"
+					:placeholder="t('mail', 'Name')"
 					:disabled="loading"
-					value="none"
-					button-variant-grouped="horizontal"
-					@update:checked="onImapSslModeChange">
-					{{ t('mail', 'None') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch
-					id="man-imap-sec-ssl"
-					:button-variant="true"
-					:model-value="manualConfig.imapSslMode"
-					type="radio"
-					name="man-imap-sec"
+					autofocus />
+				<NcInputField
+					id="auto-address"
+					v-model="emailAddress"
+					:label="t('mail', 'Mail address')"
 					:disabled="loading"
-					value="ssl"
-					button-variant-grouped="horizontal"
-					@update:checked="onImapSslModeChange">
-					{{ t('mail', 'SSL/TLS') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch
-					id="man-imap-sec-tls"
-					:button-variant="true"
-					:model-value="manualConfig.imapSslMode"
-					type="radio"
-					name="man-imap-sec"
+					:placeholder="t('mail', 'name@example.org')"
+					required
+					type="email"
+					@change="clearFeedback" />
+				<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
+					{{ t('mail', 'Please enter an email of the format name@example.com') }}
+				</p>
+				<NcPasswordField
+					id="auto-password"
+					v-model="autoConfig.password"
 					:disabled="loading"
-					value="tls"
-					button-variant-grouped="horizontal"
-					@update:checked="onImapSslModeChange">
-					{{ t('mail', 'STARTTLS') }}
-				</NcCheckboxRadioSwitch>
-			</div>
-			<NcInputField
-				id="man-imap-port"
-				v-model="manualConfig.imapPort"
-				:label="t('mail', 'IMAP Port')"
-				type="number"
-				:placeholder="t('mail', 'IMAP Port')"
-				:disabled="loading"
-				required
-				@change="clearFeedback" />
-			<NcInputField
-				id="man-imap-user"
-				v-model="manualConfig.imapUser"
-				:label="t('mail', 'IMAP User')"
-				type="text"
-				:placeholder="t('mail', 'IMAP User')"
-				:disabled="loading"
-				required
-				@change="syncCredentials" />
-			<NcPasswordField
-				v-if="!useOauth"
-				id="man-imap-password"
-				v-model="manualConfig.imapPassword"
-				type="password"
-				:label="t('mail', 'IMAP Password')"
-				:disabled="loading"
-				required
-				@change="syncCredentials" />
-
-			<h4>{{ t('mail', 'SMTP Settings') }}</h4>
-			<NcInputField
-				id="man-smtp-host"
-				v-model="manualConfig.smtpHost"
-				:label="t('mail', 'SMTP Host')"
-				type="text"
-				name="smtp-host"
-				:placeholder="t('mail', 'SMTP Host')"
-				:disabled="loading"
-				required
-				@change="unsyncCredentials" />
-			<h4 class="account-form__heading--required">
-				{{ t('mail', 'SMTP Security') }}
-			</h4>
-			<div class="flex-row">
+					type="password"
+					:label="t('mail', 'Password')"
+					:required="!hasPasswordAlternatives"
+					@change="clearFeedback" />
 				<NcCheckboxRadioSwitch
-					id="man-imap-sec-none"
-					:button-variant="true"
-					:model-value="manualConfig.smtpSslMode"
-					type="radio"
-					name="man-smtp-sec"
-					:disabled="loading"
-					value="none"
-					button-variant-grouped="horizontal"
-					@update:checked="onSmtpSslModeChange">
-					{{ t('mail', 'None') }}
+					id="auto-classification-enabled"
+					v-model="classificationEnabled"
+					:disabled="loading">
+					{{ t('mail', 'Enable mark as important classification') }}
 				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch
-					id="man-imap-sec-ssl"
-					:button-variant="true"
-					:model-value="manualConfig.smtpSslMode"
-					type="radio"
-					name="man-smtp-sec"
+			</Tab>
+			<Tab id="manual" key="manual" :name="t('mail', 'Manual')">
+				<NcInputField
+					id="man-name"
+					v-model="accountName"
+					:label="t('mail', 'Name')"
+					type="text"
+					:placeholder="t('mail', 'Name')"
+					:disabled="loading" />
+				<NcInputField
+					id="man-address"
+					v-model="emailAddress"
+					:label="t('mail', 'Mail address')"
+					type="email"
+					:placeholder="t('mail', 'name@example.org')"
 					:disabled="loading"
-					value="ssl"
-					button-variant-grouped="horizontal"
-					@update:checked="onSmtpSslModeChange">
-					{{ t('mail', 'SSL/TLS') }}
-				</NcCheckboxRadioSwitch>
-				<NcCheckboxRadioSwitch
-					id="man-imap-sec-tls"
-					:button-variant="true"
-					:model-value="manualConfig.smtpSslMode"
-					type="radio"
-					name="man-smtp-sec"
+					required
+					@change="clearFeedback" />
+				<p v-if="!isValidEmail(emailAddress)" class="account-form--error">
+					{{ t('mail', 'Please enter an email of the format name@example.com') }}
+				</p>
+
+				<h4>{{ t('mail', 'IMAP Settings') }}</h4>
+				<NcInputField
+					id="man-imap-host"
+					v-model="manualConfig.imapHost"
+					:label="t('mail', 'IMAP Host')"
+					type="text"
+					:placeholder="t('mail', 'IMAP Host')"
+					:disabled="loading"
+					required
+					@change="syncCredentials" />
+				<h4 class="account-form__heading--required">
+					{{ t('mail', 'IMAP Security') }}
+				</h4>
+				<div class="flex-row">
+					<NcCheckboxRadioSwitch
+						id="man-imap-sec-none"
+						:button-variant="true"
+						:model-value="manualConfig.imapSslMode"
+						type="radio"
+						name="man-imap-sec"
+						:disabled="loading"
+						value="none"
+						button-variant-grouped="horizontal"
+						@update:checked="onImapSslModeChange">
+						{{ t('mail', 'None') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch
+						id="man-imap-sec-ssl"
+						:button-variant="true"
+						:model-value="manualConfig.imapSslMode"
+						type="radio"
+						name="man-imap-sec"
+						:disabled="loading"
+						value="ssl"
+						button-variant-grouped="horizontal"
+						@update:checked="onImapSslModeChange">
+						{{ t('mail', 'SSL/TLS') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch
+						id="man-imap-sec-tls"
+						:button-variant="true"
+						:model-value="manualConfig.imapSslMode"
+						type="radio"
+						name="man-imap-sec"
+						:disabled="loading"
+						value="tls"
+						button-variant-grouped="horizontal"
+						@update:checked="onImapSslModeChange">
+						{{ t('mail', 'STARTTLS') }}
+					</NcCheckboxRadioSwitch>
+				</div>
+				<NcInputField
+					id="man-imap-port"
+					v-model="manualConfig.imapPort"
+					:label="t('mail', 'IMAP Port')"
+					type="number"
+					:placeholder="t('mail', 'IMAP Port')"
+					:disabled="loading"
+					required
+					@change="clearFeedback" />
+				<NcInputField
+					id="man-imap-user"
+					v-model="manualConfig.imapUser"
+					:label="t('mail', 'IMAP User')"
+					type="text"
+					:placeholder="t('mail', 'IMAP User')"
+					:disabled="loading"
+					required
+					@change="syncCredentials" />
+				<NcPasswordField
+					v-if="!useOauth"
+					id="man-imap-password"
+					v-model="manualConfig.imapPassword"
+					type="password"
+					:label="t('mail', 'IMAP Password')"
+					:disabled="loading"
+					required
+					@change="syncCredentials" />
+
+				<h4>{{ t('mail', 'SMTP Settings') }}</h4>
+				<NcInputField
+					id="man-smtp-host"
+					v-model="manualConfig.smtpHost"
+					:label="t('mail', 'SMTP Host')"
+					type="text"
+					name="smtp-host"
+					:placeholder="t('mail', 'SMTP Host')"
 					:disabled="loading"
-					value="tls"
-					button-variant-grouped="horizontal"
-					@update:checked="onSmtpSslModeChange">
-					{{ t('mail', 'STARTTLS') }}
+					required
+					@change="unsyncCredentials" />
+				<h4 class="account-form__heading--required">
+					{{ t('mail', 'SMTP Security') }}
+				</h4>
+				<div class="flex-row">
+					<NcCheckboxRadioSwitch
+						id="man-imap-sec-none"
+						:button-variant="true"
+						:model-value="manualConfig.smtpSslMode"
+						type="radio"
+						name="man-smtp-sec"
+						:disabled="loading"
+						value="none"
+						button-variant-grouped="horizontal"
+						@update:checked="onSmtpSslModeChange">
+						{{ t('mail', 'None') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch
+						id="man-imap-sec-ssl"
+						:button-variant="true"
+						:model-value="manualConfig.smtpSslMode"
+						type="radio"
+						name="man-smtp-sec"
+						:disabled="loading"
+						value="ssl"
+						button-variant-grouped="horizontal"
+						@update:checked="onSmtpSslModeChange">
+						{{ t('mail', 'SSL/TLS') }}
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch
+						id="man-imap-sec-tls"
+						:button-variant="true"
+						:model-value="manualConfig.smtpSslMode"
+						type="radio"
+						name="man-smtp-sec"
+						:disabled="loading"
+						value="tls"
+						button-variant-grouped="horizontal"
+						@update:checked="onSmtpSslModeChange">
+						{{ t('mail', 'STARTTLS') }}
+					</NcCheckboxRadioSwitch>
+				</div>
+				<NcInputField
+					id="man-smtp-port"
+					v-model="manualConfig.smtpPort"
+					:label="t('mail', 'SMTP Port')"
+					type="number"
+					:placeholder="t('mail', 'SMTP Port')"
+					:disabled="loading"
+					required
+					@change="clearFeedback" />
+				<NcInputField
+					id="man-smtp-user"
+					v-model="manualConfig.smtpUser"
+					:label="t('mail', 'SMTP User')"
+					type="text"
+					:placeholder="t('mail', 'SMTP User')"
+					:disabled="loading"
+					required
+					@change="unsyncCredentials" />
+				<NcPasswordField
+					v-if="!useOauth"
+					id="man-smtp-password"
+					v-model="manualConfig.smtpPassword"
+					:label="t('mail', 'SMTP Password')"
+					type="password"
+					:disabled="loading"
+					required
+					@change="unsyncCredentials" />
+				<NcCheckboxRadioSwitch
+					v-if="isSetup"
+					id="auto-classification-enabled"
+					v-model="classificationEnabled"
+					:disabled="loading">
+					{{ t('mail', 'Enable mark as important classification') }}
 				</NcCheckboxRadioSwitch>
-			</div>
-			<NcInputField
-				id="man-smtp-port"
-				v-model="manualConfig.smtpPort"
-				:label="t('mail', 'SMTP Port')"
-				type="number"
-				:placeholder="t('mail', 'SMTP Port')"
-				:disabled="loading"
-				required
-				@change="clearFeedback" />
-			<NcInputField
-				id="man-smtp-user"
-				v-model="manualConfig.smtpUser"
-				:label="t('mail', 'SMTP User')"
-				type="text"
-				:placeholder="t('mail', 'SMTP User')"
-				:disabled="loading"
-				required
-				@change="unsyncCredentials" />
-			<NcPasswordField
-				v-if="!useOauth"
-				id="man-smtp-password"
-				v-model="manualConfig.smtpPassword"
-				:label="t('mail', 'SMTP Password')"
-				type="password"
-				:disabled="loading"
-				required
-				@change="unsyncCredentials" />
-			<NcCheckboxRadioSwitch
-				v-if="isSetup"
-				id="auto-classification-enabled"
-				v-model="classificationEnabled"
-				:disabled="loading">
-				{{ t('mail', 'Enable mark as important classification') }}
-			</NcCheckboxRadioSwitch>
-		</div>
+			</Tab>
+		</Tabs>
 		<div v-if="isGoogleAccount && !googleOauthUrl" class="account-form__google-sso">
 			{{ t('mail', 'Google requires OAuth authentication. If your Nextcloud admin has not configured Google OAuth, you can use a Google App Password instead.') }}
 		</div>
@@ -279,8 +277,9 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField, NcRadioGroup, NcRadioGroupButton } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcInputField, NcLoadingIcon, NcPasswordField } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import { Tab, Tabs } from 'vue-tabs-component'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { CONSENT_ABORTED, getUserConsent } from '../integration/oauth.js'
 import logger from '../logger.js'
@@ -298,8 +297,8 @@ export default {
 		NcPasswordField,
 		NcInputField,
 		NcCheckboxRadioSwitch,
-		NcRadioGroup,
-		NcRadioGroupButton,
+		Tab,
+		Tabs,
 		NcButton,
 		NcLoadingIcon,
 		IconCheck,
@@ -335,7 +334,7 @@ export default {
 		return {
 			loading: false,
 			loadingMessage: undefined,
-			mode: this.account !== undefined ? 'manual' : 'auto',
+			mode: 'auto',
 			accountName: this.displayName,
 			emailAddress: this.email,
 			classificationEnabled: fromAccountOr('classificationEnabled', loadState('mail', 'importance_classification_default', true)),
@@ -369,6 +368,10 @@ export default {
 			'microsoftOauthUrl',
 		]),
 
+		settingsPage() {
+			return this.account !== undefined
+		},
+
 		isSetup() {
 			return this.account === undefined
 		},
@@ -438,14 +441,11 @@ export default {
 		},
 	},
 
-	watch: {
-		mode: {
-			immediate: true,
-			handler(mode) {
-				if (mode !== 'manual') {
-					return
-				}
+	methods: {
+		onModeChanged(e) {
+			this.mode = e.tab.id
 
+			if (this.mode === 'manual') {
 				// IMAP
 				if (this.manualConfig.imapUser === '') {
 					this.manualConfig.imapUser = this.emailAddress
@@ -461,11 +461,9 @@ export default {
 				if (this.manualConfig.smtpPassword === '') {
 					this.manualConfig.smtpPassword = this.autoConfig.password
 				}
-			},
+			}
 		},
-	},
 
-	methods: {
 		onImapSslModeChange(value) {
 			this.clearFeedback()
 			this.manualConfig.imapSslMode = value
@@ -756,18 +754,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+:deep(.tabs-component-tabs) {
+	display: flex;
+}
+
+:deep(.tabs-component-tab) {
+	flex-grow: 1;
+	text-align: center;
+	color: var(--color-text-lighter);
+	margin-bottom: calc(var(--default-grid-baseline) * 2 + var(--default-grid-baseline) / 2);
+}
+
+:deep(.tabs-component-tab.is-active) {
+	border-bottom: var(--border-width-input) solid black;
+	font-weight: bold;
+}
+
 :deep(.input-field) {
 	margin: calc(var(--default-grid-baseline) * 3) 0;
 }
 
-.account-form__panel label {
+.tabs-component-panels {
+	padding-top: calc(var(--default-grid-baseline) * 5);
+}
+
+.tabs-component-panels label {
 	text-align: start;
 	width: 100%;
 	display: inline-block;
 }
 
-.account-form__panel input,
-.account-form__panel select {
+.tabs-component-panels input,
+.tabs-component-panels select {
 	margin-bottom: calc(var(--default-grid-baseline) * 2);
 }
 </style>
diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
index 99ba51f556..99c7cd6697 100644
--- a/src/components/AccountSettings.vue
+++ b/src/components/AccountSettings.vue
@@ -138,8 +138,11 @@
 </template>
 
 <script>
-import { NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import AccountDefaultsSettings from '../components/AccountDefaultsSettings.vue'
 import AccountForm from '../components/AccountForm.vue'
 import AliasSettings from '../components/AliasSettings.vue'
diff --git a/src/components/AliasForm.vue b/src/components/AliasForm.vue
index 079f05f15b..c1b714b457 100644
--- a/src/components/AliasForm.vue
+++ b/src/components/AliasForm.vue
@@ -73,7 +73,8 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 7c105f925b..1d66b6b6f3 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -85,8 +85,9 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
 import AliasForm from './AliasForm.vue'
diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue
index 699979f558..075521783d 100755
--- a/src/components/AppSettingsMenu.vue
+++ b/src/components/AppSettingsMenu.vue
@@ -296,25 +296,23 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcAppSettingsDialog,
-	NcAppSettingsSection,
-	NcAppSettingsShortcutsSection,
-	NcButton,
-	NcDialog,
-	NcFormBox,
-	NcFormBoxButton,
-	NcFormBoxSwitch,
-	NcFormGroup,
-	NcHotkey,
-	NcHotkeyList,
-	NcInputField,
-	NcNoteCard,
-	NcRadioGroup,
-	NcRadioGroupButton,
-} from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
+import NcAppSettingsDialog from '@nextcloud/vue/components/NcAppSettingsDialog'
+import NcAppSettingsSection from '@nextcloud/vue/components/NcAppSettingsSection'
+import NcAppSettingsShortcutsSection from '@nextcloud/vue/components/NcAppSettingsShortcutsSection'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcFormBox from '@nextcloud/vue/components/NcFormBox'
+import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
+import NcFormBoxSwitch from '@nextcloud/vue/components/NcFormBoxSwitch'
+import NcFormGroup from '@nextcloud/vue/components/NcFormGroup'
+import NcHotkey from '@nextcloud/vue/components/NcHotkey'
+import NcHotkeyList from '@nextcloud/vue/components/NcHotkeyList'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcRadioGroup from '@nextcloud/vue/components/NcRadioGroup'
+import NcRadioGroupButton from '@nextcloud/vue/components/NcRadioGroupButton'
 import IconArrow from 'vue-material-design-icons/ArrowRight.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/CalendarSettings.vue b/src/components/CalendarSettings.vue
index 3bf127f6e2..05607a946f 100644
--- a/src/components/CalendarSettings.vue
+++ b/src/components/CalendarSettings.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import Logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/CertificateSettings.vue b/src/components/CertificateSettings.vue
index 6a87b20621..a2f7f8fe94 100644
--- a/src/components/CertificateSettings.vue
+++ b/src/components/CertificateSettings.vue
@@ -40,8 +40,10 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcButton, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import Logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 import { compareSmimeCertificates } from '../util/smime.js'
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 06d806aaae..0fcb8814f8 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -551,14 +551,22 @@
 import { showError, showWarning } from '@nextcloud/dialogs'
 import { getCanonicalLocale, getFirstDay, getLocale, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionRadio, NcActions, NcButton, NcIconSvgWrapper, NcListItemIcon, NcSelect } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import debounce from 'lodash/fp/debounce.js'
 import trimStart from 'lodash/fp/trimCharsStart.js'
 import uniqBy from 'lodash/fp/uniqBy.js'
 import mitt from 'mitt'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcListItemIcon from '@nextcloud/vue/components/NcListItemIcon'
 import { NcReferencePickerModal } from '@nextcloud/vue/components/NcRichText'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import IconFormat from 'vue-material-design-icons/FormatSize.vue'
diff --git a/src/components/ComposerSessionIndicator.vue b/src/components/ComposerSessionIndicator.vue
index 5a74344019..36083ced1b 100644
--- a/src/components/ComposerSessionIndicator.vue
+++ b/src/components/ComposerSessionIndicator.vue
@@ -41,8 +41,9 @@
 </template>
 
 <script>
-import { NcActionButton, NcActions } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
 import ArrowExpandIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import PencilIcon from 'vue-material-design-icons/PencilOutline.vue'
diff --git a/src/components/ConfirmationModal.vue b/src/components/ConfirmationModal.vue
index a17947558c..41ff0ec96b 100644
--- a/src/components/ConfirmationModal.vue
+++ b/src/components/ConfirmationModal.vue
@@ -29,7 +29,8 @@
 <script>
 
 import { t } from '@nextcloud/l10n'
-import { NcButton, NcModal } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcModal from '@nextcloud/vue/components/NcModal'
 
 export default {
 	name: 'ConfirmationModal',
diff --git a/src/components/DelegationModal.vue b/src/components/DelegationModal.vue
index 638875c3e0..4c39ccd600 100644
--- a/src/components/DelegationModal.vue
+++ b/src/components/DelegationModal.vue
@@ -98,8 +98,14 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import { ShareType } from '@nextcloud/sharing'
-import { NcAvatar, NcButton, NcDialog, NcListItem, NcLoadingIcon, NcModal, NcSelectUsers } from '@nextcloud/vue'
 import debounce from 'lodash/fp/debounce.js'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
 import logger from '../logger.js'
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 19fd34d736..5b094a4104 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -532,17 +532,15 @@ import { showError, showSuccess, showWarning } from '@nextcloud/dialogs'
 import { isRTL } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcActionButton,
-	NcActionInput,
-	NcActionLink,
-	NcActionSeparator,
-	NcActionText,
-	NcAssistantIcon,
-	NcCheckboxRadioSwitch,
-} from '@nextcloud/vue'
 import escapeHtml from 'escape-html'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
+import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAssistantIcon from '@nextcloud/vue/components/NcAssistantIcon'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
@@ -1711,19 +1709,6 @@ export default {
 	margin-bottom: 6px;
 }
 
-:deep(.line-two__subtitle) {
-	display: flex;
-	flex-basis: 100%;
-	padding-inline-start: 40px;
-	width: 450px;
-}
-
-:deep(.line-one__title) {
-	flex-direction: row;
-	display: flex;
-	width: 200px;
-}
-
 .line-two.one-line {
 	display: flex;
 	overflow: hidden;
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index 660f3f4f79..3d73389b65 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -167,9 +167,12 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcActions, NcButton, NcDialog } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { differenceWith } from 'ramda'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import IconSelect from 'vue-material-design-icons/CloseThick.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
diff --git a/src/components/EnvelopeSingleClickActions.vue b/src/components/EnvelopeSingleClickActions.vue
index 895dda4eda..1a0806d973 100644
--- a/src/components/EnvelopeSingleClickActions.vue
+++ b/src/components/EnvelopeSingleClickActions.vue
@@ -44,7 +44,7 @@
 
 <script>
 
-import { NcButton } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
 import EmailUnread from 'vue-material-design-icons/EmailOutline.vue'
 import ImportantIcon from 'vue-material-design-icons/LabelVariant.vue'
diff --git a/src/components/EnvelopeSkeleton.vue b/src/components/EnvelopeSkeleton.vue
index 58f8b32c78..d0ea7536db 100644
--- a/src/components/EnvelopeSkeleton.vue
+++ b/src/components/EnvelopeSkeleton.vue
@@ -126,7 +126,9 @@
 </template>
 
 <script>
-import { NcActions, NcCounterBubble, NcVNodes } from '@nextcloud/vue'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
+import NcVNodes from '@nextcloud/vue/components/NcVNodes'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import EnvelopeSingleClickActions from './EnvelopeSingleClickActions.vue'
 
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index 0b83a8221f..740583e134 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -120,9 +120,11 @@ import { AttendeeProperty, createEvent, DateTimeValue, TextProperty } from '@nex
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { getTimezoneManager } from '@nextcloud/timezones'
-import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import jstz from 'jstz'
 import { mapState, mapStores } from 'pinia'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 import RecipientListItem from './RecipientListItem.vue'
 import logger from '../logger.js'
diff --git a/src/components/Imip.vue b/src/components/Imip.vue
index 4f82989f47..fd543d13e9 100644
--- a/src/components/Imip.vue
+++ b/src/components/Imip.vue
@@ -120,10 +120,12 @@
 import { AttendeeProperty, CalendarComponent, DateTimeValue, EventComponent, getParserManager, Parameter, Property } from '@nextcloud/calendar-js'
 import { namespaces as NS } from '@nextcloud/cdav-library'
 import { showError } from '@nextcloud/dialogs'
-import { NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import pLimit from 'p-limit'
 import { mapState } from 'pinia'
 import { flatten } from 'ramda'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarIcon from 'vue-material-design-icons/CalendarOutline.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import CalendarPickerOption from './CalendarPickerOption.vue'
diff --git a/src/components/InternalAddress.vue b/src/components/InternalAddress.vue
index 8097b044ef..39441dc891 100644
--- a/src/components/InternalAddress.vue
+++ b/src/components/InternalAddress.vue
@@ -73,10 +73,14 @@
 import IconCancel from '@mdi/svg/svg/cancel.svg'
 import IconCheck from '@mdi/svg/svg/check.svg'
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop.js'
 import sortBy from 'lodash/fp/sortBy.js'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconEmail from 'vue-material-design-icons/EmailOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index c3c890ad21..3ebc670777 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -22,7 +22,8 @@
 </template>
 
 <script>
-import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 export default {
 	name: 'Loading',
 	components: {
diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue
index 6ff5b88a30..e9c7ea9801 100644
--- a/src/components/MailboxPicker.vue
+++ b/src/components/MailboxPicker.vue
@@ -21,8 +21,8 @@
 			<ul>
 				<NcListItem
 					v-for="box in filteredMailboxes"
-					compact
 					:key="box.databaseId"
+					compact
 					:name="getMailboxTitle(box)"
 					@click.prevent="onClickMailbox(box)">
 					<template #icon>
@@ -38,8 +38,12 @@
 				<IconFolder />
 			</template>
 			<template #description>
-				<p v-if="filterName == ''">{{ t('mail', 'No more submailboxes in here') }}</p>
-				<p v-else>{{ t('mail', 'No results') }}</p>
+				<p v-if="filterName == ''">
+					{{ t('mail', 'No more submailboxes in here') }}
+				</p>
+				<p v-else>
+					{{ t('mail', 'No results') }}
+				</p>
 			</template>
 		</NcEmptyContent>
 	</NcDialog>
@@ -47,8 +51,13 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { NcBreadcrumb, NcBreadcrumbs, NcDialog, NcEmptyContent, NcInputField, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcBreadcrumb from '@nextcloud/vue/components/NcBreadcrumb'
+import NcBreadcrumbs from '@nextcloud/vue/components/NcBreadcrumbs'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import MailboxIcon from './icons/MailboxIcon.vue'
 import { translate as translateMailboxName } from '../i18n/MailboxTranslator.js'
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 1dd0907624..02e492eca3 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -200,8 +200,7 @@
 </template>
 
 <script>
-import { NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
-import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
+import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
@@ -248,6 +247,7 @@ export default {
 		Thread,
 	},
 
+	mixins: [isMobile],
 	props: {
 		account: {
 			type: Object,
@@ -260,12 +260,6 @@ export default {
 		},
 	},
 
-	setup() {
-		return {
-			isMobile: useIsMobile(),
-		}
-	},
-
 	data() {
 		return {
 
diff --git a/src/components/MdnRequest.vue b/src/components/MdnRequest.vue
index 300697558f..d54e665711 100644
--- a/src/components/MdnRequest.vue
+++ b/src/components/MdnRequest.vue
@@ -22,8 +22,8 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import logger from '../logger.js'
 import { sendMdn } from '../service/MessageService.js'
 import useMainStore from '../store/mainStore.js'
diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
index e58f11e0c7..08a1c0236f 100644
--- a/src/components/MenuEnvelope.vue
+++ b/src/components/MenuEnvelope.vue
@@ -288,15 +288,13 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import {
-	NcActionButton,
-	NcActionLink,
-	NcLoadingIcon,
-} from '@nextcloud/vue'
 import { Base64 } from 'js-base64'
 import { mapState, mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionLink from '@nextcloud/vue/components/NcActionLink'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import CalendarBlankIcon from 'vue-material-design-icons/CalendarBlankOutline.vue'
diff --git a/src/components/Message.vue b/src/components/Message.vue
index e35ef9c5d3..0e603ca483 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -91,8 +91,10 @@
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import { NcAssistantButton, NcButton, NcPopover } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAssistantButton from '@nextcloud/vue/components/NcAssistantButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
 import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
 import LockOffIcon from 'vue-material-design-icons/LockOffOutline.vue'
 import ReplyIcon from 'vue-material-design-icons/ReplyOutline.vue'
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index 068ba1d2eb..5c43f78552 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -76,7 +76,9 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconArrow from 'vue-material-design-icons/ArrowLeft.vue'
 import IconSave from 'vue-material-design-icons/FolderOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index af13fed5e6..921442e2a0 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -74,7 +74,8 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import CloudDownload from 'vue-material-design-icons/CloudDownloadOutline.vue'
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 42ae14684a..d921035d25 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -54,7 +54,8 @@
 
 <script>
 import iframeResize from '@iframe-resizer/parent'
-import { NcActionButton, NcActions } from '@nextcloud/vue'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconMail from 'vue-material-design-icons/EmailOutline.vue'
 import IconImage from 'vue-material-design-icons/ImageSizeSelectActual.vue'
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index bc5efbd74a..12f27a0848 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -96,8 +96,10 @@
 </template>
 
 <script>
-import { NcAppNavigation, NcAppNavigationItem, NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconAlertTriangle from 'vue-material-design-icons/AlertOutline.vue'
 import IconSetting from 'vue-material-design-icons/CogOutline.vue'
 import AppSettingsMenu from '../components/AppSettingsMenu.vue'
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index b48749df74..3eb3573d87 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -104,9 +104,15 @@
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationCaption, NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { Fragment } from 'vue-frag'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import MenuDown from 'vue-material-design-icons/ChevronDown.vue'
 import MenuUp from 'vue-material-design-icons/ChevronUp.vue'
 import IconSettings from 'vue-material-design-icons/CogOutline.vue'
diff --git a/src/components/NavigationAccountExpandCollapse.vue b/src/components/NavigationAccountExpandCollapse.vue
index de72da99b0..6591794634 100644
--- a/src/components/NavigationAccountExpandCollapse.vue
+++ b/src/components/NavigationAccountExpandCollapse.vue
@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import { NcAppNavigationItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue
index 299c205af8..b591532b6b 100644
--- a/src/components/NavigationMailbox.vue
+++ b/src/components/NavigationMailbox.vue
@@ -191,8 +191,14 @@
 
 import { showError, showInfo } from '@nextcloud/dialogs'
 import { n } from '@nextcloud/l10n'
-import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationItem, NcCounterBubble, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconEmailCheck from 'vue-material-design-icons/EmailCheckOutline.vue'
 import IconFolderSync from 'vue-material-design-icons/FolderSyncOutline.vue'
 import IconInfo from 'vue-material-design-icons/InformationOutline.vue'
diff --git a/src/components/NavigationOutbox.vue b/src/components/NavigationOutbox.vue
index bccb9e79ec..3bd97c8b25 100644
--- a/src/components/NavigationOutbox.vue
+++ b/src/components/NavigationOutbox.vue
@@ -24,8 +24,9 @@
 </template>
 
 <script>
-import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
+import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import IconOutbox from 'vue-material-design-icons/InboxArrowUp.vue'
 import useOutboxStore from '../store/outboxStore.js'
 
diff --git a/src/components/NeedsTranslationInfo.vue b/src/components/NeedsTranslationInfo.vue
index d12239d37e..b14a99f2a8 100644
--- a/src/components/NeedsTranslationInfo.vue
+++ b/src/components/NeedsTranslationInfo.vue
@@ -19,8 +19,8 @@
 
 <script>
 import { getLanguage } from '@nextcloud/l10n'
-import { NcButton } from '@nextcloud/vue'
 import { mapState } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import useMainStore from '../store/mainStore.js'
 
 export default {
diff --git a/src/components/NewMessageButtonHeader.vue b/src/components/NewMessageButtonHeader.vue
index ce93b914fc..f899cb1265 100644
--- a/src/components/NewMessageButtonHeader.vue
+++ b/src/components/NewMessageButtonHeader.vue
@@ -35,8 +35,8 @@
 </template>
 
 <script>
-import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconRefresh from 'vue-material-design-icons/Refresh.vue'
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 66b7fed33e..86385fff60 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -151,11 +151,9 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
-import {
-	NcButton,
-	NcEmptyContent,
-} from '@nextcloud/vue'
 import { mapActions, mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import DefaultComposerIcon from 'vue-material-design-icons/ArrowCollapse.vue'
 import MaximizeIcon from 'vue-material-design-icons/ArrowExpand.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/NoMessageSelected.vue b/src/components/NoMessageSelected.vue
index 8d044594d6..63e2066006 100644
--- a/src/components/NoMessageSelected.vue
+++ b/src/components/NoMessageSelected.vue
@@ -22,8 +22,8 @@
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContentDetails } from '@nextcloud/vue'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
+import NcAppContentDetails from '@nextcloud/vue/components/NcAppContentDetails'
 import NewMessageButtonHeader from './NewMessageButtonHeader.vue'
 
 export default {
diff --git a/src/components/OutOfOfficeForm.vue b/src/components/OutOfOfficeForm.vue
index 2ac8f4bd60..eeaa1ae130 100644
--- a/src/components/OutOfOfficeForm.vue
+++ b/src/components/OutOfOfficeForm.vue
@@ -121,9 +121,10 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcDateTimePicker } from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
 import TextEditor from './TextEditor.vue'
diff --git a/src/components/Outbox.vue b/src/components/Outbox.vue
index 6d54d5ba88..37cf037eb1 100644
--- a/src/components/Outbox.vue
+++ b/src/components/Outbox.vue
@@ -30,8 +30,9 @@
 </template>
 
 <script>
-import { NcAppContent, NcAppContentList } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcAppContentList from '@nextcloud/vue/components/NcAppContentList'
 import EmptyMailbox from './EmptyMailbox.vue'
 import Error from './Error.vue'
 import LoadingSkeleton from './LoadingSkeleton.vue'
diff --git a/src/components/OutboxMessageListItem.vue b/src/components/OutboxMessageListItem.vue
index 2f7d2c2706..4d12e1b0c1 100644
--- a/src/components/OutboxMessageListItem.vue
+++ b/src/components/OutboxMessageListItem.vue
@@ -59,8 +59,9 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getLanguage, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import Copy from 'vue-material-design-icons/ContentCopy.vue'
 import Send from 'vue-material-design-icons/SendOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/PhishingWarning.vue b/src/components/PhishingWarning.vue
index 85c14dcab5..d903924701 100644
--- a/src/components/PhishingWarning.vue
+++ b/src/components/PhishingWarning.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { NcButton } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconAlertOutline from 'vue-material-design-icons/AlertOutline.vue'
 
 export default {
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index 534494053b..ded9e6bb76 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -115,9 +115,12 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcPopover, NcSelect, NcUserBubble } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import uniqBy from 'lodash/fp/uniqBy.js'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcUserBubble from '@nextcloud/vue/components/NcUserBubble'
 import IconUser from 'vue-material-design-icons/AccountOutline.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClipboard from 'vue-material-design-icons/ClipboardTextOutline.vue'
diff --git a/src/components/RecipientInfo.vue b/src/components/RecipientInfo.vue
index 2a3bd33b67..4dc1833463 100644
--- a/src/components/RecipientInfo.vue
+++ b/src/components/RecipientInfo.vue
@@ -70,8 +70,8 @@
 
 <script>
 import { t } from '@nextcloud/l10n'
-import { NcButton } from '@nextcloud/vue'
 import { mapGetters } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconArrowDown from 'vue-material-design-icons/ArrowDown.vue'
 import IconArrowUp from 'vue-material-design-icons/ArrowUp.vue'
 import Avatar from './Avatar.vue'
diff --git a/src/components/RecipientListItem.vue b/src/components/RecipientListItem.vue
index c8d1720eb2..082184c940 100644
--- a/src/components/RecipientListItem.vue
+++ b/src/components/RecipientListItem.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script>
-import { NcListItemIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcListItemIcon from '@nextcloud/vue/components/NcListItemIcon'
 import Close from 'vue-material-design-icons/Close.vue'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/SieveAccountForm.vue b/src/components/SieveAccountForm.vue
index cba8968bfc..3e600a1362 100644
--- a/src/components/SieveAccountForm.vue
+++ b/src/components/SieveAccountForm.vue
@@ -67,8 +67,11 @@
 </template>
 
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcPasswordField, NcTextField } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import useMainStore from '../store/mainStore.js'
 
 export default {
diff --git a/src/components/SieveFilterForm.vue b/src/components/SieveFilterForm.vue
index 7bfccab176..d538b58754 100644
--- a/src/components/SieveFilterForm.vue
+++ b/src/components/SieveFilterForm.vue
@@ -29,8 +29,9 @@
 </template>
 
 <script>
-import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import useMainStore from '../store/mainStore.js'
 
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index cf2c03f62f..6f15dfb241 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -62,9 +62,13 @@
 </template>
 
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import TextEditor from './TextEditor.vue'
 import logger from '../logger.js'
diff --git a/src/components/SourceModal.vue b/src/components/SourceModal.vue
index cdb51d59cf..dfec6d8170 100644
--- a/src/components/SourceModal.vue
+++ b/src/components/SourceModal.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { NcModal } from '@nextcloud/vue'
+import NcModal from '@nextcloud/vue/components/NcModal'
 
 export default {
 	name: 'SourceModal',
diff --git a/src/components/TagItem.vue b/src/components/TagItem.vue
index c720e2f53b..4c45ff815f 100644
--- a/src/components/TagItem.vue
+++ b/src/components/TagItem.vue
@@ -66,8 +66,13 @@
 
 <script>
 import { showInfo } from '@nextcloud/dialogs'
-import { NcActionButton, NcActionInput, NcActions, NcActionText, NcColorPicker, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconEdit from 'vue-material-design-icons/PencilOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import logger from '../logger.js'
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index 79078c156e..6602fbf788 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -57,8 +57,12 @@
 
 <script>
 import { showError, showInfo } from '@nextcloud/dialogs'
-import { NcActionInput, NcActionText, NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionInput from '@nextcloud/vue/components/NcActionInput'
+import NcActionText from '@nextcloud/vue/components/NcActionText'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconTag from 'vue-material-design-icons/TagOutline.vue'
 import DeleteTagModal from './DeleteTagModal.vue'
diff --git a/src/components/TaskModal.vue b/src/components/TaskModal.vue
index 7ccd2b213d..2795c45e88 100644
--- a/src/components/TaskModal.vue
+++ b/src/components/TaskModal.vue
@@ -77,10 +77,12 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import ICAL from 'ical.js'
 import jstz from 'jstz'
 import { mapStores } from 'pinia'
+import NcDateTimePicker from '@nextcloud/vue/components/NcDateTimePicker'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CalendarPickerOption from './CalendarPickerOption.vue'
 import logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue
index b144bd9599..3b9a54b139 100644
--- a/src/components/TextEditor.vue
+++ b/src/components/TextEditor.vue
@@ -24,7 +24,7 @@
 <script>
 import CKEditor from '@ckeditor/ckeditor5-vue2'
 import { getLanguage } from '@nextcloud/l10n'
-import { emojiAddRecent, emojiSearch } from '@nextcloud/vue/functions/emoji'
+import { emojiAddRecent, emojiSearch } from '@nextcloud/vue'
 import {
 	Alignment,
 	Base64UploadAdapter,
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 100c9eac09..61a85c1cbe 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -41,8 +41,8 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { NcAppContentDetails } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppContentDetails from '@nextcloud/vue/components/NcAppContentDetails'
 import Error from './Error.vue'
 import Loading from './Loading.vue'
 import ThreadEnvelope from './ThreadEnvelope.vue'
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 3fbebad4cd..65aa14b9cf 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -394,11 +394,12 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionText from '@nextcloud/vue/components/NcActionText'
 import AiIcon from '@nextcloud/vue/components/NcAssistantIcon'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUpIcon from 'vue-material-design-icons/ChevronUp.vue'
diff --git a/src/components/TranslationModal.vue b/src/components/TranslationModal.vue
index 33d348bc4e..0bd7103fb2 100644
--- a/src/components/TranslationModal.vue
+++ b/src/components/TranslationModal.vue
@@ -83,8 +83,12 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getLanguage } from '@nextcloud/l10n'
-import { NcButton, NcDialog, NcLoadingIcon, NcRichText, NcSelect } from '@nextcloud/vue'
 import { mapState } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcRichText from '@nextcloud/vue/components/NcRichText'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import WarningIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
diff --git a/src/components/TrustedSenders.vue b/src/components/TrustedSenders.vue
index db5fea9ed0..47dd3d39ee 100644
--- a/src/components/TrustedSenders.vue
+++ b/src/components/TrustedSenders.vue
@@ -33,9 +33,10 @@
 <script>
 
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton, NcListItem } from '@nextcloud/vue'
 import prop from 'lodash/fp/prop.js'
 import sortBy from 'lodash/fp/sortBy.js'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import IconDomain from 'vue-material-design-icons/Domain.vue'
 import IconEmail from 'vue-material-design-icons/EmailOutline.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
diff --git a/src/components/itinerary/CalendarImport.vue b/src/components/itinerary/CalendarImport.vue
index 4a0c9567c4..9ddee1f2b2 100644
--- a/src/components/itinerary/CalendarImport.vue
+++ b/src/components/itinerary/CalendarImport.vue
@@ -24,8 +24,10 @@
 <script>
 
 import moment from '@nextcloud/moment'
-import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import ical from 'ical.js'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import logger from '../../logger.js'
 
diff --git a/src/components/mailFilter/Action.vue b/src/components/mailFilter/Action.vue
index a67ff3d90a..385434d86a 100644
--- a/src/components/mailFilter/Action.vue
+++ b/src/components/mailFilter/Action.vue
@@ -34,7 +34,9 @@
 </template>
 
 <script>
-import { NcButton, NcSelect, NcTextField } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import ActionAddflag from './ActionAddflag.vue'
 import ActionAddSystemFlag from './ActionAddSystemFlag.vue'
diff --git a/src/components/mailFilter/ActionAddSystemFlag.vue b/src/components/mailFilter/ActionAddSystemFlag.vue
index e65b54c77a..1c57ae9a09 100644
--- a/src/components/mailFilter/ActionAddSystemFlag.vue
+++ b/src/components/mailFilter/ActionAddSystemFlag.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { NcSelect } from '@nextcloud/vue'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import { MailFilterSystemFlag } from '../../models/mailFilter.ts'
 
 export default {
diff --git a/src/components/mailFilter/ActionAddflag.vue b/src/components/mailFilter/ActionAddflag.vue
index 23ea2145b3..557eba60eb 100644
--- a/src/components/mailFilter/ActionAddflag.vue
+++ b/src/components/mailFilter/ActionAddflag.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { NcTextField } from '@nextcloud/vue'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 
 export default {
 	name: 'ActionAddflag',
diff --git a/src/components/mailFilter/CreateModal.vue b/src/components/mailFilter/CreateModal.vue
index 6db81eff86..3bfbd18a0d 100644
--- a/src/components/mailFilter/CreateModal.vue
+++ b/src/components/mailFilter/CreateModal.vue
@@ -38,13 +38,11 @@
 </template>
 
 <script>
-import {
-	NcButton,
-	NcCheckboxRadioSwitch,
-	NcLoadingIcon,
-	NcModal,
-} from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import { MailFilterConditionField } from '../../models/mailFilter.ts'
 import useMailFilterStore from '../../store/mailFilterStore.ts'
diff --git a/src/components/mailFilter/DeleteModal.vue b/src/components/mailFilter/DeleteModal.vue
index 7dea6b51b7..1a3b843174 100644
--- a/src/components/mailFilter/DeleteModal.vue
+++ b/src/components/mailFilter/DeleteModal.vue
@@ -15,7 +15,7 @@
 
 import IconCancel from '@mdi/svg/svg/cancel.svg?raw'
 import IconCheck from '@mdi/svg/svg/check.svg?raw'
-import { NcDialog } from '@nextcloud/vue'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 
 export default {
 	name: 'DeleteModal',
diff --git a/src/components/mailFilter/MailFilters.vue b/src/components/mailFilter/MailFilters.vue
index 9a5b20eee1..351a2c3e61 100644
--- a/src/components/mailFilter/MailFilters.vue
+++ b/src/components/mailFilter/MailFilters.vue
@@ -59,8 +59,10 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { NcActionButton, NcButton, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import DeleteModal from './DeleteModal.vue'
diff --git a/src/components/mailFilter/Operator.vue b/src/components/mailFilter/Operator.vue
index 2d5899d4c3..50b224cfb5 100644
--- a/src/components/mailFilter/Operator.vue
+++ b/src/components/mailFilter/Operator.vue
@@ -36,7 +36,9 @@
 </template>
 
 <script>
-import { NcButton, NcPopover, NcSelect } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcPopover from '@nextcloud/vue/components/NcPopover'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import IconInformationOutline from 'vue-material-design-icons/InformationOutline.vue'
 import { MailFilterOperator } from '../../models/mailFilter.ts'
 
diff --git a/src/components/mailFilter/Test.vue b/src/components/mailFilter/Test.vue
index afe4aa70b5..82b9fdb88a 100644
--- a/src/components/mailFilter/Test.vue
+++ b/src/components/mailFilter/Test.vue
@@ -67,7 +67,8 @@
 </template>
 
 <script>
-import { NcButton, NcSelect } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import { MailFilterConditionField, MailFilterConditionOperator } from '../../models/mailFilter.ts'
 
diff --git a/src/components/mailFilter/UpdateModal.vue b/src/components/mailFilter/UpdateModal.vue
index 5d5c033288..38bfc77020 100644
--- a/src/components/mailFilter/UpdateModal.vue
+++ b/src/components/mailFilter/UpdateModal.vue
@@ -85,7 +85,11 @@
 </template>
 
 <script>
-import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcModal, NcTextField } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import Action from './Action.vue'
 import Operator from './Operator.vue'
diff --git a/src/components/quickActions/Action.vue b/src/components/quickActions/Action.vue
index 3e202ba86e..412542c835 100644
--- a/src/components/quickActions/Action.vue
+++ b/src/components/quickActions/Action.vue
@@ -31,7 +31,8 @@
 </template>
 
 <script>
-import { NcButton, NcSelect } from '@nextcloud/vue'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import DragIcon from 'vue-material-design-icons/Drag.vue'
 import Icon from './Icon.vue'
diff --git a/src/components/quickActions/Settings.vue b/src/components/quickActions/Settings.vue
index 29a6283365..c15e310dff 100644
--- a/src/components/quickActions/Settings.vue
+++ b/src/components/quickActions/Settings.vue
@@ -118,8 +118,14 @@
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { NcActionButton, NcActions, NcButton, NcListItem, NcLoadingIcon, NcModal, NcTextField } from '@nextcloud/vue'
 import { Container, Draggable } from 'vue-dndrop'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcTextField from '@nextcloud/vue/components/NcTextField'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
 import IconEmailFast from 'vue-material-design-icons/EmailFastOutline.vue'
 import EmailRead from 'vue-material-design-icons/EmailOpenOutline.vue'
diff --git a/src/components/smime/SmimeCertificateModal.vue b/src/components/smime/SmimeCertificateModal.vue
index 9e3386df87..797e4cb4f4 100644
--- a/src/components/smime/SmimeCertificateModal.vue
+++ b/src/components/smime/SmimeCertificateModal.vue
@@ -144,8 +144,11 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcButton, NcEmptyContent, NcModal, NcPasswordField } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
+import NcModal from '@nextcloud/vue/components/NcModal'
+import NcPasswordField from '@nextcloud/vue/components/NcPasswordField'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
 import logger from '../../logger.js'
 import useMainStore from '../../store/mainStore.js'
diff --git a/src/components/textBlocks/ListItem.vue b/src/components/textBlocks/ListItem.vue
index f0e994d281..6ddb1b93a8 100644
--- a/src/components/textBlocks/ListItem.vue
+++ b/src/components/textBlocks/ListItem.vue
@@ -114,10 +114,17 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateOcsUrl } from '@nextcloud/router'
 import { ShareType } from '@nextcloud/sharing'
-import { NcActionButton, NcAvatar, NcButton, NcDialog, NcInputField, NcListItem, NcLoadingIcon, NcSelectUsers } from '@nextcloud/vue'
 import debounce from 'lodash/fp/debounce.js'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
+import NcActionButton from '@nextcloud/vue/components/NcActionButton'
+import NcAvatar from '@nextcloud/vue/components/NcAvatar'
+import NcButton from '@nextcloud/vue/components/NcButton'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcInputField from '@nextcloud/vue/components/NcInputField'
+import NcListItem from '@nextcloud/vue/components/NcListItem'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
+import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
diff --git a/src/components/textBlocks/TextBlockModal.vue b/src/components/textBlocks/TextBlockModal.vue
index 6148af7f7b..0f30be86ef 100644
--- a/src/components/textBlocks/TextBlockModal.vue
+++ b/src/components/textBlocks/TextBlockModal.vue
@@ -31,14 +31,13 @@
 		id="text-block-picker"
 		:name="t('mail', 'Text blocks')"
 		:message="t('mail', 'Text blocks are reusable pieces of text that can be inserted in messages. Visit the Settings panel to create your own.')"
-		@closing="handleClose">
-	</NcDialog>
+		@closing="handleClose" />
 </template>
 
 <script>
 import IconCheck from '@mdi/svg/svg/check.svg'
-import { NcDialog } from '@nextcloud/vue'
 import { mapState } from 'pinia'
+import NcDialog from '@nextcloud/vue/components/NcDialog'
 import ListItem from './ListItem.vue'
 import useMainStore from '../../store/mainStore.js'
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a8403ebbdb..465b1ebbde 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import { NcContent } from '@nextcloud/vue'
 import { mapState, mapStores } from 'pinia'
+import NcContent from '@nextcloud/vue/components/NcContent'
 import ComposerSessionIndicator from '../components/ComposerSessionIndicator.vue'
 import MailboxThread from '../components/MailboxThread.vue'
 import Navigation from '../components/Navigation.vue'
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index 67cc3f61ae..5d6b82b486 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -39,8 +39,10 @@
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContent, NcContent, NcEmptyContent } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
+import NcAppContent from '@nextcloud/vue/components/NcAppContent'
+import NcContent from '@nextcloud/vue/components/NcContent'
+import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import AccountForm from '../components/AccountForm.vue'
 import Navigation from '../components/Navigation.vue'
 import FluidMail from '../../img/mail-fluid.svg'