diff --git a/package.json b/package.json
index 1d4b45b..27b4582 100644
--- a/package.json
+++ b/package.json
@@ -34,10 +34,10 @@
 	"dependencies": {
 		"@nextcloud/l10n": "^1.4.1",
 		"@nextcloud/router": "^2.0.0",
-		"@nextcloud/vue": "^3.9.0",
+		"@nextcloud/vue": "^7.11.4",
 		"axios": "^0.21.1",
 		"jquery": "^3.6.0",
-		"vue": "^2.6.12"
+		"vue": "^2.7.14"
 	},
 	"browserslist": [
 		"extends @nextcloud/browserslist-config"
@@ -76,7 +76,7 @@
 		"stylelint-webpack-plugin": "^2.1.1",
 		"vue-loader": "^15.9.6",
 		"vue-style-loader": "^4.1.3",
-		"vue-template-compiler": "^2.6.12",
+		"vue-template-compiler": "^2.7.14",
 		"webpack": "^5.35.0",
 		"webpack-cli": "^4.6.0",
 		"webpack-merge": "^5.7.3",
diff --git a/src/Main.vue b/src/Main.vue
index 2a7b21b..a724e93 100644
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -1,6 +1,6 @@
 <template>
-	<Content :class="{'icon-loading': loading}" app-name="ldapcontacts">
-		<AppNavigation>
+	<NcContent :class="{'icon-loading': loading}" app-name="ldapcontacts">
+		<NcAppNavigation>
 			<div id="navigation-header">
 				<div v-if="groupsLoading || loading" class="loading" />
 
@@ -31,7 +31,7 @@
 				<li v-if="loading">
 					<div class="icon-loading" />
 				</li>
-				<AppNavigationItem
+				<NcAppNavigationItem
 					v-for="contact in visibleContactsList"
 					v-else
 					:key="contact.uuid"
@@ -43,15 +43,15 @@
 			</template>
 
 			<template #footer>
-				<AppNavigationSettings>
+				<NcAppNavigationSettings>
 					<div v-if="loadingOwnContact" class="icon-loading" />
 					<button v-else class="has-input-icon-wrapper" @click="editOwnData">
 						{{ text.editOwnContactDetails }}
 					</button>
-				</AppNavigationSettings>
+				</NcAppNavigationSettings>
 			</template>
-		</AppNavigation>
-		<AppContent>
+		</NcAppNavigation>
+		<NcAppContent>
 			<div v-if="loading" class="icon-loading" />
 			<ContactDetails v-else
 				v-bind="{
@@ -59,17 +59,20 @@
 					editMode: editActiveContact
 				}"
 				@attribute-updated="ldapAttributeUpdated" />
-		</AppContent>
-	</Content>
+		</NcAppContent>
+	</NcContent>
 </template>
 
 <script>
 import ContactDetails from './components/ContactDetails'
-import Content from '@nextcloud/vue/dist/Components/Content'
-import AppContent from '@nextcloud/vue/dist/Components/AppContent'
-import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
-import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
-import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
+import NcContent from '@nextcloud/vue/dist/Components/NcContent'
+import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent'
+import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation'
+import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem'
+import NcAppNavigationSettings from '@nextcloud/vue/dist/Components/NcAppNavigationSettings'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField'
+// import CloseIcon from 'vue-material-design-icons/Close.vue'
+import SearchIcon from 'vue-material-design-icons/AccountSearchOutline.vue'
 import $ from 'jquery'
 import Axios from 'axios'
 Axios.defaults.headers.common.requesttoken = OC.requestToken
@@ -77,11 +80,11 @@ Axios.defaults.headers.common.requesttoken = OC.requestToken
 export default {
 	name: 'Main',
 	components: {
-		Content,
-		AppContent,
-		AppNavigation,
-		AppNavigationItem,
-		AppNavigationSettings,
+		NcContent,
+		NcAppContent,
+		NcAppNavigation,
+		NcAppNavigationItem,
+		NcAppNavigationSettings,
 		ContactDetails,
 	},
 	data() {
diff --git a/src/Settings.vue b/src/Settings.vue
index 36c424b..1c4a266 100644
--- a/src/Settings.vue
+++ b/src/Settings.vue
@@ -19,22 +19,22 @@
 						<td><input v-model="attribute.name" :placeholder="text.ldapAttribute"></td>
 						<td><input v-model="attribute.label" :placeholder="text.label"></td>
 						<td>
-							<Actions>
-								<ActionButton icon="icon-delete" @click="removeAttribute(index)">
+							<NcActions>
+								<NcActionButton icon="icon-delete" @click="removeAttribute(index)">
 									{{ text.delete }}
-								</ActionButton>
-							</Actions>
+								</NcActionButton>
+							</NcActions>
 						</td>
 					</tr>
 				</tbody>
 				<tfoot>
 					<tr>
 						<td>
-							<Actions>
-								<ActionButton icon="icon-add" @click="addAttribute">
+							<NcActions>
+								<NcActionButton icon="icon-add" @click="addAttribute">
 									{{ text.addAttribute }}
-								</ActionButton>
-							</Actions>
+								</NcActionButton>
+							</NcActions>
 						</td>
 						<td class="save-button-wrapper">
 							<button @click="saveLdapAttributes">
@@ -116,8 +116,8 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import $ from 'jquery'
 import Axios from 'axios'
 Axios.defaults.headers.common.requesttoken = OC.requestToken
@@ -125,8 +125,8 @@ Axios.defaults.headers.common.requesttoken = OC.requestToken
 export default {
 	name: 'Settings',
 	components: {
-		ActionButton,
-		Actions,
+		NcActionButton,
+		NcActions,
 	},
 	data() {
 		return {
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index 0bc1293..915654b 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -40,11 +40,11 @@
 							</p>
 						</td>
 						<td>
-							<Actions>
-								<ActionButton icon="icon-clippy" @click="copyToClipboard(contactDetails.ldapAttributes[ attribute.name ])">
+							<NcActions>
+								<NcActionButton icon="icon-clippy" @click="copyToClipboard(contactDetails.ldapAttributes[ attribute.name ])">
 									{{ text.copyToClipboard }}
-								</ActionButton>
-							</Actions>
+								</NcActionButton>
+							</NcActions>
 						</td>
 					</tr>
 
@@ -76,16 +76,16 @@
 </template>
 
 <script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions'
+import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 import $ from 'jquery'
 import Axios from 'axios'
 Axios.defaults.headers.common.requesttoken = OC.requestToken
 
 export default {
 	components: {
-		Actions,
-		ActionButton,
+		NcActions,
+		NcActionButton,
 	},
 	props: {
 		contactDetails: {