diff --git a/src/components/AccountForm.vue b/src/components/AccountForm.vue
index 7f14500e07..b48e25995e 100644
--- a/src/components/AccountForm.vue
+++ b/src/components/AccountForm.vue
@@ -239,34 +239,34 @@
 			{{ t('mail', 'Microsoft requires OAuth authentication. Ask your Nextcloud admin to configure Microsoft OAuth in the admin settings.') }}
 		</div>
 		<div class="account-form__submit-buttons">
-			<ButtonVue
+			<NcButton
 				v-if="mode === 'auto'"
 				:aria-label="submitButtonText"
 				class="account-form__submit-button"
-				type="primary"
-				native-type="submit"
+				variant="primary"
+				type="submit"
 				:disabled="isDisabledAuto || loading"
 				@click.prevent="onSubmit">
 				<template #icon>
-					<IconLoading v-if="loading" :size="20" />
+					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconCheck v-else :size="20" />
 				</template>
 				{{ submitButtonText }}
-			</ButtonVue>
-			<ButtonVue
+			</NcButton>
+			<NcButton
 				v-else-if="mode === 'manual'"
 				:aria-label="submitButtonText"
 				class="account-form__submit-button"
-				type="primary"
-				native-type="submit"
+				variant="primary"
+				type="submit"
 				:disabled="isDisabledManual || loading"
 				@click.prevent="onSubmit">
 				<template #icon>
-					<IconLoading v-if="loading" :size="20" />
+					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconCheck v-else :size="20" />
 				</template>
 				{{ submitButtonText }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div v-if="feedback" class="account-form--feedback">
 			{{ feedback }}
@@ -276,8 +276,8 @@
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
-import { translate as t } from '@nextcloud/l10n'
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcCheckboxRadioSwitch, NcInputField, NcPasswordField } from '@nextcloud/vue'
+import { t } from '@nextcloud/l10n'
+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'
@@ -299,8 +299,8 @@ export default {
 		NcCheckboxRadioSwitch,
 		Tab,
 		Tabs,
-		ButtonVue,
-		IconLoading,
+		NcButton,
+		NcLoadingIcon,
 		IconCheck,
 	},
 
diff --git a/src/components/AccountSettings.vue b/src/components/AccountSettings.vue
index 7c89cb37a9..e42da9f604 100644
--- a/src/components/AccountSettings.vue
+++ b/src/components/AccountSettings.vue
@@ -4,50 +4,50 @@
 -->
 
 <template>
-	<AppSettingsDialog
+	<NcAppSettingsDialog
 		id="app-settings-dialog"
 		:open="open"
 		:show-navigation="true"
 		:additional-trap-elements="trapElements"
 		:name="t('mail', 'Account settings')"
 		@update:open="updateOpen">
-		<AppSettingsSection
+		<NcAppSettingsSection
 			id="alias-settings"
 			:name="t('mail', 'Aliases')">
 			<AliasSettings :account="account" @rename-primary-alias="scrollToAccountSettings" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			id="certificate-settings"
 			:name="t('mail', 'Alias to S/MIME certificate mapping')">
 			<CertificateSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection id="writing-mode" :name="t('mail', 'Writing mode')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="writing-mode" :name="t('mail', 'Writing mode')">
 			<p class="settings-hint">
 				{{ t('mail', 'Preferred writing mode for new messages and replies.') }}
 			</p>
 			<EditorSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection id="signature" :name="t('mail', 'Signature')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="signature" :name="t('mail', 'Signature')">
 			<p class="settings-hint">
 				{{ t('mail', 'A signature is added to the text of new messages and replies.') }}
 			</p>
 			<SignatureSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection id="default-folders" :name=" t('mail', 'Default folders')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="default-folders" :name=" t('mail', 'Default folders')">
 			<p class="settings-hint">
 				{{
 					t('mail', 'The folders to use for drafts, sent messages, deleted messages, archived messages and junk messages.')
 				}}
 			</p>
 			<AccountDefaultsSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection id="trash-retention" :name=" t('mail', 'Automatic trash deletion')">
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="trash-retention" :name=" t('mail', 'Automatic trash deletion')">
 			<p class="settings-hint">
 				{{ t('mail', 'Days after which messages in Trash will automatically be deleted:') }}
 			</p>
 			<TrashRetentionSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account"
 			id="out-of-office-replies"
 			:name="t('mail', 'Autoresponder')">
@@ -61,14 +61,14 @@
 					{{ t('mail', 'Go to Sieve settings') }}
 				</NcButton>
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && systemVersion >= 33"
 			id="calendar-settings"
 			:name="t('mail', 'Calendar settings')">
 			<CalendarSettings :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account"
 			id="classification"
 			:name="t('mail', 'Classification settings')">
@@ -79,22 +79,22 @@
 				@update:checked="onToggleClassification">
 				{{ t('mail', 'Enable mark as important classification') }}
 			</NcCheckboxRadioSwitch>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && account.sieveEnabled"
 			id="mail-filters"
 			:name="t('mail', 'Filters')">
 			<div id="mail-filters">
 				<MailFilters :key="account.accountId" ref="mailFilters" :account="account" />
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account"
 			id="quick-actions-settings"
 			:name="t('mail', 'Quick actions')">
 			<Settings :key="account.accountId" ref="quickActions" :account="account" />
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && account.sieveEnabled"
 			id="sieve-filter"
 			:name="t('mail', 'Sieve script editor')">
@@ -104,8 +104,8 @@
 					ref="sieveFilterForm"
 					:account="account" />
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && !account.provisioningId && !account.isDelegated"
 			id="mail-server"
 			ref="mail-server"
@@ -118,8 +118,8 @@
 					:email="email"
 					:account="account" />
 			</div>
-		</AppSettingsSection>
-		<AppSettingsSection
+		</NcAppSettingsSection>
+		<NcAppSettingsSection
 			v-if="account && !account.provisioningId"
 			id="sieve-settings"
 			:name="t('mail', 'Sieve server')">
@@ -129,16 +129,16 @@
 					ref="sieveAccountForm"
 					:account="account" />
 			</div>
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 		<!-- TRANSLATORS: Settings for searching in a folder -->
-		<AppSettingsSection id="mailbox_search" :name="t('mail', 'Folder search')">
+		<NcAppSettingsSection id="mailbox_search" :name="t('mail', 'Folder search')">
 			<SearchSettings :account="account" />
