Adjust imports

Signed-off-by: Joas Schilling <coding@schilljs.com>

72 files changed, 832 insertions, 832 deletions

diff --git a/src/components/AdminSettings/AllowedGroups.vue b/src/components/AdminSettings/AllowedGroups.vue
index cb6c6219f..6091dec37 100644
--- a/src/components/AdminSettings/AllowedGroups.vue
+++ b/src/components/AdminSettings/AllowedGroups.vue
@@ -34,7 +34,7 @@
 		</p>
 
 		<div class="allowed-groups-settings-content">
-			<Multiselect v-model="allowedGroups"
+			<NcMultiselect v-model="allowedGroups"
 				name="allow_groups_use_talk"
 				class="allowed-groups-select"
 				:options="groups"
@@ -50,16 +50,16 @@
 				label="displayname"
 				@search-change="searchGroup" />
 
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				:disabled="loading"
 				@click="saveAllowedGroups">
 				{{ saveLabelAllowedGroups }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<h3>{{ t('spreed', 'Limit creating a public and group conversation') }}</h3>
 		<div class="allowed-groups-settings-content">
-			<Multiselect v-model="canStartConversations"
+			<NcMultiselect v-model="canStartConversations"
 				name="allow_groups_start_conversation"
 				class="allowed-groups-select"
 				:options="groups"
@@ -75,16 +75,16 @@
 				label="displayname"
 				@search-change="searchGroup" />
 
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				:disabled="loading"
 				@click="saveStartConversationsGroups">
 				{{ saveLabelStartConversations }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 
 		<h3>{{ t('spreed', 'Limit starting a call') }}</h3>
 		<div class="allowed-groups-settings-content">
-			<Multiselect id="start_calls"
+			<NcMultiselect id="start_calls"
 				v-model="startCalls"
 				name="allow_groups_start_calls"
 				:options="startCallOptions"
@@ -101,12 +101,12 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 const startCallOptions = [
 	{ value: 0, label: t('spreed', 'Everyone') },
@@ -119,8 +119,8 @@ export default {
 	name: 'AllowedGroups',
 
 	components: {
-		Multiselect,
-		ButtonVue,
+		NcMultiselect,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/GeneralSettings.vue b/src/components/AdminSettings/GeneralSettings.vue
index a58950cf8..28269aec8 100644
--- a/src/components/AdminSettings/GeneralSettings.vue
+++ b/src/components/AdminSettings/GeneralSettings.vue
@@ -28,7 +28,7 @@
 
 		<div class="paragraph">
 			<label for="default_group_notification">{{ t('spreed', 'Default group notification') }}</label>
-			<Multiselect id="default_group_notification"
+			<NcMultiselect id="default_group_notification"
 				v-model="defaultGroupNotification"
 				name="default_group_notification"
 				:options="defaultGroupNotificationOptions"
@@ -41,25 +41,25 @@
 
 		<h3>{{ t('spreed', 'Integration into other apps') }}</h3>
 
-		<CheckboxRadioSwitch :checked.sync="conversationsFiles"
+		<NcCheckboxRadioSwitch :checked.sync="conversationsFiles"
 			name="conversations_files"
 			:disabled="loading || loadingConversationsFiles"
 			@change="saveConversationsFiles">
 			{{ t('spreed', 'Allow conversations on files') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 
-		<CheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares"
+		<NcCheckboxRadioSwitch :checked.sync="conversationsFilesPublicShares"
 			name="conversations_files_public_shares"
 			:disabled="loading || loadingConversationsFiles || !conversationsFiles"
 			@change="saveConversationsFilesPublicShares">
 			{{ t('spreed', 'Allow conversations on public shares for files') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { loadState } from '@nextcloud/initial-state'
 
 const defaultGroupNotificationOptions = [
@@ -71,8 +71,8 @@ export default {
 	name: 'GeneralSettings',
 
 	components: {
-		CheckboxRadioSwitch,
-		Multiselect,
+		NcCheckboxRadioSwitch,
+		NcMultiselect,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/HostedSignalingServer.vue b/src/components/AdminSettings/HostedSignalingServer.vue
index 537d7afe8..7005cf0b5 100644
--- a/src/components/AdminSettings/HostedSignalingServer.vue
+++ b/src/components/AdminSettings/HostedSignalingServer.vue
@@ -81,11 +81,11 @@
 				</option>
 			</select>
 
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				:disabled="!hostedHPBFilled || loading"
 				@click="requestHPBTrial">
 				{{ t('spreed', 'Request signaling server trial') }}
-			</ButtonVue>
+			</NcButton>
 
 			<p v-if="requestError !== ''"
 				class="warning">
@@ -122,17 +122,17 @@
 				{{ requestError }}
 			</p>
 
-			<ButtonVue type="error"
+			<NcButton type="error"
 				:disabled="loading"
 				@click="deleteAccount">
 				{{ t('spreed', 'Delete the signaling server account') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -142,7 +142,7 @@ export default {
 	name: 'HostedSignalingServer',
 
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/MatterbridgeIntegration.vue b/src/components/AdminSettings/MatterbridgeIntegration.vue
index 9074cd718..f06bbf01d 100644
--- a/src/components/AdminSettings/MatterbridgeIntegration.vue
+++ b/src/components/AdminSettings/MatterbridgeIntegration.vue
@@ -57,23 +57,23 @@
 			</p>
 
 			<p>
-				<ButtonVue v-if="isInstalling">
+				<NcButton v-if="isInstalling">
 					<template #icon>
 						<span class="icon icon-loading-small" />
 					</template>
 					{{ t('spreed', 'Downloading …') }}
-				</ButtonVue>
-				<ButtonVue v-else
+				</NcButton>
+				<NcButton v-else
 					@click="enableMatterbridgeApp">
 					{{ t('spreed', 'Install Talk Matterbridge') }}
-				</ButtonVue>
+				</NcButton>
 			</p>
 		</template>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { loadState } from '@nextcloud/initial-state'
 import { showError } from '@nextcloud/dialogs'
 import {
@@ -86,7 +86,7 @@ export default {
 	name: 'MatterbridgeIntegration',
 
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/SIPBridge.vue b/src/components/AdminSettings/SIPBridge.vue
index c642dda43..a47bc5ce7 100644
--- a/src/components/AdminSettings/SIPBridge.vue
+++ b/src/components/AdminSettings/SIPBridge.vue
@@ -35,7 +35,7 @@
 				{{ t('spreed', 'Only users of the following groups can enable SIP in conversations they moderate') }}
 			</p>
 
-			<Multiselect v-model="sipGroups"
+			<NcMultiselect v-model="sipGroups"
 				class="sip-bridge__sip-groups-select"
 				:options="groups"
 				:placeholder="t('spreed', 'Enable SIP configuration')"
@@ -73,18 +73,18 @@
 				:disabled="loading"
 				:placeholder="t('spreed', 'Phone number (Country)')" />
 
-			<ButtonVue type="primary"
+			<NcButton type="primary"
 				:disabled="loading"
 				@click="saveSIPSettings">
 				{{ t('spreed', 'Save changes') }}
-			</ButtonVue>
+			</NcButton>
 		</template>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import { generateOcsUrl } from '@nextcloud/router'
@@ -96,8 +96,8 @@ export default {
 	name: 'SIPBridge',
 
 	components: {
-		ButtonVue,
-		Multiselect,
+		NcButton,
+		NcMultiselect,
 	},
 
 	data() {
diff --git a/src/components/AdminSettings/SignalingServer.vue b/src/components/AdminSettings/SignalingServer.vue
index 2aa4d0f1f..feeee24c3 100644
--- a/src/components/AdminSettings/SignalingServer.vue
+++ b/src/components/AdminSettings/SignalingServer.vue
@@ -38,21 +38,21 @@
 			@change="updateVerify">
 		<label :for="'verify' + index">{{ t('spreed', 'Validate SSL certificate') }}</label>
 
-		<ButtonVue v-show="!loading"
+		<NcButton v-show="!loading"
 			type="tertiary-no-background"
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
 				<Delete :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 
 		<span v-if="server">{{ connectionState }}</span>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import { getWelcomeMessage } from '../../services/signalingService.js'
 
@@ -60,7 +60,7 @@ export default {
 	name: 'SignalingServer',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		Delete,
 	},
 
diff --git a/src/components/AdminSettings/SignalingServers.vue b/src/components/AdminSettings/SignalingServers.vue
index 8298e6325..79fa5470a 100644
--- a/src/components/AdminSettings/SignalingServers.vue
+++ b/src/components/AdminSettings/SignalingServers.vue
@@ -25,7 +25,7 @@
 		<h2>
 			{{ t('spreed', 'High-performance backend') }}
 
-			<ButtonVue v-if="!loading && showAddServerButton"
+			<NcButton v-if="!loading && showAddServerButton"
 				class="signaling-server__add-icon"
 				type="tertiary-no-background"
 				:aria-label="t('spreed', 'Add a new high-performance backend server')"
@@ -33,7 +33,7 @@
 				<template #icon>
 					<Plus :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</h2>
 
 		<p class="settings-hint">
@@ -86,7 +86,7 @@
 
 <script>
 import SignalingServer from '../../components/AdminSettings/SignalingServer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
@@ -97,7 +97,7 @@ export default {
 	name: 'SignalingServers',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		SignalingServer,
 		Plus,
 	},
diff --git a/src/components/AdminSettings/StunServer.vue b/src/components/AdminSettings/StunServer.vue
index e54dce8ce..3f1bd39b9 100644
--- a/src/components/AdminSettings/StunServer.vue
+++ b/src/components/AdminSettings/StunServer.vue
@@ -32,26 +32,26 @@
 			:disabled="loading"
 			:aria-label="t('spreed', 'STUN server URL')"
 			@input="update">
-		<ButtonVue v-show="!isValidServer"
+		<NcButton v-show="!isValidServer"
 			type="tertiary-no-background"
 			:aria-label="t('spreed', 'The server address is invalid')">
 			<template #icon>
 				<AlertCircle />
 			</template>
-		</ButtonVue>
-		<ButtonVue v-show="!loading"
+		</NcButton>
+		<NcButton v-show="!loading"
 			type="tertiary-no-background"
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
 				<Delete :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 
@@ -59,7 +59,7 @@ export default {
 	name: 'StunServer',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		AlertCircle,
 		Delete,
 	},
diff --git a/src/components/AdminSettings/StunServers.vue b/src/components/AdminSettings/StunServers.vue
index dc2dcb6ae..820ad0319 100644
--- a/src/components/AdminSettings/StunServers.vue
+++ b/src/components/AdminSettings/StunServers.vue
@@ -25,7 +25,7 @@
 		<h2>
 			{{ t('spreed', 'STUN servers') }}
 
-			<ButtonVue v-if="!loading"
+			<NcButton v-if="!loading"
 				class="stun-server__add-icon"
 				type="tertiary-no-background"
 				:aria-label="t('spreed', 'Add a new STUN server')"
@@ -33,7 +33,7 @@
 				<template #icon>
 					<Plus :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</h2>
 
 		<p class="settings-hint">
@@ -56,7 +56,7 @@
 
 <script>
 import StunServer from '../../components/AdminSettings/StunServer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import debounce from 'debounce'
 import { loadState } from '@nextcloud/initial-state'
@@ -66,7 +66,7 @@ export default {
 	name: 'StunServers',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		StunServer,
 		Plus,
 	},
diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 9b2ec182c..7bb3a05ae 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -73,7 +73,7 @@
 			</option>
 		</select>
 
-		<ButtonVue v-show="!loading"
+		<NcButton v-show="!loading"
 			type="tertiary-no-background"
 			:aria-label="testResult"
 			@click="testServer">
@@ -83,20 +83,20 @@
 				<Check v-else-if="testingSuccess" />
 				<CategoryMonitoring v-else />
 			</template>
-		</ButtonVue>
-		<ButtonVue v-show="!loading"
+		</NcButton>
+		<NcButton v-show="!loading"
 			type="tertiary-no-background"
 			:aria-label="t('spreed', 'Delete this server')"
 			@click="removeServer">
 			<template #icon>
 				<Delete :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -114,7 +114,7 @@ export default {
 	},
 
 	components: {
-		ButtonVue,
+		NcButton,
 		AlertCircle,
 		CategoryMonitoring,
 		Check,
diff --git a/src/components/AdminSettings/TurnServers.vue b/src/components/AdminSettings/TurnServers.vue
index 7331db37a..7d49ba849 100644
--- a/src/components/AdminSettings/TurnServers.vue
+++ b/src/components/AdminSettings/TurnServers.vue
@@ -25,7 +25,7 @@
 		<h2>
 			{{ t('spreed', 'TURN servers') }}
 
-			<ButtonVue v-if="!loading"
+			<NcButton v-if="!loading"
 				class="turn-server__add-icon"
 				type="tertiary-no-background"
 				:aria-label="t('spreed', 'Add a new TURN server')"
@@ -33,7 +33,7 @@
 				<template #icon>
 					<Plus :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</h2>
 
 		<!-- eslint-disable-next-line vue/no-v-html -->
@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import TurnServer from '../../components/AdminSettings/TurnServer.vue'
 import { loadState } from '@nextcloud/initial-state'
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -71,7 +71,7 @@ export default {
 	name: 'TurnServers',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		TurnServer,
 		Plus,
 	},
diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue
index 47263ca29..79f860c46 100644
--- a/src/components/AdminSettings/WebServerSetupChecks.vue
+++ b/src/components/AdminSettings/WebServerSetupChecks.vue
@@ -32,7 +32,7 @@
 		<ul class="web-server-setup-checks">
 			<li class="background-blur">
 				{{ t('spreed', 'Files required for background blur can be loaded') }}
-				<ButtonVue v-tooltip="backgroundBlurAvailableToolTip"
+				<NcButton v-tooltip="backgroundBlurAvailableToolTip"
 					type="tertiary"
 					class="vue-button-inline"
 					:class="{'success-button': backgroundBlurAvailable === true, 'error-button': backgroundBlurAvailable === false}"
@@ -43,7 +43,7 @@
 						<Check v-else-if="backgroundBlurAvailable === true" :size="20" />
 						<span v-else class="icon icon-loading-small" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 			</li>
 		</ul>
 	</div>
@@ -51,7 +51,7 @@
 
 <script>
 import AlertCircle from 'vue-material-design-icons/AlertCircle.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Check from 'vue-material-design-icons/Check.vue'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import JitsiStreamBackgroundEffect from '../../utils/media/effects/virtual-background/JitsiStreamBackgroundEffect.js'
@@ -70,7 +70,7 @@ export default {
 
 	components: {
 		AlertCircle,
-		ButtonVue,
+		NcButton,
 		Check,
 	},
 
diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 410614463..08b2db1c3 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -25,7 +25,7 @@
 		<div v-if="iconClass"
 			class="icon"
 			:class="[`avatar-${sizeToString}px`, iconClass]" />
-		<Avatar v-else-if="!isGuest"
+		<NcAvatar v-else-if="!isGuest"
 			:user="id"
 			:display-name="name"
 			:menu-container="menuContainerWithFallback"
@@ -45,14 +45,14 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 
 	name: 'AvatarWrapper',
 
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 
 	props: {
diff --git a/src/components/AvatarWrapper/AvatarWrapperSmall.vue b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
index 2fff264d0..56839070c 100644
--- a/src/components/AvatarWrapper/AvatarWrapperSmall.vue
+++ b/src/components/AvatarWrapper/AvatarWrapperSmall.vue
@@ -25,7 +25,7 @@
 		<div v-if="iconClass"
 			class="icon"
 			:class="[`avatar-${sizeToString}px`, iconClass]" />
-		<Avatar v-else-if="!isGuest"
+		<NcAvatar v-else-if="!isGuest"
 			:user="id"
 			:display-name="name"
 			:menu-container="menuContainer"
@@ -43,14 +43,14 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 export default {
 
 	name: 'AvatarWrapperSmall',
 
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 
 	props: {
diff --git a/src/components/CallView/shared/EmptyCallView.vue b/src/components/CallView/shared/EmptyCallView.vue
index f1e731b3e..69a1ea216 100644
--- a/src/components/CallView/shared/EmptyCallView.vue
+++ b/src/components/CallView/shared/EmptyCallView.vue
@@ -27,16 +27,16 @@
 		<p v-if="message" class="emptycontent-additional">
 			{{ message }}
 		</p>
-		<ButtonVue v-if="showLink"
+		<NcButton v-if="showLink"
 			type="primary"
 			@click.stop.prevent="copyLinkToConversation">
 			{{ t('spreed', 'Copy link') }}
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { generateUrl } from '@nextcloud/router'
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
@@ -46,7 +46,7 @@ export default {
 	name: 'EmptyCallView',
 
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 937412f90..7c7dec35a 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -22,14 +22,14 @@
 		@shortkey="handleShortkey">
 		<div class="buttons-bar">
 			<div class="network-connection-state">
-				<Popover v-if="qualityWarningTooltip"
+				<NcPopover v-if="qualityWarningTooltip"
 					:boundary="boundaryElement"
 					:aria-label="qualityWarningAriaLabel"
 					trigger="hover"
 					:auto-hide="false"
 					:shown="showQualityWarningTooltip">
 					<template #trigger>
-						<ButtonVue id="quality_warning_button"
+						<NcButton id="quality_warning_button"
 							type="tertiary-no-background"
 							class="trigger"
 							@click="mouseover = !mouseover">
@@ -37,29 +37,29 @@
 								<NetworkStrength2Alert fill-color="#e9322d"
 									:size="20" />
 							</template>
-						</ButtonVue>
+						</NcButton>
 					</template>
 					<div class="hint">
 						<span>{{ qualityWarningTooltip.content }}</span>
 						<div class="hint__actions">
-							<ButtonVue v-if="qualityWarningTooltip.action"
+							<NcButton v-if="qualityWarningTooltip.action"
 								type="primary"
 								class="hint__button"
 								@click="executeQualityWarningTooltipAction">
 								{{ qualityWarningTooltip.actionLabel }}
-							</ButtonVue>
-							<ButtonVue v-if="!isQualityWarningTooltipDismissed"
+							</NcButton>
+							<NcButton v-if="!isQualityWarningTooltipDismissed"
 								type="tertiary"
 								class="hint__button"
 								@click="dismissQualityWarningTooltip">
 								{{ t('spreed', 'Dismiss') }}
-							</ButtonVue>
+							</NcButton>
 						</div>
 					</div>
-				</Popover>
+				</NcPopover>
 			</div>
 			<div id="muteWrapper">
-				<ButtonVue v-shortkey.once="['m']"
+				<NcButton v-shortkey.once="['m']"
 					v-tooltip="audioButtonTooltip"
 					type="tertiary-no-background"
 					:aria-label="audioButtonAriaLabel"
@@ -74,13 +74,13 @@
 							:size="20"
 							fill-color="#ffffff" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 				<span v-show="model.attributes.audioAvailable"
 					ref="volumeIndicator"
 					class="volume-indicator"
 					:class="{'microphone-off': !showMicrophoneOn}" />
 			</div>
-			<ButtonVue v-shortkey.once="['v']"
+			<NcButton v-shortkey.once="['v']"
 				v-tooltip="videoButtonTooltip"
 				type="tertiary-no-background"
 				:aria-label="videoButtonAriaLabel"
@@ -95,8 +95,8 @@
 						:size="20"
 						fill-color="#ffffff" />
 				</template>
-			</ButtonVue>
-			<ButtonVue v-if="isVirtualBackgroundAvailable && !showActions"
+			</NcButton>
+			<NcButton v-if="isVirtualBackgroundAvailable && !showActions"
 				v-tooltip="toggleVirtualBackgroundButtonLabel"
 				type="tertiary-no-background"
 				:aria-label="toggleVirtualBackgroundButtonLabel"
@@ -110,8 +110,8 @@
 						:size="20"
 						fill-color="#ffffff" />
 				</template>
-			</ButtonVue>
-			<Actions v-if="!screenSharingButtonHidden"
+			</NcButton>
+			<NcActions v-if="!screenSharingButtonHidden"
 				id="screensharing-button"
 				v-tooltip="screenSharingButtonTooltip"
 				:aria-label="screenSharingButtonAriaLabel"
@@ -133,30 +133,30 @@
 				</template>
 				<!-- /Actions button icon -->
 				<!-- Actions -->
-				<ActionButton v-if="!screenSharingMenuOpen"
+				<NcActionButton v-if="!screenSharingMenuOpen"
 					@click.stop="toggleScreenSharingMenu">
 					<template #icon>
 						<PresentToAll :size="20"
 							fill-color="#ffffff" />
 					</template>
 					{{ screenSharingButtonTooltip }}
-				</ActionButton>
-				<ActionButton v-if="model.attributes.localScreen"
+				</NcActionButton>
+				<NcActionButton v-if="model.attributes.localScreen"
 					@click="showScreen">
 					<template #icon>
 						<Monitor :size="20" />
 					</template>
 					{{ t('spreed', 'Show your screen') }}
-				</ActionButton>
-				<ActionButton v-if="model.attributes.localScreen"
+				</NcActionButton>
+				<NcActionButton v-if="model.attributes.localScreen"
 					@click="stopScreen">
 					<template #icon>
 						<CancelPresentation :size="20" />
 					</template>
 					{{ t('spreed', 'Stop screensharing') }}
-				</ActionButton>
-			</Actions>
-			<ButtonVue v-shortkey.once="['r']"
+				</NcActionButton>
+			</NcActions>
+			<NcButton v-shortkey.once="['r']"
 				v-tooltip="t('spreed', 'Lower hand (R)')"
 				type="tertiary-no-background"
 				class="lower-hand"
@@ -171,8 +171,8 @@
 					<HandBackLeft :size="18"
 						fill-color="#ffffff" />
 				</template>
-			</ButtonVue>
-			<Actions v-if="showActions"
+			</NcButton>
+			<NcActions v-if="showActions"
 				v-tooltip="t('spreed', 'More actions')"
 				:container="container"
 				:aria-label="t('spreed', 'More actions')">
@@ -181,7 +181,7 @@
 						fill-color="#ffffff" />
 				</template>
 
-				<ActionButton :close-after-click="true"
+				<NcActionButton :close-after-click="true"
 					@click="toggleHandRaised">
 					<!-- The following icon is much bigger than all the others
 						so we reduce its size -->
@@ -189,8 +189,8 @@
 						<HandBackLeft :size="18" />
 					</template>
 					{{ raiseHandButtonLabel }}
-				</ActionButton>
-				<ActionButton v-if="isVirtualBackgroundAvailable"
+				</NcActionButton>
+				<NcActionButton v-if="isVirtualBackgroundAvailable"
 					:close-after-click="true"
 					@click="toggleVirtualBackground">
 					<template #icon>
@@ -200,9 +200,9 @@
 							:size="20" />
 					</template>
 					{{ toggleVirtualBackgroundButtonLabel }}
-				</ActionButton>
+				</NcActionButton>
 				<!-- Call layout switcher -->
-				<ActionButton v-if="isInCall"
+				<NcActionButton v-if="isInCall"
 					:close-after-click="true"
 					@click="changeView">
 					<template #icon>
@@ -212,16 +212,16 @@
 							:size="20" />
 					</template>
 					{{ changeViewText }}
-				</ActionButton>
-				<ActionSeparator />
-				<ActionButton :close-after-click="true"
+				</NcActionButton>
+				<NcActionSeparator />
+				<NcActionButton :close-after-click="true"
 					@click="showSettings">
 					<template #icon>
 						<Cog :size="20" />
 					</template>
 					{{ t('spreed', 'Devices settings') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
 	</div>
 </template>
@@ -244,15 +244,15 @@ import VideoIcon from 'vue-material-design-icons/Video.vue'
 import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 import Blur from 'vue-material-design-icons/Blur.vue'
 import BlurOff from 'vue-material-design-icons/BlurOff.vue'
-import Popover from '@nextcloud/vue/dist/Components/Popover.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { PARTICIPANT } from '../../../constants.js'
 import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner.js'
 import NetworkStrength2Alert from 'vue-material-design-icons/NetworkStrength2Alert.vue'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import { callAnalyzer } from '../../../utils/webrtc/index.js'
 import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer.js'
 import isInCall from '../../../mixins/isInCall.js'
@@ -266,11 +266,11 @@ export default {
 	},
 	components: {
 		NetworkStrength2Alert,
-		Popover,
-		Actions,
-		ActionSeparator,
-		ActionButton,
-		ButtonVue,
+		NcPopover,
+		NcActions,
+		NcActionSeparator,
+		NcActionButton,
+		NcButton,
 		CancelPresentation,
 		Cog,
 		DotsHorizontal,
diff --git a/src/components/CallView/shared/LocalVideo.vue b/src/components/CallView/shared/LocalVideo.vue
index 770612c06..bf3f01705 100644
--- a/src/components/CallView/shared/LocalVideo.vue
+++ b/src/components/CallView/shared/LocalVideo.vue
@@ -38,7 +38,7 @@
 			<VideoBackground v-if="isGrid || isStripe"
 				:display-name="displayName"
 				:user="userId" />
-			<Avatar v-if="userId"
+			<NcAvatar v-if="userId"
 				:size="avatarSize"
 				:disable-menu="true"
 				:disable-tooltip="true"
@@ -66,7 +66,7 @@
 
 <script>
 import attachMediaStream from 'attachmediastream'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import Hex from 'crypto-js/enc-hex.js'
 import SHA1 from 'crypto-js/sha1.js'
 import {
@@ -83,7 +83,7 @@ export default {
 	name: 'LocalVideo',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		VideoBackground,
 	},
 
diff --git a/src/components/CallView/shared/VideoVue.vue b/src/components/CallView/shared/VideoVue.vue
index 04e6de1ca..e7c9b54c0 100644
--- a/src/components/CallView/shared/VideoVue.vue
+++ b/src/components/CallView/shared/VideoVue.vue
@@ -50,7 +50,7 @@
 				<template v-if="participantUserId">
 					<VideoBackground :display-name="participantName"
 						:user="participantUserId" />
-					<Avatar :size="avatarSize"
+					<NcAvatar :size="avatarSize"
 						:disable-menu="true"
 						:disable-tooltip="true"
 						:user="participantUserId"
@@ -89,7 +89,7 @@
 
 <script>
 import attachMediaStream from 'attachmediastream'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import { ConnectionState } from '../../../utils/webrtc/models/CallParticipantModel.js'
 import SHA1 from 'crypto-js/sha1.js'
 import Hex from 'crypto-js/enc-hex.js'
@@ -106,7 +106,7 @@ export default {
 	name: 'VideoVue',
 
 	components: {
-		Avatar,
+		NcAvatar,
 		VideoBackground,
 		AccountCircle,
 		Screen,
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
index dd9d18352..fea001b7d 100644
--- a/src/components/ConversationIcon.vue
+++ b/src/components/ConversationIcon.vue
@@ -25,7 +25,7 @@
 		<div v-if="iconClass"
 			class="avatar icon"
 			:class="iconClass" />
-		<Avatar v-else
+		<NcAvatar v-else
 			:size="44"
 			:user="item.name"
 			:disable-menu="disableMenu"
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import Star from 'vue-material-design-icons/Star.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import { CONVERSATION } from '../constants.js'
@@ -59,7 +59,7 @@ import { CONVERSATION } from '../constants.js'
 export default {
 	name: 'ConversationIcon',
 	components: {
-		Avatar,
+		NcAvatar,
 		Star,
 		VideoIcon,
 	},
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
index d9372d0a5..d724f2cba 100644
--- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue
+++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -28,52 +28,52 @@
 
 		<!-- All permissions -->
 		<div class="conversation-permissions-editor__setting">
-			<CheckboxRadioSwitch :checked.sync="radioValue"
+			<NcCheckboxRadioSwitch :checked.sync="radioValue"
 				:disabled="loading"
 				value="all"
 				name="permission_radio"
 				type="radio"
 				@update:checked="handleSubmitPermissions">
 				{{ t('spreed', 'All permissions') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<span v-show="loading && radioValue === 'all'" class="icon-loading-small" />
 		</div>
 		<p>{{ t('spreed', 'Participants have permissions to start a call, join a call, enable audio and video, and share screen.') }}</p>
 
 		<!-- No permissions -->
 		<div class="conversation-permissions-editor__setting">
-			<CheckboxRadioSwitch :checked.sync="radioValue"
+			<NcCheckboxRadioSwitch :checked.sync="radioValue"
 				value="restricted"
 				:disabled="loading"
 				name="permission_radio"
 				type="radio"
 				@update:checked="handleSubmitPermissions">
 				{{ t('spreed', 'Restricted') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<span v-show="loading && radioValue === 'restricted'" class="icon-loading-small" />
 		</div>
 		<p>{{ t('spreed', 'Participants can join calls, but cannot enable audio nor video nor share screen until a moderator manually grants them permissions.') }}</p>
 
 		<!-- Advanced permissions -->
 		<div class="conversation-permissions-editor__setting--advanced">
-			<CheckboxRadioSwitch :checked.sync="radioValue"
+			<NcCheckboxRadioSwitch :checked.sync="radioValue"
 				value="advanced"
 				:disabled="loading"
 				name="permission_radio"
 				type="radio"
 				@update:checked="showPermissionsEditor = true">
 				{{ t('spreed', 'Advanced permissions') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
 			<!-- Edit advanced permissions -->
-			<ButtonVue v-show="showEditButton"
+			<NcButton v-show="showEditButton"
 				type="tertiary"
 				:aria-label="t('spreed', 'Edit permissions')"
 				@click="showPermissionsEditor = true">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<PermissionEditor v-if="showPermissionsEditor"
 			:conversation-name="conversationName"
@@ -86,8 +86,8 @@
 
 <script>
 import PermissionEditor from '../PermissionsEditor/PermissionsEditor.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import { PARTICIPANT } from '../../constants.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
@@ -99,8 +99,8 @@ export default {
 
 	components: {
 		PermissionEditor,
-		ButtonVue,
-		CheckboxRadioSwitch,
+		NcButton,
+		NcCheckboxRadioSwitch,
 		Pencil,
 	},
 
diff --git a/src/components/ConversationSettings/ConversationSettingsDialog.vue b/src/components/ConversationSettings/ConversationSettingsDialog.vue
index 835d52170..c52067d92 100644
--- a/src/components/ConversationSettings/ConversationSettingsDialog.vue
+++ b/src/components/ConversationSettings/ConversationSettingsDialog.vue
@@ -20,13 +20,13 @@
 -->
 
 <template>
-	<AppSettingsDialog role="dialog"
+	<NcAppSettingsDialog role="dialog"
 		:aria-label="t('spreed', 'Conversation settings')"
 		:open.sync="showSettings"
 		:show-navigation="true"
 		:container="container">
 		<!-- description -->
-		<AppSettingsSection v-if="showDescription"
+		<NcAppSettingsSection v-if="showDescription"
 			id="description"
 			:title="t('spreed', 'Description')">
 			<Description :editable="canFullModerate"
@@ -36,77 +36,77 @@
 				:placeholder="t('spreed', 'Enter a description for this conversation')"
 				@submit-description="handleUpdateDescription"
 				@update:editing="handleEditDescription" />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
 		<!-- Notifications settings -->
-		<AppSettingsSection id="notifications"
+		<NcAppSettingsSection id="notifications"
 			:title="t('spreed', 'Notifications')">
 			<NotificationsSettings :conversation="conversation" />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
 		<!-- Devices preview sceren -->
-		<AppSettingsSection id="device-checker"
+		<NcAppSettingsSection id="device-checker"
 			:title="t('spreed', 'Device check')">
-			<CheckboxRadioSwitch :checked.sync="showDeviceChecker">
+			<NcCheckboxRadioSwitch :checked.sync="showDeviceChecker">
 				{{ t('spreed', 'Always show the device preview screen before joining a call in this conversation.') }}
-			</CheckboxRadioSwitch>
-		</AppSettingsSection>
+			</NcCheckboxRadioSwitch>
+		</NcAppSettingsSection>
 
 		<!-- Guest access -->
-		<AppSettingsSection v-if="canFullModerate"
+		<NcAppSettingsSection v-if="canFullModerate"
 			id="guests"
 			:title="t('spreed', 'Guests access')">
 			<LinkShareSettings ref="linkShareSettings" />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
 		<!-- TODO sepatate these 2 settings and rename the settings sections
 		all the settings in this component are conversation settings. Proposal:
 		move lock conversation in destructive actions and create a separate
 		section for listablesettings -->
-		<AppSettingsSection v-if="canFullModerate"
+		<NcAppSettingsSection v-if="canFullModerate"
 			id="conversation-settings"
 			:title="t('spreed', 'Conversation settings')">
 			<ExpirationSettings :token="token" />
 			<ListableSettings :token="token" />
 			<LockingSettings :token="token" />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
 		<!-- Conversation permissions -->
-		<AppSettingsSection v-if="canFullModerate"
+		<NcAppSettingsSection v-if="canFullModerate"
 			id="permissions"
 			:title="t('spreed', 'Participants permissions')">
 			<ConversationPermissionsSettings :token="token" />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
 		<!-- Meeting settings -->
-		<AppSettingsSection v-if="canFullModerate"
+		<NcAppSettingsSection v-if="canFullModerate"
 			id="meeting"
 			:title="t('spreed', 'Meeting settings')">
 			<LobbySettings :token="token" />
 			<SipSettings v-if="canUserEnableSIP" />
-		</AppSettingsSection>
-		<AppSettingsSection v-if="canFullModerate && matterbridgeEnabled"
+		</NcAppSettingsSection>
+		<NcAppSettingsSection v-if="canFullModerate && matterbridgeEnabled"
 			id="matterbridge"
 			:title="t('spreed', 'Matterbridge')">
 			<MatterbridgeSettings />
-		</AppSettingsSection>
+		</NcAppSettingsSection>
 
 		<!-- Destructive actions -->
-		<AppSettingsSection v-if="canLeaveConversation || canDeleteConversation"
+		<NcAppSettingsSection v-if="canLeaveConversation || canDeleteConversation"
 			id="dangerzone"
 			:title="t('spreed', 'Danger zone')">
 			<DangerZone :conversation="conversation"
 				:can-leave-conversation="canLeaveConversation"
 				:can-delete-conversation="canDeleteConversation" />
-		</AppSettingsSection>
-	</AppSettingsDialog>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { PARTICIPANT, CONVERSATION } from '../../constants.js'
-import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog.js'
-import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection.js'
+import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
+import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import ExpirationSettings from './ExpirationSettings.vue'
 import LinkShareSettings from './LinkShareSettings.vue'
 import ListableSettings from './ListableSettings.vue'
@@ -119,7 +119,7 @@ import DangerZone from './DangerZone.vue'
 import NotificationsSettings from './NotificationsSettings.vue'
 import { showError } from '@nextcloud/dialogs'
 import Description from '../Description/Description.vue'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import ConversationPermissionsSettings from './ConversationPermissionsSettings.vue'
 
@@ -127,8 +127,8 @@ export default {
 	name: 'ConversationSettingsDialog',
 
 	components: {
-		AppSettingsDialog,
-		AppSettingsSection,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
 		ExpirationSettings,
 		LinkShareSettings,
 		LobbySettings,
@@ -139,7 +139,7 @@ export default {
 		DangerZone,
 		NotificationsSettings,
 		Description,
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		ConversationPermissionsSettings,
 	},
 
diff --git a/src/components/ConversationSettings/DangerZone.vue b/src/components/ConversationSettings/DangerZone.vue
index 78c7c13c3..37defac96 100644
--- a/src/components/ConversationSettings/DangerZone.vue
+++ b/src/components/ConversationSettings/DangerZone.vue
@@ -30,9 +30,9 @@
 				<p class="danger-zone__hint">
 					{{ t('spreed', 'Once a conversation is left, to rejoin a closed conversation, an invite is needed. An open conversation can be rejoined at any time.') }}
 				</p>
-				<ButtonVue type="warning" @click.prevent.exact="leaveConversation">
+				<NcButton type="warning" @click.prevent.exact="leaveConversation">
 					{{ t('spreed', 'Leave conversation') }}
-				</ButtonVue>
+				</NcButton>
 			</template>
 			<template v-if="canDeleteConversation">
 				<br>
@@ -40,10 +40,10 @@
 				<p class="danger-zone__hint">
 					{{ t('spreed', 'Permanently delete this conversation.') }}
 				</p>
-				<ButtonVue type="error"
+				<NcButton type="error"
 					@click.prevent.exact="deleteConversation">
 					{{ t('spreed', 'Delete conversation') }}
-				</ButtonVue>
+				</NcButton>
 			</template>
 			<template v-if="canDeleteConversation">
 				<br>
@@ -51,10 +51,10 @@
 				<p class="danger-zone__hint">
 					{{ t('spreed', 'Permanently delete all the messages in this conversation.') }}
 				</p>
-				<ButtonVue type="error"
+				<NcButton type="error"
 					@click.prevent.exact="clearChatHistory">
 					{{ t('spreed', 'Delete chat messages') }}
-				</ButtonVue>
+				</NcButton>
 			</template>
 			<div />
 		</div>
@@ -64,12 +64,12 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'DangerZone',
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		conversation: {
diff --git a/src/components/ConversationSettings/ExpirationSettings.vue b/src/components/ConversationSettings/ExpirationSettings.vue
index bcfb5c347..f260abb4a 100644
--- a/src/components/ConversationSettings/ExpirationSettings.vue
+++ b/src/components/ConversationSettings/ExpirationSettings.vue
@@ -24,7 +24,7 @@
 		<div class="app-settings-section__hint">
 			{{ t('spreed', 'Expire chat messages after a certain time. Note files shared into the chat will only be unshared from the conversation but are not deleted for the owner.') }}
 		</div>
-		<Multiselect :value="selectedOption"
+		<NcMultiselect :value="selectedOption"
 			:options="expirationOptions"
 			:allow-empty="false"
 			track-by="id"
@@ -35,14 +35,14 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 
 export default {
 	name: 'ExpirationSettings',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 	},
 
 	props: {
diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
index 7b427024e..dc3a6d296 100644
--- a/src/components/ConversationSettings/LinkShareSettings.vue
+++ b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -70,43 +70,43 @@
 						name="link_share_settings_link_password"
 						:placeholder="t('spreed', 'Enter a password')"
 						:disabled="isSaving">
-					<ButtonVue id="link_share_settings_link_password_submit"
+					<NcButton id="link_share_settings_link_password_submit"
 						:aria-label="t('spreed', 'Save password')"
 						:disabled="isSaving"
 						native-type="submit">
 						<template #icon>
 							<ArrowRight />
 						</template>
-					</ButtonVue>
+					</NcButton>
 				</form>
 			</div>
 		</div>
 		<div class="app-settings-subsection">
-			<ButtonVue ref="copyLinkButton"
+			<NcButton ref="copyLinkButton"
 				@click.prevent="handleCopyLink"
 				@keydown.enter="handleCopyLink">
 				<template #icon>
 					<ClipboardTextOutline />
 				</template>
 				{{ t('spreed', 'Copy conversation link') }}
-			</ButtonVue>
+			</NcButton>
 		</div>
 		<div v-if="isSharedPublicly" class="app-settings-subsection">
-			<ButtonVue :disabled="isSendingInvitations"
+			<NcButton :disabled="isSendingInvitations"
 				@click.prevent="handleResendInvitations"
 				@keydown.enter="handleResendInvitations">
 				<template #icon>
 					<Email />
 				</template>
 				{{ t('spreed', 'Resend invitations') }}
-			</ButtonVue>
+			</NcButton>
 			<span v-if="isSendingInvitations" class="icon-loading-small spinner" />
 		</div>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { CONVERSATION } from '../../constants.js'
 import {
@@ -121,7 +121,7 @@ export default {
 	name: 'LinkShareSettings',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		ArrowRight,
 		ClipboardTextOutline,
 		Email,
diff --git a/src/components/ConversationSettings/LobbySettings.vue b/src/components/ConversationSettings/LobbySettings.vue
index a808c7e95..12e29240c 100644
--- a/src/components/ConversationSettings/LobbySettings.vue
+++ b/src/components/ConversationSettings/LobbySettings.vue
@@ -51,7 +51,7 @@
 					<div>
 						<label for="moderation_settings_lobby_timer_field">{{ t('spreed', 'Meeting start time') }}</label>
 					</div>
-					<DatetimePicker id="moderation_settings_lobby_timer_field"
+					<NcDatetimePicker id="moderation_settings_lobby_timer_field"
 						aria-describedby="moderation_settings_lobby_timer_hint"
 						:value="lobbyTimer"
 						:default-value="defaultLobbyTimer"
@@ -70,13 +70,13 @@
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { WEBINAR } from '../../constants.js'
-import DatetimePicker from '@nextcloud/vue/dist/Components/DatetimePicker.js'
+import NcDatetimePicker from '@nextcloud/vue/dist/Components/NcDatetimePicker.js'
 
 export default {
 	name: 'LobbySettings',
 
 	components: {
-		DatetimePicker,
+		NcDatetimePicker,
 	},
 
 	props: {
diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
index f912673ee..ee3d66ee3 100644
--- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue
+++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
@@ -28,28 +28,28 @@
 			<span>
 				{{ type.name }}
 			</span>
-			<Actions :force-menu="false">
-				<ActionButton v-if="editable"
+			<NcActions :force-menu="false">
+				<NcActionButton v-if="editable"
 					:icon="editing ? 'icon-checkmark' : 'icon-rename'"
 					@click="onEditClick">
 					{{ editing ? t('spreed', 'Save'): t('spreed', 'Edit') }}
-				</ActionButton>
-			</Actions>
-			<Actions class="actions"
+				</NcActionButton>
+			</NcActions>
+			<NcActions class="actions"
 				:force-menu="true"
 				placement="bottom">
-				<ActionLink icon="icon-info"
+				<NcActionLink icon="icon-info"
 					target="_blank"
 					:title="t('spreed', 'More information')"
 					:href="type.infoTarget"
 					:close-after-click="true" />
-				<ActionButton v-if="editable"
+				<NcActionButton v-if="editable"
 					icon="icon-delete"
 					:close-after-click="true"
 					@click="$emit('delete-part')">
 					{{ t('spreed', 'Delete') }}
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</h3>
 		<div v-for="(field, key) in displayedFields"
 			:key="key"
@@ -88,16 +88,16 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 
 export default {
 	name: 'BridgePart',
 	components: {
-		Actions,
-		ActionButton,
-		ActionLink,
+		NcActions,
+		NcActionButton,
+		NcActionLink,
 	},
 
 	mixins: [
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index 86f922fb2..c0b8e34e4 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -36,7 +36,7 @@
 				<div v-show="!enabled"
 					class="add-part-wrapper">
 					<Plus class="icon" :size="20" />
-					<Multiselect ref="partMultiselect"
+					<NcMultiselect ref="partNcMultiselect"
 						v-model="selectedType"
 						label="displayName"
 						track-by="type"
@@ -51,7 +51,7 @@
 								alt="">
 							{{ option.displayName }}
 						</template>
-					</Multiselect>
+					</NcMultiselect>
 				</div>
 				<div v-show="parts.length > 0"
 					class="enable-switch-line">
@@ -65,7 +65,7 @@
 						{{ t('spreed', 'Enable bridge') }}
 						({{ processStateText }})
 					</label>
-					<ButtonVue v-if="enabled"
+					<NcButton v-if="enabled"
 						v-tooltip.top="{ content: t('spreed', 'Show Matterbridge log') }"
 						type="tertiary"
 						:aria-label="t('spreed', 'Show Matterbridge log')"
@@ -73,14 +73,14 @@
 						<template #icon>
 							<Message :size="20" />
 						</template>
-					</ButtonVue>
-					<Modal v-if="logModal"
+					</NcButton>
+					<NcModal v-if="logModal"
 						:container="container"
 						@close="closeLogModal">
 						<div class="modal__content">
 							<textarea v-model="processLog" class="log-content" />
 						</div>
-					</Modal>
+					</NcModal>
 				</div>
 			</div>
 			<ul>
@@ -106,10 +106,10 @@ import {
 } from '../../../services/matterbridgeService.js'
 import { showSuccess } from '@nextcloud/dialogs'
 import { imagePath } from '@nextcloud/router'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import Message from 'vue-material-design-icons/Message.vue'
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import BridgePart from './BridgePart.vue'
 
@@ -120,11 +120,11 @@ Vue.directive('tooltip', Tooltip)
 export default {
 	name: 'MatterbridgeSettings',
 	components: {
-		Multiselect,
+		NcMultiselect,
 		BridgePart,
-		ButtonVue,
+		NcButton,
 		Message,
-		Modal,
+		NcModal,
 		Plus,
 	},
 
diff --git a/src/components/ConversationSettings/NotificationsSettings.vue b/src/components/ConversationSettings/NotificationsSettings.vue
index 93f64651f..55a2bbf74 100644
--- a/src/components/ConversationSettings/NotificationsSettings.vue
+++ b/src/components/ConversationSettings/NotificationsSettings.vue
@@ -63,17 +63,17 @@
 		</a>
 
 		<h4>{{ t('spreed', 'Calls') }}</h4>
-		<CheckboxRadioSwitch id="notification_calls"
+		<NcCheckboxRadioSwitch id="notification_calls"
 			:checked.sync="notifyCalls"
 			@update:checked="setNotificationCalls">
 			{{ t('spreed', 'Notify about calls in this conversation') }}
-		</CheckboxRadioSwitch>
+		</NcCheckboxRadioSwitch>
 	</div>
 </template>
 
 <script>
 import { PARTICIPANT } from '../../constants.js'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import VolumeHigh from 'vue-material-design-icons/VolumeHigh.vue'
 import Account from 'vue-material-design-icons/Account.vue'
 import VolumeOff from 'vue-material-design-icons/VolumeOff.vue'
@@ -83,7 +83,7 @@ export default {
 	name: 'NotificationsSettings',
 
 	components: {
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		VolumeHigh,
 		Account,
 		VolumeOff,
diff --git a/src/components/ConversationsOptionsList.vue b/src/components/ConversationsOptionsList.vue
index ea8f617c8..d5ef03ebf 100644
--- a/src/components/ConversationsOptionsList.vue
+++ b/src/components/ConversationsOptionsList.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<ul class="contacts-list">
-		<ListItem v-for="item of items"
+		<NcListItem v-for="item of items"
 			:key="item.id"
 			:title="item.label"
 			@click="onClick(item)">
@@ -29,20 +29,20 @@
 				<ConversationIcon :item="iconData(item)"
 					:disable-menu="true" />
 			</template>
-		</ListItem>
+		</NcListItem>
 	</ul>
 </template>
 
 <script>
 import ConversationIcon from './ConversationIcon.vue'
-import ListItem from '@nextcloud/vue/dist/Components/ListItem.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 import { CONVERSATION } from '../constants.js'
 
 export default {
 	name: 'ConversationsOptionsList',
 	components: {
 		ConversationIcon,
-		ListItem,
+		NcListItem,
 	},
 	props: {
 		items: {
diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue
index c30481715..0b43c62f7 100644
--- a/src/components/Description/Description.vue
+++ b/src/components/Description/Description.vue
@@ -35,21 +35,21 @@
 			@keydown.esc="handleCancelEditing" />
 		<template v-if="!loading">
 			<template v-if="editing">
-				<ButtonVue type="tertiary"
+				<NcButton type="tertiary"
 					:aria-label="t('spreed', 'Cancel editing description')"
 					@click="handleCancelEditing">
 					<template #icon>
 						<Close :size="20" />
 					</template>
-				</ButtonVue>
-				<ButtonVue type="primary"
+				</NcButton>
+				<NcButton type="primary"
 					:aria-label="t('spreed', 'Submit conversation description')"
 					:disabled="!canSubmit"
 					@click="handleSubmitDescription">
 					<template #icon>
 						<Check :size="20" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 				<div v-if="showCountDown"
 					v-tooltip.auto="countDownWarningText"
 					class="counter"
@@ -58,14 +58,14 @@
 					<span>{{ charactersCountDown }}</span>
 				</div>
 			</template>
-			<ButtonVue v-if="!editing && editable"
+			<NcButton v-if="!editing && editable"
 				type="tertiary"
 				:aria-label="t('spreed', 'Edit conversation description')"
 				@click="handleEditDescription">
 				<template #icon>
 					<Pencil :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</template>
 		<div v-if="loading" class="icon-loading-small spinner" />
 	</div>
@@ -75,9 +75,9 @@
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
-import RichContentEditable from '@nextcloud/vue/dist/Components/RichContenteditable.js'
+import RichContentEditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'Description',
@@ -86,7 +86,7 @@ export default {
 		Check,
 		Close,
 		RichContentEditable,
-		ButtonVue,
+		NcButton,
 	},
 
 	directives: {
diff --git a/src/components/DeviceChecker/DeviceChecker.vue b/src/components/DeviceChecker/DeviceChecker.vue
index edf500aeb..566581e49 100644
--- a/src/components/DeviceChecker/DeviceChecker.vue
+++ b/src/components/DeviceChecker/DeviceChecker.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<Modal v-if="modal"
+	<NcModal v-if="modal"
 		class="talk-modal"
 		size="small"
 		@close="closeModal">
@@ -40,7 +40,7 @@
 					class="preview__novideo">
 					<VideoBackground :display-name="displayName"
 						:user="userId" />
-					<Avatar v-if="userId"
+					<NcAvatar v-if="userId"
 						:size="128"
 						:disable-menu="true"
 						:disable-tooltip="true"
@@ -60,7 +60,7 @@
 			-->
 			<div class="device-checker__call-preferences">
 				<!-- Audio toggle -->
-				<ButtonVue v-tooltip="audioButtonTooltip"
+				<NcButton v-tooltip="audioButtonTooltip"
 					type="tertiary"
 					:aria-label="audioButtonTooltip"
 					:disabled="!audioPreviewAvailable"
@@ -71,7 +71,7 @@
 						<MicrophoneOff v-else
 							:size="20" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 				<VolumeIndicator class="indicator"
 					:audio-preview-available="audioPreviewAvailable"
 					:current-volume="currentVolume"
@@ -79,7 +79,7 @@
 					:disabled="!audioOn" />
 
 				<!-- Video toggle -->
-				<ButtonVue v-tooltip="videoButtonTooltip"
+				<NcButton v-tooltip="videoButtonTooltip"
 					type="tertiary"
 					:aria-label="videoButtonTooltip"
 					:disabled="!videoPreviewAvailable"
@@ -90,10 +90,10 @@
 						<VideoOff v-else
 							:size="20" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 
 				<!-- Blur toggle -->
-				<ButtonVue v-if="videoPreviewAvailable && blurPreviewAvailable"
+				<NcButton v-if="videoPreviewAvailable && blurPreviewAvailable"
 					v-tooltip="blurButtonTooltip"
 					type="tertiary"
 					:aria-label="blurButtonTooltip"
@@ -105,12 +105,12 @@
 						<BlurOff v-else
 							:size="20" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 			</div>
 
 			<!-- Device selection -->
 			<div class="device-checker__device-selection">
-				<ButtonVue v-if="!showDeviceSelection"
+				<NcButton v-if="!showDeviceSelection"
 					type="tertiary"
 					class="select-devices"
 					@click="showDeviceSelection = true">
@@ -118,7 +118,7 @@
 						<Cog :size="20" />
 					</template>
 					{{ t('spreed', 'Choose devices') }}
-				</ButtonVue>
+				</NcButton>
 				<template v-if="showDeviceSelection">
 					<MediaDevicesSelector kind="audioinput"
 						:devices="devices"
@@ -130,51 +130,51 @@
 						@update:deviceId="videoInputId = $event" />
 				</template>
 			</div>
-			<CheckboxRadioSwitch :checked.sync="showDeviceChecker"
+			<NcCheckboxRadioSwitch :checked.sync="showDeviceChecker"
 				class="checkbox">
 				{{ t('spreed', 'Always show this dialog before joining a call in this conversation.') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 
 			<div class="device-checker__call-buttons">
 				<!-- Silent call -->
-				<Actions v-if="showSilentCallOption" :force-menu="true">
+				<NcActions v-if="showSilentCallOption" :force-menu="true">
 					<template v-if="!silentCall">
-						<ActionButton :close-after-click="true"
+						<NcActionButton :close-after-click="true"
 							icon="icon-upload"
 							:title="t('spreed', 'Call without notification')"
 							@click="silentCall= true">
 							{{ t('spreed', 'The conversation participants will not be notified about this call') }}
 							<BellOff slot="icon"
 								:size="16" />
-						</ActionButton>
+						</NcActionButton>
 					</template>
 					<template v-else>
-						<ActionButton :close-after-click="true"
+						<NcActionButton :close-after-click="true"
 							icon="icon-upload"
 							:title="t('spreed', 'Normal call')"
 							@click="silentCall= false">
 							{{ t('spreed', 'The conversation participants will be notified about this call') }}
 							<Bell slot="icon"
 								:size="16" />
-						</ActionButton>
+						</NcActionButton>
 					</template>
-				</Actions>
+				</NcActions>
 				<!-- Join call -->
 				<CallButton class="call-button"
 					:force-join-call="true"
 					:silent-call="silentCall" />
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { devices } from '../../mixins/devices.js'
 import MediaDevicesSelector from '../MediaDevicesSelector.vue'
 import VideoBackground from '../CallView/shared/VideoBackground.vue'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Microphone from 'vue-material-design-icons/Microphone.vue'
 import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'
@@ -187,12 +187,12 @@ import Bell from 'vue-material-design-icons/Bell.vue'
 import { localMediaModel } from '../../utils/webrtc/index.js'
 import CallButton from '../TopBar/CallButton.vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import isInLobby from '../../mixins/isInLobby.js'
 
 export default {
@@ -203,10 +203,10 @@ export default {
 	},
 
 	components: {
-		Modal,
+		NcModal,
 		MediaDevicesSelector,
 		VideoBackground,
-		Avatar,
+		NcAvatar,
 		Cog,
 		Microphone,
 		MicrophoneOff,
@@ -215,11 +215,11 @@ export default {
 		Blur,
 		BlurOff,
 		CallButton,
-		CheckboxRadioSwitch,
+		NcCheckboxRadioSwitch,
 		VolumeIndicator,
-		ButtonVue,
-		ActionButton,
-		Actions,
+		NcButton,
+		NcActionButton,
+		NcActions,
 		BellOff,
 		Bell,
 	},
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
index 8a8f7fc17..9579923fe 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
@@ -4,7 +4,7 @@ import { createLocalVue, shallowMount, mount, RouterLinkStub } from '@vue/test-u
 import { cloneDeep } from 'lodash'
 import storeConfig from '../../../store/storeConfig.js'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 
 import Conversation from './Conversation.vue'
@@ -85,7 +85,7 @@ describe('Conversation.vue', () => {
 			},
 		})
 
-		const el = wrapper.findComponent({ name: 'ListItem' })
+		const el = wrapper.findComponent({ name: 'NcListItem' })
 		expect(el.exists()).toBe(true)
 		expect(el.props('title')).toBe('conversation one')
 
@@ -114,7 +114,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.vm.$slots.subtitle[0].text.trim()).toBe(expectedText)
 		}
 
@@ -210,7 +210,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
 			expect(el.props('counterNumber')).toBe(expectedCounterText)
@@ -261,7 +261,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
 			expect(el.vm.$slots.counter).not.toBeDefined()
@@ -279,8 +279,8 @@ describe('Conversation.vue', () => {
 		 * @param {object} wrapper Parent element to search the text in
 		 * @param {string} text Text to find within the wrapper
 		 */
-		function findActionButton(wrapper, text) {
-			const actionButtons = wrapper.findAllComponents(ActionButton)
+		function findNcActionButton(wrapper, text) {
+			const actionButtons = wrapper.findAllComponents(NcActionButton)
 			const items = actionButtons.filter(actionButton => {
 				return actionButton.text() === text
 			})
@@ -301,7 +301,7 @@ describe('Conversation.vue', () => {
 					$router,
 				},
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 				propsData: {
 					isSearchResult: false,
@@ -309,10 +309,10 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
-			return findActionButton(el, actionName)
+			return findNcActionButton(el, actionName)
 		}
 
 		test('forwards click event on list item', async () => {
@@ -328,7 +328,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
 			await el.find('a').trigger('click')
@@ -440,7 +440,7 @@ describe('Conversation.vue', () => {
 					$copyText: copyTextMock,
 				},
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 				propsData: {
 					isSearchResult: false,
@@ -448,10 +448,10 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
-			const action = findActionButton(el, 'Copy link')
+			const action = findNcActionButton(el, 'Copy link')
 			expect(action.exists()).toBe(true)
 
 			await action.find('button').trigger('click')
@@ -469,7 +469,7 @@ describe('Conversation.vue', () => {
 				localVue,
 				store: new Vuex.Store(testStoreConfig),
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 				propsData: {
 					isSearchResult: false,
@@ -477,13 +477,13 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
-			const action = findActionButton(el, 'Add to favorites')
+			const action = findNcActionButton(el, 'Add to favorites')
 			expect(action.exists()).toBe(true)
 
-			expect(findActionButton(el, 'Remove from favorites').exists()).toBe(false)
+			expect(findNcActionButton(el, 'Remove from favorites').exists()).toBe(false)
 
 			await action.find('button').trigger('click')
 
@@ -500,7 +500,7 @@ describe('Conversation.vue', () => {
 				localVue,
 				store: new Vuex.Store(testStoreConfig),
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 				propsData: {
 					isSearchResult: false,
@@ -508,13 +508,13 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
-			const action = findActionButton(el, 'Remove from favorites')
+			const action = findNcActionButton(el, 'Remove from favorites')
 			expect(action.exists()).toBe(true)
 
-			expect(findActionButton(el, 'Add to favorites').exists()).toBe(false)
+			expect(findNcActionButton(el, 'Add to favorites').exists()).toBe(false)
 
 			await action.find('button').trigger('click')
 
@@ -536,7 +536,7 @@ describe('Conversation.vue', () => {
 				localVue,
 				store: new Vuex.Store(testStoreConfig),
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 				propsData: {
 					isSearchResult: true,
@@ -544,10 +544,10 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'ListItem' })
+			const el = wrapper.findComponent({ name: 'NcListItem' })
 			expect(el.exists()).toBe(true)
 
-			const actionButtons = wrapper.findAllComponents(ActionButton)
+			const actionButtons = wrapper.findAllComponents(NcActionButton)
 			expect(actionButtons.exists()).toBe(false)
 		})
 	})
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 31f71d7be..e4c54e0b6 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<ListItem :title="item.displayName"
+	<NcListItem :title="item.displayName"
 		:class="{'unread-mention-conversation': item.unreadMention}"
 		:anchor-id="`conversation_${item.token}`"
 		:actions-aria-label="t('spreed', 'Conversation actions')"
@@ -45,7 +45,7 @@
 			</template>
 		</template>
 		<template v-if="!isSearchResult" slot="actions">
-			<ActionButton v-if="canFavorite"
+			<NcActionButton v-if="canFavorite"
 				@click.prevent.exact="toggleFavoriteConversation">
 				<Star v-if="item.isFavorite"
 					slot="icon"
@@ -55,31 +55,31 @@
 					:size="20"
 					:fill-color="'#FFCC00'" />
 				{{ labelFavorite }}
-			</ActionButton>
-			<ActionButton icon="icon-clippy"
+			</NcActionButton>
+			<NcActionButton icon="icon-clippy"
 				@click.stop.prevent="copyLinkToConversation">
 				{{ t('spreed', 'Copy link') }}
-			</ActionButton>
-			<ActionButton :close-after-click="true"
+			</NcActionButton>
+			<NcActionButton :close-after-click="true"
 				@click.prevent.exact="markConversationAsRead">
 				<template #icon>
 					<EyeOutline :size="16" />
 				</template>
 				{{ t('spreed', 'Mark as read') }}
-			</ActionButton>
-			<ActionButton :close-after-click="true"
+			</NcActionButton>
+			<NcActionButton :close-after-click="true"
 				@click.prevent.exact="showConversationSettings">
 				<Cog slot="icon"
 					:size="20" />
 				{{ t('spreed', 'Conversation settings') }}
-			</ActionButton>
-			<ActionButton v-if="canLeaveConversation"
+			</NcActionButton>
+			<NcActionButton v-if="canLeaveConversation"
 				:close-after-click="true"
 				:icon="iconLeaveConversation"
 				@click.prevent.exact="leaveConversation">
 				{{ t('spreed', 'Leave conversation') }}
-			</ActionButton>
-			<ActionButton v-if="canDeleteConversation"
+			</NcActionButton>
+			<NcActionButton v-if="canDeleteConversation"
 				:close-after-click="true"
 				class="critical"
 				@click.prevent.exact="deleteConversation">
@@ -87,14 +87,14 @@
 					<Delete :size="16" />
 				</template>
 				{{ t('spreed', 'Delete conversation') }}
-			</ActionButton>
+			</NcActionButton>
 		</template>
-	</ListItem>
+	</NcListItem>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import Cog from 'vue-material-design-icons/Cog.vue'
 import Delete from 'vue-material-design-icons/Delete.vue'
 import EyeOutline from 'vue-material-design-icons/EyeOutline.vue'
@@ -103,13 +103,13 @@ import ConversationIcon from './../../ConversationIcon.vue'
 import { generateUrl } from '@nextcloud/router'
 import { emit } from '@nextcloud/event-bus'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants.js'
-import ListItem from '@nextcloud/vue/dist/Components/ListItem.js'
+import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
 
 export default {
 	name: 'Conversation',
 	components: {
-		ActionButton,
-		ListItem,
+		NcActionButton,
+		NcListItem,
 		ConversationIcon,
 		Cog,
 		Delete,
diff --git a/src/components/LeftSidebar/LeftSidebar.spec.js b/src/components/LeftSidebar/LeftSidebar.spec.js
index 5e813e222..deb2047d6 100644
--- a/src/components/LeftSidebar/LeftSidebar.spec.js
+++ b/src/components/LeftSidebar/LeftSidebar.spec.js
@@ -46,7 +46,7 @@ describe('LeftSidebar.vue', () => {
 			store,
 			stubs: {
 				// to prevent user status fetching
-				Avatar: true,
+				NcAvatar: true,
 				// to prevent complex dialog logic
 				NewGroupConversation: true,
 			},
@@ -134,7 +134,7 @@ describe('LeftSidebar.vue', () => {
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), undefined)
 			expect(conversationsListMock).toHaveBeenCalled()
 
-			const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+			const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 			const listEl = appNavEl.findComponent({ name: 'ConversationsList' })
 
 			expect(listEl.exists()).toBe(true)
@@ -316,7 +316,7 @@ describe('LeftSidebar.vue', () => {
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), undefined)
 			expect(conversationsListMock).toHaveBeenCalled()
 
-			const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+			const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 			const searchBoxEl = appNavEl.findComponent({ name: 'SearchBox' })
 			expect(searchBoxEl.exists()).toBe(true)
 
@@ -345,9 +345,9 @@ describe('LeftSidebar.vue', () => {
 					}
 				)
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 
-				const captionListEl = appNavEl.findAllComponents({ name: 'AppNavigationCaption' })
+				const captionListEl = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' })
 
 				expect(captionListEl.exists()).toBe(true)
 				expect(captionListEl.length).toBe(5)
@@ -391,9 +391,9 @@ describe('LeftSidebar.vue', () => {
 					}
 				)
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 
-				const captionListEl = appNavEl.findAllComponents({ name: 'AppNavigationCaption' })
+				const captionListEl = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' })
 
 				expect(captionListEl.exists()).toBe(true)
 				expect(captionListEl.length).toBe(3)
@@ -433,9 +433,9 @@ describe('LeftSidebar.vue', () => {
 					}
 				)
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 
-				const captionListEl = appNavEl.findAllComponents({ name: 'AppNavigationCaption' })
+				const captionListEl = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' })
 
 				expect(captionListEl.exists()).toBe(true)
 				expect(captionListEl.length).toBe(4)
@@ -479,7 +479,7 @@ describe('LeftSidebar.vue', () => {
 			async function testSearchNotFound(searchTerm, possibleResults, listedResults, loadStateSettingsOverride, expectedCaption) {
 				const wrapper = await testSearch(searchTerm, possibleResults, listedResults, loadStateSettingsOverride)
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const listEl = appNavEl.findComponent({ name: 'ConversationsList' })
 				expect(listEl.exists()).toBe(true)
 				const listedEls = appNavEl.findAllComponents({ name: 'Conversation' })
@@ -489,7 +489,7 @@ describe('LeftSidebar.vue', () => {
 				expect(listedEls.at(0).props('item')).toStrictEqual(conversationsList[0])
 				expect(listedEls.at(1).props('item')).toStrictEqual(conversationsList[1])
 
-				const captionsEls = appNavEl.findAllComponents({ name: 'AppNavigationCaption' })
+				const captionsEls = appNavEl.findAllComponents({ name: 'NcAppNavigationCaption' })
 				expect(captionsEls.exists()).toBe(true)
 				if (listedResults.length > 0) {
 					expect(captionsEls.length).toBeGreaterThan(2)
@@ -610,7 +610,7 @@ describe('LeftSidebar.vue', () => {
 			test('joins listed conversation from search result', async () => {
 				const wrapper = await testSearch('search', [], listedResults)
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const listedEls = appNavEl.findAllComponents({ name: 'Conversation' })
 				expect(listedEls.exists()).toBe(true)
 				expect(listedEls.length).toBe(4)
@@ -628,7 +628,7 @@ describe('LeftSidebar.vue', () => {
 
 				const wrapper = await testSearch('search', [...usersResults], [])
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const optionsEls = appNavEl.findAllComponents({ name: 'ConversationsOptionsList' })
 				expect(optionsEls.exists()).toBe(true)
 				await optionsEls.at(0).findAll('a').at(1).trigger('click')
@@ -643,7 +643,7 @@ describe('LeftSidebar.vue', () => {
 
 				const wrapper = await testSearch('search', [...groupsResults], [])
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const optionsEls = appNavEl.findAllComponents({ name: 'ConversationsOptionsList' })
 				expect(optionsEls.exists()).toBe(true)
 				await optionsEls.at(0).findAll('a').at(1).trigger('click')
@@ -660,7 +660,7 @@ describe('LeftSidebar.vue', () => {
 
 				const wrapper = await testSearch('search', [...circlesResults], [])
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const optionsEls = appNavEl.findAllComponents({ name: 'ConversationsOptionsList' })
 				expect(optionsEls.exists()).toBe(true)
 				await optionsEls.at(0).findAll('a').at(1).trigger('click')
@@ -678,7 +678,7 @@ describe('LeftSidebar.vue', () => {
 
 				const wrapper = await testSearch('search', [...usersResults], [])
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const searchBoxEl = appNavEl.findComponent({ name: 'SearchBox' })
 				const input = searchBoxEl.find('input[type="text"]')
 				expect(input.element.value).toBe('search')
@@ -695,7 +695,7 @@ describe('LeftSidebar.vue', () => {
 			test('does not clear search results when clicking group chat', async () => {
 				const wrapper = await testSearch('search', [...groupsResults], [])
 
-				const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+				const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 				const searchBoxEl = appNavEl.findComponent({ name: 'SearchBox' })
 				const input = searchBoxEl.find('input[type="text"]')
 				expect(input.element.value).toBe('search')
@@ -739,7 +739,7 @@ describe('LeftSidebar.vue', () => {
 		subscribe('show-settings', eventHandler)
 		const wrapper = mountComponent()
 
-		const appNavEl = wrapper.findComponent({ name: 'AppNavigation' })
+		const appNavEl = wrapper.findComponent({ name: 'NcAppNavigation' })
 		const button = appNavEl.find('.settings-button')
 		expect(button.exists()).toBe(true)
 
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index 34ceddfc0..7298e616f 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<AppNavigation :aria-label="t('spreed', 'Conversation list')">
+	<NcAppNavigation :aria-label="t('spreed', 'Conversation list')">
 		<div class="new-conversation"
 			:class="{ 'new-conversation--scrolled-down': !isScrolledToTop }">
 			<SearchBox v-model="searchText"
@@ -37,7 +37,7 @@
 				<ul ref="scroller"
 					class="scroller"
 					@scroll="debounceHandleScroll">
-					<AppNavigationCaption :class="{'hidden-visually': !isSearching}"
+					<NcAppNavigationCaption :class="{'hidden-visually': !isSearching}"
 						:title="t('spreed', 'Conversations')" />
 					<li role="presentation">
 						<ConversationsList ref="conversationsList"
@@ -49,7 +49,7 @@
 					</li>
 					<template v-if="isSearching">
 						<template v-if="!listedConversationsLoading && searchResultsListedConversations.length > 0">
-							<AppNavigationCaption :title="t('spreed', 'Open conversations')" />
+							<NcAppNavigationCaption :title="t('spreed', 'Open conversations')" />
 							<Conversation v-for="item of searchResultsListedConversations"
 								:key="item.id"
 								:item="item"
@@ -57,14 +57,14 @@
 								@click="joinListedConversation(item)" />
 						</template>
 						<template v-if="searchResultsUsers.length !== 0">
-							<AppNavigationCaption :title="t('spreed', 'Users')" />
+							<NcAppNavigationCaption :title="t('spreed', 'Users')" />
 							<li v-if="searchResultsUsers.length !== 0" role="presentation">
 								<ConversationsOptionsList :items="searchResultsUsers"
 									@click="createAndJoinConversation" />
 							</li>
 						</template>
 						<template v-if="!showStartConversationsOptions">
-							<AppNavigationCaption v-if="searchResultsUsers.length === 0"
+							<NcAppNavigationCaption v-if="searchResultsUsers.length === 0"
 								:title="t('spreed', 'Users')" />
 							<Hint v-if="contactsLoading" :hint="t('spreed', 'Loading')" />
 							<Hint v-else :hint="t('spreed', 'No search results')" />
@@ -72,7 +72,7 @@
 					</template>
 					<template v-if="showStartConversationsOptions">
 						<template v-if="searchResultsGroups.length !== 0">
-							<AppNavigationCaption :title="t('spreed', 'Groups')" />
+							<NcAppNavigationCaption :title="t('spreed', 'Groups')" />
 							<li v-if="searchResultsGroups.length !== 0" role="presentation">
 								<ConversationsOptionsList :items="searchResultsGroups"
 									@click="createAndJoinConversation" />
@@ -80,49 +80,49 @@
 						</template>
 
 						<template v-if="searchResultsCircles.length !== 0">
-							<AppNavigationCaption :title="t('spreed', 'Circles')" />
+							<NcAppNavigationCaption :title="t('spreed', 'Circles')" />
 							<li v-if="searchResultsCircles.length !== 0" role="presentation">
 								<ConversationsOptionsList :items="searchResultsCircles"
 									@click="createAndJoinConversation" />
 							</li>
 						</template>
 
-						<AppNavigationCaption v-if="sourcesWithoutResults"
+						<NcAppNavigationCaption v-if="sourcesWithoutResults"
 							:title="sourcesWithoutResultsList" />
 						<Hint v-if="contactsLoading" :hint="t('spreed', 'Loading')" />
 						<Hint v-else :hint="t('spreed', 'No search results')" />
 					</template>
 				</ul>
 			</li>
-			<ButtonVue v-if="!preventFindingUnread && unreadNum > 0"
+			<NcButton v-if="!preventFindingUnread && unreadNum > 0"
 				class="unread-mention-button"
 				type="primary"
 				@click="scrollBottomUnread">
 				{{ t('spreed', 'Unread mentions') }}
-			</ButtonVue>
+			</NcButton>
 		</template>
 
 		<template #footer>
 			<div id="app-settings">
 				<div id="app-settings-header">
-					<ButtonVue class="settings-button" @click="showSettings">
+					<NcButton class="settings-button" @click="showSettings">
 						{{ t('spreed', 'Talk settings') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</div>
 		</template>
-	</AppNavigation>
+	</NcAppNavigation>
 </template>
 
 <script>
 import CancelableRequest from '../../utils/cancelableRequest.js'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation.js'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import ConversationsList from './ConversationsList/ConversationsList.vue'
 import Conversation from './ConversationsList/Conversation.vue'
 import ConversationsOptionsList from '../ConversationsOptionsList.vue'
 import Hint from '../Hint.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import SearchBox from './SearchBox/SearchBox.vue'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus.js'
@@ -142,10 +142,10 @@ export default {
 	name: 'LeftSidebar',
 
 	components: {
-		AppNavigation,
-		AppNavigationCaption,
+		NcAppNavigation,
+		NcAppNavigationCaption,
 		ConversationsList,
-		ButtonVue,
+		NcButton,
 		ConversationsOptionsList,
 		Hint,
 		SearchBox,
diff --git a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
index 09e33e4dd..d95809e4b 100644
--- a/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/Confirmation/Confirmation.vue
@@ -33,7 +33,7 @@
 				<p class="confirmation__warning">
 					{{ t('spreed', 'All set') }}
 				</p>
-				<ButtonVue id="copy-link"
+				<NcButton id="copy-link"
 					slot="trigger"
 					v-clipboard:copy="linkToConversation"
 					v-clipboard:success="onCopy"
@@ -41,7 +41,7 @@
 					type="secondary"
 					class="confirmation__copy-link">
 					{{ t('spreed', 'Copy conversation link') }}
-				</ButtonVue>
+				</NcButton>
 				<p class="confirmation__warning">
 					{{ confirmationText }}
 				</p>
@@ -57,12 +57,12 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'Confirmation',
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		conversationName: {
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 80ca7be25..1521f29e0 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<div class="wrapper">
-		<ButtonVue slot="trigger"
+		<NcButton slot="trigger"
 			v-tooltip.bottom="t('spreed', 'Create a new group conversation')"
 			type="tertiary"
 			class="toggle"
@@ -30,9 +30,9 @@
 			<template #icon>
 				<Plus :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 		<!-- New group form -->
-		<Modal v-if="modal"
+		<NcModal v-if="modal"
 			:container="container"
 			size="normal"
 			@close="closeModal">
@@ -77,54 +77,54 @@
 				placement are rendered depending on the current page -->
 				<div class="navigation">
 					<!-- First page -->
-					<ButtonVue v-if="page===0 && isPublic"
+					<NcButton v-if="page===0 && isPublic"
 						:disabled="disabled"
 						type="tertiary"
 						@click="handleCreateConversation">
 						{{ t('spreed', 'Create conversation') }}
-					</ButtonVue>
-					<ButtonVue v-if="page===0"
+					</NcButton>
+					<NcButton v-if="page===0"
 						type="primary"
 						:disabled="disabled"
 						class="navigation__button-right"
 						@click="handleSetConversationName">
 						{{ t('spreed', 'Add participants') }}
-					</ButtonVue>
+					</NcButton>
 					<!-- Second page -->
-					<ButtonVue v-if="page===1"
+					<NcButton v-if="page===1"
 						type="tertiary"
 						@click="handleClickBack">
 						{{ t('spreed', 'Back') }}
-					</ButtonVue>
-					<ButtonVue v-if="page===1"
+					</NcButton>
+					<NcButton v-if="page===1"
 						type="primary"
 						class="navigation__button-right"
 						@click="handleCreateConversation">
 						{{ t('spreed', 'Create conversation') }}
-					</ButtonVue>
+					</NcButton>
 					<!-- Third page -->
-					<ButtonVue v-if="page===2 && (error || isPublic)"
+					<NcButton v-if="page===2 && (error || isPublic)"
 						type="primary"
 						class="navigation__button-right"
 						@click="closeModal">
 						{{ t('spreed', 'Close') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</div>
-		</modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 
 import { CONVERSATION } from '../../../constants.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 import SetConversationName from './SetConversationName/SetConversationName.vue'
 import SetConversationType from './SetConversationType/SetConversationType.vue'
 import Confirmation from './Confirmation/Confirmation.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { addParticipant } from '../../../services/participantsService.js'
 import {
 	createPublicConversation,
@@ -148,11 +148,11 @@ export default {
 	},
 
 	components: {
-		Modal,
+		NcModal,
 		SetContacts,
 		SetConversationName,
 		SetConversationType,
-		ButtonVue,
+		NcButton,
 		Confirmation,
 		PasswordProtect,
 		ListableSettings,
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
index 7923781d0..338f9d0eb 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
@@ -31,18 +31,18 @@
 		<span class="contact-selection-bubble__username">
 			{{ displayName }}
 		</span>
-		<ButtonVue type="tertiary-no-background"
+		<NcButton type="tertiary-no-background"
 			:aria-label="removeLabel"
 			@click="removeParticipantFromSelection(participant)">
 			<template #icon>
 				<Close :size="16" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 	</div>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import AvatarWrapperSmall from '../../../../AvatarWrapper/AvatarWrapperSmall.vue'
 export default {
@@ -50,7 +50,7 @@ export default {
 
 	components: {
 		AvatarWrapperSmall,
-		ButtonVue,
+		NcButton,
 		Close,
 	},
 
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 973b898fe..7d922b742 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -30,7 +30,7 @@
 			type="text"
 			:placeholder="t('spreed', 'Search participants')"
 			@input="handleInput">
-		<ButtonVue v-if="isSearching"
+		<NcButton v-if="isSearching"
 			class="abort-search"
 			type="tertiary-no-background"
 			:aria-label="cancelSearchLabel"
@@ -38,7 +38,7 @@
 			<template #icon>
 				<Close :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 		<transition-group v-if="hasSelectedParticipants"
 			name="zoom"
 			tag="div"
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import CancelableRequest from '../../../../utils/cancelableRequest.js'
 import debounce from 'debounce'
@@ -71,7 +71,7 @@ import ContactSelectionBubble from './ContactSelectionBubble/ContactSelectionBub
 export default {
 	name: 'SetContacts',
 	components: {
-		ButtonVue,
+		NcButton,
 		Close,
 		ParticipantSearchResults,
 		ContactSelectionBubble,
diff --git a/src/components/LeftSidebar/SearchBox/SearchBox.vue b/src/components/LeftSidebar/SearchBox/SearchBox.vue
index f8169e141..de133f4af 100644
--- a/src/components/LeftSidebar/SearchBox/SearchBox.vue
+++ b/src/components/LeftSidebar/SearchBox/SearchBox.vue
@@ -28,7 +28,7 @@
 			type="text"
 			:placeHolder="placeholderText"
 			@keypress.enter.prevent="handleSubmit">
-		<ButtonVue v-if="isSearching"
+		<NcButton v-if="isSearching"
 			class="abort-search"
 			type="tertiary-no-background"
 			:aria-label="cancelSearchLabel"
@@ -36,19 +36,19 @@
 			<template #icon>
 				<Close :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 	</form>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import { EventBus } from '../../../services/EventBus.js'
 
 export default {
 	name: 'SearchBox',
 	components: {
-		ButtonVue,
+		NcButton,
 		Close,
 	},
 	props: {
diff --git a/src/components/MediaDevicesSelector.vue b/src/components/MediaDevicesSelector.vue
index f4b23c138..6a63b070f 100644
--- a/src/components/MediaDevicesSelector.vue
+++ b/src/components/MediaDevicesSelector.vue
@@ -29,7 +29,7 @@
 				:size="16" />
 		</div>
 
-		<Multiselect :id="deviceSelectorId"
+		<NcMultiselect :id="deviceSelectorId"
 			v-model="deviceSelectedOption"
 			:options="deviceOptions"
 			track-by="id"
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import Multiselect from '@nextcloud/vue/dist/Components/Multiselect.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import Microphone from 'vue-material-design-icons/Microphone.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 
@@ -50,7 +50,7 @@ export default {
 	name: 'MediaDevicesSelector',
 
 	components: {
-		Multiselect,
+		NcMultiselect,
 		Microphone,
 		VideoIcon,
 	},
diff --git a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
index 59a9d7e75..a7a17878b 100644
--- a/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
+++ b/src/components/MessagesList/MessagesGroup/AuthorAvatar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<Avatar v-if="isUser"
+	<NcAvatar v-if="isUser"
 		:disable-tooltip="true"
 		class="messages__avatar__icon"
 		:user="authorId"
@@ -46,13 +46,13 @@
 </template>
 
 <script>
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import { ATTENDEE } from '../../../constants.js'
 
 export default {
 	name: 'AuthorAvatar',
 	components: {
-		Avatar,
+		NcAvatar,
 	},
 	props: {
 		authorType: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index d46f99f01..11b7e835e 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -5,7 +5,7 @@ import { cloneDeep } from 'lodash'
 import { EventBus } from '../../../../services/EventBus.js'
 import storeConfig from '../../../../store/storeConfig.js'
 import { CONVERSATION, ATTENDEE, PARTICIPANT } from '../../../../constants.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 // Components
 import Check from 'vue-material-design-icons/Check.vue'
@@ -18,8 +18,8 @@ import Location from './MessagePart/Location.vue'
 import DefaultParameter from './MessagePart/DefaultParameter.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
 import Message from './Message.vue'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
 // needed because of https://github.com/vuejs/vue-test-utils/issues/1507
 const RichTextStub = {
@@ -585,7 +585,7 @@ describe('Message.vue', () => {
 			expect(wrapper.findComponent(MessageButtonsBar).exists()).toBe(true)
 
 			// actions are present and rendered when the buttonsBar is renderend
-			const actions = wrapper.findAllComponents({ name: 'Actions' })
+			const actions = wrapper.findAllComponents({ name: 'NcActions' })
 			expect(actions.length).toBe(2)
 
 			// Mouseleave
@@ -611,7 +611,7 @@ describe('Message.vue', () => {
 				localVue,
 				store,
 				stubs: {
-					ActionButton,
+					NcActionButton,
 					MessageButtonsBar,
 				},
 				propsData: messageProps,
@@ -666,13 +666,13 @@ describe('Message.vue', () => {
 
 			expect(wrapper.vm.showReloadButton).toBe(true)
 
-			const reloadButtonVue = wrapper.findComponent(ButtonVue)
-			expect(reloadButtonVue.exists()).toBe(true)
+			const reloadNcButton = wrapper.findComponent(NcButton)
+			expect(reloadNcButton.exists()).toBe(true)
 
 			const retryEvent = jest.fn()
 			EventBus.$on('retry-message', retryEvent)
 
-			await reloadButtonVue.vm.$emit('click')
+			await reloadNcButton.vm.$emit('click')
 
 			expect(retryEvent).toHaveBeenCalledWith(123)
 		})
@@ -850,11 +850,11 @@ describe('Message.vue', () => {
 				store,
 				propsData: messageProps,
 				stubs: {
-					EmojiPicker,
+					NcEmojiPicker,
 				},
 			})
 
-			const emojiPicker = wrapper.findComponent(EmojiPicker)
+			const emojiPicker = wrapper.findComponent(NcEmojiPicker)
 
 			expect(emojiPicker.vm).toBeUndefined()
 		})
@@ -878,7 +878,7 @@ describe('Message.vue', () => {
 				store,
 				propsData: messagePropsWithReactions,
 				stubs: {
-					EmojiPicker,
+					NcEmojiPicker,
 				},
 				mixins: [{
 					computed: {
@@ -889,7 +889,7 @@ describe('Message.vue', () => {
 				}],
 			})
 
-			const emojiPicker = wrapper.findComponent(EmojiPicker)
+			const emojiPicker = wrapper.findComponent(NcEmojiPicker)
 
 			emojiPicker.vm.$emit('select', '❤️')
 
@@ -923,7 +923,7 @@ describe('Message.vue', () => {
 			})
 
 			// Click reaction button upon having already reacted
-			await wrapper.find('.reaction-button').getComponent(ButtonVue).vm.$emit('click')
+			await wrapper.find('.reaction-button').getComponent(NcButton).vm.$emit('click')
 
 			await wrapper.vm.$nextTick()
 			await wrapper.vm.$nextTick()
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index cff768157..5e55dac43 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -79,13 +79,13 @@ the main body of the message as well as a quote.
 						@focus="showReloadButton = true"
 						@mouseleave="showReloadButton = true"
 						@blur="showReloadButton = true">
-						<ButtonVue v-if="sendingErrorCanRetry && showReloadButton"
+						<NcButton v-if="sendingErrorCanRetry && showReloadButton"
 							:aria-label="sendingErrorIconTooltip"
 							@click="handleRetry">
 							<template #icon>
 								<Reload :size="16" />
 							</template>
-						</ButtonVue>
+						</NcButton>
 						<AlertCircle v-else
 							:size="16" />
 					</div>
@@ -112,39 +112,39 @@ the main body of the message as well as a quote.
 			<div v-if="hasReactions"
 				class="message-body__reactions"
 				@mouseover="handleReactionsMouseOver">
-				<Popover v-for="reaction in Object.keys(simpleReactions)"
+				<NcPopover v-for="reaction in Object.keys(simpleReactions)"
 					:key="reaction"
 					:delay="200"
 					trigger="hover">
-					<ButtonVue v-if="simpleReactions[reaction]!== 0"
+					<NcButton v-if="simpleReactions[reaction]!== 0"
 						slot="trigger"
 						class="reaction-button"
 						:class="{'reaction-button__has-reacted': userHasReacted(reaction)}"
 						@click="handleReactionClick(reaction)">
 						{{ reaction }} {{ simpleReactions[reaction] }}
-					</ButtonVue>
+					</NcButton>
 					<div v-if="detailedReactions" class="reaction-details">
 						<span>{{ getReactionSummary(reaction) }}</span>
 					</div>
-				</Popover>
+				</NcPopover>
 
 				<!-- More reactions picker -->
-				<EmojiPicker v-if="canReact && showMessageButtonsBar"
+				<NcEmojiPicker v-if="canReact && showMessageButtonsBar"
 					:per-line="5"
 					:container="`#message_${id}`"
 					@select="handleReactionClick">
-					<ButtonVue class="reaction-button">
+					<NcButton class="reaction-button">
 						<template #icon>
 							<EmoticonOutline :size="15" />
 						</template>
-					</ButtonVue>
-				</EmojiPicker>
-				<ButtonVue v-else-if="canReact"
+					</NcButton>
+				</NcEmojiPicker>
+				<NcButton v-else-if="canReact"
 					class="reaction-button">
 					<template #icon>
 						<EmoticonOutline :size="15" />
 					</template>
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</div>
 
@@ -172,7 +172,7 @@ the main body of the message as well as a quote.
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import CallButton from '../../../TopBar/CallButton.vue'
 import DeckCard from './MessagePart/DeckCard.vue'
@@ -193,9 +193,9 @@ import moment from '@nextcloud/moment'
 import Location from './MessagePart/Location.vue'
 import Contact from './MessagePart/Contact.vue'
 import MessageButtonsBar from './MessageButtonsBar/MessageButtonsBar.vue'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
-import Popover from '@nextcloud/vue/dist/Components/Popover.js'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import { showError, showSuccess, showWarning, TOAST_DEFAULT_TIMEOUT } from '@nextcloud/dialogs'
 import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
 import Poll from './MessagePart/Poll.vue'
@@ -208,7 +208,7 @@ export default {
 	},
 
 	components: {
-		ButtonVue,
+		NcButton,
 		CallButton,
 		Quote,
 		RichText,
@@ -217,9 +217,9 @@ export default {
 		CheckAll,
 		Reload,
 		MessageButtonsBar,
-		EmojiPicker,
+		NcEmojiPicker,
 		EmoticonOutline,
-		Popover,
+		NcPopover,
 	},
 
 	mixins: [
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue
index 9f649abb1..55c0be86c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/Forwarder.vue
@@ -34,43 +34,43 @@
 		<!-- Second step of the flow: confirmation modal that gives the user
 		the possibility to direclty route to the conversation to which the
 		message has been forwarded -->
-		<Modal v-else
+		<NcModal v-else
 			@close="handleClose">
 			<div class="forwarder">
-				<EmptyContent icon="icon-checkmark" class="forwarded-confirmation__emptycontent">
+				<NcEmptyContent icon="icon-checkmark" class="forwarded-confirmation__emptycontent">
 					<template #desc>
 						{{ t('spreed', 'The message has been forwarded to {selectedConversationName}', { selectedConversationName }) }}
 					</template>
-				</EmptyContent>
+				</NcEmptyContent>
 				<div class="forwarded-confirmation__navigation">
-					<ButtonVue type="tertiary" @click="handleClose">
+					<NcButton type="tertiary" @click="handleClose">
 						{{ t('spreed', 'Dismiss') }}
-					</ButtonVue>
-					<ButtonVue type="primary" @click="openConversation">
+					</NcButton>
+					<NcButton type="primary" @click="openConversation">
 						{{ t('spreed', 'Go to conversation') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</div>
-		</Modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 import RoomSelector from '../../../../../views/RoomSelector.vue'
-import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import { showError } from '@nextcloud/dialogs'
 import cloneDeep from 'lodash/cloneDeep.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'Forwarder',
 
 	components: {
 		RoomSelector,
-		EmptyContent,
-		Modal,
-		ButtonVue,
+		NcEmptyContent,
+		NcModal,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
index e56524f85..30137b2c2 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
@@ -4,8 +4,8 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { cloneDeep } from 'lodash'
 import storeConfig from '../../../../../store/storeConfig.js'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import { findActionButton } from '../../../../../test-helpers.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import { findNcActionButton } from '../../../../../test-helpers.js'
 import MessageButtonsBar from './../MessageButtonsBar/MessageButtonsBar.vue'
 
 describe('MessageButtonsBar.vue', () => {
@@ -89,12 +89,12 @@ describe('MessageButtonsBar.vue', () => {
 					localVue,
 					store,
 					stubs: {
-						ActionButton,
+						NcActionButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findActionButton(wrapper, 'Reply')
+				const actionButton = findNcActionButton(wrapper, 'Reply')
 				expect(actionButton.exists()).toBe(true)
 				expect(actionButton.isVisible()).toBe(true)
 				await actionButton.find('button').trigger('click')
@@ -122,12 +122,12 @@ describe('MessageButtonsBar.vue', () => {
 					localVue,
 					store,
 					stubs: {
-						ActionButton,
+						NcActionButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findActionButton(wrapper, 'Reply')
+				const actionButton = findNcActionButton(wrapper, 'Reply')
 				expect(actionButton.isVisible()).toBe(false)
 			})
 		})
@@ -150,12 +150,12 @@ describe('MessageButtonsBar.vue', () => {
 						},
 					},
 					stubs: {
-						ActionButton,
+						NcActionButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findActionButton(wrapper, 'Reply privately')
+				const actionButton = findNcActionButton(wrapper, 'Reply privately')
 				expect(actionButton.exists()).toBe(true)
 
 				createOneToOneConversation.mockResolvedValueOnce({
@@ -184,12 +184,12 @@ describe('MessageButtonsBar.vue', () => {
 					localVue,
 					store,
 					stubs: {
-						ActionButton,
+						NcActionButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findActionButton(wrapper, 'Reply privately')
+				const actionButton = findNcActionButton(wrapper, 'Reply privately')
 				expect(actionButton.exists()).toBe(visible)
 			}
 
@@ -228,12 +228,12 @@ describe('MessageButtonsBar.vue', () => {
 					localVue,
 					store,
 					stubs: {
-						ActionButton,
+						NcActionButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findActionButton(wrapper, 'Delete')
+				const actionButton = findNcActionButton(wrapper, 'Delete')
 				expect(actionButton.exists()).toBe(true)
 
 				await actionButton.find('button').trigger('click')
@@ -263,12 +263,12 @@ describe('MessageButtonsBar.vue', () => {
 					localVue,
 					store,
 					stubs: {
-						ActionButton,
+						NcActionButton,
 					},
 					propsData: messageProps,
 				})
 
-				const actionButton = findActionButton(wrapper, 'Delete')
+				const actionButton = findNcActionButton(wrapper, 'Delete')
 				expect(actionButton.exists()).toBe(visible)
 			}
 
@@ -340,13 +340,13 @@ describe('MessageButtonsBar.vue', () => {
 				localVue,
 				store,
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 
 				propsData: messageProps,
 			})
 
-			const actionButton = findActionButton(wrapper, 'Mark as unread')
+			const actionButton = findNcActionButton(wrapper, 'Mark as unread')
 			expect(actionButton.exists()).toBe(true)
 
 			await actionButton.find('button').trigger('click')
@@ -384,13 +384,13 @@ describe('MessageButtonsBar.vue', () => {
 					$copyText: copyTextMock,
 				},
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 
 				propsData: messageProps,
 			})
 
-			const actionButton = findActionButton(wrapper, 'Copy message link')
+			const actionButton = findNcActionButton(wrapper, 'Copy message link')
 			expect(actionButton.exists()).toBe(true)
 
 			await actionButton.find('button').trigger('click')
@@ -417,12 +417,12 @@ describe('MessageButtonsBar.vue', () => {
 				localVue,
 				store,
 				stubs: {
-					ActionButton,
+					NcActionButton,
 				},
 				propsData: messageProps,
 			})
 
-			const actionButton = findActionButton(wrapper, 'first action')
+			const actionButton = findNcActionButton(wrapper, 'first action')
 			expect(actionButton.exists()).toBe(true)
 			await actionButton.find('button').trigger('click')
 
@@ -430,7 +430,7 @@ describe('MessageButtonsBar.vue', () => {
 				apiDummyData: 1,
 			},)
 
-			const actionButton2 = findActionButton(wrapper, 'second action')
+			const actionButton2 = findNcActionButton(wrapper, 'second action')
 			expect(actionButton2.exists()).toBe(true)
 			await actionButton2.find('button').trigger('click')
 
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 68948079e..81bdd8ea9 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -25,111 +25,111 @@
 		class="message-buttons-bar"
 		:class="{ 'message-buttons-bar--last-read' : isLastRead }">
 		<template v-if="!isReactionsMenuOpen">
-			<ButtonVue v-if="canReact"
+			<NcButton v-if="canReact"
 				type="tertiary"
 				:aria-label="t('spreed', 'Add a reaction to this message')"
 				@click="openReactionsMenu">
 				<template #icon>
 					<EmoticonOutline :size="20" />
 				</template>
-			</ButtonVue>
-			<Actions v-show="isReplyable">
-				<ActionButton @click.stop="handleReply">
+			</NcButton>
+			<NcActions v-show="isReplyable">
+				<NcActionButton @click.stop="handleReply">
 					<template #icon>
 						<Reply :size="16" />
 					</template>
 					{{ t('spreed', 'Reply') }}
-				</ActionButton>
-			</Actions>
-			<Actions :force-menu="true"
+				</NcActionButton>
+			</NcActions>
+			<NcActions :force-menu="true"
 				:container="`#message_${id}`"
 				:boundaries-element="containerElement"
 				@open="onMenuOpen"
 				@close="onMenuClose">
-				<ActionButton v-if="isPrivateReplyable"
+				<NcActionButton v-if="isPrivateReplyable"
 					icon="icon-user"
 					:close-after-click="true"
 					@click.stop="handlePrivateReply">
 					{{ t('spreed', 'Reply privately') }}
-				</ActionButton>
-				<ActionButton icon="icon-external"
+				</NcActionButton>
+				<NcActionButton icon="icon-external"
 					:close-after-click="true"
 					@click.stop.prevent="handleCopyMessageLink">
 					{{ t('spreed', 'Copy message link') }}
-				</ActionButton>
-				<ActionButton :close-after-click="true"
+				</NcActionButton>
+				<NcActionButton :close-after-click="true"
 					@click.stop="handleMarkAsUnread">
 					<template #icon>
 						<EyeOffOutline :size="16" />
 					</template>
 					{{ t('spreed', 'Mark as unread') }}
-				</ActionButton>
-				<ActionLink v-if="linkToFile"
+				</NcActionButton>
+				<NcActionLink v-if="linkToFile"
 					:href="linkToFile">
 					<File slot="icon"
 						:size="20" />
 					{{ t('spreed', 'Go to file') }}
-				</ActionLink>
-				<ActionButton v-if="!isCurrentGuest && !isFileShare && !isDeletedMessage"
+				</NcActionLink>
+				<NcActionButton v-if="!isCurrentGuest && !isFileShare && !isDeletedMessage"
 					:close-after-click="true"
 					@click.stop="showForwarder = true">
 					<Share slot="icon"
 						:size="16" />
 					{{ t('spreed', 'Forward message') }}
-				</ActionButton>
-				<ActionSeparator v-if="messageActions.length > 0" />
+				</NcActionButton>
+				<NcActionSeparator v-if="messageActions.length > 0" />
 				<template v-for="action in messageActions">
-					<ActionButton :key="action.label"
+					<NcActionButton :key="action.label"
 						:icon="action.icon"
 						:close-after-click="true"
 						@click="action.callback(messageApiData)">
 						{{ action.label }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
 				<template v-if="isDeleteable">
-					<ActionSeparator />
-					<ActionButton icon="icon-delete"
+					<NcActionSeparator />
+					<NcActionButton icon="icon-delete"
 						:close-after-click="true"
 						@click.stop="handleDelete">
 						{{ t('spreed', 'Delete') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
-			</Actions>
+			</NcActions>
 		</template>
 
 		<template v-if="isReactionsMenuOpen">
-			<ButtonVue type="tertiary"
+			<NcButton type="tertiary"
 				:aria-label="t('spreed', 'Close reactions menu')"
 				@click="closeReactionsMenu">
 				<template #icon>
 					<ArrowLeft :size="20" />
 				</template>
-			</ButtonVue>
-			<ButtonVue type="tertiary"
+			</NcButton>
+			<NcButton type="tertiary"
 				:aria-label="t('spreed', 'React with {emoji}', { emoji: '👍' })"
 				@click="handleReactionClick('👍')">
 				<template #icon>
 					<span>👍</span>
 				</template>
-			</ButtonVue>
-			<ButtonVue type="tertiary"
+			</NcButton>
+			<NcButton type="tertiary"
 				:aria-label="t('spreed', 'React with {emoji}', { emoji: '❤' })"
 				@click="handleReactionClick('❤️')">
 				<template #icon>
 					<span>❤️</span>
 				</template>
-			</ButtonVue>
-			<EmojiPicker :container="`#message_${id} .message-buttons-bar`"
+			</NcButton>
+			<NcEmojiPicker :container="`#message_${id} .message-buttons-bar`"
 				@select="handleReactionClick"
 				@after-show="onEmojiPickerOpen"
 				@after-hide="onEmojiPickerClose">
-				<ButtonVue type="tertiary"
+				<NcButton type="tertiary"
 					:aria-label="t('spreed', 'React with another emoji')">
 					<template #icon>
 						<Plus :size="20" />
 					</template>
-				</ButtonVue>
-			</EmojiPicker>
+				</NcButton>
+			</NcEmojiPicker>
 		</template>
 		<Forwarder v-if="showForwarder"
 			:message-object="messageObject"
@@ -139,10 +139,10 @@
 
 <script>
 import { PARTICIPANT, CONVERSATION, ATTENDEE } from '../../../../../constants.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import EyeOffOutline from 'vue-material-design-icons/EyeOffOutline.vue'
 import EmoticonOutline from 'vue-material-design-icons/EmoticonOutline.vue'
 import File from 'vue-material-design-icons/File.vue'
@@ -158,27 +158,27 @@ import {
 	showSuccess,
 } from '@nextcloud/dialogs'
 import Forwarder from './Forwarder.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
 export default {
 	name: 'MessageButtonsBar',
 
 	components: {
-		Actions,
-		ActionButton,
-		ActionLink,
+		NcActions,
+		NcActionButton,
+		NcActionLink,
 		EyeOffOutline,
 		File,
 		Share,
-		ActionSeparator,
+		NcActionSeparator,
 		Forwarder,
-		ButtonVue,
+		NcButton,
 		EmoticonOutline,
 		ArrowLeft,
 		Plus,
 		Reply,
-		EmojiPicker,
+		NcEmojiPicker,
 	},
 
 	props: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
index 5161febdd..9e800d70c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js
@@ -6,7 +6,7 @@ import storeConfig from '../../../../../store/storeConfig.js'
 import { imagePath, generateRemoteUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import FilePreview from './FilePreview.vue'
 
 jest.mock('@nextcloud/initial-state', () => ({
@@ -169,7 +169,7 @@ describe('FilePreview.vue', () => {
 				expect(wrapper.element.tagName).toBe('DIV')
 				expect(wrapper.find('img').attributes('src')).toBe('blob:XYZ')
 
-				const progressEl = wrapper.findComponent({ name: 'ProgressBar' })
+				const progressEl = wrapper.findComponent({ name: 'NcProgressBar' })
 				expect(progressEl.exists()).toBe(true)
 				expect(progressEl.props('value')).toBe(85)
 
@@ -518,7 +518,7 @@ describe('FilePreview.vue', () => {
 			await imageMock.onload()
 
 			expect(wrapper.element.tagName).toBe('DIV')
-			await wrapper.findComponent(ButtonVue).trigger('click')
+			await wrapper.findComponent(NcButton).trigger('click')
 			expect(wrapper.emitted()['remove-file']).toStrictEqual([['123']])
 		})
 	})
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index b0c0e09fa..8b884a4fa 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -52,7 +52,7 @@
 		<span v-if="isLoading"
 			v-tooltip="previewTooltip"
 			class="preview loading" />
-		<ButtonVue v-if="isUploadEditor"
+		<NcButton v-if="isUploadEditor"
 			class="remove-file"
 			tabindex="1"
 			type="primary"
@@ -61,8 +61,8 @@
 			<template #icon>
 				<Close />
 			</template>
-		</ButtonVue>
-		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
+		</NcButton>
+		<NcProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
 		<div v-if="shouldShowFileDetail" class="name-container">
 			{{ fileDetail }}
 		</div>
@@ -71,14 +71,14 @@
 
 <script>
 import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router'
-import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar.js'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { encodePath } from '@nextcloud/paths'
 import AudioPlayer from './AudioPlayer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -91,10 +91,10 @@ export default {
 	name: 'FilePreview',
 
 	components: {
-		ProgressBar,
+		NcProgressBar,
 		Close,
 		PlayCircleOutline,
-		ButtonVue,
+		NcButton,
 	},
 
 	directives: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
index 3a79cb353..a133bd629 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Mention.vue
@@ -21,15 +21,15 @@
 
 <template>
 	<div class="mention">
-		<UserBubble v-if="isMentionToAll"
+		<NcUserBubble v-if="isMentionToAll"
 			:display-name="name"
 			:avatar-image="'icon-group-forced-white'"
 			:primary="true" />
-		<UserBubble v-else-if="isMentionToGuest"
+		<NcUserBubble v-else-if="isMentionToGuest"
 			:display-name="name"
 			:avatar-image="'icon-user-forced-white'"
 			:primary="isCurrentGuest" />
-		<UserBubble v-else
+		<NcUserBubble v-else
 			:display-name="name"
 			:user="id"
 			:primary="isCurrentUser" />
@@ -38,13 +38,13 @@
 
 <script>
 
-import UserBubble from '@nextcloud/vue/dist/Components/UserBubble.js'
+import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 
 export default {
 	name: 'Mention',
 
 	components: {
-		UserBubble,
+		NcUserBubble,
 	},
 
 	props: {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
index 15583dc37..e7092aa2b 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Poll.vue
@@ -38,7 +38,7 @@
 		</a>
 
 		<!-- voting and results dialog -->
-		<Modal v-if="vote !== undefined && showModal"
+		<NcModal v-if="vote !== undefined && showModal"
 			size="small"
 			@close="showModal = false">
 			<div class="poll__modal">
@@ -55,7 +55,7 @@
 					<!-- options -->
 					<div class="poll__modal-options">
 						<template v-if="checkboxRadioSwitchType === 'radio'">
-							<CheckboxRadioSwitch v-for="(option, index) in options"
+							<NcCheckboxRadioSwitch v-for="(option, index) in options"
 								:key="'radio' + index"
 								:checked.sync="vote"
 								class="poll__option"
@@ -63,28 +63,28 @@
 								:type="checkboxRadioSwitchType"
 								name="answerType">
 								{{ option }}
-							</CheckboxRadioSwitch>
+							</NcCheckboxRadioSwitch>
 						</template>
 						<template v-else>
-							<CheckboxRadioSwitch v-for="(option, index) in options"
+							<NcCheckboxRadioSwitch v-for="(option, index) in options"
 								:key="'checkbox' + index"
 								:checked.sync="vote"
 								:value="index.toString()"
 								:type="checkboxRadioSwitchType"
 								name="answerType">
 								{{ option }}
-							</CheckboxRadioSwitch>
+							</NcCheckboxRadioSwitch>
 						</template>
 					</div>
 
 					<div class="poll__modal-actions">
-						<ButtonVue type="tertiary" @click="dismissModal">
+						<NcButton type="tertiary" @click="dismissModal">
 							{{ t('spreed', 'Dismiss') }}
-						</ButtonVue>
+						</NcButton>
 						<!-- create poll button-->
-						<ButtonVue type="primary" :disabled="!canSubmitVote" @click="submitVote">
+						<NcButton type="primary" :disabled="!canSubmitVote" @click="submitVote">
 							{{ t('spreed', 'Submit') }}
-						</ButtonVue>
+						</NcButton>
 					</div>
 				</template>
 
@@ -112,35 +112,35 @@
 									{{ getVotePercentage(index) + '%' }}
 								</p>
 							</div>
-							<ProgressBar :value="getVotePercentage(index)" size="medium" />
+							<NcProgressBar :value="getVotePercentage(index)" size="medium" />
 						</div>
 					</div>
 					<div v-if="pollIsOpen"
 						class="poll__modal-actions">
-						<ButtonVue type="tertiary"
+						<NcButton type="tertiary"
 							@click="modalPage = 'voting'">
 							{{ t('spreed', 'Back') }}
-						</ButtonVue>
+						</NcButton>
 						<!-- create poll button-->
-						<ButtonVue v-if="canClosePoll"
+						<NcButton v-if="canClosePoll"
 							type="error"
 							@click="closePoll">
 							{{ t('spreed', 'Close poll') }}
-						</ButtonVue>
+						</NcButton>
 					</div>
 				</template>
 			</div>
-		</modal>
+		</NcModal>
 	</div>
 </template>
 
 <script>
 
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import PollIcon from 'vue-material-design-icons/Poll.vue'
-import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar.js'
+import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 import { PARTICIPANT } from '../../../../../constants.js'
 
 export default {
@@ -148,11 +148,11 @@ export default {
 	name: 'Poll',
 
 	components: {
-		CheckboxRadioSwitch,
-		Modal,
-		ButtonVue,
+		NcCheckboxRadioSwitch,
+		NcModal,
+		NcButton,
 		PollIcon,
-		ProgressBar,
+		NcProgressBar,
 	},
 
 	props: {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index bb21e8e47..c81c407ed 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -49,7 +49,7 @@ get the messagesList array and loop through the list to generate the messages.
 				:count="15" />
 		</template>
 		<transition name="fade">
-			<ButtonVue v-show="!isChatScrolledToBottom"
+			<NcButton v-show="!isChatScrolledToBottom"
 				type="secondary"
 				:aria-label="scrollToBottomAriaLabel"
 				class="scroll-to-bottom"
@@ -57,7 +57,7 @@ get the messagesList array and loop through the list to generate the messages.
 				<template #icon>
 					<ChevronDown :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</transition>
 	</div>
 </template>
@@ -74,7 +74,7 @@ import { EventBus } from '../../services/EventBus.js'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import uniqueId from 'lodash/uniqueId.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'MessagesList',
@@ -82,7 +82,7 @@ export default {
 		LoadingPlaceholder,
 		MessagesGroup,
 		ChevronDown,
-		ButtonVue,
+		NcButton,
 	},
 
 	mixins: [
diff --git a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
index 9d2e3d5c1..b81aacf6d 100644
--- a/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
+++ b/src/components/NewMessageForm/AdvancedInput/AdvancedInput.vue
@@ -30,7 +30,7 @@
 		:allow-spaces="false"
 		@at="handleAtEvent">
 		<template #item="scope">
-			<Avatar v-if="isMentionToAll(scope.item.id)"
+			<NcAvatar v-if="isMentionToAll(scope.item.id)"
 				:size="44"
 				:icon-class="'icon-group-forced-white'"
 				:disable-tooltip="true"
@@ -41,7 +41,7 @@
 				:style="getGuestAvatarStyle()">
 				{{ getFirstLetterOfGuestName(scope.item.label) }}
 			</div>
-			<Avatar v-else
+			<NcAvatar v-else
 				:key="scope.item.source + '#' + scope.item.id"
 				:size="44"
 				:user="atRemoveQuotesFromUserIdForAvatars(scope.item.id)"
@@ -98,7 +98,7 @@ import VueAtReparenter from '../../../mixins/vueAtReparenter.js'
 import { EventBus } from '../../../services/EventBus.js'
 import { searchPossibleMentions } from '../../../services/mentionsService.js'
 import { fetchClipboardContent } from '../../../utils/clipboard.js'
-import Avatar from '@nextcloud/vue/dist/Components/Avatar.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import Mention from '../../MessagesList/MessagesGroup/Message/MessagePart/Mention.vue'
 import escapeHtml from 'escape-html'
 import debounce from 'debounce'
@@ -166,7 +166,7 @@ export default {
 	name: 'AdvancedInput',
 	components: {
 		At,
-		Avatar,
+		NcAvatar,
 		Mention,
 	},
 	mixins: [
diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
index 9444b892d..584d5d03a 100644
--- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
+++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<div class="audio-recorder">
-		<ButtonVue v-if="!isRecording"
+		<NcButton v-if="!isRecording"
 			v-tooltip.auto="{
 				content: startRecordingTooltip,
 				delay: tooltipDelay,
@@ -33,9 +33,9 @@
 			<template #icon>
 				<Microphone :size="16" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 		<div v-else class="wrapper">
-			<ButtonVue v-tooltip.auto="{
+			<NcButton v-tooltip.auto="{
 					content: abortRecordingTooltip,
 					delay: tooltipDelay,
 				}"
@@ -45,13 +45,13 @@
 				<template #icon>
 					<Close :size="16" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 			<div class="audio-recorder__info">
 				<div class="recording-indicator fadeOutIn" />
 				<span class="time">
 					{{ parsedRecordTime }}</span>
 			</div>
-			<ButtonVue v-tooltip.auto="{
+			<NcButton v-tooltip.auto="{
 					content: stopRecordingTooltip,
 					delay: tooltipDelay,
 				}"
@@ -62,7 +62,7 @@
 				<template #icon>
 					<Check :size="16" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</div>
 	</div>
 </template>
@@ -75,7 +75,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { mediaDevicesManager } from '../../../utils/webrtc/index.js'
 import { showError } from '@nextcloud/dialogs'
 import { MediaRecorder } from 'extendable-media-recorder'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'AudioRecorder',
@@ -84,7 +84,7 @@ export default {
 		Microphone,
 		Close,
 		Check,
-		ButtonVue,
+		NcButton,
 	},
 
 	directives: {
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 40f63249d..28937d529 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -37,7 +37,7 @@
 				<!-- Attachments menu -->
 				<div v-if="canUploadFiles || canShareFiles"
 					class="new-message-form__upload-menu">
-					<Actions ref="attachmentsMenu"
+					<NcActions ref="attachmentsMenu"
 						:container="container"
 						:boundaries-element="containerElement"
 						:disabled="disabled"
@@ -45,19 +45,19 @@
 						:aria-haspopup="true">
 						<Paperclip slot="icon"
 							:size="16" />
-						<ActionButton v-if="canUploadFiles"
+						<NcActionButton v-if="canUploadFiles"
 							:close-after-click="true"
 							icon="icon-upload"
 							@click.prevent="clickImportInput">
 							{{ t('spreed', 'Upload new files') }}
-						</ActionButton>
-						<ActionButton v-if="canShareFiles"
+						</NcActionButton>
+						<NcActionButton v-if="canShareFiles"
 							:close-after-click="true"
 							icon="icon-folder"
 							@click.prevent="handleFileShare">
 							{{ t('spreed', 'Share from Files') }}
-						</ActionButton>
-						<ActionButton v-if="canCreatePoll"
+						</NcActionButton>
+						<NcActionButton v-if="canCreatePoll"
 							:close-after-click="true"
 							@click.prevent="toggleSimplePollsEditor(true)">
 							<Poll slot="icon"
@@ -65,34 +65,34 @@
 								decorative
 								title="" />
 							{{ t('spreed', 'Create new poll') }}
-						</ActionButton>
-					</Actions>
+						</NcActionButton>
+					</NcActions>
 				</div>
 				<!-- Input area -->
 				<div class="new-message-form__input">
 					<div class="new-message-form__emoji-picker">
-						<EmojiPicker v-if="!disabled"
+						<NcEmojiPicker v-if="!disabled"
 							:container="container"
 							:close-on-select="false"
 							@select="addEmoji">
-							<ButtonVue :disabled="disabled"
+							<NcButton :disabled="disabled"
 								:aria-label="t('spreed', 'Add emoji')"
 								type="tertiary-no-background"
 								:aria-haspopup="true">
 								<template #icon>
 									<EmoticonOutline :size="16" />
 								</template>
-							</ButtonVue>
-						</EmojiPicker>
+							</NcButton>
+						</NcEmojiPicker>
 						<!-- Disabled emoji picker placeholder button -->
-						<ButtonVue v-else
+						<NcButton v-else
 							type="tertiary"
 							:aria-label="t('spreed', 'Add emoji')"
 							:disabled="true">
 							<template #icon>
 								<EmoticonOutline :size="16" />
 							</template>
-						</ButtonVue>
+						</NcButton>
 					</div>
 					<div v-if="messageToBeReplied" class="new-message-form__quote">
 						<Quote :is-new-message-form-quote="true"
@@ -116,19 +116,19 @@
 					@audio-file="handleAudioFile" />
 				<!-- Send buttons -->
 				<template v-else>
-					<Actions :force-menu="true">
+					<NcActions :force-menu="true">
 						<!-- Silent send -->
-						<ActionButton :close-after-click="true"
+						<NcActionButton :close-after-click="true"
 							icon="icon-upload"
 							:title="t('spreed', 'Send without notification')"
 							@click.prevent="handleSubmit({ silent: true })">
 							{{ silentSendInfo }}
 							<BellOff slot="icon"
 								:size="16" />
-						</ActionButton>
-					</Actions>
+						</NcActionButton>
+					</NcActions>
 					<!-- Send -->
-					<ButtonVue :disabled="disabled"
+					<NcButton :disabled="disabled"
 						type="tertiary"
 						native-type="submit"
 						:title="t('spreed', 'Send message')"
@@ -137,7 +137,7 @@
 						<template #icon>
 							<Send :size="16" />
 						</template>
-					</ButtonVue>
+					</NcButton>
 				</template>
 			</form>
 		</div>
@@ -152,10 +152,10 @@ import AdvancedInput from './AdvancedInput/AdvancedInput.vue'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import { getCapabilities } from '@nextcloud/capabilities'
 import Quote from '../Quote.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import EmojiPicker from '@nextcloud/vue/dist/Components/EmojiPicker.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { CONVERSATION, PARTICIPANT } from '../../constants.js'
@@ -179,11 +179,11 @@ export default {
 	components: {
 		AdvancedInput,
 		Quote,
-		Actions,
-		ActionButton,
-		ButtonVue,
+		NcActions,
+		NcActionButton,
+		NcButton,
 		Paperclip,
-		EmojiPicker,
+		NcEmojiPicker,
 		EmoticonOutline,
 		Send,
 		AudioRecorder,
@@ -476,7 +476,7 @@ export default {
 		},
 
 		/**
-		 * Clicks the hidden file input when clicking the correspondent ActionButton,
+		 * Clicks the hidden file input when clicking the correspondent NcActionButton,
 		 * thus opening the file-picker
 		 */
 		clickImportInput() {
diff --git a/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue b/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue
index 1c7ea5f8e..2dedfb6ee 100644
--- a/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue
+++ b/src/components/NewMessageForm/SimplePollsEditor/PollOption.vue
@@ -22,29 +22,29 @@
 
 <template>
 	<form class="poll-option">
-		<TextField class="poll-option__input" v-bind="$attrs" v-on="$listeners" />
-		<ButtonVue v-if="canDelete"
+		<NcTextField class="poll-option__input" v-bind="$attrs" v-on="$listeners" />
+		<NcButton v-if="canDelete"
 			type="tertiary-no-background"
 			@click="deleteOption">
 			<Close slot="icon"
 				decorative
 				title=""
 				:size="20" />
-		</ButtonVue>
+		</NcButton>
 	</form>
 </template>
 
 <script>
-import TextField from '@nextcloud/vue/dist/Components/TextField.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Close from 'vue-material-design-icons/Close.vue'
 
 export default {
 	name: 'PollOption',
 
 	components: {
-		TextField,
-		ButtonVue,
+		NcTextField,
+		NcButton,
 		Close,
 	},
 
diff --git a/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue b/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue
index 72a45ade4..a54ebdecf 100644
--- a/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue
+++ b/src/components/NewMessageForm/SimplePollsEditor/SimplePollsEditor.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<Modal size="small" v-on="$listeners">
+	<NcModal size="small" v-on="$listeners">
 		<div class="simple-polls-editor">
 			<h2>{{ t('spreed', 'Create new poll') }}</h2>
 
@@ -29,7 +29,7 @@
 			<p class="simple-polls-editor__caption">
 				{{ t('spreed', 'Question') }}
 			</p>
-			<TextField :value.sync="pollQuestion" :placeholder="t('spreed', 'Ask a question ')" v-on="$listeners" />
+			<NcTextField :value.sync="pollQuestion" :placeholder="t('spreed', 'Ask a question ')" v-on="$listeners" />
 
 			<!-- Poll options -->
 			<p class="simple-polls-editor__caption">
@@ -44,10 +44,10 @@
 				@delete-option="deleteOption(index)" />
 
 			<!-- Add options -->
-			<ButtonVue class="simple-polls-editor__add-more" type="tertiary-no-background" @click="addOption">
+			<NcButton class="simple-polls-editor__add-more" type="tertiary-no-background" @click="addOption">
 				<Plus slot="icon" />
 				{{ t('spreed', 'Add answer') }}
-			</ButtonVue>
+			</NcButton>
 
 			<!-- Poll settings -->
 			<p class="simple-polls-editor__caption">
@@ -61,38 +61,38 @@
 					{{ t('spreed', 'Multiple answers') }}
 				</CheckBoxRadioSwitch>
 				<div class="simple-polls-editor__actions">
-					<ButtonVue type="tertiary" @click="dismissEditor">
+					<NcButton type="tertiary" @click="dismissEditor">
 						{{ t('spreed', 'Dismiss') }}
-					</ButtonVue>
+					</NcButton>
 					<!-- create poll button-->
-					<ButtonVue type="primary" @click="createPoll">
+					<NcButton type="primary" @click="createPoll">
 						{{ t('spreed', 'Create poll') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
-import CheckBoxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import CheckBoxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import PollOption from './PollOption.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
-import TextField from '@nextcloud/vue/dist/Components/TextField.js'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import pollService from '../../../services/pollService.js'
 
 export default {
 	name: 'SimplePollsEditor',
 
 	components: {
-		Modal,
+		NcModal,
 		CheckBoxRadioSwitch,
-		ButtonVue,
+		NcButton,
 		PollOption,
 		Plus,
-		TextField,
+		NcTextField,
 	},
 
 	props: {
diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
index 266488f2b..090789cce 100644
--- a/src/components/PermissionsEditor/PermissionsEditor.vue
+++ b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -20,50 +20,50 @@
 -->
 
 <template>
-	<Modal size="small"
+	<NcModal size="small"
 		v-on="$listeners">
 		<div class="wrapper">
 			<template v-if="!loading">
 				<!-- eslint-disable-next-line vue/no-v-html -->
 				<p class="title" v-html="modalTitle" />
 				<form @submit.prevent="handleSubmitPermissions">
-					<CheckboxRadioSwitch ref="callStart"
+					<NcCheckboxRadioSwitch ref="callStart"
 						:checked.sync="callStart"
 						class="checkbox">
 						{{ t('spreed', 'Start a call') }}
-					</CheckboxRadioSwitch>
-					<CheckboxRadioSwitch ref="lobbyIgnore"
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch ref="lobbyIgnore"
 						:checked.sync="lobbyIgnore"
 						class="checkbox">
 						{{ t('spreed', 'Skip the lobby') }}
-					</CheckboxRadioSwitch>
-					<CheckboxRadioSwitch ref="chatMessagesAndReactions"
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch ref="chatMessagesAndReactions"
 						:checked.sync="chatMessagesAndReactions"
 						class="checkbox">
 						{{ t('spreed', 'Can post messages and reactions') }}
-					</CheckboxRadioSwitch>
-					<CheckboxRadioSwitch ref="publishAudio"
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch ref="publishAudio"
 						:checked.sync="publishAudio"
 						class="checkbox">
 						{{ t('spreed', 'Enable the microphone') }}
-					</CheckboxRadioSwitch>
-					<CheckboxRadioSwitch ref="publishVideo"
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch ref="publishVideo"
 						:checked.sync="publishVideo"
 						class="checkbox">
 						{{ t('spreed', 'Enable the camera') }}
-					</CheckboxRadioSwitch>
-					<CheckboxRadioSwitch ref="publishScreen"
+					</NcCheckboxRadioSwitch>
+					<NcCheckboxRadioSwitch ref="publishScreen"
 						:checked.sync="publishScreen"
 						class="checkbox">
 						{{ t('spreed', 'Share the screen') }}
-					</CheckboxRadioSwitch>
-					<ButtonVue ref="submit"
+					</NcCheckboxRadioSwitch>
+					<NcButton ref="submit"
 						native-type="submit"
 						class="button-update-permission"
 						type="primary"
 						:disabled="submitButtonDisabled">
 						{{ t('spreed', 'Update permissions') }}
-					</ButtonVue>
+					</NcButton>
 				</form>
 			</template>
 			<div v-if="loading" class="loading-screen">
@@ -71,14 +71,14 @@
 				<p>{{ t('spreed', 'Updating permissions') }}</p>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import { PARTICIPANT } from '../../constants.js'
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 const PERMISSIONS = PARTICIPANT.PERMISSIONS
 
@@ -86,9 +86,9 @@ export default {
 	name: 'PermissionsEditor',
 
 	components: {
-		CheckboxRadioSwitch,
-		Modal,
-		ButtonVue,
+		NcCheckboxRadioSwitch,
+		NcModal,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 8704dd56a..eb868f1a6 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -45,19 +45,19 @@ components.
 			</blockquote>
 		</div>
 		<div v-if="isNewMessageFormQuote" class="quote__main__right">
-			<ButtonVue type="tertiary"
+			<NcButton type="tertiary"
 				:aria-label="cancelQuoteLabel"
 				@click="handleAbortReply">
 				<template #icon>
 					<Close :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</div>
 	</a>
 </template>
 
 <script>
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Close from 'vue-material-design-icons/Close.vue'
 import RichText from '@juliushaertl/vue-richtext'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
@@ -67,7 +67,7 @@ import { EventBus } from '../services/EventBus.js'
 export default {
 	name: 'Quote',
 	components: {
-		ButtonVue,
+		NcButton,
 		Close,
 		RichText,
 	},
diff --git a/src/components/RightSidebar/LobbyStatus.vue b/src/components/RightSidebar/LobbyStatus.vue
index b409538c5..60c6f476e 100644
--- a/src/components/RightSidebar/LobbyStatus.vue
+++ b/src/components/RightSidebar/LobbyStatus.vue
@@ -20,19 +20,19 @@
 -->
 
 <template>
-	<ButtonVue type="primary" @click="disableLobby">
+	<NcButton type="primary" @click="disableLobby">
 		{{ t('spreed', 'Disable lobby' ) }}
-	</ButtonVue>
+	</NcButton>
 </template>
 
 <script>
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'LobbyStatus',
 	components: {
-		ButtonVue,
+		NcButton,
 	},
 	props: {
 		token: {
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
index 71c7ce844..71ee2fdda 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.spec.js
@@ -9,9 +9,9 @@ import Microphone from 'vue-material-design-icons/Microphone.vue'
 import Phone from 'vue-material-design-icons/Phone.vue'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText.js'
-import { findActionButton } from '../../../../../test-helpers.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import { findNcActionButton } from '../../../../../test-helpers.js'
 
 import Participant from './Participant.vue'
 
@@ -97,7 +97,7 @@ describe('Participant.vue', () => {
 				showUserStatus,
 			},
 			stubs: {
-				ActionButton,
+				NcActionButton,
 			},
 			directives: {
 				tooltip: tooltipMock,
@@ -391,7 +391,7 @@ describe('Participant.vue', () => {
 			 */
 			async function testCanDemote() {
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Demote from moderator')
+				const actionButton = findNcActionButton(wrapper, 'Demote from moderator')
 				expect(actionButton.exists()).toBe(true)
 
 				await actionButton.find('button').trigger('click')
@@ -407,7 +407,7 @@ describe('Participant.vue', () => {
 			 */
 			async function testCannotDemote() {
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Demote to moderator')
+				const actionButton = findNcActionButton(wrapper, 'Demote to moderator')
 				expect(actionButton.exists()).toBe(false)
 			}
 
@@ -483,7 +483,7 @@ describe('Participant.vue', () => {
 			 */
 			async function testCanPromote() {
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Promote to moderator')
+				const actionButton = findNcActionButton(wrapper, 'Promote to moderator')
 				expect(actionButton.exists()).toBe(true)
 
 				await actionButton.find('button').trigger('click')
@@ -499,7 +499,7 @@ describe('Participant.vue', () => {
 			 */
 			async function testCannotPromote() {
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Promote to moderator')
+				const actionButton = findNcActionButton(wrapper, 'Promote to moderator')
 				expect(actionButton.exists()).toBe(false)
 			}
 
@@ -575,7 +575,7 @@ describe('Participant.vue', () => {
 				conversation.participantType = PARTICIPANT.TYPE.MODERATOR
 				participant.actorType = ATTENDEE.ACTOR_TYPE.EMAILS
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Resend invitation')
+				const actionButton = findNcActionButton(wrapper, 'Resend invitation')
 				expect(actionButton.exists()).toBe(true)
 
 				await actionButton.find('button').trigger('click')
@@ -589,14 +589,14 @@ describe('Participant.vue', () => {
 			test('does not allow non-moderators to resend invitations', async () => {
 				participant.actorType = ATTENDEE.ACTOR_TYPE.EMAILS
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Resend invitation')
+				const actionButton = findNcActionButton(wrapper, 'Resend invitation')
 				expect(actionButton.exists()).toBe(false)
 			})
 
 			test('does not display resend invitations action when not an email actor', async () => {
 				participant.actorType = ATTENDEE.ACTOR_TYPE.USERS
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Resend invitation')
+				const actionButton = findNcActionButton(wrapper, 'Resend invitation')
 				expect(actionButton.exists()).toBe(false)
 			})
 		})
@@ -615,7 +615,7 @@ describe('Participant.vue', () => {
 			 */
 			async function testCanRemove(buttonText = 'Remove participant') {
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, buttonText)
+				const actionButton = findNcActionButton(wrapper, buttonText)
 				expect(actionButton.exists()).toBe(true)
 
 				await actionButton.find('button').trigger('click')
@@ -631,7 +631,7 @@ describe('Participant.vue', () => {
 			 */
 			async function testCannotRemove() {
 				const wrapper = mountParticipant(participant)
-				const actionButton = findActionButton(wrapper, 'Remove participant')
+				const actionButton = findNcActionButton(wrapper, 'Remove participant')
 				expect(actionButton.exists()).toBe(false)
 			}
 
@@ -698,7 +698,7 @@ describe('Participant.vue', () => {
 			 */
 			function testPinVisible() {
 				const wrapper = mountParticipant(participant)
-				let actionTexts = wrapper.findAllComponents(ActionText)
+				let actionTexts = wrapper.findAllComponents(NcActionText)
 				actionTexts = actionTexts.filter((actionText) => {
 					return actionText.props('title').indexOf('PIN') >= 0
 				})
@@ -723,7 +723,7 @@ describe('Participant.vue', () => {
 				conversation.participantType = PARTICIPANT.TYPE.USER
 				participant.attendeePin = '12345678'
 				const wrapper = mountParticipant(participant)
-				let actionTexts = wrapper.findAllComponents(ActionText)
+				let actionTexts = wrapper.findAllComponents(NcActionText)
 				actionTexts = actionTexts.filter((actionText) => {
 					return actionText.props('title').indexOf('PIN') >= 0
 				})
@@ -735,7 +735,7 @@ describe('Participant.vue', () => {
 				conversation.participantType = PARTICIPANT.TYPE.MODERATOR
 				participant.attendeePin = ''
 				const wrapper = mountParticipant(participant)
-				let actionTexts = wrapper.findAllComponents(ActionText)
+				let actionTexts = wrapper.findAllComponents(NcActionText)
 				actionTexts = actionTexts.filter((actionText) => {
 					return actionText.props('title').indexOf('PIN') >= 0
 				})
@@ -755,7 +755,7 @@ describe('Participant.vue', () => {
 			const wrapper = mountParticipant(participant)
 
 			// no actions
-			expect(wrapper.findAllComponents(ActionButton).exists()).toBe(false)
+			expect(wrapper.findAllComponents(NcActionButton).exists()).toBe(false)
 		})
 
 		test('triggers event when clicking', async () => {
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index e1b5024c7..c44ca0371 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -89,7 +89,7 @@
 		</div>
 
 		<!-- Participant's actions menu -->
-		<Actions v-if="canBeModerated && !isSearched"
+		<NcActions v-if="canBeModerated && !isSearched"
 			:container="container"
 			:aria-label="participantSettingsAriaLabel"
 			:force-menu="true"
@@ -104,77 +104,77 @@
 				<DotsHorizontal v-else
 					:size="20" />
 			</template>
-			<ActionText v-if="attendeePin"
+			<NcActionText v-if="attendeePin"
 				:title="t('spreed', 'Dial-in PIN')"
 				icon="icon-password">
 				{{ attendeePin }}
-			</ActionText>
-			<ActionButton v-if="canBeDemoted"
+			</NcActionText>
+			<NcActionButton v-if="canBeDemoted"
 				:close-after-click="true"
 				@click="demoteFromModerator">
 				<template #icon>
 					<Account :size="20" />
 					{{ t('spreed', 'Demote from moderator') }}
 				</template>
-			</ActionButton>
-			<ActionButton v-if="canBePromoted"
+			</NcActionButton>
+			<NcActionButton v-if="canBePromoted"
 				:close-after-click="true"
 				@click="promoteToModerator">
 				<template #icon>
 					<Crown :size="20" />
 				</template>
 				{{ t('spreed', 'Promote to moderator') }}
-			</ActionButton>
+			</NcActionButton>
 
 			<!-- Permissions -->
 			<template v-if="showPermissionsOptions">
-				<ActionSeparator />
-				<ActionButton v-if="hasNonDefaultPermissions"
+				<NcActionSeparator />
+				<NcActionButton v-if="hasNonDefaultPermissions"
 					:close-after-click="true"
 					@click="applyDefaultPermissions">
 					<template #icon>
 						<LockReset :size="20" />
 					</template>
 					{{ t('spreed', 'Reset custom permissions') }}
-				</ActionButton>
-				<ActionButton :close-after-click="true"
+				</NcActionButton>
+				<NcActionButton :close-after-click="true"
 					@click="grantAllPermissions">
 					<template #icon>
 						<LockOpenVariant :size="20" />
 					</template>
 					{{ t('spreed', 'Grant all permissions') }}
-				</ActionButton>
-				<ActionButton :close-after-click="true"
+				</NcActionButton>
+				<NcActionButton :close-after-click="true"
 					@click="removeAllPermissions">
 					<template #icon>
 						<Lock :size="20" />
 					</template>
 					{{ t('spreed', 'Remove all permissions') }}
-				</ActionButton>
-				<ActionButton :close-after-click="true"
+				</NcActionButton>
+				<NcActionButton :close-after-click="true"
 					@click="showPermissionsEditor">
 					<template #icon>
 						<Pencil :size="20" />
 					</template>
 					{{ t('spreed', 'Edit permissions') }}
-				</ActionButton>
+				</NcActionButton>
 			</template>
-			<ActionButton v-if="isEmailActor"
+			<NcActionButton v-if="isEmailActor"
 				icon="icon-mail"
 				:close-after-click="true"
 				@click="resendInvitation">
 				{{ t('spreed', 'Resend invitation') }}
-			</ActionButton>
-			<ActionButton v-if="canSendCallNotification"
+			</NcActionButton>
+			<NcActionButton v-if="canSendCallNotification"
 				:close-after-click="true"
 				@click="sendCallNotification">
 				<template #icon>
 					<Bell :size="20" />
 				</template>
 				{{ t('spreed', 'Send call notification') }}
-			</ActionButton>
-			<ActionSeparator v-if="attendeePin || canBePromoted || canBeDemoted || isEmailActor" />
-			<ActionButton icon="icon-delete"
+			</NcActionButton>
+			<NcActionSeparator v-if="attendeePin || canBePromoted || canBeDemoted || isEmailActor" />
+			<NcActionButton icon="icon-delete"
 				:close-after-click="true"
 				@click="removeParticipant">
 				<template v-if="isGroup">
@@ -183,8 +183,8 @@
 				<template v-else>
 					{{ t('spreed', 'Remove participant') }}
 				</template>
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 		<ParticipantPermissionsEditor v-if="permissionsEditor"
 			:actor-id="participant.actorId"
 			:close-after-click="true"
@@ -199,11 +199,11 @@
 <script>
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import ActionText from '@nextcloud/vue/dist/Components/ActionText.js'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../../../constants.js'
 import UserStatus from '../../../../../mixins/userStatus.js'
 import readableNumber from '../../../../../mixins/readableNumber.js'
@@ -230,10 +230,10 @@ export default {
 	name: 'Participant',
 
 	components: {
-		Actions,
-		ActionButton,
-		ActionText,
-		ActionSeparator,
+		NcActions,
+		NcActionButton,
+		NcActionText,
+		NcActionSeparator,
 		AvatarWrapper,
 		ParticipantPermissionsEditor,
 
diff --git a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
index ba94c2fed..392dcb4be 100644
--- a/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue
@@ -23,34 +23,34 @@
 	<div class="participants-search-results"
 		:class="{'scrollable': scrollable }">
 		<template v-if="addableUsers.length !== 0">
-			<AppNavigationCaption :title="t('spreed', 'Add users')" />
+			<NcAppNavigationCaption :title="t('spreed', 'Add users')" />
 			<ParticipantsList :items="addableUsers"
 				@click="handleClickParticipant" />
 		</template>
 
 		<template v-if="addableGroups.length !== 0">
-			<AppNavigationCaption :title="t('spreed', 'Add groups')" />
+			<NcAppNavigationCaption :title="t('spreed', 'Add groups')" />
 			<ParticipantsList :items="addableGroups"
 				@click="handleClickParticipant" />
 		</template>
 
 		<template v-if="addableEmails.length !== 0">
-			<AppNavigationCaption :title="t('spreed', 'Add emails')" />
+			<NcAppNavigationCaption :title="t('spreed', 'Add emails')" />
 			<ParticipantsList :items="addableEmails"
 				@click="handleClickParticipant" />
 		</template>
 
 		<template v-if="addableCircles.length !== 0">
-			<AppNavigationCaption :title="t('spreed', 'Add circles')" />
+			<NcAppNavigationCaption :title="t('spreed', 'Add circles')" />
 			<ParticipantsList :items="addableCircles"
 				@click="handleClickParticipant" />
 		</template>
 
 		<!-- integrations -->
 		<template v-if="integrations.length !== 0">
-			<AppNavigationCaption :title="t('spreed', 'Integrations')" />
+			<NcAppNavigationCaption :title="t('spreed', 'Integrations')" />
 			<ul>
-				<ButtonVue v-for="(integration, index) in integrations"
+				<NcButton v-for="(integration, index) in integrations"
 					:key="'integration' + index"
 					type="tertiary-no-background"
 					@click="runIntegration(integration)">
@@ -59,16 +59,16 @@
 						<AccountPlus :size="20" />
 					</template>
 					{{ integration.label }}
-				</ButtonVue>
+				</NcButton>
 			</ul>
 		</template>
 
 		<template v-if="addableRemotes.length !== 0">
-			<AppNavigationCaption :title="t('spreed', 'Add federated users')" />
+			<NcAppNavigationCaption :title="t('spreed', 'Add federated users')" />
 			<ParticipantsList :items="addableRemotes"
 				@click="handleClickParticipant" />
 		</template>
-		<AppNavigationCaption v-if="sourcesWithoutResults"
+		<NcAppNavigationCaption v-if="sourcesWithoutResults"
 			:title="sourcesWithoutResultsList" />
 		<Hint v-if="contactsLoading" :hint="t('spreed', 'Searching …')" />
 		<Hint v-if="!contactsLoading && sourcesWithoutResults" :hint="t('spreed', 'No search results')" />
@@ -98,20 +98,20 @@
 
 <script>
 import ParticipantsList from '../ParticipantsList/ParticipantsList.vue'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import Hint from '../../../Hint.vue'
 import AccountPlus from 'vue-material-design-icons/AccountPlus.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'ParticipantsSearchResults',
 
 	components: {
 		ParticipantsList,
-		AppNavigationCaption,
+		NcAppNavigationCaption,
 		Hint,
 		AccountPlus,
-		ButtonVue,
+		NcButton,
 	},
 
 	props: {
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index a8f56b0fa..d45c32462 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -27,7 +27,7 @@
 			:is-searching="isSearching"
 			@input="handleInput"
 			@abort-search="abortSearch" />
-		<AppNavigationCaption v-if="isSearching && canAdd"
+		<NcAppNavigationCaption v-if="isSearching && canAdd"
 			:title="t('spreed', 'Participants')" />
 		<CurrentParticipants :search-text="searchText"
 			:participants-initialised="participantsInitialised" />
@@ -50,14 +50,14 @@ import { addParticipant } from '../../../services/participantsService.js'
 import { loadState } from '@nextcloud/initial-state'
 import CancelableRequest from '../../../utils/cancelableRequest.js'
 import { showError } from '@nextcloud/dialogs'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import ParticipantsSearchResults from './ParticipantsSearchResults/ParticipantsSearchResults.vue'
 import getParticipants from '../../../mixins/getParticipants.js'
 
 export default {
 	name: 'ParticipantsTab',
 	components: {
-		AppNavigationCaption,
+		NcAppNavigationCaption,
 		CurrentParticipants,
 		SearchBox,
 		ParticipantsSearchResults,
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
index 798fe3c3e..250c3823d 100644
--- a/src/components/RightSidebar/RightSidebar.vue
+++ b/src/components/RightSidebar/RightSidebar.vue
@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<AppSidebar v-show="opened"
+	<NcAppSidebar v-show="opened"
 		id="app-sidebar"
 		:title="title"
 		:title-tooltip="title"
@@ -39,7 +39,7 @@
 		<template slot="description">
 			<LobbyStatus v-if="canFullModerate && hasLobbyEnabled" :token="token" />
 		</template>
-		<AppSidebarTab v-if="showChatInSidebar"
+		<NcAppSidebarTab v-if="showChatInSidebar"
 			id="chat"
 			:order="1"
 			:name="t('spreed', 'Chat')">
@@ -47,8 +47,8 @@
 				<Message :size="20" />
 			</template>
 			<ChatView :is-visible="opened" />
-		</AppSidebarTab>
-		<AppSidebarTab v-if="getUserId && !isOneToOne"
+		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="getUserId && !isOneToOne"
 			id="participants"
 			ref="participantsTab"
 			:order="2"
@@ -59,8 +59,8 @@
 			<ParticipantsTab :is-active="activeTab === 'participants'"
 				:can-search="canSearchParticipants"
 				:can-add="canAddParticipants" />
-		</AppSidebarTab>
-		<AppSidebarTab v-if="!getUserId || showSIPSettings"
+		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="!getUserId || showSIPSettings"
 			id="details-tab"
 			:order="3"
 			:name="t('spreed', 'Details')">
@@ -73,16 +73,16 @@
 				:attendee-pin="conversation.attendeePin" />
 			<div v-if="!getUserId" id="app-settings">
 				<div id="app-settings-header">
-					<ButtonVue type="tertiary" @click="showSettings">
+					<NcButton type="tertiary" @click="showSettings">
 						<template #icon>
 							<CogIcon :size="20" />
 						</template>
 						{{ t('spreed', 'Settings') }}
-					</ButtonVue>
+					</NcButton>
 				</div>
 			</div>
-		</AppSidebarTab>
-		<AppSidebarTab v-if="getUserId"
+		</NcAppSidebarTab>
+		<NcAppSidebarTab v-if="getUserId"
 			id="shared-items"
 			ref="sharedItemsTab"
 			:order="4"
@@ -91,14 +91,14 @@
 				<FolderMultipleImage :size="20" />
 			</template>
 			<SharedItemsTab :active="activeTab === 'shared-items'" />
-		</AppSidebarTab>
-	</AppSidebar>
+		</NcAppSidebarTab>
+	</NcAppSidebar>
 </template>
 
 <script>
 import { emit } from '@nextcloud/event-bus'
-import AppSidebar from '@nextcloud/vue/dist/Components/AppSidebar.js'
-import AppSidebarTab from '@nextcloud/vue/dist/Components/AppSidebarTab.js'
+import NcAppSidebar from '@nextcloud/vue/dist/Components/NcAppSidebar.js'
+import NcAppSidebarTab from '@nextcloud/vue/dist/Components/NcAppSidebarTab.js'
 import SharedItemsTab from './SharedItems/SharedItemsTab.vue'
 import ChatView from '../ChatView.vue'
 import BrowserStorage from '../../services/BrowserStorage.js'
@@ -108,7 +108,7 @@ import isInLobby from '../../mixins/isInLobby.js'
 import SetGuestUsername from '../SetGuestUsername.vue'
 import SipSettings from './SipSettings.vue'
 import LobbyStatus from './LobbyStatus.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'
 import FolderMultipleImage from 'vue-material-design-icons/FolderMultipleImage.vue'
@@ -118,15 +118,15 @@ import Message from 'vue-material-design-icons/Message.vue'
 export default {
 	name: 'RightSidebar',
 	components: {
-		AppSidebar,
-		AppSidebarTab,
+		NcAppSidebar,
+		NcAppSidebarTab,
 		SharedItemsTab,
 		ChatView,
 		ParticipantsTab,
 		SetGuestUsername,
 		SipSettings,
 		LobbyStatus,
-		ButtonVue,
+		NcButton,
 		AccountMultiple,
 		CogIcon,
 		FolderMultipleImage,
@@ -205,7 +205,7 @@ export default {
 		},
 
 		/**
-		 * The conversation title value passed into the AppSidebar component.
+		 * The conversation title value passed into the NcAppSidebar component.
 		 *
 		 * @return {string} The conversation's title.
 		 */
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index 51dc47f6c..de6d31776 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
@@ -20,17 +20,17 @@
 -->
 
 <template>
-	<Modal size="large" :container="container" v-on="$listeners">
+	<NcModal size="large" :container="container" v-on="$listeners">
 		<div class="shared-items-browser">
 			<div class="shared-items-browser__navigation">
 				<template v-for="type in sharedItemsOrder">
-					<ButtonVue v-if="sharedItems[type]"
+					<NcButton v-if="sharedItems[type]"
 						:key="type"
 						:class="{'active' : activeTab === type}"
 						type="tertiary"
 						@click="handleTabClick(type)">
 						{{ getTitle(type) }}
-					</ButtonVue>
+					</NcButton>
 				</template>
 			</div>
 			<div ref="scroller" class="shared-items-browser__content" @scroll="debounceHandleScroll">
@@ -38,12 +38,12 @@
 					:items="sharedItems[activeTab]" />
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import SharedItems from '../SharedItems.vue'
 import sharedItems from '../../../../mixins/sharedItems.js'
 import debounce from 'debounce'
@@ -52,8 +52,8 @@ export default {
 	name: 'SharedItemsBrowser',
 
 	components: {
-		ButtonVue,
-		Modal,
+		NcButton,
+		NcModal,
 		SharedItems,
 	},
 
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
index e004467b1..967f122d3 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsTab.vue
@@ -23,11 +23,11 @@
 	<div v-if="!loading && active">
 		<template v-for="type in sharedItemsOrder">
 			<div v-if="sharedItems[type]" :key="type">
-				<AppNavigationCaption :title="getTitle(type)" />
+				<NcAppNavigationCaption :title="getTitle(type)" />
 				<SharedItems :type="type"
 					:limit="limit(type)"
 					:items="sharedItems[type]" />
-				<ButtonVue v-if="hasMore(sharedItems[type])"
+				<NcButton v-if="hasMore(sharedItems[type])"
 					type="tertiary-no-background"
 					class="more"
 					:wide="true"
@@ -36,10 +36,10 @@
 						<DotsHorizontal :size="20" />
 					</template>
 					{{ getButtonTitle(type) }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</template>
-		<AppNavigationCaption :title="t('spreed', 'Projects')" />
+		<NcAppNavigationCaption :title="t('spreed', 'Projects')" />
 		<CollectionList v-if="getUserId && token"
 			:id="token"
 			type="room"
@@ -56,10 +56,10 @@
 import { CollectionList } from 'nextcloud-vue-collections'
 import SharedItems from './SharedItems.vue'
 import { SHARED_ITEM } from '../../../constants.js'
-import AppNavigationCaption from '@nextcloud/vue/dist/Components/AppNavigationCaption.js'
+import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import SharedItemsBrowser from './SharedItemsBrowser/SharedItemsBrowser.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import sharedItems from '../../../mixins/sharedItems.js'
 
 export default {
@@ -69,10 +69,10 @@ export default {
 	components: {
 		SharedItems,
 		CollectionList,
-		AppNavigationCaption,
+		NcAppNavigationCaption,
 		SharedItemsBrowser,
 		DotsHorizontal,
-		ButtonVue,
+		NcButton,
 	},
 
 	mixins: [sharedItems],
diff --git a/src/components/SetGuestUsername.vue b/src/components/SetGuestUsername.vue
index 763542ba0..b02324b9e 100644
--- a/src/components/SetGuestUsername.vue
+++ b/src/components/SetGuestUsername.vue
@@ -25,12 +25,12 @@
 		@submit.prevent="handleChooseUserName">
 		<!-- eslint-disable-next-line vue/no-v-html -->
 		<h3 v-html="displayNameLabel" />
-		<ButtonVue @click.prevent="handleEditUsername">
+		<NcButton @click.prevent="handleEditUsername">
 			{{ t('spreed', 'Edit') }}
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
-		</ButtonVue>
+		</NcButton>
 		<div v-if="isEditingUsername"
 			class="username-form__wrapper">
 			<input ref="usernameInput"
@@ -40,21 +40,21 @@
 				type="text"
 				@keydown.enter="handleChooseUserName"
 				@keydown.esc="isEditingUsername = !isEditingUsername">
-			<ButtonVue class="username-form__button"
+			<NcButton class="username-form__button"
 				native-type="submit"
 				:aria-label="t('spreed', 'Save name')"
 				type="tertiary">
 				<template #icon>
 					<ArrowRight :size="20" />
 				</template>
-			</ButtonVue>
+			</NcButton>
 		</div>
 	</form>
 </template>
 
 <script>
 import { setGuestUserName } from '../services/participantsService.js'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
@@ -62,7 +62,7 @@ export default {
 	name: 'SetGuestUsername',
 
 	components: {
-		ButtonVue,
+		NcButton,
 		Pencil,
 		ArrowRight,
 	},
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index e2b11b962..d2e905505 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/src/components/SettingsDialog/SettingsDialog.vue
@@ -20,16 +20,16 @@
 -->
 
 <template>
-	<AppSettingsDialog :open.sync="showSettings"
+	<NcAppSettingsDialog :open.sync="showSettings"
 		:show-navigation="true"
 		first-selected-section="keyboard shortcuts"
 		:container="container">
-		<AppSettingsSection id="devices"
+		<NcAppSettingsSection id="devices"
 			:title="t('spreed', 'Choose devices')"
 			class="app-settings-section">
 			<MediaDevicesPreview />
-		</AppSettingsSection>
-		<AppSettingsSection v-if="!isGuest"
+		</NcAppSettingsSection>
+		<NcAppSettingsSection v-if="!isGuest"
 			id="attachments"
 			:title="t('spreed', 'Attachments folder')"
 			class="app-settings-section">
@@ -41,31 +41,31 @@
 				:value="attachmentFolder"
 				:disabled="attachmentFolderLoading"
 				@click="selectAttachmentFolder">
-		</AppSettingsSection>
-		<AppSettingsSection v-if="!isGuest"
+		</NcAppSettingsSection>
+		<NcAppSettingsSection v-if="!isGuest"
 			id="privacy"
 			:title="t('spreed', 'Privacy')"
 			class="app-settings-section">
-			<CheckboxRadioSwitch id="read_status_privacy"
+			<NcCheckboxRadioSwitch id="read_status_privacy"
 				:checked="readStatusPrivacyIsPublic"
 				:disabled="privacyLoading"
 				type="switch"
 				class="checkbox"
 				@update:checked="toggleReadStatusPrivacy">
 				{{ t('spreed', 'Share my read-status and show the read-status of others') }}
-			</CheckboxRadioSwitch>
-		</AppSettingsSection>
-		<AppSettingsSection id="sounds"
+			</NcCheckboxRadioSwitch>
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="sounds"
 			:title="t('spreed', 'Sounds')"
 			class="app-settings-section">
-			<CheckboxRadioSwitch id="play_sounds"
+			<NcCheckboxRadioSwitch id="play_sounds"
 				:checked="playSounds"
 				:disabled="playSoundsLoading"
 				type="switch"
 				class="checkbox"
 				@update:checked="togglePlaySounds">
 				{{ t('spreed', 'Play sounds when participants join or leave a call') }}
-			</CheckboxRadioSwitch>
+			</NcCheckboxRadioSwitch>
 			<em>{{ t('spreed', 'Sounds can currently not be played in Safari browser and iPad and iPhone devices due to technical restrictions by the manufacturer.') }}</em>
 
 			<a :href="settingsUrl"
@@ -74,8 +74,8 @@
 				class="external">
 				{{ t('spreed', 'Sounds for chat and call notifications can be adjusted in the personal settings.') }} ↗
 			</a>
-		</AppSettingsSection>
-		<AppSettingsSection id="shortcuts"
+		</NcAppSettingsSection>
+		<NcAppSettingsSection id="shortcuts"
 			:title="t('spreed', 'Keyboard shortcuts')">
 			<em>{{ t('spreed', 'Speed up your Talk experience with these quick shortcuts.') }}</em>
 
@@ -133,8 +133,8 @@
 					</dd>
 				</div>
 			</dl>
-		</AppSettingsSection>
-	</AppSettingsDialog>
+		</NcAppSettingsSection>
+	</NcAppSettingsDialog>
 </template>
 
 <script>
@@ -143,18 +143,18 @@ import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs
 import { PRIVACY } from '../../constants.js'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import MediaDevicesPreview from '../MediaDevicesPreview.vue'
-import AppSettingsDialog from '@nextcloud/vue/dist/Components/AppSettingsDialog.js'
-import AppSettingsSection from '@nextcloud/vue/dist/Components/AppSettingsSection.js'
-import CheckboxRadioSwitch from '@nextcloud/vue/dist/Components/CheckboxRadioSwitch.js'
+import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
+import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 
 export default {
 	name: 'SettingsDialog',
 
 	components: {
 		MediaDevicesPreview,
-		AppSettingsDialog,
-		AppSettingsSection,
-		CheckboxRadioSwitch,
+		NcAppSettingsDialog,
+		NcAppSettingsSection,
+		NcCheckboxRadioSwitch,
 	},
 
 	data() {
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 2945bff1f..03f33f4e5 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<div>
-		<ButtonVue v-if="showStartCallButton"
+		<NcButton v-if="showStartCallButton"
 			id="call_button"
 			v-tooltip="{
 				placement: 'auto',
@@ -37,8 +37,8 @@
 				<VideoIcon :size="20" />
 			</template>
 			{{ startCallLabel }}
-		</ButtonVue>
-		<ButtonVue v-else-if="showLeaveCallButton && !canEndForAll"
+		</NcButton>
+		<NcButton v-else-if="showLeaveCallButton && !canEndForAll"
 			id="call_button"
 			type="error"
 			:disabled="loading"
@@ -47,27 +47,27 @@
 				<VideoOff :size="20" />
 			</template>
 			{{ leaveCallLabel }}
-		</ButtonVue>
-		<Actions v-else-if="showLeaveCallButton && canEndForAll"
+		</NcButton>
+		<NcActions v-else-if="showLeaveCallButton && canEndForAll"
 			:disabled="loading">
 			<template #icon>
 				<VideoOff :size="16" />
 				<span class="label">{{ leaveCallLabel }}</span>
 				<MenuDown :size="16" />
 			</template>
-			<ActionButton @click="leaveCall(false)">
+			<NcActionButton @click="leaveCall(false)">
 				<template #icon>
 					<VideoOff :size="20" />
 				</template>
 				{{ leaveCallLabel }}
-			</ActionButton>
-			<ActionButton @click="leaveCall(true)">
+			</NcActionButton>
+			<NcActionButton @click="leaveCall(true)">
 				<template #icon>
 					<VideoOff :size="20" />
 				</template>
 				{{ t('spreed', 'End meeting for all') }}
-			</ActionButton>
-		</Actions>
+			</NcActionButton>
+		</NcActions>
 	</div>
 </template>
 
@@ -81,12 +81,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import BrowserStorage from '../../services/BrowserStorage.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import VideoIcon from 'vue-material-design-icons/Video.vue'
 import VideoOff from 'vue-material-design-icons/VideoOff.vue'
 import MenuDown from 'vue-material-design-icons/MenuDown.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'CallButton',
@@ -96,12 +96,12 @@ export default {
 	},
 
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 		VideoIcon,
 		VideoOff,
 		MenuDown,
-		ButtonVue,
+		NcButton,
 	},
 
 	mixins: [
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 38e45ef25..28987937c 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -69,7 +69,7 @@
 				class="top-bar__separator" />
 
 			<!-- sidebar toggle -->
-			<Actions v-if="!isSidebar"
+			<NcActions v-if="!isSidebar"
 				v-shortkey.once="['f']"
 				class="top-bar__button"
 				:aria-label="t('spreed', 'Conversation actions')"
@@ -79,86 +79,86 @@
 					:class="{'top-bar__button__force-white': isInCall}">
 					<Cog :size="20" />
 				</span>
-				<ActionButton :icon="iconFullscreen"
+				<NcActionButton :icon="iconFullscreen"
 					:aria-label="t('spreed', 'Toggle fullscreen')"
 					:close-after-click="true"
 					@click="toggleFullscreen">
 					{{ labelFullscreen }}
-				</ActionButton>
-				<ActionSeparator v-if="showModerationOptions" />
-				<ActionLink v-if="isFileConversation"
+				</NcActionButton>
+				<NcActionSeparator v-if="showModerationOptions" />
+				<NcActionLink v-if="isFileConversation"
 					:href="linkToFile">
 					<File slot="icon"
 						:size="20" />
 					{{ t('spreed', 'Go to file') }}
-				</ActionLink>
+				</NcActionLink>
 				<template v-if="showModerationOptions">
-					<ActionButton :close-after-click="true"
+					<NcActionButton :close-after-click="true"
 						icon="icon-rename"
 						@click="handleRenameConversation">
 						{{ t('spreed', 'Rename conversation') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
-				<ActionButton v-if="!isOneToOneConversation"
+				<NcActionButton v-if="!isOneToOneConversation"
 					icon="icon-clippy"
 					:close-after-click="true"
 					@click="handleCopyLink">
 					{{ t('spreed', 'Copy link') }}
-				</ActionButton>
+				</NcActionButton>
 				<template v-if="showModerationOptions && canFullModerate && isInCall">
-					<ActionSeparator />
-					<ActionButton :close-after-click="true"
+					<NcActionSeparator />
+					<NcActionButton :close-after-click="true"
 						@click="forceMuteOthers">
 						<MicrophoneOff slot="icon"
 							:size="20" />
 						{{ t('spreed', 'Mute others') }}
-					</ActionButton>
+					</NcActionButton>
 				</template>
-				<ActionSeparator v-if="showModerationOptions" />
-				<ActionButton :close-after-click="true"
+				<NcActionSeparator v-if="showModerationOptions" />
+				<NcActionButton :close-after-click="true"
 					@click="openConversationSettings">
 					<template #icon>
 						<Cog :size="20" />
 					</template>
 					{{ t('spreed', 'Conversation settings') }}
-				</ActionButton>
-			</Actions>
-			<Actions v-if="showOpenSidebarButton"
+				</NcActionButton>
+			</NcActions>
+			<NcActions v-if="showOpenSidebarButton"
 				class="top-bar__button"
 				close-after-click="true"
 				:container="container">
-				<ActionButton v-if="isInCall"
+				<NcActionButton v-if="isInCall"
 					key="openSideBarButtonMessageText"
 					@click="openSidebar">
 					<MessageText slot="icon"
 						:size="20"
 						fill-color="#ffffff" />
-				</ActionButton>
-				<ActionButton v-else
+				</NcActionButton>
+				<NcActionButton v-else
 					key="openSideBarButtonMenuPeople"
 					@click="openSidebar">
 					<MenuPeople slot="icon"
 						:size="20" />
-				</ActionButton>
-			</Actions>
+				</NcActionButton>
+			</NcActions>
 		</div>
-		<CounterBubble v-if="!isSidebar && showOpenSidebarButton && isInCall && unreadMessagesCounter > 0"
+		<NcCounterBubble v-if="!isSidebar && showOpenSidebarButton && isInCall && unreadMessagesCounter > 0"
 			class="unread-messages-counter"
 			:highlighted="hasUnreadMentions">
 			{{ unreadMessagesCounter }}
-		</CounterBubble>
+		</NcCounterBubble>
 	</div>
 </template>
 
 <script>
 import { showError, showSuccess, showMessage } from '@nextcloud/dialogs'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton.js'
-import Actions from '@nextcloud/vue/dist/Components/Actions.js'
-import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble.js'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
 import CallButton from './CallButton.vue'
 import BrowserStorage from '../../services/BrowserStorage.js'
-import ActionLink from '@nextcloud/vue/dist/Components/ActionLink.js'
-import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator.js'
+import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
+import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import File from 'vue-material-design-icons/File.vue'
 import MenuPeople from '../missingMaterialDesignIcons/MenuPeople.vue'
 import MessageText from 'vue-material-design-icons/MessageText.vue'
@@ -183,12 +183,12 @@ export default {
 	},
 
 	components: {
-		ActionButton,
-		Actions,
-		ActionLink,
-		CounterBubble,
+		NcActionButton,
+		NcActions,
+		NcActionLink,
+		NcCounterBubble,
 		CallButton,
-		ActionSeparator,
+		NcActionSeparator,
 		File,
 		MenuPeople,
 		MessageText,
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 6e0341c46..a17e6d9ac 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<Modal v-if="showModal"
+	<NcModal v-if="showModal"
 		:size="isVoiceMessage ? 'small' : 'normal'"
 		class="upload-editor"
 		:container="container"
@@ -45,14 +45,14 @@
 					</template>
 					<div :key="'addMore'"
 						class="add-more">
-						<ButtonVue :aria-label="addMoreAriaLabel"
+						<NcButton :aria-label="addMoreAriaLabel"
 							type="primary"
 							class="add-more__button"
 							@click="clickImportInput">
 							<template #icon>
 								<Plus :size="48" />
 							</template>
-						</ButtonVue>
+						</NcButton>
 					</div>
 				</transition-group>
 			</template>
@@ -61,34 +61,34 @@
 					:local-url="voiceMessageLocalURL" />
 			</template>
 			<div class="upload-editor__actions">
-				<ButtonVue type="tertiary" @click="handleDismiss">
+				<NcButton type="tertiary" @click="handleDismiss">
 					{{ t('spreed', 'Dismiss') }}
-				</ButtonVue>
-				<ButtonVue ref="submitButton" type="primary" @click="handleUpload">
+				</NcButton>
+				<NcButton ref="submitButton" type="primary" @click="handleUpload">
 					{{ t('spreed', 'Send') }}
-				</ButtonVue>
+				</NcButton>
 			</div>
 		</div>
-	</Modal>
+	</NcModal>
 </template>
 
 <script>
 
-import Modal from '@nextcloud/vue/dist/Components/Modal.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import AudioPlayer from './MessagesList/MessagesGroup/Message/MessagePart/AudioPlayer.vue'
-import ButtonVue from '@nextcloud/vue/dist/Components/ButtonVue.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
 export default {
 	name: 'UploadEditor',
 
 	components: {
-		Modal,
+		NcModal,
 		FilePreview,
 		Plus,
 		AudioPlayer,
-		ButtonVue,
+		NcButton,
 	},
 
 	computed: {
@@ -170,7 +170,7 @@ export default {
 			this.$store.dispatch('uploadFiles', this.currentUploadId)
 		},
 		/**
-		 * Clicks the hidden file input when clicking the correspondent ActionButton,
+		 * Clicks the hidden file input when clicking the correspondent NcActionButton,
 		 * thus opening the file-picker
 		 */
 		clickImportInput() {