-		</AppSettingsSection>
-	</AppSettingsDialog>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
-import { NcAppSettingsDialog as AppSettingsDialog, NcAppSettingsSection as AppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import AccountDefaultsSettings from '../components/AccountDefaultsSettings.vue'
 import AccountForm from '../components/AccountForm.vue'
@@ -166,8 +166,8 @@ export default {
 		AliasSettings,
 		EditorSettings,
 		SignatureSettings,
-		AppSettingsDialog,
-		AppSettingsSection,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
 		AccountDefaultsSettings,
 		CalendarSettings,
 		OutOfOfficeForm,
diff --git a/src/components/AliasForm.vue b/src/components/AliasForm.vue
index 3c358578f1..079f05f15b 100644
--- a/src/components/AliasForm.vue
+++ b/src/components/AliasForm.vue
@@ -37,7 +37,7 @@
 					:form="formId"
 					:name="t('mail', 'Update alias')">
 					<template #icon>
-						<IconLoading v-if="loading" :size="20" />
+						<NcLoadingIcon v-if="loading" :size="20" />
 						<IconCheck v-else :size="20" />
 					</template>
 				</NcButton>
@@ -63,7 +63,7 @@
 					:name="t('mail', 'Delete alias')"
 					@click.prevent="deleteAlias">
 					<template #icon>
-						<IconLoading v-if="loading" :size="20" />
+						<NcLoadingIcon v-if="loading" :size="20" />
 						<IconDelete v-else :size="20" />
 					</template>
 				</NcButton>
@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { NcLoadingIcon as IconLoading, NcButton } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 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'
@@ -83,7 +83,7 @@ export default {
 	components: {
 		NcButton,
 		IconRename,
-		IconLoading,
+		NcLoadingIcon,
 		IconDelete,
 		IconCheck,
 	},
diff --git a/src/components/AliasSettings.vue b/src/components/AliasSettings.vue
index 1371d50417..09d7563a1f 100644
--- a/src/components/AliasSettings.vue
+++ b/src/components/AliasSettings.vue
@@ -13,16 +13,16 @@
 					:alias="accountAlias"
 					:enable-update="false"
 					:enable-delete="false">
-					<ButtonVue
+					<NcButton
 						v-if="!account.provisioningId"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Go back')"
 						:name="t('mail', 'Change name')"
 						@click="$emit('rename-primary-alias')">
 						<template #icon>
 							<IconRename :size="20" />
 						</template>
-					</ButtonVue>
+					</NcButton>
 				</AliasForm>
 			</li>
 
@@ -52,41 +52,41 @@
 		</ul>
 
 		<div v-if="!account.provisioningId" class="aliases-controls">
-			<ButtonVue
+			<NcButton
 				v-if="!showForm"
-				type="primary"
+				variant="primary"
 				:aria-label="t('mail', 'Add alias')"
 				@click="showForm = true">
 				{{ t('mail', 'Add alias') }}
-			</ButtonVue>
+			</NcButton>
 
-			<ButtonVue
+			<NcButton
 				v-if="showForm"
-				native-type="submit"
-				type="primary"
+				type="submit"
+				variant="primary"
 				form="createAliasForm"
 				:aria-label="t('mail', 'Create alias')"
 				:disabled="loading">
 				<template #icon>
-					<IconLoading v-if="loading" :size="20" />
+					<NcLoadingIcon v-if="loading" :size="20" />
 					<IconCheck v-else :size="20" />
 				</template>
 				{{ t('mail', 'Create alias') }}
-			</ButtonVue>
-			<ButtonVue
+			</NcButton>
+			<NcButton
 				v-if="showForm"
-				type="tertiary-no-background"
+				variant="tertiary-no-background"
 				class="button-text"
 				:aria-label="t('mail', 'Cancel')"
 				@click="resetCreate">
 				{{ t("mail", "Cancel") }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 	</div>
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import IconRename from 'vue-material-design-icons/PencilOutline.vue'
@@ -98,8 +98,8 @@ export default {
 	name: 'AliasSettings',
 	components: {
 		AliasForm,
-		ButtonVue,
-		IconLoading,
+		NcButton,
+		NcLoadingIcon,
 		IconCheck,
 		IconRename,
 	},
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 3bc22cecf3..01f97c8d4f 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -47,9 +47,9 @@
 				<label class="to-label" for="to">
 					{{ t('mail', 'To') }}
 				</label>
-				<ButtonVue size="small" type="tertiary-no-background" @click.prevent="toggleViewMode">
+				<NcButton size="small" variant="tertiary-no-background" @click.prevent="toggleViewMode">
 					{{ t('mail', 'Cc/Bcc') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 			<div class="composer-fields--custom">
 				<NcSelect
@@ -92,7 +92,7 @@
 					</template>
 					<template #option="option">
 						<div>
-							<ListItemIcon
+							<NcListItemIcon
 								:no-margin="true"
 								:name="option.label"
 								:subname="getSubnameForRecipient(option)"
@@ -150,7 +150,7 @@
 					</template>
 					<template #option="option">
 						<div>
-							<ListItemIcon
+							<NcListItemIcon
 								:no-margin="true"
 								:name="option.label"
 								:subname="getSubnameForRecipient(option)"
@@ -209,7 +209,7 @@
 					</template>
 					<template #option="option">
 						<div>
-							<ListItemIcon
+							<NcListItemIcon
 								:no-margin="true"
 								:name="option.label"
 								:subname="getSubnameForRecipient(option)"
@@ -292,83 +292,83 @@
 					<span v-else-if="!canSaveDraft" class="draft-status">{{ t('mail', 'Error saving draft') }}</span>
 					<span v-else-if="draftSaved" class="draft-status">{{ t('mail', 'Draft saved') }}</span>
 				</p>
-				<ButtonVue
+				<NcButton
 					v-if="!savingDraft && !canSaveDraft"
 					class="button"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Save draft')"
 					@click="saveDraft">
 					<template #icon>
 						<Download :size="20" :title="t('mail', 'Save draft')" />
 					</template>
-				</ButtonVue>
-				<ButtonVue
+				</NcButton>
+				<NcButton
 					v-if="!savingDraft && draftSaved"
 					class="button"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Discard & close draft')"
 					@click="$emit('discard-draft')">
 					<template #icon>
 						<Delete :size="20" :title="t('mail', 'Discard & close draft')" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 			</div>
 			<div class="composer-actions--secondary-actions">
-				<ButtonVue
+				<NcButton
 					v-if="!encrypt && editorPlainText"
-					type="tertiary"
+					variant="tertiary"
 					:aria-label="t('mail', 'Enable formatting')"
 					@click="setEditorModeHtml()">
 					<template #icon>
 						<IconFormat :size="20" :title="t('mail', 'Enable formatting')" />
 					</template>
-				</ButtonVue>
-				<ButtonVue
+				</NcButton>
+				<NcButton
 					v-if="!encrypt && !editorPlainText"
-					type="tertiary"
+					variant="tertiary"
 					:pressed="true"
 					:aria-label="t('mail', 'Disable formatting')"
 					@click="setEditorModeText()">
 					<template #icon>
 						<IconFormat :size="20" :title="t('mail', 'Disable formatting')" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 
-				<Actions :open.sync="isAddAttachmentsOpen">
+				<NcActions :open.sync="isAddAttachmentsOpen">
 					<template #icon>
 						<Paperclip :size="20" />
 					</template>
-					<ActionButton :close-after-click="true" @click="onAddLocalAttachment">
+					<NcActionButton :close-after-click="true" @click="onAddLocalAttachment">
 						<template #icon>
 							<IconUpload :size="20" />
 						</template>
 						{{
 							t('mail', 'Upload attachment')
 						}}
-					</ActionButton>
-					<ActionButton :close-after-click="true" @click="onAddCloudAttachment">
+					</NcActionButton>
+					<NcActionButton :close-after-click="true" @click="onAddCloudAttachment">
 						<template #icon>
 							<IconFolder :size="20" />
 						</template>
 						{{
 							t('mail', 'Add attachment from Files')
 						}}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 
-				<Actions
+				<NcActions
 					:open.sync="isActionsOpen"
 					@close="isMoreActionsOpen = false">
 					<template v-if="!isMoreActionsOpen">
-						<ActionButton v-if="isPickerAvailable" :close-after-click="true" @click="openPicker">
+						<NcActionButton v-if="isPickerAvailable" :close-after-click="true" @click="openPicker">
 							<template #icon>
 								<IconLinkPicker :size="20" />
 							</template>
 							{{
 								t('mail', 'Smart picker')
 							}}
-						</ActionButton>
-						<ActionButton :close-after-click="true" @click="openTextBlockPicker">
+						</NcActionButton>
+						<NcActionButton :close-after-click="true" @click="openTextBlockPicker">
 							<template #icon>
 								<NcIconSvgWrapper
 									:size="20"
@@ -378,8 +378,8 @@
 							{{
 								t('mail', 'Text blocks')
 							}}
-						</ActionButton>
-						<ActionButton
+						</NcActionButton>
+						<NcActionButton
 							v-if="!isScheduledSendingDisabled"
 							:close-after-click="false"
 							@click="isMoreActionsOpen = true">
@@ -389,40 +389,40 @@
 							{{
 								t('mail', 'Send later')
 							}}
-						</ActionButton>
-						<ActionCheckbox
-							:checked="requestMdnVal"
+						</NcActionButton>
+						<NcActionCheckbox
+							:model-value="requestMdnVal"
 							@check="requestMdnVal = true"
 							@uncheck="requestMdnVal = false">
 							{{ t('mail', 'Request a read receipt') }}
-						</ActionCheckbox>
-						<ActionCheckbox
+						</NcActionCheckbox>
+						<NcActionCheckbox
 							v-if="smimeCertificateForCurrentAlias"
-							:checked="wantsSmimeSign"
+							:model-value="wantsSmimeSign"
 							@check="smimeSignCheck(true)"
 							@uncheck="smimeSignCheck(false)">
 							{{ t('mail', 'Sign message with S/MIME') }}
-						</ActionCheckbox>
-						<ActionCheckbox
+						</NcActionCheckbox>
+						<NcActionCheckbox
 							v-if="smimeCertificateForCurrentAlias"
-							:checked="wantsSmimeEncrypt"
+							:model-value="wantsSmimeEncrypt"
 							:disabled="encrypt"
 							@check="wantsSmimeEncrypt = true"
 							@uncheck="wantsSmimeEncrypt = false">
 							{{ t('mail', 'Encrypt message with S/MIME') }}
-						</ActionCheckbox>
-						<ActionCheckbox
+						</NcActionCheckbox>
+						<NcActionCheckbox
 							v-if="mailvelope.available"
-							:checked="encrypt"
+							:model-value="encrypt"
 							:disabled="wantsSmimeEncrypt"
 							@change="isActionsOpen = false"
 							@check="encrypt = true"
 							@uncheck="encrypt = false">
 							{{ t('mail', 'Encrypt message with Mailvelope') }}
-						</ActionCheckbox>
+						</NcActionCheckbox>
 					</template>
 					<template v-if="isMoreActionsOpen">
-						<ActionButton
+						<NcActionButton
 							:close-after-click="false"
 							@click="isMoreActionsOpen = false">
 							<template #icon>
@@ -431,43 +431,43 @@
 									:size="20" />
 								{{ t('mail', 'Send later') }}
 							</template>
-						</ActionButton>
-						<ActionRadio
+						</NcActionButton>
+						<NcActionRadio
 							v-model="sendAtVal"
 							:value="0"
 							:name="sendAtVal.toString()"
 							class="send-action-radio">
 							{{ t('mail', 'Send now') }}
-						</ActionRadio>
-						<ActionRadio
+						</NcActionRadio>
+						<NcActionRadio
 							v-model="sendAtVal"
 							:value="dateTomorrowMorning"
 							:name="sendAtVal.toString()"
 							class="send-action-radio send-action-radio--multiline">
 							{{ t('mail', 'Tomorrow morning') }} - {{ convertToLocalDate(dateTomorrowMorning) }}
-						</ActionRadio>
-						<ActionRadio
+						</NcActionRadio>
+						<NcActionRadio
 							v-model="sendAtVal"
 							:value="dateTomorrowAfternoon"
 							:name="sendAtVal.toString()"
 							class="send-action-radio send-action-radio--multiline">
 							{{ t('mail', 'Tomorrow afternoon') }} - {{ convertToLocalDate(dateTomorrowAfternoon) }}
-						</ActionRadio>
-						<ActionRadio
+						</NcActionRadio>
+						<NcActionRadio
 							v-model="sendAtVal"
 							:value="dateMondayMorning"
 							:name="sendAtVal.toString()"
 							class="send-action-radio send-action-radio--multiline">
 							{{ t('mail', 'Monday morning') }} - {{ convertToLocalDate(dateMondayMorning) }}
-						</ActionRadio>
-						<ActionRadio
+						</NcActionRadio>
+						<NcActionRadio
 							v-model="sendAtVal"
 							:name="sendAtVal.toString()"
 							class="send-action-radio"
 							:value="customSendTime">
 							{{ t('mail', 'Custom date and time') }}
-						</ActionRadio>
-						<ActionInput
+						</NcActionRadio>
+						<NcActionInput
 							v-model="selectedDate"
 							:is-native-picker="true"
 							:min="dateToday"
@@ -480,14 +480,14 @@
 							:minute-step="5"
 							@change="onChangeSendLater(customSendTime)">
 							{{ t('mail', 'Enter a date') }}
-						</ActionInput>
+						</NcActionInput>
 					</template>
-				</Actions>
+				</NcActions>
 
-				<ButtonVue
+				<NcButton
 					:disabled="!canSend || sending"
-					native-type="submit"
-					type="primary"
+					type="submit"
+					variant="primary"
 					:aria-label="submitButtonTitle"
 					@click="onSend">
 					<template #icon>
@@ -496,7 +496,7 @@
 							:size="20" />
 					</template>
 					{{ submitButtonTitle }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</div>
 	</div>
@@ -504,9 +504,9 @@
 
 <script>
 import { showError, showWarning } from '@nextcloud/dialogs'
-import { getCanonicalLocale, getFirstDay, getLocale, translate as t } from '@nextcloud/l10n'
+import { getCanonicalLocale, getFirstDay, getLocale, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton as ActionButton, NcActionCheckbox as ActionCheckbox, NcActionInput as ActionInput, NcActionRadio as ActionRadio, NcActions as Actions, NcButton as ButtonVue, NcListItemIcon as ListItemIcon, NcIconSvgWrapper, NcSelect } from '@nextcloud/vue'
+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'
@@ -555,12 +555,12 @@ export default {
 	name: 'Composer',
 	components: {
 		MailvelopeEditor,
-		Actions,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
-		ActionRadio,
-		ButtonVue,
+		NcActions,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
+		NcActionRadio,
+		NcButton,
 		ComposerAttachments,
 		TextBlockModal,
 		ChevronLeft,
@@ -573,7 +573,7 @@ export default {
 		NcIconSvgWrapper,
 		Paperclip,
 		TextEditor,
-		ListItemIcon,
+		NcListItemIcon,
 		RecipientListItem,
 		Send,
 		SendClock,
diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index f10c62ba6c..05c43941be 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -202,7 +202,7 @@
 				:mimetype-filter="['httpd/unix-directory']"
 				@close="() => isFilePickerOpen = false" />
 			<EnvelopePrimaryActions v-if="!moreActionsOpen && !snoozeOptions" id="primary-actions">
-				<ActionButton
+				<NcActionButton
 					v-if="hasWriteAcl"
 					class="action--primary"
 					:close-after-click="true"
@@ -218,8 +218,8 @@
 					{{
 						data.flags.flagged ? t('mail', 'Unfavorite') : t('mail', 'Favorite')
 					}}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="hasSeenAcl"
 					class="action--primary"
 					:close-after-click="true"
@@ -235,8 +235,8 @@
 					{{
 						data.flags.seen ? t('mail', 'Unread') : t('mail', 'Read')
 					}}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="hasWriteAcl"
 					class="action--primary"
 					:close-after-click="true"
@@ -248,25 +248,25 @@
 					{{
 						isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
 					}}
-				</ActionButton>
+				</NcActionButton>
 			</EnvelopePrimaryActions>
 			<template v-if="!moreActionsOpen && !snoozeOptions && !quickActionMenu">
-				<ActionText>
+				<NcActionText>
 					<template #icon>
 						<ClockOutlineIcon :size="20" />
 					</template>
 					{{
 						messageLongDate
 					}}
-				</ActionText>
+				</NcActionText>
 				<NcActionSeparator />
-				<ActionButton :is-menu="true" @click="showQuickActionsMenu">
+				<NcActionButton :is-menu="true" @click="showQuickActionsMenu">
 					<template #icon>
 						<IconEmailFast :size="20" />
 					</template>
 					{{ t('mail', 'Quick actions') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="hasWriteAcl"
 					:close-after-click="true"
 					@click.prevent="onToggleJunk">
@@ -276,8 +276,8 @@
 					{{
 						data.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')
 					}}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="hasWriteAcl"
 					:close-after-click="true"
 					@click.prevent="onOpenTagModal">
@@ -285,8 +285,8 @@
 						<TagIcon :size="20" />
 					</template>
 					{{ t('mail', 'Edit tags') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="!isSnoozeDisabled && !isSnoozedMailbox"
 					:close-after-click="false"
 					@click="showSnoozeOptions">
@@ -298,8 +298,8 @@
 					{{
 						t('mail', 'Snooze')
 					}}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="!isSnoozeDisabled && isSnoozedMailbox"
 					:close-after-click="true"
 					@click="onUnSnooze">
@@ -309,8 +309,8 @@
 							:size="20" />
 					</template>
 					{{ t('mail', 'Unsnooze') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="hasDeleteAcl"
 					:close-after-click="true"
 					@click.prevent="onOpenMoveModal">
@@ -323,8 +323,8 @@
 					<template v-else>
 						{{ t('mail', 'Move Message') }}
 					</template>
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="showArchiveButton && hasArchiveAcl"
 					:close-after-click="true"
 					:disabled="disableArchiveButton"
@@ -338,18 +338,18 @@
 					<template v-else>
 						{{ t('mail', 'Archive message') }}
 					</template>
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					:close-after-click="false"
 					@click="showMoreActionOptions">
 					<template #icon>
 						<DotsHorizontalIcon :size="20" />
 					</template>
 					{{ t('mail', 'More actions') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 			<template v-if="snoozeOptions">
-				<ActionButton
+				<NcActionButton
 					:close-after-click="false"
 					@click="snoozeOptions = false">
 					<template #icon>
@@ -358,18 +358,18 @@
 					{{
 						t('mail', 'Back')
 					}}
-				</ActionButton>
+				</NcActionButton>
 
 				<NcActionSeparator />
 
-				<ActionButton
+				<NcActionButton
 					v-for="option in reminderOptions"
 					:key="option.key"
 					:aria-label="option.ariaLabel"
 					close-after-click
 					@click.stop="onSnooze(option.timestamp)">
 					{{ option.label }}
-				</ActionButton>
+				</NcActionButton>
 
 				<NcActionSeparator />
 
@@ -384,7 +384,7 @@
 					</template>
 				</NcActionInput>
 
-				<ActionButton
+				<NcActionButton
 					:aria-label="t('mail', 'Set custom snooze')"
 					close-after-click
 					@click.stop="setCustomSnooze(customSnoozeDateTime)">
@@ -392,34 +392,34 @@
 						<CheckIcon :size="20" />
 					</template>
 					{{ t('mail', 'Set custom snooze') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 			<template v-if="moreActionsOpen">
-				<ActionButton
+				<NcActionButton
 					:close-after-click="false"
 					@click="moreActionsOpen = false">
 					<template #icon>
 						<ChevronLeft :size="20" />
 					</template>
 					{{ t('mail', 'More actions') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					:close-after-click="true"
 					@click.prevent="onOpenEditAsNew">
 					<template #icon>
 						<PlusIcon :size="20" />
 					</template>
 					{{ t('mail', 'Edit as new message') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					:close-after-click="true"
 					@click.prevent="showEventModal = true">
 					<template #icon>
 						<IconCreateEvent :size="20" />
 					</template>
 					{{ t('mail', 'Reply with meeting') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="tasksEnabled"
 					:close-after-click="true"
 					@click.prevent="showTaskModal = true">
@@ -427,16 +427,16 @@
 						<TaskIcon :size="20" />
 					</template>
 					{{ t('mail', 'Create task') }}
-				</ActionButton>
-				<ActionLink
+				</NcActionButton>
+				<NcActionLink
 					:close-after-click="true"
 					:href="exportMessageLink">
 					<template #icon>
 						<DownloadIcon :size="20" />
 					</template>
 					{{ t('mail', 'Download message') }}
-				</ActionLink>
-				<ActionButton
+				</NcActionLink>
+				<NcActionButton
 					class="message-save-to-cloud"
 					:disabled="savingToCloud"
 					:close-after-click="true"
@@ -445,8 +445,8 @@
 						<IconSave :size="20" />
 					</template>
 					{{ t('mail', 'Save message to Files') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="hasDeleteAcl"
 					:close-after-click="true"
 					@click.prevent="onDelete">
@@ -459,18 +459,18 @@
 					<template v-else>
 						{{ t('mail', 'Delete message') }}
 					</template>
-				</ActionButton>
+				</NcActionButton>
 			</template>
 			<template v-if="quickActionMenu">
-				<ActionButton
+				<NcActionButton
 					:close-after-click="false"
 					@click="closeQuickActionsMenu()">
 					<template #icon>
 						<ChevronLeft :size="20" />
 					</template>
 					{{ t('mail', 'Back to all actions') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-for="action in filteredQuickActions"
 					:key="action.id"
 					:close-after-click="true"
@@ -479,13 +479,13 @@
 						<Icon :action="action?.icon" />
 					</template>
 					{{ action.name }}
-				</ActionButton>
-				<ActionButton :close-after-click="true" @click="$emit('open:quick-actions-settings')">
+				</NcActionButton>
+				<NcActionButton :close-after-click="true" @click="$emit('open:quick-actions-settings')">
 					<template #icon>
 						<CogIcon :size="20" />
 					</template>
 					{{ t('mail', 'Manage quick actions') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 		</template>
 		<template #tags>
@@ -541,11 +541,11 @@ import { isRTL } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import {
-	NcActionButton as ActionButton,
-	NcActionLink as ActionLink,
-	NcActionText as ActionText,
+	NcActionButton,
 	NcActionInput,
+	NcActionLink,
 	NcActionSeparator,
+	NcActionText,
 	NcAssistantIcon,
 	NcCheckboxRadioSwitch,
 } from '@nextcloud/vue'
@@ -626,7 +626,7 @@ export default {
 		TaskModal,
 		EnvelopeSkeleton,
 		JunkIcon,
-		ActionButton,
+		NcActionButton,
 		NcCheckboxRadioSwitch,
 		MoveModal,
 		OpenInNewIcon,
@@ -640,8 +640,8 @@ export default {
 		IconAttachment,
 		IconBullet,
 		Reply,
-		ActionLink,
-		ActionText,
+		NcActionLink,
+		NcActionText,
 		DownloadIcon,
 		ClockOutlineIcon,
 		NcActionSeparator,
diff --git a/src/components/EnvelopeList.vue b/src/components/EnvelopeList.vue
index 67ab03611c..660f3f4f79 100644
--- a/src/components/EnvelopeList.vue
+++ b/src/components/EnvelopeList.vue
@@ -77,42 +77,42 @@
 					</NcButton>
 				</div>
 
-				<Actions class="app-content-list-item-menu" menu-align="right">
-					<ActionButton
+				<NcActions class="app-content-list-item-menu" menu-align="right">
+					<NcActionButton
 						v-if="isAtLeastOneSelectedNotJunk"
 						@click.prevent="markSelectionJunk">
 						<template #icon>
 							<AlertOctagonIcon :size="20" />
 						</template>
 						{{ n('mail', 'Mark {number} as spam', 'Mark {number} as spam', selection.length, { number: selection.length }) }}
-					</ActionButton>
-					<ActionButton
+					</NcActionButton>
+					<NcActionButton
 						v-if="isAtLeastOneSelectedJunk"
 						@click.prevent="markSelectionNotJunk">
 						<template #icon>
 							<AlertOctagonIcon :size="20" />
 						</template>
 						{{ n('mail', 'Mark {number} as not spam', 'Mark {number} as not spam', selection.length, { number: selection.length }) }}
-					</ActionButton>
-					<ActionButton :close-after-click="true" @click.prevent="onOpenTagModal">
+					</NcActionButton>
+					<NcActionButton :close-after-click="true" @click.prevent="onOpenTagModal">
 						<template #icon>
 							<TagIcon :size="20" />
 						</template>
 						{{ n('mail', 'Edit tags for {number}', 'Edit tags for {number}', selection.length, { number: selection.length }) }}
-					</ActionButton>
-					<ActionButton v-if="!account.isUnified" :close-after-click="true" @click.prevent="onOpenMoveModal">
+					</NcActionButton>
+					<NcActionButton v-if="!account.isUnified" :close-after-click="true" @click.prevent="onOpenMoveModal">
 						<template #icon>
 							<OpenInNewIcon :size="20" />
 						</template>
 						{{ n('mail', 'Move {number} thread', 'Move {number} threads', selection.length, { number: selection.length }) }}
-					</ActionButton>
-					<ActionButton :close-after-click="true" @click.prevent="forwardSelectedAsAttachment">
+					</NcActionButton>
+					<NcActionButton :close-after-click="true" @click.prevent="forwardSelectedAsAttachment">
 						<template #icon>
 							<ShareIcon :size="20" />
 						</template>
 						{{ n('mail', 'Forward {number} as attachment', 'Forward {number} as attachment', selection.length, { number: selection.length }) }}
-					</ActionButton>
-				</Actions>
+					</NcActionButton>
+				</NcActions>
 			</div>
 		</transition>
 
@@ -167,7 +167,7 @@
 
 <script>
 import { showError } from '@nextcloud/dialogs'
-import { NcActionButton as ActionButton, NcActions as Actions, NcButton, NcDialog } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcButton, NcDialog } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { differenceWith } from 'ramda'
 import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagonOutline.vue'
@@ -200,11 +200,11 @@ export default {
 		IconUnFavorite,
 		EmailUnread,
 		EmailRead,
-		Actions,
+		NcActions,
 		AddIcon,
 		NcButton,
 		NcDialog,
-		ActionButton,
+		NcActionButton,
 		Envelope,
 		IconDelete,
 		ImportantIcon,
diff --git a/src/components/EventModal.vue b/src/components/EventModal.vue
index 6b439e7018..0b83a8221f 100644
--- a/src/components/EventModal.vue
+++ b/src/components/EventModal.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal
+	<NcModal
 		size="large"
 		:name="t('mail', 'Create event')"
 		@close="onClose">
@@ -18,7 +18,7 @@
 					type="text">
 			</div>
 			<div class="dateTimePicker">
-				<DatetimePicker
+				<NcDateTimePicker
 					v-model="startDate"
 					:format="dateFormat"
 					:clearable="false"
@@ -27,7 +27,7 @@
 					:type="datePickerType"
 					:show-timezone-select="true"
 					:timezone-id="startTimezoneId" />
-				<DatetimePicker
+				<NcDateTimePicker
 					v-model="endDate"
 					:format="dateFormat"
 					:clearable="false"
@@ -112,7 +112,7 @@
 				{{ t('mail', 'Create') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
@@ -120,7 +120,7 @@ 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 as DatetimePicker, NcModal as Modal, NcSelect } from '@nextcloud/vue'
+import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import jstz from 'jstz'
 import { mapState, mapStores } from 'pinia'
 import CalendarPickerOption from './CalendarPickerOption.vue'
@@ -135,8 +135,8 @@ export default {
 	components: {
 		RecipientListItem,
 		CalendarPickerOption,
-		DatetimePicker,
-		Modal,
+		NcDateTimePicker,
+		NcModal,
 		NcSelect,
 	},
 
diff --git a/src/components/InternalAddress.vue b/src/components/InternalAddress.vue
index 4c258f4473..8097b044ef 100644
--- a/src/components/InternalAddress.vue
+++ b/src/components/InternalAddress.vue
@@ -49,15 +49,15 @@
 			</template>
 		</NcListItem>
 
-		<ButtonVue
-			type="secondary"
+		<NcButton
+			variant="secondary"
 			wide
 			@click="openDialog = true">
 			<template #icon>
 				<IconAdd :size="20" />
 			</template>
 			{{ t('mail', 'Add internal address') }}
-		</ButtonVue>
+		</NcButton>
 		<NcDialog
 			:open.sync="openDialog"
 			:buttons="buttons"
@@ -73,7 +73,7 @@
 import IconCancel from '@mdi/svg/svg/cancel.svg'
 import IconCheck from '@mdi/svg/svg/check.svg'
 import { showError } from '@nextcloud/dialogs'
-import { NcButton as ButtonVue, NcActionButton, NcDialog, NcListItem, NcTextField } from '@nextcloud/vue'
+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'
@@ -89,7 +89,7 @@ const sortByAddress = sortBy(prop('address'))
 export default {
 	name: 'InternalAddress',
 	components: {
-		ButtonVue,
+		NcButton,
 		NcDialog,
 		NcTextField,
 		NcActionButton,
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index d3b394f024..c3c890ad21 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -4,30 +4,30 @@
 -->
 <template>
 	<div class="wrapper">
-		<EmptyContent
+		<NcEmptyContent
 			v-if="hint"
 			class="empty-content"
 			:name="hint">
 			<template #icon>
-				<IconLoading />
+				<NcLoadingIcon />
 			</template>
 			<template #description>
 				<transition name="fade">
 					<em v-if="slowHint && slow">{{ slowHint }}</em>
 				</transition>
 			</template>
-		</EmptyContent>
-		<IconLoading v-else class="container" />
+		</NcEmptyContent>
+		<NcLoadingIcon v-else class="container" />
 	</div>
 </template>
 
 <script>
-import { NcEmptyContent as EmptyContent, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 export default {
 	name: 'Loading',
 	components: {
-		IconLoading,
-		EmptyContent,
+		NcLoadingIcon,
+		NcEmptyContent,
 	},
 
 	props: {
diff --git a/src/components/MailboxPicker.vue b/src/components/MailboxPicker.vue
index 40833d9ca2..206444b6ea 100644
--- a/src/components/MailboxPicker.vue
+++ b/src/components/MailboxPicker.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal @close="onClose">
+	<NcModal @close="onClose">
 		<div ref="content" class="modal-content">
 			<h2 class="oc-dialog-title">
 				{{ t('mail', 'Choose target folder') }}
@@ -54,24 +54,24 @@
 				<h2>{{ t('mail', 'No more submailboxes in here') }}</h2>
 			</div>
 			<div class="buttons">
-				<ButtonVue
-					type="primary"
+				<NcButton
+					variant="primary"
 					:disabled="loading || (!allowRoot && !selectedMailboxId)"
 					:aria-label="loading ? labelSelectLoading : labelSelect"
 					@click="onSelect">
 					<template #icon>
-						<IconLoading v-if="loading" :size="20" />
+						<NcLoadingIcon v-if="loading" :size="20" />
 					</template>
 					{{ loading ? labelSelectLoading : labelSelect }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
-import { translate as t } from '@nextcloud/l10n'
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcModal as Modal } from '@nextcloud/vue'
+import { t } from '@nextcloud/l10n'
+import { NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconArchive from 'vue-material-design-icons/ArchiveArrowDownOutline.vue'
 import IconBreadcrumb from 'vue-material-design-icons/ChevronRight.vue'
@@ -87,8 +87,8 @@ import { mailboxHasRights } from '../util/acl.js'
 export default {
 	name: 'MailboxPicker',
 	components: {
-		ButtonVue,
-		Modal,
+		NcButton,
+		NcModal,
 		IconInbox,
 		IconDraft,
 		IconSent,
@@ -96,7 +96,7 @@ export default {
 		IconTrash,
 		IconFolder,
 		IconBreadcrumb,
-		IconLoading,
+		NcLoadingIcon,
 	},
 
 	props: {
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 76464d1c93..02e492eca3 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<AppContent
+	<NcAppContent
 		:pane-config-key="'mail-' + layoutMode"
 		:layout="layoutMode"
 		:show-details="isThreadShown"
@@ -18,7 +18,7 @@
 						:account-id="account.accountId"
 						@search-changed="onUpdateSearchQuery" />
 				</div>
-				<AppContentList
+				<NcAppContentList
 					v-infinite-scroll="onScroll"
 					v-shortkey.once="shortkeys"
 					class="envelope-list"
@@ -39,14 +39,14 @@
 								:name="t('mail', 'Favorites')" />
 							<NcPopover trigger="hover focus">
 								<template #trigger>
-									<ButtonVue
-										type="tertiary-no-background"
+									<NcButton
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Favorites info')"
 										class="button">
 										<template #icon>
 											<IconInfo :size="20" />
 										</template>
-									</ButtonVue>
+									</NcButton>
 								</template>
 								<p class="section-header-info">
 									{{ favoritesInfo }}
@@ -86,14 +86,14 @@
 								:name="t('mail', 'Favorites')" />
 							<NcPopover trigger="hover focus">
 								<template #trigger>
-									<ButtonVue
-										type="tertiary-no-background"
+									<NcButton
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Favorites info')"
 										class="button">
 										<template #icon>
 											<IconInfo :size="20" />
 										</template>
-									</ButtonVue>
+									</NcButton>
 								</template>
 								<p class="section-header-info">
 									{{ favoritesInfo }}
@@ -120,14 +120,14 @@
 								:name="t('mail', 'Follow up')" />
 							<NcPopover trigger="hover focus">
 								<template #trigger>
-									<ButtonVue
-										type="tertiary-no-background"
+									<NcButton
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Follow up info')"
 										class="button">
 										<template #icon>
 											<IconInfo :size="20" />
 										</template>
-									</ButtonVue>
+									</NcButton>
 								</template>
 								<p class="section-header-info">
 									{{ followupInfo }}
@@ -151,14 +151,14 @@
 								:name="t('mail', 'Important')" />
 							<NcPopover trigger="hover focus">
 								<template #trigger>
-									<ButtonVue
-										type="tertiary-no-background"
+									<NcButton
+										variant="tertiary-no-background"
 										:aria-label="t('mail', 'Important info')"
 										class="button">
 										<template #icon>
 											<IconInfo :size="20" />
 										</template>
-									</ButtonVue>
+									</NcButton>
 								</template>
 								<p class="section-header-info">
 									{{ importantInfo }}
@@ -190,17 +190,17 @@
 							:is-priority-inbox="true"
 							:bus="bus" />
 					</template>
-				</AppContentList>
+				</NcAppContentList>
 			</div>
 		</template>
 
 		<Thread v-if="showThread" @delete="deleteMessage" />
 		<NoMessageSelected v-else-if="hasEnvelopes" />
-	</AppContent>
+	</NcAppContent>
 </template>
 
 <script>
-import { NcAppContent as AppContent, NcAppContentList as AppContentList, NcButton as ButtonVue, isMobile, NcPopover } from '@nextcloud/vue'
+import { isMobile, NcAppContent, NcAppContentList, NcButton, NcPopover } from '@nextcloud/vue'
 import addressParser from 'address-rfc2822'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
@@ -235,9 +235,9 @@ export default {
 	},
 
 	components: {
-		AppContent,
-		AppContentList,
-		ButtonVue,
+		NcAppContent,
+		NcAppContentList,
+		NcButton,
 		IconInfo,
 		Mailbox,
 		NoMessageSelected,
diff --git a/src/components/MenuEnvelope.vue b/src/components/MenuEnvelope.vue
index d5fd7d9860..885215cd88 100644
--- a/src/components/MenuEnvelope.vue
+++ b/src/components/MenuEnvelope.vue
@@ -14,7 +14,7 @@
 			:mimetype-filter="['httpd/unix-directory']"
 			@close="() => isFilePickerOpen = false" />
 		<template v-if="!localMoreActionsOpen && !snoozeActionsOpen">
-			<ActionButton
+			<NcActionButton
 				v-if="hasWriteAcl"
 				class="action--primary"
 				:close-after-click="true"
@@ -26,8 +26,8 @@
 				{{
 					isImportant ? t('mail', 'Unimportant') : t('mail', 'Important')
 				}}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="true"
 				@click="onForward">
 				<template #icon>
@@ -36,8 +36,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Forward') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="false"
 				:description="t('mail', 'Only for message recipients')"
 				@click.prevent="onCopyMessageLink">
@@ -51,8 +51,8 @@
 						:size="20" />
 				</template>
 				{{ copied ? t('mail', 'Link copied') : t('mail', 'Copy direct link') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="hasWriteAcl"
 				:close-after-click="true"
 				@click.prevent="onToggleJunk">
@@ -64,8 +64,8 @@
 				{{
 					envelope.flags.$junk ? t('mail', 'Mark not spam') : t('mail', 'Mark as spam')
 				}}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="hasWriteAcl"
 				:close-after-click="true"
 				@click.prevent="$emit('open-tag-modal')">
@@ -75,8 +75,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Edit tags') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="hasDeleteAcl"
 				:close-after-click="true"
 				@click.prevent="$emit('open-move-modal')">
@@ -86,8 +86,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Move message') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="!isSnoozeDisabled && !isSnoozedMailbox"
 				:close-after-click="false"
 				@click="snoozeActionsOpen = true">
@@ -97,8 +97,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Snooze') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="!isSnoozeDisabled && isSnoozedMailbox"
 				:close-after-click="true"
 				@click="onUnSnooze">
@@ -108,8 +108,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Unsnooze') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="isTranslationEnabled ?? false"
 				:close-after-click="true"
 				@click.prevent="$emit('open-translation-modal')">
@@ -119,8 +119,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Translate') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="false"
 				@click="localMoreActionsOpen = true">
 				<template #icon>
@@ -129,10 +129,10 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'More actions') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 		<template v-if="localMoreActionsOpen">
-			<ActionButton
+			<NcActionButton
 				:close-after-click="false"
 				@click="localMoreActionsOpen = false">
 				<template #icon>
@@ -141,8 +141,8 @@
 						:size="20" />
 					{{ t('mail', 'More actions') }}
 				</template>
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="true"
 				@click.prevent="forwardSelectedAsAttachment">
 				<template #icon>
@@ -151,8 +151,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Forward message as attachment') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="true"
 				@click="onOpenEditAsNew">
 				<template #icon>
@@ -161,8 +161,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Edit as new message') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="true"
 				@click.prevent="$emit('open-event-modal')">
 				<template #icon>
@@ -171,8 +171,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Reply with meeting') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="tasksEnabled"
 				:close-after-click="true"
 				@click.prevent="$emit('open-task-modal')">
@@ -182,8 +182,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Create task') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="withShowSource"
 				:close-after-click="true"
 				@click.prevent="$emit('show-source-modal')">
@@ -193,35 +193,35 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'View source') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="true"
 				@click="onPrint">
 				<template #icon>
 					<PrinterIcon :size="20" />
 				</template>
 				{{ t('mail', 'Print message') }}
-			</ActionButton>
-			<ActionLink
+			</NcActionButton>
+			<NcActionLink
 				:close-after-click="true"
 				:href="exportMessageLink">
 				<template #icon>
 					<DownloadIcon :size="20" />
 				</template>
 				{{ t('mail', 'Download message') }}
-			</ActionLink>
-			<ActionButton
+			</NcActionLink>
+			<NcActionButton
 				class="message-save-to-cloud"
 				:disabled="savingToCloud"
 				:close-after-click="true"
 				@click="() => isFilePickerOpen = true">
 				<template #icon>
 					<IconSave v-if="!savingToCloud" :size="20" />
-					<IconLoading v-else-if="savingToCloud" :size="20" />
+					<NcLoadingIcon v-else-if="savingToCloud" :size="20" />
 				</template>
 				{{ t('mail', 'Save message to Files') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="isSieveEnabled"
 				:close-after-click="true"
 				@click.prevent="$emit('open-mail-filter-from-envelope')">
@@ -231,8 +231,8 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Create mail filter') }}
-			</ActionButton>
-			<ActionLink
+			</NcActionButton>
+			<NcActionLink
 				v-if="debug"
 				:download="threadingFileName"
 				:href="threadingFile"
@@ -243,7 +243,7 @@
 						:size="20" />
 				</template>
 				{{ t('mail', 'Download thread data for debugging') }}
-			</ActionLink>
+			</NcActionLink>
 		</template>
 		<template v-if="snoozeActionsOpen">
 			<ActionButton
@@ -298,10 +298,9 @@ import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 import {
-	NcActionButton as ActionButton,
-	NcActionLink as ActionLink,
-	NcLoadingIcon as IconLoading,
 	NcActionButton,
+	NcActionLink,
+	NcLoadingIcon,
 } from '@nextcloud/vue'
 import { Base64 } from 'js-base64'
 import { mapState, mapStores } from 'pinia'
@@ -339,10 +338,10 @@ export default {
 	components: {
 		NcActionButton,
 		NcActionInput,
+		NcActionLink,
 		NcActionSeparator,
+		NcLoadingIcon,
 		CalendarClock,
-		ActionButton,
-		ActionLink,
 		AlertOctagonIcon,
 		CalendarBlankIcon,
 		ChevronLeft,
@@ -350,7 +349,6 @@ export default {
 		DotsHorizontalIcon,
 		TranslationIcon,
 		DownloadIcon,
-		IconLoading,
 		IconSave,
 		FilePicker,
 		InformationIcon,
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index e0679e0337..ffeba2b636 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -27,20 +27,20 @@
 			:multiselect="false"
 			:mimetype-filter="['httpd/unix-directory']"
 			@close="() => isFilePickerOpen = false" />
-		<Actions :boundaries-element="boundariesElement">
+		<NcActions :boundaries-element="boundariesElement">
 			<template v-if="!showCalendarPopover">
-				<ActionButton
+				<NcActionButton
 					v-if="isCalendarEvent"
 					class="attachment-import calendar"
 					:disabled="loadingCalendars"
 					@click.stop="loadCalendars">
 					<template #icon>
 						<IconAdd v-if="!loadingCalendars" :size="20" />
-						<IconLoading v-else-if="loadingCalendars" :size="20" />
+						<NcLoadingIcon v-else-if="loadingCalendars" :size="20" />
 					</template>
 					{{ t('mail', 'Import into calendar') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					class="attachment-download"
 					:close-after-click="true"
 					@click="download">
@@ -48,34 +48,34 @@
 						<IconDownload :size="20" />
 					</template>
 					{{ t('mail', 'Download attachment') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					class="attachment-save-to-cloud"
 					:disabled="savingToCloud"
 					:close-after-click="true"
 					@click="() => isFilePickerOpen = true">
 					<template #icon>
 						<IconSave v-if="!savingToCloud" :size="20" />
-						<IconLoading v-else-if="savingToCloud" :size="20" />
+						<NcLoadingIcon v-else-if="savingToCloud" :size="20" />
 					</template>
 					{{ t('mail', 'Save to Files') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
 			<template v-else>
-				<ActionButton @click="closeCalendarPopover">
+				<NcActionButton @click="closeCalendarPopover">
 					<template #icon>
 						<IconArrow :size="20" />
 					</template>
 					{{ t('mail', 'Go back') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-for="entry in calendarMenuEntries"
 					:key="entry.text"
 					@click="entry.action">
 					{{ entry.text }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
-		</Actions>
+		</NcActions>
 	</div>
 </template>
 
@@ -84,8 +84,8 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { formatFileSize } from '@nextcloud/files'
-import { translate as t } from '@nextcloud/l10n'
-import { NcActionButton as ActionButton, NcActions as Actions, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { t } from '@nextcloud/l10n'
+import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 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'
@@ -98,11 +98,11 @@ export default {
 	name: 'MessageAttachment',
 	components: {
 		FilePicker,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		IconAdd,
 		IconArrow,
-		IconLoading,
+		NcLoadingIcon,
 		IconSave,
 		IconDownload,
 	},
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index f77e3669b9..64cc2afa63 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -61,7 +61,7 @@
 				@click="() => isFilePickerOpen = true">
 				<template #icon>
 					<CloudDownload v-if="!savingToCloud" />
-					<IconLoading v-else class="spin" />
+					<NcLoadingIcon v-else class="spin" />
 				</template>
 				{{ t('mail', 'Save all to Files') }}
 			</NcButton>
@@ -84,7 +84,7 @@
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue as FilePicker } from '@nextcloud/dialogs/filepicker.js'
 import { generateUrl } from '@nextcloud/router'
-import { NcLoadingIcon as IconLoading, NcButton } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 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'
@@ -99,7 +99,7 @@ export default {
 	components: {
 		NcButton,
 		MessageAttachment,
-		IconLoading,
+		NcLoadingIcon,
 		Download,
 		CloudDownload,
 		ChevronDown,
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index d56e786c95..37bb29f3bf 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -11,30 +11,30 @@
 			@translate="$emit('translate')" />
 		<div v-if="hasBlockedContent" id="mail-message-has-blocked-content" style="color: #000000">
 			{{ t('mail', 'The images have been blocked to protect your privacy.') }}
-			<Actions type="tertiary" :menu-name="t('mail', 'Show images')">
-				<ActionButton @click="displayIframe">
+			<NcActions variant="tertiary" :menu-name="t('mail', 'Show images')">
+				<NcActionButton @click="displayIframe">
 					<template #icon>
 						<IconImage :size="20" />
 					</template>
 					{{ t('mail', 'Show images temporarily') }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="sender"
 					@click="onShowBlockedContent">
 					<template #icon>
 						<IconMail :size="20" />
 					</template>
 					{{ t('mail', 'Always show images from {sender}', { sender }) }}
-				</ActionButton>
-				<ActionButton
+				</NcActionButton>
+				<NcActionButton
 					v-if="domain"
 					@click="onShowBlockedContentForDomain">
 					<template #icon>
 						<IconDomain :size="20" />
 					</template>
 					{{ t('mail', 'Always show images from {domain}', { domain }) }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 		<div id="message-container" :class="{ scroll: !fullHeight }">
 			<iframe
@@ -51,7 +51,7 @@
 <script>
 import iframeResize from '@iframe-resizer/parent'
 import { loadState } from '@nextcloud/initial-state'
-import { NcActionButton as ActionButton, NcActions as Actions } from '@nextcloud/vue'
+import { NcActionButton, NcActions } from '@nextcloud/vue'
 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'
@@ -67,8 +67,8 @@ export default {
 	components: {
 		MdnRequest,
 		NeedsTranslationInfo,
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		IconImage,
 		IconMail,
 		IconDomain,
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
index cce5e72694..b1745868de 100644
--- a/src/components/Navigation.vue
+++ b/src/components/Navigation.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppNavigation class="mail-navigation">
+	<NcAppNavigation class="mail-navigation">
 		<template #search>
 			<NewMessageButtonHeader class="mail-navigation__new-message-button" />
 		</template>
@@ -70,7 +70,7 @@
 				<NavigationOutbox class="outbox" />
 			</div>
 			<div class="mail-settings">
-				<AppNavigationItem
+				<NcAppNavigationItem
 					class="mail-settings__button"
 					:close-after-click="true"
 					:name="t('mail', 'Mail settings')"
@@ -78,15 +78,15 @@
 					<template #icon>
 						<IconSetting :size="20" />
 					</template>
-				</AppNavigationItem>
+				</NcAppNavigationItem>
 			</div>
 		</template>
 		<AppSettingsMenu :open.sync="showSettings" />
-	</AppNavigation>
+	</NcAppNavigation>
 </template>
 
 <script>
-import { NcAppNavigation as AppNavigation, NcAppNavigationItem as AppNavigationItem, NcButton } from '@nextcloud/vue'
+import { NcAppNavigation, NcAppNavigationItem, NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconAlertTriangle from 'vue-material-design-icons/AlertOutline.vue'
 import IconSetting from 'vue-material-design-icons/CogOutline.vue'
@@ -103,7 +103,7 @@ import useOutboxStore from '../store/outboxStore.js'
 export default {
 	name: 'Navigation',
 	components: {
-		AppNavigation,
+		NcAppNavigation,
 		AppSettingsMenu,
 		NavigationAccount,
 		NavigationAccountExpandCollapse,
@@ -112,7 +112,7 @@ export default {
 		NcButton,
 		NewMessageButtonHeader,
 		IconSetting,
-		AppNavigationItem,
+		NcAppNavigationItem,
 		IconAlertTriangle,
 	},
 
diff --git a/src/components/NavigationAccount.vue b/src/components/NavigationAccount.vue
index 0d9b24706e..da550e68f5 100644
--- a/src/components/NavigationAccount.vue
+++ b/src/components/NavigationAccount.vue
@@ -14,29 +14,29 @@
 			<!-- Actions -->
 			<template #actions>
 				<template v-if="isDisabled">
-					<ActionText :name="t('mail', 'Provisioned account is disabled')">
+					<NcActionText :name="t('mail', 'Provisioned account is disabled')">
 						<template #icon>
 							<IconInfo :size="20" />
 						</template>
 						{{ t('mail', 'Please login using a password to enable this account. The current session is using passwordless authentication, e.g. SSO or WebAuthn.') }}
-					</ActionText>
+					</NcActionText>
 				</template>
 				<template v-else>
-					<ActionText v-if="!account.isUnified && account.quotaPercentage !== null ">
+					<NcActionText v-if="!account.isUnified && account.quotaPercentage !== null ">
 						<template #icon>
 							<IconInfo :size="20" />
 						</template>
 						{{ quotaText }}
-					</ActionText>
-					<ActionButton
+					</NcActionText>
+					<NcActionButton
 						:close-after-click="true"
 						@click="showAccountSettings(true)">
 						<template #icon>
 							<IconSettings :size="20" />
 						</template>
 						{{ t('mail', 'Account settings') }}
-					</ActionButton>
-					<ActionButton
+					</NcActionButton>
+					<NcActionButton
 						v-if="canDelegate"
 						:close-after-click="true"
 						@click="showDelegationModal = true">
@@ -47,52 +47,52 @@
 								:svg="IconDelegation" />
 						</template>
 						{{ t('mail', 'Delegate account') }}
-					</ActionButton>
-					<ActionCheckbox
-						:checked="account.showSubscribedOnly"
+					</NcActionButton>
+					<NcActionCheckbox
+						:model-value="account.showSubscribedOnly"
 						:disabled="savingShowOnlySubscribed"
 						@update:checked="changeShowSubscribedOnly">
 						{{ t('mail', 'Show only subscribed folders') }}
-					</ActionCheckbox>
-					<ActionButton v-if="!editing && nameLabel" @click="openCreateMailbox">
+					</NcActionCheckbox>
+					<NcActionButton v-if="!editing && nameLabel" @click="openCreateMailbox">
 						<template #icon>
 							<IconFolderAdd :size="20" />
 						</template>
 						{{ t('mail', 'Add folder') }}
-					</ActionButton>
-					<ActionInput
+					</NcActionButton>
+					<NcActionInput
 						v-if="editing && nameInput"
-						:value.sync="createMailboxName"
+						v-model="createMailboxName"
 						@submit.prevent.stop="createMailbox">
 						<template #icon>
 							<IconFolderAdd :size="20" />
 						</template>
 						{{ t('mail', 'Folder name') }}
-					</ActionInput>
-					<ActionText v-if="showSaving">
+					</NcActionInput>
+					<NcActionText v-if="showSaving">
 						<template #icon>
-							<IconLoading :size="20" />
+							<NcLoadingIcon :size="20" />
 						</template>
 						{{ t('mail', 'Saving') }}
-					</ActionText>
-					<ActionButton v-if="!isFirst" @click="changeAccountOrderUp">
+					</NcActionText>
+					<NcActionButton v-if="!isFirst" @click="changeAccountOrderUp">
 						<template #icon>
 							<MenuUp :size="20" />
 						</template>
 						{{ t('mail', 'Move up') }}
-					</ActionButton>
-					<ActionButton v-if="!isLast" @click="changeAccountOrderDown">
+					</NcActionButton>
+					<NcActionButton v-if="!isLast" @click="changeAccountOrderDown">
 						<template #icon>
 							<MenuDown :size="20" />
 						</template>
 						{{ t('mail', 'Move down') }}
-					</ActionButton>
-					<ActionButton v-if="!account.provisioningId && !account.isDelegated" @click="removeAccount">
+					</NcActionButton>
+					<NcActionButton v-if="!account.provisioningId && !account.isDelegated" @click="removeAccount">
 						<template #icon>
 							<IconDelete :size="20" />
 						</template>
 						{{ t('mail', 'Remove account') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
 			</template>
 		</NcAppNavigationCaption>
@@ -109,7 +109,7 @@
 import { DialogBuilder, showError } from '@nextcloud/dialogs'
 import { formatFileSize } from '@nextcloud/files'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton as ActionButton, NcActionCheckbox as ActionCheckbox, NcActionInput as ActionInput, NcActionText as ActionText, NcLoadingIcon as IconLoading, NcAppNavigationCaption, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationCaption, NcIconSvgWrapper, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import { Fragment } from 'vue-frag'
 import MenuDown from 'vue-material-design-icons/ChevronDown.vue'
@@ -128,10 +128,10 @@ export default {
 	components: {
 		NcAppNavigationCaption,
 		Fragment,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
-		ActionText,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
+		NcActionText,
 		AccountSettings: () => import(/* webpackChunkName: "account-settings" */ './AccountSettings.vue'),
 		DelegationModal: () => import(/* webpackChunkName: "delegation-modal" */ './DelegationModal.vue'),
 		IconInfo,
@@ -141,7 +141,7 @@ export default {
 		MenuDown,
 		MenuUp,
 		IconDelete,
-		IconLoading,
+		NcLoadingIcon,
 	},
 
 	props: {
diff --git a/src/components/NavigationAccountExpandCollapse.vue b/src/components/NavigationAccountExpandCollapse.vue
index d3b30e7e68..de72da99b0 100644
--- a/src/components/NavigationAccountExpandCollapse.vue
+++ b/src/components/NavigationAccountExpandCollapse.vue
@@ -4,11 +4,11 @@
 -->
 
 <template>
-	<AppNavigationItem :name="title" @click="toggleCollapse" />
+	<NcAppNavigationItem :name="title" @click="toggleCollapse" />
 </template>
 
 <script>
-import { NcAppNavigationItem as AppNavigationItem } from '@nextcloud/vue'
+import { NcAppNavigationItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import logger from '../logger.js'
 import useMainStore from '../store/mainStore.js'
@@ -16,7 +16,7 @@ import useMainStore from '../store/mainStore.js'
 export default {
 	name: 'NavigationAccountExpandCollapse',
 	components: {
-		AppNavigationItem,
+		NcAppNavigationItem,
 	},
 
 	props: {
diff --git a/src/components/NavigationMailbox.vue b/src/components/NavigationMailbox.vue
index 6ef366624b..a252ddcc48 100644
--- a/src/components/NavigationMailbox.vue
+++ b/src/components/NavigationMailbox.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppNavigationItem
+	<NcAppNavigationItem
 		v-if="visible"
 		:id="genId(mailbox)"
 		:key="genId(mailbox)"
@@ -90,7 +90,7 @@
 		</template>
 		<!-- actions -->
 		<template #actions>
-			<ActionText
+			<NcActionText
 				v-if="!account.isUnified && mailbox.specialRole !== 'flagged'"
 				:name="mailbox.name">
 				<template #icon>
@@ -99,9 +99,9 @@
 						:size="20" />
 				</template>
 				{{ statsText }}
-			</ActionText>
+			</NcActionText>
 
-			<ActionButton
+			<NcActionButton
 				v-if="mailbox.specialRole !== 'flagged' && !account.isUnified && hasSeenAcl"
 				:name="t('mail', 'Mark all as read')"
 				:disabled="loadingMarkAsRead"
@@ -109,54 +109,54 @@
 				<template #icon>
 					<IconEmailCheck :size="20" />
 				</template>
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="subfolderLabel && !account.isUnified && hasDelimiter && mailbox.specialRole !== 'flagged' && hasSubmailboxActionAcl"
 				@click="openCreateMailbox">
 				<template #icon>
 					<IconAdd :size="20" />
 				</template>
 				{{ t('mail', 'Add subfolder') }}
-			</ActionButton>
-			<ActionInput
+			</NcActionButton>
+			<NcActionInput
 				v-if="subfolderInput"
-				:value.sync="createMailboxName"
+				v-model="createMailboxName"
 				@submit.prevent.stop="createMailbox">
 				<template #icon>
 					<IconAdd :size="20" />
 				</template>
-			</ActionInput>
-			<ActionText v-if="subfolderSaving">
+			</NcActionInput>
+			<NcActionText v-if="subfolderSaving">
 				<template #icon>
-					<IconLoading :size="20" />
+					<NcLoadingIcon :size="20" />
 				</template>
 				{{ t('mail', 'Saving') }}
-			</ActionText>
-			<ActionButton
+			</NcActionText>
+			<NcActionButton
 				v-if="renameLabel && !hasSubMailboxes && !account.isUnified && hasRenameAcl"
 				@click.prevent.stop="openRenameInput">
 				<template #icon>
 					<IconEdit :size="20" />
 				</template>
 				{{ t('mail', 'Rename') }}
-			</ActionButton>
-			<ActionInput
+			</NcActionButton>
+			<NcActionInput
 				v-if="renameInput"
-				:value.sync="mailboxName"
+				v-model="mailboxName"
 				@submit.prevent.stop="renameMailbox">
 				<template #icon>
 					<IconEdit
 						:title="t('mail', 'Rename')"
 						:size="20" />
 				</template>
-			</ActionInput>
-			<ActionText v-if="renameSaving">
+			</NcActionInput>
+			<NcActionText v-if="renameSaving">
 				<template #icon>
-					<IconLoading :size="20" />
+					<NcLoadingIcon :size="20" />
 				</template>
 				{{ t('mail', 'Saving') }}
-			</ActionText>
-			<ActionButton
+			</NcActionText>
+			<NcActionButton
 				v-if="!account.isUnified && hasDelimiter && !mailbox.specialRole && !hasSubMailboxes && hasDeleteAcl"
 				:id="genId(mailbox)"
 				:close-after-click="true"
@@ -165,8 +165,8 @@
 					<IconExternal :size="20" />
 				</template>
 				{{ t('mail', 'Move folder') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="!account.isUnified && mailbox.specialRole !== 'flagged'"
 				:disabled="repairing"
 				@click="repair">
@@ -174,8 +174,8 @@
 					<IconWrench :size="20" />
 				</template>
 				{{ t('mail', 'Repair folder') }}
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="debug && !account.isUnified && mailbox.specialRole !== 'flagged'"
 				:name="t('mail', 'Clear cache')"
 				:disabled="clearingCache"
@@ -184,25 +184,25 @@
 					<IconFolderSync :size="20" />
 				</template>
 				{{ t('mail', 'Clear locally cached data, in case there are issues with synchronization.') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionCheckbox
+			<NcActionCheckbox
 				v-if="notVirtual"
-				:checked="mailbox.isSubscribed"
+				:model-value="mailbox.isSubscribed"
 				:disabled="changeSubscription"
 				@update:checked="changeFolderSubscription">
 				{{ t('mail', 'Subscribed') }}
-			</ActionCheckbox>
+			</NcActionCheckbox>
 
-			<ActionCheckbox
+			<NcActionCheckbox
 				v-if="notVirtual && notInbox"
-				:checked="mailbox.syncInBackground"
+				:model-value="mailbox.syncInBackground"
 				:disabled="changingSyncInBackground"
 				@update:checked="changeSyncInBackground">
 				{{ t('mail', 'Sync in background') }}
-			</ActionCheckbox>
+			</NcActionCheckbox>
 
-			<ActionButton
+			<NcActionButton
 				v-if="mailbox.specialRole !== 'flagged' && !account.isUnified && hasClearMailboxAcl"
 				:close-after-click="true"
 				@click="clearMailbox">
@@ -210,24 +210,24 @@
 					<IconDeleteOutline :size="20" />
 				</template>
 				{{ t('mail', 'Delete all messages') }}
-			</ActionButton>
+			</NcActionButton>
 
-			<ActionButton
+			<NcActionButton
 				v-if="!account.isUnified && !mailbox.specialRole && !hasSubMailboxes && hasDeleteAcl"
 				@click="deleteMailbox">
 				<template #icon>
 					<IconDeleteOutline :size="20" />
 				</template>
 				{{ t('mail', 'Delete folder') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
 		<template #counter>
-			<CounterBubble v-if="showUnreadCounter && subCounter">
+			<NcCounterBubble v-if="showUnreadCounter && subCounter">
 				{{ mailbox.unread }}&nbsp;({{ subCounter }})
-			</CounterBubble>
-			<CounterBubble v-else-if="showUnreadCounter">
+			</NcCounterBubble>
+			<NcCounterBubble v-else-if="showUnreadCounter">
 				{{ mailbox.unread }}
-			</CounterBubble>
+			</NcCounterBubble>
 		</template>
 		<template #extra>
 			<MoveMailboxModal
@@ -242,14 +242,14 @@
 			:key="genId(subMailbox)"
 			:account="account"
 			:mailbox="subMailbox" />
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
 
 import { showError, showInfo } from '@nextcloud/dialogs'
-import { translatePlural as n } from '@nextcloud/l10n'
-import { NcActionButton as ActionButton, NcActionCheckbox as ActionCheckbox, NcActionInput as ActionInput, NcActionText as ActionText, NcAppNavigationItem as AppNavigationItem, NcCounterBubble as CounterBubble, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { n } from '@nextcloud/l10n'
+import { NcActionButton, NcActionCheckbox, NcActionInput, NcActionText, NcAppNavigationItem, NcCounterBubble, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
 import IconArchive from 'vue-material-design-icons/ArchiveArrowDown.vue'
@@ -293,12 +293,12 @@ import { mailboxHasRights } from '../util/acl.js'
 export default {
 	name: 'NavigationMailbox',
 	components: {
-		AppNavigationItem,
-		CounterBubble,
-		ActionText,
-		ActionButton,
-		ActionCheckbox,
-		ActionInput,
+		NcAppNavigationItem,
+		NcCounterBubble,
+		NcActionText,
+		NcActionButton,
+		NcActionCheckbox,
+		NcActionInput,
 		IconSend,
 		IconSendOutline,
 		IconDelete,
@@ -326,7 +326,7 @@ export default {
 		IconInboxOutline,
 		IconWrench,
 		ImportantIcon,
-		IconLoading,
+		NcLoadingIcon,
 		MoveMailboxModal,
 		AlarmIcon,
 	},
diff --git a/src/components/NavigationOutbox.vue b/src/components/NavigationOutbox.vue
index 6a73cbc333..bccb9e79ec 100644
--- a/src/components/NavigationOutbox.vue
+++ b/src/components/NavigationOutbox.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppNavigationItem
+	<NcAppNavigationItem
 		id="navigation-outbox"
 		key="navigation-outbox"
 		:name="t('mail', 'Outbox')"
@@ -14,17 +14,17 @@
 				:size="20" />
 		</template>
 		<template #counter>
-			<CounterBubble
+			<NcCounterBubble
 				v-if="count"
 				class="navigation-outbox__unread-counter">
 				{{ count }}
-			</CounterBubble>
+			</NcCounterBubble>
 		</template>
-	</AppNavigationItem>
+	</NcAppNavigationItem>
 </template>
 
 <script>
-import { NcAppNavigationItem as AppNavigationItem, NcCounterBubble as CounterBubble } from '@nextcloud/vue'
+import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconOutbox from 'vue-material-design-icons/InboxArrowUp.vue'
 import useOutboxStore from '../store/outboxStore.js'
@@ -32,8 +32,8 @@ import useOutboxStore from '../store/outboxStore.js'
 export default {
 	name: 'NavigationOutbox',
 	components: {
-		AppNavigationItem,
-		CounterBubble,
+		NcAppNavigationItem,
+		NcCounterBubble,
 		IconOutbox,
 	},
 
diff --git a/src/components/NewMessageButtonHeader.vue b/src/components/NewMessageButtonHeader.vue
index d1a0a04e09..ce93b914fc 100644
--- a/src/components/NewMessageButtonHeader.vue
+++ b/src/components/NewMessageButtonHeader.vue
@@ -4,9 +4,9 @@
 -->
 <template>
 	<div class="header">
-		<ButtonVue
+		<NcButton
 			:aria-label="t('mail', 'New message')"
-			type="secondary"
+			variant="secondary"
 			button-id="mail_new_message"
 			:wide="true"
 			@click="onNewMessage">
@@ -14,11 +14,11 @@
 				<IconAdd :size="20" />
 			</template>
 			{{ t('mail', 'New message') }}
-		</ButtonVue>
-		<ButtonVue
+		</NcButton>
+		<NcButton
 			v-if="showRefresh && currentMailbox"
 			:aria-label="t('mail', 'Refresh')"
-			type="tertiary-no-background"
+			variant="tertiary-no-background"
 			class="refresh__button"
 			:disabled="refreshing"
 			@click="refreshMailbox">
@@ -26,18 +26,18 @@
 				<IconRefresh
 					v-if="!refreshing"
 					:size="20" />
-				<IconLoading
+				<NcLoadingIcon
 					v-if="refreshing"
 					:size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { NcButton as ButtonVue } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
-import IconLoading from '@nextcloud/vue/components/NcLoadingIcon'
+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'
 import logger from '../logger.js'
@@ -46,10 +46,10 @@ import useMainStore from '../store/mainStore.js'
 export default {
 	name: 'NewMessageButtonHeader',
 	components: {
-		ButtonVue,
+		NcButton,
 		IconAdd,
 		IconRefresh,
-		IconLoading,
+		NcLoadingIcon,
 	},
 
 	props: {
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index 225e74ff57..3719629fb3 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal
+	<NcModal
 		v-if="showMessageComposer"
 		:size="modalSize"
 		:name="modalTitle"
@@ -34,7 +34,7 @@
 				</NcButton>
 
 				<KeepAlive>
-					<EmptyContent
+					<NcEmptyContent
 						v-if="error"
 						:name="t('mail', 'Error sending your message')"
 						class="empty-content"
@@ -48,8 +48,8 @@
 								{{ t('mail', 'Retry') }}
 							</NcButton>
 						</template>
-					</EmptyContent>
-					<EmptyContent
+					</NcEmptyContent>
+					<NcEmptyContent
 						v-else-if="warning"
 						:name="t('mail', 'Warning sending your message')"
 						class="empty-content"
@@ -65,7 +65,7 @@
 								{{ t('mail', 'Send anyway') }}
 							</NcButton>
 						</template>
-					</EmptyContent>
+					</NcEmptyContent>
 
 					<Composer
 						ref="composer"
@@ -116,16 +116,16 @@
 				<RecipientInfo />
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 import {
-	NcEmptyContent as EmptyContent,
-	NcModal as Modal,
 	NcButton,
+	NcEmptyContent,
+	NcModal,
 } from '@nextcloud/vue'
 import { mapActions, mapState, mapStores } from 'pinia'
 import DefaultComposerIcon from 'vue-material-design-icons/ArrowCollapse.vue'
@@ -151,8 +151,8 @@ export default {
 	components: {
 		NcButton,
 		Composer,
-		EmptyContent,
-		Modal,
+		NcEmptyContent,
+		NcModal,
 		MinimizeIcon,
 		MaximizeIcon,
 		DefaultComposerIcon,
diff --git a/src/components/NoMessageSelected.vue b/src/components/NoMessageSelected.vue
index 3ae4aa2ceb..8d044594d6 100644
--- a/src/components/NoMessageSelected.vue
+++ b/src/components/NoMessageSelected.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<AppContentDetails
+	<NcAppContentDetails
 		class="app-content no-message-selected"
 		:class="{ 'no-message-selected--themed': isThemed }"
 		:style="{ backgroundImage: isThemed ? undefined : backgroundImgSrc }">
@@ -17,12 +17,12 @@
 		<div class="no-message-selected__action">
 			<NewMessageButtonHeader :show-refresh="false" />
 		</div>
-	</AppContentDetails>
+	</NcAppContentDetails>
 </template>
 
 <script>
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContentDetails as AppContentDetails } from '@nextcloud/vue'
+import { NcAppContentDetails } from '@nextcloud/vue'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
 import NewMessageButtonHeader from './NewMessageButtonHeader.vue'
 
@@ -30,7 +30,7 @@ export default {
 	name: 'NoMessageSelected',
 	components: {
 		NewMessageButtonHeader,
-		AppContentDetails,
+		NcAppContentDetails,
 	},
 
 	setup() {
diff --git a/src/components/OutOfOfficeForm.vue b/src/components/OutOfOfficeForm.vue
index 1495f2fc8b..2ac8f4bd60 100644
--- a/src/components/OutOfOfficeForm.vue
+++ b/src/components/OutOfOfficeForm.vue
@@ -42,18 +42,18 @@
 
 		<template v-if="followingSystem">
 			<p>{{ t('mail', 'The autoresponder follows your personal absence period settings.') }}</p>
-			<ButtonVue :href="personalAbsenceSettingsUrl" target="_blank" rel="noopener noreferrer">
+			<NcButton :href="personalAbsenceSettingsUrl" target="_blank" rel="noopener noreferrer">
 				<template #icon>
 					<OpenInNewIcon :size="20" />
 				</template>
 				{{ t('mail', 'Edit absence settings') }}
-			</ButtonVue>
+			</NcButton>
 		</template>
 		<template v-else>
 			<div class="form__multi-row">
 				<fieldset class="form__fieldset">
 					<label for="ooo-first-day">{{ t('mail', 'First day') }}</label>
-					<DatetimePicker
+					<NcDateTimePicker
 						id="ooo-first-day"
 						v-model="firstDay"
 						:disabled="!enabled" />
@@ -70,7 +70,7 @@
 							{{ t('mail', 'Last day (optional)') }}
 						</label>
 					</div>
-					<DatetimePicker
+					<NcDateTimePicker
 						id="ooo-last-day"
 						v-model="lastDay"
 						:disabled="!enabled || !enableLastDay" />
@@ -105,23 +105,23 @@
 			{{ errorMessage }}
 		</p>
 
-		<ButtonVue
-			type="primary"
-			native-type="submit"
+		<NcButton
+			variant="primary"
+			type="submit"
 			:aria-label="t('mail', 'Save autoresponder')"
 			:disabled="loading || !valid">
 			<template #icon>
 				<CheckIcon :size="20" />
 			</template>
 			{{ t('mail', 'Save autoresponder') }}
-		</ButtonVue>
+		</NcButton>
 	</form>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton as ButtonVue, NcDateTimePicker as DatetimePicker } from '@nextcloud/vue'
+import { NcButton, NcDateTimePicker } from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
 import CheckIcon from 'vue-material-design-icons/Check.vue'
@@ -138,9 +138,9 @@ const OOO_FOLLOW_SYSTEM = 'system'
 export default {
 	name: 'OutOfOfficeForm',
 	components: {
-		DatetimePicker,
+		NcDateTimePicker,
 		TextEditor,
-		ButtonVue,
+		NcButton,
 		CheckIcon,
 		OpenInNewIcon,
 	},
diff --git a/src/components/Outbox.vue b/src/components/Outbox.vue
index fabbe099ee..6d54d5ba88 100644
--- a/src/components/Outbox.vue
+++ b/src/components/Outbox.vue
@@ -4,14 +4,14 @@
 -->
 
 <template>
-	<AppContent
+	<NcAppContent
 		pane-config-key="mail-outbox"
 		:show-details="isMessageShown"
 		@update:showDetails="hideMessage">
 		<OutboxMessageContent />
 		<!-- List -->
 		<template #list>
-			<AppContentList class="outbox-list">
+			<NcAppContentList class="outbox-list">
 				<Error
 					v-if="error"
 					:error="t('mail', 'Could not open outbox')"
@@ -24,13 +24,13 @@
 					v-else
 					:key="message.id"
 					:message="message" />
-			</AppContentList>
+			</NcAppContentList>
 		</template>
-	</AppContent>
+	</NcAppContent>
 </template>
 
 <script>
-import { NcAppContent as AppContent, NcAppContentList as AppContentList } from '@nextcloud/vue'
+import { NcAppContent, NcAppContentList } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import EmptyMailbox from './EmptyMailbox.vue'
 import Error from './Error.vue'
@@ -43,8 +43,8 @@ import useOutboxStore from '../store/outboxStore.js'
 export default {
 	name: 'Outbox',
 	components: {
-		AppContent,
-		AppContentList,
+		NcAppContent,
+		NcAppContentList,
 		Error,
 		LoadingSkeleton,
 		EmptyMailbox,
diff --git a/src/components/OutboxMessageListItem.vue b/src/components/OutboxMessageListItem.vue
index e8121222fa..2f7d2c2706 100644
--- a/src/components/OutboxMessageListItem.vue
+++ b/src/components/OutboxMessageListItem.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<ListItem
+	<NcListItem
 		class="outbox-message"
 		:class="{ selected }"
 		:name="title"
@@ -21,7 +21,7 @@
 			{{ subjectForSubtitle }}
 		</template>
 		<template #actions>
-			<ActionButton
+			<NcActionButton
 				v-if="message.status === statusImapSentMailboxFail()"
 				:close-after-click="true"
 				@click="sendMessageNow">
@@ -31,8 +31,8 @@
 						:title="t('mail', 'Copy to Sent Folder')"
 						:size="20" />
 				</template>
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				v-if="message.status !== statusImapSentMailboxFail() && message.status !== statusSmtpError()"
 				:close-after-click="true"
 				@click="sendMessageNow">
@@ -42,24 +42,24 @@
 						:title="t('mail', 'Send now')"
 						:size="20" />
 				</template>
-			</ActionButton>
-			<ActionButton
+			</NcActionButton>
+			<NcActionButton
 				:close-after-click="true"
 				@click="deleteMessage">
 				<template #icon>
 					<IconDelete :size="24" />
 				</template>
 				{{ t('mail', 'Delete') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</ListItem>
+	</NcListItem>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { getLanguage, translate as t } from '@nextcloud/l10n'
+import { getLanguage, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import { NcActionButton as ActionButton, NcListItem as ListItem } from '@nextcloud/vue'
+import { NcActionButton, NcListItem } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import Copy from 'vue-material-design-icons/ContentCopy.vue'
 import Send from 'vue-material-design-icons/SendOutline.vue'
@@ -80,9 +80,9 @@ import useOutboxStore from '../store/outboxStore.js'
 export default {
 	name: 'OutboxMessageListItem',
 	components: {
-		ListItem,
+		NcListItem,
 		Avatar,
-		ActionButton,
+		NcActionButton,
 		IconDelete,
 		Send,
 		Copy,
diff --git a/src/components/RecipientBubble.vue b/src/components/RecipientBubble.vue
index b4fee32c93..534494053b 100644
--- a/src/components/RecipientBubble.vue
+++ b/src/components/RecipientBubble.vue
@@ -6,7 +6,7 @@
 <template>
 	<NcPopover popup-role="dialog" class="contact-popover">
 		<template #trigger="{ attrs }">
-			<UserBubble
+			<NcUserBubble
 				v-bind="attrs"
 				:display-name="label"
 				:avatar-image="avatarUrlAbsolute"
@@ -18,53 +18,53 @@
 				<p class="contact-popover__email">
 					{{ email }}
 				</p>
-				<ButtonVue
+				<NcButton
 					v-if="contactsWithEmail && contactsWithEmail.length > 0"
-					type="tertiary-no-background"
+					variant="tertiary-no-background"
 					:aria-label="t('mail', 'Contacts with this address')"
 					class="contact-existing">
 					<template #icon>
 						<IconDetails :size="20" />
 					</template>
 					{{ t('mail', 'Contacts with this address') }}: {{ contactsWithEmailComputed }}
-				</ButtonVue>
+				</NcButton>
 				<div v-if="selection === ContactSelectionStateEnum.select" class="contact-menu">
-					<ButtonVue
+					<NcButton
 						:aria-label="t('mail', 'Reply')"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						@click="onClickReply">
 						<template #icon>
 							<IconReply :size="20" />
 						</template>
 						{{ t('mail', 'Reply') }}
-					</ButtonVue>
-					<ButtonVue
-						type="tertiary-no-background"
+					</NcButton>
+					<NcButton
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Add to Contact')"
 						@click="selection = ContactSelectionStateEnum.existing">
 						<template #icon>
 							<IconUser :size="20" />
 						</template>
 						{{ t('mail', 'Add to Contact') }}
-					</ButtonVue>
-					<ButtonVue
-						type="tertiary-no-background"
+					</NcButton>
+					<NcButton
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'New Contact')"
 						@click="selection = ContactSelectionStateEnum.new">
 						<template #icon>
 							<IconAdd :size="20" />
 						</template>
 						{{ t('mail', 'New Contact') }}
-					</ButtonVue>
-					<ButtonVue
-						type="tertiary-no-background"
+					</NcButton>
+					<NcButton
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Copy to clipboard')"
 						@click="onClickCopyToClipboard">
 						<template #icon>
 							<IconClipboard :size="20" />
 						</template>
 						{{ t('mail', 'Copy to clipboard') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 				<div v-else class="contact-input-wrapper">
 					<NcSelect
@@ -85,27 +85,27 @@
 					<input v-else-if="selection === ContactSelectionStateEnum.new" v-model="newContactName">
 				</div>
 				<div v-if="selection !== ContactSelectionStateEnum.select">
-					<ButtonVue
-						type="tertiary-no-background"
+					<NcButton
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Go back')"
 						@click="selection = ContactSelectionStateEnum.select">
 						<template #icon>
 							<IconClose :size="20" />
 						</template>
 						{{ t('mail', 'Go back') }}
-					</ButtonVue>
+					</NcButton>
 
-					<ButtonVue
+					<NcButton
 						v-close-popover
 						:disabled="addButtonDisabled"
-						type="tertiary-no-background"
+						variant="tertiary-no-background"
 						:aria-label="t('mail', 'Add')"
 						@click="onClickAddToContact">
 						<template #icon>
 							<IconCheck :size="20" />
 						</template>
 						{{ t('mail', 'Add') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</div>
 		</template>
@@ -115,7 +115,7 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton as ButtonVue, NcPopover, NcSelect, NcUserBubble as UserBubble } from '@nextcloud/vue'
+import { NcButton, NcPopover, NcSelect, NcUserBubble } from '@nextcloud/vue'
 import debouncePromise from 'debounce-promise'
 import uniqBy from 'lodash/fp/uniqBy.js'
 import IconUser from 'vue-material-design-icons/AccountOutline.vue'
@@ -136,8 +136,8 @@ const ContactSelectionStateEnum = Object.freeze({ new: 1, existing: 2, select: 3
 export default {
 	name: 'RecipientBubble',
 	components: {
-		ButtonVue,
-		UserBubble,
+		NcButton,
+		NcUserBubble,
 		NcPopover,
 		NcSelect,
 		IconReply,
diff --git a/src/components/RecipientListItem.vue b/src/components/RecipientListItem.vue
index a3034b2720..c8d1720eb2 100644
--- a/src/components/RecipientListItem.vue
+++ b/src/components/RecipientListItem.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<div :class="isInternal ? 'ncselect__tag--recipient' : 'ncselect__tag--recipient external'" :title="option.email">
-		<ListItemIcon
+		<NcListItemIcon
 			:no-margin="true"
 			:name="option.label || option.displayName || option.email"
 			:url="option.photo"
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { NcListItemIcon as ListItemIcon } from '@nextcloud/vue'
+import { NcListItemIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import Close from 'vue-material-design-icons/Close.vue'
 import useMainStore from '../store/mainStore.js'
@@ -25,7 +25,7 @@ import useMainStore from '../store/mainStore.js'
 export default {
 	name: 'RecipientListItem',
 	components: {
-		ListItemIcon,
+		NcListItemIcon,
 		Close,
 	},
 
diff --git a/src/components/SieveAccountForm.vue b/src/components/SieveAccountForm.vue
index 74a29e4da5..cba8968bfc 100644
--- a/src/components/SieveAccountForm.vue
+++ b/src/components/SieveAccountForm.vue
@@ -16,35 +16,35 @@
 			<NcTextField v-model="sieveConfig.sieveHost" :label="t('mail', 'Sieve host')" />
 			<h4>{{ t('mail', 'Sieve security') }}</h4>
 			<div class="flex-row">
-				<ButtonVue
+				<NcButton
 					:pressed="sieveConfig.sieveSslMode === 'none'"
 					@click="updateSslMode('none')">
 					{{ t('mail', 'None') }}
-				</ButtonVue>
-				<ButtonVue
+				</NcButton>
+				<NcButton
 					:pressed="sieveConfig.sieveSslMode === 'ssl'"
 					@click="updateSslMode('ssl')">
 					{{ t('mail', 'SSL/TLS') }}
-				</ButtonVue>
-				<ButtonVue
+				</NcButton>
+				<NcButton
 					:pressed="sieveConfig.sieveSslMode === 'tls'"
 					@click="updateSslMode('tls')">
 					{{ t('mail', 'STARTTLS') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 			<NcTextField v-model="sieveConfig.sievePort" :label="t('mail', 'Sieve Port')" />
 			<h4>{{ t('mail', 'Sieve credentials') }}</h4>
 			<div class="flex-row">
-				<ButtonVue
+				<NcButton
 					:pressed="useImapCredentials"
 					@click="updateCredentials(true)">
 					{{ t('mail', 'IMAP credentials') }}
-				</ButtonVue>
-				<ButtonVue
+				</NcButton>
+				<NcButton
 					:pressed="!useImapCredentials"
 					@click="updateCredentials(false)">
 					{{ t('mail', 'Custom') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 			<p v-if="!useImapCredentials" class="custom">
 				<NcTextField v-model="sieveConfig.sieveUser" :label="t('mail', 'Sieve User')" />
@@ -56,25 +56,25 @@
 			{{ t('mail', 'Oh snap!') }}
 			{{ errorMessage }}
 		</p>
-		<ButtonVue
-			type="primary"
+		<NcButton
+			variant="primary"
 			:disabled="loading"
 			:aria-label="t('mail', 'Save sieve settings')"
 			@click.prevent="onSubmit">
 			{{ t('mail', 'Save sieve settings') }}
-		</ButtonVue>
+		</NcButton>
 	</form>
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcCheckboxRadioSwitch, NcPasswordField, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcPasswordField, NcTextField } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import useMainStore from '../store/mainStore.js'
 
 export default {
 	name: 'SieveAccountForm',
 	components: {
-		ButtonVue,
+		NcButton,
 		NcTextField,
 		NcPasswordField,
 		NcCheckboxRadioSwitch,
diff --git a/src/components/SieveFilterForm.vue b/src/components/SieveFilterForm.vue
index 062a7ddc99..7bfccab176 100644
--- a/src/components/SieveFilterForm.vue
+++ b/src/components/SieveFilterForm.vue
@@ -14,22 +14,22 @@
 			{{ t('mail', 'Oh Snap!') }}
 			{{ errorMessage }}
 		</p>
-		<ButtonVue
-			type="primary"
+		<NcButton
+			variant="primary"
 			:disabled="loading"
 			:aria-label="t('mail', 'Save sieve script')"
 			@click="saveActiveScript">
 			<template #icon>
-				<IconLoading v-if="loading" :size="20" />
+				<NcLoadingIcon v-if="loading" :size="20" />
 				<IconCheck v-else :size="20" />
 			</template>
 			{{ t('mail', 'Save sieve script') }}
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconCheck from 'vue-material-design-icons/Check.vue'
 import useMainStore from '../store/mainStore.js'
@@ -37,8 +37,8 @@ import useMainStore from '../store/mainStore.js'
 export default {
 	name: 'SieveFilterForm',
 	components: {
-		ButtonVue,
-		IconLoading,
+		NcButton,
+		NcLoadingIcon,
 		IconCheck,
 	},
 
diff --git a/src/components/SignatureSettings.vue b/src/components/SignatureSettings.vue
index 810a6a238e..ca9b4e443c 100644
--- a/src/components/SignatureSettings.vue
+++ b/src/components/SignatureSettings.vue
@@ -44,30 +44,30 @@
 			<!-- TRANSLATORS: "writing mode", "rich text" and "plain text" are labels of the Writing mode setting -->
 			<p>{{ t('mail', 'This signature contains images. New messages will use rich text, even though your writing mode is set to plain text.') }}</p>
 		</NcNoteCard>
-		<ButtonVue
-			type="primary"
+		<NcButton
+			variant="primary"
 			:disabled="loading"
 			:aria-label="t('mail', 'Save signature')"
 			@click="saveSignature">
 			<template #icon>
-				<IconLoading v-if="loading" :size="20" fill-color="white" />
+				<NcLoadingIcon v-if="loading" :size="20" fill-color="white" />
 				<IconCheck v-else :size="20" />
 			</template>
 			{{ t('mail', 'Save signature') }}
-		</ButtonVue>
-		<ButtonVue
+		</NcButton>
+		<NcButton
 			v-if="signature"
 			:aria-label="t('mail', 'Delete')"
-			type="tertiary-no-background"
+			variant="tertiary-no-background"
 			class="button-text"
 			@click="deleteSignature">
 			{{ t('mail', 'Delete') }}
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import { NcButton as ButtonVue, NcLoadingIcon as IconLoading, NcNoteCard, NcSelect } from '@nextcloud/vue'
+import { NcButton, NcLoadingIcon, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import mitt from 'mitt'
 import { mapStores } from 'pinia'
 import IconCheck from 'vue-material-design-icons/Check.vue'
@@ -83,8 +83,8 @@ export default {
 		TextEditor,
 		NcNoteCard,
 		NcSelect,
-		ButtonVue,
-		IconLoading,
+		NcButton,
+		NcLoadingIcon,
 		IconCheck,
 	},
 
diff --git a/src/components/TagItem.vue b/src/components/TagItem.vue
index 8f00736972..c720e2f53b 100644
--- a/src/components/TagItem.vue
+++ b/src/components/TagItem.vue
@@ -12,7 +12,7 @@
 			}">
 			{{ translateTagDisplayName(tag) }}
 		</button>
-		<Actions :force-menu="true" @close="closeEditTag">
+		<NcActions :force-menu="true" @close="closeEditTag">
 			<NcActionButton
 				v-if="renameTagLabel"
 				@click="openEditTag">
@@ -28,18 +28,18 @@
 				@submit="updateColor">
 				<div :style="{ backgroundColor: editColor }" class="color0 app-navigation-entry-bullet" />
 			</NcColorPicker>
-			<ActionInput
+			<NcActionInput
 				v-if="renameTagInput"
 				v-model="currentTagName"
 				:error="hasError()"
 				:helper-text="errorMessage"
 				@submit="renameTag(tag, $event)" />
-			<ActionText v-if="showSaving">
+			<NcActionText v-if="showSaving">
 				<template #icon>
-					<IconLoading :size="22" />
+					<NcLoadingIcon :size="22" />
 				</template>
 				{{ t('mail', 'Saving new tag name …') }}
-			</ActionText>
+			</NcActionText>
 			<NcActionButton
 				v-if="!tag.isDefaultTag || !renameTagLabel"
 				@click="deleteTag">
@@ -48,7 +48,7 @@
 				</template>
 				{{ t('mail', 'Delete tag') }}
 			</NcActionButton>
-		</Actions>
+		</NcActions>
 		<button
 			v-if="!isSet(tag.imapLabel)"
 			class="tag-actions"
@@ -66,7 +66,7 @@
 
 <script>
 import { showInfo } from '@nextcloud/dialogs'
-import { NcActionInput as ActionInput, NcActions as Actions, NcActionText as ActionText, NcLoadingIcon as IconLoading, NcActionButton, NcColorPicker } from '@nextcloud/vue'
+import { NcActionButton, NcActionInput, NcActions, NcActionText, NcColorPicker, NcLoadingIcon } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconEdit from 'vue-material-design-icons/PencilOutline.vue'
 import DeleteIcon from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -78,11 +78,11 @@ export default {
 	name: 'TagItem',
 	components: {
 		NcColorPicker,
-		Actions,
+		NcActions,
 		NcActionButton,
-		ActionText,
-		ActionInput,
-		IconLoading,
+		NcActionText,
+		NcActionInput,
+		NcLoadingIcon,
 		DeleteIcon,
 		IconEdit,
 	},
diff --git a/src/components/TagModal.vue b/src/components/TagModal.vue
index 7d163375a0..79078c156e 100644
--- a/src/components/TagModal.vue
+++ b/src/components/TagModal.vue
@@ -10,7 +10,7 @@
 		:envelopes="envelopes"
 		:account-id="envelopes[0].accountId"
 		@close="closeDeleteModal" />
-	<Modal
+	<NcModal
 		v-else
 		size="large"
 		label-id="tag-modal-heading"
@@ -39,25 +39,25 @@
 					</template>
 					{{ t('mail', 'Add tag') }}
 				</NcButton>
-				<ActionInput v-if="editing" :disabled="showSaving" @submit="createTag">
+				<NcActionInput v-if="editing" :disabled="showSaving" @submit="createTag">
 					<template #icon>
 						<IconTag :size="20" />
 					</template>
-				</ActionInput>
-				<ActionText v-if="showSaving">
+				</NcActionInput>
+				<NcActionText v-if="showSaving">
 					<template #icon>
-						<IconLoading :size="20" />
+						<NcLoadingIcon :size="20" />
 					</template>
 					{{ t('mail', 'Saving tag …') }}
-				</ActionText>
+				</NcActionText>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { showError, showInfo } from '@nextcloud/dialogs'
-import { NcActionInput as ActionInput, NcActionText as ActionText, NcLoadingIcon as IconLoading, NcModal as Modal, NcButton } from '@nextcloud/vue'
+import { NcActionInput, NcActionText, NcButton, NcLoadingIcon, NcModal } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import IconTag from 'vue-material-design-icons/TagOutline.vue'
@@ -78,12 +78,12 @@ function randomColor() {
 export default {
 	name: 'TagModal',
 	components: {
-		Modal,
-		ActionText,
-		ActionInput,
+		NcModal,
+		NcActionText,
+		NcActionInput,
 		DeleteTagModal,
 		IconTag,
-		IconLoading,
+		NcLoadingIcon,
 		TagItem,
 		NcButton,
 		IconAdd,
diff --git a/src/components/TaskModal.vue b/src/components/TaskModal.vue
index 10dc880aa4..7ccd2b213d 100644
--- a/src/components/TaskModal.vue
+++ b/src/components/TaskModal.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<Modal @close="onClose">
+	<NcModal @close="onClose">
 		<div class="modal-content">
 			<h2>{{ t('mail', 'Create task') }}</h2>
 			<div class="taskTitle">
@@ -11,7 +11,7 @@
 				<input id="taskTitle" v-model="taskTitle" type="text">
 			</div>
 			<div class="all-day">
-				<DatetimePicker
+				<NcDateTimePicker
 					v-model="startDate"
 					:format="dateFormat"
 					:clearable="false"
@@ -20,7 +20,7 @@
 					:type="datePickerType"
 					:show-timezone-select="true"
 					:timezone-id="startTimezoneId" />
-				<DatetimePicker
+				<NcDateTimePicker
 					v-model="endDate"
 					:format="dateFormat"
 					:clearable="false"
@@ -71,13 +71,13 @@
 				{{ t('mail', 'Create') }}
 			</button>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import moment from '@nextcloud/moment'
-import { NcDateTimePicker as DatetimePicker, NcModal as Modal, NcSelect } from '@nextcloud/vue'
+import { NcDateTimePicker, NcModal, NcSelect } from '@nextcloud/vue'
 import ICAL from 'ical.js'
 import jstz from 'jstz'
 import { mapStores } from 'pinia'
@@ -90,8 +90,8 @@ export default {
 	name: 'TaskModal',
 	components: {
 		CalendarPickerOption,
-		DatetimePicker,
-		Modal,
+		NcDateTimePicker,
+		NcModal,
 		NcSelect,
 	},
 
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 2a9cc83eb8..100c9eac09 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<AppContentDetails id="mail-message">
+	<NcAppContentDetails id="mail-message">
 		<!-- Show outer loading screen only if we have no data about the thread -->
 		<Loading v-if="loading && thread.length === 0" :hint="t('mail', 'Loading thread')" />
 		<Error
@@ -35,13 +35,13 @@
 				@toggle-expand="toggleExpand(env.databaseId)"
 				@print="print" />
 		</template>
-	</AppContentDetails>
+	</NcAppContentDetails>
 </template>
 
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import { NcAppContentDetails as AppContentDetails } from '@nextcloud/vue'
+import { NcAppContentDetails } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import Error from './Error.vue'
 import Loading from './Loading.vue'
@@ -83,7 +83,7 @@ export default {
 	name: 'Thread',
 	components: {
 		ThreadSummary,
-		AppContentDetails,
+		NcAppContentDetails,
 		Error,
 		Loading,
 		ThreadEnvelope,
diff --git a/src/components/itinerary/CalendarImport.vue b/src/components/itinerary/CalendarImport.vue
index 9cab2038a3..4a0c9567c4 100644
--- a/src/components/itinerary/CalendarImport.vue
+++ b/src/components/itinerary/CalendarImport.vue
@@ -4,27 +4,27 @@
 -->
 
 <template>
-	<Actions v-if="calendars.length">
+	<NcActions v-if="calendars.length">
 		<template #icon>
 			<IconAdd :size="20" />
 		</template>
-		<ActionButton
+		<NcActionButton
 			v-for="(calendar, idx) in cals"
 			:key="idx"
 			@click="onImport(calendar)">
 			<template #icon>
-				<IconLoading v-if="calendar.loading" :size="20" />
+				<NcLoadingIcon v-if="calendar.loading" :size="20" />
 				<IconAdd v-else :size="20" />
 			</template>
 			{{ t('mail', 'Import into {calendar}', { calendar: calendar.displayname }) }}
-		</ActionButton>
-	</Actions>
+		</NcActionButton>
+	</NcActions>
 </template>
 
 <script>
 
 import moment from '@nextcloud/moment'
-import { NcActionButton as ActionButton, NcActions as Actions, NcLoadingIcon as IconLoading } from '@nextcloud/vue'
+import { NcActionButton, NcActions, NcLoadingIcon } from '@nextcloud/vue'
 import ical from 'ical.js'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import logger from '../../logger.js'
@@ -32,10 +32,10 @@ import logger from '../../logger.js'
 export default {
 	name: 'CalendarImport',
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		IconAdd,
-		IconLoading,
+		NcLoadingIcon,
 	},
 
 	props: {
diff --git a/src/components/settings/AdminSettings.vue b/src/components/settings/AdminSettings.vue
index 683154a279..03991375e9 100644
--- a/src/components/settings/AdminSettings.vue
+++ b/src/components/settings/AdminSettings.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<SettingsSection
+	<NcSettingsSection
 		:name="t('mail', 'Mail app')"
 		:description="t('mail', 'The mail app allows users to read mails on their IMAP accounts.')">
 		<p>
@@ -91,7 +91,7 @@
 			}}
 		</h3>
 		<p>
-			<ButtonVue
+			<NcButton
 				class="config-button"
 				:aria-label="t('mail', 'Add new config')"
 				@click="addNew = true">
@@ -99,8 +99,8 @@
 					<IconAdd :size="20" />
 				</template>
 				{{ t('mail', 'Add new config') }}
-			</ButtonVue>
-			<ButtonVue
+			</NcButton>
+			<NcButton
 				class="config-button"
 				:aria-label="t('mail', 'Provision all accounts')"
 				@click="provisionAll">
@@ -108,7 +108,7 @@
 					<IconSettings :size="20" />
 				</template>
 				{{ t('mail', 'Provision all accounts') }}
-			</ButtonVue>
+			</NcButton>
 			<ProvisioningSettings
 				v-if="addNew"
 				:key="formKey"
@@ -277,15 +277,15 @@
 				</p>
 			</article>
 		</div>
-	</SettingsSection>
+	</NcSettingsSection>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import ButtonVue from '@nextcloud/vue/components/NcButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
-import SettingsSection from '@nextcloud/vue/components/NcSettingsSection'
+import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 import IconSettings from 'vue-material-design-icons/CogOutline.vue'
 import IconAdd from 'vue-material-design-icons/Plus.vue'
 import AntiSpamSettings from './AntiSpamSettings.vue'
@@ -318,8 +318,8 @@ export default {
 		AntiSpamSettings,
 		MicrosoftAdminOauthSettings,
 		ProvisioningSettings,
-		SettingsSection,
-		ButtonVue,
+		NcSettingsSection,
+		NcButton,
 		IconAdd,
 		IconSettings,
 		NcCheckboxRadioSwitch,
diff --git a/src/components/settings/AntiSpamSettings.vue b/src/components/settings/AntiSpamSettings.vue
index 43602d100f..d384baf6d3 100644
--- a/src/components/settings/AntiSpamSettings.vue
+++ b/src/components/settings/AntiSpamSettings.vue
@@ -35,28 +35,28 @@
 							name="ham"
 							type="email">
 						<br>
-						<ButtonVue
-							type="secondary"
+						<NcButton
+							variant="secondary"
 							:aria-label="t('mail', 'Save')"
 							:disabled="loading"
-							native-type="submit"
+							type="submit"
 							class="config-button">
 							<template #icon>
 								<IconUpload :size="20" />
 							</template>
 							{{ t('mail', 'Save') }}
-						</ButtonVue>
-						<ButtonVue
+						</NcButton>
+						<NcButton
 							:disabled="loading"
 							:aria-label="t('mail', 'Reset')"
 							class="config-button"
-							type="secondary"
+							variant="secondary"
 							@click="resetForm()">
 							<template #icon>
 								<IconDelete :size="20" />
 							</template>
 							{{ t('mail', 'Reset') }}
-						</ButtonVue>
+						</NcButton>
 					</div>
 				</div>
 			</form>
@@ -67,7 +67,7 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
-import ButtonVue from '@nextcloud/vue/components/NcButton'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
 import IconUpload from 'vue-material-design-icons/TrayArrowUp.vue'
 import logger from '../../logger.js'
@@ -78,7 +78,7 @@ const email = loadState('mail', 'antispam_setting', '[]')
 export default {
 	name: 'AntiSpamSettings',
 	components: {
-		ButtonVue,
+		NcButton,
 		IconUpload,
 		IconDelete,
 	},
diff --git a/src/views/Setup.vue b/src/views/Setup.vue
index ae4c18fe40..67cc3f61ae 100644
--- a/src/views/Setup.vue
+++ b/src/views/Setup.vue
@@ -5,12 +5,12 @@
 <template>
 	<NcContent app-name="mail">
 		<Navigation v-if="hasAccounts" />
-		<AppContent>
+		<NcAppContent>
 			<div
 				class="setup"
 				:class="{ 'setup--themed': isThemed }"
 				:style="{ backgroundImage: isThemed ? undefined : backgroundImgSrc }">
-				<EmptyContent
+				<NcEmptyContent
 					v-if="allowNewMailAccounts"
 					class="setup__form-content"
 					:name="t('mail', 'Connect your mail account')">
@@ -25,21 +25,21 @@
 							class="setup__form-content__form"
 							@account-created="onAccountCreated" />
 					</template>
-				</EmptyContent>
-				<EmptyContent v-else :name="t('mail', 'To add a mail account, please contact your administrator.')">
+				</NcEmptyContent>
+				<NcEmptyContent v-else :name="t('mail', 'To add a mail account, please contact your administrator.')">
 					<template #icon>
 						<div class="setup__form-content__svg-wrapper" v-html="FluidMail" />
 					</template>
-				</EmptyContent>
+				</NcEmptyContent>
 			</div>
-		</AppContent>
+		</NcAppContent>
 	</NcContent>
 </template>
 
 <script>
 import { loadState } from '@nextcloud/initial-state'
 import { generateFilePath } from '@nextcloud/router'
-import { NcAppContent as AppContent, NcEmptyContent as EmptyContent, NcContent } from '@nextcloud/vue'
+import { NcAppContent, NcContent, NcEmptyContent } from '@nextcloud/vue'
 import { mapStores } from 'pinia'
 import AccountForm from '../components/AccountForm.vue'
 import Navigation from '../components/Navigation.vue'
@@ -50,10 +50,10 @@ import useMainStore from '../store/mainStore.js'
 export default {
 	name: 'Setup',
 	components: {
-		AppContent,
+		NcAppContent,
 		AccountForm,
 		NcContent,
-		EmptyContent,
+		NcEmptyContent,
 		Navigation,
 	},